@extends('adminlte::page')

@section('title', 'Formulario')

@section('content_header')
<h1>Administrador Study Abroad</h1>
@stop
@section('content')
    <div class="container">
        <h1>Crear Programa</h1>
        <form action="{{ route('project.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @include('admin.partials.translatable-input', ['label' => 'Título', 'name' => 'title'])

            <div class="form-group">
                <label>Foto Mobile</label>
                <input type="file" name="mobile_image" class="form-control" required>
            </div>
            <div class="form-group">
                <label>Foto Desktop</label>
                <input type="file" name="desktop_image" class="form-control" required>
            </div>

            @include('admin.partials.translatable-input', ['label' => 'Región', 'name' => 'region'])
            @include('admin.partials.translatable-input', ['label' => 'País', 'name' => 'country'])

            <div class="form-group">
                <label>Costo Estimado</label>
                <input type="text" name="estimated_cost" class="form-control">
            </div>

            @include('admin.partials.translatable-input', ['label' => 'Descripción', 'name' => 'description', 'type' => 'textarea'])
            {{-- <div class="form-group">--}}
                {{-- <label>Categoría</label>--}}
                {{-- <select name="category" class="form-control select2" required>--}}
                    {{-- <option value="Noticias">Noticias</option>--}}
                    {{-- <option value="Formación">Formación</option>--}}
                    {{-- <option value="Investigaciones">Investigaciones</option>--}}
                    {{-- <option value="Destacados">Destacados</option>--}}
                    {{-- <option value="Recursos Audiovisuales">Recursos Audiovisuales</option>--}}
                    {{-- <option value="Sostenibilidad">Sostenibilidad</option>--}}
                    {{-- </select>--}}
                {{-- </div>--}}
            <button type="submit" class="btn btn-success">Crear</button>
        </form>
    </div>

@endsection

@section('css')
<style>
    /* Opcional: estilo personalizado */
    .custom-input {
        width: 150px;
        height: 30px;
    }

    /* Ocultar SOLO los popovers flotantes de Summernote, NO la toolbar del editor */
    body>.note-popover,
    body>.note-air-popover {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        z-index: -1 !important;
    }

    /* Asegurar que la toolbar dentro del editor siga visible */
    .note-editor .note-toolbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
</style>
@stop

@section('js')
<script>
    // Cargar CSS de Summernote dinámicamente solo para el contenido
    if (!document.getElementById('summernote-css')) {
        var link = document.createElement('link');
        link.id = 'summernote-css';
        link.rel = 'stylesheet';
        link.href = '//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css';
        document.head.appendChild(link);
    }
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
<script>
    $(document).ready(function () {
        // 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 () {
                    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;
                    }

                    var fullHTML = $editable.html();
                    var $temp = $('<div>').html(fullHTML);

                    $temp.find('*').each(function () {
                        var $el = $(this);
                        var tagName = this.tagName.toLowerCase();

                        if (tagName === 'a') {
                            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') {
                            var src = $el.attr('src');
                            var alt = $el.attr('alt');
                            $el.removeAttr('style id dir class');
                            if (src) $el.attr('src', src);
                            if (alt) $el.attr('alt', alt);
                        } else {
                            $el.removeAttr('style class id dir');
                        }
                    });

                    var htmlContent = $temp.html();
                    htmlContent = htmlContent.replace(/<span[^>]*>/gi, '');
                    htmlContent = htmlContent.replace(/<\/span>/gi, '');
                    $temp.html(htmlContent);

                    $temp.find('*').filter(function () {
                        return $.trim($(this).text()) === '' && $(this).children().length === 0;
                    }).remove();

                    context.invoke('code', $temp.html());
                }
            });
            return button.render();
        }

        $('.summer').summernote({
            height: 300,
            popover: {
                image: [],
                link: [],
                air: [],
                table: []
            },
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['fontsize', ['fontsize']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['height', ['height']],
                ['insert', ['link', 'picture', 'video', 'table']],
                ['view', ['codeview']],
                ['mybutton', ['cleanFormat']]
            ],
            buttons: {
                cleanFormat: CleanFormatButton
            },
            callbacks: {
                onPaste: function (e) {
                    e.preventDefault();
                    var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('text/plain');
                    document.execCommand('insertText', false, bufferText);
                }
            }
        });
    });
</script>
@stop