@extends('layouts.guest')

@section('content')
    <h4 class="text-center mb-4">Reset your password</h4>

    <div class="mb-4 text-sm text-gray-600">
        {{ __('To reset your password, please enter the email address associated with your account. We\'ll send you a One-Time Password (OTP) to verify your identity and help you reset your password.') }}
    </div>

    <x-messages/>

    <form id="resetPasswordForm">
        @csrf
        <div class="mb-3">
            <x-input-label for="email" :value="__('Email Address')" />
            <x-text-input id="email" type="email" name="email" :value="old('email')" autofocus
                autocomplete="username" placeholder="Enter you Email" />
            <x-input-error :messages="$errors->get('email')"/>
        </div>

        <div class="text-center">
            <x-primary-button class="btn btn-primary btn-block">
                {{ __('Send Code') }}
            </x-primary-button>
        </div>
    </form>
@endsection
@push('scripts')
<script>
    $(document).ready(function() {
        $('#resetPasswordForm').validate({
            errorPlacement: function(error, element) {
                error.appendTo($('#' + element.attr('id') + '-error'));
            },
            submitHandler: function(form) {
                var formData = new FormData(form);
                var $form = $(form);
                var $submitButton = $form.find('.submit');

                $.ajax({
                    url: "{{ route('password.email') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    beforeSend: function () {
                        $form.css('opacity', '0.5');
                        $submitButton.data('original-text', $submitButton.text());
                        $submitButton.text('Processing...');
                        $form.find('.text-danger').remove();
                    }
                })
                .done(function (response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            showConfirmButton: true
                        }).then(() => {
                            window.location.href = "{{ route('password.reset') }}";
                        });
                    } else if (response.success === false && response.server === true) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            text: response.message,
                            showConfirmButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                    } else {

                        $.each(response.errors, function (key, messages) {
                            let $inputField = $form.find('[name="' + key + '"]');
                            if ($inputField.length > 0) {
                                $inputField.next('.text-danger').remove();
                                $.each(messages, function (index, message) {
                                    $inputField.after('<div class="text-danger">' + message + '</div>');
                                });
                            } else {
                                console.warn('Input field not found for key:', key);
                            }
                        });
                    }
                })
                .fail(function (xhr) {
                    console.error('An error occurred:', xhr);
                })
                .always(function () {
                    $form.css('opacity', '1');
                    $submitButton.text($submitButton.data('original-text'));
                });
            }
        });
    });
</script>
@endpush