@extends('layouts.master', ['title' => __('app.visitor')])
@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/themes/default/style.min.css")}}">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush
@push("styles")
<style>

a.jstree-anchor.jstree-clicked {
    background: #ebebeb;
}

/* Fix untuk kolom location pada tabel visitor */
#table_gatein_visitor {
    table-layout: auto;
    width: 100%;
}

#table_gatein_visitor th,
#table_gatein_visitor td {
    vertical-align: top;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Lebar minimal untuk setiap kolom */
#table_gatein_visitor th:nth-child(1),
#table_gatein_visitor td:nth-child(1) {
    min-width: 50px;
    width: 50px;
}

#table_gatein_visitor th:nth-child(2),
#table_gatein_visitor td:nth-child(2) {
    min-width: 200px;
    max-width: 280px;
}

#table_gatein_visitor th:nth-child(3),
#table_gatein_visitor td:nth-child(3) {
    min-width: 150px;
}

#table_gatein_visitor th:nth-child(4),
#table_gatein_visitor td:nth-child(4) {
    min-width: 150px;
}

#table_gatein_visitor th:nth-child(5),
#table_gatein_visitor td:nth-child(5) {
    min-width: 120px;
}

#table_gatein_visitor th:nth-child(6),
#table_gatein_visitor td:nth-child(6),
#table_gatein_visitor th:nth-child(7),
#table_gatein_visitor td:nth-child(7) {
    min-width: 130px;
}

#table_gatein_visitor th:nth-child(8),
#table_gatein_visitor td:nth-child(8) {
    min-width: 120px;
}

#table_gatein_visitor th:nth-child(9),
#table_gatein_visitor td:nth-child(9) {
    min-width: 180px;
}

#table_gatein_visitor th:nth-child(10),
#table_gatein_visitor td:nth-child(10) {
    min-width: 150px;
}

#table_gatein_visitor th:nth-child(11),
#table_gatein_visitor td:nth-child(11) {
    min-width: 140px;
}

/* Wrapper untuk scroll horizontal jika tabel terlalu lebar */
.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Styling untuk collapse di kolom location */
#table_gatein_visitor .collapse-header h4 {
    margin: 0;
    font-size: 14px;
}

#table_gatein_visitor .collapse-content {
    max-height: 300px;
    overflow-y: auto;
}

