@extends('layouts.app')

@section('title', 'Leaderboards & Rankings')

@section('content')
<div class="container-fluid px-4 py-4 rankings-hero-bg" data-reveal>

    {{-- Page Hero --}}
    <div class="page-hero mb-4">
        <div class="page-hero-content d-flex align-items-start justify-content-between flex-wrap gap-3">
            <div class="page-hero-inner" style="padding:4px 8px;">
                <h1 class="page-heading-pixel mb-1">
                    <span style="color:#FFD700; text-shadow: 0 0 12px rgba(255,215,0,0.5);">//</span> Leaderboards
                </h1>
                <p class="page-subheading">Climb the ladder. Claim your legacy. Resets every season.</p>
            </div>
            <span class="badge-arena badge-accent" style="font-family:var(--font-hud); letter-spacing:0.08em; align-self:flex-start;">
                <span style="width:6px;height:6px;border-radius:50%;background:var(--arena-green);box-shadow:0 0 8px rgba(34,212,126,0.7);display:inline-block;"></span>
                Season 1: Active
            </span>
        </div>
    </div>

    {{-- Game Selector Tabs --}}
    <div class="filter-hud p-3 mb-5">
        <div class="filter-hud-inner">
            <form method="GET" action="{{ route('preview.rankings') }}" class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div class="d-flex gap-2 flex-wrap">
                    @foreach($games as $game)
                        <button type="submit" name="game" value="{{ $game['id'] }}"
                                class="btn-arena btn-sm game-tab-btn {{ $activeGame === $game['id'] ? 'btn-primary' : 'btn-secondary' }}">
                            {{ $game['name'] }}
                        </button>
                    @endforeach
                </div>
            </form>
        </div>
    </div>

    {{-- TOP 3 PODIUM --}}
    @if(count($players) >= 3)
    <div class="rankings-podium mb-5">
        {{-- 2nd place --}}
        <div class="podium-card podium-2">
            <div class="podium-card-inner">
                <div class="podium-rank-number">2</div>
                <img src="{{ asset($players[1]['avatar']) }}" alt="{{ $players[1]['username'] }}"
                     class="podium-avatar"
                     onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22><rect width=%2264%22 height=%2264%22 rx=%2232%22 fill=%22%231D2030%22/></svg>'">
                <div class="podium-name">{{ $players[1]['username'] }}</div>
                <div class="podium-score">{{ number_format($players[1]['stats']['points']) }} RP</div>
                <div style="font-family:var(--font-hud); font-size:0.65rem; color:rgba(168,180,192,0.6); margin-top:4px; letter-spacing:0.06em;">{{ $players[1]['stats']['win_rate'] }}% WR</div>
            </div>
        </div>

        {{-- 1st place (center, elevated) --}}
        <div class="podium-card podium-1" style="transform: scale(1.04); z-index:2;">
            <div class="hud-scan-line"></div>
            <div class="podium-card-inner">
                <div style="font-size:1.2rem; margin-bottom:4px; filter:drop-shadow(0 0 8px rgba(255,215,0,0.7));">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#FFD700" xmlns="http://www.w3.org/2000/svg"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z" fill="#FFD700" opacity=".3" stroke="#FFD700" stroke-width="1.5"/></svg>
                </div>
                <div class="podium-rank-number">1</div>
                <img src="{{ asset($players[0]['avatar']) }}" alt="{{ $players[0]['username'] }}"
                     class="podium-avatar"
                     onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2276%22 height=%2276%22><rect width=%2276%22 height=%2276%22 rx=%2238%22 fill=%22%231D2030%22/></svg>'">
                <div class="podium-name" style="font-size:0.95rem;">{{ $players[0]['username'] }}</div>
                <div class="podium-score">{{ number_format($players[0]['stats']['points']) }} RP</div>
                <div style="font-family:var(--font-hud); font-size:0.65rem; color:rgba(255,215,0,0.7); margin-top:4px; letter-spacing:0.06em;">{{ $players[0]['stats']['win_rate'] }}% WR</div>
            </div>
        </div>

        {{-- 3rd place --}}
        <div class="podium-card podium-3">
            <div class="podium-card-inner">
                <div class="podium-rank-number">3</div>
                <img src="{{ asset($players[2]['avatar']) }}" alt="{{ $players[2]['username'] }}"
                     class="podium-avatar"
                     onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22><rect width=%2264%22 height=%2264%22 rx=%2232%22 fill=%22%221D2030%22/></svg>'">
                <div class="podium-name">{{ $players[2]['username'] }}</div>
                <div class="podium-score">{{ number_format($players[2]['stats']['points']) }} RP</div>
                <div style="font-family:var(--font-hud); font-size:0.65rem; color:rgba(205,127,50,0.6); margin-top:4px; letter-spacing:0.06em;">{{ $players[2]['stats']['win_rate'] }}% WR</div>
            </div>
        </div>
    </div>
    @endif

    {{-- Main leaderboard + teams --}}
    <div class="row g-4">
        {{-- Players Ladder --}}
        <div class="col-lg-8">
            <div class="card-arena card-gold">
                <div class="card-header" style="background:linear-gradient(180deg,rgba(255,215,0,0.05),transparent);">
                    <span class="card-title" style="font-family:var(--font-pixel); font-size:0.7rem; color:#FFD700; text-shadow:0 0 8px rgba(255,215,0,0.4);">
                        Top Players Ladder
                    </span>
                    <span class="badge-arena badge-warm" style="font-size:0.6rem;">Full Season</span>
                </div>
                <div class="table-responsive">
                    <table class="table-arena mb-0 align-middle">
                        <thead>
                            <tr>
                                <th style="width: 60px;">#</th>
                                <th>Competitor</th>
                                <th>Roster Team</th>
                                <th>RP Rating</th>
                                <th>Win Ratio</th>
                                <th style="text-align: end;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($players as $i => $p)
                            <tr class="{{ $i === 0 ? 'rank-row-1' : ($i === 1 ? 'rank-row-2' : ($i === 2 ? 'rank-row-3' : '')) }}"
                                style="transition: background 120ms ease;">
                                <td>
                                    <span class="rank-position {{ $i === 0 ? 'top-1' : ($i === 1 ? 'top-2' : ($i === 2 ? 'top-3' : '')) }}">
                                        @if($i === 0)
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="#FFD700" style="vertical-align:middle; filter:drop-shadow(0 0 6px rgba(255,215,0,0.7));"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z" opacity=".3"/></svg>
                                        @elseif($i === 1)
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="#C8D4E0" style="vertical-align:middle; filter:drop-shadow(0 0 5px rgba(168,180,192,0.5));"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z" opacity=".3"/></svg>
                                        @elseif($i === 2)
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="#E8A055" style="vertical-align:middle; filter:drop-shadow(0 0 5px rgba(205,127,50,0.5));"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2z" opacity=".3"/></svg>
                                        @else
                                            {{ $i + 1 }}
                                        @endif
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center gap-3">
                                        <img src="{{ asset($p['avatar']) }}" alt="{{ $p['username'] }}"
                                             style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1.5px solid {{ $i === 0 ? 'rgba(255,215,0,0.5)' : 'var(--arena-border-accent)' }}; box-shadow: 0 0 8px {{ $i === 0 ? 'rgba(255,215,0,0.25)' : 'rgba(0,212,255,0.15)' }};"
                                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22><rect width=%2236%22 height=%2236%22 rx=%2218%22 fill=%22%231D2030%22/></svg>'">
                                        <div>
                                            <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.85rem;">{{ $p['username'] }}</div>
                                            <div style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted); letter-spacing:0.04em;">{{ $p['flag'] }} {{ $p['country_name'] }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($p['current_team'])
                                        <span style="font-family:var(--font-hud); font-weight:600; color:var(--arena-text-primary); font-size:0.82rem;">{{ $p['current_team']['name'] }}</span>
                                    @else
                                        <span style="font-family:var(--font-hud); font-size:0.75rem; color:var(--arena-text-muted);">Free Agent</span>
                                    @endif
                                </td>
                                <td>
                                    <span style="font-family:var(--font-hud); font-weight:800; font-size:0.85rem; color:{{ $i === 0 ? '#FFD700' : 'var(--arena-accent)' }}; text-shadow:{{ $i === 0 ? '0 0 8px rgba(255,215,0,0.5)' : '0 0 6px rgba(0,212,255,0.3)' }};">
                                        {{ number_format($p['stats']['points']) }} RP
                                    </span>
                                </td>
                                <td>
                                    <span style="font-family:var(--font-hud); font-weight:700; color:var(--arena-green); font-size:0.82rem;">{{ $p['stats']['win_rate'] }}%</span>
                                </td>
                                <td style="text-align: end;">
                                    <a href="/preview/players/{{ $p['slug'] }}" class="btn-arena btn-secondary btn-xs">Profile</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- Teams Ladder --}}
        <div class="col-lg-4">
            <div class="card-arena card-violet">
                <div class="card-header" style="background:linear-gradient(180deg,rgba(124,92,252,0.06),transparent);">
                    <span class="card-title" style="font-family:var(--font-pixel); font-size:0.7rem; color:var(--arena-violet); text-shadow:0 0 8px rgba(124,92,252,0.4);">
                        Top Active Teams
                    </span>
                </div>
                <div class="p-3 d-flex flex-column gap-2">
                    @foreach($teams as $i => $team)
                    <div class="d-flex align-items-center justify-content-between p-3"
                         style="background: rgba(15,17,23,0.8); border-radius: 6px; border: 1px solid rgba(124,92,252,0.12); transition: all 160ms ease; {{ $i < 3 ? 'border-left: 2px solid ' . ($i === 0 ? 'rgba(255,215,0,0.5)' : ($i === 1 ? 'rgba(168,180,192,0.4)' : 'rgba(205,127,50,0.4)')) . ';' : '' }}"
                         onmouseover="this.style.background='rgba(124,92,252,0.06)'; this.style.borderColor='rgba(124,92,252,0.25)';"
                         onmouseout="this.style.background='rgba(15,17,23,0.8)'; this.style.borderColor='rgba(124,92,252,{{ $i < 3 ? '0.12' : '0.12' }}';">
                        <div class="d-flex align-items-center gap-3">
                            <span class="rank-position {{ $i === 0 ? 'top-1' : ($i === 1 ? 'top-2' : ($i === 2 ? 'top-3' : '')) }}"
                                  style="width: 20px; font-size:0.8rem;">{{ $i + 1 }}</span>
                            <img src="{{ asset($team['logo']) }}" alt="{{ $team['name'] }}"
                                 style="width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: var(--arena-surface-03); padding: 3px; border: 1px solid rgba(124,92,252,0.2);">
                            <div>
                                <div style="font-family:var(--font-hud); font-weight:700; color:var(--arena-text-primary); font-size:0.8rem;">{{ $team['name'] }}</div>
                                <div style="font-family:var(--font-hud); font-size:0.65rem; color:var(--arena-text-muted); letter-spacing:0.04em;">{{ $team['flag'] }} {{ $team['region'] }}</div>
                            </div>
                        </div>
                        <span style="font-family:var(--font-hud); font-weight:800; font-size:0.78rem; color:var(--arena-violet); text-shadow:0 0 6px rgba(124,92,252,0.4);">
                            {{ number_format($team['stats']['points']) }} RP
                        </span>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
