@extends('auth.layouts.auth-template')
@section('title', 'Forgot Password')
@section('content')
    <section>
        <div class="row forgot-page">
            @include('auth.left-banner')
            <div class="col-xl-5 col-lg-5 col-md-6 col-sm-12 p-0">
                <div class="login-form-section">
                    <div class="row justify-content-center">
                        <div class="col-md-12 col-lg-8 col-sm-10">
                            <div class="login-form-title text-center">
                                <img src="{{ asset('assets/template/images/logo/main-logo.jpg') }}" alt="" />
                                <h3 class="forgot-title"><span class="blue-text">Forgot</span> Password?</h3>
                                <p>Enter your registered email address. We'll send you a link to reset your password</p>
                            </div>

                            @if ($errors->has('errors'))
                                <div class="alert alert-danger">
                                    {{ $errors->first('errors') }}
                                </div>
                            @endif
                            @if (Session::has('message'))
                                <div class="alert alert-success">
                                    {{ Session::get('message') }}
                                </div>
                            @endif
                            <form action="{{ route('backend.auth.forgot-password.send') }}" method="POST" id="reset-password">
                                @csrf
                                <div class="row field-container">
                                     <label for="email">Email<span class="red-text">*</span> </label>
                                    <input type="email" id="email" name="email" class="input-field"
                                        placeholder="Enter Your Mail" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="error">{{ $message }}</div>
                                    @enderror
                                    <button class="btn reset-password-btn show-toast"  data-toast-target="#emailverifyToast">Send Reset Link <i class="fas fa-arrow-right"></i></button>
                                     <a href="{{ route('backend.auth.index') }}"  class="account-desc"><i class="fas fa-arrow-left"></i>Back to log in</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                          <div id="emailverifyToast" class="toast login-success-toast" role="alert" aria-live="assertive"
                            aria-atomic="true">

                            <div class="toast-body d-flex align-items-center gap-3">
                           <div class="toast-left">
                                            <div class="check-circle">
                                                    <i class="fa-solid fa-xmark cross-fa"></i>
                                            </div>
                                            </div>
                                <div class="toast-right">
                                    <h6>Email Verification Failed</h6>
                                    <p>We couldn’t verify your email address. The verification link may be invalid or has expired.</p>
                            </div>

                        </div>
                    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            // Initialize form validation
            $("#reset-password").validate({
                rules: {
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    email: {
                        required: "Please enter your email address.",
                        email: "Please enter a valid email address."
                    }
                },
                submitHandler: function(form) {
                    form.submit(); // Submit the form if validation passes
                }
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            document.body.addEventListener('click', function(e) {
                const btn = e.target.closest('.show-toast');
                if (!btn) return;

                const toastSelector = btn.getAttribute('data-toast-target');
                const toastEl = document.querySelector(toastSelector);

                if (!toastEl) return;

                const toast = new bootstrap.Toast(toastEl, {
                    delay: 3000,
                    autohide: true
                });

                toast.show();
            });

        });
    </script>
@endsection