@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-->
<!-- 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/pages/page-profile.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">{{trans('master/master.visit_master')}}</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 !!}/visit">{{trans('master/master.visit_master')}}</a>
                    </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 class="logo-wrapper d-flex">
                                    <h3 class="text-primary invoice-logo">{{trans('master/master.visit_record')}}</h3>
                                </div>
                                <hr class="invoice-spacing" />
                            </div>
                        </div>
                    </div>
                    <!--view visit record-->
                    <div class="card-body invoice-padding pt-0">
                        <h4 class="mb-3 text-center bill-heading card-title ">{{trans('common/common.view')}} {{trans('master/master.visit_record')}}</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 pt-2">{{trans('master/master.name')}} :</td>
                                            <td class="pt-2">
                                                <span class="text-primary">
                                                    <b> {{ ucfirst($visit->name) }}</b> 
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.purpose')}} :</td>
                                            <td class="pt-2">{{ ucfirst(@$visit->purpose->name) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.venue')}} :</td>
                                            <td class="pt-2"><span>{{ ucfirst($visit->venue) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.assigned_to')}} :</td>
                                            <td class="pt-2"><span>{{ $currEmp->name }}</span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.customer_name')}} :</td>
                                            <td class="pt-2">{{ ucfirst($visit->customer->name) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.mobile_number')}} :</td>
                                            <td class="pt-2"> {{ ucfirst($visit->customer->mobile) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.email_id')}} :</td>
                                            <td class="pt-2">{{ ucfirst($visit->customer->email) }}</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 pt-2">{{trans('master/master.address')}} :</td>
                                            <td class="pt-2"><span class="fw-bold">{{ ucfirst($visit->customer->company_address) }}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.geo_address')}} :</td>
                                            <td class="pt-2">{{ ucfirst($visit->customer->geo_address) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.visit_from')}} :</td>
                                            <td class="pt-2">{{ ucfirst($visit->from_time) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.visit_till')}} :</td>
                                            <td class="pt-2">{{ ucfirst($visit->to_time) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.remarks')}} :</td>
                                            <td class="pt-2"> <span
                                                    class="fw-bold badge rounded-pill badge-light-success"> {{ ucfirst($visit->remarks) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.status')}} :</td>
                                            <td class="pt-2"> <span
                                                    class="fw-bold badge rounded-pill badge-light-success">{{ ucfirst($visit->status) }}</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="pe-1 pt-2">{{trans('master/master.created_by')}} :</td>
                                            <td class="pt-2">{{ $createdBy->name }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--view visit record -->

                    <!-- attachment -->
                    <div class="row invoice-spacing ">
                        <div class="content-body">
                            <section class="basic-timeline">
                                @if($visit->attachments)
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <h4 class="mb-3 bill-heading text-center">{{trans('common/common.attachments')}}</h4>
                                                <div class="row">
                                                @if($visit->attachments)
                                                    @foreach($visit->getMedia('attachments') as $attachment)
                                                    <div class="col-md-3 col-lg-3 col-6 profile-latest-img mb-1">
                                                         @if($attachment->mime_type=="application/msword" || $attachment->mime_type=="appplication/docx" || $attachment->mime_type=="appplication/doc")
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="/assets/img/docx-icon.jpg" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                        @elseif($attachment->mime_type=="application/pdf")
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="/assets/img/pdf-icon.jpg" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                        @else
                                                        <a href="{{$attachment->getUrl()}}" data-bs-toggle="modal" data-bs-target="#addNewCard">
                                                            <img src="{{$attachment->getUrl()}}" class="img-fluid rounded modalAttachment" alt="avatar img" />
                                                        </a>
                                                        @endif
                                                    <p class="text-center">{{$attachment->file_name}}</p>
                                                    </div>
                                                    @endforeach
                                                    
                                                @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </section>
                        </div>
                    </div>
                    <!-- end attachment -->

                </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/js/scripts/pages/modal-add-new-cc.js"></script>
<script src="/app-assets/vendors/js/vendors.min.js"></script>
<script src="/app-assets/js/core/app-menu.js"></script>
<script src="/app-assets/js/core/app.js"></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>
    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>
<!-- END: Page JS-->
<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 } 
</style>
@endpush