@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 Impuestos</h2>
                            <p class="text-sm text-gray-500">Año {{ $year ?? date('Y') }}</p>
                        </div>
                    </div>
                    <div id="impuestos-data" class="hidden"
                        data-declaraciones-proximas='@json($declaracionesProximas ?? 3)'
                        data-declaraciones-vencidas='@json($declaracionesVencidas ?? 1)'
                        data-pagos-mes='@json($pagosMes ?? 28750)'
                        data-obligaciones-pendientes='@json($obligacionesPendientes ?? [])'
                        data-total-anual='@json($totalAnual ?? 0)'
                        data-pagado-anual='@json($pagadoAnual ?? 0)'
                        data-pendiente-anual='@json($pendienteAnual ?? 0)'>
                    </div>

                    <!-- KPIs principales anuales -->
                    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 mt-4">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white 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</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Total anual</div>
                                <div id="totalAnual" class="mt-1 text-2xl font-semibold text-blue-700">$ {{ number_format($totalAnual ?? 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">paid</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Pagado (año)</div>
                                <div id="pagadoAnual" class="mt-1 text-2xl font-semibold text-emerald-700">$ {{ number_format($pagadoAnual ?? 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">hourglass_empty</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Pendiente (año)</div>
                                <div id="pendienteAnual" class="mt-1 text-2xl font-semibold text-amber-600">$ {{ number_format($pendienteAnual ?? 0, 2) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Selector de mes -->
                    <div class="grid grid-cols-1 mt-2">
                        <div class="col-span-3">
                            <label for="mes" class="text-sm text-gray-600 mr-1">Mes</label>
                            <select id="mes" class="border border-gray-300 rounded px-2 py-1 text-sm">
                                @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>

                    <!-- KPIs mensuales -->
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-2">
                        <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</i>
                            </span>
                            <div>
                                <div id="lblTotalMes" class="text-sm text-gray-500">Total (<span class="mes">mes</span>)</div>
                                <div id="valTotalMes" class="mt-1 text-2xl font-semibold text-blue-700">$ {{ number_format(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">paid</i>
                            </span>
                            <div>
                                <div id="lblPagadoMes" class="text-sm text-gray-500">Pagado (<span class="mes">mes</span>)</div>
                                <div id="valPagadoMes" class="mt-1 text-2xl font-semibold text-emerald-700">$ {{ number_format(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">hourglass_empty</i>
                            </span>
                            <div>
                                <div id="lblPendienteMes" class="text-sm text-gray-500">Pendiente (<span class="mes">mes</span>)</div>
                                <div id="valPendienteMes" class="mt-1 text-2xl font-semibold text-amber-600">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Desglose detallado de impuestos -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-3">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-purple-50 to-white flex items-center gap-4">
                            <div>
                                <div class="text-sm text-gray-500">IVA trasladado (<span class="mes">mes</span>)</div>
                                <div id="ivaTrasladado" class="mt-1 text-2xl font-semibold text-purple-700">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-pink-50 to-white flex items-center gap-4">
                            <div>
                                <div class="text-sm text-gray-500">IVA acreditable (<span class="mes">mes</span>)</div>
                                <div id="ivaAcreditable" class="mt-1 text-2xl font-semibold text-pink-700">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-green-50 to-white flex items-center gap-4">
                            <div>
                                <div class="text-sm text-gray-500">IVA por pagar (<span class="mes">mes</span>)</div>
                                <div id="ivaPorPagar" class="mt-1 text-2xl font-semibold text-green-700">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-yellow-50 to-white flex items-center gap-4">
                            <div>
                                <div class="text-sm text-gray-500">IVA a favor (<span class="mes">mes</span>)</div>
                                <div id="ivaAFavor" class="mt-1 text-2xl font-semibold text-yellow-700">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                    </div>

                    <!-- Indicadores de declaraciones -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-blue-50 to-white">
                            <div class="flex items-center mb-2">
                                <span class="material-icons text-blue-500 mr-2">assignment</span>
                                <span class="font-semibold text-gray-700">Declaraciones próximas</span>
                            </div>
                            <div class="text-3xl font-bold text-blue-600 mb-2" id="declaracionesProximas">{{ $declaracionesProximas ?? 3 }}</div>
                            <a href="#" class="text-blue-700 hover:underline text-sm">
                                Ver detalles <i class="material-icons align-middle text-base">open_in_new</i>
                            </a>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-red-50 to-white">
                            <div class="flex items-center mb-2">
                                <span class="material-icons text-red-500 mr-2">warning</span>
                                <span class="font-semibold text-gray-700">Declaraciones vencidas</span>
                            </div>
                            <div class="text-3xl font-bold text-red-600 mb-2" id="declaracionesVencidas">{{ $declaracionesVencidas ?? 1 }}</div>
                            <a href="#" class="text-red-700 hover:underline text-sm">
                                Ver detalles <i class="material-icons align-middle text-base">open_in_new</i>
                            </a>
                        </div>
                    </div>

                    <!-- Gráficos de visualización -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-semibold text-gray-700">Evolución de pagos</h3>
                                <span class="text-sm text-gray-400">por mes</span>
                            </div>
                            <div class="h-64">
                                <canvas id="chartPagos" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Compara el total de impuestos contra lo pagado cada mes.</p>
                        </div>
                        <div class="rounded-lg border border-gray-200 p-4">
                            <div class="flex items-center justify-between mb-2">
                                <h3 class="text-sm font-semibold text-gray-700">IVA por tipo</h3>
                                <span class="text-sm text-gray-400">por mes</span>
                            </div>
                            <div class="h-64">
                                <canvas id="chartIVA" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Visualiza la comparación de IVA por tipo cada mes.</p>
                        </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-4">
                            <a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 font-semibold py-2 px-4 rounded transition">
                                <i class="material-icons align-middle text-base mr-2">assignment</i>
                                Presentar declaración
                            </a>
                            <a href="#" class="bg-green-100 hover:bg-green-200 text-green-800 font-semibold py-2 px-4 rounded transition">
                                <i class="material-icons align-middle text-base mr-2">download</i>
                                Descargar acuses
                            </a>
                            <a href="#" class="bg-purple-100 hover:bg-purple-200 text-purple-800 font-semibold py-2 px-4 rounded transition">
                                <i class="material-icons align-middle text-base mr-2">search</i>
                                Consultar obligaciones
                            </a>
                            <a href="#" class="bg-yellow-100 hover:bg-yellow-200 text-yellow-800 font-semibold py-2 px-4 rounded transition">
                                <i class="material-icons align-middle text-base mr-2">history</i>
                                Historial de pagos
                            </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('impuestos-data');
        const declaracionesProximas = parseInt(el?.dataset?.declaracionesProximas || '3');
        const declaracionesVencidas = parseInt(el?.dataset?.declaracionesVencidas || '1');
        const pagosMes = parseFloat(el?.dataset?.pagosMes || '28750');
        const obligacionesPendientes = JSON.parse(el?.dataset?.obligacionesPendientes || '[]');
        const totalAnual = parseFloat(el?.dataset?.totalAnual || '0');
        const pagadoAnual = parseFloat(el?.dataset?.pagadoAnual || '0');
        const pendienteAnual = parseFloat(el?.dataset?.pendienteAnual || '0');

        const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
        
        // Datos de ejemplo para los gráficos (en producción vendrían del backend)
        const datosPagos = [12000, 15000, 18000, 22000, 19000, 25000, 28000, 26000, 30000, 32000, 28000, 35000];
        const datosPagado = [10000, 12000, 15000, 20000, 18000, 22000, 25000, 24000, 28000, 30000, 26000, 32000];
        const datosPendiente = [2000, 3000, 3000, 2000, 1000, 3000, 3000, 2000, 2000, 2000, 2000, 3000];

        const datosIVATrasladado = [2000, 2500, 3000, 3500, 3200, 4000, 4500, 4200, 4800, 5000, 4500, 5500];
        const datosIVAAcreditable = [1500, 1800, 2200, 2600, 2400, 3000, 3200, 3000, 3500, 3800, 3400, 4200];
        const datosIVAPorPagar = [500, 700, 800, 900, 800, 1000, 1300, 1200, 1300, 1200, 1100, 1300];
        const datosIVAAFavor = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

        // Gráfico de evolución de pagos
        const chartPagos = new Chart(document.getElementById('chartPagos').getContext('2d'), {
            type: 'line',
            data: {
                labels: meses,
                datasets: [{
                    label: 'Total impuestos',
                    data: datosPagos,
                    borderColor: '#2563eb',
                    backgroundColor: 'rgba(37,99,235,0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointRadius: 2
                }, {
                    label: 'Pagado',
                    data: datosPagado,
                    borderColor: '#059669',
                    backgroundColor: 'rgba(5,150,105,0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointRadius: 2
                }, {
                    label: 'Pendiente',
                    data: datosPendiente,
                    borderColor: '#f59e0b',
                    backgroundColor: 'rgba(245,158,11,0.1)',
                    borderWidth: 2,
                    tension: 0.3,
                    pointRadius: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0,
                            callback: function(value) {
                                return '$' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        // Gráfico de IVA por tipo
        const chartIVA = new Chart(document.getElementById('chartIVA').getContext('2d'), {
            type: 'bar',
            data: {
                labels: meses,
                datasets: [{
                    label: 'IVA Trasladado',
                    data: datosIVATrasladado,
                    backgroundColor: '#7c3aed'
                }, {
                    label: 'IVA Acreditable',
                    data: datosIVAAcreditable,
                    backgroundColor: 'rgb(219, 39, 119)'
                }, {
                    label: 'IVA por pagar',
                    data: datosIVAPorPagar,
                    backgroundColor: '#16a34a'
                }, {
                    label: 'IVA a favor',
                    data: datosIVAAFavor,
                    backgroundColor: '#f59e0b'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0,
                            callback: function(value) {
                                return '$' + value.toLocaleString();
                            }
                        }
                    }
                }
            }
        });

        // AJAX para totales de mes sin recargar
        const $selectMes = $('#mes');
        const $totalMesEl = $('#valTotalMes');
        const $pagadoMesEl = $('#valPagadoMes');
        const $pendienteMesEl = $('#valPendienteMes');
        const $ivaAcreditableEl = $('#ivaAcreditable');
        const $ivaTrasladadoEl = $('#ivaTrasladado');
        const $ivaPorPagarEl = $('#ivaPorPagar');
        const $ivaAFavorEl = $('#ivaAFavor');

        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;
            
            // Establecer el texto del mes seleccionado
            $('.mes').text($selectMes.find('option:selected').text());
            
            // Actualizar valores con datos del mes seleccionado
            if ($totalMesEl.length) $totalMesEl.text(`$ ${formatMoney(datosPagos[mesIndex])}`);
            if ($pagadoMesEl.length) $pagadoMesEl.text(`$ ${formatMoney(datosPagado[mesIndex])}`);
            if ($pendienteMesEl.length) $pendienteMesEl.text(`$ ${formatMoney(datosPendiente[mesIndex])}`);
            if ($ivaAcreditableEl.length) $ivaAcreditableEl.text(`$ ${formatMoney(datosIVAAcreditable[mesIndex])}`);
            if ($ivaTrasladadoEl.length) $ivaTrasladadoEl.text(`$ ${formatMoney(datosIVATrasladado[mesIndex])}`);
            if ($ivaPorPagarEl.length) $ivaPorPagarEl.text(`$ ${formatMoney(datosIVAPorPagar[mesIndex])}`);
            if ($ivaAFavorEl.length) $ivaAFavorEl.text(`$ ${formatMoney(datosIVAAFavor[mesIndex])}`);

            // En producción, aquí harías una llamada AJAX al backend
            /*
            $.ajax({
                data: { mes },
                method: 'GET',
                dataType: 'json'
            }).done(function(data) {
                if ($totalMesEl.length) $totalMesEl.text(`$ ${formatMoney(data.total)}`);
                if ($pagadoMesEl.length) $pagadoMesEl.text(`$ ${formatMoney(data.pagado)}`);
                if ($pendienteMesEl.length) $pendienteMesEl.text(`$ ${formatMoney(data.pendiente)}`);
                if ($ivaAcreditableEl.length) $ivaAcreditableEl.text(`$ ${formatMoney(data.ivaAcreditable)}`);
                if ($ivaTrasladadoEl.length) $ivaTrasladadoEl.text(`$ ${formatMoney(data.ivaTrasladado)}`);
                if ($ivaPorPagarEl.length) $ivaPorPagarEl.text(`$ ${formatMoney(data.ivaPorPagar)}`);
                if ($ivaAFavorEl.length) $ivaAFavorEl.text(`$ ${formatMoney(data.ivaAFavor)}`);
            }).fail(function(xhr) {
                console.error('Error de red', xhr?.status, xhr?.responseText);
            });
            */
        });

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