@php
    $user_id = isset($user) ? $user->id : '';
    $redirect_url = $update_profile == 1 ? route('employee.detail', ['id' => encrypt($user->id)]) : null;

    $mcu_number =
        isset($employee_mcu) && $employee_mcu->mcu_number != null ? $employee_mcu->mcu_number : "";
@endphp
<form id="form_create_medical_checkup">
    <input type="hidden" name="user_id" value="{{ $user_id }}" id="user_id_mcu">
    <input type="hidden" name="mcu_admin" value="true">
    <input type="hidden" name="mcu_number" value="{{ $mcu_number }}">
    @if ($update_profile == 1)
        <input type="hidden" name="update_profile" value="true">
    @endif
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.medical_checkup')</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="=mcu_document">
                            @lang('app.mcu_document') (File type:pdf | Max 10MB)<sup class="text-danger">*</sup>
                        </label>
                        @include('components.form.form-multiple-upload-file', [
                            'id' => 'mcu_document',
                            'pdf' => true,
                            'with_valid_until' => true
                        ])
                    </div>
                </div>
                <div id="preview_mcu_document" style="width: 100%"></div>
            </div>
        </div>
    </div>

    @if (isset($user))
        <div class="columns is-multiline">
            @php
                $nomor = 1;
            @endphp
            {{-- @php
                $mcuFiles = collect(optional($user->employeeMcu)->fileMcu ?? [])
                    ->sortByDesc('created_at')
                    ->unique('document_name')
                    ->values();
            @endphp --}}

            @foreach ($user->employeeMcu->fileMcu ?? [] as $item)
                <div class="column is-12">
                    @include('components.util.show-file', [
                        'file' => $item->document_hash_name,
                        'idFileMcu' => $item->id,
                        'sub_folder' => 'mcu-document',
                        'file_name' => $item->document_name,
                        'employee_name' => $user->name,
                        'size' => 'small',
                        'nomor' => $nomor,
                        'approved' => '',
                        'note_mcu' => '',
                        'valid_until' => $item->valid_until,
                        'created_at' => date('d F Y', strtotime($item->created_at)),
                    ])
                </div>
                @php $nomor++; @endphp
            @endforeach

        </div>
    @endif

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

@push('scripts')
    <script>
        function submitMCU() {
            $('#btn_next_medical_checkup').removeClass('is-loading')

            $.validator.addMethod(
                "fileSize",
                function(value, element, param) {
                    const files = element.files;
                    for (let i = 0; i < files.length; i++) {
                        const fileSize = files[i].size;
                        if (fileSize > param) {
                            return false;
                        }
                    }
                    return true;
                },
                "Each file size must not exceed 10MB."
            );

            $.validator.addMethod(
                "fileExtension",
                function(value, element, param) {
                    const validExtensions = param.split(",");
                    const files = element.files;
                    for (let i = 0; i < files.length; i++) {
                        const fileName = files[i].name.toLowerCase();
                        const fileExtension = fileName.split(".").pop();
                        if (!validExtensions.includes(fileExtension)) {
                            return false;
                        }
                    }
                    return true;
                },
                "Please upload valid files (pdf)."
            );

            $("#form_create_medical_checkup").validate({
                rules: {
                    "mcu_document[]": {
                        required: {{ request('update_profile') == 1 ? 'false' : 'true' }},
                        fileExtension: "pdf",
                        fileSize: 10485760 // 10mb
                    },
                },
                messages: {
                    "mcu_document[]": {
                        required: "The field is required.",
                        fileExtension: "Only PDF files are allowed.",
                        fileSize: "The document must be less than 10MB."
                    },
                },
                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) {

                    $('#btn_next_medical_checkup').addClass('is-loading')

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

                    let formData = new FormData(form);

                    var mcuDocuments = $('#mcu_document')[0].files;

                    $.each(mcuDocuments, function(i, file) {
                        formData.append('mcu_document[]', file);
                    });

                    $.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_medical_checkup").prop('disabled', true);
                        },
                        success: function(res) {

                            if (res.status) {
                                $("#btn_next_medical_checkup").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 btn5 = document.getElementById("btn_next_bpjs");
                                    if (btn5) btn5.dispatchEvent(new Event('click'));

                                    // Trigger SUBMIT agar AJAX jalan
                                    const form5 = document.getElementById("form_create_bpjs");
                                    if (form5) {
                                    form5.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');
                                    //     const tabSave = window.saveTabs;
                                    //     $(`#${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';
                                    // }

                                    // === setelah dipakai, reset lagi ===
                                    window.saveTabs = null;
                                    
                                    $('#user_id_bpjs').val(res.user_id)

                                }
                            } else {
                                $("#btn_next_medical_checkup").prop('disabled', false).removeClass(
                                    'is-loading')
                                $('.invalid-feedback').remove();
                                $('#error_field_required').text(res.message)
                            }

                        },
                        error: function(xhr, status, error) {
                            $("#btn_next_medical_checkup").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)) {
                                        $(`#${field}-error`).remove()
                                        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);
                            }
                        }
                    });

                }
            });
        }

        $(document).ready(function() {
            submitMCU()
        })
    </script>
@endpush