@extends('layouts.app')

@section('title', 'Playoffs - ' . $torneo->nombre)

@section('content')
<div class="container-fluid py-5" style="background: var(--surface);">
    <div class="container py-4">
        <div class="mb-5">
            <nav aria-label="breadcrumb" class="mb-3">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('noticias.index') }}" class="text-decoration-none text-muted">Media Hub</a></li>
                    <li class="breadcrumb-item active text-primary fw-bold" aria-current="page">{{ $torneo->nombre }}</li>
                </ol>
            </nav>
            <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Fase Eliminatoria</span>
            <h1 class="display-3 fw-bold mb-0" style="line-height: 1;">Brackets de Playoffs<span class="text-primary">.</span></h1>
            <p class="fs-4 text-muted mt-2">{{ $torneo->nombre }}</p>

            <!-- Navigation Tabs -->
            <div class="d-flex border-bottom mb-4 gap-4 overflow-x-auto">
                <a href="{{ route('torneos.standings', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.standings') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Posiciones
                </a>
                <a href="{{ route('torneos.topScorers', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.topScorers') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Goleadores
                </a>
                <a href="{{ route('torneos.playoffs', $torneo->id) }}" 
                   class="pb-3 text-uppercase fw-bold text-decoration-none {{ Request::routeIs('torneos.playoffs') ? 'text-primary border-bottom border-primary border-3' : 'text-muted' }}">
                    Playoffs
                </a>
            </div>

            @if(count($grupos) > 0)
                <div class="d-flex flex-wrap gap-2 mt-4">
                    @foreach($grupos as $g)
                        <a href="{{ route('torneos.playoffs', [$torneo->id, 'grupo' => $g]) }}" 
                           class="btn {{ $selectedGroup == $g ? 'btn-primary' : 'btn-outline-primary' }} btn-sm text-uppercase fw-bold px-4">
                           {{ $g }}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>

        @if($bracket['cuartos']->isEmpty() && $bracket['semis']->isEmpty() && $bracket['final']->isEmpty())
            <div class="text-center py-5 bg-white border rounded shadow-sm">
                <i class="bi bi-diagram-3 text-muted display-1 d-block mb-3"></i>
                <h3 class="fw-bold">Aún no hay llaves generadas</h3>
                <p class="text-muted">Los playoffs se habilitarán al finalizar la fase regular.</p>
            </div>
        @else
            <div class="bracket-container overflow-auto py-4">
                <div class="d-flex gap-5 align-items-center justify-content-center" style="min-width: 800px;">
                    
                    <!-- CUARTOS -->
                    <div class="bracket-column d-flex flex-column gap-4 justify-content-around h-100">
                        <h5 class="text-center text-uppercase small fw-bold text-muted mb-3 border-bottom pb-2">Cuartos de Final</h5>
                        @forelse($bracket['cuartos'] as $nro => $serie)
                            <div class="match-card bg-white shadow-sm border p-3" style="border-radius: var(--radius-sm);" style="width: 250px;">
                                <div class="d-flex justify-content-between align-items-center mb-1 text-muted x-small text-uppercase fw-bold">
                                    <span>Serie</span>
                                    <span>{{ $serie['wins_local'] }} - {{ $serie['wins_visitante'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-2 {{ $serie['wins_local'] > $serie['wins_visitante'] ? 'fw-bold border-start border-primary border-3 ps-2' : '' }}">
                                    <div class="d-flex align-items-center text-truncate">
                                        @if($serie['equipo_local'])
                                            <img src="{{ $serie['equipo_local']->club->imagen ? asset($serie['equipo_local']->club->imagen) : asset('logo.png') }}" 
                                                class="me-2 rounded-circle border" style="width: 20px; height: 20px; object-fit: cover;"
                                                onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                            <span class="text-truncate">{{ $serie['equipo_local']->club->nombre }}</span>
                                        @else
                                            <span class="text-muted italic">Por definir</span>
                                        @endif
                                    </div>
                                    <span class="badge bg-light text-dark">{{ $serie['wins_local'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center {{ $serie['wins_visitante'] > $serie['wins_local'] ? 'fw-bold border-start border-primary border-3 ps-2' : '' }}">
                                    <div class="d-flex align-items-center text-truncate">
                                        @if($serie['equipo_visitante'])
                                            <img src="{{ $serie['equipo_visitante']->club->imagen ? asset($serie['equipo_visitante']->club->imagen) : asset('logo.png') }}" 
                                                class="me-2 rounded-circle border" style="width: 20px; height: 20px; object-fit: cover;"
                                                onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                            <span class="text-truncate">{{ $serie['equipo_visitante']->club->nombre }}</span>
                                        @else
                                            <span class="text-muted italic">Por definir</span>
                                        @endif
                                    </div>
                                    <span class="badge bg-light text-dark">{{ $serie['wins_visitante'] }}</span>
                                </div>
                            </div>
                        @empty
                            <div class="text-muted italic py-4">Pendiente</div>
                        @endforelse
                    </div>

                    <div class="bracket-connector d-none d-lg-block"><i class="bi bi-chevron-right text-muted fs-4"></i></div>

                    <!-- SEMIS -->
                    <div class="bracket-column d-flex flex-column gap-5 justify-content-around h-100">
                        <h5 class="text-center text-uppercase small fw-bold text-muted mb-3 border-bottom pb-2">Semifinales</h5>
                        @for($i = 1; $i <= 2; $i++)
                            @php $serie = $bracket['semis']->get($i); @endphp
                            <div class="match-card {{ $serie ? 'bg-white shadow-sm border' : 'bg-light border-dashed' }} p-3" style="border-radius: var(--radius-sm);" style="width: 250px; min-height: 80px;">
                                @if($serie)
                                    <div class="d-flex justify-content-between align-items-center mb-1 text-muted x-small text-uppercase">
                                        <span>Serie</span>
                                        <span>{{ $serie['wins_local'] }} - {{ $serie['wins_visitante'] }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center mb-2 {{ $serie['wins_local'] > $serie['wins_visitante'] ? 'fw-bold text-primary' : '' }}">
                                        <div class="d-flex align-items-center text-truncate">
                                            @if($serie['equipo_local'])
                                                <img src="{{ $serie['equipo_local']->club->imagen ? asset($serie['equipo_local']->club->imagen) : asset('logo.png') }}" 
                                                    class="me-2 rounded-circle border" style="width: 20px; height: 20px; object-fit: cover;"
                                                    onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                                <span class="text-truncate">{{ $serie['equipo_local']->club->nombre }}</span>
                                            @else
                                                <span class="text-muted fst-italic">TBD</span>
                                            @endif
                                        </div>
                                        <span class="badge {{ $serie['wins_local'] > $serie['wins_visitante'] ? 'bg-primary' : 'bg-light text-dark' }}">{{ $serie['wins_local'] }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center {{ $serie['wins_visitante'] > $serie['wins_local'] ? 'fw-bold text-primary' : '' }}">
                                        <div class="d-flex align-items-center text-truncate">
                                            @if($serie['equipo_visitante'])
                                                <img src="{{ $serie['equipo_visitante']->club->imagen ? asset($serie['equipo_visitante']->club->imagen) : asset('logo.png') }}" 
                                                    class="me-2 rounded-circle border" style="width: 20px; height: 20px; object-fit: cover;"
                                                    onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                                <span class="text-truncate">{{ $serie['equipo_visitante']->club->nombre }}</span>
                                            @else
                                                <span class="text-muted fst-italic">TBD</span>
                                            @endif
                                        </div>
                                        <span class="badge {{ $serie['wins_visitante'] > $serie['wins_local'] ? 'bg-primary' : 'bg-light text-dark' }}">{{ $serie['wins_visitante'] }}</span>
                                    </div>
                                @else
                                    <div class="text-center text-muted py-3 small">TBD</div>
                                @endif
                            </div>
                        @endfor
                    </div>

                    <div class="bracket-connector d-none d-lg-block"><i class="bi bi-chevron-right text-muted fs-4"></i></div>

                    <!-- FINAL -->
                    <div class="bracket-column d-flex flex-column justify-content-center h-100">
                        <h5 class="text-center text-uppercase small fw-bold text-primary mb-3 border-bottom border-primary pb-2">Gran Final</h5>
                        @php $serie = $bracket['final']->get(1); @endphp
                        <div class="match-card {{ $serie ? 'bg-primary text-white shadow-md' : 'bg-light border-dashed' }} p-4" style="border-radius: var(--radius-sm);" style="width: 310px;">
                            @if($serie)
                                <div class="text-center mb-3 text-uppercase small border-bottom border-white border-opacity-25 pb-1">
                                    Serie: {{ $serie['wins_local'] }} - {{ $serie['wins_visitante'] }}
                                </div>
                                <div class="d-flex justify-content-between align-items-center mb-3 {{ $serie['wins_local'] > $serie['wins_visitante'] ? 'fs-4 fw-bold' : '' }}">
                                    <div class="d-flex align-items-center text-truncate">
                                        @if($serie['equipo_local'])
                                            <img src="{{ $serie['equipo_local']->club->imagen ? asset($serie['equipo_local']->club->imagen) : asset('logo.png') }}" 
                                                class="me-2 rounded-circle border border-white border-opacity-50" style="width: 32px; height: 32px; object-fit: cover;"
                                                onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                            <span class="text-truncate">{{ $serie['equipo_local']->club->nombre }}</span>
                                        @else
                                            <span>TBD</span>
                                        @endif
                                    </div>
                                    <span class="badge bg-white text-primary fs-5">{{ $serie['wins_local'] }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center {{ $serie['wins_visitante'] > $serie['wins_local'] ? 'fs-4 fw-bold' : '' }}">
                                    <div class="d-flex align-items-center text-truncate">
                                        @if($serie['equipo_visitante'])
                                            <img src="{{ $serie['equipo_visitante']->club->imagen ? asset($serie['equipo_visitante']->club->imagen) : asset('logo.png') }}" 
                                                class="me-2 rounded-circle border border-white border-opacity-50" style="width: 32px; height: 32px; object-fit: cover;"
                                                onerror="this.onerror=null;this.src='{{ asset('logo.png') }}';">
                                            <span class="text-truncate">{{ $serie['equipo_visitante']->club->nombre }}</span>
                                        @else
                                            <span>TBD</span>
                                        @endif
                                    </div>
                                    <span class="badge bg-white text-primary fs-5">{{ $serie['wins_visitante'] }}</span>
                                </div>
                            @else
                                <div class="text-center py-4 text-muted fst-italic">Por definir</div>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
        @endif
    </div>
</div>

<style>
.bracket-container {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}
.match-card {
    transition: transform 0.2s ease;
}
.match-card:hover {
    transform: translateY(-5px);
}
.border-dashed {
    border: 2px dashed var(--outline-variant);
}
</style>
@endsection