<?php
use App\Core\CSRF;
use App\Modules\Settings\Services\BrandingService;

$brandLogo = BrandingService::logo();
$brandNameAr = BrandingService::clubNameAr();
$brandNameEn = BrandingService::clubNameEn();
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?= e(CSRF::token()) ?>">
    <title><?= $__template->yield('title', 'تسجيل الدخول') ?> — THE CLUB</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #0f0f1a;
            font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
            direction: rtl;
            overflow: hidden;
            position: relative;
        }

        /* Animated gradient background */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(ellipse at 20% 50%, rgba(13, 115, 119, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 80%, rgba(20, 184, 166, 0.08) 0%, transparent 50%);
            animation: bgShift 15s ease-in-out infinite alternate;
            z-index: 0;
        }

        @keyframes bgShift {
            0% { transform: scale(1) translateY(0); }
            100% { transform: scale(1.1) translateY(-20px); }
        }

        /* Floating particles */
        .particles {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
            animation: float linear infinite;
        }

        @keyframes float {
            0% { opacity: 0; transform: translateY(100vh) scale(0); }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-10vh) scale(1); }
        }

        /* Grid lines */
        .grid-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        /* Auth card */
        .auth-card {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.97);
            border-radius: 20px;
            box-shadow:
                0 25px 50px -12px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            padding: 48px 40px;
            width: 100%;
            max-width: 440px;
            animation: cardEntry 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes cardEntry {
            from {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .auth-header {
            text-align: center;
            margin-bottom: 36px;
        }

        .auth-logo {
            width: 56px;
            height: 56px;
            margin: 0 auto 16px;
            background: linear-gradient(135deg, #0D7377, #14b8a6);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(13, 115, 119, 0.3);
        }

        .auth-logo svg {
            width: 28px;
            height: 28px;
            color: white;
        }

        .auth-header h1 {
            color: #0f172a;
            font-size: 22px;
            font-weight: 800;
            margin: 0 0 4px;
            letter-spacing: -0.01em;
        }

        .auth-header p {
            color: #94a3b8;
            font-size: 14px;
            margin: 0;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Form styles */
        .auth-card .form-group {
            margin-bottom: 20px;
        }

        .auth-card .form-label {
            display: block;
            margin-bottom: 6px;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
        }

        .auth-card .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid #e2e8f0;
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            background: #f8fafc;
            color: #0f172a;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .auth-card .form-input:focus {
            outline: none;
            border-color: #0D7377;
            background: #fff;
            box-shadow: 0 0 0 4px rgba(13, 115, 119, 0.1);
        }

        .auth-card .form-input::placeholder {
            color: #94a3b8;
        }

        .auth-card .btn-primary {
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, #0D7377, #0a5c5f);
            color: #fff;
            border: none;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.25s ease;
            box-shadow: 0 4px 16px rgba(13, 115, 119, 0.3);
            position: relative;
            overflow: hidden;
        }

        .auth-card .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(13, 115, 119, 0.4);
        }

        .auth-card .btn-primary:active {
            transform: scale(0.98);
        }

        /* Alert */
        .auth-alert {
            padding: 12px 16px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: alertSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes alertSlideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .auth-alert-error {
            background: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }

        .auth-alert-success {
            background: #ecfdf5;
            color: #059669;
            border: 1px solid #a7f3d0;
        }

        .auth-alert svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }

        /* Footer text */
        .auth-footer {
            text-align: center;
            margin-top: 24px;
            font-size: 12px;
            color: #94a3b8;
        }

        @media (max-width: 480px) {
            .auth-card {
                margin: 16px;
                padding: 36px 28px;
            }
        }
    </style>
</head>
<body>
    <!-- Background effects -->
    <div class="grid-bg"></div>
    <div class="particles" id="particles"></div>

    <div class="auth-card">
        <div class="auth-header">
            <?php if ($brandLogo): ?>
                <div class="auth-logo" style="background:transparent;box-shadow:none;">
                    <img src="<?= e($brandLogo) ?>" alt="<?= e($brandNameEn) ?>" style="max-width:48px;max-height:48px;object-fit:contain;">
                </div>
            <?php else: ?>
                <div class="auth-logo">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                </div>
            <?php endif; ?>
            <h1><?= e($brandNameAr) ?></h1>
            <p><?= e($brandNameEn) ?></p>
        </div>

        <?php
        $session = \App\Core\App::getInstance()->session();
        $alerts = $session->getAlerts();
        if (!empty($alerts)):
            foreach ($alerts as $alert):
                $isError = ($alert['type'] ?? '') === 'error';
        ?>
            <div class="auth-alert <?= $isError ? 'auth-alert-error' : 'auth-alert-success' ?>">
                <?php if ($isError): ?>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                <?php else: ?>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                <?php endif; ?>
                <span><?= e($alert['message'] ?? '') ?></span>
            </div>
        <?php
            endforeach;
        endif;
        ?>

        <?= $__template->yield('content', '') ?>

        <div class="auth-footer">
            THE CLUB ERP &copy; <?= date('Y') ?>
        </div>
    </div>

    <script>
    // Generate floating particles
    (function() {
        var container = document.getElementById('particles');
        if (!container) return;
        var colors = ['rgba(13,115,119,0.3)', 'rgba(20,184,166,0.2)', 'rgba(99,102,241,0.15)', 'rgba(56,189,248,0.2)'];

        for (var i = 0; i < 30; i++) {
            var p = document.createElement('div');
            p.className = 'particle';
            var size = Math.random() * 4 + 2;
            p.style.width = size + 'px';
            p.style.height = size + 'px';
            p.style.left = Math.random() * 100 + '%';
            p.style.background = colors[Math.floor(Math.random() * colors.length)];
            p.style.animationDuration = (Math.random() * 15 + 10) + 's';
            p.style.animationDelay = (Math.random() * 10) + 's';
            container.appendChild(p);
        }
    })();
    </script>
</body>
</html>
