@php
    $title = isset($user) ? __('app.edit_worker') . ': ' . $user->name : __('app.create_worker');
@endphp

@extends('layouts.master', [
    'title' => $title,
    'icon_back' => true,
    'url' => request()->get('page') == 'need_review' ? route('notification.mcu-need-review-doctor') : route('employee.index'),
])
@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
@endpush
@section('content')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            color: #000;
            background-color: #e4e4e4;
        }

        .select2-container--default .select2-results__option {
            color: #000;
        }

        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
            color: #000;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
        }
        .invalid-feedback {
            display: block;
        }
        .notif-tabs {
            font-size: 14px;
            font-family: Roboto !important;
            color: #000 !important;
            line-height: 20px;
            text-align: left;
        }
        .txtntf{
            color: #000 !important;
            font-size: 14px;
            background-color: #fff !important;
            font-family: Roboto !important;
        }
        .view-wrapper{
            min-height: 120vh !important;
        }
    </style>
    <div class="bg-loading" style="display: none;" id="loading-submitted">
        <div class="loadering"></div>
    </div>
    <div class="center-loading" style="display: none;" id="center-loading">
        <div class="spinner" role="status" aria-label="Loading"></div>
        
        @unlessrole(['admin_contractor', 'super_admin'])
            <div class="label-loading">Loading..</div>
        @endrole
        
        @role(['admin_contractor', 'super_admin'])
            <div class="label-loading">
                <span id="timer"></span> <span id="textSave"></span>
                {{-- Your data is being securely saved<br>
                Please wait...<br>
                <h3>Do not close this page..</h3> --}}
            </div>
        @endrole
    </div>

    <div class="page-content-inner">
        <div class="tabs-wrapper">
            <div class="tabs-inner">
                <div class="tabs">
                    <ul class="tab-create-employee">
                        @unlessrole(['dokter', 'contract_user'])
                        <li data-tab="personal-tab"
                            @role(['super_admin','user_admin', 'admin_contractor']) class="is-active" @endrole>
                            <a class="fs-14 fw-500">@lang('app.personal')  &nbsp;<span class="bgis" id="form_progress1">0%</span></a>
                        </li>
                        @if(!isset($user->password))
                        <li data-tab="account-tab">
                            <a class="fs-14 fw-500">@lang('app.account') &nbsp; <span class="bgis" id="form_progress2b">0%</span></a>
                        </li>
                        @endif
                        <li data-tab="emergency-tab">
                            <a class="fs-14 fw-500">@lang('app.emergency') &nbsp; <span class="bgis" id="form_progress2" style="display: none;">0%</span></a>
                        </li>
                        @endunlessrole

                        @role(['admin_contractor', 'super_admin'])
                            <li data-tab="medical-tab" @role(['dokter']) class="is-active" @endrole>
                                <a class="fs-14 fw-500">@lang('app.medical') &nbsp;
                                    <span class="bgis" id="form_progress3b">0%</span>
                                </a>
                            </li>
                        @endrole

                        @role('dokter')
                            <li data-tab="medical-tab" @role(['dokter']) class="is-active" @endrole>
                                <a class="fs-14 fw-500">@lang('app.medical')</a>
                            </li>
                        @endrole

                        @unlessrole(['dokter', 'contract_user'])
                        <li data-tab="bpjs-tab">
                            <a class="fs-14 fw-500">@lang('app.bpjs') &nbsp; <span class="bgis" id="form_progress4"  style="display: none;">0%</span></a>
                        </li>

                        <li data-tab="personnel-competency-tab">
                            <a class="fs-14 fw-500">@lang('app.personnel_competency') &nbsp; <span class="bgis" id="form_progress5">0%</span></a>
                        </li>
                        @endunlessrole
                        @role('contract_user')
                        <li data-tab="competency-approval-tab">
                            <a class="fs-14 fw-500">@lang('app.personnel_competency')</a>
                        </li>
                        @endrole
                    </ul>
                </div>
            </div>

            @unlessrole(['dokter', 'contract_user'])
            <div class="message is-notif" id="message-is-notif">
                <a class="delete" href="javascript:;" onclick="closeNotif()"></a>
                <div class="message-body message-body-two">
                  You can proceed to the next step without completing the forms in sequence. Any incomplete data will be automatically saved as a draft and can be finished at any time, except for the Personal form.
                </div>
            </div>
            @endunlessrole

            {{-- tab content --}}
            @unlessrole(['dokter','contract_user'])
            <div id="personal-tab"
                class="tab-content @role(['super_admin', 'admin_contractor', 'contract_user']) is-active @endrole">
                @include('components.form.form-personal-info')
            </div>
           
            <div id="account-tab" class="tab-content">
                @include('components.form.form-account')
            </div>
            <div id="emergency-tab" class="tab-content">
                @include('components.form.form-emergency')
            </div>
            @endunlessrole

            @unlessrole(['contract_user'])
            <div id="medical-tab" class="tab-content @role(['dokter']) is-active @endrole">
                @role(['admin_contractor', 'super_admin'])
                    @include('components.form.form-mcu-admin-contractor')
                @endrole

                @role('dokter')
                    @include('components.form.form-mcu-dokter')
                @endrole
            </div>
            @endunlessrole

            @unlessrole(['dokter', 'contract_user'])
            <div id="bpjs-tab" class="tab-content">
                @include('components.form.form-bpjs')
            </div>

            <div id="personnel-competency-tab" class="tab-content">
            </div>
            @endunlessrole
            @role('contract_user')
            <div id="competency-approval-tab" class="tab-content @role(['contract_user']) is-active @endrole">
                @include('components.form.form-competency-approval')
            </div>
            @endrole
        </div>
    </div>

    <div id="demo-right-actions-modal" class="modal h-modal">
          <div class="modal-background  h-modal-close"></div>
          <div class="modal-content">
              <div class="modal-card">
                  <header class="modal-card-head">
                      <h3>Save Worker Data</h3>
                      <button class="h-modal-close ml-auto" aria-label="close">
                          <i data-feather="x"></i>
                      </button>
                  </header>
                  <div class="modal-card-body" style="padding: 0px 10px;">
                      <div class="inner-content">
                          <div class="section-placeholder">
                              <div class="placeholder-content">
                                    <div class="notif-tabs">
                                        {{-- Overall Completion: <span id="total-progress">0%</span><br> --}}
                                        <div style="font-size: 18px; color: #E89417; font-weight: 500; text-align: center;">
                                            <span id="status-progress"></span>
                                        </div><br>
                                        <div id="status-progress2" style="display: none;">
                                            <div id="personal-validation-required" style="display: none;">
                                                {{-- <div class="message is-danger">
                                                      <div class="message-body">
                                                          The data could not be saved. <br>The Personal form must be completed at 100%.
                                                      </div>
                                                  </div> --}}
                                            </div><br>
                                            Your data is incomplete. Here is a summary of the sections that still need to be completed:<br><br>
                                            <ul>
                                                <li id="grid1">Personal Form: <span id="form-tabs1" class="txtntf">0%</span></li>
                                                <li id="grid6">Account Form: <span id="form-tabs6" class="txtntf">0%</span></li>
                                                <li id="grid2">Emergency Form: <span id="form-tabs2" class="txtntf">0%</span></li>
                                                <li id="grid3">Medical Form: <span id="form-tabs3" class="txtntf">0%</span></li>
                                                <li id="grid4">BPJS Form: <span id="form-tabs4" class="txtntf">0%</span></li>
                                                <li id="grid5">Personnel Competency Form: <span id="form-tabs5" class="txtntf">0%</span></li>      
                                            </ul><br>
                                            Please click the <b>"Save button"</b> to store your information as a <b>Draft</b> and continue later.
                                        </div>
                                        <div id="status-progress3" style="display: none;">
                                            Your data is complete. Please click the <b>"Save button"</b> to store your information as <b>Submitted</b>
                                        </div>
                                    </div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="modal-card-foot is-end">
                      <a class="button h-button is-rounded h-modal-close">Cancel</a>
                      <a class="button h-button is-primary is-raised is-rounded" onclick="saveSubmitted()">Save</a>
                  </div>
              </div>
          </div>
    </div>
