@extends('layouts.auth')

@section('page-title', 'Reset 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-key"></i>
            </div>
            <p class="head-sub">Create a new secure password for your account</p>
        </div>

        <!-- ── ALERTS ── -->
        @if(session('status'))
        <div class="alert a-ok">
            <i class="fas fa-check-circle"></i>
            <div>
                <strong>Password Reset!</strong>
                <span>{{ session('status') }}</span>
                <span class="a-note">You can now login with your new password.</span>
            </div>
        </div>
        @endif

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

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

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

            <!-- New Password -->
            <div class="fld">
                <i class="fas fa-lock fld-ico"></i>
                <input type="password" id="password" name="password"
                       placeholder=" " autocomplete="new-password" required>
                <label for="password">New Password</label>
                <button type="button" class="eye" id="togglePwd" aria-label="Toggle">
                    <i class="fas fa-eye" id="eyePwd"></i>
                </button>
            </div>

            <!-- Strength meter -->
            <div class="strength-wrap" id="strengthWrap">
                <div class="strength-head">
                    <span>Strength</span>
                    <span id="strengthLabel">—</span>
                </div>
                <div class="strength-track">
                    <div class="strength-bar" id="strengthBar"></div>
                </div>
                <div class="strength-reqs" id="strengthReqs">
                    <div class="req" id="req-len"><i class="fas fa-circle req-dot"></i> At least 8 characters</div>
                    <div class="req" id="req-up"><i class="fas fa-circle req-dot"></i> Uppercase letter</div>
                    <div class="req" id="req-num"><i class="fas fa-circle req-dot"></i> Number</div>
                    <div class="req" id="req-sym"><i class="fas fa-circle req-dot"></i> Special character</div>
                </div>
            </div>

            <!-- Confirm Password -->
            <div class="fld">
                <i class="fas fa-lock fld-ico"></i>
                <input type="password" id="password_confirmation" name="password_confirmation"
                       placeholder=" " autocomplete="new-password" required>
                <label for="password_confirmation">Confirm Password</label>
                <button type="button" class="eye" id="toggleConfirm" aria-label="Toggle">
                    <i class="fas fa-eye" id="eyeConfirm"></i>
                </button>
            </div>

            <!-- Match status -->
            <div class="match-row" id="matchRow">
                <span id="matchMsg"></span>
            </div>

            <!-- Submit -->
            <button type="submit" class="btn-go" id="submitBtn" disabled>
                <i class="fas fa-key btn-pre"></i>
                <span class="btn-txt">Reset Password</span>
                <span class="btn-arr"><i class="fas fa-arrow-right"></i></span>
                <div class="sheen"></div>
            </button>

            <!-- Encryption note -->
            <div class="enc-note">
                <i class="fas fa-shield-alt"></i>
                <span>Your password will be encrypted with <strong>AES-256</strong></span>
            </div>
        </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;
    --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.25rem; }
.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; }

/* ════ 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.25rem;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.4rem;animation:fld-in 0.45s ease both; }
.fld:nth-of-type(1){animation-delay:0.1s} .fld:nth-of-type(2){animation-delay:0.17s} .fld:nth-of-type(3){animation-delay:0.24s}
@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 {
    width:100%;padding:1rem 3rem 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); }
.fld input.readonly { background:rgba(240,247,252,0.9);color:var(--ink-m);cursor:not-allowed;border-color:rgba(135,206,235,0.15); }
.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;
}

/* verified badge on email */
.fld-verified { position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--green);font-size:0.95rem;z-index:2; }

/* eye toggle */
.eye { position:absolute;right:0.85rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--ink-l);cursor:pointer;padding:0.4rem;font-size:0.9rem;transition:color 0.22s;border-radius:6px;z-index:2;line-height:1; }
.eye:hover { color:var(--sky-d); }

/* ════ STRENGTH METER ════ */
.strength-wrap {
    margin:-0.7rem 0 1.4rem;
    padding:0.85rem 1rem;
    background:rgba(135,206,235,0.07);
    border:1px solid rgba(135,206,235,0.18);
    border-radius:11px;
    animation:fld-in 0.45s ease 0.2s both;
}
.strength-head { display:flex;justify-content:space-between;align-items:center;font-size:0.8rem;font-weight:600;color:var(--ink-m);margin-bottom:0.5rem; }
#strengthLabel { font-weight:700;transition:color 0.25s; }

.strength-track { height:5px;background:rgba(42,139,191,0.15);border-radius:3px;overflow:hidden;margin-bottom:0.75rem; }
.strength-bar { height:100%;width:0%;border-radius:3px;transition:width 0.35s ease, background 0.35s ease; }