/* Pastikan text tidak overflow */
#table_gatein_visitor .flex-media .meta span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h-select.is-active .select-drop {
    display: contents !important;
}
</style>
@endpush
@section('content')
    <div class="page-content-inner">
        <div class="datatable-toolbar">
            <div class="field has-addons">
                <div class="control has-icon mr-3">
                    <input type="text" placeholder="Search..." id="search_visitor" class="datatable-filter input">
                    <div class="form-icon">
                        <i data-feather="search"></i>
                    </div>
                </div>
                <div class="control">
                    <div class="dropdown dropdown-trigger is-right" id="filter_gate_in_visitor">
                        <div class="is-trigger">
                            <button class="button h-button is-bold">
                                <span class="icon">
                                    <i data-feather="filter"></i>
                                </span>
                                <span>@lang('app.filter')</span>
                            </button>
                        </div>
                        <div class="dropdown-menu" style="min-width: 15rem" role="menu">
                            @include('components.modal.modal-filter', [
                                'filter' => 'gate_in_visitor',
                            ])
                        </div>
                    </div>
                </div>
                <div id="showing_info_visitor" style="margin-left: 20px; display: flex; align-items: center; font-size: 14px; color: #666; font-weight: 500;"></div>
            </div>
            @role(['super_admin', 'user_admin', 'office_admin', 'admin_contractor'])
                <div class="buttons">
                    <a href="{{ route('gate-in.visitor.create') }}" class="button h-button is-warning">
                        <span class="icon">
                            <i aria-hidden="true" class="fas fa-plus"></i>
                        </span>
                        <span>Add Visitor</span>
                    </a>
                    @include('components.button.button-export', [
                        'id' => 'export_gatein_visitor',
                        'title' => __('app.export_visitor'),
                    ])
                </div>
            @endrole
        </div>
        {{-- <div class="lifestyle-dashboard lifestyle-dashboard-v1 mb-5">
            <div class="columns">
                <div class="column is-12">
                    <div class="columns is-multiline">
                        <div class="column is-12">
                            <div class="txt-dsh-4">@lang('app.on_duty_approval')</div>
                        </div>
                        <div class="column is-4">
                            <div class="card-medical bg-mc4">
                                <svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="float:right;">
                                <rect x="0.666748" width="48" height="48" rx="24" fill="#905504"/>
                                <path d="M24.6667 18.5C28.4567 18.5 31.8367 20.63 33.4867 24C31.8367 27.37 28.4667 29.5 24.6667 29.5C20.8667 29.5 17.4967 27.37 15.8467 24C17.4967 20.63 20.8767 18.5 24.6667 18.5ZM24.6667 16.5C19.6667 16.5 15.3967 19.61 13.6667 24C15.3967 28.39 19.6667 31.5 24.6667 31.5C29.6667 31.5 33.9367 28.39 35.6667 24C33.9367 19.61 29.6667 16.5 24.6667 16.5ZM24.6667 21.5C26.0467 21.5 27.1667 22.62 27.1667 24C27.1667 25.38 26.0467 26.5 24.6667 26.5C23.2867 26.5 22.1667 25.38 22.1667 24C22.1667 22.62 23.2867 21.5 24.6667 21.5ZM24.6667 19.5C22.1867 19.5 20.1667 21.52 20.1667 24C20.1667 26.48 22.1867 28.5 24.6667 28.5C27.1467 28.5 29.1667 26.48 29.1667 24C29.1667 21.52 27.1467 19.5 24.6667 19.5Z" fill="white"/>
                                </svg>

                                <div class="txt-title-mc"><span id="total_need_review">0</span></div>
                                <div class="txt-content-mc">@lang('app.need_approval')</div>

                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card-medical bg-mc3">
                                <svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="float:right;">
                                <rect x="0.199951" width="48" height="48" rx="24" fill="#1B9D30"/>
                                <path d="M24.2 14C18.68 14 14.2 18.48 14.2 24C14.2 29.52 18.68 34 24.2 34C29.72 34 34.2 29.52 34.2 24C34.2 18.48 29.72 14 24.2 14ZM24.2 32C19.79 32 16.2 28.41 16.2 24C16.2 19.59 19.79 16 24.2 16C28.61 16 32.2 19.59 32.2 24C32.2 28.41 28.61 32 24.2 32ZM28.79 19.58L22.2 26.17L19.61 23.59L18.2 25L22.2 29L30.2 21L28.79 19.58Z" fill="white"/>
                                </svg>

                                <div class="txt-title-mc"><span id="total_approved">0</span></div>
                                <div class="txt-content-mc">@lang('app.approved')</div>
                            </div>
                        </div>
                        <div class="column is-4">
                            <div class="card-medical bg-mc5">
                                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="float:right;">
                                <rect x="0.000244141" width="48" height="48" rx="24" fill="#D9292F"/>
                                <path d="M24.0002 14C18.4802 14 14.0002 18.48 14.0002 24C14.0002 29.52 18.4802 34 24.0002 34C29.5202 34 34.0002 29.52 34.0002 24C34.0002 18.48 29.5202 14 24.0002 14ZM24.0002 32C19.5802 32 16.0002 28.42 16.0002 24C16.0002 22.15 16.6302 20.45 17.6902 19.1L28.9002 30.31C27.5502 31.37 25.8502 32 24.0002 32ZM30.3102 28.9L19.1002 17.69C20.4502 16.63 22.1502 16 24.0002 16C28.4202 16 32.0002 19.58 32.0002 24C32.0002 25.85 31.3702 27.55 30.3102 28.9Z" fill="white"/>
                                </svg>

                                <div class="txt-title-mc"><span id="total_decline">0</span></div>
                                <div class="txt-content-mc">@lang('app.decline')</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
        <div class="table-wrapper">
            <table id="table_gatein_visitor" class="table is-datatable is-hoverable table-is-bordered">
                <thead>
                    <tr>
                        <th class="has-text-centered">
                            <label class="custom-checkbox">
                              <input type="checkbox" id="checkAll" class="checkbox" onclick="toggleCheckboxes(this)">
                              <span class="checkmark"></span>
                            </label>
                        </th>
                        <th class="has-text-centered">@lang('app.location')</th>
                        <th class="has-text-centered">
                            <div class="table-sortable">
                                <span>@lang('app.name')</span>
                                <span class="icon-sort">
                                    @include('components.icons.cevron-up-small', ['field' => 'name'])
                                    @include('components.icons.cevron-down-small', ['field' => 'name'])
                                </span>
                            </div>
                        </th>
                        <th class="has-text-centered">
                            <div class="table-sortable">
                                <span>Admin Contractor</span>
                                <span class="icon-sort">
                                    @include('components.icons.cevron-up-small', ['field' => 'created_by'])
                                    @include('components.icons.cevron-down-small', ['field' => 'created_by'])
                                </span>
                            </div>
                        </th>
                        <th class="has-text-centered">
                            <div class="table-sortable">
                                <span>@lang('app.company')</span>
                                <span class="icon-sort">
                                    @include('components.icons.cevron-up-small', ['field' => 'company'])
                                    @include('components.icons.cevron-down-small', ['field' => 'company'])
                                </span>
                            </div>
                        </th>
                        <th class="has-text-centered">@lang('app.purpose')</th>
                        <th class="has-text-centered">
                            <div class="table-sortable">
                                <span>Start Visit</span>
                                <span class="icon-sort">
                                    @include('components.icons.cevron-up-small', [
                                        'field' => 'start_duty',
                                    ])
                                    @include('components.icons.cevron-down-small', [
                                        'field' => 'start_duty',
                                    ])
                                </span>
                            </div>
                        </th>
                        <th class="has-text-centered">
                            <div class="table-sortable">
                                <span>End Visit</span>
                                <span class="icon-sort">
                                    @include('components.icons.cevron-up-small', [
                                        'field' => 'end_duty',
                                    ])
                                    @include('components.icons.cevron-down-small', [
                                        'field' => 'end_duty',
                                    ])
                                </span>
                            </div>
                        </th>
                        <th class="has-text-centered">
                            <span>MCU Approval</span>
                        </th>
                        <th class="has-text-centered">
                            <span>Sponsor Approval</span>
                        </th>
                        <th class="has-text-centered">
                            <span>Assigned Doctor</span>
                        </th>
                        <th class="has-text-centered">Resend Email<br>to Sponsor</th>
                        {{-- <th class="has-text-centered">Download <br>QR Code</th> --}}
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="box-table" id="card-leads" style="display:none;">
            <div class="box-card-table">
                <span id="numbers"></span> selected data

                <a href="javascript:;" class="tooltip-2" id="openModal">
                    <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer">
                    <rect x="0.662598" width="30" height="30" rx="15" fill="#E89417"/>
                    <path d="M18.9958 12.5V20.8333H12.3291V12.5H18.9958ZM17.7458 7.5H13.5791L12.7458 8.33333H9.8291V10H21.4958V8.33333H18.5791L17.7458 7.5ZM20.6624 10.8333H10.6624V20.8333C10.6624 21.75 11.4124 22.5 12.3291 22.5H18.9958C19.9124 22.5 20.6624 21.75 20.6624 20.8333V10.8333Z" fill="white"/>
                    </svg>
                    <span class="tooltiptext">Delete</span>
                </a>


                <svg xmlns="http://www.w3.org/2000/svg" width="2" height="34" viewBox="0 0 2 34" fill="none">
                  <path d="M0.662598 33L0.662598 0.999999" stroke="white" stroke-opacity="0.2" stroke-linecap="round"/>
                </svg>

                <a href="javascript:;" class="tooltip-2" id="btn_export_get_in_visitor2">
                    <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer">
                    <rect x="0.662598" width="30" height="30" rx="15" fill="#E89417"/>
                    <path d="M20.6628 17.5007V20.0007H10.6628V17.5007H8.99609V20.0007C8.99609 20.9173 9.74609 21.6673 10.6628 21.6673H20.6628C21.5794 21.6673 22.3294 20.9173 22.3294 20.0007V17.5007H20.6628ZM19.8294 14.1673L18.6544 12.9923L16.4961 15.1423V8.33398H14.8294V15.1423L12.6711 12.9923L11.4961 14.1673L15.6628 18.334L19.8294 14.1673Z" fill="white"/>
                    </svg>
                    <span class="tooltiptext">Export Visitor</span>
                </a>


                <a href="javascript:;" class="tooltip-2" >
                    <svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer">
                    <rect x="0.662598" width="30" height="30" rx="15" fill="#E89417"/>
                    <path d="M8.1626 14.1667H14.8293V7.5H8.1626V14.1667ZM9.82926 9.16667H13.1626V12.5H9.82926V9.16667Z" fill="white"/>
                    <path d="M8.1626 22.5H14.8293V15.8333H8.1626V22.5ZM9.82926 17.5H13.1626V20.8333H9.82926V17.5Z" fill="white"/>
                    <path d="M16.4959 7.5V14.1667H23.1626V7.5H16.4959ZM21.4959 12.5H18.1626V9.16667H21.4959V12.5Z" fill="white"/>
                    <path d="M23.1626 20.8333H21.4959V22.5H23.1626V20.8333Z" fill="white"/>
                    <path d="M18.1626 15.8333H16.4959V17.5H18.1626V15.8333Z" fill="white"/>
                    <path d="M19.8293 17.5H18.1626V19.1667H19.8293V17.5Z" fill="white"/>
                    <path d="M18.1626 19.1667H16.4959V20.8333H18.1626V19.1667Z" fill="white"/>
                    <path d="M19.8293 20.8333H18.1626V22.5H19.8293V20.8333Z" fill="white"/>
                    <path d="M21.4959 19.1667H19.8293V20.8333H21.4959V19.1667Z" fill="white"/>
                    <path d="M21.4959 15.8333H19.8293V17.5H21.4959V15.8333Z" fill="white"/>
                    <path d="M23.1626 17.5H21.4959V19.1667H23.1626V17.5Z" fill="white"/>
                    </svg>
                    <span class="tooltiptext">Download <br>QR Code</span>
                </a>

                <svg xmlns="http://www.w3.org/2000/svg" width="2" height="34" viewBox="0 0 2 34" fill="none">
                  <path d="M0.662598 33L0.662598 0.999999" stroke="white" stroke-opacity="0.2" stroke-linecap="round"/>
                </svg>

                <a href="javascript:;" class="tooltip-2" onclick="myClose()">
                    <svg width="62" height="38" viewBox="0 0 62 38" fill="none" xmlns="http://www.w3.org/2000/svg" class="cursor-pointer">
                    <rect x="0.662598" width="61" height="38" rx="19" fill="#E89417"/>
                    <path d="M16.4958 14.341L15.3208 13.166L10.6624 17.8243L6.0041 13.166L4.8291 14.341L9.48743 18.9993L4.8291 23.6577L6.0041 24.8327L10.6624 20.1743L15.3208 24.8327L16.4958 23.6577L11.8374 18.9993L16.4958 14.341Z" fill="white"/>
                    <path d="M34.7655 20.9932H36.0124C35.9475 21.5907 35.7764 22.1254 35.4994 22.5973C35.2223 23.0692 34.8305 23.4437 34.3239 23.7208C33.8174 23.9935 33.1853 24.1299 32.4276 24.1299C31.8735 24.1299 31.3691 24.026 30.9145 23.8182C30.4642 23.6104 30.0768 23.316 29.7521 22.935C29.4273 22.5496 29.1762 22.0886 28.9987 21.5517C28.8256 21.0105 28.739 20.4087 28.739 19.7463V18.8047C28.739 18.1423 28.8256 17.5427 28.9987 17.0058C29.1762 16.4646 29.4295 16.0014 29.7585 15.6161C30.0919 15.2307 30.4924 14.9342 30.96 14.7264C31.4275 14.5186 31.9536 14.4146 32.538 14.4146C33.2524 14.4146 33.8563 14.5489 34.3499 14.8173C34.8435 15.0857 35.2266 15.458 35.4994 15.9343C35.7764 16.4062 35.9475 16.9539 36.0124 17.5773H34.7655C34.7049 17.1357 34.5923 16.7569 34.4278 16.4408C34.2633 16.1204 34.0295 15.8737 33.7265 15.7005C33.4234 15.5273 33.0273 15.4407 32.538 15.4407C32.1181 15.4407 31.7479 15.5208 31.4275 15.681C31.1115 15.8412 30.8452 16.0685 30.6288 16.3629C30.4166 16.6573 30.2564 17.0101 30.1482 17.4214C30.04 17.8327 29.9858 18.2895 29.9858 18.7917V19.7463C29.9858 20.2096 30.0335 20.6447 30.1287 21.0517C30.2283 21.4586 30.3777 21.8158 30.5768 22.1232C30.776 22.4306 31.0292 22.673 31.3366 22.8505C31.644 23.0237 32.0077 23.1103 32.4276 23.1103C32.9602 23.1103 33.3844 23.0259 33.7005 22.857C34.0165 22.6882 34.2547 22.4457 34.4148 22.1297C34.5794 21.8136 34.6963 21.4348 34.7655 20.9932ZM38.8438 14.025V24H37.6359V14.025H38.8438ZM40.4544 20.5646V20.4152C40.4544 19.9087 40.528 19.4389 40.6752 19.006C40.8224 18.5687 41.0345 18.1899 41.3116 17.8695C41.5887 17.5448 41.9242 17.2937 42.3182 17.1162C42.7122 16.9344 43.1538 16.8435 43.643 16.8435C44.1366 16.8435 44.5803 16.9344 44.9743 17.1162C45.3726 17.2937 45.7103 17.5448 45.9874 17.8695C46.2688 18.1899 46.4831 18.5687 46.6303 19.006C46.7775 19.4389 46.8511 19.9087 46.8511 20.4152V20.5646C46.8511 21.0711 46.7775 21.5409 46.6303 21.9738C46.4831 22.4068 46.2688 22.7856 45.9874 23.1103C45.7103 23.4307 45.3748 23.6818 44.9808 23.8636C44.5912 24.0411 44.1496 24.1299 43.656 24.1299C43.1625 24.1299 42.7187 24.0411 42.3247 23.8636C41.9307 23.6818 41.593 23.4307 41.3116 23.1103C41.0345 22.7856 40.8224 22.4068 40.6752 21.9738C40.528 21.5409 40.4544 21.0711 40.4544 20.5646ZM41.6558 20.4152V20.5646C41.6558 20.9153 41.6969 21.2465 41.7792 21.5582C41.8615 21.8656 41.9848 22.1383 42.1494 22.3765C42.3182 22.6146 42.5282 22.8029 42.7793 22.9415C43.0304 23.0757 43.3226 23.1428 43.656 23.1428C43.985 23.1428 44.2729 23.0757 44.5197 22.9415C44.7708 22.8029 44.9786 22.6146 45.1432 22.3765C45.3077 22.1383 45.4311 21.8656 45.5133 21.5582C45.5999 21.2465 45.6432 20.9153 45.6432 20.5646V20.4152C45.6432 20.0689 45.5999 19.742 45.5133 19.4346C45.4311 19.1229 45.3055 18.848 45.1367 18.6099C44.9722 18.3674 44.7643 18.1769 44.5132 18.0384C44.2665 17.8998 43.9764 17.8306 43.643 17.8306C43.314 17.8306 43.0239 17.8998 42.7728 18.0384C42.526 18.1769 42.3182 18.3674 42.1494 18.6099C41.9848 18.848 41.8615 19.1229 41.7792 19.4346C41.6969 19.742 41.6558 20.0689 41.6558 20.4152ZM52.4491 22.1362C52.4491 21.963 52.4101 21.8028 52.3322 21.6556C52.2586 21.5041 52.1049 21.3677 51.8711 21.2465C51.6416 21.1209 51.2953 21.0127 50.832 20.9218C50.4424 20.8395 50.0895 20.7421 49.7735 20.6295C49.4618 20.517 49.1955 20.3806 48.9747 20.2204C48.7582 20.0602 48.5916 19.8719 48.4747 19.6554C48.3578 19.4389 48.2993 19.1857 48.2993 18.8956C48.2993 18.6185 48.3599 18.3566 48.4812 18.1098C48.6067 17.863 48.782 17.6444 49.0072 17.4539C49.2366 17.2634 49.5116 17.114 49.8319 17.0058C50.1523 16.8976 50.5095 16.8435 50.9035 16.8435C51.4663 16.8435 51.9469 16.943 52.3452 17.1422C52.7435 17.3413 53.0487 17.6076 53.2608 17.941C53.473 18.27 53.5791 18.6358 53.5791 19.0385H52.3776C52.3776 18.8437 52.3192 18.6553 52.2023 18.4735C52.0897 18.2873 51.923 18.1336 51.7022 18.0124C51.4858 17.8912 51.2195 17.8306 50.9035 17.8306C50.5701 17.8306 50.2995 17.8825 50.0917 17.9864C49.8882 18.086 49.7389 18.2137 49.6436 18.3696C49.5527 18.5254 49.5072 18.69 49.5072 18.8631C49.5072 18.993 49.5289 19.1099 49.5722 19.2138C49.6198 19.3134 49.7021 19.4065 49.8189 19.4931C49.9358 19.5753 50.1004 19.6533 50.3125 19.7269C50.5246 19.8005 50.7952 19.8741 51.1243 19.9477C51.7001 20.0775 52.1742 20.2334 52.5465 20.4152C52.9188 20.5971 53.1959 20.82 53.3777 21.0841C53.5596 21.3482 53.6505 21.6686 53.6505 22.0453C53.6505 22.3527 53.5855 22.6341 53.4557 22.8895C53.3301 23.1449 53.1461 23.3657 52.9037 23.5519C52.6655 23.7337 52.3798 23.8766 52.0464 23.9805C51.7174 24.0801 51.3472 24.1299 50.9359 24.1299C50.3168 24.1299 49.793 24.0195 49.3644 23.7987C48.9357 23.5779 48.611 23.2921 48.3902 22.9415C48.1694 22.5908 48.059 22.2206 48.059 21.831H49.2669C49.2843 22.16 49.3795 22.4219 49.5527 22.6167C49.7259 22.8072 49.938 22.9436 50.1891 23.0259C50.4402 23.1038 50.6892 23.1428 50.9359 23.1428C51.265 23.1428 51.5399 23.0995 51.7607 23.0129C51.9858 22.9263 52.1568 22.8072 52.2737 22.6557C52.3906 22.5042 52.4491 22.331 52.4491 22.1362ZM58.1444 24.1299C57.6552 24.1299 57.2114 24.0476 56.8131 23.8831C56.4192 23.7143 56.0793 23.4783 55.7936 23.1752C55.5121 22.8722 55.2957 22.5128 55.1441 22.0972C54.9926 21.6816 54.9168 21.227 54.9168 20.7334V20.4607C54.9168 19.8892 55.0013 19.3805 55.1701 18.9346C55.339 18.4843 55.5684 18.1033 55.8585 17.7916C56.1486 17.4799 56.4776 17.2439 56.8456 17.0837C57.2136 16.9236 57.5946 16.8435 57.9886 16.8435C58.4908 16.8435 58.9237 16.93 59.2874 17.1032C59.6554 17.2764 59.9563 17.5188 60.1901 17.8306C60.4239 18.138 60.5971 18.5016 60.7096 18.9216C60.8222 19.3372 60.8785 19.7918 60.8785 20.2854V20.8244H55.6312V19.8437H59.6771V19.7528C59.6597 19.4411 59.5948 19.1381 59.4822 18.8437C59.374 18.5493 59.2008 18.3068 58.9627 18.1163C58.7246 17.9258 58.3999 17.8306 57.9886 17.8306C57.7158 17.8306 57.4647 17.889 57.2353 18.0059C57.0058 18.1185 56.8088 18.2873 56.6443 18.5125C56.4798 18.7376 56.3521 19.0125 56.2611 19.3372C56.1702 19.6619 56.1248 20.0364 56.1248 20.4607V20.7334C56.1248 21.0668 56.1702 21.3807 56.2611 21.6751C56.3564 21.9652 56.4928 22.2206 56.6703 22.4414C56.8521 22.6622 57.0707 22.8354 57.3262 22.9609C57.5859 23.0865 57.8803 23.1493 58.2094 23.1493C58.6337 23.1493 58.993 23.0627 59.2874 22.8895C59.5818 22.7163 59.8394 22.4847 60.0602 22.1946L60.7875 22.7726C60.636 23.0021 60.4434 23.2207 60.2096 23.4285C59.9758 23.6363 59.6879 23.8052 59.3459 23.9351C59.0082 24.0649 58.6077 24.1299 58.1444 24.1299Z" fill="white"/>
                    </svg>
                    <span class="tooltiptext">Close</span>
                </a>

            </div>
        </div>
        <div id="pagination_visitors"></div>
    </div>
    <div id="container_modal_detail_visitor"></div>
    @include('components.modal.visitor.modal-confirmation-resend-email')
<!-- Modal Bulma -->
<div class="modal" id="myModal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head bg-white">
      <div class="modal-card-title-plus">Delete: <span class="modal-card-title-plus2"><span id="numbers2"></span> selected data</span></div>
      <button class="delete" aria-label="close" id="closeModal1"></button>
    </header>
    <section class="modal-card-body" align="center">
      <img src="{{url('assets/img/icons/inbox-cleanup.svg')}}">
      <div class="txt1">Are you sure you want to delete this data?</div>
      <div class="txt2">This action is permanent and cannot be undone.</div>
    </section>
    <footer class="modal-card-foot bg-white m-align-center">
      <button class="button" id="closeModal2">Batal</button>
      <button class="button is-danger">Hapus</button>
    </footer>
  </div>
</div>

<div id="confirmDoctorModal" class="modal h-modal">
  <div class="modal-background h-modal-close"></div>
  <div class="modal-content">
    <div class="modal-card">
      <div class="modal-card-body">
        <div class="inner-content has-text-centered">
          <div class="h-avatar is-xl">
            <img class="avatar" src="{{ url('assets/img/icons/ic-alert-circle.svg') }}" alt="">
          </div>
          <h3 class="dark-inverted">Confirm Change</h3>
          <div class="fs-14 fw-500 mt-3">
            Are you sure you want to change the assigned doctor?
          </div>
        </div>
      </div>
      <div class="modal-card-foot is-centered">
        <a class="button h-button is-rounded h-modal-close" id="btnCancelDoctor">Cancel</a>
        <button type="button" id="btnConfirmDoctor"
          class="button h-button is-warning is-raised is-rounded">
          Yes
        </button>
      </div>
    </div>
  </div>
</div>

@endsection
@push('scripts')
    <script>
        const urlDataVisitor = '{{ route('gate-in.data-gatein-visitor') }}'
        const urlExportGateInVisitor = '{{ route('gate-in.export-visitor') }}'
        const urlUpdateVisitorStatus = '{{ route('gate-in.visitor.approval') }}'
        const urlCountStatusApproval = '{{ route('gate-in.count-status-visitor-approval') }}'
        const urlResendEmailSponsor = '{{ route('gate-in.visitor.resend-email-sponsor') }}'
    </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script src="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/jstree.min.js") }}"></script>
    <script src="{{ asset('assets/js/table-loader.js') }}"></script>
    <script src="{{ asset('assets/js/gate-in/visitor.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/Paginate.js') }}"></script>
    <script src="{{ asset('assets/js/pagination/change-perpage.js') }}"></script>
    <script>
        @if (session('success'))
            notyf.success("{{ session('success') }}");
        @endif
    </script>
    <script>
        // Variable untuk menyimpan data visitor sementara
        let currentVisitorData = null;

        // Handler untuk resend email ke sponsor
        $(document).on('click', '.resend-email-sponsor', function(e) {
            e.preventDefault();
            e.stopPropagation();

            // Simpan data dari button yang diklik
            currentVisitorData = {
                id: $(this).data('visitor-id'),
                email: $(this).data('sponsor-email')
            };

            // Update teks di modal
            $('#modal-confirmation-resend-email .fs-14').html(
                `Submitting this form will resend the email confirmation to <strong>${currentVisitorData.email}</strong>. ` +
                `They will not be able to resume work for this period until they confirm their email address.`
            );

            // Tampilkan modal
            $('#modal-confirmation-resend-email').addClass('is-active');
        });

        $(document).on('click', '#btn-confirm-resend-email-submit', function() {
            if (!currentVisitorData) return;

            const $btn = $(this);
            const originalHtml = $btn.html();

            // Disable button dan tampilkan loading
            $btn.prop('disabled', true).html('<span class="icon"><i class="fas fa-spinner fa-spin"></i></span> Sending...');

            $.ajax({
                url: urlResendEmailSponsor,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    visitor_id: currentVisitorData.id
                },
                success: function(response) {
                    $('#modal-confirmation-resend-email').removeClass('is-active');

                    if (response.status) {
                        showNotification('success', 'Success', response.message || 'Email sent successfully');
                    } else {
                        showNotification('danger', 'Failed', response.message || 'Failed to send email');
                    }

                    $btn.prop('disabled', false).html(originalHtml);
                },
                error: function(xhr) {
                    $('#modal-confirmation-resend-email').removeClass('is-active');
                    showNotification('danger', 'Error', xhr.responseJSON?.message || 'Failed to send email');
                    $btn.prop('disabled', false).html(originalHtml);
                }
            });
        });
    </script>

    <script>
        // Function to toggle all checkboxes based on the master checkbox status
        function toggleCheckboxes(master) {
            const checkboxes = document.querySelectorAll('.checkbox');
            checkboxes.forEach(checkbox => checkbox.checked = master.checked);

            // Show alert without including the #checkAll checkbox in the count
            showAlertCheckedCount();
        }

        // Function to update the master checkbox based on individual checkbox status
        function updateCheckAll() {
            const masterCheckbox = document.getElementById('checkAll');
            const checkboxes = document.querySelectorAll('.checkbox');
            masterCheckbox.checked = Array.from(checkboxes).every(cb => cb.checked);

            // Show alert with the checked count, excluding #checkAll checkbox
            showAlertCheckedCount();
        }

        let results = "";

        // Function to display an alert with the count of checked checkboxes, excluding #checkAll
        function showAlertCheckedCount() {
            const checkedCount = document.querySelectorAll('.checkbox:checked').length - (document.getElementById('checkAll').checked ? 1 : 0);
            if(checkedCount==0){
                document.getElementById("card-leads").style.display="none";
            }else{
                document.getElementById("card-leads").style.display="flex";
            }

            // Dapatkan semua checkbox dengan nama 'item'
            const checkboxes = document.querySelectorAll('input[name="item"]:checked');
            let selectedItems = [];

            // Iterasi setiap checkbox yang tercentang dan ambil nilainya
            checkboxes.forEach((checkbox) => {
                selectedItems.push(checkbox.value);
            });

            results = selectedItems.join(", ");
            document.getElementById("numbers").innerHTML = checkedCount;
            document.getElementById("numbers2").innerHTML = checkedCount;
        }

        function myClose(){

            const checkboxes = document.querySelectorAll('.checkbox');
            checkboxes.forEach(checkbox => checkbox.checked = false);
            document.getElementById('checkAll').checked = false;  // Uncheck the master checkbox as well

            // Show alert with the updated checked count
            showAlertCheckedCount();

            const checkedCount = document.querySelectorAll('.checkbox:checked').length - (document.getElementById('checkAll').checked ? 1 : 0);

            document.getElementById("card-leads").style.display="none";
        }

        $('#btn_export_get_in_visitor2').on('click', function () {

            const dateExport = moment().format('DDMMYYYY')
            params.date_export = dateExport

            const queryString = $.param(params);

            let encoded = btoa(results);

            window.location.href = '{{url('gate-in/export-visitor2')}}' + '/' + encoded + '?' + queryString;
        })
    </script>
    <script>
      const modal = document.getElementById('myModal');
      const openBtn = document.getElementById('openModal');
      const closeBtn1 = document.getElementById('closeModal1');
      const closeBtn2 = document.getElementById('closeModal2');
      const modalBg = modal.querySelector('.modal-background');

      // Buka modal
      openBtn.addEventListener('click', () => {
        modal.classList.add('is-active');
      });

      // Tutup modal
      [closeBtn1, closeBtn2, modalBg].forEach(el => {
        el.addEventListener('click', () => {
          modal.classList.remove('is-active');
        });
      });
    </script>

    <script> feather.replace(); </script>
    <script>

    $(document).on('click', '.change-status', function (event) {
        event.stopPropagation();
        console.log("s");
        $('.change-status').not(this).removeClass('is-active');
        $(this).toggleClass('is-active');
    });

    $(document).on('click', '.table-row-visitor', function(event) {
        console.log("w");
        event.stopPropagation();
        const url = $(this).data('url');
        window.location.href = url;
    });


    $(document).on('click', '.collapse.has-chevron', function (event) {
        event.stopPropagation();
        toggleCollapse(this);
    });

    function toggleCollapse(el) {
        const content = el.querySelector('.collapse-content');
        const icon = el.querySelector('.collapse-icon i');

        // Toggle class is-active pada parent collapse
        el.classList.toggle('is-active');

        // Paksa tampil/sembunyiin konten secara manual
        if (content.style.display === 'block') {
            content.style.display = 'none';
        } else {
            content.style.display = 'block';
        }
    }
    </script>
    <script>
    // INI BUAT FILTER ABANGKUHHHHHH

    // toggle dropdown on input click
    $('#filterLocationTree input').on('click', function () {
        $('#filterLocationTree').toggleClass('open');
    });

    // close dropdown if clicked outside
    $(document).on('click', function (e) {
        if (!$(e.target).closest('#filterLocationTree').length) {
            $('#filterLocationTree').removeClass('open');
        }
    });

    // update input text on selection change
    $('#filterLocationTree').on('changed.jstree', function (e, data) {
        const selectedText = data.selected.map(id => data.instance.get_node(id).text).join(', ');
        $('#location_txt').val(selectedText);

        const $container = $("#filter_location_container");
        $container.empty();
        data.selected.forEach(id => {
            $('<input>').attr({ type: 'hidden', name: 'location[]', value: id })
                    .appendTo($container);
        });

        $container.trigger('locationChange');
    });

    function initDatePicker(selector, defaultDate) {
        // if no default date is provided, fallback to 30 days before today
        const start = defaultDate ? moment(defaultDate) : moment().subtract(30, 'days');

        $(selector).daterangepicker({
            singleDatePicker: true,
            timePicker: false,
            timePicker24Hour: false,
            showDropdowns: true,
            minYear: false,
            minDate: false,
            maxDate: false,
            locale: {
                format: 'DD/MM/YYYY'
            },
            startDate: start,
            autoUpdateInput: false
        });

        $(selector).on('apply.daterangepicker', function(ev, picker) {
            const $element = $(this);
            const format ='DD/MM/YYYY'

            $element.removeClass('is-danger');
            $element.attr('aria-invalid', 'false');
            $element.val(picker.startDate.format(format));
            $element.closest('.control').find('.invalid-feedback').remove();
        });

        $(selector).on('cancel.daterangepicker', function() {
            $(this).val('');
        });
    }

    initDatePicker('#start_duty');
    initDatePicker('#end_duty', moment().add(30,'days'));

    </script>
    <script>
        const locations = @json($locations);

        function buildTreeFormat(items) {
            return items.map(item => ({
                id: String(item.id),
                text: item.name,
                parent: item.parent_id ? String(item.parent_id) : "#",
                icon: false
            }));
        }

        const listLocation = buildTreeFormat(locations);

        // Example: init jsTree
        $('#filterLocationTree').jstree({
            core: { data: listLocation },
            plugins: ['checkbox'],
            checkbox: {
                cascade: 'up+down+undetermined'
            }
        });



    </script>
