@extends('admin.layout')

@section('title', 'Gestionar Jugadores - ' . $equipo->categoria . ' - Admin OnAPB')

@section('content')
<div class="page-header">
    <div>
        <h2 class="mb-0"><i class="bi bi-person-plus-fill"></i> Gestionar Jugadores: {{ $equipo->categoria }} {{ $equipo->division }}</h2>
        <p class="text-muted mb-0">{{ $equipo->club->nombre }}</p>
    </div>
    <a href="{{ route('admin.equipos.index') }}" class="btn-admin-outline">
        <i class="bi bi-arrow-left"></i> Volver a Equipos
    </a>
</div>

<div class="row">
    <!-- Buscador de Jugadores -->
    <div class="col-md-5">
        <div class="admin-card">
            <div class="card-header bg-white">
                <h5 class="mb-0">Buscar Jugadores del Club</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" id="player-search" class="form-control" placeholder="Nombre, Apellido o DNI..." autocomplete="off">
                    </div>
                    <div id="search-results" class="list-group mt-2 shadow-sm" style="display: none; position: absolute; z-index: 1000; width: calc(100% - 40px);">
                        <!-- Resultados AJAX -->
                    </div>
                </div>
                <p class="text-muted small">Escribe al menos 3 caracteres para buscar.</p>
            </div>
        </div>
    </div>

    <!-- Lista de Jugadores Asignados -->
    <div class="col-md-7">
        <div class="admin-card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Jugadores en este Equipo</h5>
                <span class="badge bg-primary">{{ $equipo->jugadores->count() }} Jugadores</span>
            </div>
            <div class="card-body p-0">
                @if($equipo->jugadores->isEmpty())
                    <div class="p-4 text-center text-muted">
                        <i class="bi bi-info-circle mb-2 d-block fs-3"></i>
                        No hay jugadores asignados a este equipo todavía.
                    </div>
                @else
                    <div class="table-responsive">
                        <table class="admin-table mb-0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Jugador</th>
                                    <th>DNI</th>
                                    <th>Acción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($equipo->jugadores as $jugador)
                                <tr>
                                    <td>{{ $jugador->id_jugador }}</td>
                                    <td><strong>{{ $jugador->apellido }}, {{ $jugador->nombre }}</strong></td>
                                    <td>{{ $jugador->documento }}</td>
                                    <td>
                                        <form action="{{ route('admin.equipos.jugadores.remove', [$equipo->id_equipo, $jugador->id_jugador]) }}" method="POST" class="confirm-submit" data-confirm-text="¿Remover al jugador de este equipo?">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                                <i class="bi bi-x-lg"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Formulario oculto para añadir -->
<form id="add-player-form" action="{{ route('admin.equipos.jugadores.add', $equipo->id_equipo) }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="id_jugador" id="target-player-id">
</form>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('player-search');
    const resultsDiv = document.getElementById('search-results');
    const addForm = document.getElementById('add-player-form');
    const targetInput = document.getElementById('target-player-id');

    let timeout = null;

    searchInput.addEventListener('input', function() {
        clearTimeout(timeout);
        const query = this.value.trim();

        if (query.length < 2) {
            resultsDiv.style.display = 'none';
            return;
        }

        timeout = setTimeout(() => {
            fetch(`{{ route('admin.jugadores.search.ajax') }}?q=${query}`)
                .then(response => response.json())
                .then(data => {
                    resultsDiv.innerHTML = '';
                    if (data.length > 0) {
                        data.forEach(player => {
                            const btn = document.createElement('button');
                            btn.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center';
                            btn.innerHTML = `
                                <div>
                                    <strong>${player.apellido}, ${player.nombre}</strong><br>
                                    <small class="text-muted">DNI: ${player.documento} | ID: ${player.id_jugador}</small>
                                </div>
                                <i class="bi bi-plus-circle text-success fs-5"></i>
                            `;
                            btn.onclick = () => {
                                targetInput.value = player.id_jugador;
                                addForm.submit();
                            };
                            resultsDiv.appendChild(btn);
                        });
                        resultsDiv.style.display = 'block';
                    } else {
                        resultsDiv.innerHTML = '<div class="list-group-item text-muted">No se encontraron jugadores</div>';
                        resultsDiv.style.display = 'block';
                    }
                });
        }, 300);
    });

    // Cerrar resultados al hacer clic fuera
    document.addEventListener('click', function(e) {
        if (e.target !== searchInput && e.target !== resultsDiv) {
            resultsDiv.style.display = 'none';
        }
    });
});
</script>
@endsection