@extends('layouts.master')

@section('css')
<link href="{{ asset('plugins/tel/intlTelInput.css') }}" rel="stylesheet" type="text/css"> 
<link href="{{ asset('plugins/tel/demo.css') }}" rel="stylesheet" type="text/css">
 <!-- DatePicker -->
 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>

{{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css"> --}}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" type="text/css">

 {{-- <link href="{{ asset('plugins/flatpickr/flatpickr.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('plugins/flatpickr/custom-flatpickr.css') }}" rel="stylesheet" type="text/css">  --}}


<style>
    .required:after {
        content: " *";
        color: red;
    }

    .red {
        color: red;
    }

    .custom-checkbox input {
        margin: 0;
        width: 20px;
        height: 20px;
    }
</style>
@stop
@section('content')
{{-- {{dd(url('/'))}} --}}
<!--  BEGIN CONTENT AREA  -->
<div id="content" class="main-content">
     <!-- Page-Title -->
     <div class="page-title-box">
        <div class="btn-group float-right">
            <ol class="breadcrumb hide-phone p-0 m-0">
                <li class="breadcrumb-item active"><a href="{{ route('dashboard') }}">{!! __('Dashboard') !!}</a></li>
                <li class="breadcrumb-item active"><a href="{{ route('drivers.index') }}">{!! __('driver_list') !!}</a></li>
                <li class="breadcrumb-item active">{!! __('add_driver') !!}</li>
            </ol>
        </div>
        <h4 class="page-title">{!! __('add_driver') !!}</h4>
    </div>
    <!-- end page title end breadcrumb -->
    <div class="layout-px-spacing" style="padding:0px !important;">
        <div class="account-settings-container layout-top-spacing">
            <div class="col-lg-12 layout-spacing" style="padding:0px !important;">
                <div class="statbox widget box box-shadow">
                    <!---<div class="widget-header">
                        <div class="row">
                            <div class="col-xl-12 col-md-12 col-sm-12 col-12">
                                <h4>{{__('add_driver')}}</h4>
                            </div>
                        </div>
                    </div>--->

                    <div class="widget-content widget-content-area">
                        @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                        @if(session()->has('message'))
                        <div class="alert alert-success">
                            {{ session()->get('message') }}
                        </div>
                        @endif
                        <div class="row">
                          <!---------------Start Wizard------------------------->
                    <div class="col-md-12" >
                          <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Basic Info</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Vehicle Detail</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Documents</a>
                            </li>
                        </ul><!-- Tab panes -->
                        <div class="tab-content">
                            <div class="tab-pane active" id="tabs-1" role="tabpanel">
                                <section>
                                {!! Form::open(['route' => 'drivers.store', 'method' => 'post', 'id' => 'ajax-submit', 'files' => 'true']) !!}

                                    <div class="col-lg-8 col-8  mx-auto">

                                        <div class="row  mb-4">
                                            <div class="col">
                                                {!! Form::label('full_name', 'Full name',array('class' => 'required')) !!}
                                                {!! Form::text('name', null, array('class' => 'form-control','id' => 'full_name','required' => 'required', 'autofocus' => 'autofocus','placeholder' => 'Full name'))!!}
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col">
                                                {!! Form::label('Email', 'Email',array('class' => 'required')) !!}
                                                {!! Form::email('email', null, array('class' => 'form-control','id' => 'email','required' => 'required','placeholder' => 'Email')) !!}
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col">
                                                <input id="phone" name="phone" type="text" class="form-control numbersOnly"> 
                                                {{-- <span id="valid-msg" class="hide">✓ Valid</span>
                                              <span id="error-msg" class="hide"></span>  --}}
                                              <span id="errmsg"></span>
                                              {!! Form::hidden('dial_code', null, array('class' => 'form-control','id' => 'dial_code'))!!}
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col">
                                                {!! Form::label('Password', 'Password',array('class' => 'required')) !!}
                                                {!! Form::password('password', ['class' => 'form-control awesome','id' => 'password','required' => 'required','placeholder' => 'Password']) !!}
                                            </div>
                                            <div class="col">
                                                {!! Form::label('Language', 'Language',array('class' => 'required')) !!}
                                                {!! Form::select('language', ['English' => 'English', 'French' => 'French'], 'E', array('class' => 'form-control','id' => 'language','required' => 'required')) !!}
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col">
                                                {!! Form::label('Date of Birth', 'Date of Birth',array('class' => 'required')) !!}
                                                {!! Form::text('dob', null, ['class' => 'form-control date', 'placeholder' => 'eg: YYYY-MM-DD','autocomplete'=>'off','onkeydown' => 'event.preventDefault()','required' => 'required']) !!}
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col">
                                                {!! Form::label('Address', 'Address',array('class' => 'required')) !!}
                                                {!! Form::textarea('address', null, array('class' => 'form-control','id' => 'address','required' => 'required','placeholder' => 'Address', 'rows' => 4, 'cols' => 40)) !!}
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col">
                                                {!! Form::label('Country', 'Country') !!}
                                                {!! Form::select('country', $data['countries'], null, ['class' => 'form-control select2 __country','id' => 'country', 'data-route' => route('country.states')]) !!}
                                            </div>
                                            <div class="col">
                                                {!! Form::label('State', 'State') !!}
                                                {!! Form::select('state', $data['states'], null, [
                                                    'class' => 'form-control select2 __state','id' => 'state', 'data-route' => route('country.city')]) !!}
                                            </div>
                                        </div>
										
                                        <div class="row  mb-4">
                                            <div class="col">
                                                {!! Form::label('City', 'City') !!}
                                                {!! Form::select('city',$data['cities'], null, ['class' => 'form-control select2 __city','id' => 'city']) !!}
                                            </div>
                                            <div class="col">
                                                {!! Form::label('Postal Code', 'Postal Code',array('class' => 'required')) !!}
                                                {!! Form::text('postal_code', null, array('class' => 'form-control','id' => 'postal_code','required' => 'required', 'autofocus' => 'autofocus','placeholder' => 'Postal Code'))!!}
                                            </div>
                                        </div>

                                        <div class="row  mb-4">
                                            <div class="col" id="profile_pic_div">
                                                {!! Form::label('profile_pic', __('profile_pic')) !!}
                                                <div class="custom-file">
                                                    {!! Form::file('profile_pic',array('class' => 'custom-file-input','id' => 'profile_pic','required' => 'required')) !!}
                                                    {{-- {!! Form::label('Profile Picture', 'Profile Picture',array('class' => 'custom-file-label')) !!} --}}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        <div class="row  mb-4">

                                            <div class="custom-control custom-checkbox ">
                                                {!! Form::checkbox('is_activated', '1',true) !!}
                                                {!! Form::label('Active', 'Active') !!}

                                            </div>


                                        </div>
                                    </div>
                                    {!! Form::hidden('step1', 'step1', array('class' => 'form-control','id' => 'step1'))!!}

                                    <button class="btn btn-primary btn-one" name="action" value="stepOne" > {!! __('submit') !!}</button>
                                    {!! Form::close() !!}
                                </section>
                            </div>

                            <div class="tab-pane" id="tabs-2" role="tabpanel">
                                <section>
                                {!! Form::open(['route' => ['drivers.store'], 'method' => 'post', 'id' => 'ajax-submitStep2','files' => true]) !!}


                                    <div class="col-lg-8 col-8 mx-auto">
                                      
                                        <div class="row mb-4">
                                            <div class="col">
                                                {!! Form::label('Vehicle Category', 'Vehicle Category') !!}
                                                {!! Form::select('vehicle_category_id', $data['category'], null, ['class' => 'form-control select2 __vehicle_category','id' => 'vehicle_category_id','data-route' => route('vehicleType.service')]) !!}
                                             
                                            </div>
                                            <div class="col">
                                                {!! Form::label('Vehicle Type', 'Vehicle Type') !!}
                                                {!! Form::select('vehicle_type_id', $data['types'], null, ['class' => 'form-control select2 __vehicle_type','id' => 'vehicle_type_id']) !!}
                                             
                                            </div>
                                           
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-sm-6">
                                                {!! Form::label('Vehicle Make', 'Vehicle Make') !!}
                                                {!! Form::select('vehicle_make_id', $data['make'], null, ['class' => 'form-control select2 __vehicle_make','id' => 'vehicle_make_id','data-route' => route('vehicleModel.service')]) !!}
                                             
                                            </div>
                                            <div class="col-sm-6">
                                                {!! Form::label('Vehicle Model', 'Vehicle Model') !!}
                                                {!! Form::select('vehicle_model_id', $data['models'], null, ['class' => 'form-control select2 __vehicle_model','id' => 'vehicle_model']) !!}
                                             
                                            </div>
                                           
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-sm-6">
                                                {!! Form::label('Vehicle Color', 'Vehicle Color') !!}
                                                {!! Form::select('vehicle_color_id', $data['colors'], null, ['class' => 'form-control select2 __vehicle_color','id' => 'vehicle_color']) !!}

                                            </div>
                                            <div class="col-sm-6">
                                                {!! Form::label('Vehicle Manufacturing Year', 'Vehicle Manufacturing Year') !!}
                                                {!! Form::text('mfg_year', null, array('class' => 'form-control numbersOnly','id' => 'mfg_year','autofocus' => 'autofocus','placeholder' => 'Vehicle Manufacturing Year'))!!}
                                            </div>
                                           
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col">
                                                {!! Form::label('License Plate Number', 'License Plate Number') !!}
                                                {!! Form::text('license_plate_no', null, array('class' => 'form-control','id' => 'license_plate_no', 'autofocus' => 'autofocus','placeholder' => 'License Plate Number'))!!}
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col">
                                                {!! Form::label('Driver License Number', 'Driver License Number') !!}
                                                {!! Form::text('driver_license_no', null, array('class' => 'form-control','id' => 'driver_license_number', 'autofocus' => 'autofocus','placeholder' => 'Driver License Number'))!!}
                                            </div>
                                            <div class="col">
                                                {!! Form::label('Driver License Expiry Date', 'Driver License Expiry Date') !!}
                                                {{-- {!! Form::text('dl_expiry_date', null, array('class' => 'form-control date','id' => 'driver_license_exp_date','autofocus' => 'autofocus','placeholder' => 'Driver License Expiry Date'))!!} --}}
                                                {!! Form::text('dl_expiry_date', null, ['class' => 'form-control date', 'placeholder' => 'eg: YYYY-MM-DD','autocomplete'=>'off','onkeydown' => 'event.preventDefault()']) !!}
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col" id="vehicle_image_div">
                                                {!! Form::label('vehicle_image', __('vehicle_image')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('vehicle_image',array('class' => 'custom-file-input','id' => 'vehicle_image')) !!}
                                                    {!! Form::label('Vehicle Image', 'Vehicle Image',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                    </div>
                                    {!! Form::hidden('step2', 'step2', array('class' => 'form-control','id' => 'step2'))!!}
                                    {!! Form::hidden('driver_id', isset($_GET['id'])?$_GET['id']:null, array('class' => 'form-control','id' => 'driverId'))!!}

                                    <button class="btn btn-primary btn-one" name="action" value="stepTwo"> {!! __('submit') !!}</button>
                                    {!! Form::close() !!}
                                </section>
                            </div>

                            <div class="tab-pane" id="tabs-3" role="tabpanel">
                                <section>
                                    {!! Form::open(['route' => ['drivers.store'], 'method' => 'post', 'id' => 'ajax-submitStep3','files' => true]) !!}

                                    <div class="col-lg-8 col-8 mx-auto">
                                        <div class="row  mb-4">
                                            <div class="col" id="driver_license_div">
                                                {!! Form::label('driver_license_image', __('driver_license_image')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('driver_license_image',array('class' => 'custom-file-input','id' => 'driver_license')) !!}
                                                    {!! Form::label('Driver License', 'Driver License',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col" id="vehicle_license_div">
                                                {!! Form::label('vehicle_license_image', __('vehicle_license_image')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('vehicle_license_image',array('class' => 'custom-file-input','id' => 'vehicle_license')) !!}
                                                    {!! Form::label('Vehicle License', 'Vehicle License',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col" id="insurance_div">
                                                {!! Form::label('insurance_image', __('insurance_image')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('insurance_image',array('class' => 'custom-file-input','id' => 'insurance')) !!}
                                                    {!! Form::label('Insurance', 'Insurance',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col" id="road_worthiness_div">
                                                {!! Form::label('road_worthiness', __('road_worthiness')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('road_worthiness',array('class' => 'custom-file-input','id' => 'road_worthiness')) !!}
                                                    {!! Form::label('Road worthiness', 'Road Worthiness',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        <div class="row  mb-4">
                                            <div class="col" id="pow_div">
                                                {!! Form::label('proof_of_ownership', __('proof_of_ownership')) !!}
                                                <div class="custom-file mb-4">
                                                    {!! Form::file('proof_of_ownership',array('class' => 'custom-file-input','id' => 'proof_of_ownership')) !!}
                                                    {!! Form::label('Proof of Ownership', 'Proof of Ownership',array('class' => 'custom-file-label')) !!}
                                                    @if ($errors->has('file'))
                                                    <span class="invalid-feedback" role="alert">
                                                        <strong>{{ $errors->first('file') }}</strong>
                                                    </span>
                                                    @endif
                                                </div>
                                                <div class="imagePreview"></div>
                                            </div>
                                        </div>
                                        {!! Form::hidden('step3', 'step3', array('class' => 'form-control','id' => 'step3'))!!}
                                        {!! Form::hidden('driver_id', isset($_GET['id'])?$_GET['id']:null, array('class' => 'form-control','id' => 'driverId'))!!}
    
                                        <button class="btn btn-primary btn-one" name="action" value="stepThree"> {!! __('submit') !!}</button>
                                        {!! Form::close() !!}

                                    </div>
                                </section>
                            </div>
                        </div>
                    </div>
                          <!---------------End Wizard------------------------->
                        
                            

                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- </div> -->
    <!--  END CONTENT AREA  -->
    @stop
    @section('script')

    
    <script src="{{ asset('plugins/highlight/highlight.pack.js') }}"></script>
    {{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> --}}
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
      <!---DatePicker------>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> 

    {{-- <script src="{{ asset('plugins/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('plugins/flatpickr/custom-flatpickr.js') }}"></script>  --}}
    <script src="{{ asset('plugins/tel/intlTelInput.js') }}"></script>
    <script src="{{ asset('assets/js/scrollspyNav.js') }}"></script>
     

    <script>
        // //Display Datepicker
        // var f1 = flatpickr(document.getElementById('dob'));
        // var f2 = flatpickr(document.getElementById('driver_license_exp_date'));

        // //Get vehicle Models
        function fetchModels() {
            // showElm("#models-loader");
            var make_id = $("#vehicle_make").val();
            var type_id = $("#vehicle_type").val();
            $("#vehicle_model").html('');

            $.ajax({
                url: "{{ url('admin/vehicleModel/getVehicleModel') }}",
                method: "post",
                data: {
                    "_token": "{{ csrf_token() }}",
                    type_id: type_id,
                    make_id: make_id
                },
                success: function(resp) {
                    $.each(resp, function(key, value) {
                        $('#vehicle_model').append($('<option>', {
                            value: value.id,
                            text: value.model_name
                        }));
                    });
                }
            });
        }


        //Get Vehicle Make
        $("#vehicle_type").change(function() {
            $("#vehicle_make").html('');

            var type_id = $("#vehicle_type").val();
            $.ajax({
                url: "{{ url('admin/vehicleMake/getVehicleMake') }}",
                method: "post",
                data: {
                    "_token": "{{ csrf_token() }}",
                    type_id: type_id
                },
                success: function(resp) {
                    $.each(resp, function(key, value) {
                        $('#vehicle_make').append($('<option>', {
                            value: value.id,
                            text: value.make_name
                        }));
                    });
                    fetchModels();
                }
            });
        });
        $("#vehicle_make").change(function() {
            fetchModels();
        });
        // $( ".selector" ).tabs({ cache: true });
        //Preview Image before upload
        function filePreview(input, divid) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#' + divid + '  .imagePreview + img').remove();
                    $('#' + divid + ' .imagePreview').after('<img src="' + e.target.result + '" width="150" height="150"/>');
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
        //Get States
        // $("#country").change(function() {
        //     $("#state").html('');

        //     var country_id = $("#country").val();
        //     $.ajax({
        //         url: "{{ url('admin/drivers/getStates') }}",
        //         method: "post",
        //         data: {
        //             "_token": "{{ csrf_token() }}",
        //             country_id: country_id
        //         },
        //         success: function(resp) {
        //             $.each(resp, function(key, value) {
        //                 $('#state').append($('<option>', {
        //                     value: value.id,
        //                     text: value.name
        //                 }));
        //             });
        //         }
        //     });
        // });
        //Get Cities
        // $("#state").change(function() {
        //     $("#city").html('');

        //     var country_id = $("#country").val();
        //     var state_id = $("#state").val();
        //     $.ajax({
        //         url: "{{ url('admin/drivers/getCities') }}",
        //         method: "post",
        //         data: {
        //             "_token": "{{ csrf_token() }}",
        //             country_id: country_id,
        //             state_id: state_id
        //         },
        //         success: function(resp) {
        //             $.each(resp, function(key, value) {
        //                 $('#city').append($('<option>', {
        //                     value: value.id,
        //                     text: value.name
        //                 }));
        //             });
        //         }
        //     });
        // });

        $("#profile_pic").change(function() {
            filePreview(this, 'profile_pic_div');
        });

        $("#vehicle_image").change(function() {
            filePreview(this, 'vehicle_image_div');
        });
        $("#driver_license").change(function() {
            filePreview(this, 'driver_license_div');
        });
        $("#vehicle_license").change(function() {
            filePreview(this, 'vehicle_license_div');
        });
        $("#insurance").change(function() {
            filePreview(this, 'insurance_div');
        });
        $("#road_worthiness").change(function() {
            filePreview(this, 'road_worthiness_div');
        });
        $("#proof_of_ownership").change(function() {
            filePreview(this, 'pow_div');
        });
        $(document).ready(function() {
            $('.selectpicker').selectpicker();
        });

        // Tabs active based on URL
        $(document).ready(function() {
         $(function(){
                var hash = window.location.hash;
                if(hash){
                    $('a[href="' + hash +'"]').addClass('active');

                    if(hash=='#tabs-2'){

                        $(hash).addClass("active");
                        $('#tabs-1').removeClass("active");
                        $('a[href="#tabs-1"]').removeClass('active');

                    }else if(hash=='#tabs-3'){
                        $(hash).addClass("active");
                        $('#tabs-2').removeClass("active");
                        $('#tabs-1').removeClass("active");
                        $('a[href="#tabs-1"]').removeClass('active');
                        $('a[href="#tabs-2"]').removeClass('active');
                    }
                    var elementID = hash.replace('#', '');
                    $(elementID).show();
                } else {
                    $('.nav-tabs div:first').show();
                    $('.nav-tabs ul li:first').addClass('active');
                }
            });
        });

        //Int tel-input
        var input = document.querySelector("#phone");
    window.intlTelInput(input, {
      // allowDropdown: false,
      // autoHideDialCode: false,
      // autoPlaceholder: "off",
      // dropdownContainer: document.body,
      // excludeCountries: ["us"],
      // formatOnDisplay: false,
      // geoIpLookup: function(callback) {
      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
      //     var countryCode = (resp && resp.country) ? resp.country : "";
      //     callback(countryCode);
      //   });
      // },
      // hiddenInput: "full_number",
      // initialCountry: "auto",
      // localizedCountries: { 'de': 'Deutschland' },
      // nationalMode: false,
      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
      // placeholderNumberType: "MOBILE",
      // preferredCountries: ['cn', 'jp'],
      // separateDialCode: true,
      utilsScript: "{{ asset('plugins/tel/utils.js') }}",
    });
     

        $("#phone").change(function() {
            var iti = window.intlTelInputGlobals.getInstance(input);
            var countryData = iti.getSelectedCountryData();
            $('#dial_code').val('+'+countryData.dialCode);
            console.log(countryData.dialCode);
        });

          //Datepicker
     $('.date').datepicker({    
       format: 'yyyy-mm-dd'
     });

     //Disable Submit button for 5 secs
     $('form').submit(function(){
     $(this).find(':submit').attr( 'disabled','disabled' );
     //the rest of your code
    setTimeout(() => {
        $(this).find(':submit').attr( 'disabled',false );
    }, 5000)
});
        
    </script>

    @stop