<script>
function downloadQR(url, filename) {
    fetch(url)
        .then(res => res.blob())
        .then(blob => {
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            link.remove();
        });
}
</script>


<script>
function handleDoctorCellClick(cellEl) {
    const $cell = $(cellEl);
    const updateDoctorUrl = "{{ route('gate-in.visitor.update-doctor') }}";
    const recordId = $cell.data('id');
    const currentDoctorId = $cell.data('doctor-id');

    const hadIcon = $cell.find('i').length > 0;
    const oldHtml = $cell.html();

    if ($cell.find('select').length) return; // prevent multiple selects

    const selectHtml = `
      <div class="field">
        <div class="select">
          <select class="doctor-select">
            <option value="">- Pilih Dokter -</option>
            @foreach ($doctors as $d)
              <option value="{{ e($d->id) }}">{{ e($d->name) }}</option>
            @endforeach
          </select>
        </div>
      </div>
    `;

    $cell.html(selectHtml);
    const $select = $cell.find('select');
    $select.val(currentDoctorId);
    $select.focus();

    $select.on('blur', function () {
        setTimeout(() => {
            if (!$cell.find(':focus').length) $cell.html(oldHtml);
        }, 100);
    });

    $select.on('change', function () {
        const newDoctorId = $(this).val();
        const newDoctorName = $(this).find('option:selected').text().trim();

        if (newDoctorId === currentDoctorId) {
            $cell.html(oldHtml);
            return;
        }

        // Open confirmation modal
        $('#confirmDoctorModal').addClass('is-active');

        $('#btnConfirmDoctor').one('click', function () {
            $('#confirmDoctorModal').removeClass('is-active');
            $cell.html('<span class="tag is-info is-light is-small">Updating...</span>');

            $.ajax({
                url: updateDoctorUrl,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    visitor_id: recordId,
                    mcu_reviewed_by: newDoctorId
                },
                success: function () {
                    const iconHtml = hadIcon ? '<i class="lnil lnil-pencil-alt ml-1"></i>' : '';
                    const newInner = `<div class="is-flex is-align-items-center">
                            <span class="doctor-name has-text-nowrap">${newDoctorName || '-'}</span>
                            ${iconHtml}
                          </div>`;

                    $cell.html(newInner);
                    $cell.data('doctor-id', newDoctorId);
                    showNotification('primary', 'Success', "Doctor Updated");
                },
                error: function () {
                    showNotification('danger', 'Failed', "Failed to update Doctor");
                    $cell.html(oldHtml);
                }
            });
        });

        // Handle cancel click
        $('#btnCancelDoctor').one('click', function () {
            $('#confirmDoctorModal').removeClass('is-active');
            $cell.html(oldHtml);
        });
    });
}
</script>
@endpush