@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>&nbsp;&nbsp;/ Admin Aula</li>
            <li>&nbsp;&nbsp;/ <a href="{{ url('/admin/grado') }}">Grados</a></li>
        </ol>
    </div>
    <!-- End Breadcrumb Area -->

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Lista de Grados</h3>
            <a href="javascript:void(0)" id="btn-nuevo-grado" class="btn btn-info rounded-pill">
                <i class='bx bxs-pencil'></i> Nuevo Registro
            </a>
        </div>
        <div class="card-body">
            <div class="form-group row">
                <div class="col-md-6">
                    <label for="pais_id">País:</label>
                    <select id="pais_id" class="form-control">
                        <option value="">Selecciona un país</option>
                        @foreach($paises as $pais)
                        <option value="{{ $pais->codigo_iso }}">{{ $pais->nombre }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="nivel_id">Nivel:</label>
                    <select id="nivel_id" class="form-control">
                        <option value="">Seleccione un nivel</option>
                    </select>
                </div>
            </div>

            <!-- Tabla de Grados -->
            <div id="tabla-container" class="table-responsive">
                <table id="tabla-grados" class="table" cellspacing="0" cellpadding="0" width="100%">
                    <thead>
                        <tr>
                            <th>N.</th>
                            <th>Nombre</th>
                            <th>Nivel</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="grados-list">
                        <!-- Grados cargados dinámicamente -->
                    </tbody>
                </table>
            </div>

            <!-- Formulario para Crear o Editar Grado -->
            <div id="formulario-grado" style="display: none;">
                <form id="gradoForm" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="grado_id" id="grado_id">
                    <input type="hidden" id="nivel_id_form">

                    <div class="form-group">
                        <label for="nombre">Nombre del Grado:</label>
                        <input type="text" name="nombre" id="nombre" class="form-control" placeholder="Ingrese el nombre del grado">
                    </div>

                    <div class="form-group">
                        <label for="link_video_vimeo">Link de Vimeo:</label>
                        <input type="url" name='link_video_vimeo' id="link_video_vimeo" class="form-control" placeholder="Ingrese el link de Vimeo">
                    </div>

                    <div class="form-group">
                        <label for="contenido">Contenido:</label>
                        <textarea id="contenido" class="form-control" rows="4"></textarea>
                    </div>

                    <div class="form-group">
                        <label for="imagen_portada">Imagen de Portada 500 X 315PX:</label>
                        <input type="file" name="imagen_portada" id="imagen_portada" class="form-control" onchange="previewImagen(event)">
                        <div id="preview" style="margin-top: 10px;">
                            <img id="img-preview" style="max-width: 10%; height: 10%; display: none;" src="" alt="Previsualización de Imagen">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="estado">Estado:</label>
                        <select name="estado" id="estado" class="form-control">
                            <option value="1">Activo</option>
                            <option value="0">Inactivo</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-success" id="guardarGrado">Guardar</button>
                        <button type="button" class="btn btn-danger" id="cancelarGrado">Cancelar</button>
                    </div>
                </form>
            </div>
            <!-- Modal para asignar áreas a un grado -->
            <div class="modal fade" id="modal-areas-grado" role="dialog">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Asignar Áreas al Grado</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form id="asignarAreasForm">
                                @csrf
                                <input type="hidden" name="grado_id" id="grado_id_areas">

                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>Nombre del Área</th>
                                            <th>Seleccionar</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tabla-areas">
                                    </tbody>
                                </table>

                                <div class="form-group">
                                    <button type="button" class="btn btn-success" id="guardarAreasGrado">Guardar Áreas</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="importmap">
        {
            "imports": {
                "ckeditor5": "/ckeditor5/ckeditor5.js",
                "ckeditor5/": "/ckeditor5/"
            }
        }
    </script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></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: 'Digita tu info',
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
            }
        };

        let editorInstance;

        ClassicEditor
            .create(document.querySelector('#contenido'), editorConfig)
            .then(editor => {
                editorInstance = editor;
            })
            .catch(error => {
                console.error('Error al inicializar dato_extra', error);
            });

        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('pais_id').addEventListener('click',
                cargarNivelesPorPais);
            document.getElementById('nivel_id').addEventListener('click', mostrarBotonAgregarGrado);
            document.getElementById('guardarGrado').addEventListener('click', guardarGrado);
            document.getElementById('cancelarGrado').addEventListener('click', function() {
                limpiarFormularioGrado();
                ocultarFormulario();
            });
            $(document).on('click', '.editar-grado', function() {
                let id = $(this).data('id');
                editarGrado(id);
            });

            $(document).on('click', '.eliminar-grado', function() {
                let id = $(this).data('id');
                eliminarGrado(id);
            });

            document.getElementById('btn-nuevo-grado').addEventListener('click', function() {
                limpiarFormularioGrado();
                mostrarFormulario();
            });;
            $(document).on('click', '.asignar-areas', function() {
                let gradoId = $(this).data('id');
                $('#grado_id_areas').val(gradoId);

                // Petición AJAX para listar las áreas asignadas
                $.ajax({
                    url: `/admin/grados/${gradoId}/areas`, // Utilizamos gradoId aquí
                    method: 'GET',
                    success: function(response) {
                        let areasHtml = '';
                        response.areas.forEach(function(area) {
                            areasHtml += `
                                <tr>

                                   <td>${area.id}</td>
                                   <td>${area.nombre}</td>
                                    <td style="text-align: center; vertical-align: middle;">
                                        <input type="checkbox" class="form-check-input area-checkbox" name="areas[]" value="${area.id}" ${area.asignado ? 'checked' : ''}>
                                    </td>

                                </tr>`;
                        });
                        $('#tabla-areas').html(areasHtml); // Insertamos las áreas en la tabla
                    },
                    error: function() {
                        alert('Error al obtener las áreas.');
                    }
                });
                $('#modal-areas-grado').modal('show');
            });

            $('#guardarAreasGrado').on('click', function() {
                let  grado_id= document.getElementById('grado_id_areas').value;
                const areasSeleccionadas = $('input[name="areas[]"]:checked').map(function() {
                    return $(this).val();
                }).get();

                $.ajax({
                    url: `/admin/grados/${grado_id}/asignar-areas`,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        areas: areasSeleccionadas
                    },
                    success: function(response) {
                        $('#modal-areas-grado').modal('hide');
                        alert('Áreas asignadas correctamente.');
                    },
                    error: function() {
                        alert('Error al asignar las áreas.');
                    }
                });
            });
            $(document).ready(function() {
                $("#tabla-grados tbody").sortable({
                    placeholder: "ui-state-highlight",
                    update: function(event, ui) {
                        var order = $(this).sortable('toArray', { attribute: 'data-id' });
                        saveNewOrder(order);
                    }
                });
            });


        });

        function cargarNivelesPorPais() {
            const pais_id = document.getElementById('pais_id').value;
            document.getElementById('nivel_id').innerHTML = '<option value="">Seleccione un nivel</option>';
            document.getElementById('btn-nuevo-grado').style.display = 'none';
            document.getElementById('grados-list').innerHTML = '<tr><td colspan="6">Seleccione un país y nivel para ver los grados.</td></tr>';
            if (pais_id) {
                fetch('{{ url("/admin/grados/getNivelesByPais") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            pais_id: pais_id
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        let nivelesHtml = '<option value="">Seleccione un nivel</option>';
                        if (data.niveles.length > 0) {
                            data.niveles.forEach(nivel => {
                                nivelesHtml += `<option value="${nivel.id}">${nivel.nombre}</option>`;
                            });
                        } else {
                            nivelesHtml = '<option value="">No hay niveles para este país.</option>';
                        }
                        document.getElementById('nivel_id').innerHTML = nivelesHtml;
                    })
                    .catch(error => {
                        alert('Error al cargar los niveles.');
                    });
            } else {
                document.getElementById('nivel_id').innerHTML = '<option value="">Seleccione un país primero</option>';
            }
            
        }

        function mostrarBotonAgregarGrado() {
            const nivel_id = document.getElementById('nivel_id').value;
            const botonAgregar = document.getElementById('btn-nuevo-grado');
            let control_nivel = 0;
            if (control_nivel == nivel_id) {
                return null;
            }
            if (nivel_id) {
                control_nivel = nivel_id;
                botonAgregar.style.display = 'block';
                cargarGradosPorNivel(nivel_id);
            } else {
                botonAgregar.style.display = 'none';
                document.getElementById('grados-list').innerHTML = '<tr><td colspan="6">Seleccione un nivel para ver los grados.</td></tr>';
            }
        }

        function cargarGradosPorNivel(nivel_id) {
          
            $.ajax({
                url: '{{ url("/admin/grados/nivel") }}',
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: JSON.stringify({
                    nivel_id: nivel_id
                }),
                contentType: 'application/json',
                success: function(data) {
                    let gradosHtml = '';
                    if ($.fn.DataTable.isDataTable('#tabla-grados')) {
                            $('#tabla-grados').DataTable().destroy();
                        }
                    if (data.grados.length > 0) {
                        data.grados.forEach((grado, index) => {
                            gradosHtml += `
                            <tr data-id='${grado.id}'>
                                <td>${grado.id}</td>
                                <td>${grado.nombre}</td>
                                <td>${grado.nivel.nombre}</td>
                                <td>${grado.estado ? 'Activo' : 'Inactivo'}</td>
                                <td>
                                    <button class="btn btn-primary btn-xs editar-grado" data-id="${grado.id}">Editar</button>
                                    <button class="btn btn-danger btn-xs eliminar-grado" data-id="${grado.id}">Eliminar</button>
                                    <button class="btn btn-info btn-xs asignar-areas" data-id="${grado.id}">Áreas</button>
                                </td>
                            </tr>`;
                        });

                        $('#grados-list').html(gradosHtml);
                        // Initialize DataTable
                        $('#tabla-grados').DataTable({
                            "paging": true,
                            "lengthChange": false,
                            "searching": true,
                            "ordering": false,
                            "info": true,
                            "autoWidth": false,
                            "responsive": true,
                            "pageLength": 12,
                            // "order": [
                            //     [0, 'desc']
                            // ]
                        });

                        // Initialize sortable
                        $("#grados-list tbody").sortable({
                            placeholder: "ui-state-highlight",
                            helper: 'clone',
                            axis: 'y',
                            update: function(event, ui) {
                                var order = $(this).sortable('toArray', {
                                    attribute: 'data-id'
                                });
                                saveNewOrder(order);
                            }
                        }).disableSelection();
                    } else {
                        // If no data, present a message and avoid initializing unnecessary features
                        gradosHtml = '<tr><td colspan="6">No hay grados para este nivel.</td></tr>';
                        $('#grados-list').html(gradosHtml);
                        if ($.fn.DataTable.isDataTable('#tabla-grados')) {
                            $('#tabla-grados').DataTable().destroy();
                        }
                    }
                },
                error: function(error) {
                    alert('Error al cargar los grados.');
                }
            });
        }

        function saveNewOrder(order) {
            $.ajax({
                url: '/admin/grados/order',
                type: 'POST',
                data: {
                    order: order,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log('Order updated successfully!');
                },
                error: function() {
                    alert('Error saving order.');
                }
            });
        }

        function guardarGrado() {
            const formData = new FormData(document.getElementById('gradoForm'));
            formData.append('contenido', editorInstance.getData());
            const nivel_id = document.getElementById('nivel_id').value;
            formData.append('nivel_id', nivel_id);
            fetch('{{ url("/admin/grado/guardar") }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.state === '0') {
                        ocultarFormulario();
                        mostrarBotonAgregarGrado();
                        alert('Grado guardado correctamente.');
                    } else {
                        alert('Error al guardar el grado: ' + data.mensaje);
                    }
                })
                .catch(error => {
                    alert('Error al guardar el grado.');
                });
        }

        function editarGrado(id) {
            limpiarFormularioGrado();
            $.ajax({
                url: '{{ url("/admin/grado/editar") }}/' + id,
                type: 'GET',
                success: function(data) {
                    document.getElementById('grado_id').value = data.id;
                    document.getElementById('nombre').value = data.nombre;
                    document.getElementById('link_video_vimeo').value = data.link_video_vimeo;
                    editorInstance.setData(data.contenido);
                    document.getElementById('estado').value = data.estado;
                    document.getElementById('nivel_id').value = data.nivel_id;
                    if (data.imagen_portada) {
                        document.getElementById('img-preview').src = '{{ asset("imagenes_grados") }}/' + data.imagen_portada;
                        document.getElementById('img-preview').style.display = 'block';
                    } else {
                        document.getElementById('img-preview').style.display = 'none';
                    }
                    mostrarFormulario();
                },
                error: function() {
                    alert('Error al obtener los datos del grado.');
                }
            });
        }

        function limpiarFormularioGrado() {
            document.getElementById('grado_id').value = '';
            document.getElementById('nombre').value = '';
            document.getElementById('link_video_vimeo').value = '';
            editorInstance.setData('');
            document.getElementById('estado').value = '1';
            document.getElementById('nivel_id_form').value = '';
            document.getElementById('img-preview').style.display = 'none';
            document.getElementById('imagen_portada').value = ''; // Ocultar la previsualización de la imagen
        }

        function eliminarGrado(id) {
            if (confirm('¿Estás seguro de eliminar este grado?')) {
                fetch('{{ url("/admin/grado/eliminar") }}/' + id, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    })
                    .then(response => {
                        alert('Grado eliminado correctamente.');
                        mostrarBotonAgregarGrado();
                    })
                    .catch(error => {
                        alert('Error al eliminar el grado.');
                    });
            }
        }

        function previewImagen(event) {
            const reader = new FileReader();
            reader.onload = function() {
                document.getElementById('img-preview').src = reader.result;
                document.getElementById('img-preview').style.display = 'block';
            };
            reader.readAsDataURL(event.target.files[0]);
        }

        function mostrarFormulario() {
            document.getElementById('tabla-container').style.display = 'none';
            document.getElementById('formulario-grado').style.display = 'block';
        }

        function ocultarFormulario() {
            document.getElementById('formulario-grado').style.display = 'none';
            document.getElementById('tabla-container').style.display = 'block';
        }
    </script>
    <script>
        function previewImagen(event) {
            const reader = new FileReader();
            reader.onload = function() {
                document.getElementById('img-preview').src = reader.result;
                document.getElementById('img-preview').style.display = 'block';
            };
            reader.readAsDataURL(event.target.files[0]);
        }
    </script>
</main>
@endsection