@extends('layouts.auth')

@section('page-title', 'Login - 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>
    <!-- Soft radial orbs -->
    <div class="orb orb-a"></div>
    <div class="orb orb-b"></div>
    <div class="orb orb-c"></div>
    <!-- Wave bands -->
    <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>Welcome Back</span></div>

        <!-- ── ALERTS ── -->
        @if(session('status'))
        <div class="alert a-ok">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('status') }}</span>
        </div>
        @endif

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

        <!-- ── FORM ── -->
        <form method="POST" action="{{ route('login') }}" id="loginForm">
            @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>
                <label for="email">Email Address</label>
            </div>

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

            <!-- Options -->
            <div class="opts">
                <label class="chk">
                    <input type="checkbox" name="remember" id="remember">
                    <span class="chk-mark"><i class="fas fa-check"></i></span>
                    <span>Remember this device</span>
                </label>
                <a href="{{ route('password.request') }}" class="forgot">
                    <i class="fas fa-question-circle"></i> Forgot Password?
                </a>
            </div>

            <!-- Submit -->
            <button type="submit" class="btn-go" id="submitBtn">
                <span class="btn-txt">Sign In</span>
                <span class="btn-arr"><i class="fas fa-arrow-right"></i></span>
                <div class="sheen"></div>
            </button>
        </form>

        <!-- ── 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); }
}

/* Rolling wave bands at the bottom */
.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  (large, like original)
════════════════════════════════ */
.logo-block {
    display:flex; flex-direction:column; align-items:center;
    margin-bottom:1.6rem;
    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;
    color:var(--ink);
    letter-spacing:0.12em;
    line-height:1;
    margin-bottom:0.35rem;
    /* sky-blue gradient text */
    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.75rem;
}
.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;
}

/* ════════════════════════════════
   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.4rem;
    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:1px; }
.alert > div { display:flex; flex-direction:column; gap:0.2rem; }
.alert > div strong { font-size:0.84rem; font-weight:700; letter-spacing:0.02em; }

.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.5rem;
    animation:fld-in 0.45s ease both;
}
.fld:nth-of-type(1) { animation-delay:0.12s; }
.fld:nth-of-type(2) { animation-delay:0.2s; }
@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 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);
    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); }

/* Floating label */
.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;
}

/* Eye button */
.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.92rem; transition:color 0.22s;
    border-radius:6px; z-index:2; line-height:1;
}
.eye:hover { color:var(--sky-d); }
.eye:focus { outline:2px solid var(--sky); }

/* ════════════════════════════════
   OPTIONS ROW
════════════════════════════════ */
.opts {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1.75rem;
}

.chk { display:flex; align-items:center; gap:0.55rem; cursor:pointer; user-select:none; }
.chk input { display:none; }
.chk-mark {
    width:20px; height:20px; border-radius:6px;
    border:1.5px solid var(--sky-m);
    background:rgba(255,255,255,0.85);
    display:flex; align-items:center; justify-content:center;
    transition:all 0.2s; flex-shrink:0;
}
.chk-mark i { font-size:0.62rem; color:var(--white); opacity:0; transition:opacity 0.15s; }
.chk input:checked ~ .chk-mark { background:var(--sky-d); border-color:var(--sky-d); }
.chk input:checked ~ .chk-mark i { opacity:1; }
.chk span:last-child { font-size:0.86rem; color:var(--ink-m); font-weight:500; }

.forgot {
    font-size:0.86rem; color:var(--sky-d); text-decoration:none;
    font-weight:600; display:flex; align-items:center; gap:0.35rem;
    transition:color 0.2s;
}
.forgot:hover { color:var(--ink); }

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

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
.foot {
    margin-top:1.6rem; padding-top:1.2rem;
    border-top:1px solid rgba(135,206,235,0.3);
    display:flex; flex-direction:column; align-items:center; gap:0.55rem;
}
.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; }
}
@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; }
    .opts { flex-direction:column; align-items:flex-start; gap:0.75rem; }
}
</style>
@endpush

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

    /* ── Canvas background: sky gradient + constellation + rising particles ── */
    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);

        /* Sky-blue → white gradient */
        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 ── */
    const pwd    = document.getElementById('password');
    const togBtn = document.getElementById('togglePwd');
    const eyeIco = document.getElementById('eyeIco');
    if (togBtn && pwd) {
        togBtn.addEventListener('click', () => {
            const show = pwd.type === 'password';
            pwd.type = show ? 'text' : 'password';
            eyeIco.className = show ? 'fas fa-eye-slash' : 'fas fa-eye';
        });
    }

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