@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Visitor Master</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/visitor">Visitor</a>
                    </li>
                    <li class="breadcrumb-item active">
                    @if(isset($employee) && ($employee->id))
                        Edit Visitor
                    @else
                        Add New Visitor
                    @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content') 
    <!-- Vertical Wizard -->
    {!! Form::model($employee, ['method' => 'post', 'files' => 'true']) !!}
        <input type="hidden" name="organization_id" value="{{$organization->id}}">


        <section class="vertical-wizard">
            <div class="bs-stepper vertical vertical-wizard-example">
                <div class="bs-stepper-header">
                    <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-box">1</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Visitor Info</span>
                                <span class="bs-stepper-subtitle">Add Visitor Info</span>
                            </span>
                        </button>
                    </div>
                    <div class="step" data-target="#account-details-vertical" role="tab" id="account-details-vertical-trigger">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-box">2</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Contact Info</span>
                                <span class="bs-stepper-subtitle">Add Contact Info</span>
                            </span>
                        </button>
                    </div>
                   
                    <div class="step" data-target="#images-vertical" role="tab" id="images-vertical-trigger">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-box">3</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Attachment Info</span>
                                <span class="bs-stepper-subtitle">Add Attachment Info</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="account-details-vertical-trigger">
                        <div class="content-header">
                            <h5 class="mb-0">Visitor Info</h5>
                            <small class="text-muted">Enter Visitor Info.</small>
                        </div>
                       
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="name">Name of Visitor <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" id="name" name="name" class="form-control {{{$errors->has('name') ? 'error' : ''}}}" placeholder="Enter Your Name" value="{{ isset($employee) && $employee->name ? $employee->name : old('name') }}"/>
                                {!! $errors->first('name','<label id="basic-default-name-error" for="name" class="error">:message</label>')!!}
                              </div>
                              <div class="mb-1 col-md-6">
                                <label class="form-label" for="father_name">Father's / Husband’s Name <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" id="father_name" name="father_name" class="form-control {{{$errors->has('father_name') ? 'error' : ''}}}" placeholder="Enter Your Father's / Husband’s Name" value="{{ isset($employee) && $employee->father_name ? $employee->father_name : old('father_name') }}"/>
                                {!! $errors->first('father_name','<label id="basic-default-father_name-error" for="father_name" class="error">:message</label>')!!}
                              </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="mobile">Mobile <span class="mendatory-field text-danger">*</span></label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" onKeyPress="if(this.value.length==15) return false;" id="mobile" name="mobile" class="form-control {{{$errors->has('mobile') ? 'error' : ''}}}" placeholder="Enter Your mobile" value="{{ isset($employee) && $employee->mobile ? $employee->mobile : old('mobile') }}"/>
                                {!! $errors->first('mobile','<label id="basic-default-mobile-error" for="mobile" class="error">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="email">Email ID</label>
                                <input type="text" id="email" name="email" class="form-control {{{$errors->has('email') ? 'error' : ''}}}" placeholder="Enter Your email" value="{{ isset($employee) && $employee->email ? $employee->email : old('email') }}"/>
                                {!! $errors->first('email','<label id="basic-default-email-error" for="email" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="nationality" class="required">Nationality <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2 {{{ $errors->has('nationality') ? 'error' : '' }}}" id="nationality" name="nationality">
                                    <option value="">Select</option>
                                    @foreach($nationalities as $nationality)
                                                <option value="{{$nationality}}"  @if(isset($employee->employeeDetail->nationality) && ($employee->employeeDetail->nationality == $nationality) || (old('nationality') == $nationality)) selected @endif>{{ucwords($nationality)}}</option>
                                            @endforeach
                                </select>
                                {!! $errors->first('nationality', '<label id="basic-default-name-error" for="nationality" class="error">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="vip">VIP <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="vip" name="vip">
                                    <option value="no"  @if(isset($employee) && ($employee->vip == 'no') || (old('vip') == 'no')) selected @endif>No</option>
                                    <option value="yes"  @if(isset($employee) && ($employee->vip == 'yes') || (old('vip') == 'yes')) selected @endif>Yes</option>
                                </select>
                            </div>
                         </div>
                         <div class="row"><br><br></div>
                        
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev" disabled>
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                    </div>


                    <div id="account-details-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger">
                        <div class="content-header">
                            <h5 class="mb-0">Contact Info</h5>
                            <small>Enter Your Contact Info.</small>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="company_name">Company Name</label>
                                <input type="text" id="company_name" name="company_name" class="form-control {{{$errors->has('company_name') ? 'error' : ''}}}" placeholder="Enter Your company name" value="{{ isset($employee->employeeDetail) && $employee->employeeDetail->company_name ? $employee->employeeDetail->company_name : old('company_name') }}"/>
                                {!! $errors->first('company_name','<label id="basic-default-company_name-error" for="company_name" class="error">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="geo_address">Address Line</label>
                                <input type="text" id="geo_address" name="geo_address" class="form-control {{{$errors->has('geo_address') ? 'error' : ''}}}" placeholder="Enter Address Line" value="{{ isset($employee) && $employee->geo_address ? $employee->geo_address : old('geo_address') }}"/>
                                {!! $errors->first('geo_address','<label id="basic-default-geo_address-error" for="geo_address" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="country_id" class="required">Country <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2 {{{ $errors->has('country_id') ? 'error' : '' }}}" id="country_id" name="country_id" onchange="getState(this.value)">
                                    @foreach($countries as $country)
                                                    <option value="{{$country->id}}" @if(isset($employee->employeeDetail->country_id) && ($employee->employeeDetail->country_id == $country->id) || (old('country_id') == $country->id)) selected @elseif(Config::get('app.visitor_d_country')==$country->name) 
                                                        selected
                                                    @endif>
                                                    {{$country->name}}
                                                    </option>
                                                @endforeach
                                </select>
                                {!! $errors->first('country_id', '<label id="basic-default-name-error" for="country_id" class="error">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="state_id" class="required">State <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2 {{{ $errors->has('state_id') ? 'error' : '' }}}" id="state_id" name="state_id" onchange="getCity(this.value)">
                                    @foreach($states as $state)
                                            <option value="{{$state->id}}" @if(isset($employee->employeeDetail->state_id) && ($employee->employeeDetail->state_id == $state->id) || (old('state_id') == $state->id)) selected
                                            @endif>
                                                {{$state->name}}
                                            </option>
                                        @endforeach
                                </select>
                                {!! $errors->first('state_id', '<label id="basic-default-name-error" for="state_id" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="city_id" class="required">City <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2 {{{ $errors->has('city_id') ? 'error' : '' }}}" id="city_id" name="city_id">
                                   <option value="">Select City</option>
                                            @foreach($cities as $city)
                                            <option value="{{$city->id}}" @if(isset($employee->employeeDetail->city_id) && ($employee->employeeDetail->city_id == $city->id) || (old('city_id') == $city->id)) selected @endif>
                                                {{$city->name}}
                                            </option>
                                        @endforeach
                                </select>
                                {!! $errors->first('city_id', '<label id="basic-default-name-error" for="city_id" class="error">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="district">District <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" id="district" name="district" class="form-control {{{$errors->has('district') ? 'error' : ''}}}" placeholder="Enter Your district" value="{{ isset($employee->employeeDetail) && $employee->employeeDetail->district ? $employee->employeeDetail->district : old('district') }}"/>
                                {!! $errors->first('district','<label id="basic-default-district-error" for="district" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="pincode">Pincode <span class="mendatory-field text-danger">*</span></label>
                                <input type="number" onkeydown="javascript: return event.keyCode == 69 ? false : true" onKeyPress="if(this.value.length==6) return false;"  id="pincode" name="pincode" class="form-control {{{$errors->has('pincode') ? 'error' : ''}}}" placeholder="Enter Your pincode" value="{{ isset($employee->employeeDetail) && $employee->employeeDetail->pincode ? $employee->employeeDetail->pincode : old('pincode') }}"/>
                                {!! $errors->first('pincode','<label id="basic-default-pincode-error" for="pincode" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row"><br><br></div>
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button type="button" class="btn btn-primary btn-next">
                                    <span class="align-middle d-sm-inline-block d-none">Next</span>
                                    <i data-feather="arrow-right" class="align-middle ms-sm-25 ms-0"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="images-vertical" class="content position-relative" role="tabpanel" aria-labelledby="images-vertical-trigger">
                        <div class="content-header">
                            <h5 class="mb-0">Attachment Info</h5>
                            <!-- <small>Add Employee Selfie Image.</small> -->
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="vip">Select ID Proof</label>
                                <select class="form-control select2" id="id_proof_type" name="id_proof_type">
                                    <option value="" >Select ID Proof</option>
                                    @foreach($idProofTypes as $idProofType)
                                                <option value="{{$idProofType}}"  @if(isset($employee->employeeDetail->id_proof_type) && ($employee->employeeDetail->id_proof_type == $idProofType) || (old('id_proof_type') == $idProofType)) selected @endif>{{ucwords($idProofType)}}</option>
                                            @endforeach
                                </select>
                                {!! $errors->first('id_proof_type', '<label class="control-label" for="id_proof_no">:message</label>')!!}
                            </div>
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="id_proof_no">ID Proof Number</label>
                                <input type="text" id="id_proof_no" name="id_proof_no" class="form-control {{{$errors->has('id_proof_no') ? 'error' : ''}}}" placeholder="Enter Your Id Proof" value="{{ isset($employee->employeeDetail->id_proof_no)  ? $employee->employeeDetail->id_proof_no : old('id_proof_no') }}"/>
                                {!! $errors->first('id_proof_no','<label id="basic-default-id_proof_no-error" for="id_proof_no" class="error">:message</label>')!!}
                            </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <label class="form-label" for="status">Status <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="status" name="status">
                                    @foreach($employeeStatus as $val)
                                                <option value="{{$val}}"  @if(isset($employee) && ($employee->status == $val) || (old('status') == $val)) selected @endif>{{ ucfirst($val) }}</option>
                                            @endforeach
                                </select>
                            </div>
                            <div class="mb-1 col-md-6" id="blockresion" style=" @if(isset($employee) && ($employee->status != 'block')) display: none ; @endif">
                                <label class="form-label" for="block_reason">Block Reason</label>
                                <input type="text" id="block_reason" name="block_reason" class="form-control {{{$errors->has('block_reason') ? 'error' : ''}}}" placeholder="Enter Block Reason" value="{{ isset($employee->employeeDetail) && $employee->employeeDetail->block_reason ? $employee->employeeDetail->block_reason : old('block_reason') }}"/>
                                {!! $errors->first('block_reason','<label id="basic-default-block_reason-error" for="block_reason" class="error">:message</label>')!!}
                              </div>
                        </div>
                        <div class="row">
                            <div class="mb-1 col-md-6">
                                <div class="card-body">
                                    <label for="image" class="required">Visitor Image
                                    </label>
                                    <div class="uploadedDocBox text-center">
                                        @if(isset($invalidUserLog))
                                            @if($invalidUserLog->imagebase64)
                                                <img id="image_upload_preview" src="data:image/png;base64, {{ $invalidUserLog->imagebase64 }}" style="width:100%;height: 250px;object-fit: contain;"  onerror="this.src='/assets/img/default-profile-3.png'" />
                                            @else
                                                <img id="image_upload_preview" src="https://via.placeholder.com/300x60?text=Visitor selfie image" value="{{ old('image') }}" alt="your image" style="width:100%;height: 250px;object-fit: contain;" onerror="this.src='/assets/img/default-profile-3.png'"/>
                                            @endif
                                            <input type="hidden" name="log" value="{{$invalidUserLog->id}}">
                                        @else
                                            @if($employee->image)
                                            <img id="image_upload_preview" src="{!! $employee->image !!}" alt="your image" style="width:100%;height: 250px;object-fit: contain;" onerror="this.src='/assets/img/default-profile-3.png'"/>
                                            <a href="/{{$organization->alias}}/employee/{{$employee->id}}/delete-image" class="delImage">
                                                <img src="/assets/img/closered.svg">
                                            </a>
                                            @else
                                            <img id="image_upload_preview" src="https://via.placeholder.com/300x60?text=Visitor selfie image" value="{{ old('image') }}" alt="your image" style="width:100%;height: 250px;object-fit: contain;" onerror="this.src='/assets/img/default-profile-3.png'"/> @endif
                                        @endif
                                    </div>
                                    <div class="text-center" style="display:flex;justify-content:center;margin-top:10px">
                                        <input type="file" class="fileinput form-control" name="image" accept="image/*" id="inputImageFile" data-filename-placement="inside" title="Browse">
                                    </div>
                                    <br>
                                    <b>Max size limit: 5MB</b><br />
                                    {!! $errors->first('image', '<label class="control-label" for="image">:message</label>')!!}
                                </div>
                            </div>
                            <div class="mb-1 col-md-6">
                                <div class="form-group {{{ $errors->has('id_proof_attachment') ? 'has-error' : '' }}}">
                                    <label>Verified Document</label> 
                                    <div class="card-body">
                                        <div class="uploadedDocBox text-center">
                                            @if($employee->id_proof_attachment)
                                                @if($employee->getMedia('id_proof_attachment')->last()->mime_type=='application/pdf')
                                                    <a href="{!! $employee->id_proof_attachment !!}" target="_blank"><img id="id_upload_preview" src="/assets/img/pdf-icon.jpg" title="{!! $employee->id_proof_attachment !!}" alt="attachment" style="height: 200px; width:200px; object-fit: contain;"></a>
                                                @else
                                            <img id="id_upload_preview" src="{!! $employee->id_proof_attachment !!}" alt="id proof attachment" style="width:100%;height: 250px;object-fit: contain;" onerror="this.src='/assets/img/id-proof-sample.png'"/>
                                                @endif
                                            <a href="/{{$organization->alias}}/employee/{{$employee->id}}/delete-id" class="delIdProofAttachment">
                                                <img src="/assets/img/closered.svg">
                                            </a>
                                            
                                            @else
                                            <img id="id_upload_preview" src="https://via.placeholder.com/300x60?text=ID Proof Attachment" value="{{ old('id_proof_attachment') }}" alt="id proof attachment" style="width:100%;height: 250px;object-fit: contain;" onerror="this.src='/assets/img/id-proof-sample.png'"/> @endif
                                        </div>
                                        <div class="text-center" style="display:flex;justify-content:center;margin-top:10px">
                                            <input type="file" class="fileinput form-control" name="id_proof_attachment" accept="id_proof_attachment/*" id="inputIdFile" data-filename-placement="inside" title="Browse">
                                        </div>
                                        <br>
                                        <b>Max size limit: 5MB</b><br />
                                        {!! $errors->first('id_proof_attachment', '<label class="control-label" for="id_proof_attachment">:message</label>')!!}
                                        </div>
                                    </div>
                            </div>
                        </div>
                        <div class="row"> 
                            <div class="col-md-6">
                                @if($employee->imagebase64code)
                                <div class="card-body">
                                    <label for="image" class="required">Visitor Device image
                                    </label>
                                    <div class="text-center" style="display:flex;justify-content:center;margin-top:10px">
                                        <img src="data:image/png;base64, {{ $employee->imagebase64code }}" style="height: 250px;"  onerror="this.src='/assets/img/default-profile-3.png'" />
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                        <div class="row">
                                <div class="col-md-6">
                                <input type="button" value="Capture image using web cam" onClick="openwebcam()">
                            </div>
                        </div>
                        <div class="row" id="webcamarea" style="display:none;">
                            <div class="col-md-6">
                            <div id="my_camera"></div>
                                <br/>
                                <input type="button" value="Take Snapshot" onClick="take_snapshot()">
                                <input type="button" value="Clear" onClick="clear_snapshot()">
                                <input type="hidden" name="webcamimage" class="image-tag">
                                </div>
                            <div class="col-md-6">
                                <div id="results">Your captured image will appear here...</div>
                            </div>
                        </div>

                        <div class="tab-pane " id="devices">
                        @if(isset($userDevices) && count($userDevices)>0)
                            <div class="row">
                                <table class="table table-striped employeeinfotable">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Name</th>
                                            <th>Device Sr. No.</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($userDevices as $userDevice)
                                                <tr>
                                                    <td>{{ $loop->iteration }}</td>
                                                    <td>{{ $userDevice->name }}</td>
                                                    <td>{{ $userDevice->devicekey }}</td>
                                                </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <!-- <p class="text-center">No Record Found</p> -->
                        @endif
                        </div>


                        <div class="row"><br><br>
                        </div>
                        <div class="content-footer position-absolute bottom-0 col-md-12">
                            <div class="d-flex justify-content-between content-footer">
                                <button type="button" class="btn btn-outline-secondary btn-prev">
                                    <i data-feather="arrow-left" class="align-middle me-sm-25 me-0"></i>
                                    <span class="align-middle d-sm-inline-block d-none">Previous</span>
                                </button>
                                <button type="submit" class="btn btn-success btn-submit" id="confirm-submit-text">Submit</button>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </section>


    {!! Form::close() !!}
    
    <!-- /Vertical Wizard -->
@endsection

@push('footer-script')
<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.min.js"></script>
<script type="text/javascript">
    Webcam.set({
        width: 245,
        height: 195,
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    function openwebcam() {
        Webcam.attach( '#my_camera' );
        $("#webcamarea").show();
    }
    function take_snapshot() {
        Webcam.snap( function(data_uri) {
            $(".image-tag").val(data_uri);
            document.getElementById('results').innerHTML = '<img src="'+data_uri+'"/>';
        } );
    }
    function clear_snapshot() {
        $(".image-tag").val('');
        document.getElementById('results').innerHTML = '';
    }

     function getState (country_id) {
        var url = "/ajax/states";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "country_id": country_id},
            success: function (data) {
                console.log(data);
                op = '<option value="">Select State</option>';
                $.each(data,function(key,value){
                    if("{{ Config::get('app.visitor_d_state')}}"==value){
                        op += '<option value='+key+' selected>'+value+'</option>';
                    } else {
                        op += '<option value='+key+'>'+value+'</option>';
                    }
                    
                });
                $('#state_id').html(op);
                if ($('#country_id').val() && $('#state_id').val()) {
                    getCity($('#state_id').val());
                }
            }
        });
    }

    function getCity (state_id) {
        var url = "/ajax/cities";
        $.ajax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "state_id": state_id},
            success: function (data) {
                op = '<option value="">Select City</option>';
                $.each(data,function(key,value){
                    if("{{ old('city_id') }}" == key)
                    {
                        op += '<option value='+key+' selected>'+value+'</option>';
                    } else {
                        op += '<option value='+key+'>'+value+'</option>';
                    }
                    
                });
                $('#city_id').html(op);
            }
        });
    }
    
   
    

    function readURLimage(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#image_upload_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    function readURLid(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('#id_upload_preview').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#inputIdFile").change(function() {
        readURLid(this);
    });
    $("#inputImageFile").change(function() {
        readURLimage(this);
    });

    $('#status').change(function() {
        if (this.value=='block') {
            $("#blockresion").show();
        }else{
            $("#block_reason").val('');
            $("#blockresion").hide();
        }
    });

    $('#mobile').blur(function(){
        var url = '/{!! $alias !!}/getVisitorWithMobile';
        $.easyAjax({
            url: url,
            type: "POST",
            data: {
                "_token": "{{ csrf_token() }}",
                "mobile": $('#mobile').val()},
            success: function (response) {
                if(response!=""){
                    swal({
                        title: "Already Exists!!",
                        text: "Visitor with the given Mobile Number Already Exists. Do you want to edit?",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#DD6B55",
                        confirmButtonText: "Yes, Redirect Me!",
                        cancelButtonText: "@lang('messages.confirmNoArchive')",
                        closeOnConfirm: true,
                        closeOnCancel: true
                    }, function(isConfirm) {
                        if (isConfirm) {
                            window.location.replace("/{!! $alias !!}/visitor/"+response.id+"/edit");
                        }
                    });
                }
            }
        });
    });

    $(document).ready(function() {
        if ($('#country_id').val() && !$('#state_id').val()) {
            getState($('#country_id').val());
        }
        
        
    });
</script>

@endpush