@extends('layouts.auth')

@section('page-title', 'Verify OTP - 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>Verify OTP</span></div>

        <!-- ── PAGE HEAD ── -->
        <div class="page-head">
            <div class="head-icon">
                <i class="fas fa-mobile-alt"></i>
            </div>
            <p class="head-sub">Enter the 6-digit code sent to your email</p>
        </div>

        <!-- ── EMAIL BADGE ── -->
        <div class="email-badge">
            <i class="fas fa-envelope"></i>
            <span>{{ $email }}</span>
        </div>

        <!-- ── ALERTS ── -->
        @if(session('message'))
        <div class="alert a-info">
            <i class="fas fa-info-circle"></i>
            <div>
                <strong>Information</strong>
                <span>{{ session('message') }}</span>
            </div>
        </div>
        @endif

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

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

            <!-- OTP Inputs -->
            <div class="otp-wrap">
                <div class="otp-inputs" id="otpInputs">
                    @for($i = 0; $i < 6; $i++)
                        <input type="text" class="otp-box" maxlength="1"
                               data-index="{{ $i }}" inputmode="numeric"
                               pattern="[0-9]*" autocomplete="off">
                    @endfor
                </div>
                <input type="hidden" id="otpHidden" name="otp" value="">
            </div>

            <!-- Timer -->
            <div class="timer-row">
                <div class="timer-badge" id="timerBadge">
                    <i class="fas fa-clock"></i>
                    <span id="timerDisplay">10:00</span>
                </div>
            </div>

            <!-- Resend -->
            <div class="resend-row">
                <span class="resend-label">Didn't receive it?</span>
                <a href="#" id="resendBtn" class="resend-link disabled">
                    <i class="fas fa-redo"></i> Resend OTP
                    <span id="resendCount">(60s)</span>
                </a>
            </div>

            <!-- Submit -->
            <button type="submit" class="btn-go" id="submitBtn" disabled>
                <i class="fas fa-check-circle btn-pre"></i>
                <span class="btn-txt">Verify OTP</span>
                <span class="btn-arr"><i class="fas fa-arrow-right"></i></span>
                <div class="sheen"></div>
            </button>
        </form>

        <!-- ── NAV LINKS ── -->
        <div class="nav-links">
            <a href="{{ route('password.request') }}" class="nav-link">
                <i class="fas fa-arrow-left"></i> Forgot Password
            </a>
            <span class="nav-sep">·</span>
            <a href="{{ route('login') }}" class="nav-link">
                <i class="fas fa-sign-in-alt"></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;
    --amber:  #d97706;
    --bd:     rgba(42,139,191,0.22);
}

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.2rem; }
.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.87rem;color:var(--ink-m);text-align:center;line-height:1.5; }

/* ════ EMAIL BADGE ════ */
.email-badge {
    display:flex;align-items:center;gap:0.65rem;
    padding:0.7rem 1rem;
    background:rgba(135,206,235,0.12);
    border:1px solid rgba(135,206,235,0.3);
    border-radius:11px;
    font-size:0.86rem;color:var(--ink-m);font-weight:500;
    margin-bottom:1.25rem;
    animation:fld-in 0.4s ease 0.1s both;
}
.email-badge>i { color:var(--sky-d);font-size:0.9rem;flex-shrink:0; }
@keyframes fld-in { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }

/* ════ 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.2rem;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-info { background:rgba(42,139,191,0.09);border:1px solid rgba(42,139,191,0.28);color:#1a4f74; }
.a-info>i { color:var(--sky-d); }
.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); }

/* ════ OTP INPUTS ════ */
.otp-wrap { margin-bottom:1.1rem; }

