<?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', 'تسجيل الدخول') ?> — <?= e($brandNameEn) ?></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: #f4f6f9;
            font-family: 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif;
            direction: rtl;
            position: relative;
        }

        .auth-card {
            position: relative;
            z-index: 1;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            border: 1px solid #e8ecf2;
            padding: 44px 40px;
            width: 100%;
            max-width: 420px;
            animation: cardEntry 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

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

        .auth-logo {
            width: 52px;
            height: 52px;
            margin: 0 auto 14px;
            background: #1e3a5f;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

        .auth-header h1 {
            color: #1a2332;
            font-size: 22px;
            font-weight: 800;
            margin: 0 0 4px;
        }

        .auth-header p {
            color: #8896a7;
            font-size: 13px;
            margin: 0;
            font-weight: 500;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }

        .auth-card .form-group { margin-bottom: 18px; }

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

        .auth-card .form-input {
            width: 100%;
            padding: 11px 14px;
            border: 1.5px solid #e8ecf2;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            background: #f9fafb;
            color: #1a2332;
            transition: all 0.2s ease;
        }

        .auth-card .form-input:focus {
            outline: none;
            border-color: #1e3a5f;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.08);
        }

        .auth-card .form-input::placeholder { color: #8896a7; }

        .auth-card .btn-primary {
            width: 100%;
            padding: 12px;
            background: #1e3a5f;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 700;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .auth-card .btn-primary:hover {
            background: #152a45;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2);
        }

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

        .auth-alert {
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 18px;
            font-size: 13px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

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

        .auth-alert-success {
            background: #f0fdf4;
            color: #16a34a;
            border: 1px solid #bbf7d0;
        }

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

        .auth-footer {
            text-align: center;
            margin-top: 24px;
            font-size: 12px;
            color: #8896a7;
        }

        @media (max-width: 480px) {
            .auth-card { margin: 16px; padding: 32px 24px; }
        }
    </style>
</head>
<body>
    <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">
            <?= e($brandNameEn) ?> ERP &copy; <?= date('Y') ?>
        </div>
    </div>

</body>
</html>
