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

<form id="form_create_account">
    <input type="hidden" name="user_id" id="user_id_account" value="{{ $user_id }}">
    <input type="hidden" name="account" value="true">
    <div class="demo-card">
        <div class="demo-title">
            <h3 class="title is-thin is-5">@lang('app.account')</h3>
        </div>
        <div class="card-inner">
            <div class="columns is-multiline">
                <div class="column is-6">
                    @include('components.input.form-input', [
                        'label' => __('app.username'),
                        'mandatory' => true,
                        'name' => 'username',
                        'value' => isset($user) ? $user->username : '',
                    ])
                </div>
                <div class="column is-6">
                    @include('components.input.form-input', [
                        'label' => __('app.email'),
                        'name' => 'email',
                        'value' => isset($user) ? $user->email : '',
                    ])
                </div>
                <div class="column is-6">
                    <div class="control" style="position: relative">
                        <label class="fs-12 fw-400 text-grey" for="password">
                            @lang('app.password')<sup class="text-danger">*</sup>
                        </label>
                        <input type="password" class="input is-warning-focus" id="password" name="password"
                            placeholder="Password" @if(isset($user->password)) value="default password" @endif autocomplete="off" style="padding-right: 40px;">

                        <i class="fa-regular fa-eye" id="toggleEye"
                            style="position: absolute; right: 10px; top: 65%; transform: translateY(-50%); cursor: pointer;"
                            onclick="togglePassword('password','toggleEye')"></i>
                    </div>
                </div>
                <div class="column is-6">
                    <div class="control" style="position: relative">
                        <label class="fs-12 fw-400 text-grey" for="password_confirmation">
                            @lang('app.confirm_password')<sup class="text-danger">*</sup>
                        </label>
                        <input type="password" class="input is-warning-focus" id="password_confirmation"
                            name="password_confirmation" placeholder="Confirm Password" @if(isset($user->password)) value="default password" @endif autocomplete="off"
                            style="padding-right: 40px">

                        <i class="fa-regular fa-eye" id="toggleEyeConfirm"
                            style="position: absolute; right: 10px; top: 65%; transform: translateY(-50%); cursor: pointer;"
                            onclick="togglePassword('password_confirmation','toggleEyeConfirm')"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.button.card-button-next-prev', [
        'prev' => true,
        'next' => true,
        'id' => 'account',
    ])
</form>

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

            $("#form_create_account").validate({
                highlight: function(element) {
                    $(element).addClass('is-danger');
                },
                unhighlight: function(element) {
                    $(element).removeClass('is-danger');
                },
                submitHandler: function(form) {
                    $('#btn_next_account').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_account").prop('disabled', true);
                        },
                        success: function(res) {
                            if (res.status) {
                                $("#btn_next_account").prop('disabled', false);
                                $('#btn_next_account').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_emergency').val(res.user_id)
                                }
                            } else {
                                showNotification('danger', 'Failed', res.message)
                            }

                        },
                        error: function(xhr, status, error) {
                            // $("#btn_next_account").prop('disabled', false);
                            // $('#btn_next_account').removeClass('is-loading')
                            // document.getElementById('center-loading').style.display = 'none';
                            // === setelah dipakai, reset lagi ===
                            window.saveTabs = null;

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

                            //     let errors = xhr.responseJSON.errors;

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

        // const typingDelayUsername = 1000;
        // $('#username').on('keyup', function() {
        //     $('#username-error').remove();
        //     const userID = $('#user_id').val();

        //     clearTimeout(typingTimer);
        //     const username = $(this).val();

        //     if (username == null || username == '') {
        //         return
        //     }

        //     const params = {
        //         username: username,
        //     }

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

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

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

        //     clearTimeout(typingTimer);
        //     const email = $(this).val();

        //     if (email == null || email == '') {
        //         return
        //     }

        //     const params = {
        //         email: email,
        //     }

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

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


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