@extends('layouts.index', ['subHeader' => 'Dashboard de Cargas Críticas'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('registros.dashboard.index') }}" class="text-decoration-none text-dark"> / Cargas Críticas</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: #4e73df !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;
        }

        .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: 2.5rem;
            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;
        }

        #no-data-message {
            display: none;
            text-align: center;
            padding: 50px;
        }
    </style>
@endsection

@section('content')
    <div class="d-flex justify-content-between gap-3 flex-wrap">
        <div class="btn-group" role="group">
            <a href="{{ route('registros.consultaView') }}" class="btn btn-enviar btn-lg">
                <i class="bi bi-columns-gap"></i> Consulta por Consecutivo
            </a>
        </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>
    <div class="container-fluid mt-4">
        <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-3 form-group">
                        <label for="date-range-picker"><strong>Rango de Fechas</strong></label>
                        <input type="text" id="date-range-picker" name="date_range" class="form-control">
                    </div>
                    <div class="col-md-3 form-group">
                        <label for="tipo-recurso-filter"><strong>Tipo de Recurso</strong></label>
                        <select id="tipo-recurso-filter" name="tipo_recurso" class="form-select form-select-lg fromcss"
                            data-control="select2">
                            <option value="">Todos</option>
                            @foreach ($tiposRecurso as $id => $nombre)
                                <option value="{{ $id }}">{{ $nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 form-group">
                        <label for="compania-filter"><strong>Compañía</strong></label>
                        <select id="compania-filter" name="compania" class="form-select form-select-lg fromcss"
                            data-control="select2">
                            <option value="">Todas</option>
                            @foreach ($companias as $id => $nombre)
                                <option value="{{ $id }}">{{ $nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 form-group">
                        <label for="area-filter"><strong>Área Solicitante</strong></label>
                        <select id="area-filter" name="area" class="form-select form-select-lg fromcss"
                            data-control="select2">
                            <option value="">Todas</option>
                            @foreach ($areas as $id => $nombre)
                                <option value="{{ $id }}">{{ $nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 form-group mt-2">
                        <button type="submit" class="btn btn-primary w-100"><i class="fas fa-filter"></i> Aplicar</button>
                        <button type="button" id="clear-filters-btn" class="btn btn-secondary w-100 mt-2">Limpiar</button>
                    </div>
                </form>
            </div>
        </div>

        <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 de Cargas Críticas</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">No hay datos disponibles para el período seleccionado.
                </div>

                <div id="dashboard-body">
                    {{-- ======================================================= --}}
                    {{-- INICIO DEL CONTENIDO PARA LA PÁGINA 1 DEL PDF           --}}
                    {{-- ======================================================= --}}
                    <div id="pdf-page-1">
                        <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 Registros</div>
                                                <div class="card-text" id="kpi-total-registros">...</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-users"></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">Registros Finalizados</div>
                                                <div class="card-text" id="kpi-registros-finalizados">...%</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-check-circle"></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">Registros Ejecucion</div>
                                                <div class="card-text" id="kpi-registros-ejecucion">...</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-user-clock"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 col-md-6 mb-4">
                                <div class="card kpi-card border-left-info 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-purple">Proveedor Top</div>
                                                <div class="card-text h5" id="kpi-proveedor-top">...</div>
                                            </div>
                                            <div class="col-auto icon"><i class="fas fa-building"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-7 mb-4">
                                <div class="card shadow-sm">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Tendencia de Registros por Mes</h6>
                                    </div>
                                    <div class="card-body"><canvas id="trendChart"
                                            style="height: 300px !important;"></canvas></div>
                                </div>
                            </div>
                            <div class="col-lg-5 mb-4">
                                <div class="card shadow-sm">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Registros por Estado</h6>
                                    </div>
                                    <div class="card-body"><canvas id="stateChart"></canvas></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ======================================================= --}}
                    {{-- INICIO DEL CONTENIDO PARA LA PÁGINA 2 DEL PDF           --}}
                    {{-- ======================================================= --}}
                    <div id="pdf-page-2">
                        <div class="row" id="tipo-recurso-chart-section">
                            <div class="col-lg-12 mb-4">
                                <div class="card shadow-sm">
                                    <div class="card-header py-3">
                                        <h6 class="m-0 font-weight-bold text-info">Distribución por Tipo de Recurso</h6>
                                    </div>
                                    <div class="card-body" style="min-height: 450px;">
                                        <canvas id="resourceChart"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

    <script>
        $(document).ready(function() {
            let tendenciaMensualChart, registrosPorEstadoChart, registrosPorTipoRecursoChart;
            const CHART_COLORS = ['#4e73df', '#4caf50', '#36b9cc', '#f6c23e', '#e74a3b', '#858796', '#f8f9fc',
                '#6f42c1', '#fd7e14', '#5a5c69'
            ];

            $('#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: {
                    'Hoy': [moment(), moment()],
                    'Últimos 7 días': [moment().subtract(6, 'days'), moment()],
                    'Este mes': [moment().startOf('month'), moment().endOf('month')],
                    'Mes pasado': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1,
                        'month').endOf('month')],
                    'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
                    'Últimos 3 meses': [moment().subtract(3, 'months').startOf('month'), moment()],
                    'Últimos 6 meses': [moment().subtract(6, 'months').startOf('month'), moment()],
                    'Año actual': [moment().startOf('year'), moment().endOf('year')],
                    'Año anterior': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1,
                        'year').endOf('year')],
                    'Últimos 3 años': [moment().subtract(3, 'years').startOf('year'), moment().endOf(
                        'year')]
                }
            });

            // --- LÓGICA DE CARGA DE DATOS ---
            function loadDashboardData() {
                const filters = {
                    date_range: $('#date-range-picker').val(),
                    tipo_recurso: $('#tipo-recurso-filter').val(),
                    compania: $('#compania-filter').val(),
                    area: $('#area-filter').val(),
                };
                $('#dashboard-body').css('opacity', 0.5);
                $.ajax({
                    url: `{{ route('registros.dashboard.data') }}`,
                    type: 'GET',
                    data: filters,
                    success: function(response) {
                        if (response.no_data) {
                            $('#dashboard-body').hide();
                            $('#no-data-message').show().text(response.message);
                        } else {
                            $('#dashboard-body').show();
                            $('#no-data-message').hide();
                            updateKPIs(response.kpis);
                            updateCharts(response.graficas);
                        }
                    },
                    error: (e) => {
                        alert('Hubo un error al cargar los datos.');
                        console.error(e);
                    },
                    complete: () => $('#dashboard-body').css('opacity', 1)
                });
            }

            function updateKPIs(kpis) {
                $('#kpi-total-registros').text(kpis.totalRegistros);
                $('#kpi-registros-finalizados').text(kpis.porcentajeFinalizados + '%');
                $('#kpi-registros-ejecucion').text(kpis.registrosEjecucion);
                $('#kpi-proveedor-top').text(kpis.proveedorTop);
            }

            function updateCharts(graficas) {
                // renderLineChart(tendenciaMensualChart, 'trendChart', 'Tendencia de Registros por Mes', graficas
                //     .tendenciaPorMes);
                renderTrendChart('trendChart', 'Tendencia de Registros por Mes', graficas.tendenciaPorMes);
                renderPieChart(registrosPorEstadoChart, 'stateChart', 'Registros por Estado',
                    graficas.porEstado);
                renderBarChart(registrosPorTipoRecursoChart, 'resourceChart',
                    'Distribución por Tipo de Recurso', graficas.porTipoRecurso);
            }

            function renderLineChart(instance, canvasId, label, data) {
                const ctx = document.getElementById(canvasId).getContext('2d');
                if (instance) instance.destroy();
                instance = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: label,
                            data: data.data,
                            backgroundColor: 'rgba(78, 115, 223, 0.05)',
                            borderColor: '#4e73df',
                            pointRadius: 3,
                            pointBackgroundColor: '#4e73df',
                            pointBorderColor: '#4e73df',
                            pointHoverRadius: 3,
                            pointHoverBackgroundColor: '#4e73df',
                            pointHoverBorderColor: '#4e73df',
                            pointHitRadius: 10,
                            pointBorderWidth: 2,
                        }]
                    },
                    options: {
                        maintainAspectRatio: false,
                        tooltips: {
                            backgroundColor: "rgb(255,255,255)",
                            bodyFontColor: "#858796",
                            titleFontColor: "#6e707e",
                            borderColor: '#dddfeb',
                            borderWidth: 1,
                            xPadding: 15,
                            yPadding: 15,
                            displayColors: false,
                            caretPadding: 10,
                        },
                        legend: {
                            display: false
                        },
                        scales: {
                            xAxes: [{
                                gridLines: {
                                    color: "rgb(234, 236, 244)",
                                    zeroLineColor: "rgb(234, 236, 244)",
                                    drawBorder: false,
                                    borderDash: [2],
                                    zeroLineBorderDash: [2]
                                },
                                ticks: {
                                    fontColor: "#858796"
                                },
                                display: true
                            }],
                            yAxes: [{
                                ticks: {
                                    fontColor: "#858796",
                                    beginAtZero: true,
                                    padding: 10,
                                    callback: function(value, index, values) {
                                        return value.toLocaleString();
                                    }
                                },
                                gridLines: {
                                    color: "rgb(234, 236, 244)",
                                    zeroLineColor: "rgb(234, 236, 244)",
                                    drawBorder: false,
                                    borderDash: [2],
                                    zeroLineBorderDash: [2]
                                },
                                display: true
                            }],
                        }
                    }
                });
                if (canvasId === 'trendChart') tendenciaMensualChart = instance;
            }

            function renderPieChart(instance, canvasId, label, data) {
                const ctx = document.getElementById(canvasId).getContext('2d');
                if (instance) instance.destroy();

                const total = data.data.reduce((sum, value) => sum + value, 0);

                instance = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            data: data.data,
                            backgroundColor: CHART_COLORS,
                            hoverBackgroundColor: CHART_COLORS.map(color => color + 'cc'),
                            hoverBorderColor: "rgba(234, 236, 244, 1)",
                        }],
                    },
                    options: {
                        maintainAspectRatio: false,
                        tooltips: {
                            backgroundColor: "rgb(255,255,255)",
                            bodyFontColor: "#858796",
                            borderColor: '#dddfeb',
                            borderWidth: 1,
                            xPadding: 15,
                            yPadding: 15,
                            displayColors: true,
                            caretPadding: 10,
                            callbacks: {
                                label: function(tooltipItem, chart) {
                                    const label = chart.labels[tooltipItem.index] || '';
                                    const value = tooltipItem.yLabel || 0;
                                    const percentage = ((value / total) * 100).toFixed(1);
                                    return `${label}: ${value} (${percentage}%)`;
                                }
                            }
                        },
                        legend: {
                            display: true,
                            position: 'bottom',
                        },
                        cutoutPercentage: 80,
                    },
                    plugins: [{
                        id: 'doughnutLabels',
                        afterDatasetsDraw: function(chart) {
                            const ctx = chart.ctx;
                            const meta = chart.getDatasetMeta(0);

                            meta.data.forEach((arc, index) => {
                                const value = data.data[index];
                                const percentage = ((value / total) * 100).toFixed(0);

                                // Solo mostrar si el porcentaje es mayor a 5% para evitar amontonamiento
                                if (value > 0 && percentage > 5) {
                                    const midAngle = (arc.startAngle + arc.endAngle) /
                                        2;
                                    const x = arc.x + Math.cos(midAngle) * (arc
                                        .outerRadius * 0.7);
                                    const y = arc.y + Math.sin(midAngle) * (arc
                                        .outerRadius * 0.7);

                                    ctx.fillStyle = 'white';
                                    ctx.font = 'bold 12px Arial';
                                    ctx.textAlign = 'center';
                                    ctx.textBaseline = 'middle';
                                    ctx.strokeStyle = 'black';
                                    ctx.lineWidth = 2;

                                    ctx.strokeText(`${value}`, x, y - 8);
                                    ctx.fillText(`${value}`, x, y - 8);

                                    ctx.strokeText(`(${percentage}%)`, x, y + 8);
                                    ctx.fillText(`(${percentage}%)`, x, y + 8);
                                }
                            });
                        }
                    }]
                });
                if (canvasId === 'stateChart') registrosPorEstadoChart = instance;
            }

            function renderBarChart(instance, canvasId, label, data) {
                const ctx = document.getElementById(canvasId).getContext('2d');
                if (instance) instance.destroy();

                instance = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: label,
                            backgroundColor: CHART_COLORS,
                            hoverBackgroundColor: CHART_COLORS.map(color => color + 'cc'),
                            borderColor: "#4e73df",
                            data: data.data,
                        }],
                    },
                    options: {
                        maintainAspectRatio: false,
                        layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                        },
                        scales: {
                            xAxes: [{
                                gridLines: {
                                    display: false,
                                    drawBorder: false
                                },
                                maxBarThickness: 25,
                                ticks: {
                                    fontColor: "#858796",
                                    autoSkip: false,
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true,
                                    fontColor: "#858796",
                                    padding: 10,
                                    callback: function(value, index, values) {
                                        return value.toLocaleString();
                                    }
                                },
                                gridLines: {
                                    color: "rgb(234, 236, 244)",
                                    zeroLineColor: "rgb(234, 236, 244)",
                                    drawBorder: false,
                                    borderDash: [2],
                                    zeroLineBorderDash: [2]
                                }
                            }],
                        },
                        legend: {
                            display: false
                        },
                        tooltips: {
                            titleMarginBottom: 10,
                            titleFontColor: '#6e707e',
                            titleFontSize: 14,
                            backgroundColor: "rgb(255,255,255)",
                            bodyFontColor: "#858796",
                            borderColor: '#dddfeb',
                            borderWidth: 1,
                            xPadding: 15,
                            yPadding: 15,
                            displayColors: false,
                            caretPadding: 10,
                            callbacks: {
                                label: function(tooltipItem, chart) {
                                    const datasetLabel = chart.datasets[tooltipItem.datasetIndex]
                                        .label || '';
                                    const value = tooltipItem.yLabel;
                                    const total = chart.data.datasets[0].data.reduce((sum, val) => sum +
                                        val, 0);
                                    const percentage = total > 0 ? ((value / total) * 100).toFixed(1) :
                                        0;
                                    return `${datasetLabel}: ${value} (${percentage}%)`;
                                }
                            }
                        },
                    },
                    plugins: [{
                        id: 'barLabels',
                        afterDatasetsDraw: function(chart) {
                            const ctx = chart.ctx;
                            chart.data.datasets.forEach(function(dataset, i) {
                                const meta = chart.getDatasetMeta(i);
                                const total = dataset.data.reduce((sum, val) => sum +
                                    val, 0);
                                if (!meta.hidden) {
                                    meta.data.forEach(function(bar, index) {
                                        const value = dataset.data[index];
                                        if (value > 0) {
                                            const xPos = bar.x;
                                            const yPos = bar.y;
                                            const percentage = total > 0 ? ((
                                                    value / total) * 100)
                                                .toFixed(0) : 0;

                                            ctx.fillStyle = 'black';
                                            ctx.font = '12px Arial';
                                            ctx.textAlign = 'center';
                                            ctx.textBaseline = 'bottom';
                                            ctx.fillText(value, xPos, yPos - 5);
                                            ctx.fillText(`(${percentage}%)`,
                                                xPos, yPos - 20);
                                        }
                                    });
                                }
                            });
                        }
                    }]
                });
                if (canvasId === 'resourceChart') registrosPorTipoRecursoChart = instance;
            }

            function renderTrendChart(canvasId, label, data) {
                const ctx = document.getElementById(canvasId).getContext('2d');

                if (tendenciaMensualChart) {
                    tendenciaMensualChart.destroy();
                }

                const config = {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [{
                            label: label,
                            data: data.data,
                            backgroundColor: 'rgba(78, 115, 223, 0.1)',
                            borderColor: '#4e73df',
                            pointRadius: 5,
                            pointBackgroundColor: '#4e73df',
                            pointBorderColor: '#4e73df',
                            pointHoverRadius: 8,
                            pointHoverBackgroundColor: '#4e73df',
                            pointHoverBorderColor: '#4e73df',
                            pointHitRadius: 10,
                            pointBorderWidth: 2,
                            fill: true,
                            tension: 0.4
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            title: {
                                display: true,
                                text: label,
                                font: {
                                    size: 16,
                                    weight: 'bold'
                                },
                                padding: {
                                    bottom: 30 
                                }
                            },
                            legend: {
                                display: false
                            },
                            tooltip: {
                                mode: 'index',
                                intersect: false,
                                backgroundColor: "rgb(255,255,255)",
                                bodyColor: "#858796",
                                titleColor: "#6e707e",
                                borderColor: '#dddfeb',
                                borderWidth: 1,
                                xPadding: 15,
                                yPadding: 15,
                                displayColors: false,
                                caretPadding: 10,
                                callbacks: {
                                    label: function(tooltipItem) {
                                        return `Cantidad: ${tooltipItem.raw.toLocaleString()}`;
                                    },
                                    title: function(tooltipItems) {
                                        return `Mes: ${tooltipItems[0].label}`;
                                    }
                                }
                            }
                        },
                        scales: {
                            x: {
                                title: {
                                    display: true,
                                    text: 'Mes'
                                },
                                ticks: {
                                    color: "#858796",
                                    maxRotation: 45,
                                    minRotation: 0
                                },
                                grid: {
                                    color: "rgb(234, 236, 244)",
                                    drawBorder: false,
                                    borderDash: [2],
                                    zeroLineBorderDash: [2]
                                }
                            },
                            y: {
                                title: {
                                    display: true,
                                    text: 'Cantidad de Registros'
                                },
                                ticks: {
                                    color: "#858796",
                                    beginAtZero: true,
                                    padding: 10,
                                    stepSize: 1,
                                    callback: function(value) {
                                        return Number.isInteger(value) ? value.toLocaleString() : '';
                                    }
                                },
                                grid: {
                                    color: "rgb(234, 236, 244)",
                                    drawBorder: false,
                                    borderDash: [2],
                                    zeroLineBorderDash: [2]
                                }
                            }
                        }
                    },
                    // Mueve el plugin para mostrar las etiquetas de valor aquí, fuera de 'options'
                    plugins: [{
                        id: 'lineValueLabels',
                        afterDatasetsDraw: function(chart) {
                            const ctx = chart.ctx;
                            chart.data.datasets.forEach((dataset, datasetIndex) => {
                                const meta = chart.getDatasetMeta(datasetIndex);
                                if (!meta.hidden) {
                                    meta.data.forEach((point, index) => {
                                        const value = dataset.data[index];
                                        if (value > 0) {
                                            ctx.fillStyle = '#4e73df';
                                            ctx.font = 'bold 11px Arial';
                                            ctx.textAlign = 'center';
                                            ctx.textBaseline = 'bottom';
                                            ctx.fillText(value, point.x, point.y -
                                                10);
                                        }
                                    });
                                }
                            });
                        }
                    }]
                };

                tendenciaMensualChart = new Chart(ctx, config);
            }

            // --- MANEJADORES DE EVENTOS ---
            $('#dashboard-filters').on('submit', function(e) {
                e.preventDefault();
                loadDashboardData();
            });

            $('#clear-filters-btn').on('click', function() {
                $('#dashboard-filters')[0].reset();
                $('#date-range-picker').val('');
                loadDashboardData();
            });

            $('#export-pdf-btn').on('click', async function() {
                const btn = $(this);
                btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Preparando...'
                );

                // Imágen del footer en Base64
                let footerImageBase64 = null;
                try {
                    // Obtenemos la URL absoluta a la imagen.
                    const imageUrl = new URL('img/powered.png', window.location.origin).href;
                    // Usamos fetch para obtener la imagen como un blob.
                    const response = await fetch(imageUrl);
                    const blob = await response.blob();
                    // Creamos una función para leer el blob como Base64.
                    const readAsDataURL = (blob) => {
                        return new Promise((resolve, reject) => {
                            const reader = new FileReader();
                            reader.onloadend = () => resolve(reader.result);
                            reader.onerror = reject;
                            reader.readAsDataURL(blob);
                        });
                    };
                    footerImageBase64 = await readAsDataURL(blob);
                } catch (error) {
                    console.error("No se pudo cargar la imagen del footer:", error);
                    // Si la imagen no se carga, el proceso puede continuar sin ella.
                }

                // 1. --- CONFIGURACIÓN DEL DOCUMENTO PDF ---
                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);
                const contentHeight = pdfHeight - (margin * 2);

                // --- FUNCIÓN HELPER PARA AÑADIR EL TÍTULO A LA PRIMERA PÁGINA ---
                const addTitleToFirstPage = async (pdfInstance) => {
                    // Recopilar la información dinámica de los filtros
                    const dateRangeText = $('#date-range-picker').val() || "Todo el período";
                    const plataformaText = $('#plataforma-filter').find('option:selected')
                        .text();
                    const medicamentoText = $('#medicamento-filter').find('option:selected')
                        .text();

                    // Se agregaron los nuevos filtros dinámicos
                    const tipoRecursoText = $('#tipo-recurso-filter').find('option:selected')
                        .text();
                    const companiaText = $('#compania-filter').find('option:selected').text();
                    const areaSolicitanteText = $('#area-filter').find(
                        'option:selected').text();

                    const currentDate = new Date().toLocaleString('es-CO', {
                        dateStyle: 'long',
                        timeStyle: 'short'
                    });

                    let filtersHtml = '';
                    if (plataformaText || medicamentoText || tipoRecursoText || companiaText ||
                        areaSolicitanteText) {
                        filtersHtml +=
                            '<div class="d-flex justify-content-center flex-wrap gap-4" style="font-size: 1.1rem;">';
                        if (plataformaText) {
                            filtersHtml +=
                                `<p class="mb-0"><strong>Plataforma:</strong> ${plataformaText}</p>`;
                        }
                        if (medicamentoText) {
                            filtersHtml +=
                                `<p class="mb-0"><strong>Medicamento:</strong> ${medicamentoText}</p>`;
                        }
                        // Agregar los nuevos filtros al HTML
                        if (tipoRecursoText) {
                            filtersHtml +=
                                `<p class="mb-0"><strong>Tipo de Recurso:</strong> ${tipoRecursoText}</p>`;
                        }
                        if (companiaText) {
                            filtersHtml +=
                                `<p class="mb-0"><strong>Compañía:</strong> ${companiaText}</p>`;
                        }
                        if (areaSolicitanteText) {
                            filtersHtml +=
                                `<p class="mb-0"><strong>Área Solicitante:</strong> ${areaSolicitanteText}</p>`;
                        }

                        filtersHtml += '</div>';
                    }

                    // Crear un contenedor temporal fuera de la pantalla
                    const tempTitleContainer = document.createElement('div');
                    // Usamos clases de bootstrap y estilos en línea para asegurar la apariencia
                    tempTitleContainer.className = 'container-fluid';
                    tempTitleContainer.style.cssText = `
                        position: absolute; 
                        top: -9999px; 
                        left: -9999px; 
                        width: 1123px; /* Aprox A4 landscape width */
                        background: white; 
                        padding: 20px; 
                        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                    `;

                                // Se cambia el título principal a "Reporte de Registros"
                                tempTitleContainer.innerHTML = `
                        <div class="text-center mb-4">
                            <h2 style="color: #4e73df; margin-bottom: 0.5rem; font-size: 2rem; font-weight: 700;">Reporte de Registros</h2>
                            <h4 style="color: #36b9cc; margin-bottom: 0.5rem; font-size: 1.5rem; font-weight: 500;">Período: ${dateRangeText}</h4>
                            ${filtersHtml}
                            <p style="color: #858796; margin-top: 1rem; font-size: 0.9rem;">Reporte generado el ${currentDate}</p>
                            <hr style="margin-top: 1rem; margin-bottom: 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);

                        // Calculamos el tamaño de la imagen del título
                        const titleImgWidth = contentWidth;
                        const titleImgHeight = titleImgWidth * (imgProps.height / imgProps
                            .width);

                        // Añadimos la imagen del título al principio de la página
                        pdfInstance.addImage(imgData, 'PNG', margin, margin, titleImgWidth,
                            titleImgHeight);

                        // Retornamos la altura que ocupó el título + un pequeño espacio
                        return titleImgHeight + 5;
                    } finally {
                        // Siempre eliminamos el contenedor temporal
                        document.body.removeChild(tempTitleContainer);
                    }
                };

                // --- FUNCIÓN HELPER PARA AÑADIR EL CONTENIDO DE UNA PÁGINA ---
                const addPageContent = async (pdfInstance, element, yOffset = 0) => {
                    const canvas = await html2canvas(element, {
                        scale: 2,
                        useCORS: true,
                        logging: false
                    });
                    const imgData = canvas.toDataURL('image/png');
                    const imgProps = pdfInstance.getImageProperties(imgData);

                    const availableHeight = contentHeight - yOffset;
                    let imgWidth = contentWidth;
                    let imgHeight = imgWidth * (imgProps.height / imgProps.width);

                    // Si el contenido excede el espacio disponible, lo re-escalamos
                    if (imgHeight > availableHeight) {
                        imgHeight = availableHeight;
                        imgWidth = imgHeight / (imgProps.height / imgProps.width);
                    }

                    const x = margin + (contentWidth - imgWidth) / 2; // Centrar horizontalmente
                    const y = margin + yOffset;

                    pdfInstance.addImage(imgData, 'PNG', x, y, imgWidth, imgHeight);
                };


                // 2. --- 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]);

                    if (pageElement.is(':visible')) {
                        // Si no es la primera página, simplemente la añadimos
                        if (i > 0) {
                            pdf.addPage();
                            await addPageContent(pdf, pageElement.get(0));
                        } else {
                            // Es la primera página (#pdf-page-1)
                            // Primero, añadimos el título y obtenemos la altura que ocupó
                            const titleHeightOffset = await addTitleToFirstPage(pdf);
                            // Luego, añadimos el contenido de la página debajo del título
                            await addPageContent(pdf, pageElement.get(0), titleHeightOffset);
                        }
                    }
                }

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

                    // --- Añadir numeración de página (a la derecha) ---
                    pdf.setFontSize(8);
                    pdf.setTextColor(150);
                    pdf.text(
                        `Página ${i} de ${pageCount}`,
                        pdfWidth - margin, // Alineado a la derecha del contenido
                        pdfHeight - (margin / 2), {
                            align: 'right'
                        }
                    );

                    // --- Añadir imagen del footer (centrada) ---
                    if (footerImageBase64) {
                        // Define el tamaño deseado para la imagen en el footer (ej. 30mm de ancho)
                        const footerImgWidth = 30;
                        // jsPDF necesita las propiedades de la imagen para calcular la altura proporcional
                        const imgProps = pdf.getImageProperties(footerImageBase64);
                        const footerImgHeight = footerImgWidth * (imgProps.height / imgProps.width);

                        // Calcular la posición X para centrar la imagen
                        const footerImgX = (pdfWidth - footerImgWidth) / 2;

                        // Calcular la posición Y para colocarla en el margen inferior
                        const footerImgY = pdfHeight - footerImgHeight - (margin / 3);

                        pdf.addImage(
                            footerImageBase64,
                            'PNG', // El formato es PNG ya que es lo que solemos usar para logos con transparencia
                            footerImgX,
                            footerImgY,
                            footerImgWidth,
                            footerImgHeight
                        );
                    }
                }

                // Se cambia el nombre del archivo de salida a "Reporte_Registros"
                const fileName = `Reporte_Registros_${new Date().toISOString().slice(0,10)}.pdf`;
                pdf.save(fileName);

                btn.prop('disabled', false).html('<i class="fas fa-file-pdf"></i> Exportar a PDF');
            });


            // Carga inicial
            loadDashboardData();
        });
    </script>
@endpush