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

<form id="form_create_emergency">
    <input type="hidden" name="user_id" id="user_id_emergency" value="{{ $user_id }}">
    <input type="hidden" name="emergency" value="true">
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.emergency')</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-4">
                    @include('components.input.form-select', [
                        'label' => __('app.emergency_contact_relation'),
                        'mandatory' => false,
                        'name' => 'emergency_contact_relation',
                        'arr_type' => 'index',
                        'options' => ['Parent', 'Spouse', 'Child', 'Sibling', 'Friend', 'Colleague'],
                        'placeholder' => __('app.select_relation'),
                        'selected' => isset($user) ? $user->emergency_contact_relation : '',
                        'value_type' => 'string',
                    ])
                </div>
                <div class="column is-4">
                    @include('components.input.form-input', [
                        'label' => __('app.emergency_contact_name'),
                        'mandatory' => false,
                        'name' => 'emergency_contact_name',
                        'value' => isset($user) ? $user->emergency_contact_name : '',
                    ])
                </div>
                <div class="column is-4">
                    @include('components.input.form-input', [
                        'label' => __('app.emergency_contact_phone'),
                        'mandatory' => false,
                        'name' => 'emergency_contact_phone',
                        'value' => isset($user) ? $user->emergency_contact_phone : '',
                    ])
                </div>
            </div>
        </div>
    </div>
    @include('components.button.card-button-next-prev', [
        'prev' => true,
        'next' => true,
        'id' => 'emergency',
    ])
</form>

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

            $("#form_create_emergency").validate({
                rules: {
                    emergency_contact_name: {
                        required: false
                    },
                    emergency_contact_phone: {
                        required: false,
                        digits: true,
                        minlength: 7,
                        maxlength: 15
                    },
                    emergency_contact_relation: {
                        required: false
                    }
                },
                messages: {
                    emergency_contact_name: {
                        required: "The emergency contact name field is required."
                    },
                    emergency_contact_phone: {
                        required: "The phone number field is required.",
                        digits: "Please enter only numbers.",
                        minlength: "Phone number must be at least 7 digits long.",
                        maxlength: "Phone number cannot exceed 15 digits."
                    },
                    emergency_contact_relation: {
                        required: "The contact relation field is required."
                    }
                },
                errorClass: 'invalid-feedback',
                errorElement: 'div',
                errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
                highlight: function(element) {
                    $(element).addClass('is-danger');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-danger');
                },
                submitHandler: function(form) {
                    // $('#btn_next_emergency').addClass('is-loading')

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

                    const formData = new FormData(form);

                    $.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_emergency").prop('disabled', true);
                        },
                        success: function(res) {
                            if (res.status) {
                                $("#btn_next_emergency").prop('disabled', false);
                                $('#btn_next_emergency').removeClass('is-loading')

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

                                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_mcu').val(res.user_id)
                                }
                                // === setelah dipakai, reset lagi ===
                                window.saveTabs = null;
                            } else {
                                showNotification('danger', 'Failed', res.message)
                            }

                        },
                        error: function(xhr, status, error) {
                            $("#btn_next_emergency").prop('disabled', false);
                            $('#btn_next_emergency').removeClass('is-loading')

                            // === setelah dipakai, reset lagi ===
                            window.saveTabs = null;
                            // document.getElementById('center-loading').style.display = 'none';

                            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() {
            submitEmergency()
        })
    </script>
@endpush