@extends('layouts.admin')

@section('title', 'Detalles del Equipo: ' . $equipo->nombre)
@section('page-title', 'Detalles del Equipo')

@section('content')
<!-- Información del Equipo -->
<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">
                    <i class="fas fa-users me-2"></i>{{ $equipo->nombre }}
                </h6>
                <div>
                    <a href="{{ route('admin.equipos.edit', $equipo) }}" class="btn btn-sm btn-primary me-2">
                        <i class="fas fa-edit me-1"></i>Editar
                    </a>
                    <a href="{{ route('admin.equipos.index') }}" class="btn btn-sm btn-secondary">
                        <i class="fas fa-arrow-left me-1"></i>Volver
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-muted">Información General</h6>
                                <table class="table table-sm">
                                    <tr>
                                        <td><strong>Nombre:</strong></td>
                                        <td>{{ $equipo->nombre }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Evento:</strong></td>
                                        <td>
                                            <a href="{{ route('admin.eventos.show', $equipo->evento) }}" class="text-decoration-none">
                                                {{ $equipo->evento->nombre }}
                                            </a>
                                            <span class="badge bg-secondary ms-2">{{ $equipo->evento->tipo }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Estado:</strong></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>
                                    </tr>
                                    <tr>
                                        <td><strong>Capitán:</strong></td>
                                        <td>
                                            @if($equipo->capitan)
                                                {{ $equipo->capitan->name }}
                                                <br><small class="text-muted">{{ $equipo->capitan->email }}</small>
                                            @else
                                                <span class="text-muted">Sin capitán asignado</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Colores:</strong></td>
                                        <td>
                                            @if($equipo->colores_uniforme && is_array($equipo->colores_uniforme))
                                                {{ implode(', ', $equipo->colores_uniforme) }}
                                            @else
                                                {{ $equipo->colores_uniforme ?? 'No especificado' }}
                                            @endif
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-muted">Estadísticas</h6>
                                <table class="table table-sm">
                                    <tr>
                                        <td><strong>Total Jugadores:</strong></td>
                                        <td>
                                            <span class="badge {{ $equipo->jugadores->count() >= 10 ? 'bg-success' : 'bg-warning' }}">
                                                {{ $equipo->jugadores->count() }}
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Director Técnico:</strong></td>
                                        <td>
                                            @if($equipo->directorTecnico)
                                                <span class="badge bg-success">Asignado</span>
                                            @else
                                                <span class="badge bg-danger">Pendiente</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Equipo Completo:</strong></td>
                                        <td>
                                            @if($equipo->estaCompleto())
                                                <span class="badge bg-success">
                                                    <i class="fas fa-check me-1"></i>Completo
                                                </span>
                                            @else
                                                <span class="badge bg-warning">
                                                    <i class="fas fa-exclamation-triangle me-1"></i>Incompleto
                                                </span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><strong>Creado:</strong></td>
                                        <td>{{ $equipo->created_at->format('d/m/Y H:i') }}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>Actualizado:</strong></td>
                                        <td>{{ $equipo->updated_at->format('d/m/Y H:i') }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        
                        @if($equipo->descripcion)
                            <div class="mt-3">
                                <h6 class="text-muted">Descripción</h6>
                                <p>{{ $equipo->descripcion }}</p>
                            </div>
                        @endif
                        
                        @if($equipo->notas)
                            <div class="mt-3">
                                <h6 class="text-muted">Notas</h6>
                                <p>{{ $equipo->notas }}</p>
                            </div>
                        @endif
                    </div>
                    
                    <div class="col-md-4 text-center">
                        @if($equipo->logo)
                            <img src="{{ asset('storage/' . $equipo->logo) }}" alt="{{ $equipo->nombre }}" 
                                 class="img-fluid rounded" style="max-width: 200px;">
                        @else
                            <div class="bg-light text-primary d-flex align-items-center justify-content-center rounded" 
                                 style="width: 200px; height: 200px; margin: 0 auto;">
                                <i class="fas fa-users fa-4x"></i>
                            </div>
                            <p class="text-muted mt-2">Sin logo</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Director Técnico -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-user-tie me-2"></i>Director Técnico
                </h6>
            </div>
            <div class="card-body">
                @if($equipo->directorTecnico)
                    <div class="row">
                        <div class="col-md-3">
                            @if($equipo->directorTecnico->foto)
                                <img src="{{ asset('storage/' . $equipo->directorTecnico->foto) }}" 
                                     alt="{{ $equipo->directorTecnico->obtenerNombreCompleto() }}" 
                                     class="img-fluid rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                            @else
                                <div class="bg-light text-primary d-flex align-items-center justify-content-center rounded-circle" 
                                     style="width: 100px; height: 100px;">
                                    <i class="fas fa-user fa-2x"></i>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-9">
                            <h5>{{ $equipo->directorTecnico->obtenerNombreCompleto() }}</h5>
                            <table class="table table-sm">
                                <tr>
                                    <td><strong>Documento:</strong></td>
                                    <td>{{ $equipo->directorTecnico->documento }}</td>
                                </tr>
                                <tr>
                                    <td><strong>Edad:</strong></td>
                                    <td>{{ $equipo->directorTecnico->obtenerEdad() }} años</td>
                                </tr>
                                @if($equipo->directorTecnico->telefono)
                                <tr>
                                    <td><strong>Teléfono:</strong></td>
                                    <td>{{ $equipo->directorTecnico->telefono }}</td>
                                </tr>
                                @endif
                                @if($equipo->directorTecnico->email)
                                <tr>
                                    <td><strong>Email:</strong></td>
                                    <td>{{ $equipo->directorTecnico->email }}</td>
                                </tr>
                                @endif
                            </table>
                        </div>
                    </div>
                @else
                    <div class="text-center py-4">
                        <div class="bg-light text-primary d-flex align-items-center justify-content-center rounded-circle mx-auto mb-3" 
                             style="width: 100px; height: 100px;">
                            <i class="fas fa-user-plus fa-2x"></i>
                        </div>
                        <h6 class="text-muted">No hay director técnico asignado</h6>
                        <p class="text-muted small">Este equipo aún no tiene un director técnico asignado.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Jugadores -->
<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">
                    <i class="fas fa-running me-2"></i>Jugadores 
                    <span class="badge {{ $equipo->jugadores->count() >= 10 ? 'bg-success' : 'bg-warning' }} ms-2">
                        {{ $equipo->jugadores->count() }}/10 mínimo
                    </span>
                </h6>
                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalAgregarJugador">
                    <i class="fas fa-plus me-1"></i>Agregar Jugador
                </button>
            </div>
            <div class="card-body">
                @if($equipo->jugadores->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Jugador</th>
                                    <th>Documento</th>
                                    <th>Edad</th>
                                    <th>Posición</th>
                                    <th>Contacto</th>
                                    <th>Estado</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($equipo->jugadores->sortBy('numero_camiseta') as $jugador)
                                    <tr>
                                        <td>
                                            @if($jugador->tipo == 'director_tecnico')
                                                <span class="badge bg-warning text-dark">
                                                    <i class="fas fa-crown me-1"></i>DT
                                                </span>
                                            @else
                                                <span class="badge bg-primary">{{ $jugador->numero_camiseta }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <div class="me-2">
                                                    @if($jugador->foto)
                                                        <img src="{{ asset('storage/' . $jugador->foto) }}" 
                                                             alt="{{ $jugador->obtenerNombreCompleto() }}" 
                                                             class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                                    @else
                                                        <div class="bg-light text-primary d-flex align-items-center justify-content-center rounded-circle" 
                                                             style="width: 40px; height: 40px;">
                                                            <i class="fas fa-user"></i>
                                                        </div>
                                                    @endif
                                                </div>
                                                <div>
                                                    <div>{{ $jugador->obtenerNombreCompleto() }}</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{ $jugador->documento }}</td>
                                        <td>{{ $jugador->obtenerEdad() }} años</td>
                                        <td>
                                            @if($jugador->tipo == 'director_tecnico')
                                                <span class="badge bg-warning text-dark">
                                                    <i class="fas fa-crown me-1"></i>Director Técnico
                                                </span>
                                            @else
                                                <span class="badge bg-info">{{ ucfirst($jugador->posicion) }}</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($jugador->telefono)
                                                <div>{{ $jugador->telefono }}</div>
                                            @endif
                                            @if($jugador->email)
                                                <div><small class="text-muted">{{ $jugador->email }}</small></div>
                                            @endif
                                        </td>
                                        <td>
                                            @if($jugador->estado == 'activo')
                                                <span class="badge bg-success">Activo</span>
                                            @else
                                                <span class="badge bg-warning">Inactivo</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <button class="dropdown-item" onclick="editarJugador({{ $jugador->id }})">
                                                            <i class="fas fa-edit me-2"></i>Editar
                                                        </button>
                                                    </li>
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <button class="dropdown-item text-danger" onclick="eliminarJugador({{ $jugador->id }})">
                                                            <i class="fas fa-trash me-2"></i>Eliminar
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-users fa-3x text-muted mb-3"></i>
                        <p class="text-muted">No hay jugadores registrados en este equipo</p>
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAgregarJugador">
                            <i class="fas fa-plus me-1"></i>Agregar Primer Jugador
                        </button>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Validaciones del Equipo -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-check-circle me-2"></i>Estado de Validación
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-2">
                            @if($equipo->tieneMinimosJugadores())
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <span class="text-success">Mínimo de jugadores cumplido</span>
                            @else
                                <i class="fas fa-times-circle text-danger me-2"></i>
                                <span class="text-danger">Faltan {{ 10 - $equipo->jugadores->count() }} jugadores</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-2">
                            @if($equipo->tieneDirectorTecnico())
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <span class="text-success">Director técnico asignado</span>
                            @else
                                <i class="fas fa-times-circle text-danger me-2"></i>
                                <span class="text-danger">Falta director técnico</span>
                            @endif
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="d-flex align-items-center mb-2">
                            @if($equipo->estaCompleto())
                                <i class="fas fa-check-circle text-success me-2"></i>
                                <span class="text-success">Equipo completo y listo</span>
                            @else
                                <i class="fas fa-times-circle text-warning me-2"></i>
                                <span class="text-warning">Equipo incompleto</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para agregar jugador -->
<div class="modal fade" id="modalAgregarJugador" tabindex="-1" aria-labelledby="modalAgregarJugadorLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAgregarJugadorLabel">
                    <i class="fas fa-user-plus"></i> Agregar Jugador
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formAgregarJugador" action="{{ route('admin.equipos.agregar-jugador', $equipo) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="nombre" class="form-label">Nombre <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="nombre" name="nombre" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="apellido" class="form-label">Apellido <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="apellido" name="apellido" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="documento" class="form-label">Documento <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="documento" name="documento" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="fecha_nacimiento" class="form-label">Fecha de Nacimiento <span class="text-danger">*</span></label>
                                <input type="date" class="form-control" id="fecha_nacimiento" name="fecha_nacimiento" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="tipo" class="form-label">Tipo <span class="text-danger">*</span></label>
                                <select class="form-select" id="tipo" name="tipo" required onchange="togglePosicionField()">
                                    <option value="">Seleccionar tipo</option>
                                    <option value="jugador">Jugador</option>
                                    <option value="director_tecnico">Director Técnico</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6" id="posicion-field">
                            <div class="mb-3">
                                <label for="posicion" class="form-label">Posición <span class="text-danger">*</span></label>
                                <select class="form-select" id="posicion" name="posicion">
                                    <option value="">Seleccionar posición</option>
                                    <option value="portero">Portero</option>
                                    <option value="defensa">Defensa</option>
                                    <option value="mediocampo">Mediocampo</option>
                                    <option value="delantero">Delantero</option>
                                    <option value="suplente">Suplente</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="numero_camiseta" class="form-label">Número de Camiseta <span class="text-danger">*</span></label>
                                <select class="form-select" id="numero_camiseta" name="numero_camiseta" required>
                                    <option value="">Seleccionar número</option>
                                    @for($i = 1; $i <= 99; $i++)
                                        @if(!$equipo->jugadores->pluck('numero_camiseta')->contains($i))
                                            <option value="{{ $i }}">{{ $i }}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="telefono" class="form-label">Teléfono</label>
                                <input type="text" class="form-control" id="telefono" name="telefono">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-plus me-1"></i>Agregar Jugador
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    @vite(['resources/js/equipos.js'])
    <script>
        // Configurar rutas para JavaScript
        window.equiposRoutes = {
            show: "{{ route('admin.equipos.show', $equipo->id) }}",
            edit: "{{ route('admin.equipos.edit', $equipo->id) }}",
            destroy: "{{ route('admin.equipos.destroy', $equipo->id) }}",
            agregarJugador: "{{ route('admin.equipos.agregar-jugador', $equipo->id) }}"
        };
        window.csrfToken = "{{ csrf_token() }}";
    </script>
@endpush

@section('scripts')
<script>
$(document).ready(function() {
    // Manejar formulario de agregar jugador
    $('#formAgregarJugador').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        
        // Mostrar loading
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.html('<i class="fas fa-spinner fa-spin"></i> Agregando...').prop('disabled', true);
        
        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                $('#modalAgregarJugador').modal('hide');
                Swal.fire({
                    title: 'Éxito',
                    text: 'Jugador agregado exitosamente',
                    icon: 'success',
                    confirmButtonText: 'OK'
                }).then(() => {
                    // Limpiar formulario
                    $('#formAgregarJugador')[0].reset();
                    // Recargar página para mostrar el nuevo jugador
                    location.reload();
                });
            },
            error: function(xhr) {
                const errors = xhr.responseJSON?.errors;
                if (errors) {
                    let errorMsg = 'Errores encontrados:\n';
                    Object.values(errors).forEach(error => {
                        errorMsg += '- ' + error[0] + '\n';
                    });
                    Swal.fire('Error', errorMsg, 'error');
                } else {
                    Swal.fire('Error', 'No se pudo agregar el jugador', 'error');
                }
            },
            complete: function() {
                // Restaurar botón
                submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });
});

function editarJugador(jugadorId) {
    // Implementar edición de jugador
    console.log('Editar jugador:', jugadorId);
}

function eliminarJugador(jugadorId) {
    if (confirm('¿Estás seguro de eliminar este jugador del equipo?')) {
        // Implementar eliminación de jugador
        console.log('Eliminar jugador:', jugadorId);
    }
}

function togglePosicionField() {
    const tipoSelect = document.getElementById('tipo');
    const posicionField = document.getElementById('posicion-field');
    const posicionSelect = document.getElementById('posicion');
    const numeroCamisetaField = document.querySelector('#numero_camiseta').closest('.col-md-6');
    
    if (tipoSelect.value === 'director_tecnico') {
        posicionField.style.display = 'none';
        posicionSelect.removeAttribute('required');
        posicionSelect.value = '';
        numeroCamisetaField.style.display = 'none';
        document.getElementById('numero_camiseta').removeAttribute('required');
    } else if (tipoSelect.value === 'jugador') {
        posicionField.style.display = 'block';
        posicionSelect.setAttribute('required', 'required');
        numeroCamisetaField.style.display = 'block';
        document.getElementById('numero_camiseta').setAttribute('required', 'required');
    } else {
        posicionField.style.display = 'block';
        posicionSelect.removeAttribute('required');
        numeroCamisetaField.style.display = 'block';
        document.getElementById('numero_camiseta').removeAttribute('required');
    }
}
</script>
@endsection