@extends('layouts.auth')

@section('page-title', 'Forgot Password - Prolex Legal System')

@section('content')
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- Animated Background -->
<div class="bg-scene">
    <canvas id="bgCanvas"></canvas>
    <div class="orb orb-a"></div>
    <div class="orb orb-b"></div>
    <div class="orb orb-c"></div>
    <div class="band band-1"></div>
    <div class="band band-2"></div>
</div>

<!-- Floating legal icons -->
<div class="fi fi-1"><i class="fas fa-balance-scale"></i></div>
<div class="fi fi-2"><i class="fas fa-gavel"></i></div>
<div class="fi fi-3"><i class="fas fa-scroll"></i></div>
<div class="fi fi-4"><i class="fas fa-landmark"></i></div>
<div class="fi fi-5"><i class="fas fa-file-contract"></i></div>

<!-- Card -->
<div class="stage">
    <div class="card">

        <!-- ── LOGO BLOCK ── -->
        <div class="logo-block">
            <div class="logo-ring">
                <img src="{{ asset('prolexlogo2.png') }}" alt="Prolex Logo">
            </div>
            <h1 class="brand-name">PROLEX</h1>
            <p class="brand-tag">Law Firm Management System</p>
        </div>

        <!-- ── DIVIDER ── -->
        <div class="divider"><span>Reset Password</span></div>

        <!-- ── PAGE HEAD ── -->
        <div class="page-head">
            <div class="head-icon">
                <i class="fas fa-unlock-alt"></i>
            </div>
            <p class="head-sub">Enter your email to receive a secure reset link</p>
        </div>

        <!-- ── ALERTS ── -->
        @if(session('status'))
        <div class="alert a-ok">
            <i class="fas fa-check-circle"></i>
            <div>
                <strong>Reset Link Sent!</strong>
                <span>{{ session('status') }}</span>
                <span class="a-note">Check your inbox and spam folder.</span>
            </div>
        </div>
        @endif

        @if($errors->any())
        <div class="alert a-err">
            <i class="fas fa-exclamation-circle"></i>
            <div>
                <strong>Request Failed</strong>
                @foreach($errors->all() as $error)
                    <span>{{ $error }}</span>
                @endforeach
            </div>
        </div>
        @endif

        <!-- ── FORM ── -->
        <form method="POST" action="{{ route('password.email') }}" id="forgotForm">
            @csrf

            <!-- Email -->
            <div class="fld">
                <i class="fas fa-envelope fld-ico"></i>
                <input type="email" id="email" name="email"
                       value="{{ old('email') }}"
                       placeholder=" " autocomplete="email"
                       required autofocus>
                <label for="email">Email Address</label>
                <span class="fld-valid" id="emailValid"><i class="fas fa-check"></i></span>
            </div>

            <!-- Domain chips -->
            <div class="chips-wrap" id="chipsWrap">
                <button type="button" class="chip" data-domain="@gmail.com">@gmail.com</button>
                <button type="button" class="chip" data-domain="@yahoo.com">@yahoo.com</button>
                <button type="button" class="chip" data-domain="@outlook.com">@outlook.com</button>
                <button type="button" class="chip" data-domain="@hotmail.com">@hotmail.com</button>
            </div>

            <!-- Security note -->
            <div class="sec-note">
                <i class="fas fa-shield-alt"></i>
                <span>A secure link will be sent to your email. It expires in <strong>60 minutes</strong>.</span>
            </div>

            <!-- Submit -->
            <button type="submit" class="btn-go" id="submitBtn">
                <i class="fas fa-paper-plane btn-pre"></i>
                <span class="btn-txt">Send Reset Link</span>
                <span class="btn-arr"><i class="fas fa-arrow-right"></i></span>
                <div class="sheen"></div>
            </button>
        </form>

        <!-- ── BACK LINK ── -->
        <div class="back-row">
            <a href="{{ route('login') }}" class="back-link">
                <i class="fas fa-arrow-left"></i> Back to Login
            </a>
        </div>

        <!-- ── FOOTER ── -->
        <div class="foot">
            <span class="ssl"><i class="fas fa-shield-alt"></i> 256-bit SSL Encrypted</span>
            <div class="flinks">
                <a href="{{ url('/privacy') }}">Privacy Policy</a>
                <span>·</span>
                <a href="{{ url('/terms') }}">Terms of Service</a>
            </div>
        </div>

    </div>
