@extends('admin.layout')

@section('title', 'Equipos - Admin OnAPB')

@section('content')
<div class="mb-5">
    <div class="d-flex justify-content-between align-items-end mb-4">
        <div>
            <span class="text-primary fw-bold text-uppercase tracking-widest d-block mb-2">Gestión Deportiva</span>
            <h1 class="display-4 fw-bold font-header mb-0">Equipos<span class="text-primary">.</span></h1>
        </div>
        <a href="{{ route('admin.equipos.create') }}" class="btn-admin-primary">
            <i class="bi bi-plus-lg me-2"></i> NUEVO EQUIPO
        </a>
    </div>

    <div class="row g-3 align-items-center">
        <div class="col-lg-6">
            <form method="GET" action="{{ route('admin.equipos.index') }}" class="search-box-kinetic" id="equipos-search-form">
                <i class="bi bi-search"></i>
                <input type="text" name="q" id="equipos-search-input" class="form-control"
                       placeholder="Buscar por club, categoría, división o ID..."
                       value="{{ $search ?? '' }}" autocomplete="off">
            </form>
        </div>
    </div>
</div>

<div id="equipos-list-container">
<div class="admin-card">
    @if($equipos->isEmpty())
        <div class="text-center py-5">
            <i class="bi bi-people text-muted mb-3" style="font-size: 3rem;"></i>
            <p class="fs-5 text-muted">
                {{ !empty($search) ? 'No se encontraron equipos para "' . $search . '"' : 'No hay equipos registrados.' }}
            </p>
        </div>
    @else
        <div class="table-responsive">
            <table class="kinetic-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        @if(session('admin_role') == 1)
                        <th>Club</th>
                        @endif
                        <th>Categoría</th>
                        <th>División</th>
                        <th>Plantel</th>
                        <th class="text-end">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($equipos as $equipo)
                    <tr>
                        <td><span class="badge bg-light text-dark px-2 py-1">#{{ $equipo->id_equipo }}</span></td>
                        @if(session('admin_role') == 1)
                        <td><span class="fw-bold">{{ $equipo->club->nombre ?? '—' }}</span></td>
                        @endif
                        <td><span class="badge bg-dark text-white text-uppercase px-3 py-2" style="font-size: 0.75rem; letter-spacing: 0.05em;">{{ $equipo->categoria }}</span></td>
                        <td><span class="text-muted fw-bold">{{ $equipo->division ?? '—' }}</span></td>
                        <td>
                            <a href="{{ route('admin.equipos.jugadores', $equipo->id_equipo) }}" class="text-decoration-none d-flex align-items-center gap-2">
                                <span class="fw-bold text-success fs-5">{{ $equipo->jugadores_count }}</span>
                                <span class="small text-muted text-uppercase">Jugadores registrados <i class="bi bi-arrow-right small"></i></span>
                            </a>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('admin.equipos.edit', $equipo->id_equipo) }}" class="btn btn-sm btn-light fw-bold text-uppercase border me-2">
                                <i class="bi bi-pencil me-1"></i> Editar
                            </a>
                            <form action="{{ route('admin.equipos.destroy', $equipo->id_equipo) }}" method="POST" class="d-inline delete-form confirm-submit" data-confirm-text="¿Eliminar este equipo?">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger fw-bold text-uppercase">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
</div>
@endsection

@section('scripts')
<script>
(function () {
    const form      = document.getElementById('equipos-search-form');
    const input     = document.getElementById('equipos-search-input');
    const container = document.getElementById('equipos-list-container');
    if (!form || !input || !container) return;

    let debounceTimer = null;
    let activeRequest = null;
    const baseUrl = form.getAttribute('action');

    form.addEventListener('submit', e => { e.preventDefault(); doSearch(input.value); });

    input.addEventListener('input', function () {
        clearTimeout(debounceTimer);
        const value = this.value;
        debounceTimer = setTimeout(() => doSearch(value), 350);
    });

    async function doSearch(query) {
        const url = baseUrl + (query ? ('?q=' + encodeURIComponent(query)) : '');
        history.replaceState(null, '', url);

        if (activeRequest) activeRequest.abort();
        activeRequest = new AbortController();

        container.style.opacity = '0.55';

        try {
            const res = await fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'text/html' },
                signal: activeRequest.signal
            });
            const html = await res.text();
            const doc = new DOMParser().parseFromString(html, 'text/html');
            const fresh = doc.getElementById('equipos-list-container');
            if (fresh) {
                container.innerHTML = fresh.innerHTML;
            }
        } catch (err) {
            if (err.name !== 'AbortError') console.error('Búsqueda en vivo falló:', err);
        } finally {
            container.style.opacity = '';
            activeRequest = null;
        }
    }
})();
</script>
@endsection