@extends('adminlte::page')

@section('title', 'Formulario')
@section('content_header')
{{--
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>--}}
{{--
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">--}}
<script src="{{ asset('assets/js/gallery-editor.js') }}"></script>
{{-- @trixassets--}}
<h1>Administrador Study Abroad</h1>
@stop
@section('content')
    <div class="container">
        <h1>Editar Página</h1>
        <form id="form-page" action="{{ route('page.update', $page) }}" method="POST" enctype="multipart/form-data">
            @method('PUT')
            @csrf
            @include('admin.partials.translatable-input', ['label' => 'Título', 'name' => 'title', 'model' => $page])

            <div class="form-group">
                <label>Foto Mobile</label>
                <input type="file" name="mobile_image" class="form-control">
                @if($page->mobile_image)
                    <a href="{{ URL::to('/') }}/pages/mobile/{{ $page->mobile_image }}" target="_blank">Ver Foto Cargada</a>
                @endif
            </div>
            <div class="form-group">
                <label>Foto Desktop</label>
                <input type="file" name="desktop_image" class="form-control">
                @if($page->desktop_image)
                    <a href="{{ URL::to('/') }}/pages/desktop/{{ $page->desktop_image }}" target="_blank">Ver Foto Cargada</a>
                @endif
            </div>

            <div class="form-group">
                <label>Descripción</label>
                <ul class="nav nav-tabs" id="description-tabs" role="tablist">
                    @foreach(config('app.locales') as $locale)
                        <li class="nav-item">
                            <a class="nav-link {{ $loop->first ? 'active' : '' }}" id="description-{{ $locale }}-tab"
                                data-toggle="pill" href="#description-{{ $locale }}" role="tab"
                                aria-controls="description-{{ $locale }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                {{ strtoupper($locale) }}
                            </a>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content" id="description-tabContent">
                    @foreach(config('app.locales') as $locale)
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="description-{{ $locale }}"
                            role="tabpanel" aria-labelledby="description-{{ $locale }}-tab">
                            <textarea class="summer" name="description[{{ $locale }}]" style="" cols=""
                                rows="">{{ $page->getTranslation('description', $locale) }}</textarea>
                        </div>
                    @endforeach
                </div>
            </div>
            <!-- <div class="form-group">
                    <label>Proyecto</label>
                    <select name="project_id" class="form-control select2">
                        <option value="">Seleccionar</option>
                        @foreach($projects as $p)
                            <option value="{{ $p->id }}" @if($p->id == $page->project_id) selected @endif>{{ $p->title }}</option>
                        @endforeach
                    </select>
                </div> -->
            <!-- <div class="form-group">
                    <label>Galería</label>
                    <select name="album_id" class="form-control select2">
                        <option value="">Seleccionar</option>
                        @foreach($albums as $album)
                            <option value="{{ $album->id }}" @if($album->id == $page->album_id) selected @endif>{{ $album->title }}
                            </option>
                        @endforeach
                    </select>
                </div> -->
            <button type="submit" class="btn btn-primary">Actualizar</button>
        </form>
    </div>

    <!-- Modal para Galería de Imágenes -->
    <!-- <div class="modal fade" id="modal-gallery" tabindex="-1" role="dialog" aria-labelledby="modalGalleryLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalGalleryLabel">Insertar Galería de Imágenes</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="form-gallery" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="editing-gallery" value="false">

                            <div id="existing-images-section" style="display: none;">
                                <h6>Imágenes actuales:</h6>
                                <div id="existing-images-container" class="d-flex flex-wrap mb-3"></div>
                                <hr>
                            </div>

                            <div class="form-group">
                                <label id="gallery-images-label">Seleccionar Imágenes (múltiples)</label>
                                <input type="file" name="gallery_images[]" id="gallery-images-input" class="form-control"
                                    multiple accept="image/*">
                                <small class="form-text text-muted" id="gallery-help-text">Puedes seleccionar múltiples imágenes
                                    a la vez</small>
                            </div>
                            <div class="form-group">
                                <label>Tamaño de las imágenes en la galería</label>
                                <select name="gallery_size" id="gallery-size-select" class="form-control">
                                    <option value="gallery-img-small">Pequeño (200px)</option>
                                    <option value="gallery-img-medium" selected>Mediano (300px)</option>
                                    <option value="gallery-img-large">Grande (400px)</option>
                                    <option value="gallery-img-full">Ancho completo</option>
                                </select>
                            </div>
                            <div id="gallery-preview" class="mt-3" style="display: none;">
                                <h6>Nuevas imágenes a agregar:</h6>
                                <div id="gallery-preview-container" class="d-flex flex-wrap"></div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="delete-gallery-btn"
                            style="display: none; margin-right: auto;">Eliminar Galería</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="insert-gallery-btn">Insertar Galería</button>
                    </div>
                </div>
            </div>
        </div> -->

@endsection
@section('css')
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<style>
    /* Opcional: estilo personalizado */
    .custom-input {
        width: 150px;
        height: 30px;
    }

    /* Estilos para la galería en el contenido */
    .editor-gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0;

        @media (min-width: 480px) {
            flex-wrap: nowrap;
        }

        img {
            max-width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 4px;
        }
    }

    .gallery-img-small {
        width: 200px;
        height: 200px;
        background-size: cover;
        background-position: center center;
        border-radius: 4px;
    }

    .gallery-img-medium {
        width: 300px;
        height: 300px;
        background-size: cover;
        background-position: center center;
        border-radius: 4px;
    }

    .gallery-img-large {
        width: 400px;
        height: 400px;
        background-size: cover;
        background-position: center center;
        border-radius: 4px;
    }

    .gallery-img-full {
        width: 100%;
        height: 100%;
        max-width: 100%;
        background-size: cover;
        background-position: center center;
        border-radius: 5px;
    }

    #gallery-preview-container img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin: 5px;
        border: 2px solid #ddd;
        border-radius: 4px;
    }

    #existing-images-container img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        margin: 5px;
        border: 2px solid #ddd;
        border-radius: 4px;
    }

    /* Indicador visual de galería editable */
    .note-editable .editor-gallery {
        cursor: pointer;
        position: relative;
    }

    .note-editable .editor-gallery:hover::after {
        content: '✏️ Doble clic para editar';
        position: absolute;
        top: 5px;
        right: 5px;
        background: rgba(0, 123, 255, 0.9);
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 12px;
        z-index: 10;
    }
