@extends('layouts.master')

@section('title')
    Profesores
@endsection

@section('css')
<style>
    #horariosResultadoContenido .tabla-acciones-docentes th:last-child { text-align: center; font-weight: 600; }
    #horariosResultadoContenido .tabla-acciones-docentes td:last-child { text-align: center; vertical-align: middle; }
    #horariosResultadoContenido .acciones-docente-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; }
    .btn-accion-docente { width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; }
    .btn-accion-docente:hover { opacity: 0.9; }
    .btn-accion-docente.accion-ver { background-color: #eef1f5; color: #5a6c7d; }
    .btn-accion-docente.accion-editar { background-color: #e3f2fd; color: #1976d2; }
    .btn-accion-docente.accion-baja { background-color: #ffebee; color: #c62828; }
</style>
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Profesores @endslot
    @endcomponent

    <div class="row">
        <!-- Menú lateral izquierdo -->
        <div class="col-12 col-md-3 col-lg-2 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="p-3 rounded-top bg-dark">
                        <h6 class="mb-0 fw-semibold text-white">Profesores</h6>
                    </div>
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=horarios') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'horarios' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-calendar-line me-2 align-middle"></i>Horarios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=registro-asistencias') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'registro-asistencias' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-user-follow-line me-2 align-middle"></i>Registro de asistencias
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=registro-justificantes') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'registro-justificantes' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-file-text-line me-2 align-middle"></i>Registro de justificantes
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=registro-asesorias') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'registro-asesorias' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-customer-service-2-line me-2 align-middle"></i>Registro de asesorías
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=examenes-extraordinarios') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'examenes-extraordinarios' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-file-list-3-line me-2 align-middle"></i>Registro de exámenes extraordinarios
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="{{ url('profesores?seccion=bitacora') }}" class="nav-link py-3 {{ ($seccion ?? '') === 'bitacora' ? 'bg-light text-primary fw-medium' : '' }}">
                                <i class="ri-history-line me-2 align-middle"></i>Bitácora de actividades
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Contenido derecho -->
        <div class="col-12 col-md-9 col-lg-10">
            @if(($seccion ?? '') === 'horarios')
                <div class="card">
                    <div class="card-body">
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar los profesores registrados en la aplicación.</p>
                        <form id="filtrosProfesoresForm">
                            <div class="row g-3 align-items-end mb-3">
                                <div class="col-12 col-md-5">
                                    <label for="filtroNombreProfesor" class="form-label">Nombre</label>
                                    <input type="text" class="form-control" id="filtroNombreProfesor" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-5">
                                    <label for="filtroPlantelProfesor" class="form-label">Plantel</label>
                                    <select class="form-select" id="filtroPlantelProfesor">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-12">
                                    <div class="d-flex flex-wrap gap-2 justify-content-end">
                                        <button type="submit" class="btn btn-primary" id="btnBuscarProfesor"><i class="ri-search-line me-1"></i>Buscar</button>
                                        <a href="{{ url('registro-empleados') }}" class="btn btn-warning"><i class="ri-add-line me-1"></i>Registrar</a>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div class="mb-4">
                            <label class="form-label">Sección a consultar:</label>
                            <select class="form-select" id="seccionConsultar" style="max-width: 220px;">
                                <option value="horarios" selected>Horarios</option>
                                <option value="asistencias">Registro de asistencias</option>
                                <option value="justificantes">Registro de justificantes</option>
                                <option value="asesorias">Registro de asesorías</option>
                                <option value="examenes">Registro de exámenes extraordinarios</option>
                                <option value="bitacora">Bitácora de actividades</option>
                            </select>
                        </div>
                        <div class="card bg-light border-0" id="horariosResultadoCard">
                            <div class="card-body text-center py-5" id="horariosResultadoPlaceholder">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-information-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                            </div>
                            <div class="card-body d-none" id="horariosResultadoContenido"></div>
                        </div>
                    </div>
                </div>
            @elseif(($seccion ?? '') === 'registro-asistencias')
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-2">Registro de asistencias</h5>
                        <p class="text-muted mb-4">Usa el siguiente formulario para registrar asistencias, faltas o retardos a los profesores en sus horarios de clase.</p>
                        <form id="formRegistroAsistencias">
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-4">
                                    <label for="asistProfesor" class="form-label">Profesor</label>
                                    <input type="text" class="form-control" id="asistProfesor" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label for="asistPlantel" class="form-label">Plantel</label>
                                    <select class="form-select" id="asistPlantel">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label">Oferta educativa</label>
                                    <div class="d-flex justify-content-end gap-2 mb-2">
                                        <a href="#" class="text-warning text-decoration-none small" id="asistOfertaMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-warning text-decoration-none small" id="asistOfertaDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                    <div class="border rounded p-3 bg-light" id="asistOfertaChips" style="min-height: 52px;"></div>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label">Plan estudios</label>
                                    <div class="d-flex justify-content-end gap-2 mb-2">
                                        <a href="#" class="text-warning text-decoration-none small" id="asistPlanMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-warning text-decoration-none small" id="asistPlanDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                    <div class="border rounded p-3 bg-light" id="asistPlanChips" style="min-height: 52px;"></div>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label">Período</label>
                                    <div class="d-flex justify-content-end gap-2 mb-2">
                                        <a href="#" class="text-warning text-decoration-none small" id="asistPeriodoMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-warning text-decoration-none small" id="asistPeriodoDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                    <div class="border rounded p-3 bg-light" id="asistPeriodoChips" style="min-height: 52px;"></div>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label">Grado y grupo</label>
                                    <div class="d-flex justify-content-end gap-2 mb-2">
                                        <a href="#" class="text-warning text-decoration-none small" id="asistGrupoMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-warning text-decoration-none small" id="asistGrupoDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                    <div class="border rounded p-3 bg-light" id="asistGrupoChips" style="min-height: 52px;"></div>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-4">
                                    <label for="asistFechaGeneracion" class="form-label">Fecha de generación</label>
                                    <input type="date" class="form-control" id="asistFechaGeneracion">
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscarAsistencias"><i class="ri-search-line me-1"></i>Buscar</button>
                            </div>
                        </form>
                        <div class="card bg-light border-0 mt-4" id="asistResultadoVacio">
                            <div class="card-body text-center py-5">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-information-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                            </div>
                        </div>
                        <div class="card border mt-4 d-none" id="asistResultadoLista">
                            <div class="card-header">
                                <h6 class="mb-0">Resultados de la búsqueda</h6>
                            </div>
                            <div class="card-body">
                                <div id="asistResultadoContenido"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($seccion ?? '') === 'registro-justificantes')
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-2">Registro de justificantes</h5>
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar las inasistencias registradas en la aplicación.</p>
                        <form id="formRegistroJustificantes">
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-4">
                                    <label for="justProfesor" class="form-label">Profesor</label>
                                    <input type="text" class="form-control" id="justProfesor" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label for="justPlantel" class="form-label">Plantel</label>
                                    <select class="form-select" id="justPlantel">
                                        <option value="">-- Todos --</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-4">
                                    <label for="justPlanEstudios" class="form-label">Plan de estudios</label>
                                    <select class="form-select" id="justPlanEstudios">
                                        <option value="">-- Todos --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3 align-items-end">
                                <div class="col-12 col-md-4">
                                    <label for="justPeriodo" class="form-label">Periodo</label>
                                    <select class="form-select" id="justPeriodo">
                                        <option value="">-- Todos --</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-4">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="justMostrarRetardos">
                                        <label class="form-check-label" for="justMostrarRetardos">¿Mostrar retardos?</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 text-md-end">
                                    <button type="submit" class="btn btn-primary" id="btnBuscarJustificantes"><i class="ri-search-line me-1"></i>Buscar</button>
                                </div>
                            </div>
                        </form>
                        <div class="card bg-light border-0 mt-4" id="justResultadoVacio">
                            <div class="card-body text-center py-5">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-search-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">No se encontraron resultados con los filtros seleccionados.</p>
                            </div>
                        </div>
                        <div class="card border mt-4 d-none" id="justResultadoLista">
                            <div class="card-header">
                                <h6 class="mb-0">Resultados de la búsqueda</h6>
                            </div>
                            <div class="card-body">
                                <div id="justResultadoContenido"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($seccion ?? '') === 'registro-asesorias')
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-2">Registro de asesorías</h5>
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar las <strong>asesorías</strong> registradas en la aplicación. (Considera que el profesor es opcional)</p>
                        <form id="formRegistroAsesorias">
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-6">
                                    <label for="asesProfesor" class="form-label">Profesor</label>
                                    <input type="text" class="form-control" id="asesProfesor" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label for="asesAsignatura" class="form-label">Asignatura</label>
                                    <select class="form-select" id="asesAsignatura">
                                        <option value="">- Todas -</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-6">
                                    <label for="asesPlantel" class="form-label">Plantel</label>
                                    <select class="form-select" id="asesPlantel">
                                        <option value="">- Todos -</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Rango de fechas</label>
                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                        <label class="small text-muted mb-0">del:</label>
                                        <input type="date" class="form-control form-control-sm" id="asesFechaDesde" style="max-width: 150px;">
                                        <label class="small text-muted mb-0">al</label>
                                        <input type="date" class="form-control form-control-sm" id="asesFechaHasta" style="max-width: 150px;">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex gap-2 justify-content-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscarAsesorias"><i class="ri-search-line me-1"></i>Buscar</button>
                                <button type="button" class="btn btn-warning" id="btnRegistrarAsesoria"><i class="ri-add-line me-1"></i>Registrar</button>
                            </div>
                        </form>
                        <div class="card bg-light border-0 mt-4" id="asesResultadoVacio">
                            <div class="card-body text-center py-5">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-information-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                            </div>
                        </div>
                        <div class="card border mt-4 d-none" id="asesResultadoLista">
                            <div class="card-header">
                                <h6 class="mb-0">Resultados de la búsqueda</h6>
                            </div>
                            <div class="card-body">
                                <div id="asesResultadoContenido"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal Agregar asesoría -->
                <div class="modal fade" id="modalAgregarAsesoria" tabindex="-1" aria-labelledby="modalAgregarAsesoriaLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title" id="modalAgregarAsesoriaLabel">Agregar asesoría</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <p class="text-muted small mb-3">Selecciona el plantel donde se impartirá la asesoría, introduce al profesor que impartirá, introduce la fecha, la duración en horas y a continuación da clic en el botón de GUARDAR.</p>
                                <form id="formAgregarAsesoria">
                                    <div class="mb-3">
                                        <label for="modalAsesPlantel" class="form-label">* Plantel</label>
                                        <select class="form-select" id="modalAsesPlantel" required>
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalAsesProfesor" class="form-label">* Nuevo Profesor</label>
                                        <input type="text" class="form-control" id="modalAsesProfesor" required placeholder="Nombre del profesor" maxlength="255">
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalAsesFecha" class="form-label">* Fecha de asesoría</label>
                                        <input type="datetime-local" class="form-control" id="modalAsesFecha" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalAsesDuracion" class="form-label">* Duración en horas (HH:mm)</label>
                                        <input type="time" class="form-control" id="modalAsesDuracion" value="01:00" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalAsesAsignatura" class="form-label">Asignatura</label>
                                        <select class="form-select" id="modalAsesAsignatura">
                                            <option value="">-- Ninguna --</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalAsesObservaciones" class="form-label">Observaciones <span class="text-muted small">(<span id="modalAsesObsRestantes">500</span> caracteres restantes)</span></label>
                                        <textarea class="form-control" id="modalAsesObservaciones" rows="3" maxlength="500" placeholder="Observaciones opcionales"></textarea>
                                    </div>
                                    <p class="small text-muted mb-0">Nota: Llenar campos obligatorios (*).</p>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-success" id="btnGuardarAsesoria"><i class="ri-save-line me-1"></i>Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($seccion ?? '') === 'examenes-extraordinarios')
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-2">Registro de exámenes extraordinarios</h5>
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar los extraordinarios registrados en la aplicación.</p>
                        <form id="formRegistroExtra">
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-6">
                                    <label for="extProfesor" class="form-label">Profesor</label>
                                    <input type="text" class="form-control" id="extProfesor" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-6">
                                    <label for="extAsignatura" class="form-label">Asignatura</label>
                                    <select class="form-select" id="extAsignatura">
                                        <option value="">-- Todas --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-6">
                                    <label for="extPlantel" class="form-label">Plantel</label>
                                    <select class="form-select" id="extPlantel">
                                        <option value="">-- Todos --</option>
                                    </select>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label">Rango de fechas</label>
                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                        <label class="small text-muted mb-0">del:</label>
                                        <input type="date" class="form-control form-control-sm" id="extFechaDesde" style="max-width: 150px;">
                                        <label class="small text-muted mb-0">al</label>
                                        <input type="date" class="form-control form-control-sm" id="extFechaHasta" style="max-width: 150px;">
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex gap-2 justify-content-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscarExtra"><i class="ri-search-line me-1"></i>Buscar</button>
                                <button type="button" class="btn btn-warning" id="btnRegistrarExtra"><i class="ri-add-line me-1"></i>Registrar</button>
                            </div>
                        </form>
                        <div class="card bg-light border-0 mt-4" id="extResultadoVacio">
                            <div class="card-body text-center py-5">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-information-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                            </div>
                        </div>
                        <div class="card border mt-4 d-none" id="extResultadoLista">
                            <div class="card-header">
                                <h6 class="mb-0">Resultados de la búsqueda</h6>
                            </div>
                            <div class="card-body">
                                <div id="extResultadoContenido"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modal Agregar extraordinario -->
                <div class="modal fade" id="modalAgregarExtraordinario" tabindex="-1" aria-labelledby="modalAgregarExtraordinarioLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title" id="modalAgregarExtraordinarioLabel">Agregar extraordinario</h5>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                            </div>
                            <div class="modal-body">
                                <p class="text-muted small mb-3">Selecciona el plantel donde se impartirá el examen extraordinario, introduce al profesor quien lo impartirá, introduce la fecha, la duración en horas y a continuación da clic en el botón de GUARDAR.</p>
                                <form id="formAgregarExtraordinario">
                                    <div class="mb-3">
                                        <label for="modalExtPlantel" class="form-label">* Plantel</label>
                                        <select class="form-select" id="modalExtPlantel" required>
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalExtProfesor" class="form-label">* Nuevo Profesor</label>
                                        <input type="text" class="form-control" id="modalExtProfesor" required placeholder="Nombre del profesor" maxlength="255">
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalExtFecha" class="form-label">* Fecha de extraordinario</label>
                                        <input type="datetime-local" class="form-control" id="modalExtFecha" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalExtDuracion" class="form-label">* Duración en horas (HH:mm)</label>
                                        <input type="time" class="form-control" id="modalExtDuracion" value="01:00" required>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalExtAsignatura" class="form-label">* Asignatura</label>
                                        <select class="form-select" id="modalExtAsignatura" required>
                                            <option value="">Selecciona una opción...</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label for="modalExtObservaciones" class="form-label">Observaciones <span class="text-muted small">(<span id="modalExtObsRestantes">500</span> caracteres restantes)</span></label>
                                        <textarea class="form-control" id="modalExtObservaciones" rows="3" maxlength="500" placeholder="Observaciones opcionales"></textarea>
                                    </div>
                                    <p class="small text-muted mb-0">Nota: Llenar campos obligatorios (*).</p>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                <button type="button" class="btn btn-success" id="btnGuardarExtra"><i class="ri-save-line me-1"></i>Guardar</button>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif(($seccion ?? '') === 'bitacora')
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-2">Bitácora de actividades</h5>
                        <p class="text-muted mb-4">Usa el siguiente formulario para mostrar la <strong>BITÁCORA DE ACTIVIDADES</strong> por profesor.</p>
                        <form id="formBitacora">
                            <div class="row g-3 mb-3">
                                <div class="col-12 col-md-4">
                                    <label for="bitNombre" class="form-label">Nombre</label>
                                    <input type="text" class="form-control" id="bitNombre" placeholder="Nombre del profesor">
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label">Rango de fechas</label>
                                    <div class="d-flex flex-wrap align-items-center gap-2">
                                        <input type="date" class="form-control form-control-sm" id="bitFechaDesde" style="max-width: 150px;" title="Desde">
                                        <span class="small text-muted">-</span>
                                        <input type="date" class="form-control form-control-sm" id="bitFechaHasta" style="max-width: 150px;" title="Hasta">
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-12">
                                    <label class="form-label">Sección</label>
                                    <div class="d-flex justify-content-end gap-2 mb-2">
                                        <a href="#" class="text-warning text-decoration-none small" id="bitSeccionMarcarTodos">Marcar todos</a>
                                        <a href="#" class="text-warning text-decoration-none small" id="bitSeccionDesmarcarTodos">Desmarcar todos</a>
                                    </div>
                                    <div class="border rounded p-3 bg-light" id="bitSeccionChips" style="min-height: 52px;"></div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscarBitacora"><i class="ri-search-line me-1"></i>Buscar</button>
                            </div>
                        </form>
                        <div class="card bg-light border-0 mt-4" id="bitResultadoVacio">
                            <div class="card-body text-center py-5">
                                <div class="avatar-lg mx-auto mb-3">
                                    <div class="avatar-title bg-secondary bg-opacity-25 text-secondary rounded-circle">
                                        <i class="ri-information-line fs-1"></i>
                                    </div>
                                </div>
                                <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                            </div>
                        </div>
                        <div class="card border mt-4 d-none" id="bitResultadoLista">
                            <div class="card-header">
                                <h6 class="mb-0">Bitácora de actividades</h6>
                            </div>
                            <div class="card-body p-0">
                                <div id="bitResultadoContenido"></div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="card">
                    <div class="card-body text-center py-5">
                        <div class="avatar-lg mx-auto mb-3">
                            <div class="avatar-title bg-light text-muted rounded-circle">
                                <i class="ri-file-list-3-line fs-1"></i>
                            </div>
                        </div>
                        <h6 class="text-muted">Contenido en desarrollo</h6>
                        <p class="text-muted small mb-0">Esta sección se implementará posteriormente.</p>
                    </div>
                </div>
            @endif
        </div>
    </div>
