{{-- Modal para seleccionar el layout de columnas --}}
<div class="modal fade" id="modal-diseno-columnas" tabindex="-1" role="dialog" aria-labelledby="modalDisenoColumnasLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalDisenoColumnasLabel">Seleccionar Estructura de Columnas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    @foreach($layoutOpciones as $opcion)
                        <div class="col-lg-3 col-md-4 col-sm-6 col-6 mb-3">
                            <div class="opcion-diseno" data-layout="{{ $opcion['value'] }}">
                                <i class='bx bx-grid-alt fs-3 mb-2 icono-marcador-posicion-diseno'></i>
                                <div>{{ $opcion['label'] }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal de la galeria de imagenes del Digital Ocean --}}
<div class="modal fade" id="modalImagenesConstructor" tabindex="-1" aria-labelledby="modalImagenesLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalImagenesLabel">
                    <i class="bx bx-image-alt me-2"></i> Galería de Imágenes
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-5 border-end pe-3">
                        <h6 class="text-dark mb-3"><i class="bx bx-upload me-1"></i>Subir Nuevo Archivo</h6>
                        <div class="mb-2">
                            <input type="file" class="form-control form-control-sm" id="modalFileUploadInput" accept="image/*">
                            <small id="modalSelectedFileName" class="text-muted d-block mt-1" style="min-height: 1.2em;"></small>
                        </div>
                        <div class="mb-2">
                            <label for="modalNewSubfolderName" class="form-label">Nombre de Nueva Subcarpeta (Opcional)</label>
                            <input type="text" class="form-control form-control-sm" id="modalNewSubfolderName">
                            <small>Si desea agregar una carpeta dentro de otra carpeta usar / por ejemplo: Carpeta1/subcarpeta1</small>
                        </div>
                        <button type="button" class="btn btn-sm btn-primary mb-3 w-100" id="btnModalUploadFile">
                            <span class="spinner-border spinner-border-sm d-none me-1" role="status" aria-hidden="true"></span>
                            <i class="bx bx-cloud-upload me-1"></i>Subir Archivo Seleccionado
                        </button>

                        <hr class="my-3"/>

                        <h6 class="text-dark mb-3"><i class="bx bx-folder-open me-1"></i>Archivos Existentes</h6>
                        <div style="max-height: 400px; overflow-y: auto;">
                            <ul class="list-group" id="listaArchivosDigitalOcean" style="cursor: pointer;">
                                @foreach($archivosDigitalOcean as $clave => $valor)
                                    @include('components.archivo-carpeta', ['clave' => $clave, 'valor' => $valor])
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-7 text-center d-flex flex-column justify-content-between ps-3">
                        <div id="previewContainerModal" class="mt-3 mt-md-0" style="min-height: 300px;">
                            <p class="text-muted" id="previewPlaceholderModal">Selecciona un archivo de la lista para previsualizar o sube uno nuevo.</p>
                            <img id="previewImagenModal" src="" class="img-fluid rounded shadow-sm d-none mb-3" alt="Vista previa" style="max-height: 350px; display: block; margin: auto;">
                        </div>
                        <div class="d-flex justify-content-center gap-3 mt-3">
                            <button id="btnModalAddSelectedImage" type="button" class="btn btn-success d-none">
                                <i class="bx bx-check-circle me-1"></i> Usar Imagen Seleccionada
                            </button>
                            <button id="btnModalEliminarImg" type="button" class="btn btn-danger d-none">
                                <i class="bx bx-trash me-1"></i> Eliminar Imagen Seleccionada
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    jQuery(document).ready(function () {
        const BASE_UPLOAD_FOLDER = 'imagenes/constructor'; //Carpeta base que se llama desde el back para obtener todos los archivos del contrustor

        //Actualiza el input de la imagen con la url entregada y el espacio donde se muestra la preview de la imagen
        function updateInputAndPreview(urlInputId, nuevaRuta, $urlInputInstance) {
            if (!$urlInputInstance || !$urlInputInstance.length) {
                $urlInputInstance = jQuery(`#${urlInputId}`);
            }

            $urlInputInstance.val(nuevaRuta);

            const $previewContainer = jQuery(`.preview-container-for-${urlInputId}`);
            const maxAltoPreview = $previewContainer.data('max-height') || '100px';

            $previewContainer.html(generarHtmlPreview(nuevaRuta, maxAltoPreview));

            $urlInputInstance.trigger('input');
        }

        //Boton para abrir la galeria de imagenes del constructor
        jQuery(document).on('click', '.btn-open-gallery-modal', function () {
            const targetInputId = jQuery(this).data('input-target-id');
            const modal = jQuery('#modalImagenesConstructor');

            if ($('#barra-lateral-ajustes').hasClass('activa')) {
                $('#btn-ocultar-barra-ajustes').trigger('click');
            }

            modal.data('activeUrlInputId', targetInputId);

            jQuery('#modalFileUploadInput').val('');
            jQuery('#modalSelectedFileName').text('');
            jQuery('#modalNewSubfolderName').val('');

            jQuery('#previewImagenModal').attr('src', '').addClass('d-none');
            jQuery('#previewPlaceholderModal').removeClass('d-none');
            jQuery('#btnModalAddSelectedImage').addClass('d-none').removeData('selected-url-from-modal');
            jQuery('#btnModalEliminarImg').addClass('d-none').removeData('selected-url-from-modal');
            jQuery('#listaArchivosDigitalOcean .archivo-item').removeClass('active bg-primary text-white');
            jQuery('#listaArchivosDigitalOcean .toggle-carpeta').removeClass('active-folder');

            jQuery('#listaArchivosDigitalOcean').parent().scrollTop(0);
        });

        // Cuando se hace clic en el botón "Subir Archivo Seleccionado" en el modal
        jQuery('#btnModalUploadFile').on('click', async function () {
            const $btnUpload = jQuery(this);
            const fileInput = document.getElementById('modalFileUploadInput');
            const urlInputId = jQuery('#modalImagenesConstructor').data('activeUrlInputId');

            const $urlInputOnPage = jQuery(`#${urlInputId}`);

            if (fileInput.files && fileInput.files[0]) {
                $btnUpload.prop('disabled', true).find('.spinner-border').removeClass('d-none');
                $btnUpload.find('i').addClass('d-none');

                let carpetaDestino = BASE_UPLOAD_FOLDER;
                const newSubfolderInput = jQuery('#modalNewSubfolderName').val().trim();

                //Obtenemos el nombre de las subcarpetas separandolo por /
                if (newSubfolderInput && newSubfolderInput !== '/') {
                    let sanitizedSubfolder = newSubfolderInput.replace(/[^a-zA-Z0-9-_/]/g, '');

                    sanitizedSubfolder = sanitizedSubfolder.replace(/\/+/g, '/');
                    if (sanitizedSubfolder.startsWith('/')) {
                        sanitizedSubfolder = sanitizedSubfolder.substring(1);
                    }
                    if (sanitizedSubfolder.endsWith('/')) {
                        sanitizedSubfolder = sanitizedSubfolder.substring(0, sanitizedSubfolder.length - 1);
                    }

                    if (sanitizedSubfolder) {
                        carpetaDestino += `/${sanitizedSubfolder}`;
                    }
                }

                try {
                    //Se carga la imagen nueva cargada a Digital Ocean
                    await cargarDocImg(fileInput, carpetaDestino, $urlInputOnPage);

                    const nuevaRuta = $urlInputOnPage.val();
                    updateInputAndPreview(urlInputId, nuevaRuta, $urlInputOnPage);

                    jQuery('#modalImagenesConstructor').modal('hide');

                } catch (error) {
                    alert("Error al subir el archivo. Por favor, inténtalo de nuevo.");
                }

                $btnUpload.prop('disabled', false).find('.spinner-border').addClass('d-none');
                $btnUpload.find('i').removeClass('d-none');
                jQuery('#modalFileUploadInput').val('');
                jQuery('#modalSelectedFileName').text('');
            } else {
                Swal.fire({
                    title: 'Agregar Imagen Primero',
                    icon: 'error',
                });
            }
        });

        //Al darle click a cada nombre de imagen mostrar el preview de la imagen a la derecha
        jQuery(document).on('click', '#listaArchivosDigitalOcean .archivo-item', function () {
            const $item = jQuery(this);
            jQuery('#listaArchivosDigitalOcean .archivo-item').removeClass('active bg-secondary text-white');
            $item.addClass('active bg-secondary text-white');

            const url = $item.data('url');
            const key = $item.data('key');

            jQuery('#previewImagenModal').attr('src', url).removeClass('d-none');
            jQuery('#previewPlaceholderModal').addClass('d-none');

            jQuery('#btnModalAddSelectedImage, #btnModalEliminarImg')
                .removeClass('d-none')
                .data('selected-url-from-modal', url)
                .data('key', key);
        });

        //Asignar nombre al input de crear subcarpeta dependiendo de la que el cliente vaya abriendo
        jQuery(document).on('click', '#listaArchivosDigitalOcean .toggle-carpeta', function () {
            const divCarpeta = jQuery(this); // El div.toggle-carpeta en el que se hizo clic
            let rutaPartes = []; // Array para almacenar los nombres de las carpetas en orden
            let divsPadres = divCarpeta;

            // Iteramos hacia arriba mientras tengamos un div de carpeta válido y estemos dentro de la lista principal
            while (divsPadres && divsPadres.length > 0 && divsPadres.closest('#listaArchivosDigitalOcean').length > 0) {
                const nombreCarpeta = divsPadres.data('folder-name');
                if (nombreCarpeta) {
                    rutaPartes.unshift(nombreCarpeta.toString().trim());
                }

                // Intentar encontrar el div.toggle-carpeta de la carpeta padre
                const contieneLi = divsPadres.closest('li.list-group-item');
                if (!contieneLi.length) {
                    break;
                }

                const padreUl = contieneLi.parent('ul');

                if (padreUl.hasClass('collapse') && padreUl.attr('id')) {
                    const padreUlCollapseId = padreUl.attr('id');
                    divsPadres = jQuery(`#listaArchivosDigitalOcean .toggle-carpeta[data-bs-target="#${padreUlCollapseId}"]`);

                    if (divsPadres.length === 0) {
                        break;
                    }
                } else {
                    break;
                }
            }

            jQuery('#modalNewSubfolderName').val(rutaPartes.join('/'));
        });

        //Seleccionar imagen ya creada a el input del ajuste de imagen
        jQuery('#btnModalAddSelectedImage').on('click', function () {
            const selectedUrl = jQuery(this).data('selected-url-from-modal');
            const urlInputId = jQuery('#modalImagenesConstructor').data('activeUrlInputId');

            updateInputAndPreview(urlInputId, selectedUrl);
            jQuery('#modalImagenesConstructor').modal('hide');
        });

        // Boton de eliminar imagen, se le debe pasar la key de la imagen a eliminarDocImg
        // Luego se elimina de la galeria esa imagen, se verifica si es la misma del input ya asignado y si es lo elimina tambien,
        jQuery('#btnModalEliminarImg').on('click', async function () {
            const $thisButton = jQuery(this);
            const selectedUrl = $thisButton.data('selected-url-from-modal');
            const key = $thisButton.data('key');
            try {
                await eliminarDocImg(key, false);

                const $galleryItem = jQuery(`#listaArchivosDigitalOcean .archivo-item[data-url="${selectedUrl}"]`);
                if ($galleryItem.length > 0) {
                    $galleryItem.fadeOut(function () {
                        $(this).remove();
                    });
                }

                jQuery('input.entrada-ajuste, input.entrada-ajuste-repeater').each(function () {
                    const $inputField = jQuery(this);
                    if ($inputField.val() === selectedUrl) {
                        const inputId = $inputField.attr('id');
                        if (inputId) {
                            updateInputAndPreview(inputId, '');
                        } else {
                            $inputField.val('');
                        }
                    }
                });

                if (jQuery('#previewImagenModal').attr('src') === selectedUrl) {
                    jQuery('#previewImagenModal').attr('src', '').addClass('d-none');
                    jQuery('#previewPlaceholderModal').removeClass('d-none').text('Selecciona un archivo de la lista para previsualizarlo.');
                    jQuery('#btnModalAddSelectedImage').addClass('d-none').removeData('selected-url-from-modal');
                }

                $thisButton.removeData('selected-url-from-modal').removeData('key').addClass('d-none');
            } catch (error) {
            }
        });

        //Manejo de collapse
        jQuery(document).on('show.bs.collapse hide.bs.collapse', '.list-group .collapse', function (event) {
            const $toggler = jQuery(`[data-bs-target="#${this.id}"]`);
            const $icon = $toggler.find('.bx-chevron-down, .bx-chevron-up');
            if (event.type === 'show') {
                $icon.removeClass('bx-chevron-down').addClass('bx-chevron-up');
            } else {
                $icon.removeClass('bx-chevron-up').addClass('bx-chevron-down');
            }
        });


    });
</script>