@extends('layouts.admin')

@section('title', 'Gestión de Equipos')
@section('page-title', 'Gestión de Equipos')

@section('content')
<div class="row mb-4">
    <!-- Filtros y búsqueda -->
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="{{ route('admin.equipos.index') }}" method="GET" class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label">Buscar</label>
                        <input type="text" class="form-control" name="search" placeholder="Nombre del equipo" value="{{ request('search') }}">
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label">Evento</label>
                        <select class="form-select" name="evento_id">
                            <option value="">Todos los eventos</option>
                            @foreach($eventos as $evento)
                                <option value="{{ $evento->id }}" {{ request('evento_id') == $evento->id ? 'selected' : '' }}>
                                    {{ $evento->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label">Estado</label>
                        <select class="form-select" name="estado">
                            <option value="">Todos los estados</option>
                            <option value="activo" {{ request('estado') == 'activo' ? 'selected' : '' }}>Activo</option>
                            <option value="inactivo" {{ request('estado') == 'inactivo' ? 'selected' : '' }}>Inactivo</option>
                            <option value="eliminado" {{ request('estado') == 'eliminado' ? 'selected' : '' }}>Eliminado</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-filter me-2"></i>Filtrar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0">Lista de Equipos</h6>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaEquipos">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Equipo</th>
                                <th>Evento</th>
                                <th>Capitán</th>
                                <th>Jugadores</th>
                                <th>Director Técnico</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($equipos as $equipo)
                                <tr>
                                    <td>{{ $equipo->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="equipo-img me-2">
                                                @if($equipo->logo)
                                                    <img src="{{ asset('storage/' . $equipo->logo) }}" alt="{{ $equipo->nombre }}" class="rounded" style="width: 40px; height: 40px; object-fit: cover;">
                                                @else
                                                    <div class="equipo-icon bg-light text-primary d-flex align-items-center justify-content-center rounded" style="width: 40px; height: 40px;">
                                                        <i class="fas fa-users"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $equipo->nombre }}</h6>
                                                <small class="text-muted">{{ Str::limit($equipo->descripcion, 30) }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div>
                                            <div>{{ $equipo->evento->nombre }}</div>
                                            <small class="text-muted">{{ $equipo->evento->tipo }}</small>
                                        </div>
                                    </td>
                                    <td>
                                        @if($equipo->capitan)
                                            <div>
                                                <div>{{ $equipo->capitan->name }}</div>
                                                <small class="text-muted">{{ $equipo->capitan->email }}</small>
                                            </div>
                                        @else
                                            <span class="text-muted">Sin capitán</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">{{ $equipo->jugadores_count ?? 0 }}</span>
                                            <div class="progress flex-grow-1" style="height: 6px;">
                                                @php
                                                    $porcentaje = min(100, (($equipo->jugadores_count ?? 0) / 10) * 100);
                                                    $colorClass = $porcentaje >= 100 ? 'bg-success' : ($porcentaje >= 70 ? 'bg-warning' : 'bg-danger');
                                                @endphp
                                                <div class="progress-bar {{ $colorClass }}" role="progressbar" style="width: {{ $porcentaje }}%"></div>
                                            </div>
                                            <span class="ms-2">10</span>
                                        </div>
                                        <small class="text-muted">Mínimo requerido</small>
                                    </td>
                                    <td>
                                        @if($equipo->directorTecnico)
                                            <span class="badge bg-success">
                                                <i class="fas fa-check me-1"></i>Asignado
                                            </span>
                                            <div class="mt-1">
                                                <small class="text-muted">{{ $equipo->directorTecnico->nombre }} {{ $equipo->directorTecnico->apellido }}</small>
                                            </div>
                                        @else
                                            <span class="badge bg-warning">
                                                <i class="fas fa-exclamation-triangle me-1"></i>Pendiente
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($equipo->estado == 'activo')
                                            <span class="badge bg-success">Activo</span>
                                        @elseif($equipo->estado == 'inactivo')
                                            <span class="badge bg-warning">Inactivo</span>
                                        @else
                                            <span class="badge bg-danger">Eliminado</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <a href="{{ route('admin.equipos.show', $equipo) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Ver Detalles">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('admin.equipos.edit', $equipo) }}" 
                                               class="btn btn-sm btn-outline-warning" 
                                               title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <button type="button" 
                                                    class="btn btn-sm btn-outline-danger" 
                                                    title="Eliminar"
                                                    onclick="confirmarEliminacion('{{ route('admin.equipos.destroy', $equipo) }}', '¿Eliminar equipo?', 'Esta acción eliminará el equipo {{ $equipo->nombre }} y no se puede deshacer.')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="text-muted">
                                            <i class="fas fa-users fa-3x mb-3"></i>
                                            <p>No hay equipos registrados</p>
                                            <a href="{{ route('admin.equipos.create') }}" class="btn btn-primary">
                                                <i class="fas fa-plus me-1"></i>Crear Primer Equipo
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($equipos->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $equipos->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Estadísticas rápidas -->
<div class="row">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-primary">{{ $estadisticas['total_equipos'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Total Equipos</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-success">{{ $estadisticas['equipos_activos'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Equipos Activos</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-info">{{ $estadisticas['equipos_completos'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Equipos Completos</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-warning">{{ $estadisticas['total_jugadores'] ?? 0 }}</h3>
                <p class="text-muted mb-0">Total Jugadores</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/equipos.js'])
    <script>
        // Configurar rutas para JavaScript
        window.equiposRoutes = {
            index: "{{ route('admin.equipos.index') }}",
            create: "{{ route('admin.equipos.create') }}",
            show: "{{ route('admin.equipos.show', '__ID__') }}",
            edit: "{{ route('admin.equipos.edit', '__ID__') }}",
            destroy: "{{ route('admin.equipos.destroy', '__ID__') }}"
        };
        window.csrfToken = "{{ csrf_token() }}";
    </script>
@endpush

@section('scripts')
<script>
$(document).ready(function() {
    $('#tablaEquipos').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/Spanish.json"
        },
        "pageLength": 25,
        "order": [[ 0, "desc" ]],
        "columnDefs": [
            { "orderable": false, "targets": [7] }
        ]
    });
});
</script>
@endsection