@extends('layouts.app')

@section('titulo', 'Generar Informe: ' . $template->name)
@section('contenido1')

<div class="container-fluid">
    <div class="row">
        <!-- Panel de Edición (Izquierda) -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">
                        <i class="fas fa-edit me-2"></i>
                        Editar Campos Manuales
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Información de la Revisión -->
                    <div class="alert alert-info">
                        <h6><i class="fas fa-info-circle me-2"></i>Información de la Revisión</h6>
                        <p class="mb-1"><strong>Establecimiento:</strong> {{ $revision->lugar->nombre }}</p>
                        <p class="mb-1"><strong>Fecha:</strong> {{ $revision->fecha_inicio->format('d/m/Y') }}</p>
                        <p class="mb-0"><strong>Tipo:</strong> {{ \App\Models\CiRevision::$tiposRevision[$revision->tipo_revision] ?? 'No especificado' }}</p>
                    </div>

                    <!-- Campos Manuales Editables -->
                    <form id="editForm">
                        @csrf
                        
                        <!-- Campos que se pueden editar -->
                        <div class="mb-3">
                            <label for="observaciones" class="form-label">Observaciones</label>
                            <textarea class="form-control" id="observaciones" name="observaciones" rows="3" 
                                      placeholder="Observaciones generales sobre la revisión...">{{ $autoData['observaciones'] ?? '' }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="recomendaciones" class="form-label">Recomendaciones</label>
                            <textarea class="form-control" id="recomendaciones" name="recomendaciones" rows="3" 
                                      placeholder="Recomendaciones técnicas...">{{ $autoData['recomendaciones'] ?? '' }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="responsable_establecimiento" class="form-label">Responsable del Establecimiento</label>
                            <input type="text" class="form-control" id="responsable_establecimiento" name="responsable_establecimiento" 
                                   value="{{ $autoData['responsable_establecimiento'] ?? '' }}" 
                                   placeholder="Nombre del responsable...">
                        </div>

                        <div class="mb-3">
                            <label for="dni_responsable" class="form-label">DNI del Responsable</label>
                            <input type="text" class="form-control" id="dni_responsable" name="dni_responsable" 
                                   value="{{ $autoData['dni_responsable'] ?? '' }}" 
                                   placeholder="DNI del responsable...">
                        </div>

                        @if($template->type === 'certificado')
                        <div class="mb-3">
                            <label for="numero_colegiado" class="form-label">Número de Colegiado</label>
                            <input type="text" class="form-control" id="numero_colegiado" name="numero_colegiado" 
                                   value="{{ $autoData['numero_colegiado'] ?? '' }}" 
                                   placeholder="Número de colegiado del técnico...">
                        </div>
                        @endif
                    </form>

                    <!-- Botones de Acción -->
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-success" onclick="generarPDF()">
                            <i class="fas fa-download me-2"></i>
                            Generar PDF
                        </button>
                        <a href="{{ route('revision.show', $revisionId) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-2"></i>
                            Volver a la Revisión
                        </a>
                    </div>
                </div>
            </div>

            <!-- Panel de Datos Automáticos (Solo lectura) -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="card-title">
                        <i class="fas fa-database me-2"></i>
                        Datos Automáticos
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        <div class="col-6">
                            <small class="text-muted">Elementos Total:</small>
                            <div class="fw-bold">{{ $autoData['detectores_total'] }}</div>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Funcionando:</small>
                            <div class="fw-bold text-success">{{ $autoData['detectores_ok'] }}</div>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Con Problemas:</small>
                            <div class="fw-bold text-danger">{{ $autoData['detectores_problemas'] }}</div>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">% Funcionamiento:</small>
                            <div class="fw-bold text-primary">{{ $autoData['porcentaje_funcionamiento'] }}%</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel de Previsualización (Derecha) -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-eye me-2"></i>
                            Previsualización del Documento
                        </h5>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-outline-primary active" onclick="showPreview()">
                                <i class="fas fa-eye me-1"></i>
                                Vista previa
                            </button>
                            <button type="button" class="btn btn-outline-secondary" onclick="showSource()">
                                <i class="fas fa-code me-1"></i>
                                Código
                            </button>
                            <button type="button" class="btn btn-outline-info" onclick="printPreview()">
                                <i class="fas fa-print me-1"></i>
                                Imprimir
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <!-- Área de previsualización -->
                    <div id="previewArea" class="border rounded p-3 bg-white" style="min-height: 600px; max-height: 80vh; overflow-y: auto;">
                        {!! $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; max-height: 80vh; overflow-y: auto;">
                        <pre><code id="sourceCode">{{ htmlspecialchars($renderedHtml) }}</code></pre>
                    </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,
    .btn-group,
    .alert {
        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;
}

/* Animación para cambios en tiempo real */
.preview-updating {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}
</style>

<script>
// Variables globales
let currentData = @json($autoData);
let templateId = {{ $templateId }};
let revisionId = {{ $revisionId }};

// Función para actualizar la previsualización en tiempo real
function updatePreview() {
    // Marcar como actualizando
    document.getElementById('previewArea').classList.add('preview-updating');
    
    // Recopilar datos del formulario
    const formData = new FormData(document.getElementById('editForm'));
    const manualData = {};
    
    for (let [key, value] of formData.entries()) {
        manualData[key] = value;
    }
    
    // Combinar datos automáticos con manuales
    const allData = { ...currentData, ...manualData };
    
    // Hacer petición AJAX para actualizar la previsualización
    fetch(`/api/templates/${templateId}/preview-live`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(allData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.html) {
            document.getElementById('previewArea').innerHTML = data.html;
            document.getElementById('sourceCode').textContent = data.html;
        }
    })
    .catch(error => {
        console.error('Error actualizando previsualización:', error);
    })
    .finally(() => {
        // Quitar marca de actualizando
        document.getElementById('previewArea').classList.remove('preview-updating');
    });
}

// Función para generar PDF
function generarPDF() {
    // Recopilar datos del formulario
    const formData = new FormData(document.getElementById('editForm'));
    const manualData = {};
    
    for (let [key, value] of formData.entries()) {
        manualData[key] = value;
    }
    
    // Crear formulario para envío
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/templates/${templateId}/download`;
    
    // Agregar token CSRF
    const csrfToken = document.createElement('input');
    csrfToken.type = 'hidden';
    csrfToken.name = '_token';
    csrfToken.value = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    form.appendChild(csrfToken);
    
    // Agregar datos automáticos
    Object.keys(currentData).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = currentData[key];
        form.appendChild(input);
    });
    
    // Agregar datos manuales
    Object.keys(manualData).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = manualData[key];
        form.appendChild(input);
    });
    
    // Agregar datos de origen
    const sourceId = document.createElement('input');
    sourceId.type = 'hidden';
    sourceId.name = 'source_id';
    sourceId.value = revisionId;
    form.appendChild(sourceId);
    
    const sourceType = document.createElement('input');
    sourceType.type = 'hidden';
    sourceType.name = 'source_type';
    sourceType.value = 'revision_incendio';
    form.appendChild(sourceType);
    
    // Enviar formulario
    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
}

// Función para mostrar previsualización
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');
}

// Función para mostrar código fuente
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');
}

// Función para imprimir
function printPreview() {
    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();
}

// Event listeners para actualización en tiempo real
document.addEventListener('DOMContentLoaded', function() {
    // Agregar listeners a todos los campos editables
    const editableFields = document.querySelectorAll('#editForm input, #editForm textarea');
    
    editableFields.forEach(field => {
        field.addEventListener('input', updatePreview);
        field.addEventListener('change', updatePreview);
    });
    
    // Actualizar previsualización inicial
    updatePreview();
});
</script>

@endsection