@extends('layouts.app')

@section('title', 'Crear Plantilla')

@section('styles')
<style>
    .variables-panel {
        max-height: 600px;
        overflow-y: auto;
        border-left: 1px solid #dee2e6;
        padding-left: 15px;
    }
    .variable-item {
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #f8f9fa;
        margin-bottom: 5px;
        font-family: monospace;
        font-size: 0.9em;
        transition: all 0.2s;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .variable-item:hover {
        background-color: #e9ecef;
        transform: translateX(2px);
    }
    .variable-type {
        font-size: 0.7em;
        padding: 2px 5px;
        border-radius: 3px;
        background: #e2e3e5;
    }
    .snippet-btn {
        margin-bottom: 5px;
    }
    #editor-container {
        display: flex;
        height: 600px;
    }
    .editor-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    textarea.code-editor {
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 14px;
        background: #2d2d2d;
        color: #f8f8f2;
        border: none;
        resize: none;
        flex: 1;
    }
</style>
@endsection

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm">
        <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0 font-weight-bold text-primary">Diseñador de Plantillas</h5>
            <div class="btn-group">
                <a href="{{ route('plantillas.index') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-arrow-left mr-1"></i> Volver
                </a>
                <button type="submit" form="template-form" class="btn btn-sm btn-primary">
                    <i class="fas fa-save mr-1"></i> Guardar
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <form id="template-form" action="{{ route('plantillas.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <!-- Settings Bar -->
                <div class="bg-light p-3 border-bottom">
                    <div class="row">
                        <div class="col-md-3">
                            <label class="small font-weight-bold">Nombre</label>
                            <input type="text" name="nombre" id="nombre" class="form-control form-control-sm" required placeholder="Ej: Factura Moderna">
                        </div>
                        <div class="col-md-3">
                            <label class="small font-weight-bold">Slug (Auto)</label>
                            <input type="text" name="slug" id="slug" class="form-control form-control-sm" required readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="small font-weight-bold">Tipo de Documento</label>
                            <select name="tipo" id="tipo" class="form-control form-control-sm" required>
                                <option value="">-- Seleccionar --</option>
                                <option value="factura">Factura de Venta</option>
                                <option value="cotizacion">Presupuesto/Cotización</option>
                                <option value="recibo">Recibo de Cobro</option>
                                <option value="nota">Nota de Entrega</option>
                                <option value="pos">Ticket POS (Térmico)</option>
                                <option value="nomina">Recibo de Nómina</option>
                                <option value="reporte">Reporte General</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <div class="custom-control custom-switch mr-3">
                                <input type="checkbox" class="custom-control-input" id="activo" name="activo" checked>
                                <label class="custom-control-label small" for="activo">Activa</label>
                            </div>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="predeterminada" name="predeterminada">
                                <label class="custom-control-label small" for="predeterminada">Default</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Editor Area -->
                <div class="row no-gutters">
                    <!-- Toolbox & Editor -->
                    <div class="col-md-9 border-right">
                        <!-- Toolbar -->
                        <div class="bg-white p-2 border-bottom d-flex align-items-center">
                            <span class="small text-muted mr-2 font-weight-bold">INSERTAR:</span>
                            <button type="button" class="btn btn-xs btn-outline-dark mr-1 snippet-btn" onclick="insertSnippet('2col')"><i class="fas fa-columns"></i> 2 Col</button>
                            <button type="button" class="btn btn-xs btn-outline-dark mr-1 snippet-btn" onclick="insertSnippet('3col')"><i class="fas fa-columns"></i> 3 Col</button>
                            <button type="button" class="btn btn-xs btn-outline-dark mr-1 snippet-btn" onclick="insertSnippet('table')"><i class="fas fa-table"></i> Tabla</button>
                            <button type="button" class="btn btn-xs btn-outline-dark mr-1 snippet-btn" onclick="insertSnippet('hr')"><i class="fas fa-minus"></i> Línea</button>
                            <div class="border-left mx-2 h-100"></div>
                        <!-- Editor Area -->
                        <div class="code-area border-bottom" style="height: 600px;">
                            <textarea name="contenido_html" id="contenido_html" class="w-100 h-100" placeholder="El editor visual cargará aquí..."></textarea>
                        </div>
                        
                        <!-- Advanced CSS Configuration -->
                        <div class="p-2 bg-light border-top">
                             <button class="btn btn-sm btn-link collapsed" type="button" data-toggle="collapse" data-target="#cssConfig" aria-expanded="false" aria-controls="cssConfig">
                                <i class="fas fa-code"></i> Configuración CSS Avanzada
                            </button>
                            <div class="collapse mt-2" id="cssConfig">
                                <textarea name="contenido_css" id="contenido_css" class="form-control form-control-sm" rows="10" placeholder="/* Estilos CSS personalizados */"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Variables Panel -->
                    <div class="col-md-3 bg-light">
                        <div class="p-2 border-bottom bg-white">
                            <h6 class="mb-0 font-weight-bold text-dark"><i class="fas fa-database mr-1"></i> Variables</h6>
                            <small class="text-muted">Haga clic para insertar</small>
                        </div>
                        <div class="p-2">
                            <input type="text" id="filter-vars" class="form-control form-control-sm mb-2" placeholder="Filtrar variables...">
                        </div>
                        <div id="variables-list" class="variables-panel p-2">
                            <div class="text-center text-muted mt-5">
                                <i class="fas fa-arrow-left mb-2"></i><br>
                                Seleccione un tipo de documento para ver las variables disponibles.
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        tinymce.init({
            selector: '#contenido_html',
            height: 600,
            menubar: true,
            plugins: 'preview searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help charmap quickbars emoticons',
            toolbar: 'undo redo | fontfamily fontsize blocks | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor | table | fullscreen preview code',
            toolbar_sticky: true,
            autosave_ask_before_unload: true,
            automatic_uploads: true,
            image_advtab: true,
            content_style: 'body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:14px; line-height: 1.6; }',
            setup: function(editor) {
                // Habilitar Drag & Drop nativo
                editor.on('init', function() {
                    console.log('TinyMCE Initialized');
                });
                
                // Permitir soltar elementos en el editor
                editor.on('drop', function(e) {
                    var content = e.dataTransfer.getData('text/plain');
                    if (content.includes('{' + '{')) {
                         e.preventDefault();
                         editor.insertContent(content);
                    }
                });
            }
        });
    });

    // Auto-Slug
    $('#nombre').on('input', function() {
        let slug = $(this).val().toLowerCase()
            .replace(/[^a-z0-9\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/-+/g, '-');
        $('#slug').val(slug);
    });

    // Load Variables on Type Change
    $('#tipo').on('change', function() {
         const type = $(this).val();
         loadVariables(type);
    });

    function loadVariables(type) {
        const list = $('#variables-list');
        
        if(!type) {
            list.html('<div class="text-center text-muted mt-5">Seleccione un tipo</div>');
            return;
        }

        list.html('<div class="text-center mt-5"><i class="fas fa-spinner fa-spin"></i> Cargando...</div>');

        $.ajax({
            url: "{{ route('plantillas.get-variables') }}",
            data: { type: type },
            dataType: 'json',
            success: function(data) {
                if (!data || Object.keys(data).length === 0) {
                     list.html('<div class="alert alert-warning">No se encontraron variables</div>');
                } else {
                    renderVariables(data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                 console.error("Error loading variables:", textStatus, errorThrown);
                 list.html('<div class="alert alert-danger p-2 small">Error de conexión. Intente recargar.</div>');
            }
        });
    }

    function renderVariables(groups) {
        let html = '';
        
        for (const [groupName, vars] of Object.entries(groups)) {
            html += `<h6 class="font-weight-bold mt-3 mb-2 text-primary px-1 border-bottom pb-1">${groupName}</h6>`;
            
            if (Array.isArray(vars)) {
                vars.forEach(v => {
                    const varCode = '{{' + v.name + '}}';
                    // Draggable attribute added
                    html += `
                        <div class="variable-item p-2 mb-1 bg-white border rounded shadow-sm d-flex justify-content-between align-items-center" 
                             style="cursor: grab;" 
                             draggable="true" 
                             ondragstart="event.dataTransfer.setData('text/plain', '${varCode}')"
                             onclick="insertAtCursor('${varCode}')" 
                             title="${v.label}">
                            <div class="text-truncate mr-2">
                                <i class="fas fa-tag text-muted mr-1 small"></i> 
                                <strong>${v.label}</strong>
                            </div>
                            <span class="badge badge-light border">${v.type}</span>
                        </div>
                    `;
                });
            }
        }
        
        $('#variables-list').html(html);
    }
    
    // Insert Function
    window.insertAtCursor = function(myValue) {
        if (typeof tinymce !== 'undefined' && tinymce.get('contenido_html')) {
            tinymce.get('contenido_html').insertContent(myValue);
        } else {
            // Fallback
            const myField = document.getElementById('contenido_html');
            myField.value += myValue;
        }
    };

    // Filter Variables
    $('#filter-vars').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $("#variables-list .variable-item").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

    // Snippets
    window.insertSnippet = function(type) {
        let html = '';
        switch(type) {
            case '2col':
                html = `<div style="display: flex; gap: 20px;"><div style="flex: 1;">Columna 1</div><div style="flex: 1;">Columna 2</div></div><p>&nbsp;</p>`;
                break;
            case '3col':
                html = `<table width="100%" border="0">\n  <tr>\n    <td width="33%">Col 1</td>\n    <td width="33%">Col 2</td>\n    <td width="33%">Col 3</td>\n  </tr>\n</table>`;
                break;
            case 'table':
                html = `<table width="100%" style="border-collapse:collapse; border:1px solid #ddd;">\n  <thead>\n    <tr style="background:#eee;">\n      <th style="padding:5px;">Encabezado</th>\n      <th style="padding:5px;">Encabezado</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <td style="padding:5px;">Dato</td>\n      <td style="padding:5px;">Dato</td>\n    </tr>\n  </tbody>\n</table>`;
                break;
            case 'hr':
                html = `<hr style="border: 0; border-top: 1px solid #ccc; margin: 20px 0;">`;
                break;
        }
        insertAtCursor(html);
    };
</script>
@endsection