@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-4">
                        <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="{{ url('facturacion/operaciones/facturacion') }}" class="bg-white border border-sky-200 hover:border-sky-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-sky-500 text-3xl mb-1 group-hover:scale-110 transition-transform">receipt_long</i>
                                    <span class="text-base font-medium text-gray-700"> Facturación 4.0</span>
                                    <p class="text-sm text-gray-500">Genera y timbra tus CFDIs</p>
                                </div>
                            </a>

                            <a href="{{ url('facturacion/operaciones/lista_facturas') }}" class="bg-white border border-emerald-200 hover:border-emerald-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-emerald-500 text-3xl mb-1 group-hover:scale-110 transition-transform">format_list_bulleted</i>
                                    <span class="text-base font-medium text-gray-700">Listado de facturas</span>
                                    <p class="text-sm text-gray-500">Visualiza y administra facturas emitidas</p>
                                </div>
                            </a>

                            <a href="{{ url('facturacion/operaciones/nuevo_deposito') }}" 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">
                                    <i class="material-icons text-amber-500 text-3xl mb-1 group-hover:scale-110 transition-transform">payments</i>
                                    <span class="text-base font-medium text-gray-700">Nuevo depósito</span>
                                    <p class="text-sm text-gray-500">Registra y aplica pagos a facturas</p>
                                </div>
                            </a>

                            <a href="{{ url('facturacion/operaciones/depositos') }}" class="bg-white border border-rose-200 hover:border-rose-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-rose-500 text-3xl mb-1 group-hover:scale-110 transition-transform">account_balance_wallet</i>
                                    <span class="text-base font-medium text-gray-700">Lista de depósitos</span>
                                    <p class="text-sm text-gray-500">Seguimiento de cobranza</p>
                                </div>
                            </a>

                            <a href="{{ url('facturacion/operaciones/prefacturas') }}" class="bg-white border border-cyan-200 hover:border-cyan-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-cyan-500 text-3xl mb-1 group-hover:scale-110 transition-transform">inventory_2</i>
                                    <span class="text-base font-medium text-gray-700">Prefacturas</span>
                                    <p class="text-sm text-gray-500">Pendientes de timbrado</p>
                                </div>
                            </a>

                            <a href="{{ url('operaciones/lista_programadas') }}" class="bg-white border border-teal-200 hover:border-teal-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-teal-500 text-3xl mb-1 group-hover:scale-110 transition-transform">alarm</i>
                                    <span class="text-base font-medium text-gray-700">Facturas programadas</span>
                                    <p class="text-sm text-gray-500">Visualiza y administra las facturas programadas</p>
                                </div>
                            </a>
                            <a href="{{ url('catalogo/clientes') }}" class="bg-white border border-indigo-200 hover:border-indigo-400 hover:shadow-md rounded-lg p-3 transition-all group">
                                <div class="flex flex-col items-center text-center">
                                    <i class="material-icons text-indigo-500 text-3xl mb-1 group-hover:scale-110 transition-transform">groups</i>
                                    <span class="text-base font-medium text-gray-700">Clientes</span>
                                    <p class="text-sm text-gray-500">Gestiona receptores y datos fiscales</p>
                                </div>
                            </a>

                            <a href="{{ url('catalogo/productos') }}" 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">
                                    <i class="material-icons text-blue-500 text-3xl mb-1 group-hover:scale-110 transition-transform">category</i>
                                    <span class="text-base font-medium text-gray-700">Productos y servicios</span>
                                    <p class="text-sm text-gray-500">Catálogo para conceptos de factura</p>
                                </div>
                            </a>

                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-3 mb-3">
                        <div>
                            <h2 class="text-base font-semibold text-gray-800">Dashboard</h2>
                            <p class="text-xs text-gray-500">Seguimiento anual y mensual de facturacion, impuestos y cobros</p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <label for="mes" class="text-xs text-gray-600">Mes:</label>
                            <select id="mes" class="border border-gray-300 rounded px-2 py-1 text-xs 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-xs text-gray-600 ml-2">año:</label>
                            <select id="anio" class="border border-gray-300 rounded px-2 py-1 text-xs mb-1">
                                @for($y = date('Y'); $y >= date('Y') - 6; $y--)
                                <option value="{{ $y }}" {{ $year == $y ? 'selected' : '' }}>{{ $y }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-6 gap-3 mt-2">
                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-sky-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-sky-100 p-1.5">
                                <i class="material-icons text-sky-500 text-xl">description</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Facturas del año</div>
                                <div class="mt-0.5 text-lg font-semibold text-sky-700">{{ number_format($totalFacturasAnual) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Mes seleccionado: {{ number_format($totalFacturasMes) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-emerald-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-emerald-100 p-1.5">
                                <i class="material-icons text-emerald-500 text-xl">savings</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Monto facturado anual</div>
                                <div class="mt-0.5 text-lg font-semibold text-emerald-700">${{ number_format($montoFacturadoAnual, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Mes: $ {{ number_format($montoFacturadoMes, 2) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-cyan-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-cyan-100 p-1.5">
                                <i class="material-icons text-cyan-500 text-xl">paid</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Cobrado anual</div>
                                <div class="mt-0.5 text-lg font-semibold text-cyan-700">${{ number_format($cobradoAnual, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Mes: $ {{ number_format($cobradoMes, 2) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-amber-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-amber-100 p-1.5">
                                <i class="material-icons text-amber-500 text-xl">pending_actions</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Saldo pendiente</div>
                                <div class="mt-0.5 text-lg font-semibold text-amber-700">${{ number_format($saldoPendienteAnual, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Mes: $ {{ number_format($saldoPendienteMes, 2) }}</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-orange-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-orange-100 p-1.5">
                                <i class="material-icons text-orange-500 text-xl">link</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Complementos de pago</div>
                                <div class="mt-0.5 text-lg font-semibold text-orange-700">{{ number_format($complementosPagoAnual) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Mes: {{ number_format($complementosPagoMes) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-gradient-to-br from-lime-50 to-white flex items-center gap-3">
                            <span class="inline-flex items-center justify-center rounded-full bg-lime-100 p-1.5">
                                <i class="material-icons text-lime-600 text-xl">sell</i>
                            </span>
                            <div>
                                <div class="text-xs text-gray-500">Ticket promedio anual</div>
                                <div class="mt-0.5 text-lg font-semibold text-lime-700">${{ number_format($ticketPromedio, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-0.5">Promedio por factura de ingreso</div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 mt-3">
                        <div class="rounded-lg border border-gray-200 p-3 lg:col-span-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-sm font-semibold text-gray-700">Facturas por mes</h4>
                                <i class="material-icons text-sky-500 text-lg">insights</i>
                            </div>
                            <div class="h-52">
                                <canvas id="chartFacturas"></canvas>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Volumen mensual de CFDI de ingreso en {{ $year }}.</p>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 lg:col-span-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-sm font-semibold text-gray-700">Monto facturado por mes</h4>
                                <i class="material-icons text-emerald-500 text-lg">show_chart</i>
                            </div>
                            <div class="h-52">
                                <canvas id="chartMontos"></canvas>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Comparativo mensual de facturacion e IVA trasladado.</p>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-white lg:col-span-1">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-sm font-semibold text-gray-700">Distribucion de CFDI</h4>
                                <i class="material-icons text-teal-500 text-lg">pie_chart</i>
                            </div>
                            <div class="h-52">
                                <canvas id="chartTipos"></canvas>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">Participacion de ingreso, egreso y pago en el año.</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 mt-3">
                        <div class="rounded-lg border border-gray-200 p-3 bg-white">
                            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                                <i class="material-icons text-sky-500 text-lg">table_rows</i>
                                Tabla de facturas por mes
                            </h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-xs">
                                    <thead>
                                        <tr class="border-b bg-gray-50">
                                            <th class="text-left text-gray-500 px-2 py-1.5">Mes</th>
                                            <th class="text-right text-gray-500 px-2 py-1.5">Cantidad</th>
                                            <th class="text-right text-gray-500 px-2 py-1.5">Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($tablaFacturasPorMes as $filaMes)
                                        <tr class="border-b last:border-b-0">
                                            <td class="px-2 py-1.5 text-gray-700">{{ $filaMes['mes'] }}</td>
                                            <td class="px-2 py-1.5 text-right text-gray-700">{{ number_format((int) $filaMes['cantidad']) }}</td>
                                            <td class="px-2 py-1.5 text-right font-medium text-gray-800">$ {{ number_format((float) $filaMes['monto'], 2) }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr class="bg-gray-50">
                                            <th class="px-2 py-1.5 text-left text-gray-700">Total anual</th>
                                            <th class="px-2 py-1.5 text-right text-gray-700">{{ number_format(array_sum(array_column($tablaFacturasPorMes, 'cantidad'))) }}</th>
                                            <th class="px-2 py-1.5 text-right text-gray-700">$ {{ number_format(array_sum(array_column($tablaFacturasPorMes, 'monto')), 2) }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-3 bg-white">
                            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
                                <i class="material-icons text-indigo-500 text-lg">inventory</i>
                                Tabla de servicios
                            </h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-xs">
                                    <thead>
                                        <tr class="border-b bg-gray-50">
                                            <th class="text-left text-gray-500 px-2 py-1.5">Servicio</th>
                                            <th class="text-right text-gray-500 px-2 py-1.5">Cantidad</th>
                                            <th class="text-right text-gray-500 px-2 py-1.5">Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($serviciosFacturados as $servicio)
                                        <tr class="border-b last:border-b-0">
                                            <td class="px-2 py-1.5 text-gray-700">{{ $servicio->servicio }}</td>
                                            <td class="px-2 py-1.5 text-right text-gray-700">{{ number_format((float) $servicio->unidades, 2) }}</td>
                                            <td class="px-2 py-1.5 text-right font-medium text-gray-800">{{ number_format((float) $servicio->monto, 2) }}</td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="4" class="px-2 py-3 text-center text-gray-500">Sin servicios facturados registrados para este año.</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div
    id="facturacion-data"
    data-meses='@json($meses)'
    data-facturas='@json($facturasPorMes)'
    data-montos='@json($montosPorMes)'
    data-iva='@json($ivaPorMes)'
    data-tipos-labels='@json($distribucionTiposLabels)'
    data-tipos-data='@json($distribucionTiposData)'
    style="display: none;">
</div>

@include('includes.serviciosTransito')
@endsection

@push('js')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    (function() {
        const dataEl = document.getElementById('facturacion-data');
        const meses = JSON.parse(dataEl?.dataset.meses || '[]');
        const facturasPorMes = JSON.parse(dataEl?.dataset.facturas || '[]');
        const montosPorMes = JSON.parse(dataEl?.dataset.montos || '[]');
        const ivaPorMes = JSON.parse(dataEl?.dataset.iva || '[]');
        const tiposLabels = JSON.parse(dataEl?.dataset.tiposLabels || '[]');
        const tiposData = JSON.parse(dataEl?.dataset.tiposData || '[]');

        const mesSelect = document.getElementById('mes');
        const anioSelect = document.getElementById('anio');

        function actualizarFiltro() {
            const url = new URL(window.location.href);
            url.searchParams.set('mes', mesSelect.value);
            url.searchParams.set('year', anioSelect.value);
            window.location.href = url.toString();
        }

        if (mesSelect) {
            mesSelect.addEventListener('change', actualizarFiltro);
        }

        if (anioSelect) {
            anioSelect.addEventListener('change', actualizarFiltro);
        }

        const chartFacturasEl = document.getElementById('chartFacturas');
        if (chartFacturasEl) {
            new Chart(chartFacturasEl.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: meses,
                    datasets: [{
                        label: 'CFDI de ingreso',
                        data: facturasPorMes,
                        backgroundColor: '#0ea5e9',
                        borderColor: '#0284c7',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    }
                }
            });
        }

        const chartMontosEl = document.getElementById('chartMontos');
        if (chartMontosEl) {
            new Chart(chartMontosEl.getContext('2d'), {
                type: 'line',
                data: {
                    labels: meses,
                    datasets: [{
                        label: 'Monto facturado',
                        data: montosPorMes,
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.12)',
                        borderWidth: 3,
                        tension: 0.35,
                        fill: true,
                        pointRadius: 3,
                        pointBackgroundColor: '#10b981'
                    }, {
                        label: 'IVA trasladado',
                        data: ivaPorMes,
                        borderColor: '#f59e0b',
                        backgroundColor: 'rgba(245, 158, 11, 0.08)',
                        borderWidth: 2,
                        tension: 0.35,
                        fill: false,
                        pointRadius: 2,
                        pointBackgroundColor: '#f59e0b'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top'
                        }
                    },
                    scales: {
                        y: {
                            ticks: {
                                callback: function(value) {
                                    return '$ ' + Number(value).toLocaleString('es-MX', {
                                        minimumFractionDigits: 0,
                                        maximumFractionDigits: 0
                                    });
                                }
                            }
                        }
                    }
                }
            });
        }

        const chartTiposEl = document.getElementById('chartTipos');
        if (chartTiposEl) {
            new Chart(chartTiposEl.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: tiposLabels,
                    datasets: [{
                        data: tiposData,
                        backgroundColor: ['#0284c7', '#fb7185', '#14b8a6'],
                        borderColor: '#ffffff',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        if (window.TourManager) {
            TourManager.start('facturacionHome');
        }
    })();
</script>
@endpush