@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => ''])

@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-2">
        <div class="row justify-content-center">
            <div class="col-lg-12">
                <div class="bg-white shadow rounded-lg p-4">
                    <div id="dashboard-data" class="hidden"
                        data-labels='@json($labels ?? [])'
                        data-ene='@json(($datasetsMonths["Ene"] ?? []))'
                        data-feb='@json(($datasetsMonths["Feb"] ?? []))'
                        data-mar='@json(($datasetsMonths["Mar"] ?? []))'
                        data-abr='@json(($datasetsMonths["Abr"] ?? []))'
                        data-may='@json(($datasetsMonths["May"] ?? []))'
                        data-jun='@json(($datasetsMonths["Jun"] ?? []))'
                        data-jul='@json(($datasetsMonths["Jul"] ?? []))'
                        data-ago='@json(($datasetsMonths["Ago"] ?? []))'
                        data-sep='@json(($datasetsMonths["Sep"] ?? []))'
                        data-oct='@json(($datasetsMonths["Oct"] ?? []))'
                        data-nov='@json(($datasetsMonths["Nov"] ?? []))'
                        data-dic='@json(($datasetsMonths["Dic"] ?? []))'
                        data-p-ene='@json(($datasetsMonthsPolizas["Ene"] ?? []))'
                        data-p-feb='@json(($datasetsMonthsPolizas["Feb"] ?? []))'
                        data-p-mar='@json(($datasetsMonthsPolizas["Mar"] ?? []))'
                        data-p-abr='@json(($datasetsMonthsPolizas["Abr"] ?? []))'
                        data-p-may='@json(($datasetsMonthsPolizas["May"] ?? []))'
                        data-p-jun='@json(($datasetsMonthsPolizas["Jun"] ?? []))'
                        data-p-jul='@json(($datasetsMonthsPolizas["Jul"] ?? []))'
                        data-p-ago='@json(($datasetsMonthsPolizas["Ago"] ?? []))'
                        data-p-sep='@json(($datasetsMonthsPolizas["Sep"] ?? []))'
                        data-p-oct='@json(($datasetsMonthsPolizas["Oct"] ?? []))'
                        data-p-nov='@json(($datasetsMonthsPolizas["Nov"] ?? []))'
                        data-p-dic='@json(($datasetsMonthsPolizas["Dic"] ?? []))'
                        data-ecb-ene='@json(($datasetsMonthsEcb["Ene"] ?? []))'
                        data-ecb-feb='@json(($datasetsMonthsEcb["Feb"] ?? []))'
                        data-ecb-mar='@json(($datasetsMonthsEcb["Mar"] ?? []))'
                        data-ecb-abr='@json(($datasetsMonthsEcb["Abr"] ?? []))'
                        data-ecb-may='@json(($datasetsMonthsEcb["May"] ?? []))'
                        data-ecb-jun='@json(($datasetsMonthsEcb["Jun"] ?? []))'
                        data-ecb-jul='@json(($datasetsMonthsEcb["Jul"] ?? []))'
                        data-ecb-ago='@json(($datasetsMonthsEcb["Ago"] ?? []))'
                        data-ecb-sep='@json(($datasetsMonthsEcb["Sep"] ?? []))'
                        data-ecb-oct='@json(($datasetsMonthsEcb["Oct"] ?? []))'
                        data-ecb-nov='@json(($datasetsMonthsEcb["Nov"] ?? []))'
                        data-ecb-dic='@json(($datasetsMonthsEcb["Dic"] ?? []))'>
                    </div>
                    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
                        <div>
                            <h2 class="text-xl font-semibold text-gray-800">Panel de control</h2>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 mt-4">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white">
                            <div class="text-xs text-gray-500">Facturas (mes)</div>
                            <div class="mt-1 text-3xl font-semibold text-blue-700">{{ number_format($facturasMes ?? 0) }}</div>
                            <div class="text-xs text-gray-500 mt-1">Periodo: {{ number_format($facturasAnio ?? 0) }}</div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-violet-50 to-white">
                            <div class="text-xs text-gray-500">Complementos (mes)</div>
                            <div class="mt-1 text-3xl font-semibold text-violet-700">{{ number_format($complementosMes ?? 0) }}</div>
                            <div class="text-xs text-gray-500 mt-1">Año: {{ number_format($complementosAnio ?? 0) }}</div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-emerald-50 to-white">
                            <div class="text-xs text-gray-500">Pólizas (mes)</div>
                            <div class="mt-1 text-3xl font-semibold text-emerald-700">{{ number_format($polizasMes ?? 0) }}</div>
                            <div class="text-xs text-gray-500 mt-1">Año: {{ number_format($polizasAnio ?? 0) }}</div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <form method="GET" action="{{ route('mi-espacio.admin') }}" class="flex flex-col md:flex-row gap-3 items-end">
                            <div>
                                <label class="text-sm text-gray-500">Desde</label>
                                <input type="month" name="desde" value="{{ $desde ?? '' }}" class="border border-gray-300 rounded px-2 py-1 text-sm" />
                            </div>
                            <div>
                                <label class="text-sm text-gray-500">Hasta</label>
                                <input type="month" name="hasta" value="{{ $hasta ?? '' }}" class="border border-gray-300 rounded px-2 py-1 text-sm" />
                            </div>
                            <div>
                                <button type="submit" class="px-2 py-1 bg-blue-600 text-white font-weight-bold text-sm rounded mb-1">Aplicar</button>
                            </div>
                        </form>
                    </div>

                    <div class="grid grid-cols-1 gap-6 mt-6">
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-semibold text-gray-700">Facturas por mes agrupadas por trimestre</h3>
                                <span class="text-xs text-gray-400">filtro por rango</span>
                            </div>
                            <div class="h-80">
                                <canvas id="chartFacturasTrimestres" class="w-full h-full"></canvas>
                            </div>
                        </div>
                    </div>

                    @if(!empty($quarterStats))
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
                        @php
                        $qBg = function($label) {
                        $q = is_string($label) ? explode(' ', $label)[0] : '';
                        return match($q) {
                        'Q1' => 'from-blue-50',
                        'Q2' => 'from-emerald-50',
                        'Q3' => 'from-amber-50',
                        'Q4' => 'from-violet-50',
                        default => 'from-gray-50',
                        };
                        };
                        @endphp
                        @foreach($quarterStats as $qs)
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br {{ $qBg($qs['label']) }} to-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-xs text-gray-500">{{ $qs['label'] }}</div>
                                    <div class="mt-1 text-2xl font-semibold text-gray-800">{{ number_format($qs['total'] ?? 0) }}</div>
                                </div>
                                @php
                                $growth = $qs['growth'];
                                $isUp = is_numeric($growth) ? $growth >= 0 : null;
                                $growthText = is_null($growth) ? '—' : (number_format(abs($growth), 1) . '%');
                                @endphp
                                <div class="text-right">
                                    <div class="text-xs text-gray-500">Crecimiento</div>
                                    <div class="font-medium {{ is_null($isUp) ? 'text-gray-400' : ($isUp ? 'text-emerald-600' : 'text-rose-600') }}">
                                        {{ is_null($growth) ? 'N/A' : ($isUp ? '▲ ' : '▼ ') }}{{ $growthText }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-gray-500">Mes pico</div>
                            <div class="text-sm text-gray-800">{{ $qs['peakMonth'] ?? '—' }} <span class="text-gray-500">({{ number_format($qs['peakValue'] ?? 0) }})</span></div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    <div class="grid grid-cols-1 gap-6 mt-6">
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-semibold text-gray-700">Pólizas por mes agrupadas por trimestre</h3>
                                <span class="text-xs text-gray-400">filtro por rango</span>
                            </div>
                            <div class="h-80">
                                <canvas id="chartPolizasTrimestres" class="w-full h-full"></canvas>
                            </div>
                        </div>
                    </div>
                    @if(!empty($quarterStatsPolizas))
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
                        @php
                        $qBg = function($label) {
                        $q = is_string($label) ? explode(' ', $label)[0] : '';
                        return match($q) {
                        'Q1' => 'from-blue-50',
                        'Q2' => 'from-emerald-50',
                        'Q3' => 'from-amber-50',
                        'Q4' => 'from-violet-50',
                        default => 'from-gray-50',
                        };
                        };
                        @endphp
                        @foreach($quarterStatsPolizas as $qs)
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br {{ $qBg($qs['label']) }} to-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-xs text-gray-500">{{ $qs['label'] }}</div>
                                    <div class="mt-1 text-2xl font-semibold text-gray-800">{{ number_format($qs['total'] ?? 0) }}</div>
                                </div>
                                @php
                                $growth = $qs['growth'];
                                $isUp = is_numeric($growth) ? $growth >= 0 : null;
                                $growthText = is_null($growth) ? '—' : (number_format(abs($growth), 1) . '%');
                                @endphp
                                <div class="text-right">
                                    <div class="text-xs text-gray-500">Crecimiento</div>
                                    <div class="font-medium {{ is_null($isUp) ? 'text-gray-400' : ($isUp ? 'text-emerald-600' : 'text-rose-600') }}">
                                        {{ is_null($growth) ? 'N/A' : ($isUp ? '▲ ' : '▼ ') }}{{ $growthText }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-gray-500">Mes pico</div>
                            <div class="text-sm text-gray-800">{{ $qs['peakMonth'] ?? '—' }} <span class="text-gray-500">({{ number_format($qs['peakValue'] ?? 0) }})</span></div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                    <div class="grid grid-cols-1 gap-6 mt-6">
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-semibold text-gray-700">Estados de cuenta (movimientos) por mes agrupados por trimestre</h3>
                                <span class="text-xs text-gray-400">filtro por rango</span>
                            </div>
                            <div class="h-80">
                                <canvas id="chartEcbTrimestres" class="w-full h-full"></canvas>
                            </div>
                        </div>
                    </div>

                    @if(!empty($quarterStatsEcb))
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-4">
                        @php
                        $qBg = function($label) {
                        $q = is_string($label) ? explode(' ', $label)[0] : '';
                        return match($q) {
                        'Q1' => 'from-blue-50',
                        'Q2' => 'from-emerald-50',
                        'Q3' => 'from-amber-50',
                        'Q4' => 'from-violet-50',
                        default => 'from-gray-50',
                        };
                        };
                        @endphp
                        @foreach($quarterStatsEcb as $qs)
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br {{ $qBg($qs['label']) }} to-white">
                            <div class="flex items-center justify-between">
                                <div>
                                    <div class="text-xs text-gray-500">{{ $qs['label'] }}</div>
                                    <div class="mt-1 text-2xl font-semibold text-gray-800">{{ number_format($qs['total'] ?? 0) }}</div>
                                </div>
                                @php
                                $growth = $qs['growth'];
                                $isUp = is_numeric($growth) ? $growth >= 0 : null;
                                $growthText = is_null($growth) ? '—' : (number_format(abs($growth), 1) . '%');
                                @endphp
                                <div class="text-right">
                                    <div class="text-xs text-gray-500">Crecimiento</div>
                                    <div class="font-medium {{ is_null($isUp) ? 'text-gray-400' : ($isUp ? 'text-emerald-600' : 'text-rose-600') }}">
                                        {{ is_null($growth) ? 'N/A' : ($isUp ? '▲ ' : '▼ ') }}{{ $growthText }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-3 text-xs text-gray-500">Mes pico</div>
                            <div class="text-sm text-gray-800">{{ $qs['peakMonth'] ?? '—' }} <span class="text-gray-500">({{ number_format($qs['peakValue'] ?? 0) }})</span></div>
                        </div>
                        @endforeach
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const dataEl = document.getElementById('dashboard-data');
        const labels = JSON.parse(dataEl?.dataset?.labels || '[]');
        const ene = JSON.parse(dataEl?.dataset?.ene || '[]');
        const feb = JSON.parse(dataEl?.dataset?.feb || '[]');
        const mar = JSON.parse(dataEl?.dataset?.mar || '[]');
        const abr = JSON.parse(dataEl?.dataset?.abr || '[]');
        const may = JSON.parse(dataEl?.dataset?.may || '[]');
        const jun = JSON.parse(dataEl?.dataset?.jun || '[]');
        const jul = JSON.parse(dataEl?.dataset?.jul || '[]');
        const ago = JSON.parse(dataEl?.dataset?.ago || '[]');
        const sep = JSON.parse(dataEl?.dataset?.sep || '[]');
        const oct = JSON.parse(dataEl?.dataset?.oct || '[]');
        const nov = JSON.parse(dataEl?.dataset?.nov || '[]');
        const dic = JSON.parse(dataEl?.dataset?.dic || '[]');
        // Polizas
        const pEne = JSON.parse(dataEl?.dataset?.pEne || dataEl?.dataset?.p_ene || '[]');
        const pFeb = JSON.parse(dataEl?.dataset?.pFeb || dataEl?.dataset?.p_feb || '[]');
        const pMar = JSON.parse(dataEl?.dataset?.pMar || dataEl?.dataset?.p_mar || '[]');
        const pAbr = JSON.parse(dataEl?.dataset?.pAbr || dataEl?.dataset?.p_abr || '[]');
        const pMay = JSON.parse(dataEl?.dataset?.pMay || dataEl?.dataset?.p_may || '[]');
        const pJun = JSON.parse(dataEl?.dataset?.pJun || dataEl?.dataset?.p_jun || '[]');
        const pJul = JSON.parse(dataEl?.dataset?.pJul || dataEl?.dataset?.p_jul || '[]');
        const pAgo = JSON.parse(dataEl?.dataset?.pAgo || dataEl?.dataset?.p_ago || '[]');
        const pSep = JSON.parse(dataEl?.dataset?.pSep || dataEl?.dataset?.p_sep || '[]');
        const pOct = JSON.parse(dataEl?.dataset?.pOct || dataEl?.dataset?.p_oct || '[]');
        const pNov = JSON.parse(dataEl?.dataset?.pNov || dataEl?.dataset?.p_nov || '[]');
        const pDic = JSON.parse(dataEl?.dataset?.pDic || dataEl?.dataset?.p_dic || '[]');
        // Estados de cuenta (sumas)
        const eEne = JSON.parse(dataEl?.dataset?.ecbEne || dataEl?.dataset?.ecb_ene || '[]');
        const eFeb = JSON.parse(dataEl?.dataset?.ecbFeb || dataEl?.dataset?.ecb_feb || '[]');
        const eMar = JSON.parse(dataEl?.dataset?.ecbMar || dataEl?.dataset?.ecb_mar || '[]');
        const eAbr = JSON.parse(dataEl?.dataset?.ecbAbr || dataEl?.dataset?.ecb_abr || '[]');
        const eMay = JSON.parse(dataEl?.dataset?.ecbMay || dataEl?.dataset?.ecb_may || '[]');
        const eJun = JSON.parse(dataEl?.dataset?.ecbJun || dataEl?.dataset?.ecb_jun || '[]');
        const eJul = JSON.parse(dataEl?.dataset?.ecbJul || dataEl?.dataset?.ecb_jul || '[]');
        const eAgo = JSON.parse(dataEl?.dataset?.ecbAgo || dataEl?.dataset?.ecb_ago || '[]');
        const eSep = JSON.parse(dataEl?.dataset?.ecbSep || dataEl?.dataset?.ecb_sep || '[]');
        const eOct = JSON.parse(dataEl?.dataset?.ecbOct || dataEl?.dataset?.ecb_oct || '[]');
        const eNov = JSON.parse(dataEl?.dataset?.ecbNov || dataEl?.dataset?.ecb_nov || '[]');
        const eDic = JSON.parse(dataEl?.dataset?.ecbDic || dataEl?.dataset?.ecb_dic || '[]');

        const ctx = document.getElementById('chartFacturasTrimestres').getContext('2d');
        // Colores por trimestre
        const quarterColors = {
            Q1: '#2563eb',
            Q2: '#10b981',
            Q3: '#f59e0b',
            Q4: '#7c3aed'
        };
        const getQuarterFromLabel = (label) => (label || '').split(' ')[0];
        const colorForIndex = (i) => quarterColors[getQuarterFromLabel(labels[i])] || '#94a3b8';
        const colorArray = labels.map((_, i) => colorForIndex(i));

        const commonDatasetOptions = {
            borderWidth: 0,
            borderSkipped: false,
            borderRadius: 6
        };

        // Utilidad: meses válidos por trimestre
        const monthsForQuarter = (q) => {
            switch (q) {
                case 'Q1':
                    return [1, 2, 3];
                case 'Q2':
                    return [4, 5, 6];
                case 'Q3':
                    return [7, 8, 9];
                case 'Q4':
                    return [10, 11, 12];
                default:
                    return [];
            }
        };

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                        label: '',
                        data: ene,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: feb,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: mar,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: abr,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: may,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: jun,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: jul,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: ago,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: sep,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: oct,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: nov,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: dic,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        filter: (context) => {
                            const label = labels[context.dataIndex] || '';
                            const q = (label || '').split(' ')[0];
                            const monthIndex = context.datasetIndex + 1; // datasets 0..11 => meses 1..12
                            return monthsForQuarter(q).includes(monthIndex);
                        },
                        callbacks: {
                            title: (items) => items?.[0]?.label || '',
                            label: (item) => {
                                const monthNames = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                                const month = monthNames[item.datasetIndex] || '';
                                return `${month}: ${item.parsed.y ?? 0}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#64748b'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0,
                            color: '#64748b'
                        },
                        grid: {
                            color: 'rgba(148,163,184,0.2)'
                        }
                    }
                },
                categoryPercentage: 0.7,
                barPercentage: 0.8
            }
        });

        // Grafica de Polizas por trimestre
        const ctxP = document.getElementById('chartPolizasTrimestres').getContext('2d');
        new Chart(ctxP, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                        label: '',
                        data: pEne,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pFeb,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pMar,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pAbr,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pMay,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pJun,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pJul,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pAgo,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pSep,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pOct,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pNov,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: pDic,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        filter: (context) => {
                            const label = labels[context.dataIndex] || '';
                            const q = (label || '').split(' ')[0];
                            const monthIndex = context.datasetIndex + 1;
                            return monthsForQuarter(q).includes(monthIndex);
                        },
                        callbacks: {
                            title: (items) => items?.[0]?.label || '',
                            label: (item) => {
                                const monthNames = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                                const month = monthNames[item.datasetIndex] || '';
                                return `${month}: ${item.parsed.y ?? 0}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#64748b'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0,
                            color: '#64748b'
                        },
                        grid: {
                            color: 'rgba(148,163,184,0.2)'
                        }
                    }
                },
                categoryPercentage: 0.7,
                barPercentage: 0.8
            }
        });

        // Grafica de Estados de cuenta (conteo de movimientos por mes)
        const ctxE = document.getElementById('chartEcbTrimestres').getContext('2d');
        new Chart(ctxE, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                        label: '',
                        data: eEne,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eFeb,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eMar,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eAbr,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eMay,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eJun,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eJul,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eAgo,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eSep,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eOct,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eNov,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    },
                    {
                        label: '',
                        data: eDic,
                        backgroundColor: colorArray,
                        ...commonDatasetOptions
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        filter: (context) => {
                            const label = labels[context.dataIndex] || '';
                            const q = (label || '').split(' ')[0];
                            const monthIndex = context.datasetIndex + 1;
                            return monthsForQuarter(q).includes(monthIndex);
                        },
                        callbacks: {
                            title: (items) => items?.[0]?.label || '',
                            label: (item) => {
                                const monthNames = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
                                const month = monthNames[item.datasetIndex] || '';
                                return `${month}: ${item.parsed.y ?? 0}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: {
                            display: false
                        },
                        ticks: {
                            color: '#64748b'
                        }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            color: '#64748b'
                        },
                        grid: {
                            color: 'rgba(148,163,184,0.2)'
                        }
                    }
                },
                categoryPercentage: 0.7,
                barPercentage: 0.8
            }
        });
    });
</script>
@endpush