@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Ver Horarios @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <a href="{{ route('horarios.create') }}" class="btn btn-de-primary btn-sm px-4 mt-0 mb-3">
                    <i class="fas fa-plus"></i> Agregar Horario
                </a>

                <button type="button" id="btn-sincronizar-viejos"
                    class="btn btn-success btn-sm px-4 mt-0">
                    
                    <i class="fas fa-sync-alt"></i> Sincronizar Horarios con Moodle
                </button>
               

                @php
                    $usuario = auth()->user();

                    $esCoordinador = $usuario->roles()
                        ->whereRaw('LOWER(nombre) = ?', ['coordinador'])
                        ->exists();

                    $esAdmin = $usuario->roles()
                        ->whereRaw('LOWER(nombre) = ?', ['administrador'])
                        ->exists();
                @endphp

                @if(!$esCoordinador || $esAdmin)
                <div class="row mb-3">

                    <div class="col-md-4">
                        <label>Plan de Estudio</label>
                        <select id="filtro_plan" class="form-control">
                            <option value="">Todos</option>

                            @foreach($planes as $plan)
                                <option value="{{ $plan->id }}">{{ $plan->nombre }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4">
                        <label>Periodo Académico</label>

                        <select id="filtro_semestre" class="form-control">
                            <option value="">Todos</option>

                            @foreach($semestres as $semestre)
                                <option value="{{ $semestre->id }}">
                                    {{ $semestre->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                </div>
                @endif

                <div class="table-responsive">

                    <table id="tablahorarios" class="table table-striped mb-0 table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>Unidad Didáctica</th>
                                <th>Periodo Académico</th> <th>Docente</th>
                                <th>Sección</th> 
                                <th>Turno</th> 
                                <th>Periodo Lectivo</th>
                                <th>Plan de Estudio</th>
                                <th>Hora Inicio</th>
                                <th>Hora Fin</th>
                                <th>Día</th>
                                <th>Tipo Aula</th>
                                <th>N° Aula</th>
                                <th>Frecuencia</th>
                                <th>Capacidad</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($horarios as $horario)
                            <tr id="horario-{{ $horario->id }}">
                                <td>{{ $horario->curso->nombre ?? '-' }}</td>
                                <td>{{ $horario->curso->semestre->nombre ?? '-' }}</td>
                                <td>{{ $horario->docente ? ($horario->docente->nombre . ' ' . $horario->docente->apellido) : '-' }}</td>
                                
                                <td><span class="badge bg-soft-primary font-12">{{ $horario->seccion->nombre ?? '-' }}</span></td>
                                <td><span class="badge bg-soft-secondary font-12">{{ $horario->turno->nombre ?? '-' }}</span></td>
                                
                                <td>{{ $horario->periodo->nombre ?? '-' }}</td>
                                <td>{{ $horario->planEstudio->nombre ?? '-' }}</td>
                                <td>{{ $horario->focus_start ?? $horario->hora_inicio }}</td>
                                <td>{{ $horario->focus_end ?? $horario->hora_fin }}</td>
                                <td>{{ $horario->dia }}</td>
                                <td>{{ $horario->tipo_aula }}</td>
                                <td>{{ $horario->numero_aula ?? ($horario->aula?->nombre ?? '-') }}</td>
                                <td>{{ $horario->frecuencia }}</td>
                                <td>{{ $horario->capacidad }}</td>
                                <td>
                                    <a href="javascript:void(0);" class="text-warning" onclick="openEditModal({{ $horario->id }})">
                                        <i class="las la-pen text-secondary font-18"></i>
                                    </a>

                                    <form action="{{ route('horarios.destroy', $horario->id) }}" method="POST" class="d-inline delete-form" id="delete-form-{{ $horario->id }}">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" class="btn btn-link p-0" onclick="deleteHorario({{ $horario->id }})">
                                            <i class="las la-trash-alt text-secondary font-18"></i>
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>




                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>

<!-- Modal para editar horario -->
<!-- Modal para editar horario -->
<div class="modal fade" id="editHorarioModal" tabindex="-1" aria-labelledby="editHorarioModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editHorarioModalLabel">Editar Horario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <form id="editHorarioForm">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" id="horarioId">

                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card shadow-sm p-3 h-100">
                                <h6 class="mb-3 text-primary">Asignación Académica</h6>
                                <div class="mb-2">
                                    <label for="edit_id_curso" class="form-label mb-1">Unidad Didactica</label>
                                    <select name="id_curso" id="edit_id_curso" class="form-select form-select-sm">
                                        @foreach($cursos as $curso)
                                            <option value="{{ $curso->id }}">{{ $curso->nombre }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="mb-2">
                                    <label for="edit_id_docente" class="form-label mb-1">Docente</label>
                                    <select name="id_docente" id="edit_id_docente" class="form-select form-select-sm">
                                        @foreach($docentes as $docente)
                                            <option value="{{ $docente->id }}">{{ $docente->nombre }} {{ $docente->apellido }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label for="edit_id_seccion" class="form-label mb-1">Sección</label>
                                        <select name="id_seccion" id="edit_id_seccion" class="form-select form-select-sm">
                                            @foreach($secciones as $seccion)
                                                <option value="{{ $seccion->id }}">{{ $seccion->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="edit_id_turno" class="form-label mb-1">Turno</label>
                                        <select name="id_turno" id="edit_id_turno" class="form-select form-select-sm">
                                            @foreach($turnos as $turno)
                                                <option value="{{ $turno->id }}">{{ $turno->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card shadow-sm p-3 h-100">
                                <h6 class="mb-3 text-primary">Tiempo e Infraestructura</h6>
                                <div class="row g-2 mb-2">
                                    <div class="col-6">
                                        <label for="hora_inicio" class="form-label mb-1">Hora Inicio</label>
                                        <input type="time" name="hora_inicio" id="hora_inicio" class="form-control form-control-sm">
                                    </div>
                                    <div class="col-6">
                                        <label for="hora_fin" class="form-label mb-1">Hora Fin</label>
                                        <input type="time" name="hora_fin" id="hora_fin" class="form-control form-control-sm">
                                    </div>
                                </div>
                                <div class="row g-2 mb-2">
                                    <div class="col-6">
                                        <label for="dia" class="form-label mb-1">Día</label>
                                        <select name="dia" id="dia" class="form-select form-select-sm">
                                            <option value="Lunes">Lunes</option>
                                            <option value="Martes">Martes</option>
                                            <option value="Miércoles">Miércoles</option>
                                            <option value="Jueves">Jueves</option>
                                            <option value="Viernes">Viernes</option>
                                            <option value="Sábado">Sábado</option>
                                            <option value="Domingo">Domingo</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="frecuencia" class="form-label mb-1">Frecuencia</label>
                                        <select name="frecuencia" id="frecuencia" class="form-select form-select-sm">
                                            <option value="Semanal">Semanal</option>
                                            <option value="Quincenal">Quincenal</option>
                                            <option value="Mensual">Mensual</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-6">
                                        <label for="edit_id_aula" class="form-label mb-1">Aula</label>
                                        <select name="id_aula" id="edit_id_aula" class="form-select form-select-sm">
                                            @foreach($aulas as $aula)
                                                <option value="{{ $aula->id }}">{{ $aula->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label for="capacidad" class="form-label mb-1">Capacidad</label>
                                        <input type="number" name="capacidad" id="capacidad" class="form-control form-control-sm">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer mt-3 pb-0">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-sm btn-primary">Guardar cambios</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>





<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        $("#tablahorarios").DataTable({
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "buttons": [{
                    extend: 'collection',
                    text: 'Opciones',
                    buttons: [{
                            extend: 'copy',
                            text: 'Copiar'
                        },
                        {
                            extend: 'csv',
                            text: 'CSV'
                        },
                        {
                            extend: 'excel',
                            text: 'Excel',
                            title: 'Periodos Académicos'
                        },
                        {
                            extend: 'pdf',
                            text: 'PDF'
                        },
                        {
                            extend: 'print',
                            text: 'Imprimir'
                        }
                    ]
                },
                {
                    extend: 'colvis',
                    text: 'Visibilidad de Columna'
                }
            ],
            "paging": true,
            "searching": true,
            "info": true,
            "language": {
                "search": "Buscar:",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                "paginate": {
                    "first": "Primero",
                    "previous": "Anterior",
                    "next": "Siguiente",
                    "last": "Último"
                }
            }
        }).buttons().container().appendTo('#tablahorarios_wrapper .col-md-6:eq(0)');
    });
</script>


<script>
    // ❌ FUNCIÓN PARA ELIMINAR EL HORARIO
    function deleteHorario(horarioId) {
        Swal.fire({
            title: '¿Estás seguro?',
            text: "¡Este horario será eliminado permanentemente!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                let form = document.getElementById('delete-form-' + horarioId);
                let formData = new FormData(form);

                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        Swal.fire(
                            '¡Eliminado!',
                            'El horario ha sido eliminado.',
                            'success'
                        ).then(() => {
                            document.getElementById('horario-' + horarioId).remove();
                        });
                    } else {
                        Swal.fire('¡Error!', data.message || 'Hubo un problema al eliminar el horario.', 'error');
                    }
                })
                .catch(error => {
                    Swal.fire('¡Error!', 'Hubo un problema al eliminar el horario.', 'error');
                });
            }
        });
    }

    // 🔓 FUNCIÓN PARA ABRIR EL MODAL Y CARGAR LOS DATOS ESTRUCTURALES
    function openEditModal(horarioId) {
        $.ajax({
            url: '/horarios/' + horarioId + '/edit',
            type: 'GET',
            success: function(response) {
                // Inyectar IDs ocultos y relacionales en los selectores
                $('#horarioId').val(response.id);
                $('#edit_id_curso').val(response.id_curso);
                $('#edit_id_docente').val(response.id_docente);
                $('#edit_id_seccion').val(response.id_seccion);
                $('#edit_id_turno').val(response.id_turno);
                $('#edit_id_aula').val(response.id_aula);

                // Formatear tiempos recortando los segundos (de "14:30:00" a "14:30")
                if(response.hora_inicio) $('#hora_inicio').val(response.hora_inicio.substring(0, 5));
                if(response.hora_fin) $('#hora_fin').val(response.hora_fin.substring(0, 5));

                // Cargar campos planos restantes
                $('#dia').val(response.dia);
                $('#tipo_aula').val(response.tipo_aula);
                $('#frecuencia').val(response.frecuencia);
                $('#capacidad').val(response.capacidad);

                // Desplegar el modal de Bootstrap
                $('#editHorarioModal').modal('show');
            },
            error: function() {
                Swal.fire('Error', 'No se pudieron recuperar los detalles del horario seleccionado.', 'error');
            }
        });
    }

    // 💾 ENVIAR LOS DATOS MODIFICADOS MEDIANTE AJAX (PUT)
    $('#editHorarioForm').submit(function(e) {
        e.preventDefault();

        var formData = $(this).serialize();
        var horarioId = $('#horarioId').val();

        $.ajax({
            url: '/horarios/' + horarioId,
            type: 'PUT',
            data: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                // Ocultar el modal de edición
                $('#editHorarioModal').modal('hide');

                // Alerta de éxito y recarga para renderizar las relaciones (Docente, Curso, etc.) correctamente
                Swal.fire({
                    title: '¡Éxito!',
                    text: 'Horario actualizado correctamente.',
                    icon: 'success',
                    confirmButtonText: 'Aceptar'
                }).then(() => {
                    location.reload();
                });
            },
            error: function(xhr) {
                let mensajeError = 'Hubo un problema al actualizar el horario.';
                if(xhr.responseJSON && xhr.responseJSON.message) {
                    mensajeError = xhr.responseJSON.message;
                }
                Swal.fire('Error', mensajeError, 'error');
            }
        });
    });
</script>

<script>
    $('#filtro_plan, #filtro_semestre').on('change', function() {
        let plan = $('#filtro_plan').val();
        let semestre = $('#filtro_semestre').val();

        $.ajax({
            url: "{{ route('horarios.filtro') }}",
            type: "GET",
            data: { plan: plan, semestre: semestre },
            beforeSend: function() {
                // Cambiado colspan a 15
                $('#tablahorarios tbody').html(`
                    <tr>
                        <td colspan="15" class="text-center">Cargando...</td>
                    </tr>
                `);
            },
            success: function(data) {
                let tabla = $('#tablahorarios tbody');
                tabla.empty();

                if (data.length === 0) {
                    tabla.html(`
                        <tr>
                            <td colspan="15" class="text-center">No se encontraron horarios</td>
                        </tr>
                    `);
                    return;
                }

                data.forEach(h => {
                    let docenteNombre = h.docente 
                        ? `${h.docente.nombre ?? ''} ${h.docente.apellido ?? ''}`.trim() 
                        : '-';

                    let seccionNombre = h.seccion?.nombre ?? '-';
                    let turnoNombre = h.turno?.nombre ?? '-';
                    let numeroAula = h.numero_aula ?? (h.aula?.nombre ?? '-');
                    
                    // ✅ AÑADIDO: Nombre del semestre
                    let semestreNombre = h.curso?.semestre?.nombre ?? '-';

                    tabla.append(`
                        <tr id="horario-${h.id}">
                            <td>${h.curso?.nombre ?? '-'}</td>
                            <td>${semestreNombre}</td>
                            <td>${docenteNombre}</td>
                            <td><span class="badge bg-soft-primary font-12">${seccionNombre}</span></td>
                            <td><span class="badge bg-soft-secondary font-12">${turnoNombre}</span></td>
                            <td>${h.periodo?.nombre ?? '-'}</td>
                            <td>${h.plan_estudio?.nombre ?? '-'}</td>
                            <td>${h.hora_inicio}</td>
                            <td>${h.hora_fin}</td>
                            <td>${h.dia}</td>
                            <td>${h.tipo_aula}</td>
                            <td>${numeroAula}</td>
                            <td>${h.frecuencia}</td>
                            <td>${h.capacidad}</td>
                            <td>
                                <a href="javascript:void(0);" class="text-warning" onclick="openEditModal(${h.id})">
                                    <i class="las la-pen text-secondary font-18"></i>
                                </a>
                                <form action="/horarios/${h.id}" method="POST" class="d-inline delete-form" id="delete-form-${h.id}">
                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="button" class="btn btn-link p-0" onclick="deleteHorario(${h.id})">
                                        <i class="las la-trash-alt text-secondary font-18"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    `);
                });
            },
            error: function() {
                $('#tablahorarios tbody').html(`
                    <tr>
                        <td colspan="15" class="text-center text-danger">Error al cargar horarios</td>
                    </tr>
                `);
            }
        });
    });
</script>
<script>
    document.getElementById('btn-sincronizar-viejos').addEventListener('click', function() {
    
    // 1. Alerta de confirmación previa
    Swal.fire({
        title: '¿Iniciar sincronización?',
        text: "El sistema buscará los horarios antiguos sin vincular, creará sus secciones/grupos en Moodle y matriculará a sus respectivos docentes.",
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, sincronizar ahora',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            
            // 🔄 2. Bloquear la pantalla con animación de carga (Moodle toma su tiempo)
            Swal.fire({
                title: 'Sincronizando con Moodle...',
                text: 'Por favor, espera pacientemente y no cierres ni recargues la página.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // 🚀 3. Petición AJAX (Fetch) al servidor local
            fetch('/sincronizar-horarios-viejos', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(async response => {
                const data = await response.json();
                if (!response.ok) {
                    throw new Error(data.message || 'Ocurrió un error inesperado en el servidor.');
                }
                return data;
            })
            .then(data => {
                // ⚠️ Caso A: El proceso terminó pero con advertencias/errores parciales (ej. un docente sin moodle_user_id)
                if (data.detalles_errores && data.detalles_errores.length > 0) {
                    
                    let listaErrores = '<div class="text-start mt-2" style="max-height: 150px; overflow-y: auto; font-size: 13px; border: 1px solid #dee2e6; padding: 8px; background: #fff1f0; border-radius: 4px;">';
                    data.detalles_errores.forEach(err => {
                        listaErrores += `• <span class="text-danger">${err}</span><br>`;
                    });
                    listaErrores += '</div>';

                    Swal.fire({
                        title: 'Sincronización parcial',
                        html: `Proceso terminado. ${data.message}<br><br><b>Detalles observados:</b>${listaErrores}`,
                        icon: 'warning',
                        confirmButtonText: 'Aceptar'
                    }).then(() => {
                        location.reload(); // Recarga la página para actualizar la grilla
                    });

                } else {
                    // 🎉 Caso B: Todo fue un éxito total sin contratiempos
                    Swal.fire({
                        title: '¡Éxito!',
                        text: data.message || 'Todos los horarios huérfanos se procesaron y vincularon correctamente.',
                        icon: 'success',
                        confirmButtonText: 'Excelente'
                    }).then(() => {
                        location.reload(); // Recarga la página para actualizar la grilla
                    });
                }
            })
            .catch(error => {
                // ❌ Caso C: Error fatal de red o caída de conexión con el backend
                Swal.fire({
                    title: 'Error de comunicación',
                    text: error.message || 'No se pudo completar la sincronización forzada.',
                    icon: 'error',
                    confirmButtonText: 'Cerrar'
                });
            });
        }
    });
});
</script>
@endsection