{{-- resources/views/livewire/gastos/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">📥 Gastos · XML de Hacienda</div>
            <div class="page-sub">Facturas de compra recibidas · IVA acreditable · inventario automático</div>
        </div>
        <div style="display:flex;gap:10px;">
            <button wire:click="sincronizar"
                    wire:loading.attr="disabled"
                    class="btn-plain"
                    {{ $sincronizando ? 'disabled' : '' }}>
                <span wire:loading.remove wire:target="sincronizar">🔄 Sincronizar con Hacienda</span>
                <span wire:loading wire:target="sincronizar">Sincronizando…</span>
            </button>
        </div>
    </div>

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

    {{-- ── KPIs DEL PERÍODO ────────────────────────── --}}
    <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($totales->total) }}</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;">Monto total</div>
            <div style="font-size:22px;font-weight:700;">
                ₡{{ number_format($totales->monto_total ?? 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($totales->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;">📦 Con inventario</div>
            <div style="font-size:22px;font-weight:700;color:var(--blue);">
                {{ number_format($totales->con_inventario ?? 0) }}
            </div>
        </div>
    </div>

    {{-- ── SUBIR XML ────────────────────────────────── --}}
    <div class="group-label">Subir XML manualmente</div>
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:16px 20px;">
            @if($upload_error)
            <div class="alert alert-red" style="margin-bottom:12px;">❌ {{ $upload_error }}</div>
            @endif
            @if($upload_exito)
            <div class="alert alert-green" style="margin-bottom:12px;">✅ {{ $upload_exito }}</div>
            @endif

            <div style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
                <div class="field" style="flex:2;min-width:240px;">
                    <label>Archivo XML de Hacienda</label>
                    <input type="file"
                           wire:model="xml_file"
                           accept=".xml"
                           style="background:var(--bg);border:none;border-radius:12px;
                                  padding:8px 12px;font-family:'Ubuntu',sans-serif;" />
                </div>

                <div class="field" style="flex:1;min-width:180px;">
                    <label>Bodega destino (si aplica)</label>
                    <select wire:model="bodega_destino_id">
                        <option value="">Sin afectar inventario</option>
                        @foreach($bodegas as $bodega)
                        <option value="{{ $bodega->id }}">{{ $bodega->nombre }}</option>
                        @endforeach
                    </select>
                </div>

                <button wire:click="subirXml"
                        wire:loading.attr="disabled"
                        class="btn-blue"
                        style="white-space:nowrap;">
                    <span wire:loading.remove wire:target="subirXml">📤 Procesar XML</span>
                    <span wire:loading wire:target="subirXml">Procesando…</span>
                </button>
            </div>
        </div>
    </div>

    {{-- ── FILTROS ──────────────────────────────────── --}}
    <div class="inset-card" style="margin-bottom:16px;">
        <div style="padding:14px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            <input type="text"
                   wire:model.live.debounce.400ms="filtro_proveedor"
                   placeholder="🔍 Buscar proveedor o cédula…"
                   style="font-size:13px;padding:8px 14px;background:var(--bg);border:none;
                          border-radius:50px;min-width:200px;outline:none;
                          font-family:'Ubuntu',sans-serif;" />

            <select wire:model.live="filtro_categoria"
                    style="font-size:12px;padding:8px 12px;background:var(--bg);border:none;
                           border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;">
                <option value="">Todas las categorías</option>
                @foreach($categorias as $val => $label)
                <option value="{{ $val }}">{{ $label }}</option>
                @endforeach
            </select>

            <select wire:model.live="filtro_estado"
                    style="font-size:12px;padding:8px 12px;background:var(--bg);border:none;
                           border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;">
                <option value="">Todos los estados</option>
                @foreach($estados as $val => $label)
                <option value="{{ $val }}">{{ $label }}</option>
                @endforeach
            </select>

            <input type="date" wire:model.live="filtro_desde"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />
            <span style="font-size:12px;color:var(--label2);">—</span>
            <input type="date" wire:model.live="filtro_hasta"
                   style="font-size:12px;padding:7px 10px;background:var(--bg);border:none;
                          border-radius:50px;font-family:'Ubuntu',sans-serif;outline:none;" />
        </div>
    </div>

    {{-- ── TABLA DE GASTOS ──────────────────────────── --}}
    <div class="inset-card">
        <div style="overflow-x:auto;">
            <table class="ios-table" style="min-width:1000px;">
                <thead>
                    <tr>
                        <th>Proveedor</th>
                        <th>Clave Hacienda</th>
                        <th>Fecha</th>
                        <th>Categoría</th>
                        <th style="text-align:right;">Base gravada</th>
                        <th style="text-align:right;">IVA pagado</th>
                        <th style="text-align:right;">Acreditable</th>
                        <th style="text-align:right;">Total</th>
                        <th>Inventario</th>
                        <th>CxP</th>
                        <th>Estado</th>
                        <th style="text-align:center;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($gastos as $gasto)
                    <tr wire:key="gasto-{{ $gasto->id }}">

                        {{-- Proveedor --}}
                        <td>
                            <div class="td-bold" style="font-size:12px;">
                                {{ $gasto->proveedor_nombre }}
                            </div>
                            <div style="font-size:10px;color:var(--label2);">
                                {{ $gasto->proveedor_cedula_tipo }}-{{ $gasto->proveedor_cedula }}
                            </div>
                        </td>

                        {{-- Clave --}}
                        <td>
                            <div class="td-mono" style="font-size:10px;">
                                {{ substr($gasto->clave_hacienda, 0, 12) }}…
                            </div>
                            <div style="font-size:9px;color:var(--label2);">
                                Consec: {{ $gasto->consecutivo_proveedor }}
                            </div>
                        </td>

                        {{-- Fecha --}}
                        <td style="font-size:11px;color:var(--label2);white-space:nowrap;">
                            {{ \Carbon\Carbon::parse($gasto->fecha_emision)->format('d M Y') }}
                        </td>

                        {{-- Categoría --}}
                        <td>
                            @php
                                $cat_labels = [
                                    'mercancia'   => '📦',
                                    'servicio'    => '🔧',
                                    'alquiler'    => '🏢',
                                    'activo_fijo' => '🏭',
                                    'otro'        => '📄',
                                ];
                            @endphp
                            <span class="chip ch-gray">
                                {{ $cat_labels[$gasto->categoria] ?? '📄' }}
                                {{ ucfirst($gasto->categoria) }}
                            </span>
                            @if($gasto->subcategoria)
                            <div style="font-size:10px;color:var(--label2);margin-top:2px;">
                                {{ $gasto->subcategoria }}
                            </div>
                            @endif
                        </td>

                        {{-- Base gravada --}}
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format(
                                $gasto->base_gravada_13 + $gasto->base_gravada_4 +
                                $gasto->base_gravada_2 + $gasto->base_gravada_1,
                                2
                            ) }}
                        </td>

                        {{-- IVA pagado --}}
                        <td style="text-align:right;font-family:'Courier New',monospace;font-size:12px;">
                            ₡{{ number_format($gasto->total_iva, 2) }}
                        </td>

                        {{-- IVA acreditable --}}
                        <td style="text-align:right;font-size:12px;font-weight:600;">
                            @if($gasto->iva_acreditable > 0)
                                <span style="color:var(--green2);">
                                    ₡{{ number_format($gasto->iva_acreditable, 2) }}
                                </span>
                            @else
                                <span style="color:var(--red);">No aplica</span>
                            @endif
                        </td>

                        {{-- Total --}}
                        <td style="text-align:right;font-weight:700;font-family:'Courier New',monospace;
                                   font-size:12px;white-space:nowrap;">
                            ₡{{ number_format($gasto->total_comprobante, 2) }}
                        </td>

                        {{-- Inventario --}}
                        <td>
                            @if($gasto->afecta_inventario && $gasto->inventario_procesado)
                                <span class="chip ch-green">📦 Actualizado</span>
                            @elseif($gasto->afecta_inventario && !$gasto->inventario_procesado)
                                <span class="chip ch-orange">⏳ Pendiente</span>
                            @else
                                <span class="chip ch-gray">Servicio</span>
                            @endif
                        </td>

                        {{-- CxP --}}
                        <td>
                            @if($gasto->condicion_venta === '02')
                                <span class="chip {{ match($gasto->estado_cxp) {
                                    'pagado'   => 'ch-green',
                                    'vencido'  => 'ch-red',
                                    'parcial'  => 'ch-blue',
                                    'pendiente'=> 'ch-orange',
                                    default    => 'ch-gray',
                                } }}">
                                    {{ match($gasto->estado_cxp) {
                                        'pagado'   => '✓ Pagada',
                                        'vencido'  => '🔴 Vencida',
                                        'parcial'  => '◑ Parcial',
                                        'pendiente'=> '⏳ Pendiente',
                                        default    => 'Contado',
                                    } }}
                                </span>
                                @if($gasto->fecha_vencimiento_cxp)
                                <div style="font-size:9px;color:var(--label2);margin-top:2px;">
                                    Vence: {{ \Carbon\Carbon::parse($gasto->fecha_vencimiento_cxp)->format('d/m/Y') }}
                                </div>
                                @endif
                            @else
                                <span style="font-size:11px;color:var(--label2);">Contado</span>
                            @endif
                        </td>

                        {{-- Estado Hacienda --}}
                        <td>
                            <span class="chip {{ match($gasto->estado_hacienda) {
                                'validado' => 'ch-green',
                                'invalido' => 'ch-red',
                                default    => 'ch-orange',
                            } }}">
                                {{ match($gasto->estado_hacienda) {
                                    'validado' => '✓ Validado',
                                    'invalido' => '✕ Inválido',
                                    default    => '⏳ Pendiente',
                                } }}
                            </span>
                        </td>

                        {{-- Acciones --}}
                        <td>
                            <div style="display:flex;gap:5px;justify-content:center;">
                                <button wire:click="abrirClasificacion({{ $gasto->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 9px;"
                                        title="Clasificar gasto">
                                    🏷️
                                </button>
                                @if($gasto->iva_acreditable > 0)
                                <button wire:click="marcarIvaNoAcreditable({{ $gasto->id }})"
                                        class="btn-plain" style="font-size:11px;padding:5px 9px;"
                                        title="Marcar IVA como no acreditable">
                                    ❌
                                </button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12" style="text-align:center;padding:40px;color:var(--label2);">
                            No hay gastos registrados con los filtros seleccionados
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Paginación --}}
        @if($gastos->hasPages())
        <div style="padding:14px 18px;border-top:.5px solid var(--separator);">
            {{ $gastos->links() }}
        </div>
        @endif
    </div>

    {{-- ── MODAL CLASIFICACIÓN ─────────────────────── --}}
    @if($clasificando_id)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('clasificando_id', null)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:380px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div style="font-size:17px;font-weight:700;margin-bottom:6px;">🏷️ Clasificar gasto</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                La categoría afecta la declaración D-104 y los reportes contables.
            </div>

            <div class="field" style="margin-bottom:14px;">
                <label>Categoría</label>
                <select wire:model="nueva_categoria">
                    @foreach($categorias as $val => $label)
                    <option value="{{ $val }}">{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Subcategoría (opcional)</label>
                <input type="text" wire:model="nueva_subcategoria"
                       placeholder="Ej: Insumos médicos, Papelería…" />
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('clasificando_id', null)"
                        class="btn-plain" style="flex:1;justify-content:center;">
                    Cancelar
                </button>
                <button wire:click="guardarClasificacion"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    💾 Guardar
                </button>
            </div>
        </div>
    </div>
    @endif

</div>