@extends('layouts.client')

@section('title', 'Forgot Password')

@section('content')
    <section id="forgot_password" class="animation-fade-in py-40"
        style="
  background: url({{ asset('img/bg-login.jpg') }});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
">
        <div class="w-full container grid md:grid-cols-2 md:mt-0 md:max-w-5xl xl:p-0 flex items-center">
            <div class="flex flex-col items-center flex-col justify-center h-full">
                <img src="{{ asset('img/img_forgot_password.png') }}" alt="img_forgot_password" />
            </div>
            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                <h1 class="text-center mb-0 text-2xl text-blue-700 font-bold md:text-3xl">
                    FORGOT PASSWORD
                </h1>
                <form id="emailForm" class="space-y-4 md:space-y-6" method="POST" action="{{ route('password.email') }}">
                    @csrf
                    <div>
                        <div>
                            <label for="email" class="block mb-2 text-base font-medium text-gray-900">Email
                                address</label>
                            <input name="email" value="{{ old('email') }}" required autocomplete="email" type="email"
                                id="email" autofocus
                                class="@error('email') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:outline-none focus:ring-4 focus:ring-blue-200" />

                            {{-- //HACK: Activate anti-mail checking mechanism --}}
                            @if (session('status') || $errors->first() || ($message ?? ''))
                                <span class="invalid-feedback text-green-500" role="alert">
                                    {{ __('We have emailed your password reset link.') }}
                                </span>
                            @endif

                            {{-- @error('email')
                                <span class="invalid-feedback text-red-500" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror --}}
                        </div>
                    </div>
                    <div class="text-end">
                        <button type="submit" id="emailButton"
                            class="w-full py-2 rounded-lg text-neutral-50 bg-blue-500 text-center hover:opacity-80 relative flex items-center justify-center">
                            <div class="flex">
                                <span class="me-3">Send</span>
                                <div class="flex flex-row space-x-4">
                                    <div
                                        class="w-6 h-6 rounded-full animate-spin border-4 border-solid border-neutral-50 border-t-transparent hidden">
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var emailForm = document.getElementById('emailForm');

        emailForm.addEventListener('submit', function() {
            // Get the button and spinner elements
            var emailButton = document.getElementById('emailButton');
            var spinner = emailButton.querySelector('.animate-spin');

            // Disable the button and remove the spinner animation
            emailButton.disabled = true;
            //  spinner.classList.remove('animate-spin');
            spinner.classList.remove('hidden');
        });
    });
</script>
