@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