@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Gestión de Módulos</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>/ Módulos</li>
        </ol>
    </div>
    <style>
        .select2-container {
            width: 100% !important;
            /* Asegura que Select2 use el 100% del contenedor */
        }

        .select2-selection {
            min-height: 40px;
            /* Ajusta la altura mínima */
            padding: 10px;
            /* Espaciado interno */
            font-size: 16px;
            /* Tamaño de texto adecuado */
        }
        /* Enhanced styling for questions and answers */
        .pregunta-card {
            border: 1px solid #d1d1d1;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .card-header {
            background-color: #f1f1f1;
            font-weight: bold;
            font-size: 1.1em;
        }

        .card-body {
            padding: 15px;
        }

        .respuesta-group {
            display: flex;
            align-items: center;
        }

        .respuesta-group input[type="text"] {
            flex: 1;
            margin-right: 10px;
        }

        .btn-sm {
            font-size: 0.85em;
        }

    </style>

    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div id="divmodulo">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3>Lista de Módulos</h3>
                <a href="javascript:void(0)" class="btn btn-info rounded-pill" onclick="mostrarFormularioModulo()">
                    <i class='bx bxs-pencil'></i> Nuevo Módulo
                </a>
            </div>
            <div class="card-body">
                <!-- Tabla de Módulos -->
                <div class="table-responsive">
                    <table id="tablaModulos" class="table" cellspacing="0" cellpadding="0" width="100%">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Nombre del Módulo</th>
                                <th>Referencia</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($modulos as $key => $modulo)
                            <tr>
                                <td>{{ $modulo->id }}</td>
                                <td>{{ $modulo->nombre }}</td>
                                <td>{{ $modulo->ayuda_memoria}}</td>
                                <td>
                                    <button type="button" class="btn btn-primary btn-xs" onclick="editarModulo({{ $modulo->id }})">
                                        <span class='bx bx-pencil'></span> Editar
                                    </button>
                                    <button type="button" class="btn btn-danger btn-xs" onclick="eliminarModulo({{ $modulo->id }})">
                                        <span class='bx bx-trash'></span> Eliminar
                                    </button>
                                    <button type="button" class="btn btn-success btn-xs" onclick="crearExamen({{ $modulo->id }})">
                                        <span class='bx bx-edit'></span> Examen
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Formulario para Crear/Editar Módulo -->
        <div id="formularioModulo" style="display:none;">
            <div class="card-header">
                <h4>Formulario de Módulo</h4>
            </div>
            <div class="card-body">
                <form id="moduloForm" class="form-horizontal">
                    @csrf
                    <input type="hidden" name="modulo_id" id="modulo_id">
                    <div class="row">
                        <!-- Nombre del Módulo -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="nombre">Nombre del Módulo:</label>
                                <input type="text" class="form-control" id="nombre" name="nombre" placeholder="Ingrese el nombre" required>
                            </div>
                        </div>

                        <!-- Imagen -->
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="imagen">Referencia():</label>
                                <input type="text" class="form-control" id="ayuda_memoria" name="ayuda_memoria" accept="image/*">
                            </div>
                        </div>

                        <!-- Seleccionar Sesiones -->
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="sesiones">Seleccionar Sesiones:</label>
                                {{-- <input type="text" id="buscarSesion" class="form-control" placeholder="Buscar sesión..."
                                 onkeyup="buscarEnSelect('buscarSesion', 'sesiones')">--}}
                                <select name="sesiones[]" id="sesiones" class="form-control" multiple style="width: 100%;">
                                    @foreach($sesiones as $sesion)
                                    <option value="{{ $sesion->id }}">{{ $sesion->nombre }}({{ $sesion->id }})
                                        ({{$sesion->ayuda_memoria}})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Seleccionar Archivos -->
                       <!--  <div class="col-md-6">
                            <div class="form-group">
                                <label for="archivos">Seleccionar Archivos:</label>

                                <select name="archivos[]" id="archivos" class="form-control" multiple>
                                    @foreach($archivos as $archivo)
                                    <option value="{{ $archivo->id }}">{{ $archivo->nombre_original }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div -->
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="sesiones_seleccionadas">Sesiones seleccionadas (puedes reordenar):</label>
                                <ul id="lista-sesiones-seleccionadas" class="list-group">
                                </ul>
                            </div>
                        </div>
                        <input type="hidden" name="orden_sesiones[]" id="orden_sesiones">
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-success" onclick="guardarModulo()">Guardar Módulo</button>
                        <button type="button" class="btn btn-danger" onclick="cancelarModulo()">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Formulario para Crear/Editar Examen -->
        <div id="formularioExamen" style="display:none;">
            <div class="card-header">
                <h4>Formulario de Examen</h4>
            </div>
            <div class="card-body">
                <form id="examenForm" class="form-horizontal">
                    @csrf
                    <input type="hidden" name="examen_id" id="examen_id">
                    <input type="hidden" name="modulo_id" id="examen_modulo_id">

                    <!-- Nombre del Examen con Checkbox de Activo/Inactivo -->
                    <div class="form-group d-flex align-items-center">
                        <label for="nombreExamen" class="mr-2">Nombre del Examen:</label>
                        <input type="text" class="form-control mr-2" id="nombreExamen" name="nombreExamen" placeholder="Ingrese el nombre del examen" required>
                        
                        <!-- Checkbox de Activo/Inactivo -->
                        <label for="estadoExamen" class="mr-2">Activo:</label>
                        <input type="checkbox" id="estadoExamen" name="estadoExamen" value="1">
                    </div>

                    <!-- Contenedor de Preguntas -->
                    <div id="preguntasContainer"></div>

                    <!-- Botón para añadir preguntas -->
                    <button type="button" class="btn btn-info mb-3" onclick="agregarPregunta()">Añadir Pregunta</button>

                    <!-- Guardar Examen -->
                    <div class="form-group">
                        <button type="button" class="btn btn-success" onclick="guardarExamen()">Guardar Examen</button>
                        <button type="button" class="btn btn-danger" onclick="cancelarExamen()">Cancelar</button>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        let estado= 0;
        let ordenSesiones = [];
        $(document).ready(function() {
            // Inicializar Select2 en los selects de sesiones y archivos
            $('#sesiones').select2({
                placeholder: "Seleccionar sesiones",
                allowClear: true
            });

          /*   $('#archivos').select2({
                placeholder: "Seleccionar archivos",
                allowClear: true
            }); */

            // Inicializar DataTable
            $('#tablaModulos').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": true,
                "ordering": true, // Enable ordering
                "order": [[0, "desc"]], 
                "info": true,
                "autoWidth": false,
                "responsive": true,
                "pageLength": 10
            });
            // Actualizar las sesiones seleccionadas en la tabla ordenable
            $('#sesiones').on('change', function() {
                actualizarListaSesiones();
            });

            // Hacer la lista de sesiones seleccionadas ordenable con jQuery UI Sortable
            $('#lista-sesiones-seleccionadas').sortable({
                update: function() {
                    actualizarOrdenSesiones();
                }
            });

        });
        // Función para actualizar la lista de sesiones seleccionadas
        function actualizarListaSesiones() {
                let sesionesSeleccionadas = $('#sesiones').val(); // Obtener las sesiones seleccionadas
                let listaSesiones = $('#lista-sesiones-seleccionadas');
                
                listaSesiones.empty(); // Limpiar la lista visualmente
                console.log('Sesiones seleccionadas: ', sesionesSeleccionadas);

                // Verificar si sesionesSeleccionadas no es null o undefined y tiene elementos
                if (sesionesSeleccionadas && sesionesSeleccionadas.length > 0) {
                    $.each(sesionesSeleccionadas, function(index, value) {
                        let nombreSesion = $('#sesiones option[value="' + value + '"]').text();
                        
                        // Agregar al array ordenSesiones si no está presente
                        if (!ordenSesiones.includes(value)) {
                            ordenSesiones.push(value);
                        }

                        // Agregar la sesión a la lista visual
                        listaSesiones.append('<li class="list-group-item" data-id="' + value + '">' + nombreSesion + '</li>');
                    });

                    actualizarOrdenSesiones(); // Actualizar el orden de las sesiones
                } else {
                    console.log("No hay sesiones seleccionadas o el valor es null.");
                }
            }


        // Función para actualizar el array de orden_sesiones basado en la lista ordenable
        function actualizarOrdenSesiones() {
            ordenSesiones = [];
                // Verificar si existe el elemento lista de sesiones seleccionadas y si tiene elementos <li>
                var listaSesiones = $('#lista-sesiones-seleccionadas');
                
                if (listaSesiones && listaSesiones.length > 0 && listaSesiones.find('li').length > 0) {
                    listaSesiones.find('li').each(function() {
                        ordenSesiones.push($(this).data('id')); // Actualizar el array con el nuevo orden
                    });
                    console.log("Nuevo orden de sesiones: ", ordenSesiones);
                } else {
                    console.log("No hay sesiones seleccionadas o el elemento no existe.");
                }
            }

        // Función para guardar el módulo
        function guardarModulo() {
            let formData = new FormData($('#moduloForm')[0]);

            // Añadir el array ordenado al FormData
            $.each(ordenSesiones, function(index, value) {
                formData.append('ordensesiones[]', value); // Añadir cada ID al array de orden_sesiones[]
            });

            $.ajax({
                url: '{{ url("/admin/modulos/guardar") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    alert('Módulo guardado exitosamente');
                    location.reload(); // Recargar la página después de guardar
                },
                error: function(response) {
                    alert('Error al guardar el módulo');
                }
            });
        }

        // Función para editar un módulo
        function editarModulo(moduloId) {
            $.ajax({
                url: '/admin/modulos/' + moduloId + '/edit',
                type: 'GET',
                success: function(response) {
                    if (response.state === '0') {
                        $('#modulo_id').val(response.modulo.id);
                        $('#nombre').val(response.modulo.nombre);
                        $('#ayuda_memoria').val(response.modulo.ayuda_memoria);
                        ordenSesiones = []; // Reiniciar el array de orden de sesiones
                        

                        // Rellenar el array y la lista de sesiones
                        $.each(response.modulo.sesiones, function(key, sesion) {
                            ordenSesiones.push(sesion.id);
                        });
                        console.log(ordenSesiones);
                        if (ordenSesiones.length > 0) {
                            $('#sesiones').val(ordenSesiones).trigger('change');
                            console.log('asignado');
                        }
                        

                        $('#lista-sesiones-seleccionadas').empty();
                        ordenSesiones = []
                        $.each(response.modulo.sesiones, function(key, sesion) {
                            $('#lista-sesiones-seleccionadas').append('<li class="list-group-item" data-id="' + sesion.id + '">' + sesion.nombre +'('+sesion.id+')'+
                            '('+sesion.ayuda_memoria+')'+'</li>');
                            ordenSesiones.push(sesion.id);
                        });
                        

                        // Rellenar archivos relacionados
                      /*   let archivosSeleccionados = [];
                        $.each(response.modulo.archivos, function(key, archivo) {
                            archivosSeleccionados.push(archivo.id);
                        });
                        $('#archivos').val(archivosSeleccionados).trigger('change'); */

                        // Mostrar el formulario de edición
                        $('#formularioModulo').show();
                        $('#divmodulo').hide();
                    }
                },
                error: function(error) {
                    alert('Error al cargar el módulo');
                }
            });
        }

        // Función para eliminar sesiones de la lista
        function eliminarSesionDeLista(sesionId) {
            ordenSesiones = ordenSesiones.filter(id => id !== sesionId); // Eliminar del array de orden
            $('#lista-sesiones-seleccionadas li[data-id="' + sesionId + '"]').remove(); // Eliminar visualmente
            $('#sesiones option[value="' + sesionId + '"]').prop('selected', false).trigger('change'); // Desmarcar en Select2
            console.log("Sesión eliminada. Nuevo orden: ", ordenSesiones);
        }

        function mostrarFormularioModulo() {
            limpiarFormularioModulo();
            $('#formularioModulo').show();
            $('#divmodulo').hide(); // Ocultar la tabla cuando se crea o edita un módulo
        }

        function cancelarModulo() {
            limpiarFormularioModulo();
            $('#formularioModulo').hide();
            $('#divmodulo').show();
        }

        function limpiarFormularioModulo() {
            $('#modulo_id').val('');
            $('#nombre').val('');
            $('#imagen').val('');
            $('#sesiones').val('').trigger('change');
            $('#archivos').val('').trigger('change');
        }
        let preguntaCount = 0;

        function agregarPregunta() {
            preguntaCount++;

            const preguntaHtml = `
                <div class="card pregunta-card mb-3" id="pregunta_${preguntaCount}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Pregunta ${preguntaCount}</h5>
                        <button type="button" class="btn btn-danger btn-sm" onclick="eliminarPregunta(${preguntaCount})">Eliminar</button>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="pregunta_${preguntaCount}_texto">Texto de la Pregunta:</label>
                            <input type="text" class="form-control" id="pregunta_${preguntaCount}_texto" name="preguntas[${preguntaCount}][texto]" placeholder="Ingrese el texto de la pregunta" required>
                        </div>
                        <div class="respuestas-container" id="respuestasContainer_${preguntaCount}">
                            <label>Respuestas:</label>
                            <div class="form-group respuesta-group mb-3">
                                <input type="text" class="form-control" name="preguntas[${preguntaCount}][respuestas][0][texto]" placeholder="Respuesta 1" required>
                                <input type="radio" name="preguntas[${preguntaCount}][correcta]" value="0"> Correcta
                                <button type="button" class="btn btn-danger btn-sm" onclick="eliminarRespuesta(${preguntaCount}, 0)">Eliminar</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="agregarRespuesta(${preguntaCount})">Añadir Respuesta</button>
                    </div>
                </div>
            `;
            $('#preguntasContainer').append(preguntaHtml);
        }

        function agregarRespuesta(preguntaId) {
            const respuestaCount = $(`#respuestasContainer_${preguntaId} .respuesta-group`).length;
            const respuestaHtml = `
                <div class="form-group respuesta-group mb-3" id="respuesta_${preguntaId}_${respuestaCount}">
                    <input type="text" class="form-control" name="preguntas[${preguntaId}][respuestas][${respuestaCount}][texto]" placeholder="Respuesta ${respuestaCount + 1}" required>
                    <input type="radio" name="preguntas[${preguntaId}][correcta]" value="${respuestaCount}"> Correcta
                    <button type="button" class="btn btn-danger btn-sm ml-2" onclick="eliminarRespuesta(${preguntaId}, ${respuestaCount})">Eliminar</button>
                </div>
            `;
            $(`#respuestasContainer_${preguntaId}`).append(respuestaHtml);
        }
        
        function eliminarPregunta(preguntaId) {
            $(`#pregunta_${preguntaId}`).remove();
        }

        function eliminarRespuesta(preguntaId, respuestaIndex) {
            $(`#respuestasContainer_${preguntaId} .respuesta-group`).eq(respuestaIndex).remove();
        }

       
        function agregarPreguntaConDatos(pregunta, index) {
            preguntaCount = index + 1; // Asegurarse de que el contador de preguntas esté correcto

            const preguntaHtml = `
                <div class="card pregunta-card mb-3" id="pregunta_${preguntaCount}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5>Pregunta ${preguntaCount}</h5>
                        <button type="button" class="btn btn-danger btn-sm" onclick="eliminarPregunta(${preguntaCount})">Eliminar</button>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="pregunta_${preguntaCount}_texto">Texto de la Pregunta:</label>
                            <input type="text" class="form-control" id="pregunta_${preguntaCount}_texto" name="preguntas[${preguntaCount}][texto]" value="${pregunta.titulo}" required>
                        </div>
                        <div class="respuestas-container" id="respuestasContainer_${preguntaCount}">
                            <label>Respuestas:</label>
                            ${cargarRespuestas(pregunta.respuestas, preguntaCount)}
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" onclick="agregarRespuesta(${preguntaCount})">Añadir Respuesta</button>
                    </div>
                </div>
            `;
            $('#preguntasContainer').append(preguntaHtml);
        }

        function cargarRespuestas(respuestas, preguntaId) {
            let respuestasHtml = '';
                $.each(respuestas, function(index, respuesta) {
                    respuestasHtml += `
                <div class="form-group respuesta-group mb-3">
                    <input type="text" class="form-control" name="preguntas[${preguntaId}][respuestas][${index}][texto]" value="${respuesta.titulo}" required>
                    <input type="radio" name="preguntas[${preguntaId}][correcta]" value="${index}" ${respuesta.es_correcta ? 'checked' : ''}> Correcta
                    <button type="button" class="btn btn-danger btn-sm ml-2" onclick="eliminarRespuesta(${preguntaId}, ${index})">Eliminar</button>
                </div>
            `;
                });
                return respuestasHtml;
        }
        function crearExamen(moduloId) {
        limpiarFormularioExamen();
        $('#formularioModulo').hide();
        $('#formularioExamen').show();
        $('#divmodulo').hide();

        // Asignar el ID del módulo al campo oculto en el formulario de examen
        $('#examen_modulo_id').val(moduloId);

        // Solicitud AJAX para obtener el examen existente, si aplica
        $.ajax({
            url: '/admin/modulos/' + moduloId + '/examen',
            type: 'GET',
            success: function(response) {
                if (response.state === '0') {
                    // Cargar el nombre del examen y el estado en el formulario
                    $('#examen_id').val(response.examen.id);
                    $('#nombreExamen').val(response.examen.nombre);
                    $('#estadoExamen').prop('checked', response.examen.estado === 1); // Marcar checkbox si estado es 1

                    // Cargar las preguntas en el contenedor de preguntas
                    $('#preguntasContainer').empty();
                    $.each(response.examen.preguntas, function(index, pregunta) {
                        agregarPreguntaConDatos(pregunta, index);
                    });
                } else {
                    alert('El módulo NO tiene examen registrado');
                }
            },
            error: function(error) {
                alert('El módulo no tiene examen registrado');
            }
        });
    }


        function cancelarExamen() {
             preguntaCount = 0;
            limpiarFormularioExamen();
            $('#formularioExamen').hide();
            $('#formularioModulo').hide();
            $('#divmodulo').show();
        }

        function limpiarFormularioExamen() {
            $('#examen_id').val('');
            $('#nombreExamen').val('');
            $('#preguntasContainer').empty(); // Vaciar contenedor de preguntas
        }

        function guardarExamen() {
            let formData = new FormData($('#examenForm')[0]);
            // Añadir el estado del examen al FormData
            formData.append('estado', $('#estadoExamen').is(':checked') ? 1 : 0);

            $.ajax({
                url: '{{ url("/admin/modulos/examen/guardar") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    alert('Examen guardado exitosamente');
                    location.reload(); // Recargar la página después de guardar
                },
                error: function(response) {
                    // Usar SweetAlert2 para mostrar el error
                    let errorMessage = 'Error al guardar el examen';
                    if (response.responseJSON && response.responseJSON.message) {
                        errorMessage = response.responseJSON.message; // Obtener mensaje de error específico
                    } else if (response.responseText) {
                        errorMessage = response.responseText;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: errorMessage
                    });
                }
            });
        }
        function eliminarModulo(moduloId) {
            if (!confirm('¿Estás seguro de que deseas eliminar este módulo?')) {
                return;
            }

            $.ajax({
                url: `/admin/modulos/eliminar/${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.');
                }
            });
        }

    </script>
</main>
@endsection