@extends('webUser.layouts.auth')
@section('contents')
<!-- Right Side -->
<div class="w-full lg:w-1/2 flex  justify-center items-center px-3 sm:px-20 xl:px-36 pb-5 lg:pb-0">
    <div class="w-full rounded-xl h-[80%] relative card-shadow bg-white p-5 px-8 py-10">
        <img src="{{asset('user/images/smallCircle.svg')}}" alt="" class="w-16 h-16 absolute -top-4 -right-4" />
        <img src="{{asset('user/images/forgetLock.svg')}}" alt="" class="mb-5" />

        <h2 class="text-3xl font-bold text-gray-800 mb-1">Forgot password? </h2>
        <p class="text-sm text-gray-500 mb-6">
            Enter the email address that is associated
            </br>
            with your Bisnal account.
        </p>
        <form id="forgotForm">
            <!-- Email Field -->
            <div class="mb-5">
                <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email address</label>
                <div class="flex items-center border border-[#C4D0D0] rounded-xl px-3 py-3">
                    <img src="{{asset('user/images/email.svg')}}" alt="" class="w-5 h-5 mr-2" />
                    <input name="email" type="email" id="email" placeholder="Enter Email"
                        class="w-full focus:outline-none text-sm" />
                </div>
                <span class="text-red-500 text-sm mb-4 validations" id="email-error"></span>
            </div>

            <!-- Login Button -->
            <button type="submit" id="forgotSubmit"
                class="w-full btn-shadow bg-[#009696] mt-10 hover:bg-teal-600 text-white py-3 rounded-lg font-semibold flex justify-center items-center gap-2">
                Submit
                <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />
            </button>

            <div class="flex items-center justify-center gap-1 pt-20 font-semibold">
                <img src="{{asset('user/images/grayArrow.svg')}}" alt="Main Logo" class="mt-1" />
                <p class="text-[#748383] text-sm">Back to</p>
                <a href="{{route('user.login')}}" class="text-sm underline text-[#009696]">Login</a>
            </div>
        </form>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#forgotForm').on('submit', function (e) {
            e.preventDefault(); 
            $(".validations").text('');
            const formData = $(this).serialize();
            $.ajax({
                url: "{{ route('user.forgot-post') }}", 
                method: "POST",
                data: formData,
                beforeSend: function() {
                  $('#forgotSubmit').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i>');
                },
                headers: {
                  'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                  $('#forgotSubmit').prop('disabled', false).html(`Submit <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                  window.location.href = response.data.redirect_url || location.href;
                },
                error: function (xhr) {
                  $('#forgotSubmit').prop('disabled', false).html(`Submit <img src="{{asset('user/images/Arrow - Right.svg')}}" alt="Show" class="w-5 h-5" />`);
                  if (xhr.status === 422) {
                    var errors = xhr.responseJSON.error;
                    var errorMessages = '';
                    $.each(errors, function(key, value) {
                        errorMessages = value[0];
                        $('#' + key + '-error').html(errorMessages);
                    });
                    // toastr.warning("Validation error");
                  } else{
                    toastr.error(xhr.responseJSON.message);
                  }
                }
            });
        });
    });
</script>
@endsection