@php
    $user_id = isset($user) ? $user->id : session('user_id');
    $bpjs_note = isset($user) ? $user->bpjs_note : '';
@endphp
<form id="form_create_bpjs">
    <input type="hidden" name="user_id" value="{{ $user_id }}" id="user_id_bpjs">
    <input type="hidden" name="bpjs" value="true">
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.bpjs')</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="=bpjs_tenaga_kerja">
                            @lang('app.bpjs_tenaga_kerja') (File type:pdf | Max 10MB)
                            {{-- <sup class="text-danger">*</sup> --}}
                        </label>
                        @if (isset($user))
                            @include('components.form.form-upload-file', [
                                'id' => 'bpjs_tenaga_kerja',
                                'file' => $user->bpjs_tenaga_kerja,
                            ])
                        @else
                            @include('components.form.form-upload-file', ['id' => 'bpjs_tenaga_kerja'])
                        @endif
                        <input type="hidden" name="bpjs-tenaga-kerja-hide" id="bpjs-tenaga-kerja-hide" value="{{$user->bpjs_tenaga_kerja ?? ''}}">
                    </div>
                </div>
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="=bpjs_kesehatan">
                            @lang('app.bpjs_kesehatan') (File type:pdf | Max 10MB)
                            {{-- <sup class="text-danger">*</sup> --}}
                        </label>
                        @if (isset($user))
                            @include('components.form.form-upload-file', [
                                'id' => 'bpjs_kesehatan',
                                'file' => $user->bpjs_kesehatan,
                            ])
                        @else
                            @include('components.form.form-upload-file', ['id' => 'bpjs_kesehatan'])
                        @endif
                        <input type="hidden" name="bpjs-kesehatan-hide" id="bpjs-kesehatan-hide" value="{{$user->bpjs_kesehatan ?? ''}}">
                    </div>
                </div>
                {{--
                <div class="column is-12">
                    <div class="control">
                        <label class="fs-12 fw-400 text-grey" for="bpjs_note">
                            @lang('app.note')
                        </label>
                        <textarea name="bpjs_note" class="textarea is-warning-focus" rows="4" placeholder="Add a Note (Optional)">{{ $bpjs_note }}</textarea>
                    </div>
                </div>
        --}}
            </div>
        </div>
    </div>
    <div class="demo-card floats-demo">
        <table width="100%">
            <tr>
                <td width="50%">
                <button type="button" class="button h-button" id="btn_prev_bpjs">
                    <span>Back</span>
                </button>
                <button type="button"
                    class="button h-button" id="btn_next2_bpjs"
                >
                    <span>Next</span>
                </button>
                </td>
                <td align="right">
                    {{-- <div class="txt-content-mc show_next">Status Data: <span @if(isset($user) && $user->status_data == 'Submitted') class="awaits3" @else class="awaits4" @endif>{{$user->status_data ?? 'Draft'}}</span></div> --}}
                    &nbsp;
                    <button type="submit" form="form_create_bpjs" style="display: none;" 
                        class="button h-button is-warning" id="btn_next_bpjs">
                        <span>Save</span>
                    </button>

                    <button type="button" data-modal="demo-right-actions-modal"
                        class="button h-button is-warning  h-modal-trigger">
                        <span>Save</span>
                    </button>
                    {{-- <button type="submit" form="form_create_bpjs" value="submitedd2"
                        class="button h-button is-warning" id="btn_save_bpjs">
                        <span>Submit</span>
                    </button> --}}
                </td>
            </tr>
        </table>
    </div>
</form>

@include('components.modal.modal-alert-save', [
    'id' => 'modal-alert-save-bpjs',
    'title' => __('app.alert_save_title'),
    'subtitle' => __('app.alert_save_subtitle'),
    'btn_submit' => 'btn_submit_employee_bpjs',
])

