{{-- Reporte de recobro de bodegaje (reporte/recobro, Groupe SEB): movimientos de bodegaje por DO y el seguimiento de su
     reclamación (editable). Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). --}}
@php
    $estados = ['1' => 'RADICADO ANTE NAVIERO', '2' => 'RECHAZO', '3' => 'APROBADO PTE DESEMBOLSO', '4' => 'FINALIZADO', '5' => 'RADICADO ANTE EL EMBARCADOR'];
    $varianteEstado = ['1' => 'info', '2' => 'peligro', '3' => 'aviso', '4' => 'exito', '5' => 'info'];
    $numericas = ['DIAS_COBRADOS', 'CANT_CONT', 'VALOR', 'VALOR_IVA', 'PORCENTAJE_IVA', 'VALOR_SIN_IVA', 'valor_recaudado'];
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<div x-data x-on:keydown.escape.window="$wire.openModal && $wire.set('openModal', false)">
<x-pagina>
    <x-icono-simbolos :nombres="['o:pencil-square']" />

    <x-encabezado-pagina ruta="Exportaciones · Reportes" titulo="Recobro de bodegaje">
        @if (count($data) > 0)
            <x-slot name="acciones">
                <x-secondary-button wire:click="download" wire:loading.attr="disabled" wire:target="download">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                    <span wire:loading.remove wire:target="download">Descargar</span>
                    <span wire:loading wire:target="download">Generando Excel…</span>
                </x-secondary-button>
            </x-slot>
        @endif
    </x-encabezado-pagina>

    @if (Session::has('success'))<x-alerta tipo="exito">{{ Session::get('success') }}</x-alerta>@endif
    @if (Session::has('warning'))<x-alerta tipo="error">{{ Session::get('warning') }}</x-alerta>@endif

    <x-barra-busqueda modelo="buscar" accion="buscarFechas" placeholder="Buscar por DO (exacto)" :abierto="true">
        <x-slot name="filtros">
            <x-campo etiqueta="Fecha movimiento desde" para="fechaInicio"><x-input type="date" id="fechaInicio" wire:model="fechaInicio" /></x-campo>
            <x-campo etiqueta="Fecha movimiento hasta" para="fechaFin"><x-input type="date" id="fechaFin" wire:model="fechaFin" /></x-campo>
        </x-slot>
    </x-barra-busqueda>

    <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
        <div class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3 text-[12px] text-[var(--texto-suave)]">
            <span><b class="font-bold text-[var(--texto)]">{{ number_format($data->total(), 0, ',', '.') }}</b> movimientos</span>
            <span wire:loading.delay class="flex items-center gap-1.5 text-[var(--acento-texto)]" role="status"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Procesando, por favor espere…</span>
        </div>
        <div class="ctc-tabla-caja">
            <table class="ctc-tabla">
                <thead>
                    <tr>
                        <th class="ctc-fija ctc-fija-ultima" style="left: 0"><span class="sr-only">Editar</span></th>
                        @foreach ($campos as $campo)
                            <th @class(['!text-right' => in_array($campo, $numericas)])>{{ str_replace('_', ' ', $campo) }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse ($data as $registro)
                        <tr>
                            <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0">
                                {{-- Antes edit({{ do }}) iba sin comillas: con un DO alfanumérico (26A…) el clic daba error de JavaScript. --}}
                                <button type="button" wire:click="edit({{ \Illuminate\Support\Js::from((string) $registro['do']) }})" class="ctc-accion" title="Editar recobro del DO {{ $registro['do'] }}" aria-label="Editar recobro del DO {{ $registro['do'] }}">
                                    <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                </button>
                            </td>
                            @foreach ($campos as $campo)
                                @php $valor = $registro[$campo] ?? null; @endphp
                                @if ($campo === 'do')
                                    <td class="whitespace-nowrap font-semibold">{{ $valor }}</td>
                                @elseif ($campo === 'estado')
                                    <td>@if ($valor !== null && $valor !== '')<x-etiqueta :variante="$varianteEstado[(string) $valor] ?? 'neutro'">{{ $estados[(string) $valor] ?? $valor }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                @elseif (in_array($campo, ['CLIENTE', 'CLIENTE_EXPORTADOR', 'causal', 'observacion', 'CONCEPTO']))
                                    <td class="min-w-[180px] text-[12.5px] leading-snug">{!! $valor !== null && $valor !== '' ? e($valor) : $vacio !!}</td>
                                @else
                                    <td @class(['whitespace-nowrap', 'text-right' => in_array($campo, $numericas)])>{!! $valor !== null && $valor !== '' ? e($valor) : $vacio !!}</td>
                                @endif
                            @endforeach
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="{{ count($campos) + 1 }}" class="!p-0">
                                <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]"><x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                <p class="mt-2">No se encontraron registros.</p></div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($data->hasPages())
            <div class="border-t border-[var(--borde)] px-5 py-3">{{ $data->links('vendor.pagination.ctc-livewire') }}</div>
        @endif
    </section>
</x-pagina>

    {{-- Seguimiento del recobro de un DO --}}
    @if ($openModal)
        <div class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="recobro-titulo">
            <div class="fixed inset-0 bg-black/40" wire:click="$set('openModal', false)"></div>
            <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <header class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <h2 id="recobro-titulo" class="flex-1 text-[15px] font-bold text-[var(--texto)]">Recobro de bodegaje · DO {{ $do }}</h2>
                    <x-boton-icono etiqueta="Cerrar" wire:click="$set('openModal', false)"><x-icono nombre="x-mark" class="h-5 w-5" /></x-boton-icono>
                </header>
                <div class="grid gap-4 px-5 py-4 sm:grid-cols-3">
                    <x-campo etiqueta="Fecha envío reclamación" para="fechaReclamacion" error="fechaReclamacion"><x-input type="date" id="fechaReclamacion" wire:model="fechaReclamacion" /></x-campo>
                    <x-campo etiqueta="Causal" para="causal" error="causal" class="sm:col-span-2"><x-input type="text" id="causal" wire:model="causal" /></x-campo>
                    <x-campo etiqueta="Valor recaudado" para="valorRecaudado" error="valorRecaudado"><x-input type="number" id="valorRecaudado" wire:model.live="valorRecaudado" /></x-campo>
                    <x-campo etiqueta="Fecha devolución" para="fechaDevolucion" error="fechaDevolucion"><x-input type="date" id="fechaDevolucion" wire:model.live="fechaDevolucion" /></x-campo>
                    <x-campo etiqueta="Estado" para="estado" error="estado">
                        <x-select id="estado" wire:model.live="estado">
                            <option value="">Seleccione un estado</option>
                            @foreach ($estados as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                        </x-select>
                    </x-campo>
                    <x-campo etiqueta="Observación" para="observacion" error="observacion" class="sm:col-span-3"><x-input type="text" id="observacion" wire:model.live="observacion" /></x-campo>
                </div>
                <footer class="flex flex-row-reverse flex-wrap gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-button type="button" wire:click="save" wire:loading.attr="disabled" wire:target="save">Guardar</x-button>
                    <x-secondary-button wire:click="$set('openModal', false)">Cancelar</x-secondary-button>
                </footer>
            </div>
        </div>
    @endif
</div>