</div>

@push('styles')
<style>
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --sky:      #87CEEB;
    --sky-m:    #55b5de;
    --sky-d:    #2a8bbf;
    --sky-l:    #c8e9f7;
    --sky-p:    #eaf6fd;
    --white:    #ffffff;
    --ink:      #163348;
    --ink-m:    #3a6a8a;
    --ink-l:    #7aafca;
    --green:    #1ea069;
    --red:      #c9342c;
    --bd:       rgba(42,139,191,0.22);
    --r:        16px;
}

html, body { height:100%; font-family:'DM Sans',sans-serif; background:var(--sky-p); overflow:hidden; }

/* ════ BACKGROUND ════ */
.bg-scene { position:fixed; inset:0; z-index:0; overflow:hidden; }
#bgCanvas { position:absolute; inset:0; width:100%; height:100%; }

.orb { position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; animation:orb-drift 12s ease-in-out infinite; }
.orb-a { width:600px;height:600px;top:-160px;left:-160px; background:radial-gradient(circle,rgba(135,206,235,0.45) 0%,transparent 68%); animation-delay:0s; }
.orb-b { width:480px;height:480px;bottom:-100px;right:-100px; background:radial-gradient(circle,rgba(42,139,191,0.28) 0%,transparent 68%); animation-delay:-5s; }
.orb-c { width:380px;height:380px;top:38%;right:18%; background:radial-gradient(circle,rgba(200,233,247,0.5) 0%,transparent 68%); animation-delay:-9s; }
@keyframes orb-drift { 0%,100%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.18) translate(18px,-22px)} }

