@extends('ecommerce::theme.layouts.app-clean')

@section('styles')
<style>
    body {
        background: #000;
        overflow: hidden;
        margin: 0;
        font-family: Vazir, sans-serif !important;
    }

    /* باران دیجیتال Matrix */
    .matrix-rain {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #000;
        z-index: 0;
    }

    canvas#matrix { display: block; }

    /* گرادیانت بسیار ملایم مرکزی */
    .auth-wrapper::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(circle at 50% 50%, rgba(0, 255, 157, 0.08) 0%, transparent 70%);
        z-index: 1;
        pointer-events: none;
    }

    .auth-wrapper {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    /* ساعت دیجیتال کوچک و شیک در گوشه */
    .live-clock {
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 18px;
        color: #00ff9d;
        letter-spacing: 4px;
        font-weight: 300;
        text-shadow: 0 0 15px rgba(0, 255, 157, 0.6);
        z-index: 10;
    }

    .auth-box {
        position: relative;
        z-index: 10;
        background: rgba(10, 10, 20, 0.92);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(0, 255, 157, 0.25);
        border-radius: 24px;
        padding: 50px 40px;
        width: 420px;
        text-align: center;
        box-shadow: 0 20px 80px rgba(0, 0, 0, 0.9);
    }

    /* دکمه بازگشت بدون اختلال در چینش لوگو */
    .back-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        color: #00ff9d;
        font-size: 15px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        z-index: 11;
    }

    .back-btn:hover {
        color: #fff;
        transform: translateX(-6px);
    }
</style>
@stop

@section('content')
<div class="auth-wrapper">

    <!-- باران دیجیتال Matrix -->
    <div class="matrix-rain">
        <canvas id="matrix"></canvas>
    </div>

    <!-- ساعت زنده کوچک در گوشه -->
    <div class="live-clock" id="clock">۰۰:۰۰:۰۰</div>


</div>

<script>
// ساعت زنده
function updateClock() {
    const now = new Date();
    const time = now.toLocaleTimeString('fa-IR', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    });
    document.getElementById('clock').textContent = time;
}
updateClock();
setInterval(updateClock, 1000);

// افکت باران دیجیتال Matrix (سبک و بهینه)
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const matrix = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%+-/~{[|`]}";
const fontSize = 14;
const columns = canvas.width / fontSize;

const drops = [];
for (let x = 0; x < columns; x++) {
    drops[x] = 1;
}

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.04)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0f0';
    ctx.font = fontSize + 'px monospace';

    for (let i = 0; i < drops.length; i++) {
        const text = matrix.charAt(Math.floor(Math.random() * matrix.length));
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }
        drops[i]++;
    }
}

setInterval(draw, 35);

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});
</script>
@stop