@extends('layouts.admin')

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

@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.eventos.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 o descripción" value="{{ request('search') }}">
                    </div>
                    
                    <div class="col-md-3">
                        <label class="form-label">Tipo de Evento</label>
                        <select class="form-select" name="tipo">
                            <option value="">Todos los tipos</option>
                            <option value="torneo" {{ request('tipo') == 'torneo' ? 'selected' : '' }}>Torneo</option>
                            <option value="clase" {{ request('tipo') == 'clase' ? 'selected' : '' }}>Clase</option>
                            <option value="exhibicion" {{ request('tipo') == 'exhibicion' ? 'selected' : '' }}>Exhibición</option>
                            <option value="amistoso" {{ request('tipo') == 'amistoso' ? 'selected' : '' }}>Amistoso</option>
                        </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="programado" {{ request('estado') == 'programado' ? 'selected' : '' }}>Programado</option>
                            <option value="en_curso" {{ request('estado') == 'en_curso' ? 'selected' : '' }}>En Curso</option>
                            <option value="finalizado" {{ request('estado') == 'finalizado' ? 'selected' : '' }}>Finalizado</option>
                            <option value="cancelado" {{ request('estado') == 'cancelado' ? 'selected' : '' }}>Cancelado</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 Eventos</h6>
                <div>
                    <a href="{{ route('admin.eventos.exportar') }}" class="btn btn-sm btn-outline-primary me-2">
                        <i class="fas fa-download me-1"></i>Exportar CSV
                    </a>
                    <a href="{{ route('admin.eventos.create') }}" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus me-1"></i>Nuevo Evento
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tablaEventos">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Evento</th>
                                <th>Tipo</th>
                                <th>Fecha</th>
                                <th>Cancha</th>
                                <th>Equipos</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($eventos as $evento)
                                <tr>
                                    <td>{{ $evento->id }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="evento-img me-2">
                                                @if($evento->hasImage())
                                                    <img src="{{ $evento->getImageUrl() }}" alt="{{ $evento->nombre }}" class="rounded">
                                                @else
                                                    <div class="evento-icon bg-light text-primary">
                                                        <i class="fas fa-trophy"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div>
                                                <h6 class="mb-0">{{ $evento->nombre }}</h6>
                                                <small class="text-muted">{{ Str::limit($evento->descripcion, 30) }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @switch($evento->tipo)
                                            @case('torneo')
                                                <span class="badge bg-primary">Torneo</span>
                                                @break
                                            @case('clase')
                                                <span class="badge bg-info">Clase</span>
                                                @break
                                            @case('exhibicion')
                                                <span class="badge bg-warning">Exhibición</span>
                                                @break
                                            @case('amistoso')
                                                <span class="badge bg-success">Amistoso</span>
                                                @break
                                            @default
                                                <span class="badge bg-secondary">{{ $evento->tipo }}</span>
                                        @endswitch
                                    </td>
                                    <td>
                                        <div>
                                            <div>{{ \Carbon\Carbon::parse($evento->fecha_inicio)->format('d/m/Y') }}</div>
                                            <small class="text-muted">{{ format_time_range_12h($evento->hora_inicio, $evento->hora_fin) }}</small>
                                        </div>
                                    </td>
                                    <td>{{ $evento->cancha->nombre }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <span class="me-2">{{ $evento->equipos_count ?? 0 }}</span>
                                            <div class="progress flex-grow-1" style="height: 6px;">
                                                @php
                                                    $equipos_registrados = $evento->equipos_count ?? 0;
                                                    $capacidad_equipos = $evento->capacidad_maxima_equipos ?? 8; // Asumiendo máximo 8 equipos por defecto
                                                    $porcentaje = $capacidad_equipos > 0 
                                                        ? min(100, ($equipos_registrados / $capacidad_equipos) * 100) 
                                                        : 0;
                                                @endphp
                                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $porcentaje }}%"></div>
                                            </div>
                                            <span class="ms-2">{{ $capacidad_equipos }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        @if($evento->estado == 'programado')
                                            <span class="badge bg-info">Programado</span>
                                        @elseif($evento->estado == 'en_curso')
                                            <span class="badge bg-success">En Curso</span>
                                        @elseif($evento->estado == 'finalizado')
                                            <span class="badge bg-secondary">Finalizado</span>
                                        @else
                                            <span class="badge bg-danger">Cancelado</span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="d-flex gap-1">
                                            <!-- Ver Detalles -->
                                            <a href="{{ route('admin.eventos.show', $evento->id) }}" 
                                               class="btn btn-sm btn-outline-primary" 
                                               title="Ver Detalles">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            
                                            <!-- Editar -->
                                            <a href="{{ route('admin.eventos.edit', $evento->id) }}" 
                                               class="btn btn-sm btn-outline-warning" 
                                               title="Editar">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            
                                            <!-- Gestionar Equipos -->
                                            <a href="{{ route('admin.eventos.participantes', $evento->id) }}" 
                                               class="btn btn-sm btn-outline-info" 
                                               title="Gestionar Equipos">
                                                <i class="fas fa-users-cog"></i>
                                            </a>
                                            
                                            <!-- Acciones de Estado -->
                                            @if($evento->estado == 'programado')
                                                <form action="{{ route('admin.eventos.cambiarEstado', $evento->id) }}" method="POST" class="d-inline iniciar-evento-form">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="en_curso">
                                                    <button type="submit" class="btn btn-sm btn-outline-success" title="Iniciar Evento">
                                                        <i class="fas fa-play-circle"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            @if($evento->estado == 'en_curso')
                                                <form action="{{ route('admin.eventos.cambiarEstado', $evento->id) }}" method="POST" class="d-inline">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="finalizado">
                                                    <button type="submit" class="btn btn-sm btn-outline-info" title="Finalizar Evento">
                                                        <i class="fas fa-flag-checkered"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            @if($evento->estado != 'cancelado' && $evento->estado != 'finalizado')
                                                <form action="{{ route('admin.eventos.cambiarEstado', $evento->id) }}" method="POST" class="d-inline cancelar-evento-form">
                                                    @csrf
                                                    @method('PUT')
                                                    <input type="hidden" name="estado" value="cancelado">
                                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Cancelar Evento">
                                                        <i class="fas fa-ban"></i>
                                                    </button>
                                                </form>
                                            @endif
                                            
                                            <!-- Eliminar -->
                                            <form action="{{ route('admin.eventos.destroy', $evento->id) }}" method="POST" class="delete-form d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <i class="fas fa-trophy text-muted mb-2" style="font-size: 2.5rem;"></i>
                                        <p class="mb-0 text-muted">No se encontraron eventos</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-end mt-3">
                    {{ $eventos->links('pagination.custom') }}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estadísticas rápidas -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Eventos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['total'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-calendar-alt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Eventos Activos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['abiertos'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-play-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Total Equipos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['equipos'] ?? 0 }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-users-cog fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Próximos Eventos</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $estadisticas['proximos'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-hourglass-half fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Calendario de Eventos -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">Calendario de Eventos</h6>
            </div>
            <div class="card-body">
                <!-- Leyenda de colores -->
                <div class="calendar-legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #6c757d;"></div>
                        <span>Programado</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #28a745;"></div>
                        <span>Abierto</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #007bff;"></div>
                        <span>En Curso</span>
                    </div>
                </div>
                
                <div id="calendario"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<style>
.evento-img {
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.evento-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.evento-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.border-left-primary {
    border-left: 4px solid #4e73df;
}

.border-left-success {
    border-left: 4px solid #1cc88a;
}

.border-left-info {
    border-left: 4px solid #36b9cc;
}

.border-left-warning {
    border-left: 4px solid #f6c23e;
}

.fc-event {
    cursor: pointer;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s ease;
}

.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fc-day-today {
    background-color: rgba(78, 115, 223, 0.1) !important;
}

.fc-daygrid-event {
    margin: 1px 2px;
    padding: 2px 4px;
}

.fc-event-time {
    font-size: 10px;
    opacity: 0.8;
}

/* Estilos para el calendario */
.fc-header-toolbar {
    margin-bottom: 1rem;
}

.fc-button-group .fc-button {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.fc-button-group .fc-button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.fc-button-group .fc-button-active {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
}

/* Tooltip personalizado */
.tooltip-inner {
    max-width: 300px;
    text-align: left;
}

/* Leyenda de colores */
.calendar-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/es.js"></script>
<script>
$(document).ready(function() {
    // Inicializar DataTable solo si el elemento existe y no está ya inicializado
    if ($('#tablaEventos').length > 0 && !$.fn.DataTable.isDataTable('#tablaEventos')) {
        try {
            $('#tablaEventos').DataTable({
                "paging": false,
                "info": false,
                "searching": false,
                "destroy": true,
                "language": {
                    "emptyTable": "No hay datos disponibles",
                    "zeroRecords": "No se encontraron coincidencias"
                }
            });
        } catch (error) {
            console.error('Error inicializando DataTable:', error);
        }
    }
    
    // Confirmación de eliminación
    $('.delete-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción no se puede revertir",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // Confirmación para iniciar evento
    $('.iniciar-evento-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Iniciar evento?',
            text: "El evento cambiará a estado 'En Curso'",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, iniciar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // Confirmación para cancelar evento
    $('.cancelar-evento-form').on('submit', function(e) {
        e.preventDefault();
        
        const form = this;
        
        Swal.fire({
            title: '¿Cancelar evento?',
            text: "Esta acción no se puede revertir. El evento será marcado como cancelado.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, cancelar evento',
            cancelButtonText: 'No cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
    
    // Inicializar calendario
    const calendarEl = document.getElementById('calendario');
    const calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'es',
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        buttonText: {
            today: 'Hoy',
            month: 'Mes',
            week: 'Semana',
            day: 'Día'
        },
        height: 'auto',
        events: @json($eventosCalendario),
        eventClick: function(info) {
            // Mostrar modal con información del evento antes de redirigir
            const evento = info.event;
            const props = evento.extendedProps;
            
            
            Swal.fire({
                title: evento.title,
                html: `
                    <div class="text-left">
                        <p><strong>Descripción:</strong> ${props.descripcion || 'Sin descripción'}</p>
                        <p><strong>Cancha:</strong> ${props.cancha}</p>
                        <p><strong>Estado:</strong> ${getEstadoText(props.estado)}</p>
                        <p><strong>Tipo:</strong> ${props.tipo_evento || 'No especificado'}</p>
                        ${props.hora_inicio ? `<p><strong>Horario:</strong> ${formatTimeRange12h(props.hora_inicio, props.hora_fin)}</p>` : ''}
                        <p><strong>Fecha:</strong> ${formatDateSpanish(evento.start)}</p>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: 'Ver Detalles',
                cancelButtonText: 'Cerrar',
                confirmButtonColor: '#007bff',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = `/admin/eventos/${evento.id}`;
                }
            });
        },
        eventDidMount: function(info) {
            const props = info.event.extendedProps;
            const tooltipContent = `
                <div class="text-left">
                    <strong>${info.event.title}</strong><br>
                    <small>Cancha: ${props.cancha}</small><br>
                    <small>Estado: ${getEstadoText(props.estado)}</small><br>
                    ${props.hora_inicio ? `<small>Hora: ${formatTimeRange12h(props.hora_inicio, props.hora_fin)}</small><br>` : ''}
                    <small class="text-muted">Click para ver detalles</small>
                </div>
            `;
            
            // Añadir tooltip con información detallada
            $(info.el).tooltip({
                title: tooltipContent,
                placement: 'top',
                trigger: 'hover',
                container: 'body',
                html: true
            });
            
            // Añadir cursor pointer para indicar que es clickeable
            info.el.style.cursor = 'pointer';
        }
    });
    
    // Funciones auxiliares para el estado
    function getEstadoText(estado) {
        const estados = {
            'programado': 'Programado',
            'abierto': 'Abierto',
            'en_curso': 'En Curso',
            'finalizado': 'Finalizado',
            'cancelado': 'Cancelado'
        };
        return estados[estado] || estado;
    }

    function getEstadoBadgeClass(estado) {
        const clases = {
            'programado': 'secondary',
            'abierto': 'success',
            'en_curso': 'primary',
            'finalizado': 'info',
            'cancelado': 'danger'
        };
        return clases[estado] || 'secondary';
    }

    // Función para formatear hora en formato de 12 horas
    function formatTime12h(timeString) {
        if (!timeString) return '';
        
        try {
            const time = new Date('2000-01-01 ' + timeString);
            return time.toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                hour12: true
            });
        } catch (e) {
            return timeString;
        }
    }

    // Función para formatear rango de horas en formato de 12 horas
    function formatTimeRange12h(startTime, endTime) {
        if (!startTime || !endTime) return '';
        
        const start = formatTime12h(startTime);
        const end = formatTime12h(endTime);
        
        return start + ' - ' + end;
    }

    // Función para formatear fecha en español
    function formatDateSpanish(dateString) {
        if (!dateString) return '';
        
        try {
            const date = new Date(dateString);
            const options = { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                timeZone: 'America/Lima'
            };
            
            return date.toLocaleDateString('es-PE', options);
        } catch (e) {
            return dateString;
        }
    }
    
    calendar.render();
});
</script>
@endpush