@extends('layouts.app')

@section('title', 'Editor de Reporte - ' . $printConfiguration->report_name)

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
    .editor-container {
        display: flex;
        height: calc(100vh - 200px);
        gap: 20px;
    }
    
    .sidebar {
        width: 300px;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        overflow-y: auto;
    }
    
    .editor-main {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .toolbar {
        background: #fff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .canvas-container {
        flex: 1;
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    
    .report-canvas {
        min-height: 800px;
        background: white;
        border: 2px dashed #dee2e6;
        padding: 40px;
        position: relative;
    }
    
    .report-canvas.drag-over {
        border-color: #007bff;
        background: rgba(0,123,255,0.05);
    }
    
    .element-item {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 10px;
        cursor: move;
        transition: all 0.3s ease;
    }
    
    .element-item:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0,123,255,0.15);
    }
    
    .element-item i {
        margin-right: 8px;
        color: #6c757d;
    }
    
    .canvas-element {
        margin-bottom: 20px;
        position: relative;
        border: 1px solid transparent;
        padding: 10px;
        border-radius: 4px;
    }
    
    .canvas-element:hover {
        border-color: #007bff;
        background: rgba(0,123,255,0.05);
    }
    
    .canvas-element.selected {
        border-color: #007bff;
        background: rgba(0,123,255,0.1);
    }
    
    .element-controls {
        position: absolute;
        top: -10px;
        right: -10px;
        background: #007bff;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: none;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
        cursor: pointer;
    }
    
    .canvas-element:hover .element-controls {
        display: flex;
    }
    
    .element-controls:hover {
        background: #0056b3;
    }
    
    .preview-mode {
        border: 2px solid #28a745 !important;
    }
    
    .preview-mode .element-controls {
        display: none !important;
    }
    
    .field-selector {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .field-group {
        margin-bottom: 15px;
    }
    
    .field-group h6 {
        color: #495057;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 600;
    }
    
    .field-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 8px 12px;
        margin-bottom: 5px;
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s ease;
    }
    
    .field-item:hover {
        background: #e9ecef;
        border-color: #007bff;
    }
    
    .field-item i {
        margin-right: 6px;
        color: #6c757d;
    }
    
    .element-properties {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 15px;
        margin-top: 20px;
    }
    
    .property-group {
        margin-bottom: 15px;
    }
    
    .property-group label {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
        display: block;
    }
    
    .property-group input,
    .property-group select,
    .property-group textarea {
        width: 100%;
        padding: 6px 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 13px;
    }
    
    .color-picker {
        width: 100%;
        height: 35px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .btn-group-sm .btn {
        padding: 4px 8px;
        font-size: 12px;
    }
    
    .preview-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }
    
    .print-preview {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 30px;
        min-height: 400px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .loading-message {
        text-align: center;
        padding: 20px;
        color: #6c757d;
    }
    
    .error-message {
        background: #f8d7da;
        color: #721c24;
        padding: 10px;
        border-radius: 4px;
        margin: 10px 0;
        border: 1px solid #f5c6cb;
    }
    
    @media print {
        .sidebar, .toolbar, .element-controls {
            display: none !important;
        }
        .report-canvas {
            border: none !important;
            padding: 0 !important;
        }
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-edit me-2"></i>Editor de Reporte - {{ $printConfiguration->report_name }}
                    </h1>
                    <p class="text-muted mb-0">Diseña y personaliza completamente tu reporte de impresión</p>
                </div>
                <div>
                    <button id="previewBtn" class="btn btn-info me-2">
                        <i class="fas fa-eye me-2"></i>Vista Previa
                    </button>
                    <button id="saveBtn" class="btn btn-success me-2">
                        <i class="fas fa-save me-2"></i>Guardar Diseño
                    </button>
                    <a href="{{ route('admin.print-config.show', $printConfiguration) }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Editor Container -->
    <div class="editor-container">
        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Elementos Básicos -->
            <div class="field-selector">
                <h5><i class="fas fa-puzzle-piece me-2"></i>Elementos Básicos</h5>
                
                <div class="field-group">
                    <h6><i class="fas fa-heading me-2"></i>Títulos</h6>
                    <div class="field-item" data-type="title" data-element="title">
                        <i class="fas fa-heading"></i>Título Principal
                    </div>
                    <div class="field-item" data-type="subtitle" data-element="subtitle">
                        <i class="fas fa-heading"></i>Subtítulo
                    </div>
                </div>
                
                <div class="field-group">
                    <h6><i class="fas fa-table me-2"></i>Tablas</h6>
                    <div class="field-item" data-type="table" data-element="data-table">
                        <i class="fas fa-table"></i>Tabla de Datos
                    </div>
                    <div class="field-item" data-type="summary-table" data-element="summary-table">
                        <i class="fas fa-calculator"></i>Tabla Resumen
                    </div>
                </div>
                
                <div class="field-group">
                    <h6><i class="fas fa-info-circle me-2"></i>Información</h6>
                    <div class="field-item" data-type="company-info" data-element="company-info">
                        <i class="fas fa-building"></i>Información Empresa
                    </div>
                    <div class="field-item" data-type="report-info" data-element="report-info">
                        <i class="fas fa-file-alt"></i>Info del Reporte
                    </div>
                    <div class="field-item" data-type="date-time" data-element="date-time">
                        <i class="fas fa-calendar"></i>Fecha y Hora
                    </div>
                </div>
                
                <div class="field-group">
                    <h6><i class="fas fa-chart-bar me-2"></i>Estadísticas</h6>
                    <div class="field-item" data-type="statistics" data-element="statistics">
                        <i class="fas fa-chart-bar"></i>Estadísticas
                    </div>
                    <div class="field-item" data-type="totals" data-element="totals">
                        <i class="fas fa-calculator"></i>Totales
                    </div>
                </div>
                
                <div class="field-group">
                    <h6><i class="fas fa-text-width me-2"></i>Texto</h6>
                    <div class="field-item" data-type="text" data-element="text">
                        <i class="fas fa-paragraph"></i>Texto Libre
                    </div>
                    <div class="field-item" data-type="separator" data-element="separator">
                        <i class="fas fa-minus"></i>Separador
                    </div>
                </div>
            </div>

            <!-- Campos Disponibles -->
            <div class="field-selector">
                <h5><i class="fas fa-list me-2"></i>Campos Disponibles</h5>
                <div id="availableFields">
                    <!-- Los campos se cargarán dinámicamente según el tipo de reporte -->
                </div>
            </div>

            <!-- Propiedades del Elemento -->
            <div class="element-properties" id="elementProperties" style="display: none;">
                <h5><i class="fas fa-cog me-2"></i>Propiedades</h5>
                <div id="propertiesContent">
                    <!-- Las propiedades se cargarán dinámicamente -->
                </div>
            </div>
        </div>

        <!-- Editor Principal -->
        <div class="editor-main">
            <!-- Toolbar -->
            <div class="toolbar">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary" id="zoomOut">
                                <i class="fas fa-search-minus"></i>
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="zoomReset">
                                <i class="fas fa-search"></i> 100%
                            </button>
                            <button type="button" class="btn btn-outline-primary" id="zoomIn">
                                <i class="fas fa-search-plus"></i>
                            </button>
                        </div>
                        <div class="btn-group btn-group-sm ms-3" role="group">
                            <button type="button" class="btn btn-outline-secondary" id="alignLeft">
                                <i class="fas fa-align-left"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="alignCenter">
                                <i class="fas fa-align-center"></i>
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="alignRight">
                                <i class="fas fa-align-right"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-success" id="previewMode">
                                <i class="fas fa-eye"></i> Vista Previa
                            </button>
                            <button type="button" class="btn btn-outline-info" id="printPreview">
                                <i class="fas fa-print"></i> Imprimir
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Canvas del Reporte -->
            <div class="canvas-container">
                <div class="report-canvas" id="reportCanvas">
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-mouse-pointer fa-3x mb-3"></i>
                        <h4>Arrastra elementos aquí para diseñar tu reporte</h4>
                        <p>Selecciona elementos del panel izquierdo y arrástralos al área de diseño</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Vista Previa -->
    <div class="modal fade" id="previewModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-eye me-2"></i>Vista Previa del Reporte
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="preview-container">
                        <div class="print-preview" id="printPreviewContent">
                            <!-- El contenido de la vista previa se generará aquí -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="printFromPreview">
                        <i class="fas fa-print me-2"></i>Imprimir
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let currentElement = null;
    let elementCounter = 0;
    let isPreviewMode = false;
    
    // Configuración del reporte
    const reportConfig = @json($printConfiguration);
    
    // Mostrar mensaje de carga
    console.log('Inicializando editor de reportes...');
    
    // Inicializar drag & drop básico
    initializeDragDrop();
    
    // Cargar campos disponibles
    loadAvailableFields();
    
    // Funciones principales
    function initializeDragDrop() {
        const canvas = document.getElementById('reportCanvas');
        
        // Hacer elementos arrastrables desde el sidebar
        document.querySelectorAll('.field-item').forEach(item => {
            item.draggable = true;
            
            item.addEventListener('dragstart', function(e) {
                e.dataTransfer.setData('text/plain', JSON.stringify({
                    type: this.dataset.type,
                    element: this.dataset.element
                }));
            });
        });
        
        // Permitir soltar elementos en el canvas
        canvas.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.classList.add('drag-over');
        });
        
        canvas.addEventListener('dragleave', function(e) {
            this.classList.remove('drag-over');
        });
        
        canvas.addEventListener('drop', function(e) {
            e.preventDefault();
            this.classList.remove('drag-over');
            
            const data = JSON.parse(e.dataTransfer.getData('text/plain'));
            const elementType = data.element;
            
            // Crear nuevo elemento
            const newElement = document.createElement('div');
            newElement.dataset.element = elementType;
            newElement.dataset.type = data.type;
            elementCounter++;
            newElement.id = 'element-' + elementCounter;
            newElement.classList.add('canvas-element');
            
            // Agregar al canvas
            this.appendChild(newElement);
            
            // Agregar controles
            addElementControls(newElement);
            
            // Generar contenido del elemento
            generateElementContent(newElement, elementType);
            
            // Hacer el elemento seleccionable
            makeElementSelectable(newElement);
            
            // Remover mensaje de placeholder
            const placeholder = this.querySelector('.text-center.text-muted');
            if (placeholder) {
                placeholder.remove();
            }
        });
    }
    
    function addElementControls(element) {
        const controls = document.createElement('div');
        controls.className = 'element-controls';
        controls.innerHTML = '<i class="fas fa-times"></i>';
        controls.onclick = function(e) {
            e.stopPropagation();
            element.remove();
            hideProperties();
        };
        element.appendChild(controls);
    }
    
    function generateElementContent(element, elementType) {
        const content = document.createElement('div');
        content.className = 'element-content';
        
        switch(elementType) {
            case 'title':
                content.innerHTML = '<h1 style="text-align: center; margin: 20px 0;">Título del Reporte</h1>';
                break;
            case 'subtitle':
                content.innerHTML = '<h3 style="text-align: center; margin: 15px 0; color: #666;">Subtítulo del Reporte</h3>';
                break;
            case 'company-info':
                content.innerHTML = `
                    <div style="text-align: center; margin: 20px 0;">
                        <h2>${reportConfig.company_name || 'Mi Empresa'}</h2>
                        <p>${reportConfig.company_address || 'Dirección de la empresa'}</p>
                        <p>Tel: ${reportConfig.company_phone || 'Teléfono'} | Email: ${reportConfig.company_email || 'email@empresa.com'}</p>
                    </div>
                `;
                break;
            case 'report-info':
                content.innerHTML = `
                    <div style="margin: 15px 0;">
                        <p><strong>Tipo de Reporte:</strong> ${reportConfig.report_name}</p>
                        <p><strong>Fecha:</strong> ${new Date().toLocaleDateString()}</p>
                        <p><strong>Generado por:</strong> Usuario</p>
                    </div>
                `;
                break;
            case 'date-time':
                content.innerHTML = `
                    <div style="text-align: right; margin: 10px 0;">
                        <p><strong>Fecha:</strong> ${new Date().toLocaleDateString()}</p>
                        <p><strong>Hora:</strong> ${new Date().toLocaleTimeString()}</p>
                    </div>
                `;
                break;
            case 'data-table':
                content.innerHTML = `
                    <table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
                        <thead>
                            <tr style="background: #f8f9fa;">
                                <th style="border: 1px solid #dee2e6; padding: 8px;">ID</th>
                                <th style="border: 1px solid #dee2e6; padding: 8px;">Descripción</th>
                                <th style="border: 1px solid #dee2e6; padding: 8px;">Cantidad</th>
                                <th style="border: 1px solid #dee2e6; padding: 8px;">Precio</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">1</td>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">Producto Ejemplo</td>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">10</td>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">$25.00</td>
                            </tr>
                        </tbody>
                    </table>
                `;
                break;
            case 'summary-table':
                content.innerHTML = `
                    <table style="width: 100%; border-collapse: collapse; margin: 15px 0;">
                        <thead>
                            <tr style="background: #e9ecef;">
                                <th style="border: 1px solid #dee2e6; padding: 8px;">Concepto</th>
                                <th style="border: 1px solid #dee2e6; padding: 8px;">Valor</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">Total Items</td>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">10</td>
                            </tr>
                            <tr>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">Total Valor</td>
                                <td style="border: 1px solid #dee2e6; padding: 8px;">$250.00</td>
                            </tr>
                        </tbody>
                    </table>
                `;
                break;
            case 'statistics':
                content.innerHTML = `
                    <div style="margin: 15px 0;">
                        <h4>Estadísticas</h4>
                        <div style="display: flex; justify-content: space-around;">
                            <div style="text-align: center;">
                                <div style="font-size: 24px; font-weight: bold; color: #007bff;">25</div>
                                <div>Total Items</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 24px; font-weight: bold; color: #28a745;">$1,250</div>
                                <div>Valor Total</div>
                            </div>
                        </div>
                    </div>
                `;
                break;
            case 'totals':
                content.innerHTML = `
                    <div style="text-align: right; margin: 15px 0; padding: 10px; background: #f8f9fa; border-radius: 4px;">
                        <h4>Totales</h4>
                        <p><strong>Subtotal:</strong> $1,000.00</p>
                        <p><strong>Impuestos:</strong> $150.00</p>
                        <p><strong>Total:</strong> $1,150.00</p>
                    </div>
                `;
                break;
            case 'text':
                content.innerHTML = '<p style="margin: 15px 0;">Texto libre personalizable</p>';
                break;
            case 'separator':
                content.innerHTML = '<hr style="margin: 20px 0; border: 1px solid #dee2e6;">';
                break;
        }
        
        element.appendChild(content);
    }
    
    function makeElementSelectable(element) {
        element.addEventListener('click', function(e) {
            e.stopPropagation();
            
            // Remover selección anterior
            document.querySelectorAll('.canvas-element').forEach(el => {
                el.classList.remove('selected');
            });
            
            // Seleccionar elemento actual
            this.classList.add('selected');
            currentElement = this;
            
            // Mostrar propiedades
            showElementProperties(this);
        });
    }
    
    function showElementProperties(element) {
        const propertiesDiv = document.getElementById('elementProperties');
        const contentDiv = document.getElementById('propertiesContent');
        
        propertiesDiv.style.display = 'block';
        
        const elementType = element.dataset.element;
        let propertiesHTML = '';
        
        // Propiedades comunes
        propertiesHTML += `
            <div class="property-group">
                <label>Texto del Elemento</label>
                <textarea id="elementText" rows="3">${element.querySelector('.element-content').textContent.trim()}</textarea>
            </div>
        `;
        
        // Propiedades específicas por tipo
        switch(elementType) {
            case 'title':
            case 'subtitle':
                propertiesHTML += `
                    <div class="property-group">
                        <label>Tamaño de Fuente</label>
                        <select id="fontSize">
                            <option value="12">12px</option>
                            <option value="14">14px</option>
                            <option value="16">16px</option>
                            <option value="18">18px</option>
                            <option value="20">20px</option>
                            <option value="24">24px</option>
                            <option value="28">28px</option>
                            <option value="32">32px</option>
                        </select>
                    </div>
                    <div class="property-group">
                        <label>Color</label>
                        <input type="color" id="textColor" value="#000000" class="color-picker">
                    </div>
                    <div class="property-group">
                        <label>Alineación</label>
                        <select id="textAlign">
                            <option value="left">Izquierda</option>
                            <option value="center">Centro</option>
                            <option value="right">Derecha</option>
                        </select>
                    </div>
                `;
                break;
            case 'table':
            case 'summary-table':
                propertiesHTML += `
                    <div class="property-group">
                        <label>Mostrar Bordes</label>
                        <input type="checkbox" id="showBorders" checked>
                    </div>
                    <div class="property-group">
                        <label>Color de Encabezado</label>
                        <input type="color" id="headerColor" value="#f8f9fa" class="color-picker">
                    </div>
                `;
                break;
        }
        
        // Propiedades de posición
        propertiesHTML += `
            <div class="property-group">
                <label>Margen Superior</label>
                <input type="number" id="marginTop" value="0" min="0" max="100">
            </div>
            <div class="property-group">
                <label>Margen Inferior</label>
                <input type="number" id="marginBottom" value="0" min="0" max="100">
            </div>
        `;
        
        contentDiv.innerHTML = propertiesHTML;
        
        // Agregar event listeners a las propiedades
        addPropertyListeners(element);
    }
    
    function addPropertyListeners(element) {
        // Texto
        const textInput = document.getElementById('elementText');
        if (textInput) {
            textInput.addEventListener('input', function() {
                const content = element.querySelector('.element-content');
                if (content) {
                    content.textContent = this.value;
                }
            });
        }
        
        // Tamaño de fuente
        const fontSizeSelect = document.getElementById('fontSize');
        if (fontSizeSelect) {
            fontSizeSelect.addEventListener('change', function() {
                const content = element.querySelector('.element-content');
                if (content) {
                    content.style.fontSize = this.value + 'px';
                }
            });
        }
        
        // Color
        const colorInput = document.getElementById('textColor');
        if (colorInput) {
            colorInput.addEventListener('change', function() {
                const content = element.querySelector('.element-content');
                if (content) {
                    content.style.color = this.value;
                }
            });
        }
        
        // Alineación
        const alignSelect = document.getElementById('textAlign');
        if (alignSelect) {
            alignSelect.addEventListener('change', function() {
                const content = element.querySelector('.element-content');
                if (content) {
                    content.style.textAlign = this.value;
                }
            });
        }
        
        // Márgenes
        const marginTop = document.getElementById('marginTop');
        if (marginTop) {
            marginTop.addEventListener('input', function() {
                element.style.marginTop = this.value + 'px';
            });
        }
        
        const marginBottom = document.getElementById('marginBottom');
        if (marginBottom) {
            marginBottom.addEventListener('input', function() {
                element.style.marginBottom = this.value + 'px';
            });
        }
    }
    
    function hideProperties() {
        document.getElementById('elementProperties').style.display = 'none';
        currentElement = null;
    }
    
    function loadAvailableFields() {
        const fieldsContainer = document.getElementById('availableFields');
        let fieldsHTML = '';
        
        // Campos específicos según el tipo de reporte
        const reportType = reportConfig.report_type;
        
        switch(reportType) {
            case 'inventory_movements':
                fieldsHTML = `
                    <div class="field-group">
                        <h6><i class="fas fa-boxes me-2"></i>Campos de Movimiento</h6>
                        <div class="field-item" data-type="field" data-element="movement-id">ID Movimiento</div>
                        <div class="field-item" data-type="field" data-element="movement-type">Tipo de Movimiento</div>
                        <div class="field-item" data-type="field" data-element="from-warehouse">Almacén Origen</div>
                        <div class="field-item" data-type="field" data-element="to-warehouse">Almacén Destino</div>
                        <div class="field-item" data-type="field" data-element="movement-date">Fecha Movimiento</div>
                        <div class="field-item" data-type="field" data-element="movement-status">Estado</div>
                    </div>
                `;
                break;
            case 'inventory_adjustments':
                fieldsHTML = `
                    <div class="field-group">
                        <h6><i class="fas fa-adjust me-2"></i>Campos de Ajuste</h6>
                        <div class="field-item" data-type="field" data-element="adjustment-id">ID Ajuste</div>
                        <div class="field-item" data-type="field" data-element="adjustment-type">Tipo de Ajuste</div>
                        <div class="field-item" data-type="field" data-element="warehouse">Almacén</div>
                        <div class="field-item" data-type="field" data-element="location">Ubicación</div>
                        <div class="field-item" data-type="field" data-element="adjustment-date">Fecha Ajuste</div>
                        <div class="field-item" data-type="field" data-element="adjustment-status">Estado</div>
                    </div>
                `;
                break;
            case 'price_adjustments':
                fieldsHTML = `
                    <div class="field-group">
                        <h6><i class="fas fa-dollar-sign me-2"></i>Campos de Precio</h6>
                        <div class="field-item" data-type="field" data-element="price-id">ID Ajuste</div>
                        <div class="field-item" data-type="field" data-element="product-name">Nombre Producto</div>
                        <div class="field-item" data-type="field" data-element="old-price">Precio Anterior</div>
                        <div class="field-item" data-type="field" data-element="new-price">Precio Nuevo</div>
                        <div class="field-item" data-type="field" data-element="price-change">Cambio</div>
                        <div class="field-item" data-type="field" data-element="adjustment-date">Fecha Ajuste</div>
                    </div>
                `;
                break;
            default:
                fieldsHTML = `
                    <div class="field-group">
                        <h6><i class="fas fa-list me-2"></i>Campos Generales</h6>
                        <div class="field-item" data-type="field" data-element="id">ID</div>
                        <div class="field-item" data-type="field" data-element="name">Nombre</div>
                        <div class="field-item" data-type="field" data-element="date">Fecha</div>
                        <div class="field-item" data-type="field" data-element="status">Estado</div>
                    </div>
                `;
        }
        
        fieldsContainer.innerHTML = fieldsHTML;
        
        // Hacer los nuevos campos arrastrables
        fieldsContainer.querySelectorAll('.field-item').forEach(item => {
            item.draggable = true;
            item.addEventListener('dragstart', function(e) {
                e.dataTransfer.setData('text/plain', JSON.stringify({
                    type: this.dataset.type,
                    element: this.dataset.element
                }));
            });
        });
    }
    
    // Event listeners para botones
    document.getElementById('previewBtn').addEventListener('click', function() {
        generatePreview();
        new bootstrap.Modal(document.getElementById('previewModal')).show();
    });
    
    document.getElementById('saveBtn').addEventListener('click', function() {
        saveDesign();
    });
    
    document.getElementById('previewMode').addEventListener('click', function() {
        togglePreviewMode();
    });
    
    document.getElementById('printPreview').addEventListener('click', function() {
        window.print();
    });
    
    document.getElementById('printFromPreview').addEventListener('click', function() {
        const previewContent = document.getElementById('printPreviewContent');
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
            <html>
                <head>
                    <title>Vista Previa del Reporte</title>
                    <style>
                        body { font-family: Arial, sans-serif; margin: 20px; }
                        table { border-collapse: collapse; width: 100%; }
                        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                        th { background-color: #f2f2f2; }
                    </style>
                </head>
                <body>
                    ${previewContent.innerHTML}
                </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.print();
    });
    
    function generatePreview() {
        const canvas = document.getElementById('reportCanvas');
        const previewContent = document.getElementById('printPreviewContent');
        
        // Clonar el contenido del canvas
        const clonedCanvas = canvas.cloneNode(true);
        
        // Remover elementos de control
        clonedCanvas.querySelectorAll('.element-controls').forEach(control => {
            control.remove();
        });
        
        // Remover mensaje de placeholder
        const placeholder = clonedCanvas.querySelector('.text-center.text-muted');
        if (placeholder) {
            placeholder.remove();
        }
        
        previewContent.innerHTML = clonedCanvas.innerHTML;
    }
    
    function saveDesign() {
        const canvas = document.getElementById('reportCanvas');
        const elements = Array.from(canvas.querySelectorAll('.canvas-element')).map(element => {
            return {
                id: element.id,
                type: element.dataset.element,
                content: element.querySelector('.element-content').innerHTML,
                styles: {
                    marginTop: element.style.marginTop || '0px',
                    marginBottom: element.style.marginBottom || '0px',
                    fontSize: element.querySelector('.element-content').style.fontSize || '',
                    color: element.querySelector('.element-content').style.color || '',
                    textAlign: element.querySelector('.element-content').style.textAlign || ''
                }
            };
        });
        
        const design = {
            elements: elements,
            config: reportConfig
        };
        
        // Enviar al servidor
        fetch(`{{ route('admin.print-config.update', $printConfiguration) }}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                custom_design: JSON.stringify(design),
                _method: 'PUT'
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Diseño guardado exitosamente');
            } else {
                alert('Error al guardar el diseño');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al guardar el diseño');
        });
    }
    
    function togglePreviewMode() {
        isPreviewMode = !isPreviewMode;
        const canvas = document.getElementById('reportCanvas');
        const btn = document.getElementById('previewMode');
        
        if (isPreviewMode) {
            canvas.classList.add('preview-mode');
            btn.innerHTML = '<i class="fas fa-edit"></i> Modo Edición';
            btn.classList.remove('btn-outline-success');
            btn.classList.add('btn-success');
        } else {
            canvas.classList.remove('preview-mode');
            btn.innerHTML = '<i class="fas fa-eye"></i> Vista Previa';
            btn.classList.remove('btn-success');
            btn.classList.add('btn-outline-success');
        }
    }
    
    // Click fuera del canvas para deseleccionar
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.canvas-element')) {
            document.querySelectorAll('.canvas-element').forEach(el => {
                el.classList.remove('selected');
            });
            hideProperties();
        }
    });
    
    console.log('Editor de reportes inicializado correctamente');
});
</script>
@endpush