Laucha1312
208 lines
15 KiB
PHP
208 lines
15 KiB
PHP
@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
|