@extends('layouts.main')
@section('content')

<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Face recognition test</h4>
            </div>
            <div class="card-body p-2">

            <form method="post" action="{{route('face_recognition')}}" target="_blank"  enctype="multipart/form-data">
                         <div class="modal-body">           
                             <div class="row">             
                                 <div class="col-md-12">
                                     <div class="form-group">
                                         <img id="face_image" name="face_image" class="face_image" width="155" height="155" src="">
                                     </div>
                                 </div>
             
                                 <div class="col-md-12">
                                     <div class="form-group">
                                         <label class="form-control-label" for="image_file">{{__('strings.choose_image')}}</label>
                                         <input type="file" class="form-control" id="image_file" name='image_file' accept="image/jpeg,image/png" onchange="resizeImage(this);">
                                     </div>
                                 </div>
             
                                 <div class="col-md-6">
                                     <div class="form-group">
                                         <label for="name" class="form-control-label">collection id</label>
                                         <input type="text" id="collection_id" name="collection_id" class="form-control" value="3" required>
                                     </div>
                                 </div>
                                 
                             </div>
                         </div>
                             <input type="submit" value="RUN FACE RECOGNITION" class="btn btn-primary" />
                         </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function resizeImage(input) {
        if (window.File && window.FileReader && window.FileList && window.Blob) {            
            var filesToUploads = input.files;
            var file = filesToUploads[0];
            if (file) {
                var reader = new FileReader();
                // Set the image once loaded into file reader
                reader.onload = function(e) {
                    $('#face_image')
                    .attr('src', e.target.result)
                    .width(155)
                    .height(155);                                     
                }
                reader.readAsDataURL(file);
            }

        } else {
            $.alert('The File APIs are not fully supported in this browser.');
        }
    }
</script>
@endpush