@extends('layouts.admin')

@section('title')
    @lang('translation.Horarios de Cancha')
@endsection

@section('css')
    <!-- FullCalendar -->
    <link href="{{ URL::asset('build/libs/fullcalendar/main.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- Timepicker -->
    <link href="{{ URL::asset('build/libs/bootstrap-timepicker/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            <a href="{{ route('admin.canchas.index') }}">Canchas</a>
        @endslot
        @slot('li_2')
            <a href="{{ route('admin.canchas.show', $cancha) }}">{{ $cancha->nombre }}</a>
        @endslot
        @slot('title')
            Horarios
        @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h4 class="card-title mb-0">Gestión de Horarios - {{ $cancha->nombre }}</h4>
                            <p class="text-muted mb-0">{{ $cancha->categoria->nombre }} | {{ $cancha->direccion }}</p>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalHorario">
                                <i class="bx bx-plus me-1"></i> Nuevo Horario
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Filtros -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <label for="filtro-dia" class="form-label">Día de la semana</label>
                            <select class="form-select" id="filtro-dia">
                                <option value="">Todos los días</option>
                                <option value="lunes">Lunes</option>
                                <option value="martes">Martes</option>
                                <option value="miercoles">Miércoles</option>
                                <option value="jueves">Jueves</option>
                                <option value="viernes">Viernes</option>
                                <option value="sabado">Sábado</option>
                                <option value="domingo">Domingo</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="filtro-estado" class="form-label">Estado</label>
                            <select class="form-select" id="filtro-estado">
                                <option value="">Todos los estados</option>
                                <option value="activo">Activo</option>
                                <option value="inactivo">Inactivo</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-primary" onclick="aplicarFiltros()">
                                    <i class="bx bx-filter me-1"></i> Filtrar
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="limpiarFiltros()">
                                    <i class="bx bx-x me-1"></i> Limpiar
                                </button>
                                <button type="button" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalHorariosMasivos">
                                    <i class="bx bx-copy me-1"></i> Crear Masivo
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Tabla de horarios -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="tabla-horarios">
                            <thead class="table-light">
                                <tr>
                                    <th>Día</th>
                                    <th>Hora Inicio</th>
                                    <th>Hora Fin</th>
                                    <th>Precio</th>
                                    <th>Estado</th>
                                    <th>Reservas</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($horarios as $horario)
                                    <tr data-dia="{{ $horario->dia_semana }}" data-estado="{{ $horario->activo ? '1' : '0' }}">
                                        <td>
                                            <span class="badge bg-primary">{{ $horario->obtenerNombreDia() }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-medium">{{ $horario->hora_apertura }}</span>
                                        </td>
                                        <td>
                                            <span class="fw-medium">{{ $horario->hora_cierre }}</span>
                                        </td>
                                        <td>
                                            @if($horario->precio_especial)
                                                <span class="text-success fw-bold">{{ format_currency($horario->precio_especial, 0) }}</span>
                                                <small class="text-muted d-block">Precio especial</small>
                                            @else
                                                <span class="text-muted">{{ format_currency($cancha->precio_por_hora, 0) }}</span>
                                                <small class="text-muted d-block">Precio base</small>
                                            @endif
                                        </td>
                                        <td>
                                            @if($horario->activo)
                                                <span class="badge bg-success">Activo</span>
                                            @else
                                                <span class="badge bg-danger">Inactivo</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <span class="me-2">{{ $horario->reservas_count ?? 0 }}</span>
                                                @if(($horario->reservas_count ?? 0) > 0)
                                                    <a href="{{ route('admin.reservas.index', ['horario_id' => $horario->id]) }}" 
                                                       class="btn btn-outline-info btn-sm">
                                                        <i class="bx bx-show"></i>
                                                    </a>
                                                @endif
                                            </div>
                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="btn btn-outline-primary btn-sm" 
                                                        onclick="editarHorario({{ $horario->id }}, {{ $horario->dia_semana }}, '{{ $horario->hora_apertura }}', '{{ $horario->hora_cierre }}', '{{ $horario->precio_especial }}', {{ $horario->activo ? 'true' : 'false' }})" 
                                                        title="Editar horario">
                                                    <i class="bx bx-edit"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-{{ $horario->activo ? 'warning' : 'success' }} btn-sm" 
                                                        onclick="cambiarEstadoHorario({{ $horario->id }}, {{ $horario->activo ? 'true' : 'false' }})"
                                                        title="{{ $horario->activo ? 'Desactivar' : 'Activar' }} horario">
                                                    <i class="bx bx-{{ $horario->activo ? 'pause' : 'play' }}"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger btn-sm" 
                                                        onclick="eliminarHorario({{ $horario->id }}, '{{ $horario->obtenerNombreDia() }}', '{{ $horario->hora_apertura }}')"
                                                        title="Eliminar horario">
                                                    <i class="bx bx-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4">
                                            <i class="bx bx-time text-muted" style="font-size: 3rem;"></i>
                                            <p class="text-muted mt-2">No hay horarios configurados</p>
                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalHorario">
                                                <i class="bx bx-plus me-1"></i> Crear Primer Horario
                                            </button>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal crear/editar horario -->
    <div class="modal fade" id="modalHorario" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalHorarioTitle">Nuevo Horario</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="formHorario" method="POST">
                    @csrf
                    <input type="hidden" id="horario_id" name="horario_id">
                    <input type="hidden" name="cancha_id" value="{{ $cancha->id }}">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="dia_semana" class="form-label">Día de la Semana <span class="text-danger">*</span></label>
                                    <select class="form-select" id="dia_semana" name="dia_semana" required>
                                        <option value="">Seleccionar día</option>
                                        <option value="1">Lunes</option>
                                        <option value="2">Martes</option>
                                        <option value="3">Miércoles</option>
                                        <option value="4">Jueves</option>
                                        <option value="5">Viernes</option>
                                        <option value="6">Sábado</option>
                                        <option value="0">Domingo</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <div class="form-check mt-4">
                                        <input class="form-check-input" type="checkbox" id="activo" name="activo" value="1" checked>
                                        <label class="form-check-label" for="activo">
                                            Horario activo
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hora_apertura" class="form-label">Hora Apertura <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_apertura" name="hora_apertura" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hora_cierre" class="form-label">Hora Cierre <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_cierre" name="hora_cierre" required>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="usar_precio_especial" name="usar_precio_especial">
                                <label class="form-check-label" for="usar_precio_especial">
                                    Usar precio especial (por defecto: {{ format_currency($cancha->precio_por_hora, 0) }})
                                </label>
                            </div>
                        </div>

                        <div class="mb-3" id="div_precio_especial" style="display: none;">
                            <label for="precio_especial" class="form-label">Precio Especial ($)</label>
                            <input type="number" class="form-control" id="precio_especial" name="precio_especial" 
                                   min="0" step="0.01" placeholder="Ej: 30000">
                            <div class="form-text">Deje vacío para usar el precio base de la cancha</div>
                        </div>

                        <div class="mb-3">
                            <label for="observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control" id="observaciones" name="observaciones" rows="3" 
                                      placeholder="Observaciones adicionales sobre este horario..."></textarea>
                        </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" id="btnGuardarHorario">
                            <i class="bx bx-save me-1"></i> Guardar
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal horarios masivos -->
    <div class="modal fade" id="modalHorariosMasivos" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Crear Horarios Masivos</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('admin.canchas.horarios.masivos', $cancha) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">Días de la Semana <span class="text-danger">*</span></label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="todos_dias" onchange="toggleTodosDias()">
                                        <label class="form-check-label fw-bold" for="todos_dias">
                                            Seleccionar todos
                                        </label>
                                    </div>
                                    <hr>
                                    @foreach(['lunes', 'martes', 'miercoles', 'jueves', 'viernes', 'sabado', 'domingo'] as $dia)
                                        <div class="form-check">
                                            <input class="form-check-input dia-checkbox" type="checkbox" 
                                                   id="dia_{{ $dia }}" name="dias[]" value="{{ $dia }}">
                                            <label class="form-check-label" for="dia_{{ $dia }}">
                                                {{ ucfirst($dia) }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="hora_apertura_masivo" class="form-label">Hora Apertura <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_apertura_masivo" name="hora_apertura" required>
                                </div>
                                <div class="mb-3">
                                    <label for="hora_cierre_masivo" class="form-label">Hora Cierre <span class="text-danger">*</span></label>
                                    <input type="time" class="form-control" id="hora_cierre_masivo" name="hora_cierre" required>
                                </div>
                                <div class="mb-3">
                                    <label for="intervalo" class="form-label">Intervalo (minutos) <span class="text-danger">*</span></label>
                                    <select class="form-select" id="intervalo" name="intervalo" required>
                                        <option value="60">60 minutos</option>
                                        <option value="90">90 minutos</option>
                                        <option value="120">120 minutos</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="precio_especial_masivo" name="usar_precio_especial">
                                        <label class="form-check-label" for="precio_especial_masivo">
                                            Usar precio especial
                                        </label>
                                    </div>
                                </div>
                                <div class="mb-3" id="div_precio_especial_masivo" style="display: none;">
                                    <label for="precio_especial_masivo_input" class="form-label">Precio Especial ($)</label>
                                    <input type="number" class="form-control" id="precio_especial_masivo_input" 
                                           name="precio_especial" min="0" step="0.01">
                                </div>
                            </div>
                        </div>
                        
                        <div class="alert alert-info">
                            <i class="bx bx-info-circle me-2"></i>
                            <strong>Información:</strong> Se crearán horarios automáticamente según el intervalo seleccionado. 
                            Los horarios existentes no serán duplicados.
                        </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="bx bx-plus me-1"></i> Crear Horarios
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // DEBUG: Verificar si hay conflictos
        console.log('Cargando script de horarios...');
        
        // Limpiar cualquier función previa que pueda estar causando conflictos
        if (typeof window.cambiarEstado !== 'undefined') {
            console.warn('Función cambiarEstado encontrada, eliminando...');
            delete window.cambiarEstado;
        }
        
        // Funciones globales para los botones - SOLUCIÓN DIRECTA
        function aplicarFiltros() {
            const dia = document.getElementById('filtro-dia').value;
            const estado = document.getElementById('filtro-estado').value;
            
            const filas = document.querySelectorAll('#tabla-horarios tbody tr');
            
            filas.forEach(function(fila) {
                const diaFila = fila.getAttribute('data-dia');
                const estadoFila = fila.getAttribute('data-estado');
                
                let mostrar = true;
                
                // Mapear días en español a números para comparación
                const diasMap = {
                    'lunes': '1', 'martes': '2', 'miercoles': '3', 'jueves': '4', 
                    'viernes': '5', 'sabado': '6', 'domingo': '0'
                };
                
                if (dia && diasMap[dia] && diaFila != diasMap[dia]) {
                    mostrar = false;
                }
                
                // Convertir estado para comparación
                if (estado) {
                    const estadoComparar = estado === 'activo' ? '1' : '0';
                    if (estadoFila != estadoComparar) {
                        mostrar = false;
                    }
                }
                
                if (mostrar) {
                    fila.style.display = '';
                } else {
                    fila.style.display = 'none';
                }
            });
        }

        function limpiarFiltros() {
            document.getElementById('filtro-dia').value = '';
            document.getElementById('filtro-estado').value = '';
            const filas = document.querySelectorAll('#tabla-horarios tbody tr');
            filas.forEach(function(fila) {
                fila.style.display = '';
            });
        }

        function editarHorario(id, dia, horaApertura, horaCierre, precioEspecial, activo) {
            // Cargar datos en el modal
            document.getElementById('horario_id').value = id;
            document.getElementById('dia_semana').value = dia;
            document.getElementById('hora_apertura').value = horaApertura;
            document.getElementById('hora_cierre').value = horaCierre;
            document.getElementById('activo').checked = activo == 1 || activo == true || activo === 'true';
            
            // Manejar precio especial
            const usarPrecioEspecial = document.getElementById('usar_precio_especial');
            const divPrecioEspecial = document.getElementById('div_precio_especial');
            const inputPrecioEspecial = document.getElementById('precio_especial');
            
            if (precioEspecial && precioEspecial !== '' && precioEspecial !== 'null') {
                usarPrecioEspecial.checked = true;
                divPrecioEspecial.style.display = 'block';
                inputPrecioEspecial.value = precioEspecial;
            } else {
                usarPrecioEspecial.checked = false;
                divPrecioEspecial.style.display = 'none';
                inputPrecioEspecial.value = '';
            }
            
            // Cambiar el título del modal
            document.querySelector('#modalHorario .modal-title').textContent = 'Editar Horario';
            
            // Cambiar la acción del formulario
            const form = document.getElementById('formHorario');
            form.action = `{{ route('admin.canchas.horarios.update', ['cancha' => $cancha->id, 'horario' => '__ID__']) }}`.replace('__ID__', id);
            
            // Agregar método PUT
            let methodField = form.querySelector('input[name="_method"]');
            if (!methodField) {
                methodField = document.createElement('input');
                methodField.type = 'hidden';
                methodField.name = '_method';
                form.appendChild(methodField);
            }
            methodField.value = 'PUT';
            
            // Mostrar el modal
            const modal = new bootstrap.Modal(document.getElementById('modalHorario'));
            modal.show();
        }

        function cambiarEstadoHorario(id, estadoActual) {
            const esActivo = estadoActual === true || estadoActual === 'true' || estadoActual === 1;
            const nuevoEstado = !esActivo;
            const accion = nuevoEstado ? 'activar' : 'desactivar';
            
            Swal.fire({
                title: '¿Estás seguro?',
                text: `¿Deseas ${accion} este horario?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: `Sí, ${accion}`,
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Crear formulario para enviar la petición
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ route('admin.canchas.horarios.update', ['cancha' => $cancha->id, 'horario' => '__ID__']) }}`.replace('__ID__', id);
                    
                    // Token CSRF
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);
                    
                    // Method spoofing para PUT
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'PUT';
                    form.appendChild(methodField);
                    
                    // Campo activo
                    const activoField = document.createElement('input');
                    activoField.type = 'hidden';
                    activoField.name = 'activo';
                    activoField.value = nuevoEstado ? '1' : '0';
                    form.appendChild(activoField);
                    
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function eliminarHorario(id, dia, hora) {
            Swal.fire({
                title: '¿Estás seguro?',
                text: `¿Deseas eliminar el horario del ${dia} a las ${hora}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Crear formulario para envío
                    const form = document.createElement('form');
                    form.method = 'POST';
                    form.action = `{{ route('admin.canchas.horarios.destroy', ['cancha' => $cancha->id, 'horario' => '__ID__']) }}`.replace('__ID__', id);
                    
                    // Token CSRF
                    const csrfToken = document.createElement('input');
                    csrfToken.type = 'hidden';
                    csrfToken.name = '_token';
                    csrfToken.value = '{{ csrf_token() }}';
                    form.appendChild(csrfToken);
                    
                    // Método DELETE
                    const methodField = document.createElement('input');
                    methodField.type = 'hidden';
                    methodField.name = '_method';
                    methodField.value = 'DELETE';
                    form.appendChild(methodField);
                    
                    // Enviar formulario
                    document.body.appendChild(form);
                    form.submit();
                }
            });
        }

        function toggleTodosDias() {
            const todosDias = document.getElementById('todos_dias');
            const checkboxesDias = document.querySelectorAll('.dia-checkbox');
            
            checkboxesDias.forEach(checkbox => {
                checkbox.checked = todosDias.checked;
            });
        }

        // Mostrar mensajes de éxito/error
        @if(session('success'))
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'success',
                    title: '¡Éxito!',
                    text: '{{ session('success') }}',
                    timer: 3000,
                    showConfirmButton: false
                });
            });
        @endif

        @if(session('error'))
            document.addEventListener('DOMContentLoaded', function() {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: '{{ session('error') }}'
                });
            });
        @endif

        // Inicialización cuando el DOM esté listo
        document.addEventListener('DOMContentLoaded', function() {
            // Configurar checkbox de precio especial
            const usarPrecioEspecial = document.getElementById('usar_precio_especial');
            if (usarPrecioEspecial) {
                usarPrecioEspecial.addEventListener('change', function() {
                    const divPrecioEspecial = document.getElementById('div_precio_especial');
                    const inputPrecioEspecial = document.getElementById('precio_especial');
                    
                    if (this.checked) {
                        divPrecioEspecial.style.display = 'block';
                    } else {
                        divPrecioEspecial.style.display = 'none';
                        inputPrecioEspecial.value = '';
                    }
                });
            }

            const precioEspecialMasivo = document.getElementById('precio_especial_masivo');
            if (precioEspecialMasivo) {
                precioEspecialMasivo.addEventListener('change', function() {
                    const divPrecioEspecialMasivo = document.getElementById('div_precio_especial_masivo');
                    const inputPrecioEspecialMasivo = document.getElementById('precio_especial_masivo_input');
                    
                    if (this.checked) {
                        divPrecioEspecialMasivo.style.display = 'block';
                    } else {
                        divPrecioEspecialMasivo.style.display = 'none';
                        inputPrecioEspecialMasivo.value = '';
                    }
                });
            }

            // Configurar formulario de horario
            const formHorario = document.getElementById('formHorario');
            if (formHorario) {
                formHorario.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    const horarioId = document.getElementById('horario_id').value;
                    
                    const url = horarioId ? 
                        `{{ route('admin.canchas.horarios.update', ['cancha' => $cancha->id, 'horario' => '__ID__']) }}`.replace('__ID__', horarioId) :
                        `{{ route('admin.canchas.horarios.store', $cancha) }}`;
                    
                    if (horarioId) {
                        let methodField = this.querySelector('input[name="_method"]');
                        if (!methodField) {
                            methodField = document.createElement('input');
                            methodField.type = 'hidden';
                            methodField.name = '_method';
                            methodField.value = 'PUT';
                            this.appendChild(methodField);
                        }
                    }
                    
                    this.action = url;
                    this.submit();
                });
            }

            // Limpiar modal al cerrarlo
            const modalHorario = document.getElementById('modalHorario');
            if (modalHorario) {
                modalHorario.addEventListener('hidden.bs.modal', function() {
                    const formHorario = document.getElementById('formHorario');
                    const horarioId = document.getElementById('horario_id');
                    const modalTitle = document.querySelector('#modalHorario .modal-title');
                    const btnGuardar = document.getElementById('btnGuardarHorario');
                    const divPrecioEspecial = document.getElementById('div_precio_especial');
                    
                    if (formHorario) formHorario.reset();
                    if (horarioId) horarioId.value = '';
                    if (modalTitle) modalTitle.textContent = 'Nuevo Horario';
                    if (btnGuardar) btnGuardar.innerHTML = '<i class="bx bx-save me-1"></i> Guardar';
                    if (divPrecioEspecial) divPrecioEspecial.style.display = 'none';
                });
            }
        });
        
        // DEBUG: Confirmar que todas las funciones están disponibles
        console.log('Funciones disponibles:');
        console.log('- aplicarFiltros:', typeof aplicarFiltros);
        console.log('- limpiarFiltros:', typeof limpiarFiltros);
        console.log('- editarHorario:', typeof editarHorario);
        console.log('- cambiarEstadoHorario:', typeof cambiarEstadoHorario);
        console.log('- eliminarHorario:', typeof eliminarHorario);
        console.log('- toggleTodosDias:', typeof toggleTodosDias);
        console.log('Script de horarios cargado completamente.');
    </script>
@endsection