@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">Resumen financiero</h2>
                            <p class="text-sm text-gray-500">Año {{ $year ?? date('Y') }}</p>
                        </div>

                    </div>
                    <div id="cliente-data" class="hidden"
                        data-monto='@json($montoSeries ?? [])'
                        data-saldo='@json($saldoSeries ?? [])'
                        data-pagado='@json($pagadoSeries ?? [])'
                        data-ivaacreditables='@json($ivaAcreditableSeries ?? [])'
                        data-ivatrasladados='@json($ivaTrasladadoSeries ?? [])'
                        data-ivafavor='@json($ivaFavorSeries ?? [])'
                        data-ivaporpagar='@json($ivaPorPagarSeries ?? [])'>
                    </div>
                    <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">attach_money</i>
                            </span>
                            <div>
                                <div id="lblMontoAnio" class="text-sm text-gray-500">Facturado (año)</div>
                                <div id="valMontoAnio" class="mt-1 text-2xl font-semibold text-blue-700">$ {{ number_format($totalMontoAnio ?? 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="lblPagadoAnio" class="text-sm text-gray-500">Pagado (año)</div>
                                <div id="valPagadoAnio" class="mt-1 text-2xl font-semibold text-emerald-700">$ {{ number_format($totalPagadoAnio ?? 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="lblSaldoAnio" class="text-sm text-gray-500">Pendiente (año)</div>
                                <div id="valSaldoAnio" class="mt-1 text-2xl font-semibold text-amber-600">$ {{ number_format($totalSaldoAnio ?? 0, 2) }}</div>
                            </div>
                        </div>
                    </div>
                    <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>

                    <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">attach_money</i>
                            </span>
                            <div>
                                <div id="lblMontoMes" class="text-sm text-gray-500">Facturado (<span class="mes">mes</span>)</div>
                                <div id="valMontoMes" 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="lblSaldoMes" class="text-sm text-gray-500">Pendiente (<span class="mes">mes</span>)</div>
                                <div id="valSaldoMes" class="mt-1 text-2xl font-semibold text-amber-600">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                    </div>
                    <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="diferenciaTrasladado" 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="diferenciaAcreditable" class="mt-1 text-2xl font-semibold text-yellow-700">$ {{ number_format(0, 2) }}</div>
                            </div>
                        </div>
                    </div>


                    <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">Facturado vs pagado</h3>
                                <span class="text-sm text-gray-400">por mes</span>
                            </div>
                            <div class="h-64">
                                <canvas id="chartMontoPagado" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Compara el total facturado 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</h3>
                                <span class="text-sm text-gray-400">por mes</span>
                            </div>
                            <div class="h-64">
                                <canvas id="chartImpuestos" class="w-full h-full"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Visualiza la comparacion de ivas por mes</p>
                        </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('cliente-data');
        const monto = JSON.parse(el?.dataset?.monto || '[]');
        const saldo = JSON.parse(el?.dataset?.saldo || '[]');
        const pagado = JSON.parse(el?.dataset?.pagado || '[]');

        const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
        // Montos vs Pagos (línea por mes del año)
        const chartMontoPagado = new Chart(document.getElementById('chartMontoPagado').getContext('2d'), {

            type: 'line',
            data: {
                labels: meses,
                datasets: [{
                        label: 'Monto',
                        data: monto ?? [],
                        borderColor: '#2563eb',
                        backgroundColor: 'rgba(37,99,235,0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        pointRadius: 2
                    },
                    {
                        label: 'Pagado',
                        data: pagado ?? [],
                        borderColor: '#059669',
                        backgroundColor: 'rgba(5,150,105,0.1)',
                        borderWidth: 2,
                        tension: 0.3,
                        pointRadius: 2
                    },
                    {
                        label: 'Pendiente',
                        data: saldo ?? [],
                        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
                        }
                    }
                }
            }
        });

        // Comparación de IVA (barras): Acreditable, Trasladado, A favor, Por pagar (ANUAL)
        // Sumar los valores de cada serie para mostrar el total anual
        const ivaAcreditableSeries = JSON.parse(el?.dataset?.ivaacreditables || '[]');
        const ivaTrasladadoSeries = JSON.parse(el?.dataset?.ivatrasladados || '[]');
        const ivaFavorSeries = JSON.parse(el?.dataset?.ivafavor || '[]');
        const ivaPorPagarSeries = JSON.parse(el?.dataset?.ivaporpagar || '[]');

        const chartImpuestos = new Chart(document.getElementById('chartImpuestos').getContext('2d'), {
            type: 'bar',
            data: {
                labels: meses,
                datasets: [{
                        label: 'Trasladado',
                        data: ivaTrasladadoSeries,
                        backgroundColor: '#7c3aed'
                    },
                    {
                        label: 'Acreditable',
                        data: ivaAcreditableSeries,
                        backgroundColor: 'rgb(219, 39, 119)'
                    },
                    {
                        label: 'Por pagar',
                        data: ivaPorPagarSeries,
                        backgroundColor: '#16a34a'
                    },
                    {
                        label: 'A favor',
                        data: ivaFavorSeries,
                        backgroundColor: '#f59e0b'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });

        // AJAX para totales de mes sin recargar (jQuery)
        const $selectMes = $('#mes');
        const $montoMesEl = $('#valMontoMes');
        const $pagadoMesEl = $('#valPagadoMes');
        const $saldoMesEl = $('#valSaldoMes');
        const $ivaAcreditableEl = $('#ivaAcreditable');
        const $ivaTrasladadoEl = $('#ivaTrasladado');
        const $difAcredEl = $('#diferenciaAcreditable');
        const $difTrasEl = $('#diferenciaTrasladado');

        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();
            // Establecer el texto del mes seleccionado usando la opción seleccionada
            $('.mes').text($selectMes.find('option:selected').text());
            $.ajax({
                url: `{{ route('mi-espacio.cliente.totales-mes') }}`,
                data: {
                    mes
                },
                method: 'GET',
                dataType: 'json'
            }).done(function(data) {
                if ($montoMesEl.length) $montoMesEl.text(`$ ${formatMoney(data.monto)}`);
                if ($pagadoMesEl.length) $pagadoMesEl.text(`$ ${formatMoney(data.pagado)}`);
                if ($saldoMesEl.length) $saldoMesEl.text(`$ ${formatMoney(data.saldo)}`);
                if ($ivaAcreditableEl.length) $ivaAcreditableEl.text(`$ ${formatMoney(data.ivaAcreditable)}`);
                if ($ivaTrasladadoEl.length) $ivaTrasladadoEl.text(`$ ${formatMoney(data.ivaTrasladado)}`);
                if ($difAcredEl.length) $difAcredEl.text(`$ ${formatMoney(data.diferenciaAcreditable)}`);
                if ($difTrasEl.length) $difTrasEl.text(`$ ${formatMoney(data.diferenciaTrasladado)}`);


            }).fail(function(xhr) {
                console.error('Error de red', xhr?.status, xhr?.responseText);
            });
        });

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