{{-- resources/views/livewire/reportes/gastos.blade.php --}}
<div>
    <div style="margin-bottom:20px;">
        <div class="page-title">🧾 Reportes · Gastos</div>
        <div class="page-sub">Crédito fiscal · Excel para declaración D-104</div>
    </div>

    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    <div class="inset-card" style="margin-bottom:18px;">
        <div style="padding:18px 20px;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;">
            <div class="field" style="min-width:160px;">
                <label>Desde</label>
                <input type="date" wire:model.live="desde" />
            </div>
            <div class="field" style="min-width:160px;">
                <label>Hasta</label>
                <input type="date" wire:model.live="hasta" />
            </div>
            <button wire:click="exportar"
                    wire:loading.attr="disabled"
                    class="btn-blue" style="padding:10px 22px;">
                <span wire:loading.remove wire:target="exportar">⬇️ Exportar Excel</span>
                <span wire:loading wire:target="exportar">Generando…</span>
            </button>
        </div>
    </div>

    @if($resumen)
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">Total gastos</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($resumen['total_gastos'] ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">IVA pagado</div>
            <div style="font-size:22px;font-weight:700;color:var(--red);">₡{{ number_format($resumen['total_iva_pagado'] ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">✅ IVA acreditable</div>
            <div style="font-size:22px;font-weight:700;color:var(--green2);">₡{{ number_format($resumen['total_iva_acreditable'] ?? 0, 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px;">No acreditable</div>
            <div style="font-size:22px;font-weight:700;color:var(--orange);">₡{{ number_format($resumen['total_iva_no_acreditable'] ?? 0, 0) }}</div>
        </div>
    </div>

    {{-- Desglose por categoría --}}
    <div class="group-label">Gastos por categoría</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <table class="ios-table">
            <thead>
                <tr>
                    <th>Categoría</th>
                    <th style="text-align:right;">Monto</th>
                    <th style="text-align:right;">% del total</th>
                </tr>
            </thead>
            <tbody>
                @php
                    $total_cat = ($resumen['mercancia']??0)+($resumen['servicio']??0)+
                                 ($resumen['alquiler']??0)+($resumen['activo_fijo']??0)+($resumen['otro']??0);
                    $cats = [
                        'Mercancía' => $resumen['mercancia']??0,
                        'Servicio'  => $resumen['servicio']??0,
                        'Alquiler'  => $resumen['alquiler']??0,
                        'Activo fijo'=> $resumen['activo_fijo']??0,
                        'Otro'      => $resumen['otro']??0,
                    ];
                @endphp
                @foreach($cats as $cat => $monto)
                @if($monto > 0)
                <tr>
                    <td style="font-size:12px;font-weight:500;">{{ $cat }}</td>
                    <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                        ₡{{ number_format($monto, 2) }}
                    </td>
                    <td style="text-align:right;font-size:12px;color:var(--label2);">
                        {{ $total_cat > 0 ? number_format($monto/$total_cat*100, 1) : 0 }}%
                    </td>
                </tr>
                @endif
                @endforeach
            </tbody>
        </table>
    </div>

    @if($datos && $datos->count() > 0)
    <div class="group-label">Últimos gastos del período ({{ $datos->count() }} total)</div>
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:800px;">
                <thead>
                    <tr>
                        <th>Fecha</th>
                        <th>Proveedor</th>
                        <th>Categoría</th>
                        <th style="text-align:right;">IVA pagado</th>
                        <th style="text-align:right;">Acreditable</th>
                        <th style="text-align:right;">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($datos->take(15) as $g)
                    <tr wire:key="rg-{{ $g->id }}">
                        <td style="font-size:11px;color:var(--label2);">{{ \Carbon\Carbon::parse($g->fecha_emision)->format('d/m/Y') }}</td>
                        <td style="font-size:12px;">{{ $g->proveedor_nombre }}</td>
                        <td><span class="chip ch-gray">{{ ucfirst($g->categoria) }}</span></td>
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:11px;">₡{{ number_format($g->total_iva, 2) }}</td>
                        <td style="text-align:right;font-size:11px;font-weight:600;color:var(--green2);">₡{{ number_format($g->iva_acreditable, 2) }}</td>
                        <td style="text-align:right;font-weight:700;font-family:'Courier New',monospace;font-size:12px;">₡{{ number_format($g->total_comprobante, 2) }}</td>
                    </tr>
                    @endforeach
                    @if($datos->count() > 15)
                    <tr>
                        <td colspan="6" style="text-align:center;padding:12px;font-size:12px;color:var(--label2);">
                            … y {{ $datos->count() - 15 }} más en el Excel exportado
                        </td>
                    </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>
    @endif
    @endif
</div>