@php
    $address = isset($user) ? $user->address : '';
    $user_id = isset($user) ? $user->id : '';
    $criticalActivityName = [];
@endphp

@push("meta")
    <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;
    }

   input:disabled {
        background-color: #ddd !important;     /* warna teks */
    }

  /*  .is-hidden {
        display: block !important;
        margin-top: -1px;
        margin-left: 24px;
        background:unset !important;
    }

    .datetimepicker-dummy-input{
        display: none !important;
    }*/
</style>
@endpush

<form id="form_create_personal_information">
    <input type="hidden" name="user_id" value="{{ $user_id }}" id="user_id">
    <input type="hidden" name="personel_information" value="true">
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.personal_information')</h3>
        </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' => isset($user) ? $user->name : '',
                    ])
                </div>
                <div class="column is-3">
                    @include('components.input.form-select', [
                        'label' => __('app.gender'),
                        'mandatory' => true,
                        'name' => 'gender',
                        'arr_type' => 'linear',
                        'options' => ['Male', 'Female'],
                        'placeholder' => 'Select Gender',
                        'selected' => isset($user) ? $user->gender : '',
                        'value_type' => 'string',
                    ])
                </div>
                <div class="column is-3">
                    @include('components.input.form-select', [
                        'label' => __('app.blood_type'),
                        'mandatory' => true,
                        'name' => 'blood_type',
                        'arr_type' => 'linear',
                        'options' => ['A', 'AB', 'B', 'O'],
                        'placeholder' => 'Select Blood Type',
                        'selected' => isset($user) ? $user->blood_type : '',
                        'value_type' => 'string',
                    ])
                </div>
                <div class="column is-6">
                    @include('components.input.form-input', [
                        'label' => __('app.birth_place'),
                        'mandatory' => true,
                        'name' => 'birth_place',
                        'value' => isset($user) ? $user->birth_place : '',
                    ])
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="birth_date">
                            @lang('app.birth_date')<sup class="text-danger">*</sup>
                        </label>
                        <div class="control has-icon">
                            <input id="birth_date" name="birth_date" class="input"
                                value="@isset($user){{ date('d/m/Y', strtotime($user->birth_date)) }}@endisset" />
                            <div class="form-icon">
                                <i class="lnil lnil-calendar"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="phone">
                            @lang('app.phone_number')<sup class="text-danger">*</sup>
                        </label>
                        <input type="text" name="phone"
                            value="@isset($user){{ $user->phone }}@endisset"
                            class="input is-warning-focus" placeholder="Phone Number" id="phone">
                    </div>
                </div>
                <div class="column is-3">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="nationality">
                            @lang('app.nationality')<sup class="text-danger">*</sup>
                        </label>
                        <div class="select is-fullwidth">
                            <select id="nationality" class="select2me" name="nationality">
                               <option value="" disabled selected hidden>Select nationality</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->name }}"
                                        @if (isset($user) && $country->name == $user->nationality) selected @elseif(!isset($user) && $country->name == 'Indonesia') selected @endif>
                                        {{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="nik">
                            NIK/KITAS<sup class="text-danger">*</sup>
                        </label>
                        <input type="text" name="nik"
                            value="@isset($user){{ $user->nik }}@endisset"
                            class="input is-warning-focus" placeholder="ID Number (NIK)" id="nik"
                            autocomplete="off">
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="address">
                            @lang('app.address')<sup class="text-danger">*</sup>
                        </label>
                        <textarea name="address" class="textarea is-warning-focus" id="address" rows="4" placeholder="Full Address">{{ $address }}</textarea>
                    </div>
                </div>
                <div class="column is-6">
                    @include('components.input.form-input', [
                        'label' => __('app.company'),
                        'mandatory' => true,
                        'name' => 'company',
                        'readonly' => auth()->user()->hasRole('super_admin') ? false : true,
                        'value' => isset($user) ? $user->company : Auth::user()->company,
                    ])
                </div>
                <div class="column is-6">
                    @include('components.input.form-input', [
                        'label' => __('app.position'),
                        'mandatory' => true,
                        'name' => 'position',
                        'value' => isset($user) ? $user->position : '',
                    ])
                </div>
                <div class="column is-6">
                    @include('components.input.form-select', [
                        'label' => __('app.contract'),
                        'mandatory' => true,
                        'name' => 'contract',
                        'arr_type' => 'assoc',
                        'options' => $contracts,
                        'placeholder' => 'Select Contract',
                        'selected' => isset($user) ? $user->contract_employee_id : '',
                        'disabled' => isset($disabled_edit_work_period) ? $disabled_edit_work_period : false,
                        'title' =>
                            isset($disabled_edit_work_period) && $disabled_edit_work_period
                                ? __('app.alert_disabled_edit', ['field' => 'Contract'])
                                : '',
                    ])
                </div>
                <div class="column is-3">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="work_period2">
                            Contract Period<sup class="text-danger">*</sup>
                        </label>

                        <div class="control has-icon">
                            <input id="work_period2" name="work_period2" class="input" value=""
                                placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off"
                                data-min-date="" data-max-date="" readonly />
                            <div class="form-icon">
                                <i class="lnil lnil-calendar"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column is-3">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="work_period">
                            Work Period<sup class="text-danger">*</sup>
                        </label>
                        @php
                            $minDate = '';
                            $maxDate = '';
                            $workPeriod = '';

                            if (isset($user)) {
                                $minDate = \Carbon\Carbon::parse($user->work_period_start)->format('d/m/Y');
                                $maxDate = \Carbon\Carbon::parse($user->work_period_end)->format('d/m/Y');
                                $workPeriod = $minDate . ' - ' . $maxDate;
                            }
                        @endphp
                        <input id="work_period" name="work_period" class="input" type="date" data-is-range="true" value="{{ $workPeriod }}">
                        {{-- <div class="control has-icon">
                            <input id="work_period" name="work_period" class="input" value="{{ $workPeriod }}"
                                placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off"
                                data-min-date="{{ $minDate }}" data-max-date="{{ $maxDate }}"
                             />
                            <div class="form-icon">
                                <i class="lnil lnil-calendar"></i>
                            </div>
                        </div> --}}
                    </div>
                    {{-- <input type="text" id="work_period2" name="work_period2"> --}}
                </div>
                <div class="column is-6">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="role_employee">
                            @lang('app.role')
                            <sup class="text-danger">*</sup>
                        </label>
                        <div class="select is-fullwidth">
                            <select name="role_employee" class="select2me" id="role_employee">
                                <option value="">@lang('app.select_role')</option>
                                @foreach ($role_employees as $item)
                                    <option value="{{ $item->id }}" {{ (isset($user) && $user->role_employee == $item->id) ? 'selected' : '' }}>
                                        {{ $item->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="column is-6">
                    {{-- @php
                        $selected = [];

                        if (isset($user)) {
                            foreach ($user->hasCriticalActivity as $value) {
                                $selected[] = $value->critical_activity_id;
                            }
                        }

                    @endphp
                    @include('components.input.form-select2', [
                        'label' => __('app.critical_activity'),
                        'class' => 'select-critical-activity mt-3',
                        'items' => $critical_activities,
                        'mandatory' => true,
                        'name' => 'critical_activity',
                        'select_option' => 'No Critical Activity',
                        'multiple' => true,
                        'selected' => $selected,
                    ]) --}}
                    <label class="fs-12 fw-400 text-grey">{{ __('app.critical_activity') }}</label>
                    <div class="control">
                      <select class="form-control" name="critical_activity[]"
                          id="critical_activity"
                          multiple>
                      </select>
                    </div>
                </div>
                <div class="column is-12">
                    <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="ktp">
                            Upload <span id="text-ktp">@if (isset($user) && $user->nationality != 'Indonesia') KITAS @else KTP @endif</span> (File type: pdf | Max 10MB)<sup class="text-danger">*</sup>
                        </label>
                        @if (isset($user))
                            @include('components.form.form-upload-file', [
                                'id' => 'ktp',
                                'file' => $user->ktp,
                            ])
                        @else
                            @include('components.form.form-upload-file', ['id' => 'ktp'])
                        @endif
                    </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') (File type:png,jpg,jpeg | Max 10MB)<sup class="text-danger">*</sup>
                        </label>
                        @if (isset($user))
                            @include('components.form.form-upload-file', [
                                'id' => 'pas_photo',
                                'file' => $user->pas_photo,
                                'folder' => 'pas-photo',
                            ])
                        @else
                            @include('components.form.form-upload-file', [
                                'id' => 'pas_photo',
                            ])
                        @endif
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="skck">
                            <span id="text-skck">@if (isset($user) && $user->nationality != 'Indonesia') SKK @else SKCK @endif</span> (File type: pdf | Max 10MB)<sup class="text-danger">*</sup>
                        </label>
                        @if (isset($user))
                            @include('components.form.form-upload-file', [
                                'id' => 'skck',
                                'file' => $user->skck,
                            ])
                        @else
                            @include('components.form.form-upload-file', [
                                'id' => 'skck',
                            ])
                        @endif
                    </div>

                </div>
            </div>
        </div>
    </div>
    @include('components.button.card-button-next-prev', ['next' => true, 'id' => 'personal_information'])
</form>

<div id="modal_alert_nik"></div>

@push('scripts')
    <script>

    $(document).ready(function () {
        $('.select2me').select2();

        $('#nationality').on('change', function () {
            var value = $(this).val();

            if (value && value !== 'Indonesia') {
                $('#text-ktp').text('KITAS');
                $('#text-skck').text('SKK');
            } else {
                $('#text-ktp').text('KTP');
                $('#text-skck').text('SKCK');
            }
        });
    });
    </script>
    <script src="{{ auto_asset("assets/vendor/jstree-3.3.17/dist/jstree.min.js") }}"></script>
    <script>
        const prefilledCriticalActivities = @json($prefilledCriticalActivities ?? []);
    </script>

    <script>

        let lastClickedBtn = null;

        // simpan tombol yang diklik
        $(document).on("click", "button[type=submit]", function() {
            lastClickedBtn = this;
        });
        
        $('select').on('change', function () {
            if ($(this).hasClass('select2-hidden-accessible')) {
                $(this).valid(); // 🔥 hapus teks error & class merah
            }
        });

        function submitPersonalInformation() {
            $('#btn_next_personal_information').removeClass('is-loading')

            $.validator.addMethod('ageLimit', function(value, element, param) {
                if (!value) return true; // jika kosong, biarkan required validation yang handle

                // Coba parse dengan format DD/MM/YYYY
                const birthDate = moment(value, 'DD/MM/YYYY', true);
                if (!birthDate.isValid()) return true; // jika format salah, biarkan validation lain yang handle

                // Pastikan tanggal tidak di masa depan
                const today = moment();
                if (birthDate.isAfter(today)) return true; // biarkan validation lain handle ini

                const age = today.diff(birthDate, 'years');

                // Return false jika umur > batas (ini akan trigger warning)
                return age <= param;
            }, 'Warning: Employee age exceeds the recommended limit.');

            $.validator.addMethod('regex', function(value, element, pattern) {
                return this.optional(element) || pattern.test(value);
            }, 'Please enter a valid value.');

            $.validator.addMethod(
                "fileExtension",
                function(value, element, param) {
                    if (element.files.length === 0) {
                        return this.optional(element) || false;
                    }

                    const validExtensions = param.split(",");
                    const fileName = element.files[0].name.toLowerCase();
                    const fileExtension = fileName.split(".").pop();
                    return validExtensions.includes(fileExtension);
                },
                "Please upload a valid image file (jpg, jpeg, png, pdf)."
            );

            $.validator.addMethod("maxsize", function(value, element, param) {
                if (this.optional(element)) {
                    return true;
                }
                if (element.files && element.files[0]) {
                    var fileSize = element.files[0].size;
                    return fileSize <= param;
                }
                return true;
            }, "The file size must be less than 10MB.");

            $.validator.addMethod("dateRangeFormat", function(value, element) {
                let minDate = $(element).data('min-date');
                let maxDate = $(element).data('max-date');

                if (!value) return true;

                let regex = /^\d{2}\/\d{2}\/\d{4} - \d{2}\/\d{2}\/\d{4}$/;
                if (!regex.test(value)) return false;

                let dates = value.split(" - ");
                let startDate = moment(dates[0], "DD/MM/YYYY", true);
                let endDate = moment(dates[1], "DD/MM/YYYY", true);

                if (!startDate.isValid() || !endDate.isValid()) return false;

                let min = minDate ? moment(minDate, "DD/MM/YYYY", true) : null;
                let max = maxDate ? moment(maxDate, "DD/MM/YYYY", true) : null;

                return (!min || startDate.isSameOrAfter(min)) &&
                    (!max || endDate.isSameOrBefore(max)) &&
                    endDate.isSameOrAfter(startDate);

            }, "Please enter a valid date range within the allowed period.");

            $("#form_create_personal_information").validate({
                rules: {
                    name: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "The name field is required."
                    }
                },
                errorClass: 'invalid-feedback help text-danger',
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    if (element.hasClass("select2-hidden-accessible")) {
                        error.insertAfter(element.next(".select2"));
                    } else if (element.hasClass("file-input")) {
                        error.insertAfter(element.closest(".file.is-boxed"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element) {
                    $(element).addClass('is-danger');

                    if ($(element).attr('name') === 'birth_date') {
                        $('#birth_date_info').remove();
                    }

                    if ($(element).is("input[type='file']")) {
                        $(element).closest('.file.is-boxed').find('.file-cta').addClass('is-invalid');
                    } else if ($(element).is("select")) {
                        const originalFirstOption = $(element).data('originalFirstOption');
                        if (originalFirstOption) {
                            $(element).find('option:first').text(originalFirstOption);
                            $(element).find('.is-fullwidth').addClass('mb-2');
                        }
                    }
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-danger');
                    if ($(element).is("input[type='file']")) {
                        $(element).closest('.file.is-boxed').find('.file-cta').removeClass('is-invalid');
                    } else if ($(element).is("select")) {
                        const originalFirstOption = $(element).data('originalFirstOption');
                        if (originalFirstOption) {
                            $(element).find('option:first').text(originalFirstOption);
                            $(element).find('.is-fullwidth').removeClass('mb-2');
                        }
                    }
                },
                submitHandler: function(form) {
                    $('#btn_next_personal_information').addClass('is-loading')

                    document.getElementById('center-loading').style.display = 'flex';

                    let formData = new FormData(form);

                    var ktpFile = $('#ktp')[0].files[0];
                    var pasPhotoFile = $('#pas_photo')[0].files[0];
                    var skckFile = $('#skck')[0].files[0];

                    if (ktpFile) formData.append('ktp', ktpFile);
                    if (pasPhotoFile) formData.append('pas_photo', pasPhotoFile);
                    if (skckFile) formData.append('skck', skckFile);

                     // Logika tambahan untuk work_period
                    if (!formData.get('work_period') || formData.get('work_period').trim() === "") {
                        formData.set('work_period', formData.get('work_period2'));
                    }

                    let obj = {};
                    formData.forEach((value, key) => {
                        if (obj[key]) {
                            // kalau sudah ada, dorong ke array
                            if (!Array.isArray(obj[key])) {
                                obj[key] = [obj[key]];
                            }
                            obj[key].push(value);
                        } else {
                            obj[key] = value;
                        }
                    });

                    let formData2 = JSON.stringify(obj, null, 2);

                    $.ajax({
                        url: urlStoreDataEmployee,
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function() {
                            $("#btn_next_personal_information").prop('disabled', true);
                        },
                        success: function(res) {
                            if (res.status) {

                                $("#btn_next_personal_information").prop('disabled', false)
                                    .removeClass('is-loading')

                                const currentTab = $('.tabs ul li.is-active');
                                const nextTab = currentTab.next('li');
                                const tabSave = window.saveTabs;

                                if(tabSave == 'save_all'){
                                    // Trigger click jika ada event terkait tombol
                                    const btn3 = document.getElementById("btn_next_medical_checkup");
                                    if (btn3) btn3.dispatchEvent(new Event('click'));

                                    // Trigger SUBMIT agar AJAX jalan
                                    const form3 = document.getElementById("form_create_medical_checkup");
                                    if (form3) {
                                    form3.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                                    }
                                }
                                
                                if (nextTab.length) {
                                    // if(tabSave == null){
                                    //     currentTab.removeClass('is-active');
                                    //     nextTab.addClass('is-active');
                                    //     const currentContentId = currentTab.data('tab');
                                    //     const nextContentId = nextTab.data('tab');
                                    //     $(`#${currentContentId}`).removeClass('is-active');
                                    //     $(`#${nextContentId}`).addClass('is-active');

                                    //     setTimeout(function() {
                                    //         document.getElementById('center-loading').style.display = 'none';
                                    //     }, 1500);
                                        
                                    // }else{
                                    //     document.getElementById('center-loading').style.display = 'none';
                                    // }

                                    $('#user_id_account').val(res.user_id)

                                    if (res.user_id) {
                                        $('#user_id').val(res.user_id)
                                        $('input[name="user_id"]').val(res.user_id);
                                    }
                                }
                                // === setelah dipakai, reset lagi ===
                                window.saveTabs = null;

                                if (lastClickedBtn) {
                                    locSubmmited = lastClickedBtn.value;
                                    if(locSubmmited == 'submitedd'){
                                    document.getElementById("loading-submitted").style.display = "block";

                                        let userId = $("#user_id").val();

                                        $.ajax({
                                            method: 'GET',
                                            url: '{{url('/update/status_data')}}',
                                            data: {
                                              userId: userId
                                            }
                                        });
                                        window.location.href = "/employee";
                                    }
                                }

                                getFormCompetency(res.user_id);
                            }

                        },
                        error: function(xhr, status, error) {
                            $("#btn_next_personal_information").prop('disabled', false).removeClass(
                                'is-loading')
                            // Handle validation errors (status 422)

                            // === setelah dipakai, reset lagi ===
                            window.saveTabs = null;

                            if (xhr.status === 422) {
                                $('.invalid-feedback').remove();

                                let errors = xhr.responseJSON.errors;

                                for (let field in errors) {
                                    if (errors.hasOwnProperty(field)) {
                                        let errorMessage = errors[field][0];
                                        let fieldElement = $(`[name="${field}"]`);
                                        if (fieldElement.length) {
                                            fieldElement.after(
                                                `<span id="${field}-error" class="invalid-feedback text-danger">${errorMessage}</span>`
                                            );
                                        }
                                    }
                                }
                            } else {
                                let message = xhr.responseJSON?.message || 'An unexpected error occurred. Please try again.';
                                showNotification('danger', 'Failed', message);
                            }
                        }
                    });
                }
            });
        }

        const typingDelay = 2000;
        $('#nik').on('keyup', function() {
            $('#nik-error').remove();
            const userID = $('#user_id').val();

            clearTimeout(typingTimer);
            const nik = $(this).val();

            if (nik == null || nik == '') {
                return
            }

            const params = {
                nik: nik,
            }

            if (userID !== null) {
                params.user_id = userID
            }

            typingTimer = setTimeout(() => {
                $.ajax({
                    url: urlCheckIdentity,
                    data: params,
                    success: (res) => {
                        if (res.status) {
                            $('#nik').after(
                                '<span id="nik-error" class="help text-danger">The NIK/KITAS has already been registered.</span>'
                            )
                            $('#modal_alert_nik').html(res.html)
                            $("#btn_next_personal_information").removeClass('is-loading').prop(
                                'disabled', true);
                        } else {
                            $('#nik-error').remove();
                            $("#btn_next_personal_information").prop('disabled', false);
                        }
                    }
                })
            }, typingDelay);
        });

        function initializeSelect2(selector, placeholder) {
            $(selector).select2({
                placeholder: placeholder,
                templateResult: function(data) {
                    var $result = $('<span></span>');
                    $result.text(data.text);
                    $result.css('color', 'black');
                    return $result;
                },
                templateSelection: function(data) {
                    var $selection = $('<span></span>');
                    $selection.text(data.text);
                    $selection.css('color', 'black');
                    $('#gate_id-error').remove()
                    $('.select2-container').css({
                        'border': '0.2px solid rgb(238, 236, 236)',
                    });
                    return $selection;
                }
            });
        }

        $(".select-critical-activity").on("change", function() {
            $('#critical_activity-error').remove()
            $(".select-critical-activity option").prop("disabled", false);
            var selectedValue = $(this).val();

            if (selectedValue.length > 0) {
                // if (selectedValue.includes('1')) {
                //     $(".select-critical-activity option").prop("disabled", true);
                //     $(".select-critical-activity option[value='1']").prop("disabled", false);
                // } else {
                //     $(".select-critical-activity option").prop("disabled", false);
                //     $(".select-critical-activity option[value='1']").prop("disabled", true);
                // }
                $(".select-critical-activity option").prop("disabled", false);
            } else {
                $(".select-critical-activity option").prop("disabled", false);
            }
        });

        function daterangeWorkPeriod(startPeriod, endPeriod) {

            // $('#work_period').daterangepicker({
            //     autoUpdateInput: false,
            //     singleDatePicker: false,
            //     showDropdowns: true,
            //     minDate: startPeriod,
            //     startDate: startPeriod,
            //     endDate: endPeriod,
            //     maxDate: endPeriod,
            //     locale: {
            //         format: 'DD/MM/YYYY',
            //         applyLabel: "Apply",
            //         cancelLabel: "Clear"
            //     }
            // });

            // $('#work_period').on('apply.daterangepicker', function(ev, picker) {
            //     $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            // });

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

            // Cari elemen, tapi cek dulu apakah ada
            // Input start
            let startInput = document.querySelector('.datetimepicker-dummy-input.is-datetimepicker-range');
            if (startInput) {
                startInput.removeAttribute('disabled');  // enable input
                // startInput.value = startPeriod;          // set value
            }

            // Input end
            let endInput = document.querySelector('.datetimepicker-dummy-wrapper .datetimepicker-dummy-input:not(.is-datetimepicker-range)');
            if (endInput) {
                endInput.removeAttribute('disabled');    // enable input
                // endInput.value = endPeriod;              // set value
            }

            if (startPeriod && endPeriod) {
                $('#work_period2').val(startPeriod + ' - ' + endPeriod);
            }

        }

        let work = '{{ $workPeriod ?? '' }}'.trim();

        // Jika kosong → jangan parse, cukup attach tanpa startDate/endDate
        if (work === '' || !work.includes(' - ')) {
            bulmaCalendar.attach('#work_period', {
                lang: 'en',
                // displayMode: 'dialog',
                color: themeColors.primary,
                dateFormat: 'DD/MM/YYYY'
            });

        } else {
            // Pisahkan start dan end
            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('#work_period', {
                lang: 'en',
                // displayMode: 'dialog',
                color: themeColors.primary,
                dateFormat: 'DD/MM/YYYY',
                startDate: startDate,
                endDate: endDate
            });
        }

        function updatePersonnelCompetency() {
            const selectedCriticalActivity = $('#critical_activity').val() ? $('#critical_activity').val().map(Number) : [];
            const selectedRoleEmployee = $('#role_employee').val();

            const paramsCA = {
                critical_activity_id: selectedCriticalActivity,
                role_employee_id: selectedRoleEmployee
            };

            @if (isset($user->id))
                paramsCA.user_id = '{{ $user->id }}';
            @endif

            $.ajax({
                url: partialForm,
                data: paramsCA,
                success: (res) => {
                    if (res.status) {
                        $('#personnel-competency-tab').html(res.data);
                        $('#container_btn_submit_bpjs').html(`<button type="submit" style="width: 110px" form="form_create_bpjs"
                                    class="button h-button is-warning" id="btn_next_bpjs">
                                    <span>Next</span>
                                </button>`)
                    } else {
                        $('#container_btn_submit_bpjs').html(`<button type="submit" style="width: 110px" form="form_create_bpjs"
                                class="button h-button is-warning" id="btn_save_bpjs">
                                <span>Save</span>
                            </button>`)
                    }
                }
            });
        }

        // $('#critical_activity, #role_employee').on('change', updatePersonnelCompetency);

        let isInitialContractLoad = false;

        $('#contract').on('change', function() {
            const value = $(this).val();
            
            if (value == null || value == '') {
                $('#work_period').prop('disabled', true)
                $('#work_period').val('')
                return;
            }

            $('#work_period').prop('disabled', false)

            $.ajax({
                url: urlGetContractById,
                data: {
                    id: value
                },
                success: (res) => {
                    if (!res.status) {
                        console.error("Invalid contract");
                        return;
                    }

                    const startPeriod = moment(res.data.contract_period_start, 'YYYY-MM-DD').format(
                        'DD/MM/YYYY');
                    const endPeriod = moment(res.data.contract_period_end, 'YYYY-MM-DD').format(
                        'DD/MM/YYYY');

                    daterangeWorkPeriod(startPeriod, endPeriod);
                }
            });
        });

        $(document).ready(function() {
            submitPersonalInformation();

            const valWorkPeriod = $('#work_period').val()

            if ((valWorkPeriod == null || valWorkPeriod == '') && work === '') {
                $('#work_period').prop('disabled', true)
            }

            $('#birth_date').daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                maxDate: moment(),
                locale: {
                    format: 'DD/MM/YYYY'
                },
                startDate: $('#birth_date').val() ? moment($('#birth_date').val(), 'DD/MM/YYYY') : moment()
            }, function(start, end, label) {
                $('#birth_date_info').html('')
                const birthDate = start;
                const today = moment();

                let years = today.diff(birthDate, 'years');
                birthDate.add(years, 'years');

                let months = today.diff(birthDate, 'months');
                birthDate.add(months, 'months');

                let days = today.diff(birthDate, 'days');

                $('#birth_date').after(
                    `<div id="birth_date_info" class="info-text">Your age: ${years} Year, ${months} Month, ${days} Day</div>`
                );
            });

            // @if (isset($user))
            //     const startDate = '{{ $user->work_period_start }}'
            //     const endDate = '{{ $user->work_period_end }}'

            //     daterangeWorkPeriod(
            //         moment('{{ $user->work_period_start }}', 'Y-M-D').format('DD/MM/YYYY'),
            //         moment('{{ $user->work_period_end }}', 'Y-M-D').format('DD/MM/YYYY')
            //     );
            // @endif

            initializeSelect2('.select-critical-activity', 'Select Critical Activities')
        });

        $(document).ready(function() {
            // aktifkan select2 sekali saja
            $('#role_employee').select2();
            $('#critical_activity').select2();
            
            @if (isset($user))
                isInitialContractLoad = true;
                $('#contract').trigger('change')
            @endif

            $('#role_employee').on('change', function () {
            let roleId = $(this).val();

                if (roleId) {
                    $.ajax({
                        url: '/get-critical/' + roleId,
                        type: 'GET',
                        success: function (data) {
                            let $critical = $('#critical_activity');
                            $critical.empty();

                            if (data.length > 0) {
                                $.each(data, function (index, item) {
                                    $critical.append(
                                        '<option value="' + item.id + '">' + item.name + '</option>'
                                    );
                                });

                                $critical.prop('disabled', false);

                                // ✅ AUTO SELECT jika "No Critical Activities"
                                if (
                                    data.length === 1 &&
                                    data[0].name === 'No Critical Activities'
                                ) {
                                    $critical.val(data[0].id).trigger('change');
                                    return;
                                }

                                // ✅ preselect jika ada data sebelumnya
                                if (prefilledCriticalActivities.length > 0) {
                                    $critical.val(prefilledCriticalActivities).trigger('change');
                                } else {
                                    $critical.trigger('change');
                                }

                            } else {
                                $critical
                                    .append('<option value="">-</option>')
                                    .prop('disabled', true)
                                    .trigger('change');
                            }
                        }
                    });
                } else {
                    $('#critical_activity')
                        .empty()
                        .prop('disabled', true)
                        .trigger('change');
                }
            });



            const selectedRole = $('#role_employee').val();
            if (selectedRole) {
                $('#role_employee').trigger('change');
            }

            getFormCompetency($("#user_id").val());
        });
    </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).trigger('change');
        $('#treeSelect input').val(selectedText);
        const selectedIds = data.selected;
        $("#location_ids").val(selectedIds.join(','));

        updateProgress('form_create_personal_information', 'form_progress1');
    });

    </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'
            }
        });

        let startInput = document.querySelector('.datetimepicker-dummy-input.is-datetimepicker-range');

        startInput.setAttribute('disabled', true);
        startInput.setAttribute('placeholder', 'Start Date');

        let endInput = document.querySelector('.datetimepicker-dummy-wrapper .datetimepicker-dummy-input:not(.is-datetimepicker-range)');

        endInput.setAttribute('disabled', true);
        endInput.setAttribute('placeholder', 'End Date');

    </script>
@endpush