<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Optiqo Admin — @yield('title', 'Dashboard')</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0A0E1A',
                        secondary: '#111827',
                        accent: '#00E676',
                        danger: '#FF3D57',
                        gold: '#FFD700',
                    }
                }
            }
        }
    </script>
    <style>
        body { background: #0A0E1A; color: #F0F4FF; font-family: 'Inter', sans-serif; }
        .sidebar-link { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:8px; color:#9CA3AF; transition:all .2s; text-decoration:none; font-size:14px; }
        .sidebar-link:hover { background:rgba(255,255,255,.05); color:#fff; }
        .sidebar-link.active { background:rgba(0,230,118,.08); color:#4ADE80; border:1px solid rgba(0,230,118,.2); }
        .card { background:#111827; border:1px solid rgba(255,255,255,.06); border-radius:12px; }
        .badge-green { display:inline-block; background:rgba(74,222,128,.1); color:#4ADE80; font-size:11px; padding:2px 8px; border-radius:9999px; }
        .badge-red { display:inline-block; background:rgba(248,113,113,.1); color:#F87171; font-size:11px; padding:2px 8px; border-radius:9999px; }
        .badge-yellow { display:inline-block; background:rgba(251,191,36,.1); color:#FBBF24; font-size:11px; padding:2px 8px; border-radius:9999px; }
        .badge-blue { display:inline-block; background:rgba(96,165,250,.1); color:#60A5FA; font-size:11px; padding:2px 8px; border-radius:9999px; }
        .btn-primary { background:#22C55E; color:#000; font-weight:600; padding:8px 16px; border-radius:8px; border:none; cursor:pointer; transition:background .2s; font-size:13px; }
        .btn-primary:hover { background:#16A34A; }
        .btn-danger { background:rgba(248,113,113,.1); color:#F87171; border:1px solid rgba(248,113,113,.2); padding:8px 16px; border-radius:8px; cursor:pointer; transition:background .2s; font-size:13px; }
        .btn-danger:hover { background:rgba(248,113,113,.2); }
        input, select, textarea { background:#1C2333; border:1px solid rgba(255,255,255,.1); color:#F0F4FF; border-radius:8px; padding:8px 12px; font-size:13px; }
        input:focus, select:focus { outline:none; border-color:#22C55E; }
        table { width:100%; border-collapse:collapse; }
        th { text-align:left; padding:12px 16px; color:#6B7A9F; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid rgba(255,255,255,.06); }
        td { padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.04); font-size:13px; }
        tr:hover td { background:rgba(255,255,255,.02); }
    </style>
</head>
<body>
<div class="flex h-screen overflow-hidden">

    <!-- Sidebar -->
    <aside class="w-60 flex-shrink-0 flex flex-col border-r border-white/5" style="background:#0D1117;">
        <div class="p-5 border-b border-white/5">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-green-500 flex items-center justify-center font-bold text-black text-sm">O</div>
                <div>
                    <div class="font-bold text-white text-sm">Optiqo</div>
                    <div class="text-xs text-gray-500">Admin Panel</div>
                </div>
            </div>
        </div>

        <nav class="flex-1 p-3 space-y-0.5 overflow-y-auto">
            <a href="/ponir" class="sidebar-link {{ request()->is('ponir') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                Dashboard
            </a>
            <a href="/ponir/users" class="sidebar-link {{ request()->is('ponir/users*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/></svg>
                Users
            </a>
            <a href="/ponir/trades" class="sidebar-link {{ request()->is('ponir/trades*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/></svg>
                Trades
            </a>
            <a href="/ponir/deposits" class="sidebar-link {{ request()->is('ponir/deposits*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Deposits
            </a>
            <a href="/ponir/withdrawals" class="sidebar-link {{ request()->is('ponir/withdrawals*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4m8-8l-8 8 8 8"/></svg>
                Withdrawals
            </a>
            <a href="/ponir/reports" class="sidebar-link {{ request()->is('ponir/reports*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
                Reports
            </a>
            <a href="/ponir/coupons" class="sidebar-link {{ request()->is('ponir/coupons*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
                Coupons
            </a>
            <a href="/ponir/settings" class="sidebar-link {{ request()->is('ponir/settings*') ? 'active' : '' }}">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                Settings
            </a>
        </nav>

        <div class="p-4 border-t border-white/5">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-400 text-sm font-bold">
                    {{ strtoupper(substr(session('admin_name', 'A'), 0, 1)) }}
                </div>
                <div>
                    <div class="text-sm font-medium text-white">{{ session('admin_name') }}</div>
                    <div class="text-xs text-gray-500">Administrator</div>
                </div>
            </div>
            <form method="POST" action="/ponir/logout">
                @csrf
                <button type="submit" class="w-full text-left text-xs text-red-400 hover:text-red-300 transition px-2 py-1">
                    ← Logout
                </button>
            </form>
        </div>
    </aside>

    <!-- Main content -->
    <main class="flex-1 overflow-y-auto">
        <div class="sticky top-0 z-10 flex items-center justify-between px-8 py-4 border-b border-white/5" style="background:#0A0E1A;">
            <h1 class="text-lg font-bold text-white">@yield('title', 'Dashboard')</h1>
            <span class="text-xs text-gray-500">{{ now()->format('D, d M Y H:i') }}</span>
        </div>

        <div class="p-8">
            @if(session('success'))
                <div class="mb-5 p-4 rounded-lg text-sm" style="background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.2);color:#4ADE80;">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mb-5 p-4 rounded-lg text-sm" style="background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.2);color:#F87171;">
                    {{ session('error') }}
                </div>
            @endif
            @yield('content')
        </div>
    </main>
</div>
</body>
</html>
