@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 class="mb-3" id="tourBancosAccesosRapidos">
                        <h3 class="text-lg font-semibold text-gray-700 mb-2" >Accesos rápidos</h3>
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-2" >
                            <a href="{{ route('cuentas.index') }}" class="bg-white border border-blue-200 hover:border-blue-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-blue-100 group-hover:bg-blue-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-blue-700 text-xl">account_balance_wallet</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Cuentas bancarias</h4>
                                    <p class="text-sm text-gray-500">Gestiona y agrega cuentas bancarias</p>
                                </div>
                            </a>

                            <a href="{{ route('formas-pago.index') }}" class="bg-white border border-green-200 hover:border-green-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-blue-100 group-hover:bg-blue-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-blue-700 text-xl">credit_card</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Formas de pago</h4>
                                    <p class="text-sm text-gray-500">Administra formas y tipos de pago</p>
                                </div>
                            </a>

                            <a href="{{ route('bancos-conciliacion.index') }}" class="bg-white border border-purple-200 hover:border-purple-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-blue-100 group-hover:bg-blue-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-blue-700 text-xl">check_circle</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Conciliación bancaria</h4>
                                    <p class="text-sm text-gray-500">Realiza y revisa conciliaciones</p>
                                </div>
                            </a>

                            <a href="{{ route('consulta-movimientos.index') }}" class="bg-white border border-amber-200 hover:border-amber-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <div class="bg-blue-100 group-hover:bg-blue-200 rounded-full p-2 mb-2 transition-colors">
                                        <i class="material-icons text-blue-700 text-xl">search</i>
                                    </div>
                                    <h4 class="text-base font-semibold text-gray-700 mb-0.5">Movimientos bancarios</h4>
                                    <p class="text-sm text-gray-500">Consulta y filtra movimientos bancarios</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <!-- Header con título y filtros -->
                    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4" id="tourBancosPeriodoSelector">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">Dashboard</h2>
                            <p class="text-sm text-gray-500">Año {{ $year }}</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <label for="mes" class="text-sm text-gray-600">Mes:</label>
                            <select id="mes" class="border border-gray-300 rounded px-2 py-1 text-sm mb-1">
                                @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" {{ $selectedMonth == $i ? 'selected' : '' }}>
                                    {{ \Carbon\Carbon::create()->month($i)->locale('es')->monthName }}
                                    </option>
                                    @endfor
                            </select>
                            <label for="anio" class="text-sm text-gray-600 ml-2">Año:</label>
                            <select id="anio" class="border border-gray-300 rounded px-2 py-1 text-sm mb-1">
                                @for($y = date('Y'); $y >= date('Y') - 5; $y--)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>



                    <!-- KPIs principales del mes -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4" id="tourBancosKPIs">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-blue-100 p-2">
                                <i class="material-icons text-blue-500 text-2xl">account_balance</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Saldo inicial</div>
                                <div class="mt-1 text-xl font-semibold text-blue-700">$ {{ number_format($saldoTotal, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">{{ $totalCuentas }} cuentas</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-emerald-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-emerald-100 p-2">
                                <i class="material-icons text-emerald-500 text-2xl">trending_up</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Depositos (<span class="mes">{{ \Carbon\Carbon::create()->month($selectedMonth)->locale('es')->monthName }}</span>)</div>
                                <div id="ingresosMes" class="mt-1 text-xl font-semibold text-emerald-700">$ {{ number_format($ingresosMes, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Abonos bancarios</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-red-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-red-100 p-2">
                                <i class="material-icons text-red-500 text-2xl">trending_down</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Retiros (<span class="mes">{{ \Carbon\Carbon::create()->month($selectedMonth)->locale('es')->monthName }}</span>)</div>
                                <div id="egresosMes" class="mt-1 text-xl font-semibold text-red-700">$ {{ number_format($egresosMes, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Cargos bancarios</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-amber-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-amber-100 p-2">
                                <i class="material-icons text-amber-500 text-2xl">attach_money</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Saldo final (<span class="mes">{{ \Carbon\Carbon::create()->month($selectedMonth)->locale('es')->monthName }}</span>)</div>
                                <div id="netoMes" class="mt-1 text-xl font-semibold text-amber-700">$ {{ number_format($netoMes, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Depositos - Retiros</div>
                            </div>
                        </div>
                    </div>
                    <br>
                    <hr>

                    <!-- Tarjetas de información y estadísticas -->
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-3" id="tourBancosTarjetas">
                        <!-- Conciliación Bancaria -->
                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-blue-500">check_circle_outline</i>
                                Conciliación bancaria
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-green-500 text-sm">check_circle</i>
                                        Conciliadas
                                    </span>
                                    <span class="text-lg font-bold text-green-600">{{ $cuentasConciliadas }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-yellow-500 text-sm">schedule</i>
                                        Pendientes
                                    </span>
                                    <span class="text-lg font-bold text-yellow-600">{{ $cuentasPendientes }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-red-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-red-500 text-sm">warning</i>
                                        Diferencias
                                    </span>
                                    <span class="text-lg font-bold text-red-600">{{ $diferenciasConciliacion }}</span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Tasa de éxito</span>
                                    <span class="text-sm font-bold text-blue-600">
                                        {{ $cuentasConciliadas + $cuentasPendientes > 0 ? number_format(($cuentasConciliadas / ($cuentasConciliadas + $cuentasPendientes)) * 100, 1) : 0 }}%
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Actividad de Movimientos -->
                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-purple-500">receipt_long</i>
                                Actividad de movimientos conciliados
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-red-500 text-sm">arrow_upward</i>
                                        Depositos
                                    </span>
                                    <span class="text-lg font-bold text-blue-600">{{ $totalMovimientos }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-purple-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-red-500 text-sm">arrow_downward</i>
                                        Retiros
                                    </span>
                                    <span class="text-lg font-bold text-purple-600">{{ $totalMovimientosBancarios }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-gray-500 text-sm">account_balance</i>
                                        Cuentas activas
                                    </span>
                                    <span class="text-lg font-bold text-gray-600">{{ $totalCuentas }}</span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Promedio por cuenta</span>
                                    <span class="text-sm font-bold text-purple-600">
                                        {{ $totalCuentas > 0 ? number_format($totalMovimientos / $totalCuentas, 1) : 0 }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Rendimiento Financiero -->
                        <!-- Rendimiento Financiero -->
                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-emerald-500">trending_up</i>
                                Rendimiento del mes
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-emerald-50 rounded">
                                    <span class="text-sm text-gray-600">Flujo positivo</span>
                                    <span class="text-lg font-bold text-emerald-600">
                                        {{ $netoMes >= 0 ? 'Sí' : 'No' }}
                                    </span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                    <span class="text-sm text-gray-600">Promedio diario</span>
                                    <span class="text-base font-bold text-blue-600">$ {{ number_format(abs($netoMes) / 30, 2) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-amber-50 rounded">
                                    <span class="text-sm text-gray-600">Margen</span>
                                    <span class="text-base font-bold text-amber-600">
                                        {{ $ingresosMes > 0 ? number_format(($netoMes / $ingresosMes) * 100, 1) : 0 }}%
                                    </span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Estado</span>
                                    <span class="text-xs font-medium {{ $netoMes >= 0 ? 'text-green-600' : 'text-red-600' }}">
                                        {{ $netoMes >= 0 ? '✓ Positivo' : '⚠ Negativo' }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Información del Sistema -->
                        <div class="rounded-lg border border-gray-200 p-4 bg-white">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-gray-500">info</i>
                                Información del sistema
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                    <span class="text-sm text-gray-600">Período actual</span>
                                    <span class="text-sm font-bold text-gray-700">
                                        {{ \Carbon\Carbon::create()->month($selectedMonth)->locale('es')->monthName }} {{ $year }}
                                    </span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                    <span class="text-sm text-gray-600">Última actualización</span>
                                    <span class="text-sm font-bold text-gray-700">{{ now()->format('H:i') }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                    <span class="text-sm text-gray-600 flex items-center gap-1">
                                        <i class="material-icons text-green-500 text-sm">check_circle</i>
                                        Estado
                                    </span>
                                    <span class="text-sm font-bold text-green-600">Operativo</span>
                                </div>
                                <div class="pt-2 border-t flex items-center justify-between">
                                    <span class="text-xs text-gray-500">Fecha</span>
                                    <span class="text-xs font-medium text-gray-700">{{ now()->format('d/m/Y') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Gráficos de visualización -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4" id="tourBancosGraficas">
                        <!-- Gráfico de Ingresos vs Egresos -->
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-base font-semibold text-gray-700">Depósitos vs Retiros</h4>
                                <i class="material-icons text-gray-400">bar_chart</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartMovimientos"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Compara los cargos y abonos bancarios de los últimos 12 meses.</p>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-base font-semibold text-gray-700">Saldo final</h4>
                                <i class="material-icons text-gray-400">show_chart</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartFlujo"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Visualiza el saldo final mensual.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="pdfMantenimientoModal" class="fixed inset-0 z-[9999] hidden items-center justify-center bg-slate-900/60 px-4" role="dialog" aria-modal="true" aria-labelledby="pdfMantenimientoTitulo">
    <div class="w-full max-w-2xl overflow-hidden rounded-2xl border border-emerald-200 bg-white shadow-2xl">
        <div class="flex items-start justify-between gap-3 bg-gradient-to-r from-emerald-50 to-green-100 px-5 py-4">
            <div class="flex items-start gap-3">
                <span class="inline-flex h-11 w-11 items-center justify-center rounded-full bg-emerald-200/70">
                    <i class="material-icons text-emerald-700">check_circle</i>
                </span>
                <div>
                    <h3 id="pdfMantenimientoTitulo" class="text-lg font-semibold text-slate-800">Funcionalidad de PDFs para conciliación bancaria habilitada</h3>
                    <p class="mt-1 text-sm text-slate-700">El módulo de importación de PDFs ya está disponible nuevamente.</p>
                </div>
            </div>
            <button id="closePdfMantenimientoModalX" type="button" class="rounded-md p-1 text-slate-600 transition hover:bg-white/70 hover:text-slate-900" aria-label="Cerrar aviso">
                <i class="material-icons">close</i>
            </button>
        </div>

        <div class="space-y-4 px-5 py-5">
            <p class="text-sm text-slate-700">
                La opción para importar PDFs de movimientos bancarios ya se encuentra habilitada.
            </p>
            <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-3">
                <p class="text-sm font-medium text-slate-800">Actualización completada</p>
                <p class="mt-1 text-sm text-slate-700">
                    Se aplicaron mejoras al motor de importación para mayor estabilidad,
                    consistencia de formato y compatibilidad con reportes históricos.
                </p>
            </div>

            <div class="grid gap-2 md:grid-cols-3">
                <div class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <i class="material-icons text-emerald-700">task_alt</i>
                    <div>
                        <p class="text-sm font-medium text-slate-800">Módulo activo</p>
                        <p class="text-xs text-slate-600">La importación de PDF ya está en operación.</p>
                    </div>
                </div>
                <div class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <i class="material-icons text-emerald-700">rule</i>
                    <div>
                        <p class="text-sm font-medium text-slate-800">Datos seguros</p>
                        <p class="text-xs text-slate-600">La información registrada permanece intacta.</p>
                    </div>
                </div>
                <div class="flex items-start gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3">
                    <i class="material-icons text-sky-700">celebration</i>
                    <div>
                        <p class="text-sm font-medium text-slate-800">Listo para usarse</p>
                        <p class="text-xs text-slate-600">Ya puedes continuar con la importación de movimientos.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex justify-end border-t border-slate-200 px-5 py-4">
            <button id="closePdfMantenimientoModal" type="button" class="rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-700">
                Entendido
            </button>
        </div>
    </div>
</div>

<div id="bancos-data"
    data-saldo-total="{{ $saldoTotal }}"
    data-ingresos-mes="{{ $ingresosMes }}"
    data-egresos-mes="{{ $egresosMes }}"
    data-cuentas-conciliadas="{{ $cuentasConciliadas }}"
    data-cuentas-pendientes="{{ $cuentasPendientes }}"
    data-diferencias-conciliacion="{{ $diferenciasConciliacion }}"
    style="display: none;"></div>

@endsection

@push('js')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(function() {

        const $pdfMantenimientoModal = $('#pdfMantenimientoModal');
        const showPdfHabilitadoModal = @json($showPdfHabilitadoModal);
        let avisoPdfGuardado = false;

        function registrarCierreAvisoPdf() {
            if (!showPdfHabilitadoModal || avisoPdfGuardado) {
                return;
            }

            avisoPdfGuardado = true;

            $.ajax({
                url: '{{ route("bancos-modulo.pdfHabilitadoVisto") }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                }
            }).fail(function() {
                avisoPdfGuardado = false;
            });
        }

        function cerrarPdfMantenimientoModal() {
            registrarCierreAvisoPdf();
            $pdfMantenimientoModal.addClass('hidden').removeClass('flex');
            $('body').removeClass('overflow-hidden');
        }

        if ($pdfMantenimientoModal.length && showPdfHabilitadoModal) {
            $pdfMantenimientoModal.removeClass('hidden').addClass('flex');
            $('body').addClass('overflow-hidden');
        }

        $('#closePdfMantenimientoModal, #closePdfMantenimientoModalX').on('click', cerrarPdfMantenimientoModal);

        $pdfMantenimientoModal.on('click', function(e) {
            if (e.target === this) {
                cerrarPdfMantenimientoModal();
            }
        });

        $(document).on('keydown', function(e) {
            if (e.key === 'Escape' && $pdfMantenimientoModal.hasClass('flex')) {
                cerrarPdfMantenimientoModal();
            }
        });
        
        // Datos reales del backend
        const datosIngresos = @json($datosIngresos);
        const datosEgresos = @json($datosEgresos);
        const meses = @json($meses);

        // Calcular flujo neto
        const datosNeto = datosIngresos.map((ing, idx) => ing - datosEgresos[idx]);

        // Gráfico de Ingresos vs Egresos
        const ctxMovimientos = document.getElementById('chartMovimientos');
        if (ctxMovimientos) {
            new Chart(ctxMovimientos.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: meses,
                    datasets: [{
                            label: 'Depósitos',
                            data: datosIngresos,
                            backgroundColor: '#10b981',
                            borderColor: '#059669',
                            borderWidth: 1
                        },
                        {
                            label: 'Retiros',
                            data: datosEgresos,
                            backgroundColor: '#ef4444',
                            borderColor: '#dc2626',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0,
                                callback: function(value) {
                                    return '$' + value.toLocaleString('es-MX');
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    }
                }
            });
        }

        // Gráfico de Flujo de Caja Neto
        const ctxFlujo = document.getElementById('chartFlujo');
        if (ctxFlujo) {
            new Chart(ctxFlujo.getContext('2d'), {
                type: 'line',
                data: {
                    labels: meses,
                    datasets: [{
                        label: 'Saldo final',
                        data: datosNeto,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        tension: 0.4,
                        pointRadius: 4,
                        pointBackgroundColor: '#3b82f6',
                        pointBorderColor: '#1e40af',
                        pointBorderWidth: 2,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                precision: 0,
                                callback: function(value) {
                                    return '$' + value.toLocaleString('es-MX');
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    }
                }
            });
        }

        // AJAX para cambio de mes
        const $selectMes = $('#mes');
        const $ingresosMesEl = $('#ingresosMes');
        const $egresosMesEl = $('#egresosMes');
        const $netoMesEl = $('#netoMes');

        function formatMoney(n) {
            try {
                return new Intl.NumberFormat('es-MX', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(n || 0);
            } catch (e) {
                return (n || 0).toFixed(2);
            }
        }

        function cargarDatos() {
            const mes = $('#mes').val();
            const anio = $('#anio').val();
            const mesNombre = $('#mes').find('option:selected').text();

            // Mostrar indicador de carga
            $('.mes').text('Cargando...');

            $.ajax({
                url: '{{ route("bancos-modulo.getData") }}',
                method: 'POST',
                data: {
                    mes: mes,
                    year: anio,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        const data = response.data;

                        // Actualizar texto del mes
                        $('.mes').text(data.mesNombre);

                        // Actualizar KPIs principales
                        $('#ingresosMes').text('$ ' + data.ingresosMes);
                        $('#egresosMes').text('$ ' + data.egresosMes);
                        $('#netoMes').text('$ ' + data.netoMes);

                        // Actualizar valores en las tarjetas de conciliación
                        $('.text-green-600').eq(0).text(data.cuentasConciliadas);
                        $('.text-yellow-600').eq(0).text(data.cuentasPendientes);
                        $('.text-red-600').eq(0).text(data.diferenciasConciliacion);

                        // Actualizar tasa de éxito
                        $('.text-blue-600').filter(function() {
                            return $(this).parent().find('.text-gray-500').text().includes('Tasa de éxito');
                        }).text(data.tasaConciliacion + '%');

                        // Actualizar actividad de movimientos
                        $('.text-blue-600').eq(1).text(data.totalMovimientos);
                        $('.text-purple-600').eq(0).text(data.totalMovimientosBancarios);
                        $('.text-gray-600').eq(-1).text(data.totalCuentas);

                        // Actualizar promedio por cuenta
                        $('.text-purple-600').filter(function() {
                            return $(this).parent().find('.text-gray-500').text().includes('Promedio por cuenta');
                        }).text(data.promedioMovimientos);

                        // Actualizar rendimiento del mes
                        $('.text-emerald-600').eq(0).text(data.netoMesRaw >= 0 ? 'Sí' : 'No');
                        $('.text-blue-600').filter(function() {
                            return $(this).text().includes('$') && $(this).parent().find('.text-gray-600').text().includes('Promedio diario');
                        }).text('$ ' + data.promedioDiario);
                        $('.text-amber-600').eq(0).text(data.margen + '%');

                        // Actualizar estado del flujo
                        const estadoFlujo = data.netoMesRaw >= 0 ? '✓ Positivo' : '⚠ Negativo';
                        const estadoClass = data.netoMesRaw >= 0 ? 'text-green-600' : 'text-red-600';
                        $('.text-xs.font-medium').filter(function() {
                            return $(this).parent().find('.text-gray-500').text().includes('Estado');
                        }).removeClass('text-green-600 text-red-600').addClass(estadoClass).text(estadoFlujo);

                        // Mostrar mensaje de éxito
                        console.log('Datos actualizados correctamente');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error al cargar datos:', error);
                    $('.mes').text(mesNombre);
                    alert('Error al cargar los datos. Por favor, intente nuevamente.');
                }
            });
        }

        $selectMes.on('change', cargarDatos);
        $('#anio').on('change', cargarDatos);
        // Iniciar tour si corresponde
        if (window.TourManager) {
            TourManager.start('bancosHome');
        }
    });
</script>
@endpush