@extends('layouts.app')

@section('title', 'Matches')

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

    {{-- Page header --}}
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="text-white fw-800 mb-1" style="font-size:1.4rem;">Matches</h1>
            <p class="text-muted fs-xs mb-0">Recent & upcoming competitive matches</p>
        </div>
        <div class="d-flex gap-2">
            <select class="form-select form-select-sm input-arena" style="width:auto;font-size:0.75rem;">
                <option value="">All Games</option>
                @foreach($games as $g)
                <option value="{{ $g['id'] }}">{{ $g['name'] }}</option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- Status tabs --}}
    <div class="d-flex gap-2 mb-4">
        @foreach(['all' => 'All', 'live' => '🔴 Live', 'completed' => 'Completed', 'upcoming' => 'Upcoming'] as $key => $label)
        <button class="btn-arena btn-xs {{ $key === 'all' ? 'btn-primary' : 'btn-secondary' }}"
                style="font-size:0.7rem; padding:4px 14px;">{{ $label }}</button>
        @endforeach
    </div>

    {{-- Match cards grid --}}
    <div class="d-flex flex-column gap-3">
        @foreach($matches as $match)
        @php
            $statusColor = match($match['status']) {
                'live'      => '#ef4444',
                'completed' => '#22c55e',
                'upcoming'  => '#f59e0b',
                default     => '#64748b',
            };
            $statusLabel = match($match['status']) {
                'live'      => '🔴 LIVE',
                'completed' => '✅ Final',
                'upcoming'  => '🕐 Upcoming',
                default     => ucfirst($match['status']),
            };
        @endphp
        <a href="/preview/matches/{{ $match['id'] }}" class="text-decoration-none">
            <div class="card-arena p-0 overflow-hidden" style="transition: transform 0.2s, box-shadow 0.2s; cursor:pointer;"
                 onmouseenter="this.style.transform='translateY(-2px)';this.style.boxShadow='0 16px 40px rgba(0,0,0,0.7)'"
                 onmouseleave="this.style.transform='';this.style.boxShadow=''">

                {{-- Top row: status + game + format --}}
                <div class="d-flex align-items-center justify-content-between px-4 pt-3 pb-2"
                     style="border-bottom:1px solid rgba(255,255,255,0.05);">
                    <div class="d-flex align-items-center gap-3">
                        <span style="font-size:0.6rem; font-weight:800; color:{{ $statusColor }}; text-transform:uppercase; letter-spacing:0.1em;">
                            {{ $statusLabel }}
                        </span>
                        <span class="text-muted" style="font-size:0.65rem;">{{ $match['game'] }}</span>
                        <span class="text-muted" style="font-size:0.65rem; background:rgba(255,255,255,0.06); border-radius:4px; padding:1px 6px;">
                            {{ $match['format'] }}
                        </span>
                    </div>
                    <span class="text-muted" style="font-size:0.6rem;">
                        {{ \Carbon\Carbon::parse($match['played_at'])->diffForHumans() }}
                    </span>
                </div>

                {{-- Teams vs score --}}
                <div class="d-flex align-items-center justify-content-between px-4 py-3">

                    {{-- Home team --}}
                    <div class="d-flex align-items-center gap-3" style="flex:1;">
                        <img src="{{ asset($match['home']['logo']) }}" alt="{{ $match['home']['name'] }}"
                             style="width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--arena-surface-02);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 rx=%228%22 fill=%22%231D2030%22/><text x=%2250%25%22 y=%2256%25%22 text-anchor=%22middle%22 fill=%22%2300d4ff%22 font-size=%2218%22>🛡️</text></svg>'">
                        <div>
                            <div class="fw-800 text-white" style="font-size:0.9rem;">{{ $match['home']['name'] }}</div>
                            <div class="text-muted" style="font-size:0.6rem;">{{ $match['home']['region'] ?? 'Global' }}</div>
                        </div>
                    </div>

                    {{-- Score / VS --}}
                    <div class="text-center px-4">
                        @if($match['score'])
                            <div class="d-flex align-items-center gap-3">
                                <span class="fw-900 text-white" style="font-size:1.6rem;min-width:28px;text-align:center;">
                                    {{ $match['score']['home'] }}
                                </span>
                                <span class="text-muted fw-600" style="font-size:0.7rem;">—</span>
                                <span class="fw-900 text-white" style="font-size:1.6rem;min-width:28px;text-align:center;">
                                    {{ $match['score']['away'] }}
                                </span>
                            </div>
                        @else
                            <span class="fw-800 text-muted" style="font-size:1.1rem;letter-spacing:0.1em;">VS</span>
                        @endif
                    </div>

                    {{-- Away team --}}
                    <div class="d-flex align-items-center gap-3 justify-content-end" style="flex:1;">
                        <div class="text-end">
                            <div class="fw-800 text-white" style="font-size:0.9rem;">{{ $match['away']['name'] }}</div>
                            <div class="text-muted" style="font-size:0.6rem;">{{ $match['away']['region'] ?? 'Global' }}</div>
                        </div>
                        <img src="{{ asset($match['away']['logo']) }}" alt="{{ $match['away']['name'] }}"
                             style="width:40px;height:40px;border-radius:8px;object-fit:cover;background:var(--arena-surface-02);"
                             onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22><rect width=%2240%22 height=%2240%22 rx=%228%22 fill=%22%221D2030%22/><text x=%2250%25%22 y=%2256%25%22 text-anchor=%22middle%22 fill=%22%237c5cfc%22 font-size=%2218%22>🛡️</text></svg>'">
                    </div>

                </div>

                @if($match['status'] === 'live')
                {{-- Live progress bar --}}
                <div style="height:2px;background:linear-gradient(90deg,#ef4444,#ff6b6b);animation:ctaPulse 1.5s infinite alternate;"></div>
                @endif

            </div>
        </a>
        @endforeach
    </div>

</div>
@endsection
