@extends('layouts.app')
@section('title') {{'Front Key Image'}} @endsection

@section('content')

<main id="mainWrap">
    <div class="mainWrapIntro">
    <a href="{{ env('APP_URL')}}" class="logoBrind"><img src="{{asset('img/idenikeyLogo.png')}}" class="img-flud" alt=""></a>
        <div class="topContentBlock">
        <div class="topContentBox">
            Take a picture of the key<br>
        <!--<small>Tip: try to fill up the entire box with the key </small> -->
        </div>
    </div>
    <figure class="image-container takePictureBox PictureBoxActive">
            <img id="imgPreview" src="img/keyimg.png" class="img-flud" alt="">
    </figure>

    <form method="post" action="" enctype="multipart/form-data" id="myform">
    @csrf

    <div class="upload_block">

        <div class="uploadBtn btn btn-primary">
           <input class="" type="file" name="file" id="upload_img" accept="image/*">
            <label for="upload_img" class="">
            <img src="img/cameraIcon.svg" class="img-flud cameraIcon" alt="">
               <span> TAKE PHOTO <span>
            </label>
        </div>
    </div>

    <div class="preview_block">
        <div class="uploadBtn">
        <input type="button" class="btn btn-primary" data-url="frontKey" data-name="img1" value="PROCEED" id="proceed_pic">
        <div class="loader">@include('layouts.svg') </div>
        </div>
        <div class="searchHistorybtn">
            <a href="javascript:" class="btn-sm btn-primary retake_pic">RETAKE</a>
        </div>
    </div>

    </form>

</div>
<div class="patentPendingText">Patent Pending</div>
</main>


@endsection