@extends('adminlte::page')

@section('title', 'Secciones Home')

@section('content_header')
<h1>Secciones Home</h1>
@stop

@section('content')
    <div class="container">
        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('home-section.update') }}" method="POST" enctype="multipart/form-data">
            @csrf

            {{-- TABS SECTION --}}
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Tabs (Repeater)</h3>
                </div>
                <div class="card-body">
                    <div id="tabs-container">
                        @if($homeSection->tabs)
                            @foreach($homeSection->tabs as $index => $tab)
                                @include('admin.home_section.tab_item', ['index' => $index, 'tab' => $tab])
                            @endforeach
                        @endif
                    </div>
                    <button type="button" class="btn btn-info mt-3" id="add-tab">Agregar Tab</button>
                </div>
            </div>

            {{-- DESTACADO SECTION --}}
            <div class="card card-success">
                <div class="card-header">
                    <h3 class="card-title">Destacado</h3>
                </div>
                <div class="card-body">
                    @include('admin.partials.translatable-input', ['label' => 'Título Destacado', 'name' => 'destacado_title', 'model' => $homeSection])

                    <div class="form-group">
                        <label>Imagen Destacado</label>
                        @if($homeSection->destacado_image)
                            <div class="mb-2">
                                <img src="{{ asset('home_sections/' . $homeSection->destacado_image) }}"
                                    style="max-width: 200px;">
                            </div>
                        @endif
                        <input type="file" name="destacado_image" class="form-control">
                    </div>

                    <div class="form-group">
                        <label>Contenido Destacado</label>
                        <ul class="nav nav-tabs" id="destacado-content-tabs" role="tablist">
                            @foreach(config('app.locales') as $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $loop->first ? 'active' : '' }}"
                                        id="destacado-content-{{ $locale }}-tab" data-toggle="pill"
                                        href="#destacado-content-{{ $locale }}" role="tab"
                                        aria-controls="destacado-content-{{ $locale }}"
                                        aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                        {{ strtoupper($locale) }}
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                        <div class="tab-content" id="destacado-content-tabContent">
                            @foreach(config('app.locales') as $locale)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                    id="destacado-content-{{ $locale }}" role="tabpanel"
                                    aria-labelledby="destacado-content-{{ $locale }}-tab">
                                    <textarea name="destacado_content[{{ $locale }}]"
                                        class="form-control mt-2 summernote">{{ $homeSection->getTranslation('destacado_content', $locale, false) }}</textarea>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
        </form>
    </div>

    {{-- TEMPLATE FOR NEW TAB --}}
    <div id="tab-template" style="display: none;">
        @include('admin.home_section.tab_item', ['index' => 'INDEX_PLACEHOLDER', 'tab' => null])
    </div>

@endsection

@section('css')
<link href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
@stop

@section('js')
<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();
        }

        // Configuración común de Summernote
        var summernoteConfig = {
            height: 200,
            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);
                }
            }
        };

        // Initialize Summernote on existing textareas (exclude template)
        $('.summernote').not('#tab-template .summernote').summernote(summernoteConfig);

        let tabIndex = {{ $homeSection->tabs ? count($homeSection->tabs) : 0 }};

        $('#add-tab').click(function () {
            let template = $('#tab-template').html();
            let newItem = template.replace(/INDEX_PLACEHOLDER/g, tabIndex);
            $('#tabs-container').append(newItem);

            // Initialize Summernote on new textareas
            $('#tabs-container .tab-item').last().find('.summernote').summernote(summernoteConfig);

            tabIndex++;
        });

        $(document).on('click', '.remove-tab', function () {
            if (confirm('¿Estás seguro de eliminar este tab?')) {
                $(this).closest('.tab-item').remove();
            }
        });
    });
</script>
@stop