@extends('layouts.app')

@section('titulo', 'Previsualización: ' . $template->name)
@section('contenido1')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-eye mr-2"></i>
                        Previsualización: {{ $template->name }}
                    </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-secondary btn-sm" onclick="goBack()">
                            <i class="fas fa-arrow-left mr-1"></i>
                            Volver a editar
                        </button>
                    </div>
                </div>
                
                <div class="card-body">
                    <!-- Información del documento -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-info">
                                    <i class="fas fa-file-alt"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Tipo de documento</span>
                                    <span class="info-box-number">{{ ucfirst($template->type) }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="info-box">
                                <span class="info-box-icon bg-success">
                                    <i class="fas fa-calendar"></i>
                                </span>
                                <div class="info-box-content">
                                    <span class="info-box-text">Fecha de generación</span>
                                    <span class="info-box-number">{{ now()->format('d/m/Y H:i') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Controles de previsualización -->
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-primary active" onclick="showPreview()">
                                    <i class="fas fa-eye mr-1"></i>
                                    Vista previa
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="showSource()">
                                    <i class="fas fa-code mr-1"></i>
                                    Código fuente
                                </button>
                                <button type="button" class="btn btn-outline-info" onclick="printPreview()">
                                    <i class="fas fa-print mr-1"></i>
                                    Imprimir
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Área de previsualización -->
                    <div id="previewArea" class="border rounded p-3 bg-white" style="min-height: 600px;">
                        {!! $renderedHtml !!}
                    </div>
                    
                    <!-- Área de código fuente (oculta por defecto) -->
                    <div id="sourceArea" class="border rounded p-3 bg-dark text-light" style="display: none; min-height: 600px;">
                        <pre><code>{{ htmlspecialchars($renderedHtml) }}</code></pre>
                    </div>
                </div>
                
                <div class="card-footer">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <small class="text-muted">
                                <i class="fas fa-info-circle mr-1"></i>
                                Revisa el documento antes de generar el PDF final
                            </small>
                        </div>
                        
                        <div class="btn-group">
                            <button type="button" class="btn btn-secondary" onclick="goBack()">
                                <i class="fas fa-edit mr-1"></i>
                                Editar datos
                            </button>
                            
                            <form method="POST" action="{{ route('templates.download', $template->id) }}" style="display: inline;">
                                @csrf
                                
                                <!-- Reenviar todos los datos del formulario -->
                                @foreach($data as $key => $value)
                                    <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                                @endforeach
                                
                                <!-- Datos de origen si existen -->
                                @if(request()->has('source_id'))
                                    <input type="hidden" name="source_id" value="{{ request('source_id') }}">
                                @endif
                                @if(request()->has('source_type'))
                                    <input type="hidden" name="source_type" value="{{ request('source_type') }}">
                                @endif
                                
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-download mr-1"></i>
                                    Generar PDF
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Estilos adicionales para la previsualización -->
<style>
/* Estilos para mejorar la apariencia de la previsualización */
#previewArea {
    font-family: 'Times New Roman', serif;
    line-height: 1.6;
}

#previewArea h1, #previewArea h2, #previewArea h3 {
    color: #333;
    margin-bottom: 1rem;
}

#previewArea p {
    margin-bottom: 0.5rem;
}

#previewArea .firma {
    margin-top: 2rem;
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

/* Estilos para impresión */
@media print {
    .card-header,
    .card-footer,
    .btn-group,
    .info-box {
        display: none !important;
    }
    
    #previewArea {
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Estilos para el código fuente */
#sourceArea pre {
    background: transparent;
    border: none;
    color: #f8f9fa;
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}
</style>

<script>
function showPreview() {
    document.getElementById('previewArea').style.display = 'block';
    document.getElementById('sourceArea').style.display = 'none';
    
    // Actualizar botones
    document.querySelectorAll('.btn-group button').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('btn-outline-primary', 'btn-outline-secondary', 'btn-outline-info');
    });
    event.target.classList.add('active');
    event.target.classList.remove('btn-outline-primary');
}

function showSource() {
    document.getElementById('previewArea').style.display = 'none';
    document.getElementById('sourceArea').style.display = 'block';
    
    // Actualizar botones
    document.querySelectorAll('.btn-group button').forEach(btn => {
        btn.classList.remove('active');
        btn.classList.add('btn-outline-primary', 'btn-outline-secondary', 'btn-outline-info');
    });
    event.target.classList.add('active');
    event.target.classList.remove('btn-outline-secondary');
}

function printPreview() {
    // Crear una ventana nueva para imprimir
    const printWindow = window.open('', '_blank');
    const printContent = document.getElementById('previewArea').innerHTML;
    
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>Imprimir - {{ $template->name }}</title>
            <style>
                body {
                    font-family: 'Times New Roman', serif;
                    line-height: 1.6;
                    margin: 20px;
                }
                h1, h2, h3 {
                    color: #333;
                    margin-bottom: 1rem;
                }
                p {
                    margin-bottom: 0.5rem;
                }
                .firma {
                    margin-top: 2rem;
                    border-top: 1px solid #ccc;
                    padding-top: 1rem;
                }
                @media print {
                    body { margin: 0; }
                }
            </style>
        </head>
        <body>
            ${printContent}
        </body>
        </html>
    `);
    
    printWindow.document.close();
    printWindow.print();
}

function goBack() {
    // Volver al formulario de edición
    window.history.back();
}

// Mejorar la experiencia de usuario
document.addEventListener('DOMContentLoaded', function() {
    // Agregar efectos de hover a los botones
    document.querySelectorAll('.btn').forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-1px)';
            this.style.transition = 'all 0.2s ease';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });
    
    // Confirmar antes de generar PDF
    document.querySelector('form[action*="download"]').addEventListener('submit', function(e) {
        if (!confirm('¿Estás seguro de que quieres generar el PDF? Esta acción no se puede deshacer.')) {
            e.preventDefault();
        }
    });
});
</script>
@endsection