@extends('layouts.master', [
    'title' => $user->name,
    'icon_back' => true,
    'url' => route('user.detail', ['id' => encrypt($user->id)]),
])

@push('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <form id="form_reset_password">
        <input type="hidden" name="user_id" id="user_id" value="{{ encrypt($user->id) }}">
        <div class="demo-card">
            <div class="demo-title">
                <h3 class="title is-thin is-5">Reset Password</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="new_password">
                                New Password <sup class="text-danger">*</sup>
                            </label>
                            <div style="position: relative;">
                                <input type="password" name="new_password" class="input" id="new_password"
                                    placeholder="New Password" autocomplete="off" style="padding-right: 40px;">

                                <i class="fa-regular fa-eye" id="toggleEyeNew"
                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
                                    onclick="togglePassword('new_password', 'toggleEyeNew')"></i>
                            </div>
                        </div>
                    </div>
                    <div class="column is-12">
                        <div class="control" style="position: relative">
                            <label class="fs-12 fw-400 text-grey" for="password_confirmation">
                                Re-type New Password
                                <sup class="text-danger">*</sup>
                            </label>
                            <div style="position: relative">
                                <input type="password" name="password_confirmation" value="" class="input"
                                    placeholder=" Re-type New Password" id="password_confirmation" autocomplete="off"
                                    style="padding-right: 40px">

                                <i class="fa-regular fa-eye" id="toggleEyeConfirm"
                                    style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer;"
                                    onclick="togglePassword('password_confirmation', 'toggleEyeConfirm')"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="columns">
            <div class="column is-12">
                <div class="demo-card" style="height: 70px">
                    <div class="columns is-centered">
                        <div class="column is-12 has-text-centered">
                            <div class="buttons is-centered">
                                <a href="{{ route('user.detail', ['id' => encrypt($user->id)]) }}" class="button h-button"
                                    style="width: 110px">
                                    <span>@lang('app.cancel')</span>
                                </a>
                                <button type="submit" form="form_reset_password" id="btn_reset_password"
                                    class="button h-button is-warning" style="width: 110px">
                                    <span>@lang('app.save')</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>

        <script>
            function submitResetPassword() {
                $('#btn_reset_password').removeClass('is-loading')

                $("#form_reset_password").validate({
                    rules: {
                        new_password: {
                            required: true,
                            minlength: 6
                        },
                        password_confirmation: {
                            required: true,
                            equalTo: "#new_password"
                        }
                    },
                    messages: {
                        new_password: {
                            required: "New password is required.",
                            minlength: "Password must be at least 6 characters long."
                        },
                        password_confirmation: {
                            required: "Please confirm your new password.",
                            equalTo: "Passwords do not match."
                        }
                    },
                    errorClass: 'invalid-feedback help text-danger',
                    errorElement: 'div',
                    errorPlacement: function(error, element) {
                        error.insertAfter(element);
                    },
                    highlight: function(element) {
                        $(element).addClass('is-danger')

                        if ($(element).attr('id') === 'new_password') {
                            $('#toggleEyeNew').css('top', '30%');
                        }

                        if ($(element).attr('id') === 'password_confirmation') {
                            $('#toggleEyeConfirm').css('top', '30%');
                        }
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('is-danger');

                        if ($(element).attr('id') === 'new_password') {
                            $('#toggleEyeNew').css('top', '50%');
                        }

                        if ($(element).attr('id') === 'password_confirmation') {
                            $('#toggleEyeConfirm').css('top', '50%');
                        }
                    },
                    submitHandler: function(form) {
                        $('#btn_reset_password').addClass('is-loading')

                        let formData = new FormData(form);

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

                                if (res.status) {
                                    $("#btn_reset_password").prop('disabled', false).removeClass(
                                        'is-loading')
                                    if (res.status) {
                                        showNotification('primary', 'Success', res.message)
                                        setTimeout(() => {
                                            window.location.href = res.redirect_url
                                        }, 1000);
                                    } else {
                                        showNotification('danger', 'Failed',
                                            'An error occurred while updating the status.')
                                        $("#btn_reset_password").prop('disabled', false).removeClass(
                                            'is-loading')
                                    }

                                } else {
                                    $("#btn_reset_password").prop('disabled', false).removeClass(
                                        'is-loading')
                                }

                            },
                            error: function(xhr, status, error) {
                                $("#btn_reset_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 text-danger">${errorMessage}</span>`
                                                );
                                            }
                                        }
                                    }
                                } else {
                                    showNotification('danger', 'Failed',
                                        ' An unexpected error occurred.Please try again.')
                                }
                            }
                        });
                    }
                });
            }

            var typingTimer;
            const typingDelay = 1000

            $(document).on('keyup', '#current_password', function() {
                clearTimeout(typingTimer);
                $('#current_password-error').remove();
                $('#current_password').removeClass('is-danger');
                $('#btn_reset_password').prop('disabled', false);

                const value = $(this).val().trim();

                if (value === '' || value == null) return

                const id = '{{ Auth::id() }}';

                const params = {
                    id: id,
                    current_password: value
                };

                typingTimer = setTimeout(() => {
                    $.ajax({
                        url: '{{ route('password.check-current-password') }}',
                        data: params,
                        success: (res) => {
                            if (!res.status) {
                                $('#current_password').addClass('is-danger').after(
                                    '<span id="current_password-error" class="help text-danger">Current Password is wrong</span>'
                                );
                                $('#btn_reset_password').prop('disabled', true);
                            } else {
                                $('#current_password').removeClass('is-danger');
                                $('#current_password-error').remove();
                                $('#btn_reset_password').prop('disabled', false);
                            }
                        }
                    });
                }, typingDelay);
            });

            $(document).ready(function() {
                submitResetPassword();
            });
        </script>
    @endpush
@endsection