@php
    $title = $data->type == 'employee' ? $data->user->name : $data->category_document;
@endphp

<div id="modal_show_password_document" class="modal h-modal">
    <div class="modal-background"></div>
    <form id="form_show_password">
        <input type="hidden" name="id" value="{{ $data->id }}">
        <div class="modal-content">
            <div class="modal-card">
                <div class="modal-card-head">
                    <div class="fs-14 fw-700">Show Password Document</div>
                </div>
                <div class="modal-card-body pt-3">
                    <div class="inner-content">
                        {{-- <div class="field">
                            <label class="fs-12 fw-500" style="color: black !important">Please confirm your password to view this content</label>
                            <div class="control">
                                <input type="password" name="password" id="password" class="input"
                                    placeholder="Enter your password">
                            </div>
                        </div> --}}
                        <div class="field">
                            <label>@lang('app.password')</label>

                            <div class="control">
                                <input id="password2" name="password"  class="input" type="password"
                                       placeholder="Enter your password" autocomplete="current-password">
                                
                                <div class="auth-control">
                                    <i id="toggleEye" class="fas fa-eye" style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;" onclick="togglePasswordHuro()"></i>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label class="fs-12 fw-500" style="color: black !important">Password Document</label>
                            <div class="control">
                                <p id="show_password">**********</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-card-foot is-end" style="border: none !important">
                    <a class="button h-button h-modal-close">@lang('app.cancel')</a>
                    <button type="submit" form="form_show_password" id="btn_show_password"
                        class="button h-button is-warning">@lang('app.submit')</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    function togglePasswordHuro() {
        const pw = document.getElementById("password2");
        const icon = document.getElementById("toggleEye");

        if (pw.type === "password") {
            pw.type = "text";
            icon.classList.remove("fa-eye");
            icon.classList.add("fa-eye-slash");
        } else {
            pw.type = "password";
            icon.classList.remove("fa-eye-slash");
            icon.classList.add("fa-eye");
        }
    }

    function showPassword() {
        $('#btn_show_password').removeClass('is-loading')

        $("#form_show_password").validate({
            rules: {
                password: {
                    required: true
                },
            },
            messages: {
                password: {
                    required: "The password field is required."
                }
            },
            errorClass: 'invalid-feedback help text-danger',
            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_show_password').addClass('is-loading')

                let formData = new FormData(form);

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

                        if (res.status) {
                            $("#btn_show_password").prop('disabled', false).removeClass(
                                'is-loading')
                            $('#show_password').text(res.password)
                        } else {
                            $("#btn_show_password").prop('disabled', false).removeClass(
                                'is-loading')
                            showNotification('danger', 'Failed', res.message)
                        }

                    },
                    error: function(xhr, status, error) {
                        $("#btn_show_password").prop('disabled', false).removeClass(
                            'is-loading')
                        // 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 help text-danger">${errorMessage}</span>`
                                        );
                                    }
                                }
                            }
                        } else {
                            showNotification('danger', 'Failed',
                                'System busy. Please try again.')
                        }
                    }
                });
            }
        });
    }

    $(document).ready(function() {
        $('#modal_show_password_document .modal-background').click(function(event) {
            event.stopPropagation();
        });

        $('.h-modal-close').click(function() {
            $('#modal_show_password_document').removeClass('is-active');
            $("input[name='name']").val('')
            $('#name-error').remove()
            $("#btn_show_password")
                .removeClass('is-loading')
                .prop('disabled', false);
        });

        showPassword()
    });
</script>