@endsection

    @push('scripts')
        <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 src="{{ asset('assets/js/utils/utils.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 urlStoreDataEmployee = '{{ route('employee.store') }}'
            const urlCheckIdentity = '{{ route('employee.check-identity') }}'
            const urlCheckMcuNumber = '{{ route('medical-checkup.check-mcu-number') }}'
            const partialForm = '{{ route('employee.partial-form') }}'
            const framinghamScore = '{{ route('employee.framingham-risk-score') }}'
            const urlGetContractById = '{{ route('contract.by-id') }}'
            const urlGetCompetencyView = '{{ route("employee.get-form-competency-view") }}'
        </script>
        <script src="{{ url('assets/js/user/create.js') }}"></script>
        <script>
            const isMcuUnderReview = @json($is_mcu_under_review ?? false);
            const mcuStatus = @json($mcu_status ?? null);

            function disableAllForms() {
                if (isMcuUnderReview) {
                    // Disable semua input, select, textarea
                    $('input, select, textarea').not('[type="hidden"]').prop('disabled', true);
                    
                    // Disable semua button kecuali back button
                    $('button[type="submit"], .button.is-primary, .button.is-warning').prop('disabled', true);
                    
                    // Tambahkan visual indicator
                    $('.page-content-inner').prepend(`
                        <div class="message is-warning" style="margin-bottom: 20px;">
                            <div class="message-body">
                                <strong>⚠️ Form Locked:</strong> This employee's MCU is currently <strong>${mcuStatus}</strong>. 
                                All forms are locked and cannot be edited until the review is completed.
                            </div>
                        </div>
                    `);
                    
                    // Disable tabs navigation
                    $('.tab-create-employee li').css('pointer-events', 'none').css('opacity', '0.6');
                    
                    // Disable file upload
                    $('input[type="file"]').prop('disabled', true);
                    
                    // Disable Select2
                    $('.select2me').prop('disabled', true);
                }
            }

            // Jalankan setelah DOM ready
            $(document).ready(function() {
                disableAllForms();
            });

          // $(document).ready(function() {
          //   $('#critical_activity').select2({
          //     closeOnSelect: false
          //   });
          // });
        </script>

        <script>
            function submitEmployeeCompetency() {
                $('#btn_save_competency').removeClass('is-loading');

                // ✅ Cek apakah ada file input di form
                const fileInputs = $('#form_create_competency input[type="file"]');
                
                // Jika tidak ada file input sama sekali (total=0), skip validation setup
                if (fileInputs.length === 0) {
                    // console.log('No competency file inputs found, skipping validation setup');
                    return;
                }

                // Custom validation methods
                $.validator.addMethod("fileSize", function (value, element, param) {
                    if (element.files.length === 0) return this.optional(element);
                    return element.files[0].size <= param;
                }, "File size must not exceed 2MB.");

                $.validator.addMethod("fileExtension", function (value, element, param) {
                    if (element.files.length === 0) return this.optional(element);
                    const ext = element.files[0].name.split('.').pop().toLowerCase();
                    return param.split(',').includes(ext);
                }, "Only PDF files are allowed.");

                // Build rules dynamically before validation
                const rules = {};
                const messages = {};

                fileInputs.each(function () {
                    const fieldName = $(this).attr('name');
                    
                    // ✅ Cek apakah file sudah ada (untuk kasus edit)
                    const hiddenInput = $('input[name="' + fieldName + '_hide"]');
                    const fileAlreadyExists = hiddenInput.length > 0 && hiddenInput.val().trim() !== '';

                    rules[fieldName] = {
                        required: !fileAlreadyExists, // ✅ Not required if file already uploaded
                        fileExtension: "pdf",
                        fileSize: 10485760 // 10MB in bytes
                    };

                    messages[fieldName] = {
                        required: "The field is required.",
                        fileExtension: "Only PDF files are allowed.",
                        fileSize: "The file must be less than 10MB."
                    };
                });

                $("#form_create_competency").validate({
                    rules,
                    messages,
                    errorClass: 'invalid-feedback',
                    errorElement: 'div',
                    errorPlacement: function (error, element) {
                        if (element.is("input[type='file']")) {
                            error.insertAfter(element.closest('.file.is-boxed'));
                        } else {
                            error.insertAfter(element);
                        }
                    },
                    highlight: function (element) {
                        if ($(element).is("input[type='file']")) {
                            $(element).closest('.file.is-boxed').find('.file-cta').addClass('is-invalid');
                        } else {
                            $(element).addClass('is-danger');
                        }
                    },
                    unhighlight: function (element) {
                        if ($(element).is("input[type='file']")) {
                            $(element).closest('.file.is-boxed').find('.file-cta').removeClass('is-invalid');
                        } else {
                            $(element).removeClass('is-danger');
                        }
                    },
                    submitHandler: function (form) {
                        $('#modal-alert-save').addClass('is-active');


                        $('#btn_save_competency').off('click').on('click', function () {
                            // $(this).addClass('is-loading').prop('disabled', true);
                            $('#btn_cancel_modal-alert-save').prop('disabled', true);

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

                            // =========================
                            // PROGRESS START
                            // =========================
                            let persen = 0;
                            const progressBar = document.getElementById("timer");
                            const text = document.getElementById("textSave");

                            const total = parseFloat(getTotalFileSizeMB());
                            let duration = Math.ceil(total) * 15000;

                            let intervalTime = 100;
                            let increment = 100 / (duration / intervalTime);

                            let interval = setInterval(() => {
                                persen += increment;

                                if (persen >= 95) {
                                    persen = 95;
                                    clearInterval(interval);
                                }

                                progressBar.style.width = persen + "%";
                                text.innerHTML = Math.floor(persen) + "% - Saving your data...";
                            }, intervalTime);
                            // =========================

                            let formData = new FormData(form);

                            // Append files
                            $('#form_create_competency input[type="file"]').each(function () {
                                const name = $(this).attr('name');
                                if (this.files[0]) {
                                    formData.append(name, this.files[0]);
                                }
                            });

                            $.ajax({
                                url: urlStoreDataEmployee,
                                type: 'POST',
                                data: formData,
                                processData: false,
                                contentType: false,
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                },
                                success: function (res) {
                                    // 100% saat selesai
                                    clearInterval(interval);
                                    progressBar.style.width = "100%";
                                    text.innerHTML = "100% Completed - Data saved successfully!";

                                    if (res.status) {
                                        let userId = $("#user_id").val();

                                        // Trigger click jika ada event terkait tombol
                                        const btn = document.getElementById("btn_next_personal_information");
                                        if (btn) btn.dispatchEvent(new Event('click'));

                                        // Trigger SUBMIT agar AJAX jalan
                                        const form = document.getElementById("form_create_personal_information");
                                        if (form) {
                                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                                        }

                                        // if(tabSave == null){
                                        //     setTimeout(() => window.location.href = res.redirect_url, 1000);
                                        // }else{
                                        // }
                                            // document.getElementById('center-loading').style.display = 'none';

                                    } else {
                                        // window.saveTabs = null;
                                        // document.getElementById('center-loading').style.display = 'none';
                                        resetModalState();
                                        showNotification('danger', 'Failed', res.message);
                                    }
                                },
                                error: function(xhr, status, error) {
                                    // window.saveTabs = null;
                                    document.getElementById('center-loading').style.display = 'none';
                                    resetModalState();

                                    if (xhr.status === 422) {
                                        showValidationErrors(xhr.responseJSON.errors)
                                    } else {
                                        let message = xhr.responseJSON?.message || 'An unexpected error occurred. Please try again.';
                                        // showNotification('danger', 'Failed', message);
                                    }
                                },
                            });
                        })
                        .trigger('click');
                    }
                });
            }

            // ✅ Function untuk submit tanpa competency (tanpa validation)
            function submitEmployeeWithoutCompetency() {
                $('#btn_save_competency').removeClass('is-loading');
                
                // Langsung setup form submit handler tanpa validation
                $('#form_create_competency').off('submit').on('submit', function(e) {
                    e.preventDefault();
                    
                    // Show modal confirmation
                    $('#modal-alert-save').addClass('is-active');
                    
                    $('#btn_save_competency').off('click').on('click', function () {
                        // $(this).addClass('is-loading').prop('disabled', true);
                        $('#btn_cancel_modal-alert-save').prop('disabled', true);

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

                        // =========================
                        // PROGRESS START
                        // =========================
                        let persen = 0;
                        const progressBar = document.getElementById("timer");
                        const text = document.getElementById("textSave");

                        const total = parseFloat(getTotalFileSizeMB());
                        let duration = Math.ceil(total) * 15000;

                        let intervalTime = 100;
                        let increment = 100 / (duration / intervalTime);

                        let interval = setInterval(() => {
                            persen += increment;

                            if (persen >= 95) {
                                persen = 95;
                                clearInterval(interval);
                            }

                            progressBar.style.width = persen + "%";
                            text.innerHTML = Math.floor(persen) + "% - Saving your data...";
                        }, intervalTime);
                        // =========================

                        let formData = new FormData(document.getElementById('form_create_competency'));

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

                                // 100% saat selesai
                                clearInterval(interval);
                                progressBar.style.width = "100%";
                                text.innerHTML = "100% Completed - Data saved successfully!";

                                if (res.status) {
                                    let userId = $("#user_id").val();
                                    
                                    // Trigger click jika ada event terkait tombol
                                    const btn = document.getElementById("btn_next_personal_information");
                                    if (btn) btn.dispatchEvent(new Event('click'));

                                    // Trigger SUBMIT agar AJAX jalan
                                    const form = document.getElementById("form_create_personal_information");
                                    if (form) {
                                    form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                                    }

                                    // if(tabSave == null){
                                    //     setTimeout(() => window.location.href = res.redirect_url, 1000);
                                    // }else{
                                    // }
                                        // document.getElementById('center-loading').style.display = 'none';

                                    // window.saveTabs = null;

                                } else {
                                    // window.saveTabs = null;
                                    // document.getElementById('center-loading').style.display = 'none';
                                    resetModalState();
                                    showNotification('danger', 'Failed', res.message);
                                }
                            },
                            error: function(xhr, status, error) {
                                // window.saveTabs = null;
                                // document.getElementById('center-loading').style.display = 'none';
                                resetModalState();
                                // document.getElementById('center-loading').style.display = 'none';
                                let message = xhr.responseJSON?.message || 'An unexpected error occurred. Please try again.';
                                // showNotification('danger', 'Failed', message);
                            },
                        });
                    }).trigger('click');
                });
            }

            function resetModalState() {
                $('#modal-alert-save').removeClass('is-active');
                $('#btn_cancel_modal-alert-save').prop('disabled', false);
                $('#btn_save_competency').removeClass('is-loading').prop('disabled', false);
            }

            function showValidationErrors(errors) {
                $('.invalid-feedback').remove();
                for (let field in errors) {
                    $(`[name="${field}"]`).after(
                        `<span id="${field}-error" class="invalid-feedback text-danger">${errors[field][0]}</span>`
                    );
                }
            }


            // ❌ REMOVED: submitEmployeeCompetency() sekarang dipanggil dari getFormCompetency()
            // $(document).ready(function() {
            //     submitEmployeeCompetency()
            // })

        </script>

        <script>
            // Hitung persentase pengisian form
            function getFormCompletionPercentage(formId) {
                // Form MCU tidak dihitung otomatis, pakai custom calculation saja
                if (formId === 'form_create_medical_checkup') {
                    return 0;
                }
                
                const form = document.getElementById(formId);
                if (!form) return 0;

                const inputs = form.querySelectorAll('input, select, textarea');
                let filled = 0;
                let total = 0;

                let skipped = 0;

                inputs.forEach(input => {
                    if (
                        input.type === 'hidden' ||
                        input.type === 'radio' ||
                        (input.readOnly && input.id !== 'location') ||
                        [
                            'work_period', 'work_period2', 'mcu_date' , 'email',
                            'mcu_validation', 'birth_date'
                        ].includes(input.id) ||

                        // Skip select tertentu
                        (input.tagName === 'SELECT' && (
                            input.id === "critical_activity" ||
                            input.name === "role_employee"
                        )) 

                        // Skip valid_until[] fields
                        // input.name === "valid_until[]" ||
                        // (input.name && input.name.startsWith('valid_until['))
                    ){
                        skipped++;
                        return;
                    }

                    total++;

                    let isFilled = false;

                    if (input.type === 'checkbox' || input.type === 'radio') {
                        isFilled = input.checked;
                    } else if (input.tagName === 'SELECT' && input.multiple) {
                        // Tangani select multiple
                        isFilled = Array.from(input.options).some(option => option.selected);
                    } else {
                        isFilled = input.value.trim() !== '';
                    }

                    if (isFilled) filled++;
                });

                if (total === 0) return 0;

                return Math.round((filled / total) * 100);
            }

            // Update tampilan progress
            function updateProgress(formId, progressElementId) {
                const percentFilled = getFormCompletionPercentage(formId);
                const progressEl = document.getElementById(progressElementId);
                if(formId === 'form_create_personal_information'){
                    @if (isset($user)) tambahpls = 27; @else tambahpls = 7; @endif

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid1').style.display = 'block';

                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid1').style.display = 'block';
        
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid1').style.display = 'none';

                        document.getElementById('personal-validation-required').style.display = 'block';

                    }

                }else if(formId === 'form_create_bpjs'){
                    let valb1 = document.getElementById("bpjs-tenaga-kerja-hide").value;
                    let valb2 = document.getElementById("bpjs-kesehatan-hide").value;

                    if(valb1){
                        nilaival1 = 50;
                    }else{
                        nilaival1 = 0;
                    }

                    if(valb2){
                        nilaival2 = 50;
                    }else{
                        nilaival2 = 0;
                    }
                    valnilai = nilaival1+nilaival2;

                    tambahpls = 100;

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid4').style.display = 'block';
                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid4').style.display = 'block';
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid4').style.display = 'none';
                    }

                } else if(formId === "form_create_competency") {
                    const $inputs = $('input[type="hidden"][name^="competency_"][name$="_hide"]');

                    const total = $inputs.length;
                    let filled = 0;

                    $inputs.each(function () {
                        if ($(this).val().trim() !== "") {
                            filled++;
                        }
                    });

                    const score = total > 0 ? (filled / total) * 100 : 0;
                    tambahpls = score;

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid5').style.display = 'block';
                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid5').style.display = 'block';
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid5').style.display = 'none';
                    }

                } else if(formId === "form_create_medical_checkup") {
                    // MCU: Hitung HANYA dari valid_until yang ada di preview_mcu_document
                    const $validUntilInputs = $('#preview_mcu_document input[name="valid_until[]"]');
                    
                    const total = $validUntilInputs.length;
                    let filled = 0;
                    
                    $validUntilInputs.each(function() {
                        if ($(this).val().trim() !== '') {
                            filled++;
                        }
                    });
                    
                    // Progress = (valid_until terisi / total valid_until) * 100
                    // Jika tidak ada valid_until = 0%
                    tambahpls = total > 0 ? (filled / total) * 100 : 0;

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    @if (isset($user))
                        @php
                            $fileMcu = $user->employeeMcu?->fileMcu()->first();
                        @endphp

                        @if (isset($fileMcu))
                            jumlahPercent = 100;
                        @endif

                    @endif

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid3').style.display = 'block';
                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid3').style.display = 'block';
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid3').style.display = 'none';
                    }

                } else if(formId === "form_create_account") {
                    tambahpls = 0;

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid6').style.display = 'block';
                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid6').style.display = 'block';
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid6').style.display = 'none';
                    }
                } else if(formId === "form_create_emergency") {
                    tambahpls = 100;

                    if (!progressEl) return;

                    jumlahPercent = Math.min(percentFilled + (tambahpls || 0), 100);

                    progressEl.innerText = `${jumlahPercent}%`;

                    if (jumlahPercent < 50) {
                        progressEl.style.color = '#7A2222';
                        progressEl.style.backgroundColor = '#FBCDCD';
                        document.getElementById('grid2').style.display = 'block';
                    } else if (jumlahPercent < 100) {
                        progressEl.style.color = '#813C1D';
                        progressEl.style.backgroundColor = '#F7E4AB';
                        document.getElementById('grid2').style.display = 'block';
                    } else {
                        progressEl.style.color = '#0B4214';
                        progressEl.style.backgroundColor = '#B8E1BF';
                        document.getElementById('grid2').style.display = 'none';
                    }
                }

                updateTotalProgress();

            }

            // Pasang tracking live pada form
            function setupLiveFormTracking(formId, progressElementId) {
                const form = document.getElementById(formId);
                if (!form) return;

                updateProgress(formId, progressElementId);

                const inputs = form.querySelectorAll('input, select, textarea');

                inputs.forEach(input => {
                    input.addEventListener('input', () => updateProgress(formId, progressElementId));
                    input.addEventListener('change', () => updateProgress(formId, progressElementId));
                });

                // Untuk Select2, trigger update saat terjadi perubahan
                if (typeof $ !== 'undefined' && $.fn.select2) {
                    $(form).find('select').each(function () {
                        const select = $(this);
                        select.on('change', () => updateProgress(formId, progressElementId));
                    });
                }
                
                // Event delegation untuk input dinamis (valid_until yang di-generate via JS)
                if (formId === 'form_create_medical_checkup') {
                    $(document).on('input change', '#preview_mcu_document input[name="valid_until[]"]', function() {
                        updateProgress(formId, progressElementId);
                    });
                }
            }

            // Jalankan setelah halaman siap
            document.addEventListener('DOMContentLoaded', function () {
                setupLiveFormTracking('form_create_personal_information', 'form_progress1');
                setupLiveFormTracking('form_create_emergency', 'form_progress2');
                setupLiveFormTracking('form_create_account', 'form_progress2b');
                setupLiveFormTracking('form_create_medical_checkup', 'form_progress3b');
                setupLiveFormTracking('form_create_bpjs', 'form_progress4');
                setupLiveFormTracking('form_create_competency', 'form_progress5');

                setupLiveFormTracking('form_create_personal_information', 'form-tabs1');
                setupLiveFormTracking('form_create_account', 'form-tabs6');
                setupLiveFormTracking('form_create_emergency', 'form-tabs2');
                setupLiveFormTracking('form_create_medical_checkup', 'form-tabs3');
                setupLiveFormTracking('form_create_bpjs', 'form-tabs4');
                setupLiveFormTracking('form_create_competency', 'form-tabs5');

            });

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

            $(document).ready(function() {
              // hapus duplikat option berdasarkan value

              $('.select2me').select2({
                allowClear: false
              });

              $('.select2me').on('select2:open', function() {
                setTimeout(function() {
                  document.querySelector('.select2-container--open .select2-search__field').focus();
                }, 100);
              });
            });


            function getFormCompetency(userId)
            {
                $.ajax({
                    url: urlGetCompetencyView,
                    data: {
                        user_id: userId
                    },
                    success: (res) => {
                        // Inject form competency ke tab (baik ada isi maupun kosong)
                        $('#personnel-competency-tab').html(res.view);

                        // Aktifkan ulang modal karena konten berasal dari AJAX
                        function rebindModalHandlers() {

                            // Buka modal
                            $('[data-modal]').off('click').on('click', function () {
                                const modalId = $(this).data('modal');
                                const modal = $('#' + modalId);
                                modal.addClass('is-active');
                            });

                            // Close modal
                            $('.h-modal-close, .modal-background').off('click').on('click', function () {
                                $(this).closest('.modal').removeClass('is-active');
                            });
                        }

                        // Panggil ulang handler
                        rebindModalHandlers();
                        
                        if (res.status) {
                            // Ada competency yang perlu diupload
                            $('#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>`)

                            // ✅ Tampilkan progress bar competency
                            $('#form_progress5').show();
                            $('#form-tabs5').show();
                            document.getElementById('grid5').style.display = 'block';

                            $('#personnel-competency-tab').find('input[type="file"]').each(function() {
                                const id = $(this).attr('id');
                                uploadFile(id, 'image-preview-' + id);
                            });

                            $('#personnel-competency-tab').on('click', '.remove-icon', function() {
                                const input = $(this).closest('.file').find('input[type="file"]')[0];
                                if (input) input.value = ''; // clear file input
                                updateProgress('form_create_competency', 'form_progress5');
                                updateProgress('form_create_competency', 'form-tabs5');
                            });

                            submitEmployeeCompetency();
                            setupLiveFormTracking('form_create_competency', 'form_progress5');
                            setupLiveFormTracking('form_create_competency', 'form-tabs5');
                            document.getElementById('grid5').style.display = 'block';
                        } else {
                            // Tidak ada competency, ubah tombol BPJS jadi Save
                            $('#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>`)

                            // ✅ Sembunyikan progress bar competency (tidak ada competency = tidak perlu tracking)
                            $('#form_progress5').hide();
                            $('#form-tabs5').hide();
                            document.getElementById('grid5').style.display = 'block';

                            submitEmployeeWithoutCompetency();
                        }
                        setTimeout(() => {
                            const currentValue = $('#user_id_competency').val();
                            // console.log('✅ user_id_competency after inject:', currentValue);
                            
                            // Force set jika kosong
                            if (!currentValue && userId) {
                                $('#user_id_competency').val(userId);
                                // console.log('🔧 Forced set user_id_competency to:', userId);
                            }
                        }, 100);
                        // ✅ Init button handler untuk semua kondisi (ada competency atau tidak)
                        
                        initBtnPrevCompetency();
                    }
                });
            }

        </script>
        <script>
        function initBtnPrevCompetency(){
            $('#btn_prev_competency').on('click', function() {
                const activeTab = $('.tabs li.is-active');
                const activeContent = $('.tab-content.is-active');

                let prevTab = activeTab.prev();
                let prevContent = $('#' + prevTab.data('tab'));

                if (prevTab.length === 0) {
                    prevTab = $('.tabs li').last();
                    prevContent = $('#' + prevTab.data('tab'));
                }

                activeTab.removeClass('is-active');
                prevTab.addClass('is-active');

                activeContent.removeClass('is-active');
                prevContent.addClass('is-active');
            });
        }

        // Ambil semua data dari semua form
        // const dataPersonal   = $("#form_create_personal_information").serializeArray();
        // const dataAccount       = $("#form_create_account").serializeArray();
        // const dataBpjs       = $("#form_create_bpjs").serializeArray();
        // const dataCompetency       = $("#form_create_competency").serializeArray();


        // // Gabungkan semua data
        // const allData = [
        //     ...dataPersonal,
        //     ...dataAccount,
        //     ...dataBpjs,
        //     ...dataCompetency
        // ];

        // // Tampilkan (alert atau console)
        // console.log(allData);

        // let text = "";
        // allData.forEach(item => {
        //     text += item.name + " : " + item.value + "\n";
        // });

        // alert(text);
        let previousTab = null;
        const tabs = document.querySelectorAll('.tab-create-employee li');
        window.saveTabs = null;

        tabs.forEach(tab => {
            tab.addEventListener('click', function(e) {

                const currentActive = document.querySelector('.tab-create-employee li.is-active');
                previousTab = currentActive ? currentActive.getAttribute('data-tab') : null;

                tabs.forEach(t => t.classList.remove('is-active'));
                this.classList.add('is-active');

                // ===> simpan value
                window.saveTabs = previousTab; // SIMPAN GLOBAL

                if (previousTab === 'personal-tab') {

                    // Trigger click jika ada event terkait tombol
                    const btn = document.getElementById("btn_next_personal_information");
                    if (btn) btn.dispatchEvent(new Event('click'));

                    // Trigger SUBMIT agar AJAX jalan
                    const form = document.getElementById("form_create_personal_information");
                    if (form) {
                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                    }

                    document.getElementById('center-loading').style.display = 'none';
                    document.getElementById('personal-validation-required').style.display = 'block';
                    
                }else if (previousTab === 'account-tab'){

                    // Trigger click jika ada event terkait tombol
                    const btn = document.getElementById("btn_next_account");
                    if (btn) btn.dispatchEvent(new Event('click'));

                    // Trigger SUBMIT agar AJAX jalan
                    const form = document.getElementById("form_create_account");
                    if (form) {
                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                    }

                    document.getElementById('center-loading').style.display = 'none';
                    document.getElementById('personal-validation-required').style.display = 'block';

                }else if (previousTab === 'medical-tab'){

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

                    // Trigger SUBMIT agar AJAX jalan
                    const form = document.getElementById("form_create_medical_checkup");
                    if (form) {
                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                    }

                    document.getElementById('center-loading').style.display = 'none';
                    document.getElementById('personal-validation-required').style.display = 'block';

                }else if (previousTab === 'emergency-tab'){

                    // Trigger click jika ada event terkait tombol
                    const btn = document.getElementById("btn_next_emergency");
                    if (btn) btn.dispatchEvent(new Event('click'));

                    // Trigger SUBMIT agar AJAX jalan
                    const form = document.getElementById("form_create_emergency");
                    if (form) {
                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                    }

                    document.getElementById('center-loading').style.display = 'none';
                    document.getElementById('personal-validation-required').style.display = 'block';

                }else if (previousTab === 'bpjs-tab'){

                    // Trigger click jika ada event terkait tombol
                    const btn = document.getElementById("btn_next_bpjs");
                    if (btn) btn.dispatchEvent(new Event('click'));

                    // Trigger SUBMIT agar AJAX jalan
                    const form = document.getElementById("form_create_bpjs");
                    if (form) {
                        form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                    }

                    document.getElementById('center-loading').style.display = 'none';
                    document.getElementById('personal-validation-required').style.display = 'block';

                }
                // else if (previousTab === 'personnel-competency-tab'){
                //     window.saveTabs = previousTab;

                //     // Trigger click jika ada event terkait tombol
                //     const btn = document.getElementById("btn_save_competency");
                //     if (btn) btn.dispatchEvent(new Event('click'));

                //     // Trigger SUBMIT agar AJAX jalan
                //     const form = document.getElementById("form_create_competency");
                //     if (form) {
                //         form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                //     }

                //     document.getElementById('center-loading').style.display = 'none';
                //     document.getElementById('personal-validation-required').style.display = 'block';
                // }
            });
        });

        statusData = 'Draft';
        function updateTotalProgress() {
            const ids = [
                "form_progress1",
                "form_progress2",
                "form_progress3b",
                "form_progress4",
                "form_progress5",
                 @if(!isset($user->password)) "form_progress2b", @endif
            ];

            let total = 0;

            ids.forEach(id => {
                const el = document.getElementById(id);
                if (el) {
                    let val = parseInt(el.textContent.replace('%','')) || 0;
                    total += val;
                }
            });

            // Jika kamu mau rata-rata:
            let average = Math.round(total / ids.length);

            // Tempat tampilkan total (tambahkan elemen ini di HTML)
            let totalBox = document.getElementById("total-progress");
            let statusBox = document.getElementById("status-progress");

            let roleUser = $("#role_employee").val();
            let userIds = $("#user_id").val();
            let sumPersen = average ? average : 0;

            if (roleUser) {

                $.ajax({
                    url: '/get-critical/' + roleUser,
                    type: 'GET',
                    success: function(response) {

                        // Cek apakah response kosong
                        if (Array.isArray(response) && response.length === 0) {

                            if (average) {
                                sumPersen = average + 20;
                                document.getElementById('grid5').style.display = 'block';
                            }

                        } else {
                            if (average) {
                                sumPersen = average;
                            }
                        }

                        // Tentukan status
                        if (sumPersen >= 100) {
                            statusData = 'Submitted';
                            statusBox.textContent = '✅ Complete';
                            statusBox.style.color = '#2c783b';
                            document.getElementById("status-progress2").style.display = 'none';
                            document.getElementById("status-progress3").style.display = 'inline';
                        } else {
                            statusData = 'Draft';
                            statusBox.textContent = '⚠️ Incomplete';
                            document.getElementById("status-progress2").style.display = 'inline';
                            document.getElementById("status-progress3").style.display = 'none';
                        }

                    }
                });

            } else {

                if (average) {
                    sumPersen = average;
                }

                if (sumPersen >= 100) {
                    statusData = 'Submitted';
                    statusBox.textContent = '✅ Complete';
                    statusBox.style.color = '#2c783b';
                    document.getElementById("status-progress2").style.display = 'none';
                    document.getElementById("status-progress3").style.display = 'inline';
                } else {
                    statusData = 'Draft';
                    statusBox.textContent = '⚠️ Incomplete';
                    document.getElementById("status-progress2").style.display = 'inline';
                    document.getElementById("status-progress3").style.display = 'none';
                }

            }

        }

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

          // let persen = 0;
          
          // const progressBar = document.getElementById("timer");
          // const text = document.getElementById("textSave");

          // const total = parseFloat(getTotalFileSizeMB()); // pastikan number
          // let waktuRedirect = 40000; // default (>= 10MB)
          // let waktuRedirectTwo = 400; // default (>= 10MB)

            // hitung per 1MB = 4000 ms
          // if (total < 10) {
          //    waktuRedirect = Math.ceil(total) * 4000;
          //    waktuRedirectTwo = Math.ceil(total) * 40;
          // }

          // const intervalPersen = waktuRedirectTwo; // 14 detik / 100%

          // const countdown = setInterval(() => {
          //   persen++;
          //   progressBar.style.width = persen + "% completed - ";
          //   progressBar.textContent = persen + "% completed - ";

          //   // Update teks detik setiap 1 detik
          //   if (persen < 100) {
          //     text.textContent = `Saving your data...`;
          //   }

          //   if (persen >= 100) {
          //     clearInterval(countdown);
          //     text.textContent = "Data saved successfully!";
          //   }
          // }, intervalPersen);


            let idValue = document.getElementById('form-tabs1').textContent;

            Object.defineProperty(window, 'saveTabs', {
                get() {
                    return 'save_all';
                },
                set(value) {
                    console.warn('Tidak bisa mengubah saveTabs ke:', value);
                }
            });

           
                let userIds = $("#user_id").val();
                $.ajax({
                    method: 'GET',
                    url: '{{ url('/update/status_data') }}',
                    data: {
                        userId: userIds,
                        status: statusData,
                    }
                });

                // // Trigger click jika ada event terkait tombol
                // const btn = document.getElementById("btn_next_personal_information");
                // if (btn) btn.dispatchEvent(new Event('click'));

                // // Trigger SUBMIT agar AJAX jalan
                // const form = document.getElementById("form_create_personal_information");
                // if (form) {
                // form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                // }

                // Trigger click jika ada event terkait tombol
                const btn6 = document.getElementById("btn_save_competency");
                if (btn6) btn6.dispatchEvent(new Event('click'));

                // Trigger SUBMIT agar AJAX jalan
                const form6 = document.getElementById("form_create_competency");
                if (form6) {
                form6.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                }

                // Trigger click jika ada event terkait tombol
                const btn2 = document.getElementById("btn_next_account");
                if (btn2) btn2.dispatchEvent(new Event('click'));

                // Trigger SUBMIT agar AJAX jalan
                const form2 = document.getElementById("form_create_account");
                if (form2) {
                form2.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                }
                // Trigger click jika ada event terkait tombol
                const btn4 = document.getElementById("btn_next_emergency");
                if (btn4) btn4.dispatchEvent(new Event('click'));

                // Trigger SUBMIT agar AJAX jalan
                const form4 = document.getElementById("form_create_emergency");
                if (form4) {
                form4.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
                }

                // setTimeout(function() {
                //     window.location.href = "{{url('employee')}}";
                // }, waktuRedirect);
        }

        function getTotalFileSizeMB() {
            let totalBytes = 0;

            const form = document.getElementById('form_create_competency');
            if (!form) return 0;

            const fileInputs = form.querySelectorAll('input[type="file"]');

            fileInputs.forEach(input => {
                Array.from(input.files).forEach(file => {
                    totalBytes += file.size;
                });
            });

            return (totalBytes / (1024 * 1024)).toFixed(2);
        }

        function getTotalFileSizeMB2() {
            let totalBytes = 0;

            const fileInputs = document.querySelectorAll(
                'form:not(#form_create_competency) input[type="file"]'
            );

            fileInputs.forEach(input => {
                Array.from(input.files).forEach(file => {
                    totalBytes += file.size;
                });
            });

            return (totalBytes / (1024 * 1024)).toFixed(2);
        }

        

        
        </script>
    @endpush