.otp-inputs {
    display:flex; justify-content:center; gap:0.6rem;
    animation:otp-in 0.5s ease 0.15s both;
}
@keyframes otp-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.otp-box {
    width:52px; height:60px;
    text-align:center;
    font-size:1.75rem; font-weight:700; font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:rgba(255,255,255,0.8);
    border:1.5px solid var(--bd);
    border-radius:13px;
    transition:all 0.25s;
    caret-color:var(--sky-d);
    -webkit-appearance:none;
}
.otp-box:focus {
    outline:none;
    border-color:var(--sky-m);
    background:var(--white);
    box-shadow:0 0 0 4px rgba(135,206,235,0.22);
    transform:translateY(-3px);
}
.otp-box.filled {
    border-color:var(--sky-d);
    background:rgba(135,206,235,0.1);
    color:var(--sky-d);
}
.otp-box.complete {
    border-color:var(--green);
    background:rgba(30,160,105,0.08);
    color:var(--green);
}

/* ════ TIMER ════ */
.timer-row { display:flex;justify-content:center;margin-bottom:0.85rem; }
.timer-badge {
    display:inline-flex;align-items:center;gap:0.5rem;
    padding:0.5rem 1.1rem;
    background:rgba(135,206,235,0.15);
    border:1px solid rgba(135,206,235,0.3);
    border-radius:20px;
    font-size:0.9rem;font-weight:700;color:var(--sky-d);
    transition:all 0.3s;
}
.timer-badge.expiring {
    background:rgba(217,119,6,0.1);
    border-color:rgba(217,119,6,0.3);
    color:var(--amber);
    animation:pulse-warn 1s ease-in-out infinite;
}
.timer-badge.expired {
    background:rgba(201,52,44,0.1);
    border-color:rgba(201,52,44,0.3);
    color:var(--red);
    animation:none;
}
@keyframes pulse-warn { 0%,100%{opacity:1} 50%{opacity:0.65} }

/* ════ RESEND ════ */
.resend-row { display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-bottom:1.3rem;font-size:0.84rem; }
.resend-label { color:var(--ink-l); }
.resend-link {
    display:inline-flex;align-items:center;gap:0.35rem;
    color:var(--sky-d);font-weight:600;text-decoration:none;
    padding:0.3rem 0.7rem;border-radius:8px;transition:all 0.22s;
}
.resend-link:hover:not(.disabled) { background:rgba(135,206,235,0.15);color:var(--ink); }
.resend-link.disabled { color:var(--ink-l);cursor:not-allowed;pointer-events:none; }

/* ════ 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.45;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%} }

/* ════ NAV LINKS ════ */
.nav-links { display:flex;align-items:center;justify-content:center;gap:0.65rem;margin-top:1.25rem;flex-wrap:wrap; }
.nav-sep { color:var(--ink-l);font-size:0.85rem; }
.nav-link {
    display:inline-flex;align-items:center;gap:0.4rem;
    font-size:0.85rem;font-weight:600;color:var(--sky-d);text-decoration:none;
    padding:0.4rem 0.85rem;border-radius:8px;transition:all 0.22s;
}
.nav-link:hover { background:rgba(135,206,235,0.12);color:var(--ink); }
.nav-link i { transition:transform 0.22s;font-size:0.8rem; }

