@extends('layouts.index', ['subHeader' => 'Consulta Carga Crítica'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('registros.index') }}" class="text-decoration-none text-dark"> / Cargas Críticas</a>
    <span> / Consulta</span>
@endsection

@section('content')
    <div class="d-flex justify-content-end gap-3 flex-wrap">
        {{-- Mantenemos el contenedor del botón fuera del área de exportación --}}
        <div class="btn-group" role="group" id="export-button-container">
            <button id="export-pdf-btn" class="btn btn-danger"><i class="fas fa-file-pdf"></i> Exportar a PDF</button>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('registros.index') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-arrow-left-circle-fill"></i> Atrás
            </a>
        </div>
    </div>

    <br>

    <style>
        .bg-purple { background-color: #551a8b; }
        .form-label { font-weight: bold; font-size: 0.85rem; margin-bottom: 0.2rem; color: #333; }
        .input-group-text { background-color: #e9ecef; border-right: 0; }
        .form-control[readonly] { background-color: #ffffff; border: 1px solid #ced4da; opacity: 1; }
        .card-img-top { object-fit: cover; height: 200px; }
    </style>

    {{-- Este es el único contenedor que se exportará --}}
    <div id="pdf-content-to-export">
        <div class="container-fluid shadow-sm border border-secondary rounded-3 p-0">
            <div class="d-flex justify-content-between align-items-center bg-purple">
                <div style="height: 100px;">
                    <img src="{{ asset('img/logos/logo_Sanofi.jpg') }}" alt="Sanofi Logo" class="image-fluid me-2" style="max-height: 100px;">
                </div>
                <div class="text-end">
                    <img src="{{ asset('img/logos/Logo_Cime_Border2x.png') }}" alt="CIME Logo" class="image-fluid p-2 me-9" style="max-height: 100px;">
                </div>
            </div>

            <div class="p-3">
                @if (session('status'))
                    <div class="alert alert-success">{{ session('status') }}</div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                {{-- El formulario de búsqueda AHORA está DENTRO del div a exportar --}}
                <form id="form_consulta_get" action="{{ route('registros.consultar') }}" method="GET" class="row g-3">
                    <div class="col-md-4">
                        <label for="consecutivo" class="form-label">Consecutivo</label>
                        <input type="number" class="form-control" name="consecutivo" id="consecutivo"
                            value="{{ old('consecutivo', $registro->consecutivo ?? '') }}" placeholder="0" required
                            autofocus>
                        @error('consecutivo')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>
                </form>

                <hr class="my-4">

                {{-- El resto del formulario de solo lectura --}}
                <form class="row g-3">
                    {{-- ... Todos tus campos de solo lectura van aquí ... --}}
                    <div class="col-md-3">
                        <label class="form-label">Compañía Solicitante</label>
                        <input type="text" class="form-control" value="{{ $registro?->entidad?->nombre ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Ceco</label>
                        <input type="text" class="form-control" value="{{ $registro->ceco ?? 'N/A' }}" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Proveedor</label>
                        <input type="text" class="form-control" value="{{ $registro?->proveedor?->nombre ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Área Solicitante</label>
                        <input type="text" class="form-control" value="{{ $registro?->area?->nombre ?? 'N/A' }}"
                            readonly>
                    </div>
                    {{-- ... (resto de los campos) ... --}}
                     <div class="col-md-3">
                        <label class="form-label">Ciudad</label>
                        <input type="text" class="form-control" value="{{ $registro->ciudad_origen_id ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Clase de Servicio</label>
                        <input type="text" class="form-control"
                            value="{{ $registro?->claseServicio?->nombre ?? 'N/A' }}" readonly>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Funcionario Solicitante</label>
                        <input type="text" class="form-control"
                            value="{{ $registro->funcionario_solicitante ?? 'N/A' }}" readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Analista Gestor</label>
                        <input type="text" class="form-control" value="{{ $registro->analista_gestor_id ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Estado del Servicio</label>
                        <input type="text" class="form-control"
                            value="{{ $registro ? App\Models\Registro::NOMBRE_ESTADOS[$registro->estado_servicio] ?? 'N/A' : 'N/A' }}"
                            readonly>
                    </div>

                    <hr class="my-4">

                    <div class="col-md-3">
                        <label class="form-label">Fecha Inicio</label>
                        <input type="text" class="form-control"
                            value="{{ isset($registro->fecha_inicio) ? \Carbon\Carbon::parse($registro->fecha_inicio)->format('d/m/Y H:i') : 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Lugar de Inicio</label>
                        <input type="text" class="form-control" value="{{ $registro->lugar_inicio ?? 'N/A' }}"
                            readonly>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Fecha y horas Fin</label>
                        <input type="text" class="form-control" value="{{ $registro->fecha_final ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Lugar Destino</label>
                        <input type="text" class="form-control" value="{{ $registro->lugar_destino ?? 'N/A' }}"
                            readonly>
                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Persona a Proteger</label>
                        <input type="text" class="form-control" value="{{ $registro->persona_proteger ?? 'N/A' }}"
                            readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tipo de Recurso</label>
                        <input type="text" class="form-control"
                            value="{{ $registro?->tipoRecurso?->nombre ?? 'N/A' }}" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Cant recursos</label>
                        <input type="text" class="form-control" value="{{ $registro->cantidad_recursos ?? 'N/A' }}"
                            readonly>
                    </div>

                    <div class="col-12 mt-4">
                        <div class="bg-purple text-white text-center p-2">
                            ESPECIFICACIONES DEL SERVICIO
                        </div>
                        <div class="mt-2">
                            <textarea class="form-control" rows="5" readonly>{{ $registro->especificacion_recurso ?? '' }}</textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

<script>
    $(document).ready(function() {
        // --- LÓGICA DE BÚSQUEDA ---
        let typingTimer;
        const doneTypingInterval = 1000;
        $('#consecutivo').on('keyup', function() {
            clearTimeout(typingTimer);
            const consecutivo = $(this).val();
            if (consecutivo.length > 0) {
                typingTimer = setTimeout(() => {
                    window.location.href = `{{ route('registros.consultar') }}?consecutivo=${consecutivo}`;
                }, doneTypingInterval);
            }
        });

        // =========================================================================
        // LÓGICA DE EXPORTACIÓN A PDF
        // =========================================================================
        $('#export-pdf-btn').on('click', async function() {
            const btn = $(this);
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> Preparando...');

            // 1. CARGAR IMAGEN DEL FOOTER Y OBTENER SUS DIMENSIONES
            let footerImageInfo = null;
            try {
                const imageUrl = new URL('img/powered.png', window.location.origin).href;
                const response = await fetch(imageUrl);
                if (!response.ok) throw new Error('La respuesta de la red no fue correcta');
                const blob = await response.blob();
                
                const readAsDataURL = (blob) => new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onloadend = () => resolve(reader.result);
                    reader.onerror = reject;
                    reader.readAsDataURL(blob);
                });
                
                const base64 = await readAsDataURL(blob);
                
                // Cargamos la imagen en un objeto para obtener sus dimensiones originales
                const getImageDimensions = (src) => new Promise((resolve, reject) => {
                    const img = new Image();
                    img.onload = () => resolve({ width: img.width, height: img.height });
                    img.onerror = reject;
                    img.src = src;
                });
                
                const dimensions = await getImageDimensions(base64);
                footerImageInfo = { data: base64, ...dimensions };

            } catch (error) {
                console.error("No se pudo cargar la imagen del footer:", error);
            }

            // --- INICIALIZACIÓN DEL PDF EN HORIZONTAL ---
            const { jsPDF } = window.jspdf;
            const pdf = new jsPDF({ orientation: 'l', unit: 'mm', format: 'a4' });
            
            const contentToExport = document.getElementById('pdf-content-to-export');
            if (!contentToExport) {
                alert("Error: No se encontró el contenido para exportar.");
                btn.prop('disabled', false).html('<i class="fas fa-file-pdf"></i> Exportar a PDF');
                return;
            }
            
            $('#export-button-container').hide();
            
            try {
                // 2. GENERAR UN ÚNICO CANVAS DE TODO EL CONTENIDO
                const canvas = await html2canvas(contentToExport, {
                    scale: 2, useCORS: true, logging: false,
                    width: contentToExport.scrollWidth, height: contentToExport.scrollHeight
                });
                const imgData = canvas.toDataURL('image/png');
                
                // --- CÁLCULOS PARA LA PAGINACIÓN ---
                const margin = 15;
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = pdf.internal.pageSize.getHeight();
                const imgWidth = pdfWidth - (margin * 2);
                const imgHeight = (canvas.height * imgWidth) / canvas.width;
                const pageContentHeight = pdfHeight - (margin * 2);
                const totalPages = Math.ceil(imgHeight / pageContentHeight);

                /**
                 * Función para añadir el footer con la nueva distribución.
                 */
                const addFooter = (pdfInstance, pageNum, totalPages) => {
                    const pageHeight = pdfInstance.internal.pageSize.getHeight();
                    const pageWidth = pdfInstance.internal.pageSize.getWidth();
                    
                    // Añadir imagen del footer (CENTRADA Y FLUIDA)
                    if (footerImageInfo) {
                        const aspectRatio = footerImageInfo.height / footerImageInfo.width;
                        const footerImgWidthInMM = 40; // Ancho deseado de la imagen en mm
                        const footerImgHeightInMM = footerImgWidthInMM * aspectRatio; // Alto calculado para no distorsionar
                        
                        const xPos = (pageWidth - footerImgWidthInMM) / 2; // Centrado horizontal
                        const yPos = pageHeight - footerImgHeightInMM - (margin / 2.5);
                        
                        pdfInstance.addImage(footerImageInfo.data, 'PNG', xPos, yPos, footerImgWidthInMM, footerImgHeightInMM);
                    }
                    
                    // Añadir número de página (ESQUINA INFERIOR DERECHA)
                    pdfInstance.setFontSize(8);
                    pdfInstance.setTextColor(128); // Gris
                    const pageText = `Página ${pageNum} de ${totalPages}`;
                    const textXPos = pageWidth - margin;
                    const textYPos = pageHeight - (margin / 2);
                    pdfInstance.text(pageText, textXPos, textYPos, { align: 'right' });
                };

                // 3. BUCLE PARA CREAR LAS PÁGINAS
                for (let i = 0; i < totalPages; i++) {
                    btn.html(`<span class="spinner-border spinner-border-sm"></span> Generando pág. ${i + 1}/${totalPages}...`);
                    if (i > 0) pdf.addPage();
                    const positionY = -(pageContentHeight * i);
                    pdf.addImage(imgData, 'PNG', margin, positionY + margin, imgWidth, imgHeight);
                    addFooter(pdf, i + 1, totalPages);
                }

                // 4. GUARDAR EL PDF
                const consecutivo = $('#consecutivo').val() || 'N-A';
                pdf.save(`Consulta_Carga_Critica_${consecutivo}.pdf`);

            } catch (error) {
                console.error("Error al generar el PDF:", error);
                alert("Ocurrió un error al generar el PDF. Revisa la consola.");
            } finally {
                // 5. RESTAURAR LA VISTA
                btn.prop('disabled', false).html('<i class="fas fa-file-pdf"></i> Exportar a PDF');
                $('#export-button-container').show();
            }
        });
    });
</script>
@endpush