@extends('layouts.master', [
    'title' => 'Edit Visitor - ' . $visitor->name,
    'icon_back' => true,
    'url' => route('gate-in.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")}}">
@endpush


@push("styles")
<style>
    a.jstree-anchor.jstree-clicked {
        background: #ebebeb;
    }

    .dropdown-tree {
        position: relative;
    }

    .dropdown-tree input {
        width: 100%;
        padding: 0.5rem;
        cursor: pointer;
        border: 1px solid #ccc;
        border-radius: 6px;
        background: #fff;
    }

    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: 300px;
        overflow-y: auto;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        display: none;
        z-index: 1000;
    }

    .dropdown-tree.open .dropdown-content {
        display: block;
    }

    .datetimepicker .datepicker-nav {
        background: #E89417;
    }

    .datetimepicker .datetimepicker-header .datetimepicker-selection-start .datetimepicker-selection-day, .datetimepicker .datetimepicker-header .datetimepicker-selection-end .datetimepicker-selection-day {
        color: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range {
        background: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range .date-item {
        background-color: #E89417;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-start .date-item, .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date.datepicker-range.datepicker-range-end .date-item {
        border: .1rem solid #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
        border: .1rem dotted #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-dates .datepicker-days .datepicker-date .date-item.is-today {
        border: .1rem dotted #E89417;
        color: #E89417 !important;
    }

    .datetimepicker .datepicker-body .datepicker-months .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-months .datepicker-year.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-month.is-active, .datetimepicker .datepicker-body .datepicker-years .datepicker-year.is-active {
        background: #E89417 !important;
        border-color: #E89417 !important;
    }

    .datetimepicker-dummy:before {
        content: "" !important;
        color: #E89417 !important;
    }

    .message.is-warning .message-body {
        border-color: #faae42;
        color: #000;
        font-family: 'Inter';
        line-height: 1.7;
    }
    .mm10{
        margin-top: 10px !important; 
        margin-bottom: 10px !important;
    }
</style>
@endpush

@section('content')
    <div class="center-loading" style="display: none;" id="center-loading">
        <div class="spinner" role="status" aria-label="Loading"></div>
        <div class="label-loading">Loading..</div>
    </div>
    <div class="page-content-inner">
        @role('dokter')
            {{-- MCU Form for Dokter Role --}}
            @include('components.form.form-mcu-dokter-visitor')
        @else
        <form id="form_gate_edit_visitor">
            <input type="hidden" name="visitor_id" value="{{ $visitor->id }}">
            <div class="demo-card p-6">
                <div class="demo-title">
                    <div class="fs-16 fw-600 text-dark">@lang('app.informasi_visitor')</div>
                </div>
                <div class="card-inner">
                    <div class="columns is-multiline">
                        <div class="column is-6">
                            @include('components.input.form-input', [
                                'label' => __('app.name'),
                                'mandatory' => true,
                                'name' => 'name',
                                'value' => $visitor->name,
                                'placeholder' => __('app.masukkan_field', ['field' => 'name']),
                            ])
                        </div>
                        <div class="column is-3">
                            @php
                                $gender = ['Male', 'Female'];
                            @endphp
                            @include('components.input.form-select', [
                                'label' => __('app.gender'),
                                'options' => $gender,
                                'mandatory' => true,
                                'name' => 'gender',
                                'placeholder' => __('app.select_field', ['field' => 'gender']),
                                'arr_type' => 'linear',
                                'selected' => $visitor->gender,
                            ])
                        </div>
                        <div class="column is-3">
                            @php
                                $blood = ['A', 'AB', 'B', 'O'];
                            @endphp
                            @include('components.input.form-select', [
                                'label' => __('app.blood_type'),
                                'options' => $blood,
                                'mandatory' => true,
                                'name' => 'blood_type',
                                'placeholder' => __('app.select_field', ['field' => 'blood type']),
                                'arr_type' => 'linear',
                                'selected' => $visitor->blood_type,
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-input', [
                                'label' => __('app.birth_place'),
                                'mandatory' => true,
                                'name' => 'birth_place',
                                'placeholder' => __('app.masukkan_field', ['field' => 'birth place']),
                                'value' => $visitor->birth_place,
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-date', [
                                'label' => __('app.birth_date'),
                                'name' => 'birth_date',
                                'mandatory' => true,
                                'placeholder' => __('app.select_field', ['field' => 'birth date']),
                                'value' => $visitor->birth_date,
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-input', [
                                'label' => __('app.phone_number'),
                                'mandatory' => true,
                                'name' => 'phone_number',
                                'placeholder' => __('app.masukkan_field', ['field' => 'phone number']),
                                'value' => $visitor->phone_number,
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-input', [
                                'label' => 'Email (Optional)',
                                'mandatory' => false,
                                'name' => 'email',
                                'placeholder' => __('app.masukkan_field', ['field' => 'email']),
                                'value' => $visitor->email,
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-select', [
                                'label' => __('app.nationality'),
                                'options' => $countries,
                                'mandatory' => true,
                                'name' => 'nationality',
                                'placeholder' => __('app.select_field', ['field' => 'nationality']),
                                'arr_type' => 'assoc',
                                'value_type' => 'string',
                                'selected' => $visitor->nationality,
                            ])
                        </div>
                        <div class="column is-6">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="username">
                                    NIK/KITAS<sup class="text-danger">*</sup>
                                </label>
                                <input type="text" name="username" class="input" value="{{ $visitor->username }}"
                                    placeholder="ID Number (NIK)" id="username" autocomplete="off">
                            </div>
                        </div>
                        <div class="column is-12">
                            @include('components.input.form-textarea', [
                                'label' => __('app.address'),
                                'mandatory' => true,
                                'name' => 'address',
                                'placeholder' => __('app.masukkan_field', ['field' => 'address']),
                                'value' => $visitor->address,
                            ])
                        </div>
                        <div class="column is-12">
                            <div class="is-divider" data-content=""></div>
                        </div>
                        <div class="column is-4">
                            @include('components.input.form-input', [
                                'label' => __('app.company'),
                                'mandatory' => true,
                                'name' => 'company',
                                'placeholder' => __('app.masukkan_field', ['field' => 'company']),
                                'value' => $visitor->company,
                            ])
                        </div>
                        <div class="column is-4" id="column_purposed">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="purposed">
                                    Purposed<sup class="text-danger">*</sup>
                                </label>
                                <div class="select is-fullwidth">
                                    <select name="purposed" id="purposed" class="input" style="height: 38px !important">
                                        <option value="">Select Purposed</option>
                                        @foreach ($purpose as $item)
                                            <option value="{{ $item->name }}"
                                                @if ($item->name == $visitor->purposed) selected @endif>{{ $item->name }}
                                            </option>
                                        @endforeach
                                        <option value="Other">Other</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="column is-4">
                            @include('components.input.form-input', [
                                'label' => 'Sponsor (email)',
                                'input_type' => 'email',
                                'mandatory' => true,
                                'name' => 'sponsor',
                                'placeholder' => __('app.masukkan_field', ['field' => 'sponsor']),
                                'value' => $visitor->sponsor,
                            ])
                        </div>
                        <div class="column is-6">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="duty_period">
                                    Duty Period<sup class="text-danger">*</sup>
                                </label>

                                <div class="control has-icon">
                                    <input id="duty_period" name="duty_period" class="input contract-period"
                                        {{-- placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off"
                                        value="{{ $startDuty && $endDuty ? $startDuty . ' - ' . $endDuty : '' }}"
                                        data-min-date="" data-max-date="" --}} type="date" data-is-range="true"  required/>
                                    {{-- <div class="form-icon">
                                        <i class="lnil lnil-calendar"></i>
                                    </div> --}}
                                </div>
                                <small id="result_days"></small>
                            </div>
                        </div>
                        <div class="column is-6">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="location">
                                    {{ __('app.location') }}<sup class="text-danger">*</sup>
                                </label>
                                <div class="dropdown-tree" id="treeSelect">
                                    <input type="text" class="input" name="location" id="location" readonly placeholder="Select location..." style="background-color: #fff;" />
                                    <div class="dropdown-content" id="treeContainer"></div>
                                </div>
                                <input type="hidden" name="location_ids" id="location_ids" />
                            </div>
                        </div>
                        <div class="column is-12">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="=pas_photo">
                                    @lang('app.pas_photo') (Max 10MB)
                                    <sup class="text-danger">*</sup>
                                </label>
                                @include('components.form.form-upload-file', [
                                    'id' => 'pas_photo',
                                    'folder' => 'pas-photo',
                                    'file' => $visitor->pas_photo,
                                ])
                            </div>
                        </div>
                        <div class="column is-12">
                            <div class="message is-warning mm10" id="message-is-notif" style="display: none;">
                                <a class="delete" href="javascript:;" onclick="closeNotif()"></a>
                                <div class="message-body message-body-two">
                                  <div id="translate" style="display: none;">
                                      <b>Peringatan</b><br>
                                      Untuk <b>visitor dengan masa kunjungan kurang dari 7 hari,</b> diwajibkan <b>mengunggah Surat Keterangan Sehat</b> yang memuat informasi: <b>vital signs, kolesterol total & HDL, riwayat merokok, serta riwayat pengobatan saat ini.</b><br>
                                      Dokumen tersebut <b>dianjurkan untuk digabungkan menjadi satu file</b> sebelum diunggah.<br>
                                      Selain itu, <b>hasil MCU harus berumur tidak lebih dari 2 tahun (≤ 2 tahun).</b>
                                  </div>
                                  <div id="translate2">
                                  <b>Warning</b><br>
                                    For visitors with a stay duration of less than 7 days, it is mandatory to upload a Health Certificate containing the following information: <b>vital signs, total cholesterol & HDL, smoking history, and current medication history.</b><br>
                                    The document is recommended to be <b>combined into a single file</b> before uploading.<br>

                                    In addition, the <b>MCU results must be no more than 2 years old (≤ 2 years).</b><br><br>
                                    <a href="javascript:;" onclick="translatexx()">Translate</a>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="column is-12">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="=healt_certificate">
                                    @lang('app.health_certificate') (Max 10MB)
                                    <sup class="text-danger">*</sup>
                                </label>
                                @include('components.form.form-upload-file', [
                                    'id' => 'health_certificate',
                                    'folder' => 'health-certificate',
                                    'file' => $visitor->health_certificate,
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('components.button.card-button-submit', [
                'form_id' => 'form_gate_edit_visitor',
                'btn_submit_id' => 'btn_submit_edit_visitor',
                'url_back' => route('gate-in.visitor'),
            ])
        </form>
        @endrole
    </div>
@endsection

@push('scripts')
    <script src="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/jstree.min.js") }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <script src="{{ asset('assets/js/upload-file.js') }}"></script>
    <script>
        const urlUpdateVisitor = '{{ route('gate-in.visitor-update') }}'
        const framinghamScore = '{{ route('employee.framingham-risk-score') }}'
        const urlCheckMcuNumber = '{{ route('medical-checkup.check-mcu-number') }}'
    </script>
    <script src="{{ asset('assets/js/gate-in/edit-visitor.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Cari elemen select2me hanya di dalam modal #modal_add_user
            document.querySelectorAll('#form_gate_edit_visitor .select2me').forEach(el => {
                el.classList.remove('select2me');
            });
        });

        function daterangeDutyPeriod() {
            $(document).on('focus', '.contract-period', function() {
                if (!$(this).hasClass('daterangepicker-initialized')) {
                    const val = $(this).val();
                    console.log(val);
                    let start, end;

                    if (val && val.includes(' - ')) {
                        const parts = val.split(' - ');
                        start = moment(parts[0], 'DD/MM/YYYY');
                        end = moment(parts[1], 'DD/MM/YYYY');
                    } else {
                        start = moment();
                        end = moment().add(5, 'days');
                    }

                    $(this).daterangepicker({
                        autoUpdateInput: false,
                        singleDatePicker: false,
                        showDropdowns: true,
                        // minDate: moment(),
                        startDate: start,
                        endDate: end,
                        locale: {
                            format: 'DD/MM/YYYY',
                            applyLabel: "Apply",
                            cancelLabel: "Clear"
                        }
                    }).addClass('daterangepicker-initialized');

                    $(this).on('apply.daterangepicker', function(ev, picker) {
                        const startDate = picker.startDate;
                        const endDate = picker.endDate;

                        $(this).val(
                            startDate.format('DD/MM/YYYY') + ' - ' + endDate.format('DD/MM/YYYY')
                        );

                        const diffDays = endDate.diff(startDate, 'days');

                        const $messageBox = $('#duty_period_info .message-body');
                        if (diffDays < 7) {
                            $messageBox.text('Since the duty period is less than 7 days, please upload a valid Surat Keterangan Sehat (Health Certificate)');
                        } else {
                            $messageBox.text('ince the duty period is 7 days or more, please upload a recent Medical Check-Up (MCU) document');
                        }

                        $('#duty_period_info').show();
                    });

                    $(this).on('cancel.daterangepicker', function(ev, picker) {
                        $(this).val('');
                        $('#duty_period_info').hide();
                    });
                }
            });
        }

        $(document).ready(function() {
            daterangeDutyPeriod()
        });
    </script>

    <script>
    // toggle dropdown on input click
    $('#treeSelect input').on('click', function () {
        $('#treeSelect').toggleClass('open');
    });

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

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

    </script>
    <script>
        const locations = @json($locations);
        const preselectedIds = @json($selectedLocationIds).map(String);

        function buildTreeFormat(items) {
            return items.map(item => ({
                id: String(item.id),
                text: item.name,
                parent: item.parent_id ? String(item.parent_id) : "#",
                icon: false,
                state: {
                    selected: preselectedIds.includes(String(item.id)) // ✅ pre-select here
                }
            }));
        }

        const listLocation = buildTreeFormat(locations);

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

         // Pisahkan start dan end
        let work = '{{ $startDuty && $endDuty ? $startDuty . ' - ' . $endDuty : '' }}';
        let [start, end] = work.split(' - ');

        // Ubah ke array [dd, mm, yyyy]
        let s = start.split('/');
        let e = end.split('/');

        // Buat Date Object
        let startDate = new Date(s[2], s[1] - 1, s[0]);
        let endDate   = new Date(e[2], e[1] - 1, e[0]);

        bulmaCalendar.attach('#duty_period', {
            lang: 'en',
            // displayMode: 'dialog',
            color: themeColors.primary,
            dateFormat: 'DD/MM/YYYY',
            startDate: startDate,
            endDate: endDate,
            minDate: new Date()
        });

        // ambil instance calendar
        const element = document.querySelector('#duty_period');
        const calendarInstance = element.bulmaCalendar;

        // event ketika tanggal berubah
        calendarInstance.on('select', function (datepicker) {

            const value = datepicker.data.value();  // "05/11/2025 - 07/11/2025"

            // pecah range tanggal
            const [startDateStr, endDateStr] = value.split(' - ');

            // pecah masing-masing tanggal
            const [startDay, startMonth, startYear] = startDateStr.split('/');
            const [endDay, endMonth, endYear] = endDateStr.split('/');

            // convert ke Date object
            const startDate = new Date(startYear, startMonth - 1, startDay);
            const endDate = new Date(endYear, endMonth - 1, endDay);

            // hitung selisih ms
            const diffMs = endDate - startDate;

            // convert ke hari (+1 bila ingin hitung hari awal & akhir)
            const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

                if(diffDays <= 7){
                    document.getElementById("message-is-notif").style.display = 'block';
                    document.getElementById('result_days').innerText = "Visitor: " + diffDays + " days";

                }else{
                    document.getElementById("message-is-notif").style.display = 'none';
                    document.getElementById('result_days').innerText = "Visitor: " + diffDays + " days";

                }
            });
            
            // input pertama (date start)
            document.querySelector('.datetimepicker-dummy-input.is-datetimepicker-range')
                    .setAttribute('placeholder', 'Start Date');

            // input kedua (date end)
            document.querySelector('.datetimepicker-dummy-wrapper .datetimepicker-dummy-input:not(.is-datetimepicker-range)')
                    .setAttribute('placeholder', 'End Date');

            function closeNotif(){
                document.getElementById("message-is-notif").style.display = 'none';
            }

            function translatexx(){
                document.getElementById("translate2").style.display = 'none';
                document.getElementById("translate").style.display = 'block';
            }

    </script>
@endpush