@extends('cabMeWebsite.master')
<title>Documents</title>
@section('content')
    <section class="subheader">
        <div class="container">
            <div class="col-12">
                <div class="row">
                    <div class="inner-padding">
                        <h2></h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="mb-2 mb-md-4">
        <div class="container py-1 py-sm-2">
            <div class="col-12 inner-padding">
                <div class="row justify-content-md-center">
                    <div class="col-12 col-md-6">
                        <h4 class="fs25 font-weight-bold mt-2 mt-sm-3 mt-md-4 text-center">Drivers License Front</h4>
                        <form class="mt-2 mt-sm-3 mt-sm-4" id="formdata" method="post" >

                            {{  csrf_field()  }}
                            <input type="hidden" id="driver_id" name="driver_id" value="{{$_SESSION['driverid']}}">
                            <input type="hidden" id="vehicle_id" name="vehicle_id" value="">
                            <input type="text" id="issue_date"class="form-control" placeholder="Issue Date" required="" name="issue_date" value=""><br>
                            <input type="text" id="exp_date" class="form-control datepicker" required="" placeholder="Exp Date" name="exp_date" value="">

                            <input type="hidden" id="spnFilePath"  name="document" value=""/>
                            <input type="hidden" id="key"  name="key" value="driver_license_front"/>
                            <input id='fileid' type='file' hidden accept="image/*"/>

                            <div class="form-group">
                                <div class="row my-2 my-sm-3 my-md-5">
                                    <div class="col-12 text-center">
                                        <div id="driverProfilePhoto"></div>
                                        <img src="{{asset('/laravel-website/')}}/img/id-card.jpg" class="mx-2 my-2" alt="" />
                                    </div>
                                </div>
                                <!--//Row-->
                                <div class="row justify-content-center mt-2">
                                    <div class="col-12 col-md-8">
                                        <a type='file' class="theme-btn text-center btn-block" id="uploadProfile">Upload Photo</a>
                                    </div>
                                </div>
                                <!--//Row-->
                            </div>
                        </form>
                    </div>
                </div>
                <!--//Row-->
            </div>
        </div>
    </section>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#issue_date").datepicker({ 
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                maxDate: 0 ,
                onSelect: function(date){

                    var selectedDate = new Date(date);
                    var msecsInADay = 86400000;
                    var endDate = new Date(selectedDate.getTime() + msecsInADay);

                   //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
                    $("#exp_date").datepicker( "option", "minDate", endDate );
                    $("#exp_date").datepicker( "option", "maxDate", '+2y' );

                }
            });
            $("#exp_date").datepicker({ 
                dateFormat: 'yy-mm-dd',
                changeMonth: true
            });

            var base_url = '