@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="{{ route('retenciones.operaciones.cfdiretencion') }}" 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">Retenciones</span>
                                    <p class="text-sm text-gray-500">Genera y timbra CFDI de retenciones</p>

                                </div>
                            </a>
                            <a href="{{ route('retenciones.operaciones.listado_retenciones') }}" 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 retenciones</span>
                                    <p class="text-sm text-gray-500">Visualiza y administra las retenciones generadas</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 y receptores</span>
                                    <p class="text-sm text-gray-500">Gestiona y visualiza la información de clientes y receptores</p>

                                </div>
                            </a>
                            <a href="{{ url('configuracion/empresa') }}" 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">business</i>
                                    <span class="text-base font-medium text-gray-700">Datos de empresa</span>
                                    <p class="text-sm text-gray-500">Gestiona y visualiza la información de la empresa</p>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-4">
                        <div>
                            <h2 class="text-lg font-semibold text-gray-800">Dashboard</h2>
                            <p class="text-sm text-gray-500">Seguimiento anual y mensual de CFDI de retenciones</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">Ano:</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>

                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 mt-3">
                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-sky-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-sky-100 p-2">
                                <i class="material-icons text-sky-500 text-2xl">description</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Retenciones del ano</div>
                                <div class="mt-1 text-xl font-semibold text-sky-700">{{ number_format($totalRetenciones) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Mes seleccionado: {{ number_format($retencionesMes) }}</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">savings</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Monto retenido anual</div>
                                <div class="mt-1 text-xl font-semibold text-emerald-700">$ {{ number_format($montoRetenidoAnual, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Mes: $ {{ number_format($montoRetenidoMes, 2) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-rose-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-rose-100 p-2">
                                <i class="material-icons text-rose-500 text-2xl">account_balance_wallet</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Impuestos retenidos</div>
                                <div class="mt-1 text-xl font-semibold text-rose-700">$ {{ number_format($impuestosRetenidosAnual, 2) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Mes: $ {{ number_format($impuestosRetenidosMes, 2) }}</div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-gradient-to-br from-violet-50 to-white flex items-center gap-4">
                            <span class="inline-flex items-center justify-center rounded-full bg-violet-100 p-2">
                                <i class="material-icons text-violet-500 text-2xl">groups_3</i>
                            </span>
                            <div>
                                <div class="text-sm text-gray-500">Clientes con retencion</div>
                                <div class="mt-1 text-xl font-semibold text-violet-700">{{ number_format($clientesUnicos) }}</div>
                                <div class="text-xs text-gray-400 mt-1">Distintos en el ano</div>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
                        <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-cyan-500">analytics</i>
                                Estado de impuestos
                            </h4>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 bg-cyan-50 rounded">
                                    <span class="text-sm text-gray-600">Configurados en empresa</span>
                                    <span class="text-base font-semibold text-cyan-700">{{ number_format($impuestosConfigurados) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-emerald-50 rounded">
                                    <span class="text-sm text-gray-600">Utilizados en retenciones</span>
                                    <span class="text-base font-semibold text-emerald-700">{{ number_format($impuestosUsados) }}</span>
                                </div>
                                <div class="flex items-center justify-between p-2 bg-amber-50 rounded">
                                    <span class="text-sm text-gray-600">Cobertura de uso</span>
                                    <span class="text-base font-semibold text-amber-700">{{ number_format($coberturaImpuestos, 2) }}%</span>
                                </div>
                            </div>
                        </div>

                        <div class="rounded-lg border border-gray-200 p-4 bg-white lg:col-span-2">
                            <h4 class="text-base font-semibold text-gray-700 mb-3 flex items-center gap-2">
                                <i class="material-icons text-indigo-500">leaderboard</i>
                                Top impuestos retenidos (ano {{ $year }})
                            </h4>
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-sm">
                                    <thead>
                                        <tr class="border-b bg-gray-50">
                                            <th class="text-left text-gray-500 px-3 py-2">Impuesto</th>
                                            <th class="text-right text-gray-500 px-3 py-2">Total retenido</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($topImpuestos as $impuesto)
                                            <tr class="border-b last:border-b-0">
                                                <td class="px-3 py-2 text-gray-700">{{ $impuesto->impuesto ?: 'Sin clave' }}</td>
                                                <td class="px-3 py-2 text-right font-medium text-gray-800">$ {{ number_format((float) $impuesto->total, 2) }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="2" class="px-3 py-4 text-center text-gray-500">Sin impuestos retenidos registrados para este ano.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-4">
                        <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">Retenciones por mes</h4>
                                <i class="material-icons text-sky-500">insights</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartRetenciones"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Volumen mensual de CFDI de retenciones en {{ $year }}.</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">Monto retenido por mes</h4>
                                <i class="material-icons text-emerald-500">show_chart</i>
                            </div>
                            <div class="h-64">
                                <canvas id="chartMontos"></canvas>
                            </div>
                            <p class="text-sm text-gray-500 mt-2">Comportamiento del monto retenido acumulado por mes.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="retenciones-data"
    data-meses='@json($meses)'
    data-retenciones='@json($datosRetenciones)'
    data-montos='@json($datosMontos)'
    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('retenciones-data');
        const meses = JSON.parse(dataEl?.dataset.meses || '[]');
        const datosRetenciones = JSON.parse(dataEl?.dataset.retenciones || '[]');
        const datosMontos = JSON.parse(dataEl?.dataset.montos || '[]');

        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 chartRetencionesEl = document.getElementById('chartRetenciones');
        if (chartRetencionesEl) {
            new Chart(chartRetencionesEl.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: meses,
                    datasets: [{
                        label: 'CFDI de retenciones',
                        data: datosRetenciones,
                        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 retenido',
                        data: datosMontos,
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.12)',
                        borderWidth: 3,
                        tension: 0.35,
                        fill: true,
                        pointRadius: 3,
                        pointBackgroundColor: '#10b981'
                    }]
                },
                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
                                    });
                                }
                            }
                        }
                    }
                }
            });
        }

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