@extends('layouts.master', [
    'title' => 'Create Visitor',
    '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="page-content-inner">
        <form id="form_gate_check_in_visitor" method="POST" action="{{ route('gate-in.visitor') }}">
            <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',
                                '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',
                            ])
                        </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',
                            ])
                        </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']),
                            ])
                        </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']),
                            ])
                        </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']),
                            ])
                        </div>
                        <div class="column is-6">
                            @include('components.input.form-input', [
                                'label' => 'Email (Optional)',
                                'mandatory' => false,
                                'name' => 'email',
                                'placeholder' => __('app.masukkan_field', ['field' => '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',
                            ])
                        </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" 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']),
                            ])
                        </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']),
                            ])
                        </div>
                        <div class="column is-4" id="column_purposed">
                            @include('components.input.form-select', [
                                'label' => __('app.purpose'),
                                'options' => $purpose,
                                'mandatory' => true,
                                'name' => 'purposed',
                                'placeholder' => __('app.select_field', ['field' => 'purpose']),
                                'arr_type' => 'linear',
                            ])
                        </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']),
                            ])
                        </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" type="date" autocomplete="off" data-is-range="true" class="input contract-period"
                                       {{--  placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off"
                                        data-min-date="" data-max-date="" 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',
                                ])
                            </div>
                        </div>
                        <div class="column is-12">
                            <div class="control">
                                <label class="fs-12 fw-400 text-grey" for="=healt_certificate">
                                    Medical Document (Max 10MB) <sup class="text-danger">*</sup>
                                </label>
                                <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>
                                @include('components.form.form-upload-file', [
                                    'id' => 'health_certificate',
                                    'tooltip' => true,
                                ])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('components.button.card-button-submit', [
                'form_id' => 'form_gate_check_in_visitor',
                'btn_submit_id' => 'btn_submit_check_in_visitor',
                'url_back' => route('gate-in.visitor'),
            ])
        </form>
    </div>

    <div id="modal_alert_check_visitor"></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 urlStoreVisitor = '{{ route('gate-in.visitor') }}'
        const urlCheckDutyVisitor = '{{ route('gate-in.check-duty-visitor') }}'
    </script>
    <script src="{{ asset('assets/js/gate-in/create-visitor.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Cari elemen select2me hanya di dalam modal #modal_add_user
            document.querySelectorAll('#form_gate_check_in_visitor .select2me').forEach(el => {
                el.classList.remove('select2me');
            });
        });

        // function daterangeDutyPeriod() {
        //     $(document).on('focus', '.contract-period', function() {
        //         if (!$(this).hasClass('daterangepicker-initialized')) {
        //             let start = moment();
        //             let 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 Health Certificate (Surat Keterangan Sehat).');
        //                 } else {
        //                     $messageBox.text('Since the duty period is 7 days or longer, 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);

        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
        $('#treeContainer').jstree({
            core: { data: listLocation },
            plugins: ['checkbox'],
            checkbox: {
                cascade: 'up+down+undetermined'
            }
        });

        bulmaCalendar.attach('#duty_period', {
            lang: 'en',
            color: themeColors.primary,
            dateFormat: 'DD/MM/YYYY',
            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