@extends('layouts.app')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
  <div class="main-content">
    <!-- Header -->
    <div class="header bg-gradient-danger pb-8 pt-5 pt-md-6">
       <div class="container-fluid">
          <div class="header-body">
             <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">
                   <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                      <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                         <li class="breadcrumb-item"><a href="{{url('driver/home')}}"><i class="fas fa-home"></i></a></li>
                         <li class="breadcrumb-item"><a href="{{url('driver/deliveries')}}">Delivery</a></li>
                         <li class="breadcrumb-item active" aria-current="page">Take Photo</li>
                      </ol>
                   </nav>
                </div>
             </div>
          </div>
       </div>
    </div>
    <!-- Page content -->
    <div class="container-fluid mt--7">
      <div class="row">
        <div class="col-lg-12">
          <div class="card bg-secondary shadow">
            <div class="card-header bg-white">
              <div class="row align-items-center">
                <div class="col-8">
                  <h4 class="mb-0">Take Photo</h4>
                </div>
              </div>
              <div class="col-12 text-right">
                
                <a href="{{ URL::to('driver/deliveries/view/'.$id) }}" class="btn btn-danger btn-sm">Back <i class="fa fa-undo" aria-hidden="true"></i></a>
              </div>
            </div>
            @if(Session::has('message'))
            <div class="alert {{ Session::get('alert-class', 'alert-info') }}" role="alert">
                {{ Session::get('message') }}
            </div>
            @endif
            <form method="POST" action="{{ url('driver/deliveries/photo/'.$id) }}" enctype="multipart/form-data">
                {!! csrf_field() !!}
        <div class="row">
            <div class="col-md-6">
                <div id="my_camera"></div>
                <br/>
                <input type=button value="Take Snapshot" onClick="take_snapshot()">
                <input type="hidden" name="image" class="image-tag">
            </div>
            <div class="col-md-6">
                <div id="results">Your captured image will appear here...</div>
            </div>
            <div class="col-md-12 text-center">
                <br/>
                <button class="btn btn-success">Submit</button>
            </div>
        </div>
    </form>
          </div>
        </div>
      </div>
    </div>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
    Webcam.set({
        width: 490,
        height: 390,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
  
    Webcam.attach( '#my_camera' );
  
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );


    }
</script>
@endsection