<x-app-layout>
    <x-slot name="title">Admin Panel</x-slot>

    <div class="pes-hero mb-4" style="background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 55%,#4f46e5 100%)">
        <div style="position:relative;z-index:1">
            <div class="pes-hero-title"><i class="ti ti-settings" style="font-size:22px"></i> Admin Panel</div>
            <div class="pes-hero-sub">Kelola pemain, pertandingan, dan turnamen</div>
        </div>
    </div>

    <!-- Stat cards -->
    <div class="row g-3 mb-4">
        @foreach([
            ['Total Pemain', $stats['total_players'], 'ti-users', '#eff6ff', '#1d4ed8'],
            ['Total Match', $stats['total_matches'], 'ti-ball-football', '#f0fdf4', '#16a34a'],
            ['Antrian Aktif', $stats['active_queue'], 'ti-bolt', '#fef9c3', '#ca8a04'],
            ['Disputes', $stats['disputed_matches'], 'ti-alert-triangle', '#fef2f2', '#dc2626'],
        ] as [$l,$v,$ic,$bg,$c])
        <div class="col-6 col-lg-3">
            <div class="pes-stat">
                <div class="pes-stat-icon" style="background:{{ $bg }};color:{{ $c }}"><i class="ti {{ $ic }}"></i></div>
                <div>
                    <div class="pes-stat-val" style="color:{{ $c }}">{{ number_format($v) }}</div>
                    <div class="pes-stat-lbl">{{ $l }}</div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Quick nav -->
    <div class="row g-3 mb-4">
        @foreach([
            ['admin.players','ti-users','Kelola Pemain','Buka','#eff6ff','#1d4ed8'],
            ['admin.matches','ti-ball-football','Review Match','Buka','#f0fdf4','#16a34a'],
            ['admin.tournaments','ti-medal','Turnamen','Buka','#fef9c3','#ca8a04'],
        ] as [$route,$ic,$title,$btn,$bg,$c])
        <div class="col-md-4">
            <a href="{{ route($route) }}" style="text-decoration:none">
                <div class="pes-card p-4 d-flex align-items-center gap-3" style="transition:all .2s"
                     onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 20px rgba(15,23,42,.1)'"
                     onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="width:48px;height:48px;border-radius:14px;background:{{ $bg }};color:{{ $c }};display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0">
                        <i class="ti {{ $ic }}"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div style="font-size:14px;font-weight:700;color:#0f172a">{{ $title }}</div>
                        <div style="font-size:12px;color:#94a3b8">Klik untuk membuka →</div>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>

    <div class="row g-4">
        <!-- Disputes -->
        <div class="col-lg-6">
            <div class="pes-card">
                <div class="pes-card-header">
                    <div class="pes-card-header-left">
                        <div class="pes-card-icon" style="background:#fef9c3;color:#ca8a04"><i class="ti ti-alert-triangle"></i></div>
                        <span class="pes-card-title">Skor Sengketa</span>
                        @if($disputedMatches->count() > 0)
                        <span style="background:#ef4444;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px">{{ $disputedMatches->count() }}</span>
                        @endif
                    </div>
                    <a href="{{ route('admin.matches', ['status'=>'disputed']) }}" class="btn-pes-ghost" style="font-size:12px;text-decoration:none">Semua →</a>
                </div>
                <div style="padding:0">
                    @forelse($disputedMatches as $match)
                    <div class="d-flex align-items-center gap-3 px-3 py-3" style="border-bottom:1px solid #f1f5f9">
                        <div style="flex:1;min-width:0">
                            <div style="font-size:13px;font-weight:600;color:#0f172a" class="text-truncate">
                                {{ $match->host->username }} vs {{ $match->guest->username }}
                            </div>
                            <div style="font-size:11px;color:#94a3b8">
                                Host: {{ $match->submitted_host_score_host }}-{{ $match->submitted_host_score_guest }}
                                · Guest: {{ $match->submitted_guest_score_host }}-{{ $match->submitted_guest_score_guest }}
                            </div>
                        </div>
                        <a href="{{ route('admin.matches', ['status'=>'disputed']) }}" class="btn-pes-secondary" style="font-size:12px;padding:6px 12px;text-decoration:none;flex-shrink:0">
                            Resolve
                        </a>
                    </div>
                    @empty
                    <div style="padding:36px;text-align:center">
                        <div style="font-size:28px;margin-bottom:8px">✅</div>
                        <div style="font-size:13px;color:#64748b">Tidak ada sengketa</div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Recent matches -->
        <div class="col-lg-6">
            <div class="pes-card">
                <div class="pes-card-header">
                    <div class="pes-card-header-left">
                        <div class="pes-card-icon" style="background:#eff6ff;color:#1d4ed8"><i class="ti ti-history"></i></div>
                        <span class="pes-card-title">Match Terbaru</span>
                    </div>
                </div>
                <div style="padding:0">
                    @foreach($recentMatches as $match)
                    <div class="d-flex align-items-center gap-2 px-3 py-2" style="border-bottom:1px solid #f8fafc;font-size:13px">
                        <span style="padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;
                            {{ match($match->status) {
                                'completed' => 'background:#f0fdf4;color:#15803d',
                                'disputed'  => 'background:#fef9c3;color:#ca8a04',
                                'in_progress' => 'background:#eff6ff;color:#1d4ed8',
                                default => 'background:#f1f5f9;color:#64748b',
                            } }}">
                            {{ ucfirst(str_replace('_',' ',$match->status)) }}
                        </span>
                        <span style="flex:1;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
                            {{ $match->host->username }} vs {{ $match->guest->username }}
                        </span>
                        @if($match->status === 'completed')
                        <span style="font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;flex-shrink:0">{{ $match->score_host }}-{{ $match->score_guest }}</span>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