@push('scripts')
    <script>

        let lastClickedBtn2 = null;

        // simpan tombol yang diklik
        $(document).on("click", "button[type=submit]", function() {
            lastClickedBtn2 = this;
        });


        function submitBPJS(btnType = 'next') {

            @if (isset($user))
                @if (count($user->document) > 0 && count($user->hasCriticalActivity) > 0)
                    $(`#btn_save_bpjs`).removeClass('is-loading')
                @else
                    $(`#btn_${btnType}_bpjs`).removeClass('is-loading')
                @endif
            @else
                $(`#btn_${btnType}_bpjs`).removeClass('is-loading')
            @endif

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

                    const fileSize = element.files[0].size;
                    return fileSize <= param;
                },
                "File size must not exceed 10MB."
            );

            $.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.");

            $("#form_create_bpjs").validate({
                rules: {
                    bpjs_tenaga_kerja: {
                        // required: {{ isset($user) && $user->bpjs_tenaga_kerja != null ? 'false' : 'true' }},
                        fileExtension: "pdf",
                        maxsize: 10485760
                    },
                    bpjs_kesehatan: {
                        // required: {{ isset($user) && $user->bpjs_kesehatan != null ? 'false' : 'true' }},
                        fileExtension: "pdf",
                        maxsize: 10485760
                    },
                },
                messages: {
                    bpjs_tenaga_kerja: {
                        // required: "The field is required.",
                        fileExtension: "Only PDF files are allowed.",
                        maxsize: "The file must be less than 10MB."
                    },
                    bpjs_kesehatan: {
                        // required: "The field is required.",
                        fileExtension: "Only PDF files are allowed.",
                        maxsize: "The file 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) {

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

                    let formData = new FormData(form);

                    var bpjsTk = $('#bpjs_tenaga_kerja')[0].files[0];
                    var bpjsKes = $('#bpjs_kesehatan')[0].files[0];
                    if (bpjsTk) formData.append('bpjs_tenaga_kerja', bpjsTk);
                    if (bpjsKes) formData.append('bpjs_kesehatan', bpjsKes);

                    if ($(form).valid()) {
                        if ($('#btn_next_bpjs').length) {
                            submitAjax(formData)
                        } else {
                            $('#modal-alert-save-bpjs').addClass('is-active');
                            $(`#btn_${btnType}_bpjs`).addClass('is-loading')

                            $('#btn_submit_employee_bpjs').on('click', function() {
                                $(this).addClass('is-loading').prop('disabled', true)
                                submitAjax(formData)
                            })
                        }
                    }

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

                                if (res.status) {
                                    // if (res.total == 0) {
                                    //     window.location.href = res.url_redirect
                                    //     return
                                    // }

                                    $(`#btn_${btnType}_bpjs`).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'){
                                        setTimeout(function() {
                                            window.location.href = "{{url('employee')}}";
                                        }, 1000);
                                    }

                                    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_competency').val(res.user_id)
                                        
                                    }

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

                                    if (lastClickedBtn2) {
                                        locSubmmited2 = lastClickedBtn2.value;
                                        if(locSubmmited2 == 'submitedd2'){
                                        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";
                                        }
                                    }
                                } else {
                                    showNotification('danger', 'Failed', res.message)
                                }

                            },
                            error: function(xhr, status, error) {
                                $(`#btn_${btnType}_bpjs`).prop('disabled', false).removeClass(
                                    'is-loading')
                                
                                // === setelah dipakai, reset lagi ===
                                window.saveTabs = null;
                                // document.getElementById('center-loading').style.display = 'none';
                                
                                // Handle validation errors (status 422)
                                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);
                                }
                            }
                        });
                    }
                }
            });
        }

        $(document).ready(function() {
            submitBPJS()
        })

        $('#btn_prev_bpjs').on('click', function() {
            // 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';


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

        $('#btn_next2_bpjs').on('click', function() {
            // 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';

            const currentTab = $('.tabs ul li.is-active');
            const nextTab = currentTab.next('li');
            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');
        })
    </script>
@endpush