<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ isset($title) ? $title . ' — ' : '' }}PES 2026 League</title>

    <!-- Bootstrap 5 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <!-- Tabler Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.35.0/dist/tabler-icons.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        :root {
            --brand-1: #1d4ed8;
            --brand-2: #1e40af;
            --brand-3: #3b82f6;
            --brand-light: #eff6ff;
            --brand-border: #bfdbfe;
            --sidebar-w: 260px;
            --sidebar-bg: linear-gradient(180deg,#0f172a 0%,#1e3a5f 100%);
            --topbar-h: 64px;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-light: #94a3b8;
            --card-shadow: 0 2px 16px rgba(15,23,42,.08);
            --card-radius: 16px;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: #f1f5f9; color: var(--text-main); font-size: 14px; margin: 0; }

        /* ── Topbar ── */
        .pes-topbar {
            position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
            background: #fff; border-bottom: 1px solid #e2e8f0;
            display: flex; align-items: center; padding: 0 24px;
            z-index: 1000; gap: 12px;
            box-shadow: 0 1px 8px rgba(15,23,42,.06);
        }
        .pes-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
        .pes-brand-icon {
            width: 40px; height: 40px; border-radius: 12px;
            background: linear-gradient(135deg,var(--brand-1),var(--brand-3));
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 800; font-size: 15px; letter-spacing: -1px;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .pes-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 16px; color: var(--text-main); line-height: 1; }
        .pes-brand-sub  { font-size: 11px; color: var(--text-muted); font-weight: 500; }
        @media(max-width:575px) {
            .pes-topbar { padding: 0 16px; }
            .pes-brand-sub { display: none; }
        }
    </style>

    <style>
        /* ── Sidebar ── */
        .pes-sidebar {
            position: fixed; top: var(--topbar-h); left: 0; bottom: 0;
            width: var(--sidebar-w); background: var(--sidebar-bg);
            overflow-y: auto; z-index: 900; padding: 0 0 24px;
            scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
            transition: transform .25s cubic-bezier(.4,0,.2,1);
        }
        .pes-sidebar::-webkit-scrollbar { width: 4px; }
        .pes-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

        /* User card in sidebar */
        .pes-user-card {
            margin: 12px; background: rgba(255,255,255,.07);
            border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 14px;
            display: flex; align-items: center; gap: 12px;
        }
        .pes-user-avatar {
            width: 44px; height: 44px; border-radius: 12px; object-fit: cover;
            background: rgba(255,255,255,.15); flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .pes-user-name  { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
        .pes-user-badge { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .04em; }

        /* Nav */
        .pes-nav-group { padding: 16px 12px 4px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .08em; }
        .pes-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; margin: 2px 8px; border-radius: 10px;
            color: rgba(255,255,255,.7); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s; }
        .pes-nav-item:hover  { background: rgba(255,255,255,.08); color: #fff; }
        .pes-nav-item.active { background: var(--brand-1); color: #fff; font-weight: 600; box-shadow: 0 4px 14px rgba(29,78,216,.4); }
        .pes-nav-item i { font-size: 18px; width: 22px; flex-shrink: 0; }
        .pes-nav-badge { margin-left: auto; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
        .pes-nav-item.w-100 { width: 100%; }

        /* ── Main ── */
        .pes-main {
            margin-left: var(--sidebar-w);
            margin-top: var(--topbar-h);
            min-height: calc(100vh - var(--topbar-h));
            padding: 28px 28px;
        }
        .pes-main-inner {
            max-width: 1280px;
            margin: 0 auto;
        }
        .pes-main--guest {
            margin-left: 0;
        }

        /* ── Mobile sidebar overlay ── */
        .pes-sidebar-overlay {
            display: none;
            position: fixed; inset: 0; z-index: 895;
            background: rgba(15,23,42,.5); backdrop-filter: blur(2px);
        }
        .pes-sidebar-overlay.open { display: block; }
        .pes-hamburger {
            display: none; width: 38px; height: 38px; border-radius: 10px;
            border: 1px solid #e2e8f0; background: #f8fafc;
            align-items: center; justify-content: center;
            cursor: pointer; color: var(--text-muted); flex-shrink: 0;
        }

        /* ── Mobile bottom navigation ── */
        .pes-mobile-nav {
            display: none;
            position: fixed; bottom: 0; left: 0; right: 0; z-index: 990;
            background: #fff; border-top: 1px solid #e2e8f0;
            padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
            box-shadow: 0 -4px 20px rgba(15,23,42,.08);
        }
        .pes-mobile-nav-inner {
            display: flex; align-items: stretch; justify-content: space-around;
        }
        .pes-mob-nav-item {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 3px; padding: 4px 8px; border-radius: 12px;
            text-decoration: none; color: var(--text-muted);
            font-size: 10px; font-weight: 600; flex: 1;
            min-width: 0; transition: all .15s;
        }
        .pes-mob-nav-item i { font-size: 22px; display: block; }
        .pes-mob-nav-item.active { color: var(--brand-1); background: var(--brand-light); }
        .pes-mob-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }

        @media(max-width:991px) {
            .pes-sidebar {
                transform: translateX(-100%);
                /* keep sidebar in DOM for slide-in */
                display: block !important;
                z-index: 900;
                bottom: 0;
                padding-bottom: 80px; /* room for mobile nav */
            }
            .pes-sidebar.open { transform: translateX(0); }
            .pes-main { margin-left: 0; padding: 20px 16px 80px; /* room for bottom nav */ }
            .pes-main--guest { padding-bottom: 20px; }
            .pes-hamburger { display: flex; }
            .pes-mobile-nav { display: block; }
        }
        @media(max-width:575px) {
            .pes-main { padding: 16px 12px 80px; }
            .pes-main--guest { padding-bottom: 16px; }
        }

        /* ── Cards ── */
        .pes-card { background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: 1px solid #e8edf5; }
        .pes-card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
        .pes-card-header-left { display: flex; align-items: center; gap: 10px; }
        .pes-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
        .pes-card-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
        .pes-card-body { padding: 20px; }

        /* ── Stat card ── */
        .pes-stat { background: #fff; border-radius: var(--card-radius); box-shadow: var(--card-shadow); border: 1px solid #e8edf5; padding: 18px 20px; display: flex; align-items: center; gap: 14px; transition: transform .2s, box-shadow .2s; }
        .pes-stat:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(15,23,42,.11); }
        .pes-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
        .pes-stat-val  { font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--text-main); font-family: 'Plus Jakarta Sans', sans-serif; }
        .pes-stat-lbl  { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
        @media(max-width:575px) {
            .pes-stat { padding: 14px; gap: 12px; }
            .pes-stat-icon { width: 44px; height: 44px; font-size: 20px; }
            .pes-stat-val { font-size: 1.4rem; }
        }
    </style>

    <style>
        /* ── Buttons ── */
        .btn-pes-primary { background: var(--brand-1); color: #fff; border: none; border-radius: 10px; padding: 9px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
        .btn-pes-primary:hover { background: var(--brand-2); box-shadow: 0 4px 14px rgba(29,78,216,.35); color: #fff; }
        .btn-pes-secondary { background: #f1f5f9; color: var(--text-main); border: 1px solid #e2e8f0; border-radius: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
        .btn-pes-secondary:hover { background: #e2e8f0; }
        .btn-pes-ghost { background: transparent; color: var(--text-muted); border: none; border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
        .btn-pes-ghost:hover { background: #f1f5f9; color: var(--text-main); }

        /* ── Division badges ── */
        .div-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
        .div-bronze  { background: #fef3c7; color: #92400e; }
        .div-silver  { background: #f1f5f9; color: #475569; }
        .div-gold    { background: #fef9c3; color: #854d0e; }
        .div-plat    { background: #e0f2fe; color: #0c4a6e; }
        .div-diamond { background: #eff6ff; color: #1e40af; }
        .div-master  { background: #f3e8ff; color: #581c87; }
        .div-legend  { background: linear-gradient(135deg,#fef9c3,#fde68a); color: #78350f; }

        /* ── Table ── */
        .pes-table { width: 100%; border-collapse: collapse; }
        .pes-table th { padding: 11px 14px; text-align: left; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; background: #f8fafc; border-bottom: 1px solid #e8edf5; }
        .pes-table td { padding: 12px 14px; font-size: 13px; color: var(--text-main); border-bottom: 1px solid #f1f5f9; }
        .pes-table tbody tr:hover td { background: #fafbff; }
        .pes-table tbody tr:last-child td { border-bottom: none; }

        /* ── Alerts ── */
        .pes-alert { padding: 12px 16px; border-radius: 12px; font-size: 13px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
        .pes-alert-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
        .pes-alert-error   { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }

        /* ── Form ── */
        .pes-input { width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 14px; font-size: 13px; color: var(--text-main); transition: border-color .2s; font-family: inherit; }
        .pes-input:focus { outline: none; border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
        .pes-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }

        /* ── Hero banner ── */
        .pes-hero { background: linear-gradient(135deg,#0f172a 0%,#0f4c81 55%,#1d4ed8 100%); border-radius: 20px; padding: 28px 32px; margin-bottom: 24px; position: relative; overflow: hidden; }
        .pes-hero::before { content:''; position:absolute; top:-60px; right:-60px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.04); pointer-events:none; }
        .pes-hero::after  { content:''; position:absolute; bottom:-70px; left:100px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.03); pointer-events:none; }
        .pes-hero-title { color:#fff; font-size:1.35rem; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:10px; font-family:'Plus Jakarta Sans',sans-serif; flex-wrap:wrap; }
        .pes-hero-sub   { color:rgba(255,255,255,.65); font-size:.84rem; }
        @media(max-width:575px) {
            .pes-hero { padding: 20px 20px; border-radius: 16px; }
            .pes-hero-title { font-size: 1.15rem; }
        }

        /* ── Page header (non-hero) ── */
        .pes-page-header { margin-bottom: 20px; }
        .pes-page-title { font-size: 20px; font-weight: 800; color: #0f172a; font-family: 'Plus Jakarta Sans', sans-serif; margin: 0 0 2px; }
        .pes-page-sub { font-size: 13px; color: #64748b; margin: 0; }

        /* ── ELO progress ── */
        .pes-progress { height: 6px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
        .pes-progress-bar { height: 100%; background: linear-gradient(90deg,var(--brand-1),var(--brand-3)); border-radius: 6px; transition: width .5s; }

        /* ── Topbar right ── */
        .pes-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
        .pes-notif-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; color: var(--text-muted); transition: all .2s; text-decoration: none; }
        .pes-notif-btn:hover { background: #eff6ff; color: var(--brand-1); }
        .pes-notif-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 2px solid #fff; }
        .pes-avatar-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px; border: 1px solid #e2e8f0; background: #f8fafc; cursor: pointer; transition: all .2s; text-decoration: none; color: var(--text-main); }
        .pes-avatar-btn:hover { background: #eff6ff; border-color: var(--brand-border); }
        .pes-avatar-img { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
        .pes-avatar-name { font-size: 13px; font-weight: 600; color: var(--text-main); }

        /* ── Match result colors ── */
        .result-w { background: #f0fdf4; color: #15803d; }
        .result-l { background: #fef2f2; color: #dc2626; }
        .result-d { background: #f8fafc; color: #64748b; }
        .result-badge { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }

        /* ── Responsive table ── */
        @media(max-width:575px) {
            .pes-table th, .pes-table td { padding: 10px 10px; }
            .pes-card-header { padding: 14px 16px; }
            .pes-card-body { padding: 14px 16px; }
            .pes-hero { border-radius: 14px; }
        }
        /* Prevent Bootstrap row negative margins from causing body overflow */
        .pes-main-inner { overflow-x: clip; }
        /* iOS smooth scroll on overflow tables */
        [style*="overflow-x:auto"], [style*="overflow-x: auto"] {
            -webkit-overflow-scrolling: touch;
        }
        /* Prevent layout break from wide content */
        .pes-main-inner { min-width: 0; }
        /* Ensure all text wraps inside cards */
        .pes-card, .pes-card * { word-break: break-word; overflow-wrap: break-word; }
        /* But don't break code/monospace */
        .pes-card code, .pes-card pre, .pes-card [style*="monospace"] { word-break: normal; }

        /* ── Pagination ── */
        .pagination { gap: 4px; }
        .page-link { border-radius: 8px !important; border: 1px solid #e2e8f0; color: #64748b; font-size: 13px; font-weight: 600; padding: 6px 12px; }
        .page-link:hover { background: #eff6ff; color: var(--brand-1); border-color: var(--brand-border); }
        .page-item.active .page-link { background: var(--brand-1); border-color: var(--brand-1); color: #fff; }
        .page-item.disabled .page-link { opacity: .4; }
    </style>
    @stack('styles')
</head>
<body>

<!-- ── Topbar ── -->
<header class="pes-topbar">
    @auth
    <button class="pes-hamburger" onclick="toggleSidebar()" aria-label="Menu" id="hamburger-btn">
        <i class="ti ti-menu-2" style="font-size:20px"></i>
    </button>
    @endauth
    <a href="{{ route('home') }}" class="pes-brand">
        <div class="pes-brand-icon">PL</div>
        <div>
            <div class="pes-brand-name">PES 2026 League</div>
            <div class="pes-brand-sub">Competitive PES 2026 PS2</div>
        </div>
    </a>

    @guest
    <nav class="d-none d-md-flex align-items-center gap-3 ms-4">
        <a href="{{ route('leaderboard.index') }}" class="btn-pes-ghost" style="text-decoration:none">Leaderboard</a>
        <a href="{{ route('tournament.index') }}" class="btn-pes-ghost" style="text-decoration:none">Tournament</a>
    </nav>
    @endguest

    <div class="pes-topbar-right">
        @auth
        <a href="#" class="pes-notif-btn">
            <i class="ti ti-bell" style="font-size:18px"></i>
            <span class="pes-notif-dot"></span>
        </a>

        <div class="dropdown">
            <a class="pes-avatar-btn dropdown-toggle" href="#" data-bs-toggle="dropdown">
                <img src="{{ auth()->user()->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode(auth()->user()->username).'&background=1d4ed8&color=fff&size=64' }}"
                     class="pes-avatar-img" alt="avatar">
                <span class="pes-avatar-name d-none d-sm-block">{{ auth()->user()->username }}</span>
            </a>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm" style="border-radius:14px;border:1px solid #e8edf5;min-width:180px;margin-top:8px">
                <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="{{ route('profile.show') }}"><i class="ti ti-user" style="font-size:16px;color:#64748b"></i> My Profile</a></li>
                <li><a class="dropdown-item d-flex align-items-center gap-2 py-2" href="{{ route('match.history') }}"><i class="ti ti-history" style="font-size:16px;color:#64748b"></i> Match History</a></li>
                <li><hr class="dropdown-divider my-1"></li>
                <li>
                    <form method="POST" action="{{ route('auth.logout') }}">
                        @csrf
                        <button type="submit" class="dropdown-item d-flex align-items-center gap-2 py-2" style="color:#ef4444">
                            <i class="ti ti-logout" style="font-size:16px"></i> Logout
                        </button>
                    </form>
                </li>
            </ul>
        </div>
        @else
        <a href="{{ route('auth.discord') }}" class="btn-pes-primary" style="text-decoration:none">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
            Login with Discord
        </a>
        @endauth
    </div>
</header>

<div class="d-flex" style="overflow-x:hidden">
    @auth
    <!-- Overlay for mobile sidebar -->
    <div class="pes-sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
    @include('layouts.sidebar')
    @endauth

    <main class="pes-main flex-grow-1 @guest pes-main--guest @endguest">
        <div class="pes-main-inner">
        @php $viewErrors = isset($errors) ? $errors : new \Illuminate\Support\MessageBag(); @endphp

        @if (session('success'))
        <div class="pes-alert pes-alert-success">
            <i class="ti ti-circle-check" style="font-size:18px;flex-shrink:0"></i>
            <span class="flex-grow-1">{{ session('success') }}</span>
            <button onclick="this.closest('.pes-alert').remove()" style="background:none;border:none;cursor:pointer;color:inherit;padding:0;font-size:18px;line-height:1">×</button>
        </div>
        @endif

        @if (session('error'))
        <div class="pes-alert pes-alert-error">
            <i class="ti ti-alert-circle" style="font-size:18px;flex-shrink:0"></i>
            <span class="flex-grow-1">{{ session('error') }}</span>
            <button onclick="this.closest('.pes-alert').remove()" style="background:none;border:none;cursor:pointer;color:inherit;padding:0;font-size:18px;line-height:1">×</button>
        </div>
        @endif

        @if ($viewErrors->any())
        <div class="pes-alert pes-alert-error">
            <i class="ti ti-alert-circle" style="font-size:18px;flex-shrink:0;align-self:flex-start;margin-top:2px"></i>
            <div>
                <div style="font-weight:700;margin-bottom:4px">Mohon perbaiki kesalahan berikut:</div>
                <ul style="margin:0;padding-left:16px">
                    @foreach ($viewErrors->all() as $error)<li>{{ $error }}</li>@endforeach
                </ul>
            </div>
        </div>
        @endif

        {{ $slot }}
        </div>
    </main>
</div>

@auth
{{-- ── Mobile Bottom Navigation ── --}}
<nav class="pes-mobile-nav" id="mobile-bottom-nav">
    <div class="pes-mobile-nav-inner">
        <a href="{{ route('dashboard') }}"
           class="pes-mob-nav-item {{ request()->routeIs('dashboard') ? 'active' : '' }}">
            <i class="ti ti-home"></i>
            <span>Home</span>
        </a>
        <a href="{{ route('matchmaking.index') }}"
           class="pes-mob-nav-item {{ request()->routeIs('matchmaking*') ? 'active' : '' }}">
            <i class="ti ti-bolt"></i>
            <span>Play</span>
        </a>
        <a href="{{ route('leaderboard.index') }}"
           class="pes-mob-nav-item {{ request()->routeIs('leaderboard*') ? 'active' : '' }}">
            <i class="ti ti-trophy"></i>
            <span>Rank</span>
        </a>
        <a href="{{ route('tournament.index') }}"
           class="pes-mob-nav-item {{ request()->routeIs('tournament*') ? 'active' : '' }}">
            <i class="ti ti-medal"></i>
            <span>Turnamen</span>
        </a>
        <a href="{{ route('profile.show') }}"
           class="pes-mob-nav-item {{ request()->routeIs('profile*') ? 'active' : '' }}">
            <i class="ti ti-user"></i>
            <span>Profil</span>
        </a>
    </div>
</nav>
@endauth

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
window.appUrl = '{{ rtrim(config('app.url'), '/') }}';
window.getDivision = function(elo) {
    if (elo >= 2500) return {name:'Legend',  cls:'div-legend',  icon:'👑'};
    if (elo >= 2200) return {name:'Master',  cls:'div-master',  icon:'💎'};
    if (elo >= 1900) return {name:'Diamond', cls:'div-diamond', icon:'🔷'};
    if (elo >= 1600) return {name:'Platinum',cls:'div-plat',    icon:'🔵'};
    if (elo >= 1300) return {name:'Gold',    cls:'div-gold',    icon:'🥇'};
    if (elo >= 1000) return {name:'Silver',  cls:'div-silver',  icon:'🥈'};
    return               {name:'Bronze', cls:'div-bronze', icon:'🥉'};
};

/* ── Mobile sidebar toggle ── */
function toggleSidebar() {
    var sidebar = document.querySelector('.pes-sidebar');
    var overlay = document.getElementById('sidebar-overlay');
    var btn     = document.getElementById('hamburger-btn');
    if (!sidebar) return;
    var isOpen = sidebar.classList.toggle('open');
    if (overlay) overlay.classList.toggle('open', isOpen);
    if (btn) btn.querySelector('i').className = isOpen ? 'ti ti-x' : 'ti ti-menu-2';
    document.body.style.overflow = isOpen ? 'hidden' : '';
}
/* Close sidebar on nav item click (mobile) */
document.addEventListener('DOMContentLoaded', function() {
    var sidebar = document.querySelector('.pes-sidebar');
    if (!sidebar) return;
    sidebar.querySelectorAll('.pes-nav-item').forEach(function(a) {
        a.addEventListener('click', function() {
            if (window.innerWidth < 992) toggleSidebar();
        });
    });
});

window.axios = {
    defaults: { headers: { common: {} } },
    async post(url, data, cfg) {
        const csrf = document.querySelector('meta[name=csrf-token]')?.content;
        const fullUrl = (window.appUrl || '') + url;
        const res = await fetch(fullUrl, {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'Accept': 'application/json',
                ...((cfg||{}).headers||{})
            },
            body: JSON.stringify(data)
        });
        let json;
        try { json = await res.json(); } catch(e) { json = {}; }
        if (!res.ok) {
            const err = new Error(json.message || 'HTTP ' + res.status);
            err.response = { status: res.status, data: json };
            throw err;
        }
        return { data: json, ok: true };
    },
    async get(url) {
        const fullUrl = (window.appUrl || '') + url;
        const res = await fetch(fullUrl, {
            credentials: 'same-origin',
            headers: { 'Accept': 'application/json' }
        });
        let json;
        try { json = await res.json(); } catch(e) { json = {}; }
        if (!res.ok) {
            const err = new Error(json.message || 'HTTP ' + res.status);
            err.response = { status: res.status, data: json };
            throw err;
        }
        return { data: json, ok: true };
    }
};
</script>
@stack('scripts')
</body>
</html>