@endsection

@section('script')
    <script>
    var baseUrl = '{{ url("") }}';
        var csrfToken = '{{ csrf_token() }}';

    function cargarPlanteles() {
        fetch(baseUrl + '/api/profesores/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantelProfesor');
            if (!sel) return;
            var opts = (data || []).map(function(p) {
                var v = p.id || p.nombre;
                return '<option value="' + v + '">' + (p.nombre || p.id) + '</option>';
            }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        var form = document.getElementById('filtrosProfesoresForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var nombre = (document.getElementById('filtroNombreProfesor') && document.getElementById('filtroNombreProfesor').value) ? document.getElementById('filtroNombreProfesor').value.trim() : '';
                var plantelId = (document.getElementById('filtroPlantelProfesor') && document.getElementById('filtroPlantelProfesor').value) ? document.getElementById('filtroPlantelProfesor').value : '';
                var params = new URLSearchParams();
                if (nombre) params.set('nombre', nombre);
                if (plantelId) params.set('plantel_id', plantelId);
                fetch(baseUrl + '/api/profesores/buscar-docentes?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        var placeholder = document.getElementById('horariosResultadoPlaceholder');
                        var contenido = document.getElementById('horariosResultadoContenido');
                        if (!contenido) return;
                        if (placeholder) placeholder.classList.add('d-none');
                        contenido.classList.remove('d-none');
                        if (res.success && res.items && res.items.length > 0) {
                            var html = '<div class="table-responsive"><table class="table table-bordered table-hover mb-0 tabla-acciones-docentes"><thead class="table-light"><tr><th>N° Empleado</th><th>Nombre</th><th>Apellido paterno</th><th>Apellido materno</th><th>Email</th><th>Teléfono</th><th>Nivel estudios</th><th>Acciones</th></tr></thead><tbody>';
                            res.items.forEach(function(d) {
                                var nom = (d.nombre || '').replace(/</g, '&lt;');
                                var ap = (d.apellido_paterno || '').replace(/</g, '&lt;');
                                var am = (d.apellido_materno || '').replace(/</g, '&lt;');
                                var em = (d.email || '').replace(/</g, '&lt;');
                                var tel = (d.telefono || '-').replace(/</g, '&lt;');
                                var niv = (d.nivel_estudios || '-').replace(/</g, '&lt;');
                                var urlShow = baseUrl + '/profesores/docente/' + (d.id || '');
                                var urlEdit = baseUrl + '/profesores/docente/' + (d.id || '') + '/edit';
                                var dataNombre = (nom + ' ' + ap + ' ' + am).replace(/"/g, '&quot;');
                                var acciones = '<div class="acciones-docente-wrap"><a href="' + urlShow + '" class="btn-accion-docente accion-ver" title="Ver"><i class="ri-external-link-line"></i></a><a href="' + urlEdit + '" class="btn-accion-docente accion-editar" title="Editar"><i class="ri-pencil-line"></i></a><button type="button" class="btn-accion-docente accion-baja btn-baja-docente" data-id="' + (d.id || '') + '" data-nombre="' + dataNombre + '" title="Dar de baja"><i class="ri-delete-bin-line"></i></button></div>';
                                html += '<tr><td>' + (d.numero_empleado || '') + '</td><td>' + nom + '</td><td>' + ap + '</td><td>' + am + '</td><td>' + em + '</td><td>' + tel + '</td><td>' + niv + '</td><td>' + acciones + '</td></tr>';
                            });
                            var urlPdf = baseUrl + '/reportes/listado-docentes/pdf';
                            if (document.getElementById('filtroNombreProfesor') && document.getElementById('filtroNombreProfesor').value.trim()) {
                                urlPdf += '?nombre=' + encodeURIComponent(document.getElementById('filtroNombreProfesor').value.trim());
                            }
                            html += '</tbody></table></div><p class="text-muted small mt-2 mb-0">Se encontraron ' + res.items.length + ' profesor(es). <a href="' + urlPdf + '" target="_blank" class="ms-2">Imprimir listado PDF</a></p>';
                            contenido.innerHTML = html;
                            contenido.querySelectorAll('.btn-baja-docente').forEach(function(btn) {
                                btn.addEventListener('click', function() {
                                    var id = this.getAttribute('data-id');
                                    var nombre = this.getAttribute('data-nombre') || 'este docente';
                                    if (typeof Swal !== 'undefined') {
                                        Swal.fire({
                                            title: '¿Dar de baja al docente?',
                                            html: 'Se dará de baja a <strong>' + nombre + '</strong>. Los grupos asignados quedarán sin docente. Esta acción no se puede deshacer.',
                                            icon: 'warning',
                                            showCancelButton: true,
                                            confirmButtonColor: '#d33',
                                            cancelButtonColor: '#6c757d',
                                            confirmButtonText: 'Sí, dar de baja',
                                            cancelButtonText: 'Cancelar'
                                        }).then(function(result) {
                                            if (result.isConfirmed && id) {
                                                fetch(baseUrl + '/profesores/docente/' + id, {
                                                    method: 'DELETE',
                                                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                                                }).then(function(r) { return r.json(); }).then(function(data) {
                                                    if (data && data.success) {
                                                        Swal.fire({ icon: 'success', title: 'Listo', text: data.message || 'Docente dado de baja.' });
                                                        document.getElementById('btnBuscarHorarios').click();
                                                    } else {
                                                        Swal.fire({ icon: 'error', title: 'Error', text: (data && data.message) || 'No se pudo dar de baja.' });
                                                    }
                                                }).catch(function() {
                                                    Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
                                                });
                                            }
                                        });
                                    } else if (confirm('¿Dar de baja a ' + nombre + '? Esta acción no se puede deshacer.')) {
                                        var form = document.createElement('form');
                                        form.method = 'POST';
                                        form.action = baseUrl + '/profesores/docente/' + id;
                                        var csrf = document.createElement('input');
                                        csrf.type = 'hidden'; csrf.name = '_token'; csrf.value = csrfToken;
                                        var method = document.createElement('input');
                                        method.type = 'hidden'; method.name = '_method'; method.value = 'DELETE';
                                        form.appendChild(csrf); form.appendChild(method);
                                        document.body.appendChild(form);
                                        form.submit();
                                    }
                                });
                            });
                        } else {
                            contenido.innerHTML = '<p class="text-muted mb-0 text-center py-4">No se encontraron profesores con los criterios indicados. Prueba con otro nombre o deja el filtro vacío para listar todos.</p>';
                        }
                    })
                    .catch(function() {
                        var placeholder = document.getElementById('horariosResultadoPlaceholder');
                        var contenido = document.getElementById('horariosResultadoContenido');
                        if (placeholder) placeholder.classList.add('d-none');
                        if (contenido) { contenido.classList.remove('d-none'); contenido.innerHTML = '<p class="text-danger mb-0 text-center py-4">Error al realizar la búsqueda.</p>'; }
                    });
            });
        }
        cargarPlanteles();

        // --- Registro de asistencias ---
        var formAsist = document.getElementById('formRegistroAsistencias');
        if (formAsist) {
            var listadoOfertas = [], listadoPlanes = [], listadoCiclos = [], listadoGrupos = [];
            var ofertasSel = {}, planesSel = {}, periodosSel = {}, gruposSel = {};

            function cargarSelect(url, idSelect, keyLabel) {
                fetch(baseUrl + url).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : [];
                    var opts = arr.map(function(o) {
                        var v = o.id || o.nombre;
                        var lbl = o.nombre || o.clave || o.id || v;
                        return '<option value="' + v + '">' + lbl + '</option>';
                    }).join('');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
                });
            }

            function renderChips(contId, listado, seleccionados, labelKey, idKey, onUpdate) {
                var cont = document.getElementById(contId);
                if (!cont) return;
                idKey = idKey || 'id';
                labelKey = labelKey || 'nombre';
                if (!listado || listado.length === 0) {
                    cont.innerHTML = '<span class="text-muted small">No hay opciones disponibles.</span>';
                    if (onUpdate) onUpdate();
                    return;
                }
                var chips = listado.map(function(o) {
                    var id = String(o[idKey] != null ? o[idKey] : o.nombre || '');
                    var nombre = (o[labelKey] || o.clave || o.nombre || id).toString().replace(/</g, '&lt;').replace(/"/g, '&quot;');
                    var sel = seleccionados[id];
                    if (sel) {
                        return '<span class="badge bg-secondary me-2 mb-2 d-inline-flex align-items-center" data-id="' + id + '">' +
                            '<i class="ri-close-line me-1 chip-remove" style="cursor:pointer;"></i>' + nombre + '</span>';
                    }
                    return '<span class="badge bg-light text-dark border me-2 mb-2 chip-no-sel" data-id="' + id + '" style="cursor:pointer;">' + nombre + '</span>';
                }).join('');
                cont.innerHTML = chips;
                cont.querySelectorAll('.chip-remove').forEach(function(el) {
                    el.onclick = function(e) { e.preventDefault(); var id = this.closest('[data-id]').getAttribute('data-id'); delete seleccionados[id]; renderChips(contId, listado, seleccionados, labelKey, idKey, onUpdate); if (onUpdate) onUpdate(); };
                });
                cont.querySelectorAll('.chip-no-sel').forEach(function(el) {
                    el.onclick = function() { var id = this.getAttribute('data-id'); var o = listado.find(function(x) { return String(x[idKey] != null ? x[idKey] : x.nombre) === id; }); if (o) seleccionados[id] = o[labelKey] || o.clave || o.nombre; renderChips(contId, listado, seleccionados, labelKey, idKey, onUpdate); if (onUpdate) onUpdate(); };
                });
            }

            function cargarOfertas() {
                fetch(baseUrl + '/api/ofertas-educativas').then(function(r) { return r.json(); }).then(function(data) {
                    listadoOfertas = Array.isArray(data) ? data : [];
                    ofertasSel = {};
                    renderChips('asistOfertaChips', listadoOfertas, ofertasSel, 'nombre', 'id', cargarPlanes);
                    cargarPlanes();
                });
            }
            function cargarPlanes() {
                var ofertaIds = Object.keys(ofertasSel);
                var url = '/api/profesores/planes-estudio';
                if (ofertaIds.length === 1) url += '?oferta_educativa_id=' + ofertaIds[0];
                fetch(baseUrl + url).then(function(r) { return r.json(); }).then(function(data) {
                    listadoPlanes = Array.isArray(data) ? data : [];
                    if (ofertaIds.length !== 1) planesSel = {};
                    renderChips('asistPlanChips', listadoPlanes, planesSel, 'nombre', 'id');
                });
            }
            function cargarCiclos() {
                fetch(baseUrl + '/api/profesores/ciclos').then(function(r) { return r.json(); }).then(function(data) {
                    listadoCiclos = Array.isArray(data) ? data : [];
                    periodosSel = {};
                    renderChips('asistPeriodoChips', listadoCiclos, periodosSel, 'nombre', 'id', cargarGrupos);
                    cargarGrupos();
                });
            }
            function cargarGrupos() {
                var cicloIds = Object.keys(periodosSel);
                var url = '/api/profesores/grupos';
                if (cicloIds.length === 1) url += '?ciclo_id=' + cicloIds[0];
                fetch(baseUrl + url).then(function(r) { return r.json(); }).then(function(data) {
                    listadoGrupos = Array.isArray(data) ? data : [];
                    if (cicloIds.length !== 1) gruposSel = {};
                    renderChips('asistGrupoChips', listadoGrupos, gruposSel, 'clave', 'id');
                });
            }

            cargarSelect('/api/profesores/planteles', 'asistPlantel');
            cargarOfertas();
            cargarCiclos();

            document.getElementById('asistOfertaMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoOfertas.forEach(function(o) { ofertasSel[o.id] = o.nombre; }); renderChips('asistOfertaChips', listadoOfertas, ofertasSel, 'nombre', 'id', cargarPlanes); cargarPlanes(); });
            document.getElementById('asistOfertaDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); ofertasSel = {}; renderChips('asistOfertaChips', listadoOfertas, ofertasSel, 'nombre', 'id', cargarPlanes); cargarPlanes(); });
            document.getElementById('asistPlanMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoPlanes.forEach(function(p) { planesSel[String(p.id)] = p.nombre; }); renderChips('asistPlanChips', listadoPlanes, planesSel, 'nombre', 'id'); });
            document.getElementById('asistPlanDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); planesSel = {}; renderChips('asistPlanChips', listadoPlanes, planesSel, 'nombre', 'id'); });
            document.getElementById('asistPeriodoMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoCiclos.forEach(function(c) { periodosSel[String(c.id)] = c.nombre; }); renderChips('asistPeriodoChips', listadoCiclos, periodosSel, 'nombre', 'id', cargarGrupos); cargarGrupos(); });
            document.getElementById('asistPeriodoDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); periodosSel = {}; renderChips('asistPeriodoChips', listadoCiclos, periodosSel, 'nombre', 'id', cargarGrupos); cargarGrupos(); });
            document.getElementById('asistGrupoMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); listadoGrupos.forEach(function(g) { gruposSel[String(g.id)] = g.clave; }); renderChips('asistGrupoChips', listadoGrupos, gruposSel, 'clave', 'id'); });
            document.getElementById('asistGrupoDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); gruposSel = {}; renderChips('asistGrupoChips', listadoGrupos, gruposSel, 'clave', 'id'); });

            var fechaGen = document.getElementById('asistFechaGeneracion');
            if (fechaGen) {
                var hoy = new Date();
                fechaGen.value = hoy.getFullYear() + '-' + String(hoy.getMonth() + 1).padStart(2, '0') + '-' + String(hoy.getDate()).padStart(2, '0');
            }

            formAsist.addEventListener('submit', function(e) {
                e.preventDefault();
                var profesor = document.getElementById('asistProfesor').value.trim();
                var plantelId = document.getElementById('asistPlantel').value;
                var ofertaIds = Object.keys(ofertasSel);
                var planIds = Object.keys(planesSel);
                var cicloIds = Object.keys(periodosSel);
                var grupoIds = Object.keys(gruposSel);
                var fecha = document.getElementById('asistFechaGeneracion').value;

                var params = new URLSearchParams();
                if (profesor) params.set('profesor', profesor);
                if (plantelId) params.set('plantel_id', plantelId);
                ofertaIds.forEach(function(id) { params.append('oferta_educativa_id[]', id); });
                planIds.forEach(function(id) { params.append('plan_estudio_id[]', id); });
                cicloIds.forEach(function(id) { params.append('ciclo_id[]', id); });
                grupoIds.forEach(function(id) { params.append('grupo_id[]', id); });
                if (fecha) params.set('fecha_generacion', fecha);

                if (!fecha) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Fecha requerida', text: 'Selecciona la fecha de generación para buscar horarios.' });
                    else alert('Selecciona la fecha de generación para buscar horarios.');
                    return;
                }
                fetch(baseUrl + '/api/profesores/buscar-asistencias?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        document.getElementById('asistResultadoVacio').classList.add('d-none');
                        var lista = document.getElementById('asistResultadoLista');
                        var contenido = document.getElementById('asistResultadoContenido');
                        lista.classList.remove('d-none');
                        if (res.success && res.items && res.items.length > 0) {
                            var fechaGen = res.fecha_generacion || fecha;
                            var html = '<p class="text-muted small mb-3">Fecha: <strong>' + fechaGen + '</strong> — ' + res.items.length + ' clase(s) encontrada(s). Registra asistencia, falta o retardo en cada fila y guarda.</p>';
                            html += '<div class="table-responsive"><table class="table table-bordered table-hover mb-0"><thead class="table-light"><tr><th>Profesor</th><th>Grupo</th><th>Materia</th><th>Día</th><th>Hora inicio</th><th>Hora fin</th><th>Estado</th><th>Acción</th></tr></thead><tbody>';
                            res.items.forEach(function(it) {
                                var tipoVal = (it.tipo || '') ? it.tipo : '';
                                var sel = '<select class="form-select form-select-sm asist-tipo-select" data-horario-id="' + it.horario_id + '"><option value="">-- Seleccione --</option><option value="asistencia"' + (tipoVal === 'asistencia' ? ' selected' : '') + '>Asistencia</option><option value="falta"' + (tipoVal === 'falta' ? ' selected' : '') + '>Falta</option><option value="retardo"' + (tipoVal === 'retardo' ? ' selected' : '') + '>Retardo</option></select>';
                                html += '<tr><td>' + (it.docente_nombre || '-') + '</td><td>' + (it.grupo_clave || '-') + '</td><td>' + (it.materia_nombre || '-') + '</td><td>' + (it.dia_semana || '-') + '</td><td>' + (it.hora_inicio || '') + '</td><td>' + (it.hora_fin || '') + '</td><td>' + sel + '</td><td><button type="button" class="btn btn-sm btn-primary btn-guardar-asist" data-horario-id="' + it.horario_id + '">Guardar</button></td></tr>';
                            });
                            html += '</tbody></table></div>';
                            contenido.innerHTML = html;
                            contenido.querySelectorAll('.btn-guardar-asist').forEach(function(btn) {
                                btn.addEventListener('click', function() {
                                    var horarioId = this.getAttribute('data-horario-id');
                                    var row = this.closest('tr');
                                    var sel = row.querySelector('.asist-tipo-select');
                                    var tipo = sel ? sel.value : '';
                                    if (!tipo) {
                                        if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Selecciona estado', text: 'Elige Asistencia, Falta o Retardo antes de guardar.' });
                                        else alert('Elige Asistencia, Falta o Retardo antes de guardar.');
                                        return;
                                    }
                                    var payload = { horario_id: horarioId, fecha: fecha, tipo: tipo };
                                    fetch(baseUrl + '/api/profesores/guardar-asistencia-docente', {
                                        method: 'POST',
                                        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' },
                                        body: JSON.stringify(payload)
                                    }).then(function(r) { return r.json(); }).then(function(data) {
                                        if (data && data.success) {
                                            if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Guardado', text: 'Registro de asistencia guardado correctamente.' });
                                            else alert('Registro guardado.');
                                        } else {
                                            if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: (data && data.message) || 'No se pudo guardar.' });
                                            else alert((data && data.message) || 'No se pudo guardar.');
                                        }
                                    }).catch(function() {
                                        if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
                                        else alert('Error de conexión.');
                                    });
                                });
                            });
                        } else {
                            contenido.innerHTML = '<p class="text-muted mb-0">No se encontraron horarios con los filtros seleccionados. Ajusta los criterios o verifica que existan grupos y horarios configurados para la fecha indicada (el día de la semana debe coincidir con las clases).</p>';
                        }
                    })
                    .catch(function() {
                        document.getElementById('asistResultadoVacio').classList.add('d-none');
                        document.getElementById('asistResultadoLista').classList.remove('d-none');
                        document.getElementById('asistResultadoContenido').innerHTML = '<p class="text-danger mb-0">Error al realizar la búsqueda.</p>';
                    });
            });
        }

        // --- Registro de justificantes ---
        var formJust = document.getElementById('formRegistroJustificantes');
        if (formJust) {
            function cargarSelectJust(url, idSelect, optTodos) {
                optTodos = optTodos !== false;
                fetch(baseUrl + url).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : [];
                    var opts = arr.map(function(o) {
                        var v = o.id || o.nombre;
                        var lbl = o.nombre || o.clave || o.id || v;
                        return '<option value="' + v + '">' + lbl + '</option>';
                    }).join('');
                    sel.innerHTML = (optTodos ? '<option value="">-- Todos --</option>' : '') + opts;
                });
            }
            cargarSelectJust('/api/profesores/planteles', 'justPlantel');
            cargarSelectJust('/api/profesores/planes-estudio', 'justPlanEstudios');
            cargarSelectJust('/api/profesores/ciclos', 'justPeriodo');

            formJust.addEventListener('submit', function(e) {
                e.preventDefault();
                var profesor = document.getElementById('justProfesor').value.trim();
                var plantelId = document.getElementById('justPlantel').value;
                var planId = document.getElementById('justPlanEstudios').value;
                var periodoId = document.getElementById('justPeriodo').value;
                var mostrarRetardos = document.getElementById('justMostrarRetardos').checked;

                var params = new URLSearchParams();
                if (profesor) params.set('profesor', profesor);
                if (plantelId) params.set('plantel_id', plantelId);
                if (planId) params.set('plan_estudio_id', planId);
                if (periodoId) params.set('periodo_id', periodoId);
                params.set('mostrar_retardos', mostrarRetardos ? '1' : '0');

                fetch(baseUrl + '/api/profesores/buscar-justificantes?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        document.getElementById('justResultadoVacio').classList.add('d-none');
                        var lista = document.getElementById('justResultadoLista');
                        var contenido = document.getElementById('justResultadoContenido');
                        lista.classList.remove('d-none');
                        if (res.items && res.items.length > 0) {
                            contenido.innerHTML = '<p class="text-muted">Se encontraron ' + res.items.length + ' registro(s). (La tabla de justificantes se ampliará cuando exista la tabla en la base de datos.)</p>';
                        } else {
                            contenido.innerHTML = '<p class="text-muted mb-0">No se encontraron resultados con los filtros seleccionados.</p>';
                        }
                    })
                    .catch(function() {
                        document.getElementById('justResultadoVacio').classList.add('d-none');
                        document.getElementById('justResultadoLista').classList.remove('d-none');
                        document.getElementById('justResultadoContenido').innerHTML = '<p class="text-danger mb-0">Error al realizar la búsqueda.</p>';
                    });
            });
        }

        // --- Registro de asesorías ---
        var formAses = document.getElementById('formRegistroAsesorias');
        if (formAses) {
            var headersJson = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
            function cargarSelectAses(url, idSelect, primeraOpcion) {
                fetch(baseUrl + url, { headers: headersJson }).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : (data && data.data ? data.data : []);
                    var opts = arr.map(function(o) {
                        var v = o.id != null ? o.id : (o.nombre || '');
                        var lbl = (o.nombre || o.clave || o.id || v).toString();
                        return '<option value="' + String(v) + '">' + lbl.replace(/</g, '&lt;') + '</option>';
                    }).join('');
                    sel.innerHTML = (primeraOpcion || '') + opts;
                }).catch(function() {
                    var sel = document.getElementById(idSelect);
                    if (sel) sel.innerHTML = (primeraOpcion || '') + '<option value="">Error al cargar</option>';
                });
            }
            function cargarAsignaturasEnSelect(idSelect, opcionInicial) {
                fetch(baseUrl + '/api/profesores/asignaturas', { headers: headersJson }).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : (data && data.data ? data.data : []);
                    var opts = arr.map(function(o) {
                        var v = o.id != null ? o.id : '';
                        var lbl = (o.nombre || o.clave || '').toString().replace(/</g, '&lt;');
                        return '<option value="' + String(v) + '">' + lbl + '</option>';
                    }).join('');
                    sel.innerHTML = (opcionInicial || '') + opts;
                }).catch(function() {
                    var sel = document.getElementById(idSelect);
                    if (sel) sel.innerHTML = (opcionInicial || '') + '<option value="">Error al cargar</option>';
                });
            }
            cargarSelectAses('/api/profesores/planteles', 'asesPlantel', '<option value="">- Todos -</option>');
            cargarAsignaturasEnSelect('asesAsignatura', '<option value="">- Todas -</option>');
            var hoy = new Date();
            var mes = String(hoy.getMonth() + 1).padStart(2, '0');
            var dia = String(hoy.getDate()).padStart(2, '0');
            document.getElementById('asesFechaDesde').value = hoy.getFullYear() + '-' + mes + '-01';
            document.getElementById('asesFechaHasta').value = hoy.getFullYear() + '-' + mes + '-' + dia;

            formAses.addEventListener('submit', function(e) {
                e.preventDefault();
                var params = new URLSearchParams();
                var profesor = document.getElementById('asesProfesor').value.trim();
                if (profesor) params.set('profesor', profesor);
                var asignaturaId = document.getElementById('asesAsignatura').value;
                if (asignaturaId) params.set('asignatura_id', asignaturaId);
                var plantelId = document.getElementById('asesPlantel').value;
                if (plantelId) params.set('plantel_id', plantelId);
                var fd = document.getElementById('asesFechaDesde').value;
                var fh = document.getElementById('asesFechaHasta').value;
                if (fd) params.set('fecha_desde', fd);
                if (fh) params.set('fecha_hasta', fh);
                fetch(baseUrl + '/api/profesores/buscar-asesorias?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        document.getElementById('asesResultadoVacio').classList.add('d-none');
                        var lista = document.getElementById('asesResultadoLista');
                        var contenido = document.getElementById('asesResultadoContenido');
                        lista.classList.remove('d-none');
                        if (res.items && res.items.length > 0) {
                            var html = '<div class="table-responsive"><table class="table table-sm table-hover"><thead><tr><th>Profesor</th><th>Plantel</th><th>Fecha</th><th>Duración</th><th>Asignatura</th><th>Observaciones</th></tr></thead><tbody>';
                            res.items.forEach(function(a) {
                                var fecha = a.fecha_asesoria ? (a.fecha_asesoria.date || a.fecha_asesoria) : '';
                                if (fecha && fecha.length > 16) fecha = fecha.substring(0, 16).replace('T', ' ');
                                html += '<tr><td>' + (a.profesor || '') + '</td><td>' + (a.escuela && a.escuela.nombre ? a.escuela.nombre : '-') + '</td><td>' + fecha + '</td><td>' + (a.duracion_horas || '') + '</td><td>' + (a.materia && a.materia.nombre ? a.materia.nombre : '-') + '</td><td>' + (a.observaciones || '').substring(0, 80) + (a.observaciones && a.observaciones.length > 80 ? '…' : '') + '</td></tr>';
                            });
                            html += '</tbody></table></div>';
                            contenido.innerHTML = html;
                        } else {
                            contenido.innerHTML = '<p class="text-muted mb-0">No se encontraron resultados con los filtros seleccionados.</p>';
                        }
                    })
                    .catch(function() {
                        document.getElementById('asesResultadoVacio').classList.add('d-none');
                        document.getElementById('asesResultadoLista').classList.remove('d-none');
                        document.getElementById('asesResultadoContenido').innerHTML = '<p class="text-danger mb-0">Error al realizar la búsqueda.</p>';
                    });
            });

            var modalAses = document.getElementById('modalAgregarAsesoria');
            if (modalAses) {
                var modalBs = new bootstrap.Modal(modalAses);
                document.getElementById('btnRegistrarAsesoria').addEventListener('click', function() {
                    cargarSelectAses('/api/profesores/planteles', 'modalAsesPlantel', '<option value="">-- Seleccione --</option>');
                    cargarAsignaturasEnSelect('modalAsesAsignatura', '<option value="">-- Ninguna --</option>');
                    document.getElementById('modalAsesProfesor').value = '';
                    var now = new Date();
                    document.getElementById('modalAsesFecha').value = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + 'T' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
                    document.getElementById('modalAsesDuracion').value = '01:00';
                    document.getElementById('modalAsesObservaciones').value = '';
                    document.getElementById('modalAsesObsRestantes').textContent = '500';
                    modalBs.show();
                });
                document.getElementById('modalAsesObservaciones').addEventListener('input', function() {
                    document.getElementById('modalAsesObsRestantes').textContent = 500 - this.value.length;
                });
                document.getElementById('btnGuardarAsesoria').addEventListener('click', function() {
                    var escuelaId = document.getElementById('modalAsesPlantel').value;
                    var profesor = document.getElementById('modalAsesProfesor').value.trim();
                    var fecha = document.getElementById('modalAsesFecha').value;
                    var duracion = document.getElementById('modalAsesDuracion').value;
                    var materiaId = document.getElementById('modalAsesAsignatura').value;
                    var observaciones = document.getElementById('modalAsesObservaciones').value.trim();
                    if (!escuelaId || !profesor || !fecha || !duracion) {
                        Swal.fire({ icon: 'warning', title: 'Campos obligatorios', text: 'Completa Plantel, Profesor, Fecha de asesoría y Duración.' });
                        return;
                    }
                    var payload = new FormData();
                    payload.append('escuela_id', escuelaId);
                    payload.append('profesor', profesor);
                    payload.append('fecha_asesoria', fecha);
                    payload.append('duracion_horas', duracion);
                    if (materiaId) payload.append('materia_id', materiaId);
                    if (observaciones)                     payload.append('observaciones', observaciones);
                    payload.append('_token', '{{ csrf_token() }}');
                    fetch(baseUrl + '/api/profesores/asesorias', {
                        method: 'POST',
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        body: payload
                    }).then(function(r) { return r.json(); })
                    .then(function(res) {
                        if (res.success) {
                            modalBs.hide();
                            Swal.fire({ icon: 'success', title: 'Guardado', text: 'La asesoría se ha registrado correctamente.' });
                            formAses.dispatchEvent(new Event('submit'));
                        } else {
                            Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'No se pudo guardar.' });
                        }
                    }).catch(function() {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo guardar la asesoría.' });
                    });
                });
            }
        }

        // --- Registro de exámenes extraordinarios ---
        var formExtra = document.getElementById('formRegistroExtra');
        if (formExtra) {
            var headersJsonExtra = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
            function cargarSelectExtra(url, idSelect, primeraOpcion) {
                fetch(baseUrl + url, { headers: headersJsonExtra }).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : (data && data.data ? data.data : []);
                    var opts = arr.map(function(o) {
                        var v = o.id != null ? o.id : (o.nombre || '');
                        var lbl = (o.nombre || o.clave || o.id || v).toString();
                        return '<option value="' + String(v) + '">' + lbl.replace(/</g, '&lt;') + '</option>';
                    }).join('');
                    sel.innerHTML = (primeraOpcion || '') + opts;
                }).catch(function() {
                    var sel = document.getElementById(idSelect);
                    if (sel) sel.innerHTML = (primeraOpcion || '') + '<option value="">Error al cargar</option>';
                });
            }
            function cargarAsignaturasExtra(idSelect, opcionInicial) {
                fetch(baseUrl + '/api/profesores/asignaturas', { headers: headersJsonExtra }).then(function(r) { return r.json(); }).then(function(data) {
                    var sel = document.getElementById(idSelect);
                    if (!sel) return;
                    var arr = Array.isArray(data) ? data : (data && data.data ? data.data : []);
                    var opts = arr.map(function(o) {
                        var v = o.id != null ? o.id : '';
                        var lbl = (o.nombre || o.clave || '').toString().replace(/</g, '&lt;');
                        return '<option value="' + String(v) + '">' + lbl + '</option>';
                    }).join('');
                    sel.innerHTML = (opcionInicial || '') + opts;
                }).catch(function() {
                    var sel = document.getElementById(idSelect);
                    if (sel) sel.innerHTML = (opcionInicial || '') + '<option value="">Error al cargar</option>';
                });
            }
            cargarSelectExtra('/api/profesores/planteles', 'extPlantel', '<option value="">-- Todos --</option>');
            cargarAsignaturasExtra('extAsignatura', '<option value="">-- Todas --</option>');
            var hoyExtra = new Date();
            var mesExtra = String(hoyExtra.getMonth() + 1).padStart(2, '0');
            var diaExtra = String(hoyExtra.getDate()).padStart(2, '0');
            document.getElementById('extFechaDesde').value = hoyExtra.getFullYear() + '-' + mesExtra + '-01';
            document.getElementById('extFechaHasta').value = hoyExtra.getFullYear() + '-' + mesExtra + '-' + diaExtra;

            formExtra.addEventListener('submit', function(e) {
                e.preventDefault();
                var params = new URLSearchParams();
                var profesor = document.getElementById('extProfesor').value.trim();
                if (profesor) params.set('profesor', profesor);
                var asignaturaId = document.getElementById('extAsignatura').value;
                if (asignaturaId) params.set('asignatura_id', asignaturaId);
                var plantelId = document.getElementById('extPlantel').value;
                if (plantelId) params.set('plantel_id', plantelId);
                var fd = document.getElementById('extFechaDesde').value;
                var fh = document.getElementById('extFechaHasta').value;
                if (fd) params.set('fecha_desde', fd);
                if (fh) params.set('fecha_hasta', fh);
                fetch(baseUrl + '/api/profesores/buscar-examenes-extraordinarios?' + params.toString(), { headers: headersJsonExtra })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        document.getElementById('extResultadoVacio').classList.add('d-none');
                        var lista = document.getElementById('extResultadoLista');
                        var contenido = document.getElementById('extResultadoContenido');
                        lista.classList.remove('d-none');
                        if (res.items && res.items.length > 0) {
                            var html = '<div class="table-responsive"><table class="table table-sm table-hover"><thead><tr><th>Profesor</th><th>Plantel</th><th>Fecha</th><th>Duración</th><th>Asignatura</th><th>Observaciones</th></tr></thead><tbody>';
                            res.items.forEach(function(a) {
                                var fecha = a.fecha_examen ? (a.fecha_examen.date || a.fecha_examen) : '';
                                if (fecha && typeof fecha === 'string' && fecha.length > 16) fecha = fecha.substring(0, 16).replace('T', ' ');
                                html += '<tr><td>' + (a.profesor || '') + '</td><td>' + (a.escuela && a.escuela.nombre ? a.escuela.nombre : '-') + '</td><td>' + fecha + '</td><td>' + (a.duracion_horas || '') + '</td><td>' + (a.materia && a.materia.nombre ? a.materia.nombre : '-') + '</td><td>' + (a.observaciones || '').substring(0, 80) + (a.observaciones && a.observaciones.length > 80 ? '…' : '') + '</td></tr>';
                            });
                            html += '</tbody></table></div>';
                            contenido.innerHTML = html;
                        } else {
                            contenido.innerHTML = '<p class="text-muted mb-0">No se encontraron resultados con los filtros seleccionados.</p>';
                        }
                    })
                    .catch(function() {
                        document.getElementById('extResultadoVacio').classList.add('d-none');
                        document.getElementById('extResultadoLista').classList.remove('d-none');
                        document.getElementById('extResultadoContenido').innerHTML = '<p class="text-danger mb-0">Error al realizar la búsqueda.</p>';
                    });
            });

            var modalExtra = document.getElementById('modalAgregarExtraordinario');
            if (modalExtra) {
                var modalBsExtra = new bootstrap.Modal(modalExtra);
                document.getElementById('btnRegistrarExtra').addEventListener('click', function() {
                    cargarSelectExtra('/api/profesores/planteles', 'modalExtPlantel', '<option value="">-- Seleccione --</option>');
                    cargarAsignaturasExtra('modalExtAsignatura', '<option value="">Selecciona una opción...</option>');
                    document.getElementById('modalExtProfesor').value = '';
                    var now = new Date();
                    document.getElementById('modalExtFecha').value = now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0') + 'T' + String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
                    document.getElementById('modalExtDuracion').value = '01:00';
                    document.getElementById('modalExtObservaciones').value = '';
                    document.getElementById('modalExtObsRestantes').textContent = '500';
                    modalBsExtra.show();
                });
                document.getElementById('modalExtObservaciones').addEventListener('input', function() {
                    document.getElementById('modalExtObsRestantes').textContent = 500 - this.value.length;
                });
                document.getElementById('btnGuardarExtra').addEventListener('click', function() {
                    var escuelaId = document.getElementById('modalExtPlantel').value;
                    var profesor = document.getElementById('modalExtProfesor').value.trim();
                    var fecha = document.getElementById('modalExtFecha').value;
                    var duracion = document.getElementById('modalExtDuracion').value;
                    var materiaId = document.getElementById('modalExtAsignatura').value;
                    var observaciones = document.getElementById('modalExtObservaciones').value.trim();
                    if (!escuelaId || !profesor || !fecha || !duracion || !materiaId) {
                        Swal.fire({ icon: 'warning', title: 'Campos obligatorios', text: 'Completa Plantel, Profesor, Fecha, Duración y Asignatura.' });
                        return;
                    }
                    var payload = new FormData();
                    payload.append('escuela_id', escuelaId);
                    payload.append('profesor', profesor);
                    payload.append('fecha_examen', fecha);
                    payload.append('duracion_horas', duracion);
                    payload.append('materia_id', materiaId);
                    if (observaciones) payload.append('observaciones', observaciones);
                    payload.append('_token', '{{ csrf_token() }}');
                    fetch(baseUrl + '/api/profesores/examenes-extraordinarios', {
                        method: 'POST',
                        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                        body: payload
                    }).then(function(r) { return r.json(); })
                    .then(function(res) {
                        if (res.success) {
                            modalBsExtra.hide();
                            Swal.fire({ icon: 'success', title: 'Guardado', text: 'El examen extraordinario se ha registrado correctamente.' });
                            formExtra.dispatchEvent(new Event('submit'));
                        } else {
                            Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'No se pudo guardar.' });
                        }
                    }).catch(function() {
                        Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo guardar.' });
                    });
                });
            }
        }

        // --- Bitácora de actividades ---
        var formBitacora = document.getElementById('formBitacora');
        if (formBitacora) {
            var SECCIONES_BITACORA = [
                'Horarios',
                'Registro de asistencias',
                'Registro de justificantes',
                'Registro de asesorías',
                'Registro de exámenes extraordinarios',
                'Bitácora de actividades'
            ];
            var bitacoraSeccionSel = {};
            function renderChipsBitacora() {
                var cont = document.getElementById('bitSeccionChips');
                if (!cont) return;
                var chips = SECCIONES_BITACORA.map(function(s) {
                    var sel = bitacoraSeccionSel[s];
                    if (sel) {
                        return '<span class="badge bg-secondary me-2 mb-2 d-inline-flex align-items-center" data-seccion="' + s.replace(/"/g, '&quot;') + '">' +
                            '<i class="ri-close-line me-1 chip-remove-bit" style="cursor:pointer;"></i>' + s + '</span>';
                    }
                    return '<span class="badge bg-light text-dark border me-2 mb-2 chip-no-sel-bit" data-seccion="' + s.replace(/"/g, '&quot;') + '" style="cursor:pointer;">' + s + '</span>';
                }).join('');
                cont.innerHTML = chips;
                cont.querySelectorAll('.chip-remove-bit').forEach(function(el) {
                    el.onclick = function(e) { e.preventDefault(); var s = this.closest('[data-seccion]').getAttribute('data-seccion'); delete bitacoraSeccionSel[s]; renderChipsBitacora(); };
                });
                cont.querySelectorAll('.chip-no-sel-bit').forEach(function(el) {
                    el.onclick = function() { var s = this.getAttribute('data-seccion'); bitacoraSeccionSel[s] = s; renderChipsBitacora(); };
                });
            }
            renderChipsBitacora();
            var hoyBit = new Date();
            var mesBit = String(hoyBit.getMonth() + 1).padStart(2, '0');
            var diaBit = String(hoyBit.getDate()).padStart(2, '0');
            document.getElementById('bitFechaDesde').value = hoyBit.getFullYear() + '-' + mesBit + '-01';
            document.getElementById('bitFechaHasta').value = hoyBit.getFullYear() + '-' + mesBit + '-' + diaBit;

            document.getElementById('bitSeccionMarcarTodos').addEventListener('click', function(e) { e.preventDefault(); SECCIONES_BITACORA.forEach(function(s) { bitacoraSeccionSel[s] = s; }); renderChipsBitacora(); });
            document.getElementById('bitSeccionDesmarcarTodos').addEventListener('click', function(e) { e.preventDefault(); bitacoraSeccionSel = {}; renderChipsBitacora(); });

            formBitacora.addEventListener('submit', function(e) {
                e.preventDefault();
                var params = new URLSearchParams();
                var nombre = document.getElementById('bitNombre').value.trim();
                if (nombre) params.set('nombre', nombre);
                var fd = document.getElementById('bitFechaDesde').value;
                var fh = document.getElementById('bitFechaHasta').value;
                if (fd) params.set('fecha_desde', fd);
                if (fh) params.set('fecha_hasta', fh);
                Object.keys(bitacoraSeccionSel).forEach(function(s) { params.append('seccion[]', s); });
                var headersBit = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
                fetch(baseUrl + '/api/profesores/buscar-bitacora?' + params.toString(), { headers: headersBit })
                    .then(function(r) { return r.json(); })
                    .then(function(res) {
                        document.getElementById('bitResultadoVacio').classList.add('d-none');
                        var lista = document.getElementById('bitResultadoLista');
                        var contenido = document.getElementById('bitResultadoContenido');
                        lista.classList.remove('d-none');
                        if (res.items && res.items.length > 0) {
                            var html = '<div class="table-responsive"><table class="table table-sm table-hover mb-0"><thead class="table-light"><tr><th>Fecha / Hora</th><th>Profesor</th><th>Sección</th><th>Actividad / Descripción</th></tr></thead><tbody>';
                            res.items.forEach(function(a) {
                                var fecha = a.fecha_actividad ? (a.fecha_actividad.date || a.fecha_actividad) : '';
                                if (fecha && typeof fecha === 'string' && fecha.length > 16) fecha = fecha.substring(0, 19).replace('T', ' ');
                                html += '<tr><td class="text-nowrap">' + (fecha || '-') + '</td><td>' + (a.profesor || '-') + '</td><td>' + (a.seccion || '-') + '</td><td>' + (a.descripcion || '-') + '</td></tr>';
                            });
                            html += '</tbody></table></div>';
                            contenido.innerHTML = html;
                        } else {
                            contenido.innerHTML = '<div class="p-4 text-center text-muted">No se encontraron registros en la bitácora con los filtros seleccionados.</div>';
                        }
                    })
                    .catch(function() {
                        document.getElementById('bitResultadoVacio').classList.add('d-none');
                        document.getElementById('bitResultadoLista').classList.remove('d-none');
                        document.getElementById('bitResultadoContenido').innerHTML = '<div class="p-4 text-center text-danger">Error al realizar la búsqueda.</div>';
                    });
            });
        }
    });
    </script>
@endsection