.strength-reqs { display:grid;grid-template-columns:1fr 1fr;gap:0.3rem 0.75rem; }
.req { display:flex;align-items:center;gap:0.4rem;font-size:0.77rem;color:var(--ink-l);font-weight:500;transition:color 0.2s; }
.req-dot { font-size:0.45rem;transition:color 0.2s; }
.req.met { color:var(--green); }
.req.met .req-dot { color:var(--green); }

/* ════ MATCH ROW ════ */
.match-row { margin:-0.6rem 0 1.2rem;min-height:1.2rem;font-size:0.82rem;font-weight:600;padding-left:0.25rem; }
.match-row.ok { color:var(--green); }
.match-row.fail { color:var(--red); }

/* ════ SUBMIT ════ */
.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.35s 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%} }

/* ════ ENC NOTE ════ */
.enc-note {
    display:flex;align-items:center;justify-content:center;gap:0.5rem;
    margin-top:1rem;padding:0.65rem 1rem;
    background:rgba(30,160,105,0.07);border:1px solid rgba(30,160,105,0.2);border-radius:10px;
    font-size:0.8rem;color:var(--ink-m);
}
.enc-note>i { color:var(--green); }
.enc-note strong { color:var(--green); }

/* ════ BACK + FOOTER ════ */
.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:hover i { transform:translateX(-3px); }
.back-link i { transition:transform 0.22s; }

.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:760px) {
    .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; }
    .strength-reqs { grid-template-columns:1fr; gap:0.25rem; }
}
@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; }
    .strength-reqs { grid-template-columns:1fr; }
}
</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();

    /* ── Password toggle ── */
    function makeToggle(btnId, iconId, inputId) {
        const btn = document.getElementById(btnId);
        const ico = document.getElementById(iconId);
        const inp = document.getElementById(inputId);
        if (!btn) return;
        btn.addEventListener('click', () => {
            const show = inp.type === 'password';
            inp.type = show ? 'text' : 'password';
            ico.className = show ? 'fas fa-eye-slash' : 'fas fa-eye';
        });
    }
    makeToggle('togglePwd',     'eyePwd',     'password');
    makeToggle('toggleConfirm', 'eyeConfirm', 'password_confirmation');

    /* ── Strength meter ── */
    const pwdInput   = document.getElementById('password');
    const confirmInp = document.getElementById('password_confirmation');
    const bar        = document.getElementById('strengthBar');
    const label      = document.getElementById('strengthLabel');
    const matchRow   = document.getElementById('matchRow');
    const submitBtn  = document.getElementById('submitBtn');

    const reqs = {
        len: { el: document.getElementById('req-len'), fn: v => v.length >= 8 },
        up:  { el: document.getElementById('req-up'),  fn: v => /[A-Z]/.test(v) },
        num: { el: document.getElementById('req-num'), fn: v => /[0-9]/.test(v) },
        sym: { el: document.getElementById('req-sym'), fn: v => /[^A-Za-z0-9]/.test(v) },
    };

    const levels = [
        { pct: 0,   color: '#e0e0e0', text: '—',        css: 'var(--ink-l)' },
        { pct: 25,  color: '#e53935', text: 'Weak',      css: '#e53935' },
        { pct: 50,  color: '#d97706', text: 'Fair',      css: '#d97706' },
        { pct: 75,  color: '#2196f3', text: 'Good',      css: 'var(--sky-d)' },
        { pct: 100, color: '#1ea069', text: 'Strong',    css: 'var(--green)' },
    ];

    function evalStrength(v) {
        let score = 0;
        Object.values(reqs).forEach(r => {
            const met = r.fn(v);
            r.el.classList.toggle('met', met);
            if (met) score++;
        });
        const lvl = levels[score];
        bar.style.width   = lvl.pct + '%';
        bar.style.background = lvl.color;
        label.textContent = lvl.text;
        label.style.color = lvl.css;
        return score;
    }

    function evalMatch() {
        const p = pwdInput.value, c = confirmInp.value;
        if (!c) { matchRow.textContent=''; matchRow.className='match-row'; return false; }
        const ok = p === c;
        matchRow.className = 'match-row ' + (ok ? 'ok' : 'fail');
        matchRow.textContent = ok ? '✓ Passwords match' : '✗ Passwords do not match';
        return ok;
    }

    function validate() {
        const score = evalStrength(pwdInput.value);
        const match = evalMatch();
        submitBtn.disabled = !(score >= 1 && match);
    }

    pwdInput.addEventListener('input', validate);
    confirmInp.addEventListener('input', validate);
    validate();

    /* ── Form submit ── */
    document.getElementById('resetForm').addEventListener('submit', function(e) {
        if (submitBtn.disabled) { e.preventDefault(); return; }
        submitBtn.disabled = true;
        submitBtn.querySelector('.btn-txt').textContent = 'Resetting…';
        submitBtn.querySelector('.btn-arr i').className = 'fas fa-spinner fa-spin';
    });
});
</script>
@endpush
@endsection