@extends('layouts.client')

@section('title', 'Email Confirmation')

@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">
                   Email Confirmation
                </h1>
                <form id="emailForm" class="space-y-4 md:space-y-6" method="POST" action="{{ route('verification.resend') }}">
                    @csrf
                   @if(session()->has('confirmation_code'))
                        <input type="hidden" id="confirmation_code" name="confirmation_code" value="{{ session('confirmation_code') }}">
                    @endif
                    <div>
                        <div>
                            @if (session('resent'))
                                <div class="invalid-feedback text-green-500" role="alert">
                                    {{ __('A fresh verification link has been sent to your email address.') }}
                                </div>
                            @endif
                            <span class="" role="alert">
                                {{ __('Before proceeding, please check your email for a verification link.') }}
                                {{ __('If you did not receive the email') }}.
                            </span>
                        </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">{{ __('Click here to request another') }}</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>

