@extends('app-new')

@push('head-script')
<!-- BEGIN: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
<!-- END: Vendor CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/style.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/pages/page-profile.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/pickers/form-flat-pickr.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 Meeting Request</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/home">{{trans('common/common.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/visitor/meeting/request">Visitor Meeting Request</a>
                    </li>
                    <li class="breadcrumb-item active">
                    Visitor Directory
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <div class="col-lg-12 col-md-12 col-12">
            <div class="card">
                <div class="card invoice-preview-card mb-0">
                    <div class="card-body invoice-padding pb-0">
                        <!-- Header starts -->
                        <div class=" flex-md-row flex-column invoice-spacing mt-1 mb-1">
                            <div>
                            </div>

                        </div>
                    </div>
                    <!--view DSR -->
                    <div class="card-body invoice-padding pt-0">
                        <h4 class="mb-3 text-center bill-heading card-title ">Visitor Details</h4>
                        <div class="row invoice-spacing mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="pe-1">Name :</td>
                                            <td><span class="fw-bold badge rounded-pill badge-light-primary"> {{$visitorDetails->name}}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Email :</td>
                                            <td>
                                            {{$visitorDetails->email}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Mobile :</td>
                                            <td><span class="fw-bold">{{$visitorDetails->mobile}}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Father Name :</td>
                                            <td>
                                            {{$visitorDetails->employeeDetail->father_name}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Address :</td>
                                            <td>
                                            {{$visitorDetails->geo_address}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Country :</td>
                                            <td>
                                            @if(isset($visitorDetails->employeeDetail->country->name)){{$visitorDetails->employeeDetail->country->name}} @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">State :</td>
                                            <td>
                                            @if(isset($visitorDetails->employeeDetail->state->name)){{$visitorDetails->employeeDetail->state->name}} @endif
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>

                                        <tr>
                                            <td class="pe-1">City :</td>
                                            <td>
                                                <span class="fw-bold">
                                                @if(isset($visitorDetails->employeeDetail->city->name)) {{$visitorDetails->employeeDetail->city->name}} @endif
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Pincode :</td>
                                            <td>
                                            {{$visitorDetails->employeeDetail->pincode}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Company Name :</td>
                                            <td>
                                            {{$visitorDetails->employeeDetail->company_name}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">ID Proof :</td>
                                            <td> {{$visitorDetails->employeeDetail->id_proof_type}}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Id Proof Number :</td>
                                            <td>{{$visitorDetails->employeeDetail->id_proof_no}}</td>
                                        </tr>
                                        @php
                                            $status = '';
                                            if($visitorDetails->status == 'active'){
                                                $status = 'Active';
                                            }
                                            else{
                                                $status = 'Inactive';
                                            }
                                        @endphp
                                        @if($status == 'Active')
                                        <tr>
                                            <td class="pe-1">Status :</td>
                                            <td><span class="fw-bold badge rounded-pill badge-light-success">Active</span></td>
                                        </tr>
                                        @else
                                        <tr>
                                            <td class="pe-1">Status :</td>
                                            <td><span class="fw-bold badge rounded-pill badge-light-danger">Inactive</span></td>
                                        </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- attachment -->
                        @if($visitorDetails->id_proof_attachment)
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                            <h4 class="bill-heading" style="margin-left: 21px;">ID Proof {{trans('common/common.attachments')}}</h4>
                                <div class="card">
                                    <div class="card-body">  
                                        @if($visitorDetails->getMedia('id_proof_attachment')->last()->mime_type=='application/pdf')
                                            <div class="col-md-3 col-lg-3 col-6 profile-latest-img mb-1">
                                                <a href="{!! $visitorDetails->id_proof_attachment !!}" target="_blank">
                                                    <img src="/assets/img/pdf-icon.jpg" id="id_upload_preview" class="img-fluid rounded" title="{!! $visitorDetails->id_proof_attachment !!}" style="height:200px; width:200px; object-fit: contain;" alt="attachment" />
                                                </a>
                                                @else
                                                <a href="" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                    <img src="{!! $visitorDetails->id_proof_attachment !!}" id="id_upload_preview" class="img-fluid rounded modalAttachment" style="height:200px; width:200px; object-fit: contain;" alt="id proof attachment" onerror="this.src='/assets/img/id-proof-sample.png'" />
                                    
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif

                        @if($visitorDetails->imagebase64code)
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                            <h4 class="bill-heading" style="margin-left: 21px;">Visitor Selfie Image</h4> 
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">   
                                            <a href="" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                <img src="data:image/png;base64, {{ $visitorDetails->imagebase64code }}" class="img-fluid rounded modalAttachment" style="height:200px; width:200px; object-fit: contain;" alt="avatar"/>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    
                        <!-- attachment -->
                    </div>

                    <div class="card-body invoice-padding pt-0">
                        <h4 class="mb-3 text-center bill-heading card-title ">Meeting Details</h4>
                        <div class="row invoice-spacing mb-3">
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td class="pe-1">Employee Name :</td>
                                            <td><span class="fw-bold badge rounded-pill badge-light-primary"> {{$meetingDetails->employee->name}} ({{$meetingDetails->employee->email}})</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Purpose :</td>
                                            <td>
                                            {{$meetingDetails->purpose}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">From Date :</td>
                                            <td>
                                            {{$meetingDetails->request_from_date}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">To Date :</td>
                                            <td>{{$meetingDetails->request_to_date}}
                                            </td>
                                        </tr>  
                                    </tbody>
                                </table>
                            </div>
                            @if($meetingDetails->status=='pending' || $meetingDetails->status=='active')
                    
                                {!! Form::model($meetingDetails, ['method' => 'post', 'files' => 'true']) !!}
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Status:</label>
                                            <select class="form-control select2" id="status" name="status" >
                                                <option value="">--Select--</option>
                                                @foreach ($meetingStatus as $value)
                                                    <option value="{{ $value }}" @if(isset($meetingDetails->status) && ($meetingDetails->status == $value) || (old('status') == $value) || $value == 'approved')) selected @endif> {{ ucfirst($value) }}</option>
                                                @endforeach
                                            </select>
                                            {!! $errors->first('status', '<label class="control-label" for="status">:message</label>')!!}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group" id="location_div">
                                            <label>Location:</label>
                                            <select class="form-control select2" id="location_id" name="locations[]" onchange="getsubLocations(this,'sublocations')" multiple>
                                                @foreach($locations as $location)
                                                    <option value="{{$location->id}}">
                                                        {{$location->name}}
                                                    </option>
                                                @endforeach
                                            </select>
                                            {!! $errors->first('location_id', '<label class="control-label" for="location_id">:message</label>')!!}
                                        </div>
                                    </div>
                                    <div class="col-md-4" id="sublocation_div">
                                            
                                        <div class="form-group sublocations">
                                            <div class="row">
                                                <div class="col-md-8 col-12">
                                                    <label for="location_id">Sub Location</label>
                                                    <div class="form-group ">
                                                        <select class="form-control select2 blank_sub_location">
                                                            <option value="">Select Sub Location</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @foreach ($errors->all() as $error)
                                            {{ $error }}
                                        @endforeach
                                        
                                    </div>
                                </div>

                                <div class="row mt-1">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Remarks:</label>
                                            {!! Form::textarea('remarks', isset($meetingDetails->remarks) ? $meetingDetails->remarks : old('remarks'), ['class' => 'form-control', 'id' => 'remarks', 'rows' => 2, 'style' => 'resize:none;']) !!} 
                                            {!! $errors->first('remarks', '<label class="control-label" for="remarks">:message</label>')!!}
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-actions text-center">
                                    <button type="submit" id="save-form" class="btn btn-success" style="margin-top: 27px;"><i data-feather="check"></i> Save</button>

                                </div>
                                
                                {!! Form::close() !!} 
                            @else
                            <div class="col-xl-6 col-lg-6 col-md-6 col-12">
                                <table>
                                    <tbody>
                                        @php
                                            $status = '';
                                            if($meetingDetails->status == 'approve'){
                                                $status = 'Approve';
                                            }
                                            elseif($meetingDetails->status == 'approved'){
                                                $status = 'Approve';
                                            }
                                            elseif($meetingDetails->status == 'pending'){
                                                $status = 'Pending';
                                            }
                                            else{
                                                $status = 'reject';
                                            }
                                        @endphp
                                        @if($status == 'Approve')
                                            <tr>
                                                <td class="pe-1">Status :</td>
                                                <td><span class="fw-bold badge rounded-pill badge-light-info">Approve</span>
                                                </td>
                                            </tr>
                                        @elseif($status == 'Pending')
                                            <tr>
                                                <td class="pe-1">Status :</td>
                                                <td><span class="fw-bold badge rounded-pill badge-light-warning">Pending</span>
                                                </td>
                                            </tr>
                                        @else
                                            <tr>
                                                <td class="pe-1">Status :</td>
                                                <td><span class="fw-bold badge rounded-pill badge-light-danger">Reject</span>
                                                </td>
                                            </tr>
                                        @endif
                                       
                                        
                                        <tr>
                                            <td class="pe-1">Remarks :</td>
                                            <td>{{ $meetingDetails->remarks }}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Locations :</td>
                                            <td>@foreach($ApprovedLocations as $location)       
                                                    {{$location->name}}<br />
                                                @endforeach
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1">Sub Locations :</td>
                                            <td>
                                            @foreach($ApprovedsubLocations as $location)       
                                                {{$location->name}}<br />
                                            @endforeach
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>    
                            </div>
                        </div>
                        <center>
                            <a href="/{!! $alias !!}/visitor/pass/{{ $meetingDetails->id }}/download" target="_blank"><button class="btn btn-success">Print Pass</button></a>
                        </center>
                            <br>
                            <br>
                        @endif
                    </div>
                
                </div>

            </div>

        </div>

    </div>

    <!-- image modal -->
    <div class="modal fade" id="addNewCard" tabindex="-1" aria-labelledby="addNewCardTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-transparent">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <img id="modalimg2" src="" class="img-fluid rounded"
                    alt="avatar img" />
            </div>
        </div>
    </div>
    <!--/ image modal -->
</section>
@endsection

@push('footer-script')
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/js/scripts/pages/page-profile.js"></script>
<script src="/app-assets/js/scripts/ui/ui-feather.js"></script>
<script src="/app-assets/js/scripts/tables/table-datatables-basic.js"></script>
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>


<!-- <script src="../../../app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script> -->

<script>
   var imagesPreview = function(input, placeToInsertImagePreview) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var extension = input.files[0].name.split('.').pop().toLowerCase();
                if(extension == "pdf"){
                    $($.parseHTML('<img src="/assets/img/pdf-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else if(extension == "docx" || extension=="doc"){
                    $($.parseHTML('<img src="/assets/img/docx-icon.jpg" style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).appendTo(placeToInsertImagePreview);
                }
                else{
                    $($.parseHTML('<img style="height:200px; width:200px; object-fit: contain;"> <a onclick="deleteAttachment.call(this)" style="cursor:pointer; color:red; position: absolute; right: 5px; top: 5px" title="Delete Image"> <i class="fa fa-times-circle" style="font-size:18px;"></i></a><p class="text-center">'+input.files[0].name+'</p>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }
            }
            reader.readAsDataURL(input.files[0]);
        }
    };

    function preview() {
        imagesPreview(this, $(this).closest('div'));
    }
</script>

<script>
    $(window).on('load', function() {
        if (feather) {
            feather.replace({
                width: 14,
                height: 14
            });
        }
        // barChartExample();
    });

    $(".modalAttachment").click(function() {
        $('#modalimg2').attr('src', $(this).attr('src'));
        modal.modal("show");
    });
</script>
<script type="text/javascript">
    var subLocations = '';

    function getsubLocations(th) {
        var locationId = $('#location_id').val();
        
        var subLocationId = "";

        var data = {
            location_id: locationId,
            '_token': '{{{csrf_token()}}}'
        }
        $.ajax({
            url: '/{{$organization->alias}}/location/sub-locations',
            type: 'POST',
            data: data,
            success: function(data) {
                var selectbox = '';
                if (data) {
                    selectbox = '<label for="sub_location_id">Sub Location</label>';
                    selectbox += '<div class="form-label-group"><select name="sublocations[]" class="form-control select2" id="sub_location_id" multiple>';
                    selectbox += '<option value="">-- Select Sub Locations --</option>';
                    $.each(data, function(i, item) {
                        if (subLocations.includes(i)) {
                            selectbox += '<option value="' + i + '" selected="selected">' + item + '</option>';
                        } else {
                            selectbox += '<option value="' + i + '">' + item + '</option>';
                        }
                    });
                    selectbox += '</select></div>';
                }
                
                $('#blank_sub_location').css('display', 'none');
                $('.sublocations').css('display', 'block');
                $('.sublocations').html(selectbox);
                $("#sub_location_id").select2({
                    multiple: true
                });
            }
        });
        
    }
	
	$(document).ready(function() {
        if ($('#location_id').val()) {
            getsubLocations();
        }
        $('#location_div').show();
        $('#sublocation_div').show();
        $("#location_id").attr("disabled", false);
        $("#sub_location_id").attr("disabled", false);
    });
</script>
<style>
.custom-dropdown .form-control { height: auto; padding: 0 }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices { background: none; padding:0; border: none }
.custom-dropdown .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { margin-right: 5px }
#organization tr th { /* word-break: break-all; */ 
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;}
.tbalorganiresp { overflow: scroll } 

table {
  border-collapse: separate;
  border-spacing: 0 10px;
}
</style>

<!-- END: Page JS-->


@endpush