.band { position:absolute; width:240%; left:-70%; border-radius:42%; animation:band-roll linear infinite; }
.band-1 { height:280px;bottom:-100px;background:rgba(135,206,235,0.18);animation-duration:20s; }
.band-2 { height:240px;bottom:-120px;background:rgba(42,139,191,0.10);animation-duration:30s;animation-direction:reverse; }
@keyframes band-roll { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* ════ FLOATING ICONS ════ */
.fi { position:fixed;z-index:1;pointer-events:none;color:rgba(42,139,191,0.08);animation:fi-drift ease-in-out infinite; }
.fi-1 { top:7%;left:4%;font-size:4.5rem;animation-duration:20s;animation-delay:0s; }
.fi-2 { top:68%;left:5%;font-size:6rem;animation-duration:25s;animation-delay:-7s; }
.fi-3 { top:9%;right:5%;font-size:5rem;animation-duration:22s;animation-delay:-12s; }
.fi-4 { bottom:9%;right:6%;font-size:7rem;animation-duration:28s;animation-delay:-4s; }
.fi-5 { top:42%;left:50%;font-size:3.5rem;animation-duration:18s;animation-delay:-17s; }
@keyframes fi-drift {
    0%,100%{transform:translate(0,0) rotate(0deg)}
    30%{transform:translate(12px,-18px) rotate(4deg)}
    65%{transform:translate(-8px,-28px) rotate(-3deg)}
}

/* ════ STAGE + CARD ════ */
.stage {
    position:fixed; inset:0; z-index:10;
    display:flex; align-items:center; justify-content:center;
    padding:1.25rem; overflow-y:auto;
}

.card {
    width:100%; max-width:430px;
    background:rgba(255,255,255,0.78);
    border:1px solid rgba(255,255,255,0.9);
    border-radius:26px;
    padding:2.5rem 2.4rem 2rem;
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    box-shadow:
        0 2px 0 rgba(255,255,255,0.95) inset,
        0 20px 60px rgba(42,139,191,0.18),
        0 6px 20px rgba(0,0,0,0.06);
    animation:card-in 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes card-in { from{opacity:0;transform:translateY(26px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }

/* ════ LOGO BLOCK ════ */
.logo-block {
    display:flex; flex-direction:column; align-items:center;
    margin-bottom:1.4rem;
    animation:logo-in 0.6s ease 0.1s both;
}
@keyframes logo-in { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }

.logo-ring {
    position:relative;
    width:clamp(132px, 28vw, 188px);
    aspect-ratio:1/1;
    border-radius:50%;
    display:grid;
    place-items:center;
    padding:10px;
    background:conic-gradient(from 160deg, rgba(42,139,191,0.2), rgba(135,206,235,0.95), rgba(42,139,191,0.2));
    box-shadow:
        0 14px 30px rgba(42,139,191,0.28),
        inset 0 0 0 1px rgba(255,255,255,0.85);
    margin-bottom:0.9rem;
    animation:ring-spin 14s linear infinite;
}
.logo-ring::before {
    content:'';
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(234,246,253,0.9));
    box-shadow:inset 0 0 0 1px rgba(42,139,191,0.14);
}
.logo-ring::after {
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:1px solid rgba(42,139,191,0.22);
    animation:ring-pulse 2.8s ease-in-out infinite;
}
.logo-ring img {
    position:relative;
    z-index:1;
    width:74%;
    height:74%;
    object-fit:contain;
    border-radius:50%;
    padding:10px;
    background:rgba(255,255,255,0.92);
    box-shadow:0 8px 18px rgba(42,139,191,0.2);
}
@keyframes ring-spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes ring-pulse {
    0%, 100% { transform:scale(1); opacity:0.5; }
    50% { transform:scale(1.06); opacity:0.95; }
}

.brand-name {
    font-family:'Cinzel',serif; font-size:2rem; font-weight:700;
    letter-spacing:0.12em; line-height:1; margin-bottom:0.35rem;
    background:linear-gradient(135deg,var(--sky-d) 0%,var(--sky-m) 50%,var(--sky) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-tag { font-size:0.8rem; color:var(--ink-l); font-weight:500; letter-spacing:0.05em; text-transform:uppercase; }

/* ════ DIVIDER ════ */
.divider { display:flex; align-items:center; gap:0.85rem; margin-bottom:1.25rem; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--bd),transparent); }
.divider span { font-size:0.79rem; font-weight:700; color:var(--ink-m); letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }

/* ════ PAGE HEAD ════ */
.page-head { display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin-bottom:1.6rem; }

.head-icon {
    width:52px; height:52px; border-radius:50%;
    background:linear-gradient(135deg,var(--sky-l),var(--sky));
    display:flex; align-items:center; justify-content:center;
    font-size:1.35rem; color:var(--white);
    box-shadow:0 4px 16px rgba(42,139,191,0.28);
    animation:icon-bounce 2.5s ease-in-out infinite;
}
@keyframes icon-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.head-sub { font-size:0.88rem; color:var(--ink-m); text-align:center; font-weight:400; line-height:1.5; }

/* ════ ALERTS ════ */
.alert { display:flex; align-items:flex-start; gap:0.7rem; padding:0.9rem 1rem; border-radius:12px; font-size:0.86rem; margin-bottom:1.3rem; animation:alert-in 0.3s ease; line-height:1.55; }
@keyframes alert-in { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }
.alert>i { font-size:1.05rem; flex-shrink:0; margin-top:2px; }
.alert>div { display:flex; flex-direction:column; gap:0.2rem; }
.alert>div strong { font-size:0.84rem; font-weight:700; }
.a-note { font-size:0.8rem; font-weight:600; color:var(--green) !important; }

.a-ok { background:rgba(30,160,105,0.09); border:1px solid rgba(30,160,105,0.28); color:#156644; }
.a-ok>i { color:var(--green); }
.a-err { background:rgba(201,52,44,0.08); border:1px solid rgba(201,52,44,0.25); color:#8b1d19; }
.a-err>i { color:var(--red); }

/* ════ FIELDS ════ */
.fld { position:relative; margin-bottom:1.3rem; animation:fld-in 0.45s ease 0.12s both; }
@keyframes fld-in { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }

.fld-ico { position:absolute;left:1rem;top:50%;transform:translateY(-50%); color:var(--ink-l);font-size:0.88rem;pointer-events:none;z-index:2;transition:color 0.25s; }

.fld input {
    display:block;
    width:100%;
    min-width:0;
    max-width:100%;
    padding:1rem 2.8rem 1rem 2.8rem;
    background:rgba(255,255,255,0.75);
    border:1.5px solid var(--bd); border-radius:13px;
    font-size:0.96rem; font-family:'DM Sans',sans-serif; color:var(--ink);
    transition:all 0.28s; -webkit-appearance:none;
}
.fld input::placeholder { color:transparent; }
.fld input:focus {
    outline:none;
    background:var(--white);
    border-color:var(--sky-m);
    box-shadow:0 0 0 4px rgba(135,206,235,0.22);
    color:var(--ink);
    opacity:1;
    -webkit-text-fill-color:var(--ink);
}
.fld input:not(:placeholder-shown) {
    color:var(--ink);
    opacity:1;
    -webkit-text-fill-color:var(--ink);
}
.fld input:focus ~ .fld-ico,
.fld input:not(:placeholder-shown) ~ .fld-ico { color:var(--sky-d); }

.fld label {
    position:absolute; left:2.8rem; top:50%; transform:translateY(-50%);
    font-size:0.92rem; color:var(--ink-l); pointer-events:none;
    transition:all 0.25s cubic-bezier(0.4,0,0.2,1); font-weight:400;
}
.fld input:focus ~ label,
.fld input:not(:placeholder-shown) ~ label {
    top:-0.55rem; font-size:0.71rem; left:0.9rem;
    color:var(--sky-d); font-weight:700; letter-spacing:0.04em;
    background:var(--white); padding:0 0.35rem; border-radius:4px;
}

.fld-valid {
    position:absolute; right:1rem; top:50%; transform:translateY(-50%);
    color:var(--green); font-size:0.9rem; opacity:0;
    transition:opacity 0.25s; z-index:2;
}
.fld-valid.show { opacity:1; }

/* ════ DOMAIN CHIPS ════ */
.chips-wrap {
    display:flex; flex-wrap:wrap; gap:0.45rem;
    margin-bottom:1.25rem;
    animation:fld-in 0.45s ease 0.2s both;
}
.chip {
    padding:0.38rem 0.85rem;
    background:rgba(255,255,255,0.8);
    border:1px solid var(--bd);
    border-radius:20px;
    font-size:0.8rem; color:var(--ink-m); font-family:'DM Sans',sans-serif;
    cursor:pointer; transition:all 0.22s; font-weight:500;
}
.chip:hover { background:var(--sky-d); color:var(--white); border-color:var(--sky-d); transform:translateY(-1px); }

/* ════ SECURITY NOTE ════ */
.sec-note {
    display:flex; align-items:flex-start; gap:0.6rem;
    padding:0.85rem 1rem;
    background:rgba(135,206,235,0.12);
    border:1px solid rgba(135,206,235,0.3);
    border-radius:11px;
    font-size:0.84rem; color:var(--ink-m);
    margin-bottom:1.4rem;
    animation:fld-in 0.45s ease 0.28s both;
    line-height:1.5;
}
.sec-note>i { color:var(--sky-d); font-size:0.95rem; flex-shrink:0; margin-top:1px; }
.sec-note strong { color:var(--sky-d); }

/* ════ SUBMIT BUTTON ════ */
.btn-go {
    width:100%; position:relative; overflow:hidden;
    padding:1.05rem 2rem;
    background:linear-gradient(110deg,var(--sky-d) 0%,var(--sky-m) 50%,var(--sky) 100%);
    background-size:220% 100%;
    color:var(--white); border:none; border-radius:14px;
    font-size:1rem; font-weight:700; font-family:'DM Sans',sans-serif;
    letter-spacing:0.04em; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:0.65rem;
    transition:all 0.35s ease;
    box-shadow:0 5px 22px rgba(42,139,191,0.38), 0 1px 0 rgba(255,255,255,0.25) inset;
    animation:btn-in 0.45s ease 0.32s both;
}
@keyframes btn-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.btn-go:hover:not(:disabled) { background-position:100% 0; transform:translateY(-2px); box-shadow:0 10px 34px rgba(42,139,191,0.45),0 1px 0 rgba(255,255,255,0.3) inset; }
.btn-go:active:not(:disabled) { transform:translateY(0); }
.btn-go:disabled { opacity:0.55; cursor:not-allowed; }
.btn-arr { display:flex; align-items:center; transition:transform 0.28s; }
.btn-go:hover:not(:disabled) .btn-arr { transform:translateX(5px); }

.sheen {
    position:absolute; top:0; left:-80%; width:50%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
    transform:skewX(-18deg);
    animation:sheen-run 3.8s ease-in-out infinite;
}
@keyframes sheen-run { 0%{left:-80%} 26%{left:130%} 100%{left:130%} }

/* ════ BACK LINK ════ */
.back-row { display:flex; justify-content:center; margin-top:1.25rem; }
.back-link {
    display:inline-flex; align-items:center; gap:0.45rem;
    font-size:0.87rem; font-weight:600; color:var(--sky-d);
    text-decoration:none; padding:0.45rem 1rem;
    border-radius:8px; transition:all 0.22s;
}
.back-link:hover { background:rgba(135,206,235,0.12); color:var(--ink); }
.back-link i { transition:transform 0.22s; }
.back-link:hover i { transform:translateX(-3px); }

/* ════ FOOTER ════ */
.foot {
    margin-top:1.4rem; padding-top:1.1rem;
    border-top:1px solid rgba(135,206,235,0.3);
    display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.ssl { font-size:0.8rem; color:var(--green); font-weight:600; display:flex; align-items:center; gap:0.4rem; }
.flinks { display:flex; align-items:center; gap:0.55rem; font-size:0.78rem; color:var(--ink-l); }
.flinks a { color:var(--ink-m); text-decoration:none; font-weight:500; transition:color 0.2s; }
.flinks a:hover { color:var(--sky-d); }

/* ════ RESPONSIVE ════ */
@media (max-height:700px) {
    .stage { align-items:flex-start; }
    .card { margin:auto; }
    .logo-ring { width:130px; }
    .brand-name { font-size:1.65rem; }
    .head-icon { width:42px; height:42px; font-size:1.1rem; }
}
@media (max-width:480px) {
    .card { padding:2rem 1.5rem 1.6rem; border-radius:20px; }
    html,body { overflow:auto; }
    .stage { position:relative; inset:unset; min-height:100vh; }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    /* ── Canvas ── */
    const canvas = document.getElementById('bgCanvas');
    const ctx    = canvas.getContext('2d');
    let W, H, nodes = [], particles = [];

    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
    resize();
    window.addEventListener('resize', () => { resize(); init(); });

    class Particle {
        constructor() { this.reset(true); }
        reset(first = false) {
            this.x = Math.random() * W; this.y = first ? Math.random() * H : H + 6;
            this.r = Math.random() * 2 + 0.4; this.speed = Math.random() * 0.38 + 0.1;
            this.alpha = Math.random() * 0.4 + 0.07; this.drift = (Math.random() - 0.5) * 0.28;
        }
        step() { this.y -= this.speed; this.x += this.drift; if (this.y < -6) this.reset(); }
        draw() { ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.fillStyle=`rgba(42,139,191,${this.alpha})`; ctx.fill(); }
    }

    class Node {
        constructor() {
            this.x=Math.random()*W; this.y=Math.random()*H;
            this.vx=(Math.random()-0.5)*0.28; this.vy=(Math.random()-0.5)*0.28;
            this.r=Math.random()*2+0.8;
        }
        step() {
            this.x+=this.vx; this.y+=this.vy;
            if(this.x<0||this.x>W) this.vx*=-1;
            if(this.y<0||this.y>H) this.vy*=-1;
        }
        draw() { ctx.beginPath(); ctx.arc(this.x,this.y,this.r,0,Math.PI*2); ctx.fillStyle='rgba(42,139,191,0.38)'; ctx.fill(); }
    }

    function init() {
        nodes     = Array.from({length:52}, ()=>new Node());
        particles = Array.from({length:110},()=>new Particle());
    }

    function drawWeb() {
        const maxD = 145;
        for(let i=0;i<nodes.length;i++) {
            for(let j=i+1;j<nodes.length;j++) {
                const dx=nodes[i].x-nodes[j].x, dy=nodes[i].y-nodes[j].y;
                const d=Math.sqrt(dx*dx+dy*dy);
                if(d<maxD) {
                    ctx.beginPath(); ctx.moveTo(nodes[i].x,nodes[i].y); ctx.lineTo(nodes[j].x,nodes[j].y);
                    ctx.strokeStyle=`rgba(42,139,191,${(1-d/maxD)*0.1})`; ctx.lineWidth=0.65; ctx.stroke();
                }
            }
        }
    }

    function loop() {
        ctx.clearRect(0,0,W,H);
        const bg = ctx.createLinearGradient(0,0,W*0.55,H);
        bg.addColorStop(0,'#b8dff5'); bg.addColorStop(0.35,'#d4ecf9');
        bg.addColorStop(0.7,'#eaf6fd'); bg.addColorStop(1,'#f8fcff');
        ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);
        nodes.forEach(n=>n.step()); drawWeb(); nodes.forEach(n=>n.draw());
        particles.forEach(p=>{p.step();p.draw();});
        requestAnimationFrame(loop);
    }

    init(); loop();

    /* ── Email validation & chips ── */
    const emailInput = document.getElementById('email');
    const emailValid = document.getElementById('emailValid');
    const chipsWrap  = document.getElementById('chipsWrap');
    const submitBtn  = document.getElementById('submitBtn');

    function isValidEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }

    function checkEmail() {
        const valid = isValidEmail(emailInput.value);
        emailValid.classList.toggle('show', valid);
        // Hide chips once @ is typed
        chipsWrap.style.display = emailInput.value.includes('@') ? 'none' : 'flex';
    }

    emailInput.addEventListener('input', checkEmail);
    checkEmail();

    document.querySelectorAll('.chip').forEach(chip => {
        chip.addEventListener('click', function () {
            const domain = this.dataset.domain;
            const val = emailInput.value;
            emailInput.value = val.includes('@') ? val.split('@')[0] + domain : val + domain;
            emailInput.focus();
            checkEmail();
        });
    });

    /* ── Submit state ── */
    const form = document.getElementById('forgotForm');
    if (form && submitBtn) {
        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            submitBtn.querySelector('.btn-txt').textContent = 'Sending…';
            submitBtn.querySelector('.btn-arr i').className = 'fas fa-spinner fa-spin';
            setTimeout(() => {
                submitBtn.disabled = false;
                submitBtn.querySelector('.btn-txt').textContent = 'Send Reset Link';
                submitBtn.querySelector('.btn-arr i').className = 'fas fa-arrow-right';
            }, 5000);
        });
    }
});
</script>
@endpush
@endsection