@extends('admin.layout.master')

@section('content')
<main>
    <style>
        /* Estilos generales */
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f7f9fc;
            color: #444;
        }

        .card {
            background-color: #ffffff;
            border: 1px solid #e1e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        }

        .card-header {
            background-color: #f1f4f8;
            border-bottom: 1px solid #e1e8f0;
            font-size: 18px;
            font-weight: bold;
            padding: 16px;
        }

        .card-body {
            padding: 20px;
        }

        h9 {
            font-size: 24px;
            color: #333;
            font-weight: bold;
            margin-bottom: 20px;
        }

        select.form-control {
            border-radius: 4px;
            border: 1px solid #d1d7de;
            transition: all 0.3s;
        }

        select.form-control:focus {
            border-color: #4caf50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
        }

        button.btn {
            padding: 10px 15px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        button.btn-primary {
            background-color: #007bff;
            border: none;
            color: #fff;
        }

        button.btn-primary:hover {
            background-color: #0056b3;
        }

        button.btn-danger {
            background-color: #f44336;
            border: none;
            color: #fff;
        }

        button.btn-danger:hover {
            background-color: #c62828;
        }

        button.btn-success {
            background-color: #4caf50;
            border: none;
            color: #fff;
        }

        button.btn-success:hover {
            background-color: #388e3c;
        }

        button.btn-warning {
            background-color: #ff9800;
            border: none;
            color: #fff;
        }

        button.btn-warning:hover {
            background-color: #e65100;
        }

        /* Estilos para listas (sortable) */
        ul.sortable {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        ul.sortable li {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f1f4f8;
            border: 1px solid #e1e8f0;
            border-radius: 6px;
            cursor: move;
            transition: background-color 0.2s ease-in-out;
        }

        ul.sortable li:hover {
            background-color: #e0e7ef;
        }

        .ui-state-highlight {
            background-color: #d1e7ff !important;
            border: 2px dashed #007bff;
            height: 2.5em;
            line-height: 1.5em;
        }

        /* Estilos para el modal */
        .modal-header {
            background-color: #007bff;
            color: #fff;
            border-bottom: none;
            padding: 16px;
            font-size: 18px;
        }

        .modal-footer {
            border-top: none;
        }

        .modal-body {
            padding: 20px;
        }

        input.form-control {
            border: 1px solid #ced4da;
            border-radius: 4px;
            padding: 10px;
            transition: border-color 0.3s ease;
        }

        input.form-control:focus {
            border-color: #4caf50;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.2);
        }

        /* Estilo para el listado de sesiones seleccionadas */
        #listadoSesionesSeleccionadas {
            max-height: 200px;
            overflow-y: auto;
        }

        #listadoSesionesSeleccionadas .list-group-item {
            background-color: #f9fafb;
            border: 1px solid #e1e8f0;
            border-radius: 4px;
            padding: 10px;
            margin-bottom: 5px;
        }
    </style>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal </a></li>
            <li>&nbsp;&nbsp;/ Admin modulos</li>
        </ol>
    </div>
    <style>
        .ui-state-highlight {
            height: 1.5em;
            line-height: 1.2em;
            background-color: #fafafa;
            border: 1px dashed #ccc;
        }

        .sortable-item {
            cursor: move;
        }

        /* Estilo opcional para mejorar la presentación de preguntas con imágenes */
        .select2-container .select2-selection--single .select2-selection__rendered img {
            max-width: 100px;
            height: auto;
            margin-right: 10px;
        }

        .select2-results__option img {
            max-width: 100px;
            height: auto;
            margin-right: 10px;
        }

       /* Estilos para alinear el modal a la derecha y aumentar su tamaño */
        .modal-dialog.modal-xl {
            max-width: 73%; /* Aumenta el tamaño del modal */
            right: 4; /* Alinear a la derecha */   
        }
       
    </style>
    <div class="row">
        <div class="col-md-12">
            <h9>Gestión de Módulos y Sesiones</h9>
            <div class="card">
                <div class="form-row">
                    <div class="form-group col-md-3">
                        <label for="pais">País</label>
                        <select id="pais_id" class="form-control" onchange="cargarNivelesPorPais()">
                            <option value="">Selecciona un país</option>
                            @foreach($paises as $pais)
                            <option value="{{ $pais->codigo_iso }}">{{ $pais->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="nivel">Nivel</label>
                        <select id="nivel_id" class="form-control" onchange="cargarGradosPorNivel()">

                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="grado">Grado</label>
                        <select id="grado_id" class="form-control" onchange="cargarAreasPorGrado()">

                        </select>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="area">Área</label>
                        <select id="area_grado" class="form-control" onchange="cargarModulos()">

                        </select>
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">
                    Módulos del Área Seleccionada
                </div>
                <div class="card-body">
                    <button class="btn btn-primary mb-3" onclick="nuevoModulo()"><i class='bx bx-plus'></i> Módulo</button>
                    <button class="btn btn-success mb-3" onclick="nuevoExamendeEntrada()"><i class='bx bx-list-plus'></i> Examen de Entrada</button>
                    <button class="btn btn-info mb-3" onclick="AsignarDocente()"><i class='bx bxs-user-voice'></i>
                    Docente</button>
                    <div id="modulosContainer"></div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <div class="modal fade" id="modalNuevoModulo" tabindex="-1" role="dialog" aria-labelledby="modalNuevoModuloLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalNuevoModuloLabel">Nuevo Módulo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formNuevoModulo">
                        <input type="hidden" id="moduloId" name="moduloId">
                        <div class="form-group">
                            <label for="nombreModulo">Nombre del Módulo</label>
                            <input type="text" class="form-control" id="nombreModulo" name="nombreModulo" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="btnGuardarModulo" onclick="guardarNuevoModulo()">Guardar Módulo</button> <!-- Cambiará según si es nuevo o edición -->
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="modalDocente" tabindex="-1" role="dialog" aria-labelledby="modalDocenteLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalDocenteLabel">Seleccionar Docente Grado-Area</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formDocente">
                        <select  id="docente_id" class="form-control" >
                           
                        </select>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="btnGuardarModulo" onclick="guardarDocente(event)">Guardar Módulo</button> <!-- Cambiará según si es nuevo o edición -->
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalAñadirSesiones" tabindex="-1" role="dialog" aria-labelledby="modalAñadirSesionesLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalAñadirSesionesLabel">Añadir Sesiones al Módulo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formAñadirSesiones">
                        <input type="hidden" id="moduloId-sesiones" name="moduloId-sesiones">
                        <div class="form-group">
                            <label for="sesionesSelect">Seleccionar Sesiones</label>
                            <select multiple class="form-control" id="sesionesSelect" style="width: 100%">
                            </select>
                        </div>

                        <div class="mt-3">
                            <h6>Sesiones Seleccionadas:</h6>
                            <ul id="listadoSesionesSeleccionadas" class="list-group">

                            </ul>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarSesiones()">Guardar Sesiones</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalExamenEntrada" tabindex="-1" role="dialog" aria-labelledby="modalExamenEntradaLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document"> <!-- Modal a pantalla completa -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalExamenEntradaLabel">Crear Examen de Entrada</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formExamenEntrada">
                        <input type="hidden" id="entradaId" name="entradaId">
                        <div class="row" style="height: 200%;">
                            <!-- Columna 1: Selección de preguntas -->
                            <div class="col-md-6" style="height: 100%;">
                                <div class="form-group" style="height: 100%;">
                                    <label for="preguntasEntradaSelect">Seleccionar Preguntas</label>
                                    <select multiple class="form-control" id="preguntasEntradaSelect" style="width: 100%; height: 100%;"></select>
                                </div>
                            </div>
                            <!-- Columna 2: Preguntas seleccionadas -->
                            <div class="col-md-6" style="height: 100%;">
                                <div class="form-group" style="height: 100%;">
                                    <label>Preguntas seleccionadas</label>
                                    <ul id="preguntasSeleccionadas" class="list-group" style="height: 100%; overflow-y: auto;"></ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarExamenEntrada()">Guardar Examen</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade left" id="modalExamenModulo" tabindex="-1" role="dialog" aria-labelledby="modalExamenModuloLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalExamenModuloLabel">Crear Examen de Módulo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="formExamenModulo">
                        <input type="hidden" id="moduloIdExamen" name="moduloIdExamen">
                        <div class="row" style="height: 200%;">
                            <!-- Columna 1: Selección de preguntas -->
                            <div class="col-md-6" style="height: 100%;">
                                <div class="form-group" style="height: 100%;">
                                    <label for="preguntasModuloSelect">Seleccionar Preguntas</label>
                                    <select multiple class="form-control" id="preguntasModuloSelect" style="width: 100%; height: 100%;"></select>
                                </div>
                            </div>
                            <!-- Columna 2: Preguntas seleccionadas -->
                            <div class="col-md-6" style="height: 100%;">
                                <div class="form-group" style="height: 100%;">
                                    <label>Preguntas seleccionadas</label>
                                    <ul id="preguntasSeleccionadasModulo" class="list-group" style="height: 100%; overflow-y: auto;"></ul>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" onclick="guardarExamenModulo()">Guardar Examen</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        //cargos dinamicos
        function cargarNivelesPorPais() {
            const pais_id = document.getElementById('pais_id').value;
            if (pais_id) {
                fetch('{{ url("/admin/grados/getNivelesByPais") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            pais_id: pais_id
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        console.log(data); // Imprime la respuesta en consola
                        let nivelesHtml = '<option value="">Seleccione un nivel</option>';
                        if (data.niveles && data.niveles.length > 0) {
                            data.niveles.forEach(nivel => {
                                nivelesHtml += `<option value="${nivel.id}">${nivel.nombre}</option>`;
                            });
                        } else {
                            nivelesHtml = '<option value="">No hay niveles para este país.</option>';
                        }
                        document.getElementById('nivel_id').innerHTML = nivelesHtml;
                    })
                    .catch(error => {
                        console.error('Error al cargar los niveles:', error); // Imprime el error en consola
                        alert('Error al cargar los niveles.');
                    });

            }
        }

        function cargarGradosPorNivel() {
            const nivel_id = document.getElementById('nivel_id').value;
            $.ajax({
                url: '{{ url("/admin/grados/nivel") }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    nivel_id: nivel_id
                }),
                contentType: 'application/json',
                success: function(data) {
                    let gradoOptions = '<option value="">Seleccione un grado</option>';
                    data.grados.forEach(grado => {
                        gradoOptions += `<option value="${grado.id}">${grado.nombre}</option>`;
                    });
                    document.getElementById('grado_id').innerHTML = gradoOptions;
                },
                error: function(error) {
                    alert('Error al cargar los grados.');
                }
            });
        }

        function cargarAreasPorGrado() {
            const grado_id = document.getElementById('grado_id').value;
            $.ajax({
                url: '{{ url("/admin/modulo/grados/areas") }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    grado_id: grado_id
                }),
                contentType: 'application/json',
                success: function(data) {
                    console.log(data);
                    let gradoOptions = '<option value="">Seleccione un Área</option>';
                    data.areagrados.forEach(areagrado => {
                        gradoOptions += `<option value="${areagrado.id}">${areagrado.area.nombre}</option>`;
                    });
                    document.getElementById('area_grado').innerHTML = gradoOptions;
                },
                error: function(error) {
                    alert('Error al cargar los grados.');
                }
            })
        }

        function cargarModulos() {
            const area_grado_id = document.getElementById('area_grado').value;
            $.ajax({
                url: '/admin/modulo/list',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    area_grado_id: area_grado_id
                }),
                contentType: 'application/json',
                success: function(response) {
                    const modulos = response.modulos;
                    if (modulos.length === 0) {
                        $('#modulosContainer').html('<div class="alert alert-info">No hay módulos disponibles.</div>');
                        return;
                    }
                    let modulosHtml = modulos.map(modulo => {
                        let sesionesHtml = modulo.sesiones.length > 0 ? modulo.sesiones.map(sesion =>
                            `<li class="list-group-item sortable-item" data-sesion-id="${sesion.id}">
                                ${sesion.sesion.titulo}
                                <button class="btn btn-danger btn-sm float-right" onclick="eliminarSesion(${sesion.id})"><i class='bx bx-trash'></i></button>
                            </li>`
                        ).join('') : '<li class="list-group-item">No hay sesiones disponibles.</li>';

                        return `
                            <div class="list-group-item">
                                ${modulo.nombre}
                                <button class="btn btn-warning" onclick="editarModulo(${modulo.id})"><i class='bx bx-edit'></i></button>
                                <button class="btn btn-danger" onclick="eliminarModulo(${modulo.id})"><i class='bx bx-trash'></i></button>
                                <button class="btn btn-primary" onclick="añadirSesion(${modulo.id})"><i class='bx bx-plus'></i></button>
                                <button class="btn btn-success" onclick="crearExamenModulo(${modulo.id})"><i class='bx bx-list-plus'></i></button>
                                <ul class="list-group sortable mt-2" data-modulo-id="${modulo.id}" id="sortable-${modulo.id}">
                                    ${sesionesHtml}
                                </ul>
                            </div>
                        `;
                    }).join('');
                    $('#modulosContainer').html(modulosHtml);
                    activarSortable(); // Llamar a la función sortable después de cargar las sesiones
                },
                error: function(xhr, status, error) {
                    console.error('Error al cargar módulos:', error);
                    $('#modulosContainer').html('<div class="alert alert-danger">Error al cargar módulos.</div>');
                }
            });
        }

        function activarSortable() {
            // Aplicar sortable solo dentro del mismo módulo
            $('ul.sortable').each(function() {
                const moduloId = $(this).data('modulo-id'); // Obtener el ID del módulo actual
                $(`#sortable-${moduloId}`).sortable({
                    placeholder: "ui-state-highlight",
                    stop: function(event, ui) {
                        const ordenSesion = $(this).sortable('toArray', {
                            attribute: 'data-sesion-id'
                        });
                        actualizarOrdenSesiones(moduloId, ordenSesion); // Llamada para actualizar el orden en el backend
                    }
                });
            });
        }

        //modulo
        function nuevoModulo() {
            // Restablecemos el formulario y el modal
            $('#formNuevoModulo').trigger('reset');
            $('#moduloId').val(''); // Borramos cualquier ID previo
            $('#modalNuevoModuloLabel').text('Nuevo Módulo'); // Cambiamos el título del modal
            $('#btnGuardarModulo').text('Guardar Módulo'); // Cambiamos el texto del botón
            $('#btnGuardarModulo').attr('onclick', 'guardarNuevoModulo()'); // Cambiamos el evento del botón
            $('#modalNuevoModulo').modal('show');
        }

        function guardarNuevoModulo() {
            let nombreModulo = $('#nombreModulo').val();
            const area_grado_id = document.getElementById('area_grado').value;

            if (!nombreModulo) {
                alert("Por favor, ingresa el nombre del módulo.");
                return;
            }

            $.ajax({
                url: '/admin/store/modulo',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    nombre: nombreModulo,
                    area_grado_id: area_grado_id
                }),
                contentType: 'application/json',
                success: function(response) {
                    $('#modalNuevoModulo').modal('hide');
                    cargarModulos();
                    alert('Módulo creado correctamente');
                },
                error: function() {
                    alert('Error al guardar el módulo.');
                }
            });
        }

        function editarModulo(moduloId) {
            // Llamada AJAX para obtener los datos del módulo por su ID
            $.ajax({
                url: `/admin/modulo/${moduloId}/edit`,
                method: 'GET',
                success: function(response) {
                    $('#nombreModulo').val(response.modulos.nombre); // Prellenamos el nombre del módulo
                    $('#moduloId').val(response.modulos.id); // Guardamos el ID del módulo
                    $('#modalNuevoModuloLabel').text('Editar Módulo'); // Cambiamos el título del modal
                    $('#btnGuardarModulo').text('Guardar Cambios'); // Cambiamos el texto del botón
                    $('#btnGuardarModulo').attr('onclick', 'guardarCambiosModulo()'); // Cambiamos el evento del botón
                    $('#modalNuevoModulo').modal('show'); // Mostramos el modal
                },
                error: function() {
                    alert('Error al cargar el módulo.');
                }
            });
        }

        function guardarCambiosModulo() {
            let moduloId = $('#moduloId').val();
            let nombreModulo = $('#nombreModulo').val();

            if (!nombreModulo) {
                alert("Por favor, ingresa el nombre del módulo.");
                return;
            }

            // Llamada AJAX para actualizar el módulo
            $.ajax({
                url: `/admin/modulo/${moduloId}/update`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    nombre: nombreModulo
                }),
                contentType: 'application/json',
                success: function() {
                    $('#modalNuevoModulo').modal('hide');
                    cargarModulos(); // Recargar la lista de módulos
                    alert('Módulo actualizado correctamente');
                },
                error: function() {
                    alert('Error al actualizar el módulo.');
                }
            });
        }

        function eliminarModulo(moduloId) {
            if (!confirm('¿Estás seguro de que deseas eliminar este módulo?')) {
                return;
            }

            $.ajax({
                url: `/admin/modulo/delete/${moduloId}`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function() {
                    cargarModulos();
                    alert('Módulo eliminado correctamente');
                },
                error: function() {
                    alert('Error al eliminar el módulo.');
                }
            });
        }

        //sesion
        function añadirSesion(modulo_id) {

            $('#formAñadirSesiones').trigger('reset');
            cargarSesionesDisponibles(modulo_id);
            $('#modalAñadirSesiones').modal('show');
        }

        function cargarSesionesDisponibles(moduloId) {
            const area_grado_id = document.getElementById('area_grado').value;
            $('#moduloId-sesiones').val(moduloId);
            $.ajax({
                url: `/admin/sesiones/disponibles/${area_grado_id}/${moduloId}`,
                method: 'GET',
                success: function(response) {
                    let opciones = '';
                    response.sesiones.forEach(sesion => {
                        opciones += `<option value="${sesion.id}">${sesion.titulo}</option>`;
                    });
                    $('#sesionesSelect').html(opciones);
                    $('#sesionesSelect').select2(); // Usamos select2 para la búsqueda
                },
                error: function() {
                    alert('Error al cargar las sesiones.');
                }
            });
        }
        $('#sesionesSelect').on('change', function() {
            const sesionesSeleccionadas = $(this).val();
            const sesionesTexto = $("#sesionesSelect option:selected").map(function() {
                return `<li class="list-group-item">${$(this).text()}</li>`;
            }).get().join('');
            $('#listadoSesionesSeleccionadas').html(sesionesTexto);
        });

        function guardarSesiones() {
            const sesionesSeleccionadas = $('#sesionesSelect').val(); // Array de IDs de sesiones seleccionadas
            const modulo_id = $('#moduloId-sesiones').val(); // ID del módulo

            if (!sesionesSeleccionadas || sesionesSeleccionadas.length === 0) {
                alert('Por favor, selecciona al menos una sesión.');
                return;
            }
            $.ajax({
                url: `/admin/modulo/${modulo_id}/add-sesiones`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    sesiones: sesionesSeleccionadas
                }),
                contentType: 'application/json',
                success: function() {
                    $('#modalAñadirSesiones').modal('hide');
                    cargarModulos();
                    $('#listadoSesionesSeleccionadas').html('<p>Seleccionar Sesión</p>');
                    alert('Sesiones añadidas correctamente');
                },
                error: function() {
                    alert('Error al guardar las sesiones.');
                }
            });
        }


        function eliminarSesion(sesionId) {
            $.ajax({
                url: `/admin/sesion/eliminar/${sesionId}`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function() {
                    console.log('Sesión eliminada');
                    cargarModulos();
                },
                error: function() {
                    alert('Error al eliminar la sesión');
                }
            });
        }

        function actualizarOrdenSesiones(moduloId, ordenSesion) {
            $.ajax({
                url: `/admin/modulo/${moduloId}/actualizar-orden-sesiones`,
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    orden_sesiones: ordenSesion
                }),
                contentType: 'application/json',
                success: function(response) {
                    console.log('Orden actualizado correctamente.');
                },
                error: function() {
                    alert('Error al actualizar el orden de las sesiones.');
                }
            });
        }
        //examen de entrada
        function nuevoExamendeEntrada() {
            $('#formExamenEntrada').trigger('reset');
            cargarPreguntasEntrada();
            $('#modalExamenEntrada').modal('show');
        }

        function cargarPreguntasEntrada() {
            const area_grado_id = document.getElementById('area_grado').value;

            $.ajax({
                url: `/admin/preguntas/entrada/${area_grado_id}`, // Endpoint que carga las preguntas de entrada
                method: 'GET',
                success: function(response) {
                    $('#entradaId').val(area_grado_id);
                    let opcionesNoAsignadas = [];
                    let opcionesAsignadas = [];

                    // Preguntas no asignadas (lado izquierdo, select multiple)
                    response.preguntas_no_asignadas.forEach(pregunta => {
                        opcionesNoAsignadas.push({
                            id: pregunta.id,
                            text: pregunta.texto,
                            html: pregunta.texto
                        });
                    });

                    // Cargar las preguntas no asignadas en el select múltiple (lado izquierdo)
                    $('#preguntasEntradaSelect').select2({
                        data: opcionesNoAsignadas,
                        templateResult: formatPregunta,
                        templateSelection: formatPreguntaSelected,
                        escapeMarkup: function(markup) {
                            return markup;
                        }
                    });

                    // Preguntas ya seleccionadas (lado derecho, lista)
                    const listaPreguntasSeleccionadas = $('#preguntasSeleccionadas');
                    listaPreguntasSeleccionadas.empty(); // Limpiar la lista antes de cargar nuevas preguntas asignadas

                    response.preguntas_asignadas.forEach(pregunta => {
                        listaPreguntasSeleccionadas.append(`
                            <li id="pregunta-${pregunta.id}" class="list-group-item d-flex justify-content-between align-items-center">
                                ${pregunta.texto}
                                <button class="btn btn-danger btn-sm" onclick="eliminarPreguntaSeleccionada(${pregunta.id}, event)">Eliminar</button>
                            </li>
                        `);
                    });
                },
                error: function() {
                    alert('Error al cargar las preguntas.');
                }
            });
        }

        function formatPregunta(pregunta) {
            if (!pregunta.id) {
                return pregunta.text;
            }
            return $('<span>' + pregunta.html + '</span>');
        }

        // Formatear la selección de preguntas
        function formatPreguntaSelected(pregunta) {
            if (!pregunta.id) {
                return pregunta.text;
            }
            return $('<span>' + pregunta.html + '</span>');
        }


        function eliminarPreguntaSeleccionada(preguntaId, e) {
            e.preventDefault();

            const entradaId = $('#entradaId').val();

            $.ajax({
                url: `/admin/examen/entrada/eliminar-pregunta/${preguntaId}`,
                method: 'POST',
                data: {
                    entradaId: entradaId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.state === '0') {
                        cargarPreguntasEntrada();
                    } else {
                        alert('Error al eliminar la pregunta.');
                    }
                },
                error: function() {
                    alert('Error al eliminar la pregunta.');
                }
            });
        }

        function guardarExamenEntrada() {
            const preguntasSeleccionadas = $('#preguntasEntradaSelect').val();
            const entradaId = $('#entradaId').val();

            // Llamar al backend con las preguntas seleccionadas
            $.ajax({
                url: '/admin/examen/guardar-entrada',
                method: 'POST',
                data: {
                    entradaId: entradaId,
                    preguntas: preguntasSeleccionadas,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.state === '0') {
                        alert('Examen de Entrada guardado correctamente.');
                        $('#modalExamenEntrada').modal('hide');

                    } else {
                        alert('Error al guardar el Examen de Entrada.');
                    }
                },
                error: function() {
                    alert('Error al guardar el Examen de Entrada.');
                }
            });
        }

        // Examen de Módulo
        function crearExamenModulo(moduloId) {
            $('#formExamenModulo').trigger('reset'); // Resetear el formulario
            cargarPreguntasModulo(moduloId); // Cargar las preguntas del módulo
            $('#moduloIdExamen').val(moduloId); // Establecer el ID del módulo
            $('#modalExamenModulo').modal('show'); // Mostrar el modal
        }

        // Cargar preguntas específicas del módulo
        function cargarPreguntasModulo(moduloId) {
            $.ajax({
                url: `/admin/preguntas/modulo/${moduloId}`, // Llamada a la ruta que obtiene las preguntas del módulo
                method: 'GET',
                success: function(response) {
                    let opcionesNoAsignadas = [];
                    let opcionesAsignadas = [];

                    // Preguntas no asignadas (lado izquierdo, select multiple)
                    response.preguntas_no_asignadas.forEach(pregunta => {
                        opcionesNoAsignadas.push({
                            id: pregunta.id,
                            text: pregunta.texto,
                            html: pregunta.texto
                        });
                    });

                    // Cargar las preguntas no asignadas en el select múltiple
                    $('#preguntasModuloSelect').select2({
                        data: opcionesNoAsignadas,
                        templateResult: formatPregunta,
                        templateSelection: formatPreguntaSelected,
                        escapeMarkup: function(markup) {
                            return markup;
                        }
                    });

                    // Preguntas ya seleccionadas (lado derecho, lista)
                    const listaPreguntasSeleccionadas = $('#preguntasSeleccionadasModulo');
                    listaPreguntasSeleccionadas.empty(); // Limpiar lista antes de cargar nuevas preguntas asignadas

                    response.preguntas_asignadas.forEach(pregunta => {
                        listaPreguntasSeleccionadas.append(`
                            <li id="pregunta-${pregunta.id}" class="list-group-item d-flex justify-content-between align-items-center">
                                ${pregunta.texto}
                                <button class="btn btn-danger btn-sm" onclick="eliminarPreguntaSeleccionadaModulo(${pregunta.id}, event)">Eliminar</button>
                            </li>
                        `);
                    });
                },
                error: function() {
                    alert('Error al cargar las preguntas del módulo.');
                }
            });
        }

        // Eliminar una pregunta seleccionada del módulo
        function eliminarPreguntaSeleccionadaModulo(preguntaId, e) {
            e.preventDefault();

            const moduloId = $('#moduloIdExamen').val();

            $.ajax({
                url: `/admin/examen/modulo/eliminar-pregunta/${preguntaId}`,
                method: 'POST',
                data: {
                    moduloId: moduloId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.state === '0') {
                        cargarPreguntasModulo(moduloId);
                    } else {
                        alert('Error al eliminar la pregunta.');
                    }
                },
                error: function() {
                    alert('Error al eliminar la pregunta.');
                }
            });
        }

        // Guardar el examen del módulo con las preguntas seleccionadas
        function guardarExamenModulo() {
            const preguntasSeleccionadas = $('#preguntasModuloSelect').val();
            const moduloId = $('#moduloIdExamen').val();

            if (!preguntasSeleccionadas || preguntasSeleccionadas.length === 0) {
                alert('Por favor, selecciona al menos una pregunta.');
                return;
            }

            $.ajax({
                url: `/admin/examen/guardar-modulo/${moduloId}`,
                method: 'POST',
                data: {
                    moduloId: moduloId,
                    preguntas: preguntasSeleccionadas,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.state === '0') {
                        alert('Examen de Módulo guardado correctamente.');
                        $('#modalExamenModulo').modal('hide');
                    } else {
                        alert('Error al guardar el Examen de Módulo.');
                    }
                },
                error: function() {
                    alert('Error al guardar el Examen de Módulo.');
                }
            });
        }

        // Formatear la pregunta para el select2
        function formatPregunta(pregunta) {
            if (!pregunta.id) {
                return pregunta.text;
            }
            return $('<span>' + pregunta.html + '</span>');
        }

        // Formatear la selección de preguntas
        function formatPreguntaSelected(pregunta) {
            if (!pregunta.id) {
                return pregunta.text;
            }
            return $('<span>' + pregunta.html + '</span>');
        }

        function cargarDocentesPorArea() {
            const area_grado_id = document.getElementById('area_grado').value;
            $.ajax({
                url: '/admin/docentes/area',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    area_grado_id: area_grado_id
                }),
                contentType: 'application/json',
                success: function(response) {
                    let docentesHtml = '<option value="">Seleccione un docente</option>';
                    response.docentes.forEach(docente => {
                        docentesHtml += `<option value="${docente.id}" ${(response.docente_id === docente.id) ? 'selected' : ''}>${docente.nombre} ${docente.apellidos}</option>`;
                    });
                    $('#docente_id').html(docentesHtml);
                },
                error: function() {
                    alert('Error al cargar los docentes.');
                }
            });
        }

        function AsignarDocente() {
            $('#formDocente').trigger('reset');
            cargarDocentesPorArea();
            $('#modalDocente').modal('show');
        }

        function guardarDocente() {
            const docente_id = $('#docente_id').val();
            const modulo_id=document.getElementById('area_grado').value;
            if (!docente_id) {
                alert("Por favor, selecciona un docente.");
                return;
            }

            $.ajax({
                url: '/admin/modulo/asignar-docente',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    modulo_id: modulo_id,
                    docente_id: docente_id
                }),
                contentType: 'application/json',
                success: function(response) {
                    $('#modalDocente').modal('hide');
                    alert('Docente asignado correctamente.');
                },
                error: function() {
                    alert('Error al asignar el docente.');
                }
            });
        }

    </script>

    @endsection