@extends('admin.layout.master')

@section('content')

<main>
    <!-- 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>/ Admin Aula</li>
            <li>/ <a href="{{ url('/admin/sesionesarea') }}">Sesiones</a></li>
        </ol>
    </div>
    <style>
        .pregunta {
            border: 1px solid #ced4da;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
            background-color: #f8f9fa;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .respuesta {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 10px;
            margin-top: 10px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .pregunta h5 {
            font-weight: bold;
            font-size: 18px;
            color: #343a40;
        }

        .form-control {
            border-radius: 5px;
        }

        .btn {
            margin-top: 10px;
        }

        .add-respuesta,
        .remove-respuesta,
        .remove-pregunta {
            margin-top: 10px;
        }

        .add-respuesta i,
        .remove-respuesta i,
        .remove-pregunta i {
            margin-right: 5px;
        }

        .pregunta hr {
            margin-top: 20px;
            border: 1px solid #e9ecef;

        }

        .respuesta {
            border: 1px solid #dee2e6;
            border-radius: 7px;
            padding: 10px;
            margin-top: 10px;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        
        .custom-radio {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }


        /* Estilo del círculo personalizado */
        .custom-radio .radio-label {
            width: 20px;
            height: 20px;
            border: 2px solid #343a40;
            border-radius: 50%;
            position: relative;
            cursor: pointer;
        }

        /*ddddddddddd*/
    </style>

    <!-- Seleccionar Área -->
    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Selecciona un Área para ver las sesiones</h3>
            <div id="btn-nueva-sesion" style="display: none;">
                <a id='agregar-nueva-sesion' href="javascript:void(0)" class="btn btn-info rounded-pill">
                    <i class='bx bxs-pencil'></i> Nueva Sesión
                </a>
            </div>
        </div>

        <div class="card-body">
            <!-- Selección de área -->
            <div class="form-group">
                <label for="area_id">Área:</label>
                <select id="area_id" class="form-control">
                    <option value="">Selecciona un área</option>
                    @foreach($areas as $area)
                    <option value="{{ $area->id }}">{{ $area->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Lista de sesiones -->
            <div class="table-responsive">
                <table id="tabla" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Título de la Sesión</th>
                            <th>Link Vimeo</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="sesiones-list">
                        <!-- Aquí se cargarán las sesiones dinámicamente -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Modal para Crear o Editar Sesión -->
        <div class="modal fade" id="myModalSesion" role="dialog">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content col-lg-12 mx-auto">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear/Editar Sesión</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Formulario para crear o editar sesión -->
                        <form id="sesionForm" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="sesion_id">
                            <input type="hidden" id="area_id_form">

                            <!-- Fila para Título y Link de Vimeo -->
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="titulo">Título de la Sesión:</label>
                                    <input type="text" id="titulo" class="form-control" placeholder="Ingrese el título de la sesión">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="link_video_vimeo">Link de Vimeo:</label>
                                    <input type="url" id="link_video_vimeo" class="form-control" placeholder="Ingrese el link de Vimeo">
                                </div>
                            </div>

                            <!-- Contenido -->
                            <div class="form-group">
                                <label for="contenido">Contenido:</label>
                                <textarea id="contenido" class="form-control" rows="4" placeholder="Ingrese el contenido de la sesión"></textarea>
                            </div>

                            <!-- Dato Extra -->
                            <div class="form-group">
                                <label for="dato_extra">Dato Extra:</label>
                                <textarea id="dato_extra" class="form-control" rows="4" placeholder="Ingrese información extra si es necesario"></textarea>
                            </div>

                            <!-- Video -->
                            <div class="form-group">
                                <label for="video">Seleccionar Video:</label>
                                <input type="file" id="video" class="form-control" onchange="previewVideo(event)">
                                <div id="preview" style="margin-top: 10px;">
                                    <video id="video-preview" controls style="max-width: 100%; height: auto; display: none;"></video>
                                </div>
                            </div>

                            <!-- Botón Guardar -->
                            <div class="form-group">
                                <button type="button" class="btn btn-success" id='guardar-sesion'>Guardar</button>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal para Crear Examen -->
        <div class="modal fade" id="myModalExamen" role="dialog">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content col-lg-12 mx-auto">
                    <div class="modal-header">
                        <h4 class="modal-title">Crear Examen</h4>
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Formulario para crear examen -->
                        <form id="examenForm">
                            @csrf
                            <input type="hidden" id="sesion_id_examen">
                            <input type="hidden" id="examen_id" name="examen_id">
                            <!-- Contenedor para preguntas dinámicas -->
                            <div id="preguntas-container"></div>

                            <!-- Botón para añadir nueva pregunta -->
                            <button type="button" class="btn btn-info" id="btn-add-pregunta">Añadir Pregunta</button>

                            <!-- Botón para guardar examen -->
                            <div class="form-group mt-3">
                                <button type="button" class="btn btn-success" id="guardar-examen">Guardar Examen</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>
    <script type="importmap">
        {
                "imports": {
                    "ckeditor5": "{{ asset('ckeditor5/ckeditor5.js') }}",
                 
                    "ckeditor5-umd": "{{ asset('ckeditor5/ckeditor5.umd.js') }}",
                    "ckeditor5-umd-map": "{{ asset('ckeditor5/ckeditor5.umd.js.map') }}",
                    "ckeditor5-js-map": "{{ asset('ckeditor5/ckeditor5.js.map') }}",
                    "ckeditor5-css": "{{ asset('ckeditor5/ckeditor5.css') }}",
                    "ckeditor5-content-css": "{{ asset('ckeditor5/ckeditor5-content.css') }}",
                    "ckeditor5-editor-css": "{{ asset('ckeditor5/ckeditor5-editor.css') }}",
                    "translations": "{{ asset('ckeditor5/translations') }}"
                }
            }
    </script>

    <script type="module">
        import {
            ClassicEditor,
            AccessibilityHelp,
            Alignment,
            Autoformat,
            AutoImage,
            AutoLink,
            Autosave,
            BlockQuote,
            Bold,
            CloudServices,
            Code,
            Essentials,
            FontBackgroundColor,
            FontColor,
            FontFamily,
            FontSize,
            Heading,
            Highlight,
            HorizontalLine,
            ImageBlock,
            ImageCaption,
            ImageInline,
            ImageInsertViaUrl,
            ImageResize,
            ImageStyle,
            ImageTextAlternative,
            ImageToolbar,
            ImageUpload,
            Indent,
            IndentBlock,
            Italic,
            Link,
            LinkImage,
            List,
            ListProperties,
            PageBreak,
            Paragraph,
            RemoveFormat,
            SelectAll,
            SpecialCharacters,
            SpecialCharactersArrows,
            SpecialCharactersCurrency,
            SpecialCharactersEssentials,
            SpecialCharactersLatin,
            SpecialCharactersMathematical,
            SpecialCharactersText,
            Strikethrough,
            Subscript,
            Superscript,
            Table,
            TableCaption,
            TableCellProperties,
            TableColumnResize,
            TableProperties,
            TableToolbar,
            TextTransformation,
            TodoList,
            Underline,
            Undo
        } from 'ckeditor5';

        // Configuración del editor
        const editorConfig = {
            toolbar: {
                items: [
                    'undo',
                    'redo',
                    '|',
                    'heading',
                    '|',
                    'fontSize',
                    'fontFamily',
                    'fontColor',
                    'fontBackgroundColor',
                    '|',
                    'bold',
                    'italic',
                    'underline',
                    'strikethrough',
                    'subscript',
                    'superscript',
                    'code',
                    'removeFormat',
                    '|',
                    'specialCharacters',
                    'horizontalLine',
                    'pageBreak',
                    'link',
                    'insertImageViaUrl',
                    'insertTable',
                    'highlight',
                    'blockQuote',
                    '|',
                    'alignment',
                    '|',
                    'bulletedList',
                    'numberedList',
                    'todoList',
                    'outdent',
                    'indent'
                ],
                shouldNotGroupWhenFull: true
            },
            plugins: [
                AccessibilityHelp,
                Alignment,
                Autoformat,
                AutoImage,
                AutoLink,
                Autosave,
                BlockQuote,
                Bold,
                CloudServices,
                Code,
                Essentials,
                FontBackgroundColor,
                FontColor,
                FontFamily,
                FontSize,
                Heading,
                Highlight,
                HorizontalLine,
                ImageBlock,
                ImageCaption,
                ImageInline,
                ImageInsertViaUrl,
                ImageResize,
                ImageStyle,
                ImageTextAlternative,
                ImageToolbar,
                ImageUpload,
                Indent,
                IndentBlock,
                Italic,
                Link,
                LinkImage,
                List,
                ListProperties,
                PageBreak,
                Paragraph,
                RemoveFormat,
                SelectAll,
                SpecialCharacters,
                SpecialCharactersArrows,
                SpecialCharactersCurrency,
                SpecialCharactersEssentials,
                SpecialCharactersLatin,
                SpecialCharactersMathematical,
                SpecialCharactersText,
                Strikethrough,
                Subscript,
                Superscript,
                Table,
                TableCaption,
                TableCellProperties,
                TableColumnResize,
                TableProperties,
                TableToolbar,
                TextTransformation,
                TodoList,
                Underline,
                Undo
            ],
            fontFamily: {
                supportAllValues: true
            },
            fontSize: {
                options: [8, 9, 10, 11, 'default', 12, 13, 14, 15, 16, 17, 18, 20],
                supportAllValues: true
            },
            heading: {
                options: [{
                        model: 'paragraph',
                        title: 'Paragraph',
                        class: 'ck-heading_paragraph'
                    },
                    {
                        model: 'heading1',
                        view: 'h1',
                        title: 'Heading 1',
                        class: 'ck-heading_heading1'
                    },
                    {
                        model: 'heading2',
                        view: 'h2',
                        title: 'Heading 2',
                        class: 'ck-heading_heading2'
                    },
                    {
                        model: 'heading3',
                        view: 'h3',
                        title: 'Heading 3',
                        class: 'ck-heading_heading3'
                    },
                    {
                        model: 'heading4',
                        view: 'h4',
                        title: 'Heading 4',
                        class: 'ck-heading_heading4'
                    },
                    {
                        model: 'heading5',
                        view: 'h5',
                        title: 'Heading 5',
                        class: 'ck-heading_heading5'
                    },
                    {
                        model: 'heading6',
                        view: 'h6',
                        title: 'Heading 6',
                        class: 'ck-heading_heading6'
                    }
                ]
            },
            image: {
                toolbar: [
                    'toggleImageCaption',
                    'imageTextAlternative',
                    '|',
                    'imageStyle:inline',
                    'imageStyle:wrapText',
                    'imageStyle:breakText',
                    '|',
                    'resizeImage'
                ]
            },
            link: {
                addTargetToExternalLinks: true,
                defaultProtocol: 'https://',
                decorators: {
                    toggleDownloadable: {
                        mode: 'manual',
                        label: 'Downloadable',
                        attributes: {
                            download: 'file'
                        }
                    }
                }
            },
            list: {
                properties: {
                    styles: true,
                    startIndex: true,
                    reversed: true
                }
            },
            placeholder: 'Type or paste your content here!',
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
            }
        };
        let editorInstance1, editorInstance2;
        ClassicEditor
            .create(document.querySelector('#contenido'), editorConfig)
            .then(editor => {
                editorInstance1 = editor;
            })
            .catch(error => {
                console.error('Error al inicializar contenido', error);
            });
        ClassicEditor
            .create(document.querySelector('#dato_extra'), editorConfig)
            .then(editor => {
                editorInstance2 = editor;
            })
            .catch(error => {
                console.error('Error al inicializar dato_extra', error);
            });

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('guardar-sesion').addEventListener('click', guardarSesion);
            document.getElementById('agregar-nueva-sesion').addEventListener('click', agregarNuevaSesion);
            document.getElementById('area_id').addEventListener('change', cargarSesionesPorArea);
        });

        function cargarSesionesPorArea() {
            var area_id = $('#area_id').val();
            var sesionesHtml = '';

            if ($.fn.DataTable.isDataTable('#tabla')) {
                $('#tabla').DataTable().destroy();
            }
            if (area_id) {
                $('#btn-nueva-sesion').show();
                $.ajax({
                    url: '{{ url("/admin/sesionesarea/listar") }}',
                    type: 'POST',
                    data: {
                        area_id: area_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.sesiones.length > 0) {
                            response.sesiones.forEach(function(sesion, index) {
                                var videoUrl = '{{ asset("videos_sesion") }}/' + sesion.video;
                                sesionesHtml += `
                                    <tr>
                                        <td>${sesion.id}</td>
                                        <td>${sesion.titulo}</td>
                                        <td><a href="${sesion.link_video_vimeo}" target="_blank">${sesion.link_video_vimeo}</a></td>
                                        <td>
                                            <button class="btn btn-primary btn-xs editar-sesion" data-id="${sesion.id}">Editar</button>
                                            <button class="btn btn-danger btn-xs eliminar-sesion" data-id="${sesion.id}">Eliminar</button>
                                            <button class="btn btn-info btn-xs crear-examen" data-id="${sesion.id}">Examen</button>
                                        </td>
                                    </tr>`;
                            });
                        } else {
                            sesionesHtml = '<tr><td colspan="5">No hay sesiones para esta área.</td></tr>';
                        }

                        $('#sesiones-list').html(sesionesHtml);

                        // Inicializar DataTable si hay sesiones
                        if (response.sesiones.length > 0) {
                            $('#tabla').DataTable({
                                "paging": true,
                                "lengthChange": false,
                                "searching": true,
                                "ordering": true,
                                "info": true,
                                "autoWidth": false,
                                "responsive": true,
                                "pageLength": 5,
                                "order": [
                                    [0, 'desc']
                                ]
                            });
                        }
                    },
                    error: function(response) {
                        alert('Error al cargar las sesiones.');
                    }
                });
            } else {
                $('#btn-nueva-sesion').hide();
                $('#sesiones-list').html('<tr><td colspan="5">Selecciona un área para ver las sesiones.</td></tr>');
            }
        }

        // Delegar el evento de click para los botones de editar y eliminar
        $(document).on('click', '.editar-sesion', function() {
            var id = $(this).data('id'); // Obtener el ID de la sesión
            editarSesion(id); // Llamar a la función editar
        });

        $(document).on('click', '.eliminar-sesion', function() {
            var id = $(this).data('id'); // Obtener el ID de la sesión
            eliminarSesion(id); // Llamar a la función eliminar
        });

        function agregarNuevaSesion() {
            $('#sesion_id').val('');
            $('#titulo').val('');
            $('#link_video_vimeo').val('');
            editorInstance1.setData(''); // Asignar contenido a CKEditor
            editorInstance2.setData(''); // A
            $('#video').val('');
            $('#video-preview').attr('src', '').hide();
            $('#area_id_form').val($('#area_id').val());
            $('#myModalSesion').modal('show');
        }

        function guardarSesion() {
            var formData = new FormData();
            var id = $('#sesion_id').val();
            var titulo = $('#titulo').val();
            var archivo = $('#video')[0].files[0];
            var link_video_vimeo = $('#link_video_vimeo').val();
            var contenido = editorInstance1.getData();
            var dato_extra = editorInstance2.getData();
            var area_id = $('#area_id_form').val();

            if (!id && !archivo && !link_video_vimeo) {
                alert('El video o el link de Vimeo es obligatorio.');
                return;
            }

            formData.append('titulo', titulo);
            formData.append('area_id', area_id);
            formData.append('link_video_vimeo', link_video_vimeo);
            formData.append('contenido', contenido);
            formData.append('dato_extra', dato_extra);
            if (archivo) {
                formData.append('video', archivo);
            }
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('id', id);

            $.ajax({
                url: '{{ url("/admin/sesionesarea/guardar") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    cargarSesionesPorArea();
                    $('#myModalSesion').modal('hide');
                    // alert('Sesión guardada exitosamente.');
                },
                error: function(response) {
                    alert('Error al guardar la sesión.');
                }
            });
        }

        function editarSesion(id) {
            $.ajax({
                url: '{{ url("/admin/sesionesarea/editar") }}/' + id,
                type: 'GET',
                success: function(response) {
                    $('#sesion_id').val(response.id);
                    $('#titulo').val(response.titulo);
                    $('#link_video_vimeo').val(response.link_video_vimeo);
                    editorInstance1.setData(response.contenido);
                    editorInstance2.setData(response.dato_extra);
                    $('#area_id_form').val(response.area_id);
                    if (response.video) {
                        $('#video-preview').attr('src', '{{ asset("videos_sesion") }}/' + response.video).show();
                    }
                    $('#video').val('');
                    $('#myModalSesion').modal('show');
                },
                error: function(response) {
                    alert('Error al obtener los datos de la sesión.');
                }
            });
        }

        function eliminarSesion(id) {
            if (confirm('¿Estás seguro de eliminar esta sesión?')) {
                $.ajax({
                    url: '{{ url("/admin/sesionesarea/eliminar") }}/' + id,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        cargarSesionesPorArea();
                        alert('Sesión eliminada exitosamente.');
                    },
                    error: function(response) {
                        alert('Error al eliminar la sesión.');
                    }
                });
            }
        }
        let preguntaCounter = 0;
        let ckeditorInstances = {};

        $(document).ready(function() {
            // Añadir nueva pregunta
            $('#btn-add-pregunta').click(function() {
                preguntaCounter++;
                addPregunta(preguntaCounter);
            });

            $('#guardar-examen').click(function() {
                guardarExamen();
            });

            // Abrir modal para crear o editar examen
            $(document).on('click', '.crear-examen', function() {
                const sesionId = $(this).data('id');
                $.ajax({
                    url: '/admin/sesionesarea/examenes/list',
                    type: 'POST',
                    data: {
                        sesion_id: sesionId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        const examen = response.examen;
                        if (examen) {
                            loadExamenForEditing(examen);
                        } else {
                            preguntaCounter = 0;
                            ckeditorInstances = {};
                            $('#sesion_id_examen').val(sesionId);
                            $('#preguntas-container').empty();
                            ckeditorInstances = {};
                        }
                        $('#myModalExamen').modal('show');
                    },
                    error: function(response) {
                        alert('Error al buscar el examen.');
                    }
                });
            });
        });

        function loadExamenForEditing(examen) {
            $('#preguntas-container').empty();
            ckeditorInstances = {};
            $('#examen_id').val(examen.id);
            examen.preguntas.forEach((pregunta, index) => {
                preguntaCounter = index + 1;
                addPreguntaex(preguntaCounter);
                pregunta.respuestas.forEach((respuesta, respuestaIndex) => {
                    addRespuestaex(preguntaCounter, respuestaIndex + 1);
                });
            });
            examen.preguntas.forEach((pregunta, index) => {
                const preguntaId = index + 1;
                ClassicEditor.create(document.querySelector(`#pregunta_${preguntaId}_texto`), editorConfig)
                    .then(editor => {
                        ckeditorInstances[`pregunta_${preguntaId}_texto`] = editor;
                        editor.setData(pregunta.texto);
                    });
                pregunta.respuestas.forEach((respuesta, respuestaIndex) => {
                    const respuestaId = respuestaIndex + 1;

                    ClassicEditor.create(document.querySelector(`#respuesta_${preguntaId}_${respuestaId}_texto`), editorConfig)
                        .then(editor => {
                            ckeditorInstances[`respuesta_${preguntaId}_${respuestaId}_texto`] = editor;
                            editor.setData(respuesta.texto);
                        });
                    if (respuesta.es_correcta) {
                        $(`#respuesta_${preguntaId}_${respuestaId} input[type=radio]`).prop('checked', true);
                    }
                });
            });
        }

        function addPregunta(counter) {
            const preguntaHtml = `
                <div class="pregunta mb-4" id="pregunta_${counter}">
                    <h5><b>Pregunta ${counter}</b></h5>
                    <div class="form-group">
                        <label for="pregunta_${counter}_texto">Texto de la Pregunta:</label>
                        <textarea class="form-control ckeditor" id="pregunta_${counter}_texto" name="preguntas[${counter}][texto]"></textarea>
                    </div>
                    <div class="respuestas-container" id="respuestas_${counter}">
                        <h6>Respuestas</h6>
                        <button type="button" class="btn btn-sm btn-secondary add-respuesta" data-counter="${counter}"><i class='bx bx-plus'></i>Respuesta</button>
                        <button type="button" class="btn btn-sm btn-danger remove-pregunta" data-id="${counter}"><i class='bx bx-trash'></i>Pregunta</button>
                        <div class="respuesta-list mt-2"></div>
                    </div>
                    <hr>
                </div>
            `;
            $('#preguntas-container').append(preguntaHtml);

            // Inicializar CKEditor para la pregunta
            ClassicEditor.create(document.querySelector(`#pregunta_${counter}_texto`), editorConfig).then(editor => {
                ckeditorInstances[`pregunta_${counter}_texto`] = editor;
            });

            // Añadir respuestas dinámicas
            $(`#respuestas_${counter} .add-respuesta`).click(function() {
                const preguntaId = $(this).data('counter');
                addRespuesta(preguntaId);
            });

            // Eliminar pregunta
            $(`#pregunta_${counter} .remove-pregunta`).click(function() {
                const preguntaId = $(this).data('id');
                removePregunta(preguntaId);
            });
        }

        function addRespuesta(preguntaId, respuestaCounter = null) {
            if (!respuestaCounter) {
                respuestaCounter = $(`#respuestas_${preguntaId} .respuesta-list .respuesta`).length + 1;
            }
            const respuestaHtml = `
                <div class="respuesta mb-3" id="respuesta_${preguntaId}_${respuestaCounter}">
                    <label><b>Respuesta ${respuestaCounter}</b></label>
                    <textarea class="form-control ckeditor" id="respuesta_${preguntaId}_${respuestaCounter}_texto" name="preguntas[${preguntaId}][respuestas][${respuestaCounter}][texto]"></textarea>
                    <label>
                        <input type="radio" name="preguntas[${preguntaId}][correcta]" value="${respuestaCounter}">Correcta
                    </label>
                    <button type="button" class="btn btn-sm btn-danger remove-respuesta" data-pregunta-id="${preguntaId}" data-respuesta-id="${respuestaCounter}"><i class='bx bx-trash'></i></button>
                </div>
            `;
            $(`#respuestas_${preguntaId} .respuesta-list`).append(respuestaHtml);

            // Inicializar CKEditor para la respuesta
            ClassicEditor.create(document.querySelector(`#respuesta_${preguntaId}_${respuestaCounter}_texto`), editorConfig).then(editor => {
                ckeditorInstances[`respuesta_${preguntaId}_${respuestaCounter}_texto`] = editor;
            });

            // Eliminar respuesta
            $(`#respuesta_${preguntaId}_${respuestaCounter} .remove-respuesta`).click(function() {
                const respuestaId = $(this).data('respuesta-id');
                const preguntaId = $(this).data('pregunta-id');
                removeRespuesta(preguntaId, respuestaId);
            });
        }

        function addPreguntaex(counter) {
            const preguntaHtml = `
                <div class="pregunta mb-4" id="pregunta_${counter}">
                    <h5><b>Pregunta ${counter}</b></h5>
                    <div class="form-group">
                        <label for="pregunta_${counter}_texto">Texto de la Pregunta:</label>
                        <textarea class="form-control" id="pregunta_${counter}_texto" name="preguntas[${counter}][texto]"></textarea>
                    </div>
                    <div class="respuestas-container" id="respuestas_${counter}">
                        <h6>Respuestas</h6>
                        <button type="button" class="btn btn-sm btn-secondary add-respuesta" data-counter="${counter}">
                            <i class='bx bx-plus'></i> Respuesta
                        </button>
                        <button type="button" class="btn btn-sm btn-danger remove-pregunta" data-id="${counter}">
                            <i class='bx bx-trash'></i> Pregunta
                        </button>
                        <div class="respuesta-list mt-2"></div>
                    </div>
                    <hr>
                </div>
            `;
            $('#preguntas-container').append(preguntaHtml);

            // Añadir evento para añadir respuestas
            $(`#respuestas_${counter} .add-respuesta`).click(function() {
                const preguntaId = $(this).data('counter');
                addRespuesta(preguntaId);
            });

            // Añadir evento para eliminar la pregunta
            $(`#pregunta_${counter} .remove-pregunta`).click(function() {
                const preguntaId = $(this).data('id');
                removePregunta(preguntaId);
            });
        }

        function addRespuestaex(preguntaId, respuestaCounter = null) {
            if (!respuestaCounter) {
                respuestaCounter = $(`#respuestas_${preguntaId} .respuesta-list .respuesta`).length + 1;
            }

            const respuestaHtml = `
                <div class="respuesta mb-3" id="respuesta_${preguntaId}_${respuestaCounter}">
                    <label><b>Respuesta ${respuestaCounter}</b></label>
                    <textarea class="form-control" id="respuesta_${preguntaId}_${respuestaCounter}_texto" name="preguntas[${preguntaId}][respuestas][${respuestaCounter}][texto]"></textarea>
                    <label>
                        <input type="radio" name="preguntas[${preguntaId}][correcta]" value="${respuestaCounter}">Correcta
                    </label>
                    <button type="button" class="btn btn-sm btn-danger remove-respuesta" data-pregunta-id="${preguntaId}" data-respuesta-id="${respuestaCounter}">
                        <i class='bx bx-trash'></i>
                    </button>
                </div>
            `;
            $(`#respuestas_${preguntaId} .respuesta-list`).append(respuestaHtml);

            // Añadir evento para eliminar la respuesta
            $(`#respuesta_${preguntaId}_${respuestaCounter} .remove-respuesta`).click(function() {
                const respuestaId = $(this).data('respuesta-id');
                const preguntaId = $(this).data('pregunta-id');
                removeRespuesta(preguntaId, respuestaId);
            });
        }

        function removePregunta(preguntaId) {
            ckeditorInstances[`pregunta_${preguntaId}_texto`].destroy();
            delete ckeditorInstances[`pregunta_${preguntaId}_texto`];
            $(`#pregunta_${preguntaId}`).remove();
        }

        function removeRespuesta(preguntaId, respuestaId) {
            ckeditorInstances[`respuesta_${preguntaId}_${respuestaId}_texto`].destroy();
            delete ckeditorInstances[`respuesta_${preguntaId}_${respuestaId}_texto`];
            $(`#respuesta_${preguntaId}_${respuestaId}`).remove();
        }

        function guardarExamen() {
            const formData = new FormData();
            const sesionId = $('#sesion_id_examen').val();
            const examenId = $('#examen_id').val(); // Obtener el ID del examen si está presente
            formData.append('sesion_id', sesionId);
            formData.append('_token', '{{ csrf_token() }}');

            if (examenId) {
                formData.append('examen_id', examenId); // Añadir el examen ID al FormData si existe
            }
            $('.pregunta').each(function() {
                const preguntaId = $(this).attr('id').split('_')[1];
                const preguntaTexto = ckeditorInstances[`pregunta_${preguntaId}_texto`].getData();
                formData.append(`preguntas[${preguntaId}][texto]`, preguntaTexto);

                $(this).find('.respuesta').each(function() {
                    const respuestaId = $(this).attr('id').split('_')[2];
                    const respuestaTexto = ckeditorInstances[`respuesta_${preguntaId}_${respuestaId}_texto`].getData();
                    formData.append(`preguntas[${preguntaId}][respuestas][${respuestaId}][texto]`, respuestaTexto);

                    if ($(this).find('input[type=radio]').is(':checked')) {
                        formData.append(`preguntas[${preguntaId}][correcta]`, respuestaId);
                    }
                });
            });
            // Definir si estamos creando o actualizando un examen
            const url = examenId ? '/admin/sesionesarea/examenes/update' : '/admin/sesionesarea/examenes/store';

            $.ajax({
                url: url, // Usa la ruta correspondiente para actualizar o crear
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    alert('Examen guardado exitosamente.');
                    $('#myModalExamen').modal('hide');
                },
                error: function(response) {
                    alert('Error al guardar el examen.');
                }
            });
        }
    </script>
    <script>
        function previewVideo(event) {
            var reader = new FileReader();
            reader.onload = function() {
                $('#video-preview').attr('src', reader.result).show();
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</main>
@endsection