{{-- resources/views/livewire/dashboard/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;">
        <div>
            <div class="page-title">🏠 Dashboard</div>
            <div class="page-sub">
                {{ $empresa->nombre_comercial ?: $empresa->nombre }} ·
                {{ now()->format('d \d\e F, Y') }}
            </div>
        </div>
        {{-- Indicador Hacienda --}}
        <div style="display:flex;align-items:center;gap:8px;background:#fff;border-radius:50px;
                    padding:8px 16px;box-shadow:var(--shadow-sm);">
            @if($hacienda['conectado'])
                <div style="width:8px;height:8px;border-radius:50%;background:var(--green);
                            animation:blink 2.5s infinite;"></div>
                <span style="font-size:12px;font-weight:500;color:var(--green2);">
                    Hacienda {{ $hacienda['ambiente'] === 'sandbox' ? '(sandbox)' : 'operativo' }}
                </span>
            @else
                <div style="width:8px;height:8px;border-radius:50%;background:var(--red);"></div>
                <span style="font-size:12px;font-weight:500;color:var(--red);">
                    Hacienda sin conexión
                </span>
            @endif
        </div>
    </div>

    {{-- ── ALERTA CERTIFICADO ───────────────────────── --}}
    @if($certificado_vence_pronto)
    <div class="alert alert-orange" style="margin-bottom:18px;">
        <span style="font-size:16px;flex-shrink:0;">⚠️</span>
        <span>
            El certificado digital vence en <strong>{{ $dias_certificado }} días</strong>.
            <a href="{{ route('configuracion') }}" wire:navigate
               style="color:inherit;font-weight:600;margin-left:8px;">Actualizar →</a>
        </span>
    </div>
    @endif

    {{-- ── ALERTA CONTINGENCIAS ─────────────────────── --}}
    @if($kpis['contingencias'] > 0)
    <div class="alert alert-red" style="margin-bottom:18px;">
        <span style="font-size:16px;flex-shrink:0;">🚨</span>
        <span>
            <strong>{{ $kpis['contingencias'] }} factura(s) en contingencia</strong>
            pendientes de envío a Hacienda.
            <a href="{{ route('documentos') }}?filtro_estado=contingencia" wire:navigate
               style="color:inherit;font-weight:600;margin-left:8px;">Ver documentos →</a>
        </span>
    </div>
    @endif

    {{-- ── KPIs DEL DÍA ─────────────────────────────── --}}
    <div class="group-label">Hoy · {{ now()->format('d/m/Y') }}</div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">

        <div style="background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:8px;
                        text-transform:uppercase;letter-spacing:.4px;">Ventas del día</div>
            <div style="font-size:26px;font-weight:700;letter-spacing:-.5px;">
                ₡{{ number_format($kpis['ventas_hoy_monto'], 0) }}
            </div>
            <div style="font-size:12px;color:var(--label2);margin-top:4px;">
                {{ $kpis['ventas_hoy_cantidad'] }} comprobante(s)
            </div>
        </div>

        <div style="background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:8px;
                        text-transform:uppercase;letter-spacing:.4px;">Ventas del mes</div>
            <div style="font-size:26px;font-weight:700;letter-spacing:-.5px;">
                ₡{{ number_format($ventas_mes, 0) }}
            </div>
            <div style="font-size:12px;margin-top:4px;
                        color:{{ $variacion_mes >= 0 ? 'var(--green2)' : 'var(--red)' }};font-weight:500;">
                {{ $variacion_mes >= 0 ? '↑' : '↓' }} {{ abs($variacion_mes) }}% vs mes anterior
            </div>
        </div>

        <div style="background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:8px;
                        text-transform:uppercase;letter-spacing:.4px;">IVA cobrado hoy</div>
            <div style="font-size:26px;font-weight:700;letter-spacing:-.5px;color:var(--blue);">
                ₡{{ number_format($kpis['ventas_hoy_iva'], 0) }}
            </div>
            <div style="font-size:12px;color:var(--label2);margin-top:4px;">
                Para declarar en D-104
            </div>
        </div>

        <div style="background:#fff;border-radius:16px;padding:18px;box-shadow:var(--shadow);
                    {{ $kpis['cxc_vencidas'] > 0 ? 'border:1.5px solid rgba(255,59,48,.2);' : '' }}">
            <div style="font-size:11px;color:var(--label2);margin-bottom:8px;
                        text-transform:uppercase;letter-spacing:.4px;">CxC vencidas</div>
            <div style="font-size:26px;font-weight:700;letter-spacing:-.5px;
                        color:{{ $kpis['cxc_vencidas'] > 0 ? 'var(--red)' : 'var(--green2)' }}">
                ₡{{ number_format($kpis['cxc_vencidas'], 0) }}
            </div>
            @if($kpis['cxc_por_vencer'] > 0)
            <div style="font-size:12px;color:var(--orange);margin-top:4px;font-weight:500;">
                + ₡{{ number_format($kpis['cxc_por_vencer'], 0) }} por vencer
            </div>
            @endif
        </div>
    </div>

    {{-- ── GRÁFICO + ALERTAS ────────────────────────── --}}
    <div style="display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px;">

        {{-- Gráfico de ventas 30 días --}}
        <div class="inset-card">
            <div style="padding:18px 20px 14px;display:flex;align-items:center;justify-content:space-between;">
                <div style="font-size:14px;font-weight:600;">📊 Ventas últimos 30 días</div>
                <div style="font-size:11px;color:var(--label2);">solo aceptadas</div>
            </div>
            <div style="padding:0 20px 20px;">
                @php
                    $max_monto = collect($grafico)->max('monto');
                    $max_monto = max($max_monto, 1);
                @endphp
                <div style="display:flex;align-items:flex-end;gap:3px;height:120px;">
                    @foreach($grafico as $i => $dia)
                    @php
                        $pct    = $max_monto > 0 ? ($dia['monto'] / $max_monto * 100) : 0;
                        $es_hoy = $dia['fecha'] === today()->toDateString();
                    @endphp
                    <div style="flex:1;display:flex;flex-direction:column;align-items:center;
                                gap:2px;height:100%;justify-content:flex-end;position:relative;"
                         title="{{ $dia['label'] }}: ₡{{ number_format($dia['monto'], 0) }}">
                        @if($dia['monto'] > 0)
                        <div style="width:100%;border-radius:3px 3px 0 0;min-height:2px;
                                    background:{{ $es_hoy ? 'var(--blue)' : 'rgba(0,122,255,.25)' }};
                                    height:{{ max(2, $pct) }}%;">
                        </div>
                        @else
                        <div style="width:100%;height:2px;background:var(--separator);"></div>
                        @endif
                    </div>
                    @endforeach
                </div>
                {{-- Labels de fecha --}}
                <div style="display:flex;gap:3px;margin-top:6px;">
                    @foreach($grafico as $i => $dia)
                    <div style="flex:1;text-align:center;font-size:8px;color:var(--label3);
                                {{ ($i % 5 === 0 || $dia['fecha'] === today()->toDateString()) ? '' : 'color:transparent;' }}">
                        {{ $dia['label'] }}
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Alertas y estado --}}
        <div style="display:flex;flex-direction:column;gap:12px;">

            {{-- Alertas stock --}}
            @if($kpis['stock_alertas'] > 0)
            <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);
                        border-left:3px solid var(--orange);">
                <div style="font-size:12px;font-weight:600;margin-bottom:4px;">📦 Stock bajo mínimo</div>
                <div style="font-size:22px;font-weight:700;color:var(--orange);">
                    {{ $kpis['stock_alertas'] }} producto(s)
                </div>
                <a href="{{ route('inventario') }}" wire:navigate
                   style="font-size:11px;color:var(--orange);text-decoration:none;
                          font-weight:500;display:block;margin-top:6px;">
                    Ver inventario →
                </a>
            </div>
            @endif

            {{-- Pendientes Hacienda --}}
            @if(count($pendientes_hacienda) > 0)
            <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);
                        border-left:3px solid var(--blue);">
                <div style="font-size:12px;font-weight:600;margin-bottom:8px;">
                    ⏳ En proceso en Hacienda
                </div>
                @foreach($pendientes_hacienda as $pend)
                <div style="display:flex;justify-content:space-between;align-items:center;
                            padding:5px 0;border-bottom:.5px solid var(--separator);font-size:11px;">
                    <span style="font-family:'Courier New',monospace;color:var(--blue);">
                        {{ $pend['consecutivo'] }}
                    </span>
                    <span style="color:var(--label2);">
                        ₡{{ number_format($pend['total_comprobante'], 0) }}
                    </span>
                </div>
                @endforeach
            </div>
            @endif

            {{-- Accesos rápidos --}}
            <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
                <div style="font-size:12px;font-weight:600;margin-bottom:12px;">⚡ Accesos rápidos</div>
                <div style="display:flex;flex-direction:column;gap:8px;">
                    @can('facturacion.crear')
                    <a href="{{ route('factura.nueva') }}" wire:navigate
                       style="display:flex;align-items:center;gap:10px;padding:8px 12px;
                              background:var(--bg);border-radius:10px;text-decoration:none;color:var(--label);">
                        <span style="font-size:16px;">➕</span>
                        <span style="font-size:12px;font-weight:500;">Nueva factura</span>
                    </a>
                    @endcan
                    <a href="{{ route('documentos') }}" wire:navigate
                       style="display:flex;align-items:center;gap:10px;padding:8px 12px;
                              background:var(--bg);border-radius:10px;text-decoration:none;color:var(--label);">
                        <span style="font-size:16px;">📄</span>
                        <span style="font-size:12px;font-weight:500;">Ver documentos</span>
                    </a>
                    @can('cxc.ver')
                    <a href="{{ route('cxc') }}" wire:navigate
                       style="display:flex;align-items:center;gap:10px;padding:8px 12px;
                              background:var(--bg);border-radius:10px;text-decoration:none;color:var(--label);">
                        <span style="font-size:16px;">💰</span>
                        <span style="font-size:12px;font-weight:500;">Cuentas x cobrar</span>
                    </a>
                    @endcan
                    @can('gastos.ver')
                    <a href="{{ route('gastos') }}" wire:navigate
                       style="display:flex;align-items:center;gap:10px;padding:8px 12px;
                              background:var(--bg);border-radius:10px;text-decoration:none;color:var(--label);">
                        <span style="font-size:16px;">📥</span>
                        <span style="font-size:12px;font-weight:500;">Gastos XML</span>
                    </a>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    {{-- ── ÚLTIMAS FACTURAS ─────────────────────────── --}}
    <div class="group-label">Últimas facturas emitidas</div>
    <div class="inset-card">
        <table class="ios-table">
            <thead>
                <tr>
                    <th>Número</th>
                    <th>Cliente</th>
                    <th>Fecha y hora</th>
                    <th style="text-align:right;">Total</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @forelse($ultimas_facturas as $factura)
                <tr wire:key="uf-{{ $factura['id'] }}">
                    <td>
                        <span style="font-family:'Courier New',monospace;font-size:11px;
                                     color:var(--blue);font-weight:600;">
                            {{ $factura['consecutivo'] }}
                        </span>
                    </td>
                    <td style="font-size:12px;font-weight:500;">
                        {{ $factura['receptor_nombre'] ?: '—' }}
                    </td>
                    <td style="font-size:11px;color:var(--label2);">
                        {{ \Carbon\Carbon::parse($factura['created_at'])->format('d/m/Y H:i') }}
                    </td>
                    <td style="text-align:right;font-weight:700;
                               font-family:'Courier New',monospace;font-size:12px;">
                        ₡{{ number_format($factura['total_comprobante'], 2) }}
                    </td>
                    <td>
                        <span class="chip {{ match($factura['estado_hacienda']) {
                            'aceptado'    => 'ch-green',
                            'rechazado'   => 'ch-red',
                            'contingencia'=> 'ch-orange',
                            default       => 'ch-blue',
                        } }}">
                            {{ match($factura['estado_hacienda']) {
                                'aceptado'    => '✓',
                                'rechazado'   => '✕',
                                'contingencia'=> '⚠️',
                                default       => '⏳',
                            } }}
                            {{ ucfirst($factura['estado_hacienda']) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('documentos.detalle', $factura['id']) }}"
                           wire:navigate
                           style="font-size:11px;color:var(--blue);text-decoration:none;">
                            Ver →
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" style="text-align:center;padding:30px;color:var(--label2);">
                        No hay facturas emitidas aún
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
        @if(count($ultimas_facturas) >= 8)
        <div style="padding:12px 20px;border-top:.5px solid var(--separator);text-align:center;">
            <a href="{{ route('documentos') }}" wire:navigate
               style="font-size:12px;color:var(--blue);text-decoration:none;font-weight:500;">
                Ver todos los documentos →
            </a>
        </div>
        @endif
    </div>

</div>