</style>
@stop

@section('js')
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
<script>



    function uploadImage() {


        var spinner = $('.spinner');
        spinner.css({ 'display': 'block' });

        var form = $('#form-image')[0];
        var formData = new FormData(form);
        var settings = {
            "async": true,
            "crossDomain": true,
            url: "{{URL::to('/')}}/admin/image-upload",
            "method": "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            "processData": false,
            "contentType": false,
            "mimeType": "multipart/form-data",
            "data": formData
        };


        $.ajax(settings).success(function (response) {
            var baseurl = document.location.origin;

            var spinner = $('.spinner');
            spinner.css({ 'display': 'none' });
            var data = JSON.parse(response);
            $('.form-image-container').css({ 'display': 'block' });
            $('.image-preview').attr('src', baseurl + '/uploads/images/' + data.file.file);
            $('input[name="image_path"]').val('uploads/images/' + data.file.file);
            $('input[name="image_id"]').val(data.atachment_id);
            $('.image-preview-container').css({ 'display': 'block' });
            $('.js-hide-modal').click();
        }).error(function () {
            var spinner = $('.spinner');
            spinner.css({ 'display': 'none' });
            alert('error');
        });
    }

    function uploadPdf() {


        // var spinner = $('.spinner');
        // context_element
        var form = $('#form-pdf')[0];
        var formData = new FormData(form);
        var settings = {
            "async": true,
            "crossDomain": true,
            url: "{{URL::to('/')}}/admin/pdf-upload",
            "method": "POST",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            "processData": false,
            "contentType": false,
            "mimeType": "multipart/form-data",
            "data": formData
        };


        $.ajax(settings).success(function (response) {
            var baseurl = document.location.origin;
            var data = JSON.parse(response);
            $('.summer').summernote('createLink', {
                text: "Descargar documento PDF",
                url: data.path + data.filename,
                isNewWindow: true
            });
            $('.js-hide-modal').click();
        }).error(function () {
            var spinner = $('.spinner');
            spinner.css({ 'display': 'none' });
            alert('error');
        });
    }



    $(document).ready(function () {


        // $(".tabs").css("visibility","visible");
        //
        //
        // $(".SendForm").on("click",function(){
        //
        //     $("#formPages").submit();
        //
        // });





        $('form#form-image').on("submit", function (e) {

            e.preventDefault();

            uploadImage();

        });

        $('form#form-pdf').on("submit", function (e) {

            e.preventDefault();

            uploadPdf();

        });

        // $('.summer').summernote();




        $('.delete-image').click(function () {

            $('input[name="image_path"]').val('');
            $('input[name="image_id"]').val('');
            $('.form-image-container').css({ 'display': ' none' });

        });


        var LinkPdf = function (context) {
            var ui = $.summernote.ui;
            // create button
            var button = ui.button({
                contents: '<div  class="lbienal" data-toggle="modal" data-target="#modal-pdf" >Link PDF</div>',
                click: function () {
                    // if(context_element){
                    //    data_temp = context_element.invoke('code');
                    //    data_temp = data_temp.replace(/<(codetemp)([^>]*?)>(.*?)<\/\1>/ig, "");
                    //    context_element.invoke('code',data_temp);
                    //}
                    // context_es = Math.floor(Math.random() * 100000) + 1  ;
                    // context_element = context;
                    // context.invoke('editor.pasteHTML', "<codetemp>"+context_es+"</codetemp>");
                    // context.invoke('editor.insertText', 'hello');
                }
            });
            return button.render();   // return button as jquery object
        }

        // Botón personalizado para limpiar formato
        var CleanFormatButton = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-eraser"></i> Limpiar Formato',
                tooltip: 'Eliminar estilos inline y atributos innecesarios',
                click: function () {
                    // Guardar el contenido actual
                    var $editable = context.layoutInfo.editable;
                    var range = context.invoke('editor.createRange');

                    if (!range || range.toString().length === 0) {
                        alert('Por favor selecciona el texto que deseas limpiar');
                        return;
                    }

                    // Obtener todo el HTML del editor
                    var fullHTML = $editable.html();

                    // Crear un div temporal para manipular el HTML
                    var $temp = $('<div>').html(fullHTML);

                    // Eliminar todos los atributos style, id, class, dir, etc.
                    $temp.find('*').each(function () {
                        var $el = $(this);
                        var tagName = this.tagName.toLowerCase();

                        // Preservar solo atributos esenciales para ciertos elementos
                        if (tagName === 'a') {
                            // Para enlaces, mantener solo href y target
                            var href = $el.attr('href');
                            var target = $el.attr('target');
                            $el.removeAttr('style class id dir');
                            if (href) $el.attr('href', href);
                            if (target) $el.attr('target', target);
                        } else if (tagName === 'img') {
                            // Para imágenes, mantener src, alt, class (para galerías)
                            var src = $el.attr('src');
                            var alt = $el.attr('alt');
                            var imgClass = $el.attr('class');
                            $el.removeAttr('style id dir');
                            if (src) $el.attr('src', src);
                            if (alt) $el.attr('alt', alt);
                            if (imgClass && imgClass.indexOf('gallery-img-') !== -1) {
                                $el.attr('class', imgClass);
                            }
                        } else {
                            // Para otros elementos, eliminar todos los atributos
                            $el.removeAttr('style class id dir');
                        }
                    });

                    // Obtener el HTML como string
                    var htmlContent = $temp.html();

                    // Eliminar TODOS los spans usando regex
                    // Esto elimina las etiquetas <span...> y </span> pero mantiene el contenido
                    htmlContent = htmlContent.replace(/<span[^>]*>/gi, '');
                    htmlContent = htmlContent.replace(/<\/span>/gi, '');

                    // Actualizar el contenido temporal
                    $temp.html(htmlContent);

                    // Eliminar elementos vacíos
                    $temp.find('*').filter(function () {
                        return $.trim($(this).text()) === '' && $(this).children().length === 0;
                    }).remove();

                    // Actualizar el contenido del editor
                    context.invoke('code', $temp.html());
                }
            });
            return button.render();
        }

        // Botón personalizado para galería
        var GalleryButton = function (context) {
            var ui = $.summernote.ui;
            var button = ui.button({
                contents: '<i class="fa fa-images"></i> Galería',
                tooltip: 'Insertar Galería de Imágenes',
                click: function () {
                    $('#modal-gallery').modal('show');
                }
            });
            return button.render();
        }

        $('.summer').summernote({
            height: 300,
            popover: {
                image: [],
                link: [],
                air: []
            },
            toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['codeview'],
                ["insert", ["table", "link", "picture", "video"]],
                ['mybutton', ['pdfLink', 'cleanFormat', 'galleryButton']]
            ],
            buttons: {
                pdfLink: LinkPdf,
                cleanFormat: CleanFormatButton,
                galleryButton: GalleryButton
            },

            callbacks: {
                onImageUpload: function (files) {

                    var data = new FormData();
                    data.append("file", files[0]);
                    $.ajax({
                        data: data,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        },
                        type: "POST",
                        url: "{{ URL::to('/') }}/admin/upload", //The url uploaded by the image returns the path after the image is uploaded, http format
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: "json",
                        success: function (data) {//data is the returned hash, key, etc., key is the defined file name
                            console.log(data.path + '\\' + data.filename);
                            //$('.summer_new').summernote('insertImage', data.path+'\\'+data.filename,'img');
                            $('.summer').summernote('insertImage', data.path + '\\' + data.filename, function ($image) {
                                $image.css('width', $image.width());
                                $image.attr('data-filename', 'retriever');
                            });
                        },
                        error: function () {
                            // Alert ("Upload failed");
                        }
                    });
                },
                onPaste: function (e) {
                    // Prevenir el pegado por defecto
                    e.preventDefault();

                    // Obtener el texto del portapapeles
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text/plain');

                    // Insertar el texto sin formato (sin estilos inline)
                    document.execCommand('insertText', false, bufferText);
                }
            }
        });

        // Preview de imágenes seleccionadas para la galería
        $('#gallery-images-input').on('change', function (e) {
            var files = e.target.files;
            var previewContainer = $('#gallery-preview-container');
            previewContainer.empty();

            if (files.length > 0) {
                $('#gallery-preview').show();

                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        var img = $('<img>').attr('src', e.target.result);
                        previewContainer.append(img);
                    }

                    reader.readAsDataURL(file);
                }
            } else {
                $('#gallery-preview').hide();
            }
        });

        // Evento para insertar la galería
        $('#insert-gallery-btn').on('click', function () {
            var isEditing = $('#editing-gallery').val() === 'true';
            var files = $('#gallery-images-input')[0].files;

            // Si estamos editando, permitir sin archivos nuevos
            if (!isEditing && files.length === 0) {
                alert('Por favor selecciona al menos una imagen');
                return;
            }

            uploadGallery();
        });

        // Evento para eliminar galería
        $('#delete-gallery-btn').on('click', function () {
            deleteGallery();
        });

        // Hacer galerías editables con doble clic
        makeGalleriesEditable();

    })

</script>

@stop