@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">Previsualización: {{ $plantilla->nombre }}</h3>
                    <div>
                        <button type="button" class="btn btn-success" onclick="generarPDF()">
                            <i class="fas fa-file-pdf"></i> Generar PDF
                        </button>
                        <a href="{{ route('plantillas.show', $plantilla) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Volver
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Variables de Prueba</h5>
                                </div>
                                <div class="card-body">
                                    <form id="previewForm">
                                        @foreach($plantilla->campos_disponibles as $campo)
                                            <div class="form-group">
                                                <label for="{{ $campo }}">{{ ucfirst(str_replace('_', ' ', $campo)) }}</label>
                                                <input type="text" name="{{ $campo }}" id="{{ $campo }}" class="form-control" placeholder="Ingrese {{ $campo }}" onchange="actualizarPreview()">
                                            </div>
                                        @endforeach
                                        <button type="button" class="btn btn-primary btn-sm" onclick="cargarDatosEjemplo()">
                                            <i class="fas fa-magic"></i> Cargar Datos de Ejemplo
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5>Vista Previa</h5>
                                </div>
                                <div class="card-body">
                                    <div id="previewContent" class="border p-3" style="min-height: 500px;">
                                        {!! $plantilla->generarHtmlCompleto() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
{!! $plantilla->contenido_css !!}
</style>

<script>
function actualizarPreview() {
    const form = document.getElementById('previewForm');
    const formData = new FormData(form);
    const variables = {};
    
    for (let [key, value] of formData.entries()) {
        variables[key] = value;
    }
    
    // Procesar el HTML con las variables
    let html = `{!! addslashes($plantilla->contenido_html) !!}`;
    
    Object.keys(variables).forEach(key => {
        const regex = new RegExp(`{{${key}}}`, 'g');
        html = html.replace(regex, variables[key] || `{{${key}}}`);
    });
    
    document.getElementById('previewContent').innerHTML = html;
}

function cargarDatosEjemplo() {
    const ejemplos = {
        'empresa_nombre': 'Mi Empresa S.A.S.',
        'empresa_ruc': '900123456-1',
        'empresa_direccion': 'Calle 123 #45-67, Bogotá',
        'cliente_nombre': 'Juan Pérez',
        'cliente_documento': '12345678',
        'cliente_direccion': 'Carrera 45 #78-90',
        'numero_factura': 'FAC-001',
        'fecha_factura': '{{ date('d/m/Y') }}',
        'fecha_vencimiento': '{{ date('d/m/Y', strtotime('+30 days')) }}',
        'subtotal': '$100,000',
        'iva': '$19,000',
        'total': '$119,000',
        'concepto': 'Servicios de consultoría',
        'monto_numerico': '119000',
        'monto_letras': 'Ciento diecinueve mil pesos',
        'items_tabla': `
            <tr>
                <td>Servicio de consultoría</td>
                <td>1</td>
                <td>$100,000</td>
                <td>$100,000</td>
            </tr>
        `,
        'usuarios_tabla': `
            <tr>
                <td>1</td>
                <td>Juan Pérez</td>
                <td>juan@email.com</td>
                <td>Administrador</td>
                <td>Activo</td>
                <td>{{ date('d/m/Y') }}</td>
            </tr>
        `
    };
    
    Object.keys(ejemplos).forEach(key => {
        const input = document.getElementById(key);
        if (input) {
            input.value = ejemplos[key];
        }
    });
    
    actualizarPreview();
}

function generarPDF() {
    const form = document.getElementById('previewForm');
    const formData = new FormData(form);
    
    // Crear formulario temporal para enviar datos
    const tempForm = document.createElement('form');
    tempForm.method = 'POST';
    tempForm.action = '{{ route("plantillas.generate-pdf", $plantilla) }}';
    tempForm.style.display = 'none';
    
    // Agregar token CSRF
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = '{{ csrf_token() }}';
    tempForm.appendChild(csrfToken);
    
    // Agregar datos del formulario
    for (let [key, value] of formData.entries()) {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = value;
        tempForm.appendChild(input);
    }
    
    document.body.appendChild(tempForm);
    tempForm.submit();
    document.body.removeChild(tempForm);
}

// Cargar datos de ejemplo al cargar la página
document.addEventListener('DOMContentLoaded', function() {
    cargarDatosEjemplo();
});
</script>
@endsection