/* ════ 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:720px) {
    .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; }
    .otp-box { width:46px;height:54px;font-size:1.5rem; }
}
@media (max-width:480px) {
    .card { padding:2rem 1.25rem 1.6rem;border-radius:20px; }
    html,body { overflow:auto; }
    .stage { position:relative;inset:unset;min-height:100vh; }
    .otp-box { width:44px;height:52px;font-size:1.4rem; }
    .otp-inputs { gap:0.45rem; }
}
</style>
@endpush

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

    /* ── Canvas background ── */
    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(f=false) { this.x=Math.random()*W; this.y=f?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,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();

    /* ── OTP Logic ── */
    const boxes      = document.querySelectorAll('.otp-box');
    const hiddenOtp  = document.getElementById('otpHidden');
    const submitBtn  = document.getElementById('submitBtn');
    const timerBadge = document.getElementById('timerBadge');
    const timerDisp  = document.getElementById('timerDisplay');
    const resendBtn  = document.getElementById('resendBtn');
    const resendCnt  = document.getElementById('resendCount');

    let otpTimer = 600, resendTimer = 60;
    let otpInterval, resendInterval;

    // Focus first
    boxes[0].focus();

    function getOtp() { return Array.from(boxes).map(b=>b.value).join(''); }

    function updateState() {
        const otp = getOtp();
        hiddenOtp.value = otp;
        const complete = otp.length === 6;
        submitBtn.disabled = !complete || otpTimer <= 0;
        boxes.forEach(b => {
            b.classList.toggle('filled', !!b.value && !complete);
            b.classList.toggle('complete', !!b.value && complete);
        });
    }

    boxes.forEach((box, i) => {
        box.addEventListener('input', e => {
            const val = e.target.value.replace(/\D/g,'');
            box.value = val.slice(-1);
            if (val && i < boxes.length - 1) boxes[i+1].focus();
            updateState();
        });

        box.addEventListener('keydown', e => {
            if (e.key === 'Backspace') {
                e.preventDefault();
                if (!box.value && i > 0) { boxes[i-1].focus(); boxes[i-1].value=''; }
                else box.value = '';
                updateState();
            }
            if (e.key === 'ArrowLeft' && i > 0) boxes[i-1].focus();
            if (e.key === 'ArrowRight' && i < boxes.length-1) boxes[i+1].focus();
        });

        box.addEventListener('paste', e => {
            e.preventDefault();
            const nums = e.clipboardData.getData('text').replace(/\D/g,'');
            nums.split('').forEach((n, idx) => { if(boxes[idx]) boxes[idx].value = n; });
            boxes[Math.min(nums.length, boxes.length-1)].focus();
            updateState();
        });

        box.addEventListener('focus', () => box.select());
    });

    /* ── OTP Timer ── */
    function startOtpTimer() {
        clearInterval(otpInterval);
        otpTimer = 600;
        otpInterval = setInterval(() => {
            otpTimer--;
            const m = Math.floor(otpTimer/60), s = otpTimer%60;
            timerDisp.textContent = `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
            timerBadge.className = 'timer-badge' + (otpTimer < 120 ? ' expiring' : '') + (otpTimer <= 0 ? ' expired' : '');
            if (otpTimer <= 0) {
                clearInterval(otpInterval);
                timerDisp.textContent = 'Expired';
                submitBtn.disabled = true;
            }
        }, 1000);
    }

    /* ── Resend Timer ── */
    function startResendTimer() {
        clearInterval(resendInterval);
        resendBtn.classList.add('disabled');
        resendTimer = 60;
        resendInterval = setInterval(() => {
            resendTimer--;
            resendCnt.textContent = resendTimer > 0 ? `(${resendTimer}s)` : '';
            if (resendTimer <= 0) { clearInterval(resendInterval); resendBtn.classList.remove('disabled'); }
        }, 1000);
    }

    resendBtn.addEventListener('click', e => {
        e.preventDefault();
        if (resendBtn.classList.contains('disabled')) return;
        const orig = resendBtn.innerHTML;
        resendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending…';
        setTimeout(() => {
            boxes.forEach(b => { b.value=''; b.classList.remove('filled','complete'); });
            boxes[0].focus();
            updateState();
            startOtpTimer();
            startResendTimer();
            resendBtn.innerHTML = orig;
        }, 1500);
    });

    /* ── Form Submit ── */
    document.getElementById('otpForm').addEventListener('submit', function(e) {
        if (getOtp().length !== 6 || otpTimer <= 0) { e.preventDefault(); return; }
        submitBtn.disabled = true;
        submitBtn.querySelector('.btn-txt').textContent = 'Verifying…';
        submitBtn.querySelector('.btn-arr i').className = 'fas fa-spinner fa-spin';
    });

    // Start timers
    startOtpTimer();
    startResendTimer();
    updateState();
});
</script>
@endpush
@endsection