<!doctype html>
<html lang="pt-BR">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Painel Admin | Survive</title>
    <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=Bebas+Neue&family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-main: #060913;
            --panel: #0b122a;
            --panel-2: #0f1735;
            --line: #34427a;
            --text: #f4f7ff;
            --muted: #9aa7d4;
            --accent: #ffcb3c;
            --accent-2: #6d5efc;
            --ok: #22c55e;
            --danger: #ff6a2b;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;
            font-family: 'Rajdhani', sans-serif;
            color: var(--text);
            background:
                radial-gradient(920px 480px at 15% -10%, #6d28d93d 0%, transparent 56%),
                radial-gradient(800px 480px at 100% 120%, #ff6a2b36 0%, transparent 62%),
                linear-gradient(145deg, #060913, #140b2b);
        }

        .layout {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 292px 1fr;
            gap: 18px;
            padding: 18px;
        }

        .sidebar {
            border: 1px solid #38457c;
            border-radius: 20px;
            background: linear-gradient(180deg, #090f23cc, #070b19cc);
            backdrop-filter: blur(8px);
            padding: 18px 14px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: 0 16px 52px #0008;
        }

        .brand {
            font-family: 'Bebas Neue', sans-serif;
            letter-spacing: 1px;
            font-size: 2.2rem;
            padding: 14px 12px;
            border: 1px solid #3a4a86;
            border-radius: 14px;
            background: linear-gradient(160deg, #0c183a, #0c142d);
            line-height: 1;
        }

        .brand small {
            display: block;
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.9rem;
            color: var(--muted);
            letter-spacing: 0.5px;
            margin-top: 4px;
        }

        .status-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            border: 1px solid #2f6d4a;
            border-radius: 999px;
            background: #0f2e1f;
            color: #9cf7bf;
            font-size: 0.85rem;
            padding: 5px 10px;
            font-weight: 700;
        }

        .status-chip::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--ok);
            box-shadow: 0 0 10px var(--ok);
        }

        .nav {
            display: grid;
            gap: 8px;
        }

        .nav-item {
            color: #c8d3fb;
            text-decoration: none;
            border: 1px solid #22305f;
            border-radius: 12px;
            padding: 10px 11px;
            background: #0b132e;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
        }

        .nav-item:hover {
            transform: translateY(-1px);
            border-color: #4b5fa5;
        }

        .nav-icon {
            width: 30px;
            height: 30px;
            border-radius: 9px;
            border: 1px solid #40539a;
            display: grid;
            place-items: center;
            background: #121e42;
            color: #e8edff;
        }

        .nav-item.active {
            border-color: #6f63f8;
            background: linear-gradient(90deg, #3a2680, #16234f);
            color: #fff;
        }

        .nav-item.active .nav-icon {
            border-color: #8b84ff;
            background: #2a2f6d;
        }

        .nav-item.sub {
            margin-left: 16px;
            padding: 8px 10px;
            font-size: 0.95rem;
            border-style: dashed;
        }

        .logout {
            margin-top: auto;
        }

        .logout button {
            width: 100%;
            border: 0;
            border-radius: 12px;
            padding: 11px;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(90deg, #ef4444, #f97316);
            color: #fff;
        }

        .content {
            padding: 4px;
            min-width: 0;
        }

        .topbar {
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 18px;
            background: linear-gradient(160deg, #0f1838cc, #0a122acc);
            backdrop-filter: blur(8px);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            box-shadow: 0 14px 44px #0007;
        }

        .topbar-main {
            min-width: 0;
        }

        .topbar-badge {
            border: 1px solid #4456a0;
            background: #0e1738;
            border-radius: 14px;
            padding: 9px 12px;
            font-size: 0.95rem;
            color: #d9e1ff;
            font-weight: 700;
            white-space: nowrap;
        }

        h1 {
            margin: 0;
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(2rem, 4vw, 3.2rem);
            letter-spacing: 1px;
        }

        .subtitle {
            margin: 2px 0 0;
            color: var(--muted);
            font-size: 1.05rem;
        }

        .meta {
            margin-top: 10px;
            font-weight: 700;
            color: #d4ddff;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .card {
            border: 1px solid var(--line);
            border-radius: 16px;
            background: linear-gradient(160deg, #101a3dcc, #0b122bcc);
            backdrop-filter: blur(8px);
            padding: 14px;
            min-height: 144px;
            display: grid;
            align-content: space-between;
            box-shadow: inset 0 1px 0 #ffffff14;
        }

        .card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .metric-icon {
            width: 42px;
            height: 42px;
            border-radius: 13px;
            display: grid;
            place-items: center;
            border: 1px solid #4156a2;
            background: #172248;
            color: #f3f7ff;
        }

        .metric-pill {
            border: 1px solid #344985;
            border-radius: 999px;
            padding: 3px 9px;
            font-size: 0.78rem;
            color: #c0cdf8;
            font-weight: 700;
        }

        .card-label {
            color: var(--muted);
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.1;
            margin-top: 10px;
        }

        .card-value {
            font-size: clamp(1.6rem, 3vw, 2rem);
            font-weight: 700;
            letter-spacing: 0.4px;
            color: var(--accent);
        }

        .card[data-key='profit'] .card-value,
        .card[data-key='online'] .card-value {
            color: #7ef2ae;
        }

        .card[data-key='withdrawals'] .card-value {
            color: var(--danger);
        }

        .flash {
            border: 1px solid #2e7a5a;
            border-radius: 14px;
            background: #103122;
            color: #c9f8de;
            padding: 12px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .flash.error {
            border-color: #a13b3b;
            background: #3a1717;
            color: #ffd8d8;
        }

        @media (max-width: 1060px) {
            .grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .topbar {
                flex-direction: column;
                align-items: flex-start;
            }

            .topbar-badge {
                white-space: normal;
                width: 100%;
            }
        }

        @media (max-width: 760px) {
            .layout {
                grid-template-columns: 1fr;
                gap: 12px;
                padding: 12px;
            }

            .sidebar {
                border-right: 1px solid #38457c;
            }

            .brand {
                text-align: center;
            }

            .nav-item.sub {
                margin-left: 8px;
            }

            .grid {
                grid-template-columns: 1fr;
            }

            .topbar {
                padding: 14px;
            }

            .card {
                min-height: 120px;
            }
        }

        @media (max-width: 480px) {
            .layout {
                padding: 10px;
                gap: 10px;
            }

            .sidebar {
                padding: 14px 10px;
                border-radius: 16px;
            }

            .nav-item {
                padding: 9px 10px;
                font-size: 0.95rem;
            }

            .nav-icon {
                width: 28px;
                height: 28px;
            }

            .topbar {
                border-radius: 16px;
                margin-bottom: 12px;
            }

            .content {
                padding: 0;
            }

            .card {
                padding: 12px;
            }

            .card-label {
                font-size: 0.95rem;
            }
        }
    </style>
</head>
<body>
    <main class="layout">
        <aside class="sidebar">
            @php($showConfigSubmenu = request()->routeIs('admin.city-payout.*'))
            @php($showMercadoPagoSubmenu = request()->routeIs('admin.mercadopago.*'))
            <div class="brand">
                SURVIVE
                <small>Admin Panel</small>
            </div>
            <div class="status-chip">Sistema online</div>

            <nav class="nav">
                <a class="nav-item active" href="{{ route('admin.dashboard') }}">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 13h7V4H4v9Zm9 7h7v-9h-7v9ZM4 20h7v-5H4v5Zm9-11h7V4h-7v5Z" fill="currentColor"/></svg>
                    </span>
                    Dashboard
                </a>
                <a class="nav-item" href="{{ route('game.index') }}">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M7 7h10v10H7V7Zm-4 8V9a2 2 0 0 1 2-2h2v2H5v6h2v2H5a2 2 0 0 1-2-2Zm16 2v-2h2V9h-2V7h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2Z" fill="currentColor"/></svg>
                    </span>
                    Ver jogo
                </a>
                <a class="nav-item" href="#">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4ZM8 13a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm8 2c-3.33 0-10 1.67-10 5v2h20v-2c0-3.33-6.67-5-10-5ZM8 15c-.49 0-1.01.03-1.55.08C4.94 15.28 2 16.04 2 18.5V22h4v-2c0-1.6.83-2.94 2.13-3.95A11.87 11.87 0 0 0 8 15Z" fill="currentColor"/></svg>
                    </span>
                    Jogadores
                </a>
                <a class="nav-item" href="#">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 16H5V9h14v10Zm-7-8a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z" fill="currentColor"/></svg>
                    </span>
                    Rodadas
                </a>
                <a class="nav-item" href="{{ route('admin.city-payout.index') }}">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2 3 6v6c0 5 3.84 9.74 9 11 5.16-1.26 9-6 9-11V6l-9-4Zm1 14h-2v-2h2v2Zm0-4h-2V7h2v5Z" fill="currentColor"/></svg>
                    </span>
                    Configuração
                </a>
                @if ($showConfigSubmenu)
                    <a class="nav-item sub" href="{{ route('admin.city-payout.index') }}">
                        Configuração por cidade
                    </a>
                @endif
                <a class="nav-item" href="{{ route('admin.mercadopago.index') }}">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2 3 6v6c0 5 3.84 9.74 9 11 5.16-1.26 9-6 9-11V6l-9-4Zm1 14h-2v-2h2v2Zm0-4h-2V7h2v5Z" fill="currentColor"/></svg>
                    </span>
                    Mercado Pago
                </a>
                @if ($showMercadoPagoSubmenu)
                    <a class="nav-item sub" href="{{ route('admin.mercadopago.index') }}">
                        Configurações PIX
                    </a>
                @endif
                <a class="nav-item" href="#">
                    <span class="nav-icon">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 3h2v18H3V3Zm16 0h2v18h-2V3ZM7 13h4v8H7v-8Zm6-10h4v18h-4V3Z" fill="currentColor"/></svg>
                    </span>
                    Relatórios
                </a>
            </nav>

            <form method="post" action="{{ route('admin.logout') }}">
                @csrf
                <div class="logout">
                    <button type="submit">Sair do painel</button>
                </div>
            </form>
        </aside>

        <section class="content">
            <header class="topbar">
                <div class="topbar-main">
                    <h1>Dashboard Financeiro</h1>
                    <p class="subtitle">Visão geral da operação em tempo real</p>
                    <div class="meta">Administrador conectado: {{ $adminEmail }}</div>
                </div>
                <div class="topbar-badge">Atualizado há poucos segundos</div>
            </header>

            @if (session('status'))
                <div class="flash">{{ session('status') }}</div>
            @endif

            @if ($errors->any())
                <div class="flash error">{{ $errors->first() }}</div>
            @endif

            <section class="grid">
                @foreach ($stats as $stat)
                    <article class="card" data-key="{{ $stat['key'] }}">
                        <div class="card-top">
                            <span class="metric-icon">
                                @switch($stat['key'])
                                    @case('today')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 11h4v2h-6V7h2v6Z" fill="currentColor"/></svg>
                                        @break
                                    @case('month')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M19 3h-1V1h-2v2H8V1H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Zm0 16H5V9h14v10Z" fill="currentColor"/></svg>
                                        @break
                                    @case('prizes')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M18 2h-2V1H8v1H6a2 2 0 0 0-2 2v3a5 5 0 0 0 5 5h1v2H7v2h10v-2h-3v-2h1a5 5 0 0 0 5-5V4a2 2 0 0 0-2-2Zm0 5a3 3 0 0 1-3 3h-1V4h4v3ZM6 4h4v6H9a3 3 0 0 1-3-3V4Z" fill="currentColor"/></svg>
                                        @break
                                    @case('withdrawals')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M20 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2ZM4 16v-4h4a2 2 0 0 1 0 4H4Zm16 0h-4a2 2 0 0 1 0-4h4v4ZM9 14h6v2H9v-2Zm0-6h6v2H9V8Z" fill="currentColor"/></svg>
                                        @break
                                    @case('profit')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M3 17h2v4H3v-4Zm4-6h2v10H7V11Zm4 3h2v7h-2v-7Zm4-5h2v12h-2V9Zm4-4h2v16h-2V5Z" fill="currentColor"/></svg>
                                        @break
                                    @case('open_rounds')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M11 8h2v5h4v2h-6V8Zm1-7a11 11 0 1 0 11 11A11.01 11.01 0 0 0 12 1Z" fill="currentColor"/></svg>
                                        @break
                                    @case('closed_rounds')
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm-1 14-4-4 1.4-1.4 2.6 2.59 4.6-4.59L17 10l-6 6Z" fill="currentColor"/></svg>
                                        @break
                                    @default
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 5a9 9 0 0 0-9 9v2h2v-2a7 7 0 0 1 14 0v2h2v-2a9 9 0 0 0-9-9Zm0 7a3 3 0 1 0 3 3 3 3 0 0 0-3-3Zm-7 8h14v2H5v-2Z" fill="currentColor"/></svg>
                                @endswitch
                            </span>
                            <span class="metric-pill">Ao vivo</span>
                        </div>
                        <div class="card-label">{{ $stat['label'] }}</div>
                        <div class="card-value">{{ $stat['value'] }}</div>
                    </article>
                @endforeach
            </section>
        </section>
    </main>
</body>
</html>
