@extends('layouts.index', ['subHeader' => 'Dashboard Road Safety Platform'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('road_safety.index') }}" class="text-decoration-none text-dark"> / Road Safety Platform</a>
    <style>
        .card .card-header {
            align-items: center !important;
        }

        .kpi-card {
            border: none;
            border-left: 5px solid;
            border-radius: .35rem;
            transition: transform .2s, box-shadow .2s;
        }

        .border-left-primary {
            border-left-color: #7239ea !important;
        }

        .border-left-success {
            border-left-color: #4caf50 !important;
        }

        .border-left-info {
            border-left-color: #36b9cc !important;
        }

        .border-left-warning {
            border-left-color: #f6c23e !important;
        }

        .border-left-danger {
            border-left-color: #f1416c !important;
        }

        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
        }

        .kpi-card .card-title {
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
        }

        .kpi-card .card-text {
            font-size: 2rem;
            font-weight: 300;
        }

        .kpi-card .icon {
            font-size: 3rem;
            opacity: 0.3;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }

        #filter-card {
            background-color: #f8f9fc;
        }

        #dashboard-content {
            padding: 20px;
            background-color: #fff;
        }

        /* Padding para el PDF */

        /* Mensaje de "Sin Datos" */
        #no-data-message {
            display: none;
            text-align: center;
            padding: 50px;
        }


        .chart-container {
            position: relative;
            height: 350px;
            width: 100%;
        }

        #dashboard-body {
            transition: opacity 0.3s ease-in-out;
        }

        .pdf-page {
            border-bottom: 2px dashed #e3e6f0;
            padding-bottom: 2rem;
            margin-bottom: 2rem;
        }

        .pdf-page:last-child {
            border-bottom: none;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2">
                    <a href="{{ route('road_safety.index') }}" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="container-fluid">
        <!-- Card de Filtros -->
        <div class="card shadow-sm mb-4" id="filter-card">
            <div class="card-body">
                <form id="dashboard-filters" class="row align-items-end">
                    <div class="col-md-4 form-group"><label for="date-range-picker"><strong>Date Range</strong></label>
                        <input type="text" id="date-range-picker" name="date_range" class="form-control"
                            autocomplete="off">
                    </div>
                    <div class="col-md-3 form-group"><label for="site-filter"><strong>Site</strong></label><select id="site-filter" name="site"
                            class="form-select" data-control="select2" data-placeholder="All">
                            <option></option>
                            @foreach ($sites as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 form-group"><label
                            for="type-filter"><strong>Type</strong></label><select id="type-filter"
                            name="type" class="form-select" data-control="select2" data-placeholder="All">
                            <option></option>
                            @foreach ($types as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select></div>
                    <div class="col-md-2 form-group">
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-filter"></i> Apply</button>
                        <button type="button" id="clear-filters-btn" class="btn btn-secondary w-100 mt-2">Clean</button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Loader y Mensaje de No Datos -->
        <div id="loader" class="text-center my-5" style="display: none;">
            <div class="spinner-border text-purple" role="status" style="width: 3rem; height: 3rem;">
                <span class="sr-only">Cargando...</span>
            </div>
            <p class="mt-2">Cargando datos del dashboard...</p>
        </div>
        <div id="no-data-message" class="alert alert-warning text-center" style="display: none;"></div>

        {{-- Contenedor principal para exportación a PDF --}}
        <div id="dashboard-container">
            <div id="dashboard-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 id="dashboard-title">Dashboard: Road Safety Platform</h2>
                    <div 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>

                <div id="no-data-message" class="alert alert-warning">...</div>

                <!-- Contenido del Dashboard (se mostrará después de la carga) -->
                <div id="dashboard-body" style="display: none;">
                    
                    {{-- ======================================================= --}}
                    {{-- INICIO DEL CONTENIDO PARA LA PÁGINA 1 DEL PDF           --}}
                    {{-- ======================================================= --}}
                    <div id="pdf-page-1">
                        <!-- Fila de KPIs Principales -->
                        <div class="row mb-4">
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card kpi-card border-left-primary shadow-sm h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <div class="card-title text-info">Total Cars</div>
                                                <div class="card-text" id="kpi-total-cars">...</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-car"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card kpi-card border-left-danger shadow-sm h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <div class="card-title text-danger">Total Accidents</div>
                                                <div class="card-text" id="kpi-total-accidents">...</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-car-crash"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card kpi-card border-left-warning shadow-sm h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <div class="card-title text-warning">Accident Rate</div>
                                                <div class="card-text" id="kpi-accident-rate">...%</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-percent"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card kpi-card border-left-success shadow-sm h-100 py-2">
                                    <div class="card-body">
                                        <div class="row no-gutters align-items-center">
                                            <div class="col">
                                                <div class="card-title text-success">Average CO2 Emission</div>
                                                <div class="card-text h5" id="kpi-avg-co2">0 g/km</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-leaf"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Fila Gráfica Principal -->
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Monthly Trend: Cars vs. Accidents</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-area" style="height: 320px;">
                                            <canvas id="tendenciaMensualChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ======================================================= --}}
                    {{-- INICIO DEL CONTENIDO PARA LA PÁGINA 2 DEL PDF           --}}
                    {{-- ======================================================= --}}
                    <div id="pdf-page-2">
                        <!-- Fila de Gráficas de Composición -->
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Composition of the Fleet</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-pie pt-4" style="height: 350px;">
                                            <canvas id="composicionFlotaChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Types of Accidents</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-pie pt-4" style="height: 350px;">
                                            <canvas id="tipoAccidentesChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Composition of Conductors</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-pie pt-4" style="height: 350px;">
                                            <canvas id="composicionConductoresChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fila de Gráficas de Análisis por Dimensión -->
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Total Accidents by Location</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-bar" style="height: 320px;">
                                            <canvas id="accidentesPorSedeChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="card shadow mb-4">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Training by Type of Personnel</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="chart-bar" style="height: 320px;">
                                            <canvas id="formacionPorTipoChart"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Librerías requeridas --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

    <script>
        $(document).ready(function() {
            // Definiciones iniciales
            let charts = {};
            let appliedFilters = {};
            const CHART_COLORS = ['#4e73df', '#4caf50', '#36b9cc', '#f6c23e', '#e74a3b', '#858796', '#5a5c69', '#7a00e6', '#00b2ff'];

            // Configuración del DateRangePicker
            $('#date-range-picker').daterangepicker({
                autoUpdateInput: false, // No queremos que se actualice automáticamente
                locale: {
                    cancelLabel: 'Clear',
                    format: 'YYYY-MM-DD',
                },
                showDropdowns: true, // Permitir selección fácil entre años
                ranges: {
                    'Today': [moment(), moment()],                
                    'Last 7 days': [moment().subtract(6, 'days'), moment()],
                    'This month': [moment().startOf('month'), moment().endOf('month')],
                    'Last month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                    'Last 30 days': [moment().subtract(29, 'days'), moment()],
                    'Last 3 months': [moment().subtract(3, 'months').startOf('month'), moment()],
                    'Last 6 months': [moment().subtract(6, 'months').startOf('month'), moment()],
                    'Current year': [moment().startOf('year'), moment().endOf('year')],
                    'Previous year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                    'Last 3 years': [moment().subtract(3, 'years').startOf('year'), moment().endOf('year')]
                }
            });

            // Lógica de carga de datos
            function loadDashboardData() {
                $('#loader').show();
                $('#dashboard-body, #no-data-message').hide();
                $('#export-pdf-btn').prop('disabled', true);

                $.ajax({
                    url: `{{ route('road_safety.dashboard.data') }}`,
                    type: 'GET',
                    data: $('#dashboard-filters').serialize(),
                    success: function(response) {
                        if (response.no_data) {
                            $('#no-data-message').text('No se encontraron datos para los filtros seleccionados.').show();
                        } else {
                            appliedFilters = response.filters_applied;
                            updateUI(response);
                            $('#dashboard-body').show();
                        }
                    },
                    error: () => $('#no-data-message').text('Ocurrió un error al cargar los datos.').show(),
                    complete: () => {
                        $('#loader').hide();
                        $('#export-pdf-btn').prop('disabled', $('#no-data-message').is(':visible'));
                    }
                });
            }

            function updateUI(data) {
                Object.values(charts).forEach(chart => chart?.destroy());
                charts = {};
                const g = data.graficas;

                // KPIs
                $('#kpi-total-cars').text(data.kpis.totalCars);
                $('#kpi-total-accidents').text(data.kpis.totalAccidents);
                $('#kpi-accident-rate').text(data.kpis.accidentRate);
                $('#kpi-avg-co2').text(data.kpis.avgCo2);

                // Renderizado de Gráficas
                renderChart('tendenciaMensualChart', 'bar', g.tendenciaMensual, { multiAxis: true });
                renderChart('formacionPorTipoChart', 'bar', g.formacionPorTipo, { stacked: true });
                renderChart('accidentesPorSedeChart', 'bar', g.accidentesPorSede, { horizontal: true });
                renderChart('composicionFlotaChart', 'bar', g.composicionFlota, { stacked: true });
                renderChart('tipoAccidentesChart', 'pie', g.tipoAccidentes);
                renderChart('composicionConductoresChart', 'doughnut', g.composicionConductores);
            }

            // --- FUNCIÓN DE RENDERIZADO FINAL Y SIMPLIFICADA ---
            function renderChart(canvasId, type, chartData, options = {}) {
                const { horizontal, multiAxis, stacked } = options;
                const container = $(`#${canvasId}`).parent();
                container.html(`<canvas id="${canvasId}"></canvas>`);
                const ctx = document.getElementById(canvasId)?.getContext('2d');

                // Verificación de datos robusta y directa
                if (!ctx || !chartData || !chartData.datasets || !chartData.datasets.some(ds => ds.data && ds.data.some(d => d > 0))) {
                    container.html('<p class="text-center text-muted small mt-5">No hay datos suficientes.</p>');
                    return;
                }
                
                // Extraemos los datasets para manipularlos
                let datasets = JSON.parse(JSON.stringify(chartData.datasets));

                // Asignación de colores
                datasets.forEach((ds, i) => {
                    const chartType = ds.type || type;
                    if ((chartType === 'pie' || chartType === 'doughnut') || (chartType === 'bar' && datasets.length === 1 && !multiAxis)) {
                        ds.backgroundColor = ds.backgroundColor || ds.data.map((_, j) => CHART_COLORS[j % CHART_COLORS.length]);
                    } else {
                        ds.backgroundColor = ds.backgroundColor || CHART_COLORS[i % CHART_COLORS.length];
                    }
                    ds.borderColor = ds.borderColor || (chartType === 'pie' || chartType === 'doughnut' ? '#fff' : ds.backgroundColor);
                    ds.borderWidth = ds.borderWidth ?? (chartType === 'pie' || chartType === 'doughnut' ? 2 : 0);
                });
                
                const config = {
                    type: type,
                    data: {
                        labels: chartData.labels,
                        datasets: datasets
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        indexAxis: horizontal ? 'y' : 'x',
                        plugins: {
                            tooltip: { enabled: true },
                            legend: {
                                display: multiAxis || datasets.length > 1 || type === 'pie' || type === 'doughnut'
                            },
                            datalabels: { display: false } 
                        },
                        scales: multiAxis ? {
                            yCoches: { type: 'linear', position: 'left', grid: { drawOnChartArea: false }, title: { display: true, text: 'Nº Coches' } },
                            yAccidentes: { type: 'linear', position: 'right', title: { display: true, text: 'Nº Accidentes' } }
                        } : {
                           x: { stacked: stacked },
                           y: { stacked: stacked }
                        }
                    },
                    // --- PLUGIN PERSONALIZADO UNIVERSAL ---
                    plugins: [{
                        id: 'customPermanentLabels',
                        afterDatasetsDraw: function(chart) {
                            const { ctx } = chart;
                            ctx.save();
                            ctx.font = 'bold 12px Arial';
                            ctx.textAlign = 'center';
                            
                            chart.data.datasets.forEach((dataset, i) => {
                                const meta = chart.getDatasetMeta(i);
                                
                                meta.data.forEach((element, index) => {
                                    const value = dataset.data[index];
                                    if (!value || value <= 0) return;

                                    if (meta.type === 'pie' || meta.type === 'doughnut') {
                                        const total = meta.total;
                                        if (total === 0) return;
                                        const percentage = (value / total) * 100;
                                        const midAngle = (element.startAngle + element.endAngle) / 2;
                                        const positionRadius = (element.innerRadius + element.outerRadius) / 2;
                                        const posX = element.x + Math.cos(midAngle) * positionRadius;
                                        const posY = element.y + Math.sin(midAngle) * positionRadius;
                                        
                                        const originalFont = ctx.font;
                                        const textWidth = ctx.measureText(`${value} (${percentage.toFixed(1)}%)`).width;
                                        if (textWidth > element.outerRadius - element.innerRadius - 10) {
                                            ctx.font = 'bold 10px Arial';
                                        }

                                        ctx.fillStyle = 'white';
                                        ctx.textBaseline = 'middle';
                                        ctx.strokeStyle = 'rgba(0,0,0,0.5)';
                                        ctx.lineWidth = 2;
                                        const textValue = new Intl.NumberFormat('es-ES').format(value);
                                        const textPercent = `(${percentage.toFixed(1)}%)`;
                                        
                                        ctx.strokeText(textValue, posX, posY - 7);
                                        ctx.fillText(textValue, posX, posY - 7);
                                        ctx.strokeText(textPercent, posX, posY + 8);
                                        ctx.fillText(textPercent, posX, posY + 8);
                                        ctx.font = originalFont;

                                    } else if (meta.type === 'bar') {
                                        const textValue = new Intl.NumberFormat('es-ES').format(value);
                                        let posX, posY;
                                        
                                        if (stacked) {
                                            if (element.height < 18) return;
                                            ctx.fillStyle = '#fff';
                                            posX = element.x;
                                            posY = element.y + (element.height / 2);
                                            ctx.textBaseline = 'middle';
                                        }
                                        else if (horizontal) {
                                            if (element.width < ctx.measureText(textValue).width + 20) return;
                                            ctx.fillStyle = '#fff';
                                            posX = element.x - 15;
                                            posY = element.y;
                                            ctx.textAlign = 'right';
                                            ctx.textBaseline = 'middle';
                                        } else {
                                            if (element.height < 20) return;
                                            ctx.fillStyle = '#fff';
                                            posX = element.x;
                                            posY = element.y + 15;
                                            ctx.textAlign = 'center';
                                            ctx.textBaseline = 'middle';
                                        }
                                        
                                        ctx.fillText(textValue, posX, posY);
                                    }
                                });
                            });
                            ctx.restore();
                        }
                    }]
                };

                if (type === 'pie' || type === 'doughnut') {
                    config.options.scales = {
                        x: { display: false },
                        y: { display: false }
                    };
                }
                
                charts[canvasId] = new Chart(ctx, config);
            }
            
            // --- MANEJADORES DE EVENTOS ---
            $('#dashboard-filters').on('submit', (e) => { e.preventDefault(); loadDashboardData(); });
            $('#clear-filters-btn').on('click', () => {
                $('#dashboard-filters')[0].reset();
                $('#date-range-picker').val('');
                loadDashboardData();
            });

            $('#date-range-picker').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
            });

            $('#date-range-picker').on('cancel.daterangepicker', function(ev, picker) {
                $(this).val('');
            });

            // --- 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> Preparing...');

                const { jsPDF } = window.jspdf;
                const pdf = new jsPDF('l', 'mm', 'a4'); 
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = pdf.internal.pageSize.getHeight();
                const margin = 15;
                const contentWidth = pdfWidth - (margin * 2);

                // La función del título se adapta automáticamente al nuevo 'contentWidth'
                const addTitleToFirstPage = async (pdfInstance) => {
                    const dateRangeText = appliedFilters.date_range || 'The whole period';
                    const siteText = appliedFilters.site || 'All';
                    const typeText = appliedFilters.type || 'All';
                    const currentDate = new Date().toLocaleDateString('en-EN', { year: 'numeric', month: 'long', day: 'numeric' });
                    const tempTitleContainer = document.createElement('div');
                    tempTitleContainer.style.cssText = `position: absolute; top: -9999px; left: -9999px; width: 1100px; background: white; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;`;
                    tempTitleContainer.innerHTML = `
                        <div class="text-center" style="color: #5a5c69;">
                            <h2 class="text-purple mb-2" style="font-weight: 700;">Road Safety Report</h2>
                            <h4 class="text-info mb-2" style="font-weight: 500;">Period: ${dateRangeText}</h4>
                            <div style="font-size: 1.1rem; display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem;">
                                <p style="margin:0;"><strong>Site:</strong> ${siteText}</p>
                                <p style="margin:0;"><strong>Type:</strong> ${typeText}</p>
                            </div>
                            <p style="color: #858796; font-size: 0.9rem; margin:0;">Generated on ${currentDate}</p>
                            <hr style="margin-top: 1rem; border-top: 1px solid rgba(0,0,0,.1);">
                        </div>`;
                    document.body.appendChild(tempTitleContainer);
                    try {
                        const canvas = await html2canvas(tempTitleContainer, { scale: 2, useCORS: true, logging: false });
                        const imgData = canvas.toDataURL('image/png');
                        const imgProps = pdfInstance.getImageProperties(imgData);
                        const imgHeight = (imgProps.height * contentWidth) / imgProps.width;
                        pdfInstance.addImage(imgData, 'PNG', margin, margin, contentWidth, imgHeight);
                        return imgHeight + 5; // Retorna altura + un pequeño espacio
                    } finally {
                        document.body.removeChild(tempTitleContainer);
                    }
                };

                // Manejar el reescalado
                const addPageContent = async (pdfInstance, element, yOffset = margin) => {
                    const canvas = await html2canvas(element, { scale: 2, useCORS: true, logging: false });
                    const imgData = canvas.toDataURL('image/png');
                    const imgProps = pdfInstance.getImageProperties(imgData);

                    // Calcular el espacio vertical disponible en la página
                    const availableHeight = pdfHeight - yOffset - margin;
                    
                    // Calcular las dimensiones proporcionales de la imagen
                    let finalImgWidth = contentWidth;
                    let finalImgHeight = (imgProps.height * finalImgWidth) / imgProps.width;

                    // Si la imagen es más alta que el espacio disponible, la reescalamos
                    if (finalImgHeight > availableHeight) {
                        finalImgHeight = availableHeight;
                        // Recalculamos el ancho para mantener la proporción
                        finalImgWidth = (imgProps.width * finalImgHeight) / imgProps.height;
                    }

                    // Centrar la imagen horizontalmente en el área de contenido
                    const xPos = margin + (contentWidth - finalImgWidth) / 2;

                    pdfInstance.addImage(imgData, 'PNG', xPos, yOffset, finalImgWidth, finalImgHeight);
                };

                // --- PROCESAMIENTO DE LAS PÁGINAS ---
                const pages = $('#dashboard-body > div[id^="pdf-page-"]');
                for (let i = 0; i < pages.length; i++) {
                    btn.html(`<span class="spinner-border spinner-border-sm"></span> Pág. ${i + 1}/${pages.length}...`);
                    const pageElement = $(pages[i]).get(0);
                    if (i === 0) {
                        const titleBottomY = await addTitleToFirstPage(pdf);
                        await addPageContent(pdf, pageElement, titleBottomY);
                    } else {
                        pdf.addPage();
                        await addPageContent(pdf, pageElement);
                    }
                }

                // --- FINALIZACIÓN DEL DOCUMENTO ---
                btn.html('<span class="spinner-border spinner-border-sm"></span> Finalizando...');
                const pageCount = pdf.internal.getNumberOfPages();
                for (let i = 1; i <= pageCount; i++) {
                    pdf.setPage(i);
                    pdf.setFontSize(8);
                    pdf.setTextColor(150);
                    pdf.text(`Página ${i} de ${pageCount}`, pdfWidth - margin, pdfHeight - (margin/2), { align: 'right' });
                }

                pdf.save(`Reporte_Seguridad_Vial_${new Date().toISOString().slice(0,10)}.pdf`);
                btn.prop('disabled', false).html('<i class="fas fa-file-pdf"></i> Exportar a PDF');
            });

            // Carga inicial de datos al entrar a la página
            loadDashboardData();
        });
    </script>
@endpush