{{-- Panel de detalle de un DO de importación (kit ui-ctc): pestañas Detalle, Facturas y Unidades de carga.
     Ocupa el ancho visible de la tabla (ancho, del Alpine de la página) y no se desplaza con ella.
     - $local = null: los datos llegan por fetch a /detalle-importacion (Alpine: detalles[abierto], etiquetaDetalle).
     - $local = ['etiqueta', 'ped', 'facturas', 'unidades']: datos ya cargados en el servidor (histórico). --}}
@php $local = $local ?? null; @endphp
<div class="sticky left-0 pb-5 pl-16 pr-5 pt-1" :style="'width:' + ancho + 'px'">
    <div class="rounded-[10px] border border-[var(--borde)] bg-[var(--superficie)]">
        @if ($local)
            <div x-data="{ pestanaDetalle: 'detalle' }">
                <div class="flex gap-1 overflow-x-auto border-b border-[var(--borde)] px-4" role="tablist">
                    <x-pestana etiqueta="Detalle importación" icono="list-bullet" tamano="chica" :conteo="(string) $local['etiqueta']" alpine="pestanaDetalle === 'detalle'" x-on:click="pestanaDetalle = 'detalle'" />
                    <x-pestana etiqueta="Facturas" icono="document-text" tamano="chica" :conteo="count($local['facturas'])" alpine="pestanaDetalle === 'facturas'" x-on:click="pestanaDetalle = 'facturas'" />
                    <x-pestana etiqueta="Unidades de carga" icono="cube" tamano="chica" :conteo="count($local['unidades'])" alpine="pestanaDetalle === 'unidades'" x-on:click="pestanaDetalle = 'unidades'" />
                </div>
                <div x-show="pestanaDetalle === 'detalle'">@include('partials.detalle-importacion.detalle', ['ped' => $local['ped']])</div>
                <div x-show="pestanaDetalle === 'facturas'" x-cloak>@include('partials.detalle-importacion.facturas', ['facturas' => $local['facturas']])</div>
                <div x-show="pestanaDetalle === 'unidades'" x-cloak>@include('partials.detalle-importacion.unidades', ['unidades' => $local['unidades']])</div>
            </div>
        @else
            <p x-show="cargando === abierto" class="flex items-center gap-2 px-5 py-6 text-[13px] text-[var(--texto-suave)]" role="status">
                <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Cargando el detalle del DO…
            </p>
            <p x-show="detalles[abierto] && detalles[abierto].error" class="px-5 py-6 text-[13px] text-[var(--texto-suave)]">No se pudo consultar el detalle del DO. Intente de nuevo más tarde.</p>
            <p x-show="detalles[abierto] && detalles[abierto].vacio" class="px-5 py-6 text-[13px] text-[var(--texto-suave)]">Sin información de detalle para este DO.</p>
            <div x-show="detalles[abierto] && detalles[abierto].detalleImportacion !== undefined">
                <div class="flex gap-1 overflow-x-auto border-b border-[var(--borde)] px-4" role="tablist">
                    <x-pestana etiqueta="Detalle importación" icono="list-bullet" tamano="chica" alpine="pestanaDetalle === 'detalle'" conteo-alpine="etiquetaDetalle" x-on:click="pestanaDetalle = 'detalle'" />
                    <x-pestana etiqueta="Facturas" icono="document-text" tamano="chica" alpine="pestanaDetalle === 'facturas'" conteo-alpine="detalles[abierto] ? detalles[abierto].total_facturas : ''" x-on:click="pestanaDetalle = 'facturas'" />
                    <x-pestana etiqueta="Unidades de carga" icono="cube" tamano="chica" alpine="pestanaDetalle === 'unidades'" conteo-alpine="detalles[abierto] ? detalles[abierto].total_unidades : ''" x-on:click="pestanaDetalle = 'unidades'" />
                </div>
                <div x-show="pestanaDetalle === 'detalle'" x-html="detalles[abierto] ? detalles[abierto].detalleImportacion : ''"></div>
                <div x-show="pestanaDetalle === 'facturas'" x-html="detalles[abierto] ? detalles[abierto].facturas : ''"></div>
                <div x-show="pestanaDetalle === 'unidades'" x-html="detalles[abierto] ? detalles[abierto].unidades : ''"></div>
            </div>
        @endif
    </div>
</div>