@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="flex flex-col md:flex-row md:items-end md:justify-between gap-4">
                        <div>
                            <h2 class="text-xl font-semibold text-gray-800">Dashboard de Bancos</h2>
                            <p class="text-sm text-gray-500">Gestión de ingresos, egresos y conciliaciones - Año {{ $year ?? date('Y') }}</p>
                        </div>
                    </div>
                    
                    <div id="bancos-data" class="hidden"
                        data-saldo-total='@json($saldoTotal ?? 0)'
                        data-ingresos-mes='@json($ingresosMes ?? 45000)'
                        data-egresos-mes='@json($egresosMes ?? 32000)'
                        data-cuentas-conciliadas='@json($cuentasConciliadas ?? 2)'
                        data-cuentas-pendientes='@json($cuentasPendientes ?? 1)'
                        data-diferencias-conciliacion='@json($diferenciasConciliacion ?? 0)'>
                    </div>

                    <!-- KPIs principales -->
                    <div class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-4 gap-4 mt-4">
                        <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-3xl">account_balance_wallet</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Saldo Total</div>
                                <div id="saldoTotal" class="mt-1 text-2xl font-semibold text-blue-700">$ {{ number_format($saldoTotal ?? 0, 2) }}</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-3xl">trending_up</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Ingresos (mes)</div>
                                <div id="ingresosMes" class="mt-1 text-2xl font-semibold text-emerald-700">$ {{ number_format($ingresosMes ?? 0, 2) }}</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-3xl">trending_down</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Egresos (mes)</div>
                                <div id="egresosMes" class="mt-1 text-2xl font-semibold text-red-700">$ {{ number_format($egresosMes ?? 0, 2) }}</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-3xl">account_balance</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Neto (mes)</div>
                                <div id="netoMes" class="mt-1 text-2xl font-semibold text-amber-700">$ {{ number_format(($ingresosMes ?? 0) - ($egresosMes ?? 0), 2) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Selector de mes -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
                        <div>
                            <label for="mes" class="block text-sm font-medium text-gray-700 mb-2">Mes</label>
                            <select id="mes" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                @php($sm = ($selectedMonth ?? (int)date('n')))
                                <option value="1" {{ $sm==1  ? 'selected' : '' }}>Enero</option>
                                <option value="2" {{ $sm==2  ? 'selected' : '' }}>Febrero</option>
                                <option value="3" {{ $sm==3  ? 'selected' : '' }}>Marzo</option>
                                <option value="4" {{ $sm==4  ? 'selected' : '' }}>Abril</option>
                                <option value="5" {{ $sm==5  ? 'selected' : '' }}>Mayo</option>
                                <option value="6" {{ $sm==6  ? 'selected' : '' }}>Junio</option>
                                <option value="7" {{ $sm==7  ? 'selected' : '' }}>Julio</option>
                                <option value="8" {{ $sm==8  ? 'selected' : '' }}>Agosto</option>
                                <option value="9" {{ $sm==9  ? 'selected' : '' }}>Septiembre</option>
                                <option value="10" {{ $sm==10 ? 'selected' : '' }}>Octubre</option>
                                <option value="11" {{ $sm==11 ? 'selected' : '' }}>Noviembre</option>
                                <option value="12" {{ $sm==12 ? 'selected' : '' }}>Diciembre</option>
                            </select>
                        </div>
                    </div>

                    <!-- Indicadores de Conciliación -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-green-50 to-white">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <span class="material-icons text-green-500">check_circle</span>
                                    <span class="font-semibold text-gray-700">Cuentas Conciliadas</span>
                                </div>
                            </div>
                            <div class="text-3xl font-bold text-green-600 mb-2" id="cuentasConciliadas">{{ $cuentasConciliadas ?? 2 }}</div>
                            <a href="#" class="text-green-700 hover:underline text-sm">Ver detalles</a>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-yellow-50 to-white">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <span class="material-icons text-yellow-500">hourglass_empty</span>
                                    <span class="font-semibold text-gray-700">Conciliaciones Pendientes</span>
                                </div>
                            </div>
                            <div class="text-3xl font-bold text-yellow-600 mb-2" id="cuentasPendientes">{{ $cuentasPendientes ?? 1 }}</div>
                            <a href="#" class="text-yellow-700 hover:underline text-sm">Conciliar ahora</a>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-orange-50 to-white">
                            <div class="flex items-center justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <span class="material-icons text-orange-500">error_outline</span>
                                    <span class="font-semibold text-gray-700">Diferencias Detectadas</span>
                                </div>
                            </div>
                            <div class="text-3xl font-bold text-orange-600 mb-2" id="diferencias">{{ $diferenciasConciliacion ?? 0 }}</div>
                            <a href="#" class="text-orange-700 hover:underline text-sm">Revisar diferencias</a>
                        </div>
                    </div>

                    <!-- Gráficos de visualización -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                        <!-- Gráfico de Ingresos vs Egresos -->
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-sm font-semibold text-gray-700">Ingresos vs Egresos</h3>
                                <span class="text-xs text-gray-400">Mensual</span>
                            </div>
                            <div class="h-72">
                                <canvas id="chartMovimientos" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Comparativo mensual de movimientos bancarios.</p>
                        </div>

                        <!-- Gráfico de Flujo de Caja -->
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-3">
                                <h3 class="text-sm font-semibold text-gray-700">Flujo de Caja Neto</h3>
                                <span class="text-xs text-gray-400">por mes</span>
                            </div>
                            <div class="h-72">
                                <canvas id="chartFlujo" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-xs text-gray-500 mt-2">Evolución del flujo neto a lo largo del año.</p>
                        </div>
                    </div>

                    <!-- Desglose de Cuentas Bancarias -->
                    <div class="rounded-lg border border-gray-200 p-4 mt-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-700">Estado de Cuentas Bancarias</h3>
                            <span class="text-xs text-gray-400">Últimas 30 días</span>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="rounded-lg border border-gray-200 p-3 bg-gray-50">
                                <div class="text-xs font-semibold text-gray-600 mb-2">Banco Principal</div>
                                <div class="text-xl font-bold text-blue-600">$ 125,000.00</div>
                                <div class="text-xs text-gray-500 mt-1">Última conciliación: 03 dic</div>
                                <span class="inline-block mt-2 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Conciliada</span>
                            </div>
                            <div class="rounded-lg border border-gray-200 p-3 bg-gray-50">
                                <div class="text-xs font-semibold text-gray-600 mb-2">Banco Secundario</div>
                                <div class="text-xl font-bold text-blue-600">$ 45,500.00</div>
                                <div class="text-xs text-gray-500 mt-1">Última conciliación: 02 dic</div>
                                <span class="inline-block mt-2 px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Conciliada</span>
                            </div>
                            <div class="rounded-lg border border-gray-200 p-3 bg-gray-50">
                                <div class="text-xs font-semibold text-gray-600 mb-2">Banco Tercero</div>
                                <div class="text-xl font-bold text-orange-600">$ 22,300.00</div>
                                <div class="text-xs text-gray-500 mt-1">Última conciliación: 01 dic</div>
                                <span class="inline-block mt-2 px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Pendiente</span>
                            </div>
                        </div>
                    </div>

                    <!-- Últimos Movimientos -->
                    <div class="rounded-lg border border-gray-200 p-4 mt-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-700">Últimos Movimientos</h3>
                            <a href="#" class="text-blue-600 hover:underline text-sm">Ver más</a>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-gray-200 bg-gray-50">
                                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Fecha</th>
                                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Cuenta</th>
                                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Concepto</th>
                                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Tipo</th>
                                        <th class="px-4 py-2 text-right text-gray-700 font-semibold">Monto</th>
                                        <th class="px-4 py-2 text-left text-gray-700 font-semibold">Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                                        <td class="px-4 py-3 text-gray-600">03/12/2025</td>
                                        <td class="px-4 py-3 text-gray-600">Banco Principal</td>
                                        <td class="px-4 py-3 text-gray-600">Pago de cliente XYZ</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Ingreso</span></td>
                                        <td class="px-4 py-3 text-right font-semibold text-green-700">+ $15,500.00</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">Conciliado</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                                        <td class="px-4 py-3 text-gray-600">02/12/2025</td>
                                        <td class="px-4 py-3 text-gray-600">Banco Principal</td>
                                        <td class="px-4 py-3 text-gray-600">Pago de servicios</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded">Egreso</span></td>
                                        <td class="px-4 py-3 text-right font-semibold text-red-700">- $3,200.00</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded">Conciliado</span></td>
                                    </tr>
                                    <tr class="border-b border-gray-200 hover:bg-gray-50">
                                        <td class="px-4 py-3 text-gray-600">01/12/2025</td>
                                        <td class="px-4 py-3 text-gray-600">Banco Secundario</td>
                                        <td class="px-4 py-3 text-gray-600">Transferencia recibida</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded">Ingreso</span></td>
                                        <td class="px-4 py-3 text-right font-semibold text-green-700">+ $8,750.00</td>
                                        <td class="px-4 py-3"><span class="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded">Pendiente</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Enlaces rápidos -->
                    <div class="mt-6">
                        <h3 class="text-lg font-semibold text-gray-700 mb-4">Acciones rápidas</h3>
                        <div class="flex flex-wrap gap-3">
                            <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-semibold py-2 px-4 rounded transition flex items-center gap-2">
                                <i class="material-icons text-base">add_circle</i>
                                Registrar Ingreso
                            </a>
                            <a href="#" class="bg-red-100 hover:bg-red-200 text-red-800 font-semibold py-2 px-4 rounded transition flex items-center gap-2">
                                <i class="material-icons text-base">remove_circle</i>
                                Registrar Egreso
                            </a>
                            <a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 font-semibold py-2 px-4 rounded transition flex items-center gap-2">
                                <i class="material-icons text-base">check_circle</i>
                                Conciliar Cuenta
                            </a>
                            <a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 font-semibold py-2 px-4 rounded transition flex items-center gap-2">
                                <i class="material-icons text-base">download</i>
                                Descargar Reporte
                            </a>
                            <a href="#" class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 font-semibold py-2 px-4 rounded transition flex items-center gap-2">
                                <i class="material-icons text-base">history</i>
                                Historial
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</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 el = document.getElementById('bancos-data');
        const saldoTotal = parseFloat(el?.dataset?.saldoTotal || '192800');
        const ingresosMes = parseFloat(el?.dataset?.ingresosMes || '45000');
        const egresosMes = parseFloat(el?.dataset?.egresosMes || '32000');
        const cuentasConciliadas = parseInt(el?.dataset?.cuentasConciliadas || '2');
        const cuentasPendientes = parseInt(el?.dataset?.cuentasPendientes || '1');
        const diferenciasConciliacion = parseInt(el?.dataset?.diferenciasConciliacion || '0');

        const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
        
        // Datos de ejemplo para ingresos y egresos mensuales
        const datosIngresos = [35000, 38000, 42000, 45000, 40000, 48000, 52000, 50000, 55000, 58000, 45000, 60000];
        const datosEgresos = [25000, 28000, 30000, 32000, 28000, 35000, 38000, 36000, 40000, 42000, 32000, 45000];
        
        // 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: 'Ingresos',
                            data: datosIngresos,
                            backgroundColor: '#10b981',
                            borderColor: '#059669',
                            borderWidth: 1
                        },
                        {
                            label: 'Egresos',
                            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: 'Flujo Neto',
                        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);
            }
        }

        $selectMes.on('change', function() {
            const mes = $(this).val();
            const mesIndex = parseInt(mes) - 1;
            
            const ingresosMesVal = datosIngresos[mesIndex];
            const egresosMesVal = datosEgresos[mesIndex];
            const neto = ingresosMesVal - egresosMesVal;
            
            // Actualizar valores
            if ($ingresosMesEl.length) $ingresosMesEl.text(`$ ${formatMoney(ingresosMesVal)}`);
            if ($egresosMesEl.length) $egresosMesEl.text(`$ ${formatMoney(egresosMesVal)}`);
            if ($netoMesEl.length) {
                $netoMesEl.text(`$ ${formatMoney(neto)}`);
                // Cambiar color según si es positivo o negativo
                $netoMesEl.removeClass('text-amber-700 text-red-700').addClass(neto >= 0 ? 'text-amber-700' : 'text-red-700');
            }

            // En producción, aquí harías una llamada AJAX al backend
            /*
            $.ajax({
                data: { mes },
                method: 'GET',
                dataType: 'json',
                url: '{{ route('bancos-modulo.get-mes-data') }}'
            }).done(function(data) {
                if ($ingresosMesEl.length) $ingresosMesEl.text(`$ ${formatMoney(data.ingresos)}`);
                if ($egresosMesEl.length) $egresosMesEl.text(`$ ${formatMoney(data.egresos)}`);
                if ($netoMesEl.length) $netoMesEl.text(`$ ${formatMoney(data.neto)}`);
            }).fail(function(xhr) {
                console.error('Error de red', xhr?.status, xhr?.responseText);
            });
            */
        });

        // Disparar carga inicial
        $selectMes.trigger('change');
    });
</script>
@endpush