@extends('auth.layouts.auth-template')
@section('title', 'Forgot Password')
@section('content')
    <section>
        <div class="row">
            @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">Verify</span> Your Email</h3>
                                <p class="email-sec">Kindly enter the 4-digit unique code sent to <span>parthi@cloudi5.com</span></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">
                                        <div class="otp-box">
                                    <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                    <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                    <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">
                                    <input type="number" maxlength="1" inputmode="numeric" pattern="[0-9]*" class="otp-input">

                                        </div>

                                <div class="resend-text">
                                    Resend Code In <span>01:28</span>
                                </div>

                                <!-- <div class="resend-text">
                                    Resend Code
                                </div> -->
                                     <!-- <label for="email">Email<span class="red-text">*</span> </label>
                                    <input type="email" id="email" name="email" class="input-field"
                                        placeholder="Enter your email" value="{{ old('email') }}">
                                    @error('email')
                                        <div class="error">{{ $message }}</div>
                                    @enderror -->
                                    <button class="btn reset-password-btn show-toast" data-toast-target="#invalidOtpToast">Verify<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="otpVerifyToast" 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">
                                                    ✓
                                            </div>
                                            </div>
                                <div class="toast-right">
                                    <h6>OTP Verified</h6>
                                    <p>Your OTP has been verified successfully. You can now set a new password.</p>
                                </div>

                        </div>
                    </div>
                <div class="position-fixed top-0 start-50 translate-middle-x p-4" style="z-index: 1090">
                          <div id="invalidOtpToast" 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>Invalid OTP</h6>
                                    <p>The OTP you entered is incorrect or has expired. Please try again.</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", () => {
    const inputs = document.querySelectorAll(".otp-input");

    inputs.forEach((input, index) => {

        input.addEventListener("input", () => {
            if (input.value.length === 1 && index < inputs.length - 1) {
                inputs[index + 1].focus();
            }
        });

        input.addEventListener("keydown", (e) => {
            if (e.key === "Backspace" && input.value === "" && index > 0) {
                inputs[index - 1].focus();
            }
        });

    });
});
</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