@extends('layouts.app', ['activePage' => 'dashboard', 'menuParent' => 'dashboard', 'titlePage' => 'Dashboard Bancario'])
@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="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() {
        // 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: '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: '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