@extends('layouts.app')

@section('title', 'Match Details')

@section('content')
<div class="container-fluid px-3 py-3">

    {{-- Breadcrumb --}}
    <div class="mb-4">
        <a href="/preview/matches" class="text-decoration-none text-muted fs-xs d-inline-flex align-items-center gap-1">
            <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Back to Matches
        </a>
    </div>

    {{-- Match Header Card --}}
    <div class="card-arena mb-4 overflow-hidden position-relative" style="background: radial-gradient(circle at center, rgba(12, 16, 32, 0.75) 0%, rgba(6, 8, 14, 0.98) 100%) !important;">
        {{-- Scan line + overlay background --}}
        <div style="position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,0.015) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;"></div>
        
        <div class="p-4 position-relative z-1">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <span class="badge" style="background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.05em; padding:4px 10px;">
                    {{ strtoupper($match['status']) }}
                </span>
                <span class="text-muted" style="font-size:0.7rem;">{{ $match['game'] }} &bull; {{ $match['format'] }}</span>
            </div>

            <div class="row align-items-center py-3">
                {{-- Home --}}
                <div class="col-md-5 d-flex align-items-center gap-3 justify-content-end text-end flex-row-reverse flex-md-row">
                    <div>
                        <h2 class="text-white fw-900 mb-1" style="font-size: clamp(1.1rem, 2vw, 1.6rem);">{{ $match['home']['name'] }}</h2>
                        <span class="text-muted fs-xs">{{ $match['home']['region'] ?? 'MENA' }}</span>
                    </div>
                    <img src="{{ asset($match['home']['logo']) }}" alt="{{ $match['home']['name'] }}"
                         style="width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.08); background: var(--arena-surface-02);"
                         onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2272%22><rect width=%2272%22 height=%2272%22 rx=%2212%22 fill=%22%231D2030%22/><text x=%2250%25%22 y=%2256%25%22 text-anchor=%22middle%22 fill=%22%2300d4ff%22 font-size=%2232%22>🛡️</text></svg>'">
                </div>

                {{-- Score --}}
                <div class="col-md-2 text-center my-3 my-md-0">
                    <div class="d-flex align-items-center justify-content-center gap-3">
                        <span class="fw-900 text-white" style="font-size: clamp(2rem, 4vw, 3rem);">{{ $match['score']['home'] }}</span>
                        <span class="text-muted fw-800" style="font-size: 1.2rem;">:</span>
                        <span class="fw-900 text-white" style="font-size: clamp(2rem, 4vw, 3rem);">{{ $match['score']['away'] }}</span>
                    </div>
                    <span class="text-muted fs-xs block mt-1">Final Score</span>
                </div>

                {{-- Away --}}
                <div class="col-md-5 d-flex align-items-center gap-3 text-start">
                    <img src="{{ asset($match['away']['logo']) }}" alt="{{ $match['away']['name'] }}"
                         style="width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,0.08); background: var(--arena-surface-02);"
                         onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2272%22 height=%2272%22><rect width=%2272%22 height=%2272%22 rx=%2212%22 fill=%22%231D2030%22/><text x=%2250%25%22 y=%2256%25%22 text-anchor=%22middle%22 fill=%22%237c5cfc%22 font-size=%2232%22>🛡️</text></svg>'">
                    <div>
                        <h2 class="text-white fw-900 mb-1" style="font-size: clamp(1.1rem, 2vw, 1.6rem);">{{ $match['away']['name'] }}</h2>
                        <span class="text-muted fs-xs">{{ $match['away']['region'] ?? 'Global' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <ul class="nav nav-tabs mb-4" id="matchTab" role="tablist" style="border-bottom: 1px solid rgba(255, 255, 255, 0.08);">
        <li class="nav-item" role="presentation">
            <button class="nav-link active text-white" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" style="background:transparent;border:none;border-bottom:2px solid var(--arena-broadcast-blue);font-weight:700;font-size:0.8rem;padding:10px 16px;">
                LOBBY STATS
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link text-white-50" id="rosters-tab" data-bs-toggle="tab" data-bs-target="#rosters" type="button" role="tab" style="background:transparent;border:none;font-weight:700;font-size:0.8rem;padding:10px 16px;">
                ROSTERS
            </button>
        </li>
    </ul>

    <div class="tab-content" id="matchTabContent">
        {{-- Lobby Stats tab --}}
        <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
            <div class="row g-3">
                {{-- Match analytics --}}
                <div class="col-lg-8">
                    <div class="card-arena p-4 mb-3">
                        <h3 class="text-white fw-800 mb-3" style="font-size:0.95rem;">Lobby Performances</h3>
                        
                        {{-- Custom stat bars --}}
                        @foreach([
                            'Kills / Deaths' => [152, 118, '60%', '40%'],
                            'Headshot Accuracy' => [28, 22, '56%', '44%'],
                            'Spike Plants / Defuses' => [6, 4, '60%', '40%'],
                            'Utility Efficiency' => [88, 79, '53%', '47%']
                        ] as $title => $vals)
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="text-white fw-700" style="font-size:0.8rem;">{{ $vals[0] }}</span>
                                <span class="text-muted" style="font-size:0.7rem;">{{ $title }}</span>
                                <span class="text-white fw-700" style="font-size:0.8rem;">{{ $vals[1] }}</span>
                            </div>
                            <div class="progress" style="height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 3px;">
                                <div class="progress-bar" role="progressbar" style="width: {{ $vals[2] }}; background: var(--arena-broadcast-blue);" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar" role="progressbar" style="width: {{ $vals[3] }}; background: var(--arena-violet);" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Sidebar --}}
                <div class="col-lg-4">
                    <div class="card-arena p-4">
                        <h3 class="text-white fw-800 mb-3" style="font-size:0.95rem;">Broadcasting & stream</h3>
                        <a href="https://twitch.tv" target="_blank" class="btn-arena btn-primary w-100 py-2 d-flex align-items-center justify-content-center gap-2">
                            <i class="bi bi-twitch"></i>
                            Watch Replay
                        </a>
                    </div>
                </div>
            </div>
        </div>

        {{-- Rosters tab --}}
        <div class="tab-pane fade" id="rosters" role="tabpanel" aria-labelledby="rosters-tab">
            <div class="row g-3">
                {{-- Home Roster --}}
                <div class="col-md-6">
                    <div class="card-arena p-4">
                        <h3 class="text-white fw-800 mb-3" style="font-size:0.95rem;">{{ $match['home']['name'] }} Roster</h3>
                        <div class="d-flex flex-column gap-2">
                            @for($i = 1; $i <= 5; $i++)
                            <div class="d-flex align-items-center justify-content-between p-2" style="background: rgba(255,255,255,0.02); border-radius: 8px;">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-muted fw-700" style="font-size: 0.75rem;">#{{ $i }}</span>
                                    <span class="text-white fw-700" style="font-size: 0.85rem;">Athlete_{{ $i }}</span>
                                </div>
                                <span style="font-size: 0.7rem; font-weight: 700; color: var(--arena-broadcast-blue); text-transform: uppercase;">Rifler</span>
                            </div>
                            @endfor
                        </div>
                    </div>
                </div>

                {{-- Away Roster --}}
                <div class="col-md-6">
                    <div class="card-arena p-4">
                        <h3 class="text-white fw-800 mb-3" style="font-size:0.95rem;">{{ $match['away']['name'] }} Roster</h3>
                        <div class="d-flex flex-column gap-2">
                            @for($i = 1; $i <= 5; $i++)
                            <div class="d-flex align-items-center justify-content-between p-2" style="background: rgba(255,255,255,0.02); border-radius: 8px;">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-muted fw-700" style="font-size: 0.75rem;">#{{ $i }}</span>
                                    <span class="text-white fw-700" style="font-size: 0.85rem;">Opponent_{{ $i }}</span>
                                </div>
                                <span style="font-size: 0.7rem; font-weight: 700; color: var(--arena-violet); text-transform: uppercase;">Sniper</span>
                            </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
