3
This commit is contained in:
Laucha1312
@@ -0,0 +1,208 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Plantilla - ' . ($equipo->club->nombre ?? 'Equipo'))
|
||||
|
||||
@section('content')
|
||||
<div class="team-detail-container py-5">
|
||||
<div class="container">
|
||||
<!-- Header del Equipo -->
|
||||
<div class="kinetic-card mb-5 overflow-hidden border-0">
|
||||
<div class="card-body p-0">
|
||||
<div class="row g-0">
|
||||
<div class="col-md-4 bg-dark d-flex align-items-center justify-content-center p-5">
|
||||
@if($equipo->club && $equipo->club->imagen)
|
||||
<img src="{{ asset($equipo->club->imagen) }}" alt="{{ $equipo->club->nombre }}" class="img-fluid team-logo-large">
|
||||
@else
|
||||
<div class="text-white opacity-25 display-1">
|
||||
<i class="bi bi-shield-shaded"></i>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-8 p-5 d-flex flex-column justify-content-center">
|
||||
<span class="badge bg-primary text-uppercase tracking-widest mb-3 px-3 py-2" style="width: fit-content;">Ficha Oficial de Equipo</span>
|
||||
<h1 class="display-4 fw-bold text-uppercase italic tracking-tighter mb-1">
|
||||
{{ $equipo->club->nombre ?? 'Equipo' }}
|
||||
</h1>
|
||||
<h2 class="h3 text-muted text-uppercase fw-light">
|
||||
{{ $equipo->categoria }} {{ $equipo->division }}
|
||||
</h2>
|
||||
|
||||
<div class="d-flex gap-4 mt-4 text-muted flex-wrap align-items-center">
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-people-fill fs-4 text-primary"></i>
|
||||
<span class="fw-bold">{{ $equipo->jugadores->count() }} Jugadores</span>
|
||||
</div>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<i class="bi bi-geo-alt-fill fs-4 text-primary"></i>
|
||||
<span>{{ $equipo->club->nombre ?? 'Sede Oficial' }}</span>
|
||||
</div>
|
||||
|
||||
{{-- Botón Seguir (solo para usuarios logueados) --}}
|
||||
@if(session('user_logged_in'))
|
||||
<button id="btn-seguir"
|
||||
class="btn btn-outline-warning fw-bold ms-auto"
|
||||
data-equipo="{{ $equipo->id_equipo }}"
|
||||
data-csrf="{{ csrf_token() }}"
|
||||
style="min-width:140px;">
|
||||
<i class="bi bi-star me-1" id="seguir-icon"></i>
|
||||
<span id="seguir-label">Cargando...</span>
|
||||
</button>
|
||||
@else
|
||||
<a href="/login" class="btn btn-outline-secondary ms-auto fw-bold">
|
||||
<i class="bi bi-star me-1"></i> Seguir equipo
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Lista de Jugadores -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="d-flex justify-content-between align-items-end mb-4">
|
||||
<div>
|
||||
<h3 class="fw-bold text-uppercase mb-0">Plantilla <span class="text-primary">Actual</span></h3>
|
||||
<p class="text-muted mb-0">Temporada {{ date('Y') }}</p>
|
||||
</div>
|
||||
<a href="javascript:history.back()" class="btn btn-outline-dark btn-sm text-uppercase fw-bold">
|
||||
<i class="bi bi-arrow-left me-2"></i>Volver
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="kinetic-card overflow-hidden border-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<thead class="bg-dark text-white text-uppercase small tracking-widest fw-bold">
|
||||
<tr>
|
||||
<th class="ps-4 py-3">Jugador</th>
|
||||
<th class="py-3 text-center d-none d-md-table-cell">Categoría</th>
|
||||
<th class="pe-4 py-3 text-end">Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($equipo->jugadores as $j)
|
||||
<tr>
|
||||
<td class="ps-4 py-3">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-sm bg-primary text-white rounded-circle d-none d-sm-flex align-items-center justify-content-center me-3 fw-bold">
|
||||
{{ substr($j->nombre, 0, 1) }}{{ substr($j->apellido, 0, 1) }}
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-uppercase fw-bold text-truncate" style="max-width: 180px;">{{ $j->apellido }}, {{ $j->nombre }}</div>
|
||||
<div class="d-md-none small text-muted">{{ $j->categoria }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-3 text-center d-none d-md-table-cell">
|
||||
<span class="badge bg-light text-dark border">{{ $j->categoria }}</span>
|
||||
</td>
|
||||
<td class="pe-4 py-3 text-end">
|
||||
@if($j->activo)
|
||||
<span class="badge bg-success-subtle text-success border border-success border-opacity-25 px-2 py-1">
|
||||
<i class="bi bi-check-circle-fill"></i>
|
||||
<span class="d-none d-sm-inline ms-1 small fw-bold text-uppercase">Habilitado</span>
|
||||
</td>
|
||||
@else
|
||||
<span class="badge bg-danger-subtle text-danger border border-danger border-opacity-25 px-2 py-1">
|
||||
<i class="bi bi-clock-fill"></i>
|
||||
<span class="d-none d-sm-inline ms-1 small fw-bold text-uppercase">Pendiente</span>
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="p-5 text-center text-muted italic">
|
||||
No hay jugadores registrados en este equipo todavía.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.team-detail-container {
|
||||
background-color: var(--surface);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.team-logo-large {
|
||||
max-height: 200px;
|
||||
filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
|
||||
}
|
||||
.avatar-sm {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.italic { font-style: italic; }
|
||||
.tracking-widest { letter-spacing: 0.1em; }
|
||||
.tracking-tighter { letter-spacing: -0.05em; }
|
||||
</style>
|
||||
|
||||
@if(session('user_logged_in'))
|
||||
<script>
|
||||
(function() {
|
||||
const btn = document.getElementById('btn-seguir');
|
||||
const icon = document.getElementById('seguir-icon');
|
||||
const label = document.getElementById('seguir-label');
|
||||
if (!btn) return;
|
||||
|
||||
const equipoId = btn.dataset.equipo;
|
||||
const csrf = btn.dataset.csrf;
|
||||
|
||||
// 1. Cargar estado actual
|
||||
fetch(`/seguimiento/estado/${equipoId}`)
|
||||
.then(r => r.json())
|
||||
.then(data => actualizarBoton(data.siguiendo))
|
||||
.catch(() => label.textContent = 'Seguir');
|
||||
|
||||
// 2. Toggle al hacer click
|
||||
btn.addEventListener('click', function() {
|
||||
btn.disabled = true;
|
||||
label.textContent = '...';
|
||||
|
||||
fetch(`/seguimiento/equipo/${equipoId}`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': csrf,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.ok) {
|
||||
actualizarBoton(data.siguiendo);
|
||||
// Mostrar toast
|
||||
if (typeof Swal !== 'undefined') {
|
||||
Swal.fire({ toast: true, position: 'top-end', icon: 'success', title: data.msg, showConfirmButton: false, timer: 2000 });
|
||||
}
|
||||
}
|
||||
})
|
||||
.finally(() => btn.disabled = false);
|
||||
});
|
||||
|
||||
function actualizarBoton(siguiendo) {
|
||||
if (siguiendo) {
|
||||
btn.classList.replace('btn-outline-warning', 'btn-warning');
|
||||
icon.className = 'bi bi-star-fill me-1';
|
||||
label.textContent = 'Siguiendo';
|
||||
} else {
|
||||
btn.classList.replace('btn-warning', 'btn-outline-warning');
|
||||
icon.className = 'bi bi-star me-1';
|
||||
label.textContent = 'Seguir equipo';
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
@endif
|
||||
@endsection
|
||||
Reference in New Issue
Block a user