@extends('admin.layout.master')

@section('content')
<main>
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li class=""><a href="{{ url('/admin') }}"><i class='bx bx-home-alt'
                        style="font-size: 18px;color: #F31519;"></i></a></li>
            <li class=""><a href="{{ url('/admin') }}">Principal </a></li>
            <li class="">&nbsp;&nbsp;/ Admin Aula</li>
            <li class="">&nbsp;&nbsp;/ <a href="{{ url('/admin/curso') }}">Curso</a></li>
        </ol>
    </div>


    <div class="card mb-30">
        {{-- <div class="card-header d-flex justify-content-between align-items-center">
              <div class="card-body">
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se agregó la sesión al curso correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se modificó la sesión del curso correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> No se grabó, campos vacíos verifique nuevamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Error archivo demasiado pesado de lo permitido.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se eliminó la sesión satisfactoriamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se eliminó el archivo PDF satisfactoriamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se cargó el archivo PDF correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se registró el módulo correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se registró el contenido correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se modificó el registro del módulo correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se modificó el registro del contenido correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
          
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                  <strong>Mensaje!</strong> Se eliminó el registro del módulo correctamente.
                  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
              </div>
            </div> --}}

        <p align="right"><a href="{{url('admin/curso')}}"><i class="bx bx-share"></i> Regresar</a></p>
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>
                <strong>Nivel:</strong>{{$curso['grado']['nivel']->nombre??''}}<br>
                <strong>Grado:</strong>{{$curso['grado']->nombre??''}}<br>
                <strong>Materia:</strong>{{$curso['materia']->nombre??''}}<br>
                <strong>Nombre del Curso:</strong>{{$curso->nombre ??''}}<br>
                <strong>Este curso tiene: <span id="totalSesiones">0</span> sesiones</strong>
            </h3>
        </div>

        <div class="card-body">
            <p align="center">
                <button type="button" class="btn btn-warning rounded-pill" data-toggle="modal"
                    onclick="cargarmodulo()" data-target="#myModalModulo"><i class="bx bxs-pencil"></i>Nuevo Módulo</button>
                <button onclick="cargarmodulosesion()" type="button" class="btn btn-primary rounded-pill" data-toggle="modal"
                    data-target="#myModalSesi"><i class="bx bxs-pencil"></i>Nueva Sesión</button>
                <a href="addseord.php?dato=curso_ejemplo&tit=Curso Ejemplo" class="btn btn-secondary rounded-pill"><i
                        class="bx bx-sort-up"></i> Ordenar Sesiones</a>
            </p>
        </div>
        <br>
        <div class="card-body">
            <div id='listarsesiones' role='dialog'>


            </div>
        </div>
        <div class="modal fade" id="myModalSesi" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title">Crear/Editar  Sesión<br>Curso: {{$curso->nombre ??''}}</h3>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="formSesion" enctype="multipart/form-data">
                            @csrf
                            <input type='hidden' id='sesionId' name='sesionId' value="">
                            <div class='form-group'>
                                <label>Seleccione Módulo:</label>
                                <select id="modulotitu-select" name='modulotitu' class='form-control' required>
                                    <!-- Las opciones se llenarán dinámicamente -->
                                </select>
                            </div>
                            <div class='form-group'>
                                <label>Nombre Sesión:</label>
                                <input type='text' id="nombre-sesion" class='form-control' name='sesion' required autofocus>
                            </div>
                            <div class='form-group'>
                                <label class="control-label">Adjuntar Video</label> <small>Formato Permitido: *mp4</small>
                                <input name="archivo" id="archivo" type="file" class="form-control" />
                            </div>
                            <div class='form-group'>
                                <label class="control-label">Código de video</label> <small>(VIMEO)</small>
                                <textarea name="urlvimeo" id="urlvimeo" class="form-control" rows="3"></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Link video Facebook:</label>
                                <input type='text' id="linkface" class='form-control' name='linkface'>
                            </div>
                            <div class='form-group'>
                                <label>Código Video:</label> <small>(YOUTUBE)</small>
                                <textarea name="youtube" id="youtube" class="form-control" rows="3"></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Título y Descripción:</label>
                                <textarea class='form-control' id="conte1" name="conte1" placeholder="Ingrese Título y Descripción" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Ejemplo 1: Descripción:</label>
                                <textarea class='form-control' id="conte2" name="conte2" placeholder="Ingrese Título y Descripción" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Adjuntar imagen 1:</label>
                                <input type="file" id="img1" name="img1" accept="image/png,image/jpeg" class='form-control' onchange="previewImage(event, 'img1-preview')">
                                <div id="img1-preview" style="margin-top: 10px;"></div>
                            </div>
                            <div class='form-group'>
                                <label>Ejemplo 2: Descripción:</label>
                                <textarea class='form-control' id="conte3" name="conte3" placeholder="Ingrese Título y Descripción" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Adjuntar imagen 2:</label>
                                <input type="file" id="img2" name="img2" accept="image/png,image/jpeg" class='form-control' onchange="previewImage(event, 'img2-preview')">
                                <div id="img2-preview" style="margin-top: 10px;"></div>
                            </div>
                            <div class='form-group'>
                            <label>Ejemplo 3: Descripción:</label>
                                <textarea class='form-control' id="conte4" name="conte4" placeholder="Ingrese Título y Descripción" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Adjuntar imagen 3:</label>
                                <input type="file" id="img3" name="img3" accept="image/png,image/jpeg" class='form-control' onchange="previewImage(event, 'img3-preview')">
                                <div id="img3-preview" style="margin-top: 10px;"></div>
                            </div>
                            <div class='form-group'>
                            <label>Ejemplo 4: Descripción:</label>
                                <textarea class='form-control' id="conte5" name="conte5" placeholder="Ingrese Título y Descripción" required autofocus></textarea>
                            </div>
                            <div class='form-group'>
                                <label>Adjuntar imagen 4:</label>
                                <input type="file" id="img4" name="img4" accept="image/png,image/jpeg" class='form-control' onchange="previewImage(event, 'img4-preview')">
                                <div id="img4-preview" style="margin-top: 10px;"></div>
                            </div>
                            
                            <div class='form-group'>
                                <button type="button" id="submitButton" onclick="addsesion(event)" class='btn btn-primary'><i class="bx bx-save"></i> Registrar Sesión</button>
                                <button type="button" id="updateButton" onclick="actualizarsesion(event)" class='btn btn-primary' style="display: none;"><i class="bx bx-save"></i> Actualizar Sesión</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="myModalModulo" role="dialog">
            <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear Módulo para el Curso: {{$curso->nombre ??''}}</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form id="formModulo">
                            @csrf
                            <input type='hidden' id='moduloid' name='moduloid' value="">
                            <input type='hidden' id='cursoid' name='cursoid' value="{{$curso->id}}">

                            <div class='form-group'>
                                <label>Nombre Módulo:</label>
                                <input type='text' class='form-control' id='modulo' name='modulo' placeholder="Ejm: Módulo 1" required autofocus>
                            </div>
                            <div class='form-group'>
                                <label>Descripción Módulo:</label>
                                <input type='text' class='form-control' id='descripcionmodulo' name='descripcionmodulo' placeholder="Ejm: Aprendizaje Enseñanza" required>
                            </div>
                            <div class='form-group'>
                                <button type="button" id="submitButton1" onclick="agregarmodulo(event)" class='btn btn-primary'>Registrar Módulo</button>
                                <button style="display: none;" id="updateButton1" type="button" onclick="actualizarmodulo(event)" class='btn btn-primary'>Actualizar Módulo</button>
                            </div>
                        </form>

                        <hr>
                        <div class="table-responsive" id="tabla-modulos" style="display:block;">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Módulo</th>
                                        <th>Título</th>
                                        <th>Opción</th>
                                    </tr>
                                </thead>
                                <tbody id="modulos-table-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal de Archivos PDF -->
            <div class="modal fade" id="myModalArchipdf" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h3 class="modal-title">Cargar más archivos PDF <br>Sesión: <span id="sesionname"></span></h3>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="formPDF" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" id="codisesi" name="codisesi" value="">
                                <div class="form-group">
                                    <label class="control-label">Nombre Archivo PDF</label>
                                    <input name="nombrepdf" type="text" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <label class="control-label">Adjuntar Archivo PDF</label>
                                    <input name="archivopdf" id="archivopdf" type="file" class="form-control" required />
                                </div>
                                <div class="form-group">
                                    <button type="button" onclick="storePDF(event)" class="btn btn-primary">Guardar Archivo</button>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                        </div>
                    </div>
                </div>
            </div>



        <script>
          
            function previewImage(event, previewId) {
                var reader = new FileReader();
                reader.onload = function() {
                    var output = document.getElementById(previewId);
                    output.innerHTML = '<img src="' + reader.result + '" alt="Vista previa" style="max-width: 100%; max-height: 200px;"/>';
                };
                reader.readAsDataURL(event.target.files[0]);
            }


            // Llama a la función para listar todas las sesiones al cargar la página
            function cargarmodulosesion() {
                let cursoId = '{{$curso->id}}';
                $.ajax({
                    url: `/admin/modulos/${cursoId}`,
                    method: 'GET',
                    success: function(data) {
                        let selectHtml = '<option value="" selected>..:: Seleccione Módulo ::..</option>'; // Inicializar select
                        data.data.forEach(function(modulo) {
                            // Llenar las opciones del select
                            selectHtml += `<option value="${modulo.id}">${modulo.nombre}</option>`;
                        });
                        $('#modulotitu-select').html(selectHtml); // Asegúrate de incluir el símbolo # para seleccionar por id
                    },
                    error: function(xhr) {
                        console.log('Error al cargar los módulos:', xhr);
                        alert('Error al cargar los módulos.');
                    }
                });
            }

            function cargarmodulo() {
                let cursoId = '{{$curso->id}}';
                $.ajax({
                    url: `/admin/modulos/${cursoId}`,
                    method: 'GET',
                    success: function(data) {
                        let modulosHtml = '';
                        data.data.forEach(function(modulo, index) {
                            modulosHtml += `
                                <tr id="modulo-${modulo.id}">
                                    <td>${index + 1}</td>
                                    <td>${modulo.nombre}</td>
                                    <td>${modulo.descripcion}</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" onclick="editarModulo(${modulo.id})">Editar</button>
                                        <button class="btn btn-danger btn-sm" onclick="eliminarModulo(${modulo.id})">Eliminar</button>
                                    </td>
                                </tr>
                            `;
                        });
                        $('#modulos-table-body').html(modulosHtml);
                    },
                    error: function(xhr) {
                        console.log('Error al cargar los módulos:', xhr);
                        alert('Error al cargar los módulos.');
                    }
                });
            }

            function agregarmodulo(event) {
                event.preventDefault();

                let cursoId = $('#cursoid').val();
                let nombreModulo = $('#modulo').val();
                let descripcionModulo = $('#descripcionmodulo').val();
                let token = $('input[name="_token"]').val();

                let formData = {
                    cursoid: cursoId,
                    modulo: nombreModulo,
                    descripcionmodulo: descripcionModulo,
                    _token: token
                };

                $.ajax({
                    url: `/admin/modulo/guardar`,
                    method: 'POST',
                    data: formData,
                    success: function(data) {
                        cargarmodulo();
                        listarSesiones();
                        $('#modulo').val('');
                        $('#descripcionmodulo').val('');
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al guardar el módulo: ' + errorMessage); // Mostrar todos los errores en un alert
                    }
                });
            }

            function actualizarmodulo(event) {
                event.preventDefault(); // Prevenir la recarga de la página

                let moduloId = $('#moduloid').val();
                let nombreModulo = $('#modulo').val();
                let descripcionModulo = $('#descripcionmodulo').val();
                let token = $('input[name="_token"]').val(); // Obteniendo el token CSRF

                let formData = {
                    nombre: nombreModulo,
                    descripcion: descripcionModulo,
                    _token: token
                };

                $.ajax({
                    url: `/admin/modulo/actualizar/${moduloId}`,
                    method: 'POST',
                    data: formData,
                    success: function(data) {
                        // Recargar la lista de módulos
                        cargarmodulo();
                        listarSesiones();
                        // Limpiar los campos del formulario
                        $('#moduloid').val('');
                        $('#modulo').val('');
                        $('#descripcionmodulo').val('');
                        $('#tabla-modulos').show();
                        // Cambiar de nuevo los botones
                        $('#updateButton').hide();
                        $('#submitButton').show();
                        $('#submitButton').prop('disabled', false);
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al actualizar el módulo: ' + errorMessage); // Mostrar todos los errores en un alert
                    }
                });
            }

            function editarModulo(moduloId) {
                $.ajax({
                    url: `/admin/modulo/${moduloId}`,
                    method: 'GET',
                    success: function(modulo) {
                        // Llena el formulario con la información del módulo
                        $('#moduloid').val(modulo.id);
                        $('#modulo').val(modulo.nombre);
                        $('#descripcionmodulo').val(modulo.descripcion);

                        // Cambiar el texto y la función del botón de enviar
                        $('#submitButton1').hide(); // Oculta el botón de "Registrar Módulo"
                        $('#updateButton1').show(); // Muestra el botón de "Actualizar Módulo"
                        $('#tabla-modulos').hide(); // Opcional: Ocultar la tabla de módulos si es necesario
                    },
                    error: function(xhr) {
                        console.log('Error al obtener el módulo:', xhr);
                        alert('Error al obtener el módulo.');
                    }
                });
            }


            function eliminarModulo(id) {
                if (confirm('¿Estás seguro de eliminar este módulo?')) {
                    let token = $('input[name="_token"]').val(); // Obteniendo el token CSRF
                    $.ajax({
                        url: `/admin/modulo/eliminar/${id}`,
                        method: 'POST',
                        data: {
                            _token: token
                        },
                        success: function() {
                            listarSesiones();
                            cargarmodulo(); // Recargar la lista de módulos
                        },
                        error: function(xhr) {
                            console.log('Error al eliminar el módulo:', xhr);
                            alert('Error al eliminar el módulo.');
                        }
                    });
                }
            }

            function addsesion(event) {
                event.preventDefault(); // Prevenir el comportamiento predeterminado de envío del formulario

                let formData = new FormData($('#formSesion')[0]); // Crear un objeto FormData con todos los datos del formulario

                $.ajax({
                    url: '/admin/sesion/store', // Ruta para almacenar la sesión
                    method: 'POST',
                    data: formData,
                    processData: false, // Impide que jQuery procese los datos, ya que estamos usando FormData
                    contentType: false, // Impide que jQuery establezca el tipo de contenido
                    success: function(response) {
                        if (response.success) {
                            $('#formSesion')[0].reset();
                            $('#myModalSesi').modal('hide');
                            $('#img1-preview').html('');
                            $('#img2-preview').html('');
                            $('#img3-preview').html('');
                            $('#img4-preview').html('');
                            listarSesiones();
                            alert('Sesión registrada correctamente.');

                            // Limpiar todos los campos del formulario
                        } else {
                            alert('Hubo un error al registrar la sesión.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al registrar la sesión: ' + errorMessage); // Mostrar todos los errores en un alert
                    }
                });
            }

            function listarSesiones() {
                let cursoId = '{{$curso->id}}';
                $.ajax({
                    url: `/admin/modulos/${cursoId}`,
                    method: 'GET',
                    success: function(response) {
                        let modulos = response.data;
                        let totalSesiones = 0;
                        let sesionesHtml = '';

                        modulos.forEach(function(modulo) {
                            totalSesiones += modulo.clases.length;
                            if (modulo.clases.length > 0) {
                                modulo.clases.forEach(function(sesion) {
                                    sesionesHtml += `
                                    <div class='modal-dialog modal-lg'>
                                        <div class='modal-content'>
                                            <div class='modal-header'>
                                                <h4 class='modal-title'>${modulo.nombre} / <small><b>${sesion.nombre}</b></small> <br>
                                                    <small>Fecha Creación: ${new Date(sesion.created_at).toLocaleDateString()}</small>
                                                </h4>
                                            </div>
                                            <div class='modal-body'>
                                                <iframe
                                                    src='${sesion.codigo_vimeo}'
                                                    width='100%' height='380' frameborder='0' allow='autoplay; fullscreen'
                                                    allowfullscreen></iframe>
                                                <font size='+2'>
                                                <font color='#1B63A6'><b>Archivos de descarga</b></font>
                                                </font><br><br>`;
                                    if (sesion.archivos.length > 0) {
                                        sesion.archivos.forEach(function(archivo) {
                                            sesionesHtml += `
                                            <p>Archivo:<b>${archivo.nombre_pdf}</b>, <a href='{{ asset('archivosclase/${archivo.ruta_archivo}') }}' target='_blank'>click aquí para visualizar</a>
                                            <i style='color:red;' onclick='eliminarArchivo(${archivo.id}, event)'class='bx bx-trash'></i></p>`;
                                        });
                                    } else {
                                        sesionesHtml += `<p>No hay archivos para esta sesión.</p>`;
                                    }

                                    sesionesHtml += `
                                                <hr>
                                                <p>
                                                    <b>${sesion.descripcion1}</b>, <a href='{{ asset('imagenes/${sesion.imagen1}') }}'
                                                        target='_blank'>click aquí para visualizar</a> 
                                                </p>
                                                <p>
                                                    <b>${sesion.descripcion2}</b>, <a href='{{ asset('imagenes/${sesion.imagen2}') }}'
                                                        target='_blank'>click aquí para visualizar</a>   
                                                </p>
                                                <p>
                                                    <b>${sesion.descripcion3}</b>, <a href='{{ asset('imagenes/${sesion.imagen3}') }}'
                                                        target='_blank'>click aquí para visualizar</a>  
                                                </p>
                                                <p>
                                                    <b>${sesion.descripcion4}</b>, <a href='{{ asset('imagenes/${sesion.imagen4}') }}'
                                                        target='_blank'>click aquí para visualizar</a>
                                                </p>     
                                            </div>
                                            <div class='modal-footer'>
                                                <a href='{{ asset('videos/${sesion.video_mp4}') }}' target='_blank'><button type='button' class='btn btn-success'><i class='bx bx-save'></i> Descargar Video</button></a>
                                                <button type='button' class='btn btn-info' onclick='añadirPDF(${sesion.id}, "${sesion.nombre}", event)' >
                                                    <i class='bx bxs-arrow-to-top'></i> Cargar Más PDF
                                                </button>
                                                <button type='button' class='btn btn-success' data-dismiss='modal' onclick='editarsesion(${sesion.id}, event)' data-toggle='modal' data-target='#myModalSesi'><i class='bx bx-pencil'></i> Editar Sesión</button>
                                                <button type='button' class='btn btn-danger' data-dismiss='modal' onclick='eliminarsesion(${sesion.id}, event)'><i class='bx bx-trash'></i> Eliminar Sesión</button>
                                                <a class='btn btn-warning' target='_blank'><i class='bx bx-pencil'></i> Crear Examen </a>
                                            </div>
                                            <div class='modal-body'>
                                                <hr>
                                                <div class='panel-body'><label class='btn-primary'>&nbsp;&nbsp;Comentarios&nbsp;&nbsp; <i class='bx bx-message-rounded-check'></i>&nbsp;&nbsp;</label></div>
                                                <div class='box-footer box-comments'>`;

                                    // Verificar si hay comentarios
                                    if (sesion.comentarios && sesion.comentarios.length > 0) {
                                                sesion.comentarios.forEach(function(comentario) {
                                                    const username = comentario.user?.name ? `<b><u>${comentario.user.name}</u></b>` : '';
                                                    const comentarioTexto = comentario.texto_comentario || '';
                                                    const fechaComentario = comentario.created_at ? new Date(comentario.created_at).toLocaleDateString() : '';

                                                    sesionesHtml += `
                                                    <div class='box-comment'>
                                                        <img class='img-circle img-sm' src='{{asset('images/foto/user.png')}}' width='30px' alt='User'>
                                                        <div class='comment-text text-muted'>
                                                            <span class='username'>
                                                                ${username}
                                                                <span class='text-muted pull-right'>${fechaComentario}</span>
                                                            </span><br>
                                                            <font size='3'>${comentarioTexto}</font>
                                                        </div>
                                                        <hr>
                                                    </div>`;
                                                });
                                            }
                                            else {
                                        sesionesHtml += `
                                        <div class='alert alert-info'>
                                            <h5><strong>Sin Comentarios!</strong> Sé el primero en comentar.</h5>
                                        </div>`;
                                    }

                                    sesionesHtml += `
                                                <hr>
                                                <div class="box-footer">
                                                    <form id="formComment-${sesion.id}">
                                                        @csrf
                                                        <input type="hidden" name="sesion_id" value="${sesion.id}">
                                                        <div class="img-push">
                                                            <input type="text" name="comment" class="form-control input-sm" placeholder=" postea tu comentario !!" required><br>
                                                            <button type="button" class="btn btn-primary btn-sm" onclick="storeComment(${sesion.id}, event)"><i class="glyphicon glyphicon-floppy-disk"></i> Guardar Comentario</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;
                                });
                            }
                        });

                        $('#totalSesiones').text(totalSesiones);
                        // Renderizar el HTML generado en un contenedor específico en la página
                        $('#listarsesiones').html(sesionesHtml);
                    },
                    error: function(xhr) {
                        console.log('Error al cargar los módulos:', xhr);
                        alert('Error al cargar los módulos.');
                    }
                });
            }

            function editarsesion(id, event) {
                event.preventDefault();
                cargarmodulosesion(); // Cargar los módulos antes de intentar seleccionar uno

                $.ajax({
                    url: `/admin/editarsesion/${id}`,
                    method: 'GET',
                    success: function(sesion) {
                        // Llenar el formulario con los datos existentes de la sesión
                        $('#sesionId').val(sesion.id);
                        $('#nombre-sesion').val(sesion.nombre);
                        $('#urlvimeo').val(sesion.codigo_vimeo);
                        $('#linkface').val(sesion.link_facebook);
                        $('#youtube').val(sesion.codigo_youtube);
                        $('#conte1').val(sesion.titulo_descripcion);
                        $('#conte2').val(sesion.descripcion1);
                        $('#conte3').val(sesion.descripcion2);
                        $('#conte4').val(sesion.descripcion3);
                        $('#conte5').val(sesion.descripcion4);

                        // Mostrar vista previa de las imágenes existentes
                        $('#img1-preview').html(`<img src="{{ asset('imagenes/${sesion.imagen1}') }}" style="max-width: 100%; max-height: 200px;" />`);
                        $('#img2-preview').html(`<img src="{{ asset('imagenes/${sesion.imagen2}') }}" style="max-width: 100%; max-height: 200px;" />`);
                        $('#img3-preview').html(`<img src="{{ asset('imagenes/${sesion.imagen3}') }}" style="max-width: 100%; max-height: 200px;" />`);
                        $('#img4-preview').html(`<img src="{{ asset('imagenes/${sesion.imagen4}') }}" style="max-width: 100%; max-height: 200px;" />`);

                        // Esperar a que el select esté completamente cargado antes de seleccionar el módulo
                        setTimeout(function() {
                            $('#modulotitu-select').val(sesion.tema_id);
                        }, 500); // Ajusta el tiempo si es necesario para asegurarte de que los módulos están cargados

                        // Mostrar el botón de actualizar y ocultar el de crear
                        $('#submitButton').hide();
                        $('#updateButton').show();
                    },
                    error: function(xhr) {
                        console.log('Error al obtener la sesión:', xhr);
                        alert('Error al obtener la sesión.');
                    }
                });
            }

            function actualizarsesion(event) {
                event.preventDefault(); // Prevenir la recarga de la página

                let formData = new FormData($('#formSesion')[0]); // Obtener todos los datos del formulario

                $.ajax({
                    url: '/admin/sesion/update', // Ruta para actualizar la sesión
                    method: 'POST',
                    data: formData,
                    processData: false, // Impide que jQuery procese los datos
                    contentType: false, // Impide que jQuery establezca el tipo de contenido
                    success: function(response) {
                        if (response.success) {
                            $('#formSesion')[0].reset();
                            $('#myModalSesi').modal('hide');
                            listarSesiones();
                            $('#img1-preview').html('');
                            $('#img2-preview').html('');
                            $('#img3-preview').html('');
                            $('#img4-preview').html('');
                            alert('Sesión actualizada correctamente.');
                        } else {
                            alert('Hubo un error al actualizar la sesión.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al actualizar la sesión: ' + errorMessage);
                    }
                });
              }


            function eliminarsesion(id, event) {
                event.preventDefault();
                $.ajax({
                    url: `/admin/elimarsesion/${id}`,
                    method: 'GET',
                    success: function(data) {
                        listarSesiones();
                        alert('sesion eliminada');

                    },
                    error: function(xhr) {
                        console.log('Error al cargar los módulos:', xhr);
                        alert('Error al cargar los módulos.');
                    }
                });
            }
            function añadirPDF(id, nombre, event) {
                event.preventDefault();
                // Llenar el campo oculto con el ID de la sesión
                $('#codisesi').val(id);
                // Llenar el nombre de la sesión en el campo correspondiente
                $('#sesionname').text(nombre);
                // Mostrar el modal de carga de PDF
                $('#myModalArchipdf').modal('show');
            }

            function storePDF(event) {
                event.preventDefault();

                let formData = new FormData($('#formPDF')[0]); // Crear un objeto FormData con todos los datos del formulario

                $.ajax({
                    url: '/admin/sesion/storepdf', // Ruta para almacenar el PDF
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false, 
                    success: function(response) {
                        if (response.success) {
                            $('#formPDF')[0].reset(); // Resetear el formulario
                            $('#myModalArchipdf').modal('hide'); 
                            listarSesiones(); 
                            alert('Archivo PDF agregado correctamente.');
                        } else {
                            alert('Hubo un error al agregar el archivo PDF.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al agregar el archivo PDF: ' + errorMessage);
                    }
                });
            }
            function eliminarArchivo(id, event) {
                event.preventDefault();
                if (confirm('¿Estás seguro de que deseas eliminar este archivo?')) {
                    $.ajax({
                        url: `/admin/archivo/eliminar/${id}`,
                        method: 'GET',
                        success: function(response) {
                            if (response.success) {
                                alert('Archivo eliminado correctamente.');
                                listarSesiones(); // Refrescar la lista de sesiones
                            } else {
                                alert('Hubo un error al eliminar el archivo.');
                            }
                        },
                        error: function(xhr) {
                            console.log('Error al eliminar el archivo:', xhr);
                            alert('Error al eliminar el archivo.');
                        }
                    });
                }
            }
            function storeComment(sesionId, event) {
                event.preventDefault();

                let formData = new FormData($(`#formComment-${sesionId}`)[0]); // Crear un objeto FormData con todos los datos del formulario

                $.ajax({
                    url: '/admin/sesion/storecomment', // Ruta para almacenar el comentario
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false, 
                    success: function(response) {
                        if (response.success) {
                            $(`#formComment-${sesionId}`)[0].reset(); // Resetear el formulario
                            listarSesiones(); // Actualizar la lista de sesiones para mostrar el nuevo comentario
                            alert('Comentario registrado correctamente.');
                        } else {
                            alert('Hubo un error al registrar el comentario.');
                        }
                    },
                    error: function(xhr) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessage = '';
                        for (let error in errors) {
                            errorMessage += errors[error].join('<br>') + '<br>';
                        }
                        alert('Error al registrar el comentario: ' + errorMessage);
                    }
                });
            }
            listarSesiones();
        </script>
    </div>


</main>
@endsection