{{-- Abastecedores de Groupe SEB / Imusa (Importaciones\ImusaAbastecedores, ruta gruposeb/abastecedor). Kit ui-ctc
     (MigracionLayout.MD, L3). Cinco pestañas como antes (Base de datos, Revisión IA de productos, Abastecedores y Comex,
     Programación arribo y Plantilla de notificaciones); la activa sigue a $panel cuando el servidor lo cambia. Los
     modales Bootstrap y jQuery pasan a diálogos Alpine; los envíos a Livewire son los mismos eventos con los mismos
     parámetros en el mismo orden (guardarRegistro, guardarRegistroAbastecedor, actualizarMasivamente, guardarPlantilla,
     notificarAbastecedor, notificarProgramacionArribo, importarPlantilla). Los diálogos van en wire:ignore, como antes
     (sus listas de abastecedores son las de la primera carga). --}}
@php
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $pestanaInicial = array_search('active', $panel);
    $pestanaInicial = $pestanaInicial === false ? 0 : $pestanaInicial;
    $bloqueado = 'background-color: color-mix(in srgb, #DC2626 18%, transparent); box-shadow: inset 4px 0 0 #DC2626';
@endphp
<div x-data="{
        pestana: {{ (int) $pestanaInicial }},
        dialogo: null,
        menuAccion: false,
        valores(id) { return Array.from(document.getElementById(id).selectedOptions).map(o => o.value); },
        marcar(id, lista) { Array.from(document.getElementById(id).options).forEach(o => { o.selected = lista.includes(o.value); }); },
        poner(id, valor) { document.getElementById(id).value = valor ?? ''; },
        leer(id) { return document.getElementById(id).value; },
        abrirEdicion(d) {
            this.poner('R_cod_material', d.cod_material);
            this.poner('R_descripcion', d.descripcion);
            this.poner('R_tipo', d.tipo);
            this.poner('R_id_abastecedor', String(d.id_abastecedor ?? '').substr(0, 1));
            this.poner('R_nom_planta', d.nom_planta);
            this.dialogo = 'editar';
        },
        abrirNuevo() {
            ['R_cod_material', 'R_descripcion', 'R_tipo', 'R_nom_planta'].forEach(id => this.poner(id, ''));
            this.dialogo = 'editar';
        },
        abrirEdicionAbastecedor(d) {
            this.poner('A_nombre', d.nombre);
            this.poner('A_variable', d.variable);
            this.marcar('A_tipo', String(d.tipo ?? '').split(','));
            this.marcar('A_comex', String(d.analista ?? '').split(','));
            this.poner('A_comex_co', d.analistas_correos);
            this.poner('A_tel_movil', d.tel_movil);
            this.poner('A_planta', d.planta);
            this.poner('A_correo_electronico', d.correo_electronico);
            this.poner('A_observaciones', d.observaciones);
            this.dialogo = 'editarInfo';
        },
        abrirNuevoAbastecedorInfo() {
            ['A_nombre', 'A_variable', 'A_tel_movil', 'A_correo_electronico', 'A_observaciones'].forEach(id => this.poner(id, ''));
            this.dialogo = 'editarInfo';
            this.$nextTick(() => document.getElementById('A_nombre').focus());
        },
        abrirResumen(html) {
            this.dialogo = 'resumen';
            this.$nextTick(() => { document.getElementById('resumen_carga').innerHTML = html; });
        },
        guardarRegistro() {
            if (!confirm('CONFIRMACION REQUERIDA\n\nSeguro de actualizar este registro?')) return;
            this.dialogo = null;
            Livewire.dispatch('guardarRegistro', [this.leer('R_cod_material'), this.leer('R_descripcion'), this.leer('R_tipo'), this.leer('R_id_abastecedor'), this.leer('R_nom_planta')]);
        },
        guardarRegistroAbastecedor() {
            if (!confirm('CONFIRMACION REQUERIDA\n\nSeguro de actualizar este registro del abastecedor?')) return;
            this.dialogo = null;
            Livewire.dispatch('guardarRegistroAbastecedor', [this.leer('A_nombre'), this.leer('A_variable'), this.leer('A_planta'), this.valores('A_tipo'), this.valores('A_comex'), this.leer('A_comex_co'), this.leer('A_tel_movil'), this.leer('A_correo_electronico'), this.leer('A_observaciones')]);
        },
        notificarRevision() {
            if (confirm('CONFIRMACION REQUERIDA\n\nSeguro de notificar a los abastecedores sobre los productos NO creados en esta revision ahora ?')) Livewire.dispatch('notificarAbastecedor');
        },
        notificarArribo() {
            if (confirm('CONFIRMACION REQUERIDA\n\nSeguro de notificar ahora a los analistas sobre estos productos a nacionalizar ?')) Livewire.dispatch('notificarProgramacionArribo');
        },
        guardarPlantilla() {
            if (confirm('CONFIRMACION REQUERIDA\n\nSeguro de actualizar esta plantilla ahora ?')) Livewire.dispatch('guardarPlantilla', [this.leer('texto1'), this.leer('texto2')]);
        },
        cambiarPlantilla() {
            const info = this.leer('campo_plantilla').split('|');
            document.getElementById('imagen_plantilla').setAttribute('src', info[1]);
            this.poner('texto1', info[2]);
            this.poner('texto2', info[3]);
        },
        actualizarMasivamente() {
            if (!confirm('CONFIRMACION REQUERIDA\n\nSeguro de actualizar masivamente los registros con la informacion seleccionada ?')) return;
            const marcado = id => document.getElementById(id).checked;
            Livewire.dispatch('actualizarMasivamente', [
                marcado('valida_material') ? this.leer('M_cod_material') : '',
                marcado('valida_descripcion') ? this.leer('M_descripcion') : '',
                marcado('valida_tipo') ? this.valores('M_tipo') : '',
                marcado('valida_abastecedor') ? this.valores('M_id_abastecedor') : '',
                marcado('valida_planta') ? this.leer('M_nom_planta') : '',
            ]);
        },
        importarPlantilla() {
            if (confirm('CONFIRMACION REQUERIDA\n\nEsta operacion es irreversible, debe estar seguro de querer importar los datos\n\nDesea importar ahora?\n\nSI [Aceptar]\nNo [Cancelar]')) Livewire.dispatch('importarPlantilla');
        },
     }"
     x-init="$wire.$watch('panel', p => { const i = p.indexOf('active'); if (i >= 0) pestana = i; })"
     x-on:abrir-ventana-edicion.camel.window="abrirEdicion($event.detail)"
     x-on:abrir-nuevo-abastecedor.camel.window="abrirNuevo()"
     x-on:abrir-ventana-edicion-abastecedor.camel.window="abrirEdicionAbastecedor($event.detail)"
     x-on:abrir-nuevo-abastecedor-info.camel.window="abrirNuevoAbastecedorInfo()"
     x-on:abrir-ver-resuemn.camel.window="abrirResumen($event.detail.resumen)"
     x-on:keydown.escape.window="dialogo = null; menuAccion = false">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Abastecedores" descripcion="Gestión de abastecedores, revisión de productos y notificaciones." />

        <div wire:loading.delay role="status"
             class="flex items-center gap-2 rounded-lg border border-[var(--borde)] bg-[var(--superficie)] px-4 py-3 text-[13px] font-semibold text-[var(--acento-texto)]">
            <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Procesando, por favor espere…
        </div>

        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div role="tablist" class="flex gap-1 overflow-x-auto border-b border-[var(--borde)] px-5">
                <x-pestana etiqueta="Base de datos" :conteo="count($data)" icono="circle-stack" alpine="pestana === 0" x-on:click="pestana = 0" />
                <x-pestana etiqueta="Revisión IA de productos" icono="sparkles" alpine="pestana === 1" x-on:click="pestana = 1" />
                <x-pestana etiqueta="Abastecedores y Comex" :conteo="count($data_abastecedores)" icono="user-group" alpine="pestana === 2" x-on:click="pestana = 2" />
                <x-pestana etiqueta="Programación arribo" :conteo="count($data_arribos)" icono="truck" alpine="pestana === 3" x-on:click="pestana = 3" />
                <x-pestana etiqueta="Plantilla notificaciones" icono="envelope" alpine="pestana === 4" x-on:click="pestana = 4" />
            </div>

            {{-- 1. Base de datos --}}
            <div x-show="pestana === 0" role="tabpanel">
                <div class="space-y-3 border-b border-[var(--borde)] px-5 py-4">
                    <div class="grid gap-x-4 gap-y-3 [grid-template-columns:repeat(auto-fill,minmax(150px,1fr))]">
                        <x-campo etiqueta="Notificado" para="campo_notificado">
                            <x-select id="campo_notificado" wire:model="campo_notificado">
                                <option value="">Todos</option>
                                <option value="20">Si</option>
                                <option value="Pendiente">No</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Estado" para="campo_estado">
                            <x-select id="campo_estado" wire:model="campo_estado">
                                <option value="0,1">Todos</option>
                                <option value="1">Activos</option>
                                <option value="0">Bloqueados</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Tipo" para="campo_tipo">
                            <x-select id="campo_tipo" wire:model="campo_tipo">
                                <option value="">Todos</option>
                                <option value="MP">MP</option>
                                <option value="PT">PT</option>
                                <option value="Repuesto">Repuesto</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Planta" para="campo_planta">
                            <x-select id="campo_planta" wire:model="campo_planta">
                                <option value="">Todas</option>
                                <option value="Cajica">Cajica</option>
                                <option value="Rionegro">Rionegro</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Ordenar por" para="campo_orden">
                            <x-select id="campo_orden" wire:model="campo_orden">
                                <option value="id">Seleccione ...</option>
                                <option value="cod_material">Material</option>
                                <option value="descripcion">Descripcion</option>
                                <option value="tipo">Tipo</option>
                                <option value="valor_abastecedor">Abastecedor</option>
                                <option value="nom_planta">Planta</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Modo" para="campo_modo">
                            <x-select id="campo_modo" wire:model="campo_modo">
                                <option value="ASC">Ascen</option>
                                <option value="DESC">Descen</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Plantilla (xlsx)" para="archivo" class="sm:col-span-2">
                            <input id="archivo" wire:model.live="archivo" type="file"
                                   class="block w-full text-[13px] text-[var(--texto-suave)] file:mr-3 file:rounded-md file:border file:border-[var(--borde-fuerte)] file:bg-[var(--superficie)] file:px-3 file:py-1.5 file:text-[13px] file:font-semibold file:text-[var(--texto)] hover:file:bg-[var(--nav-hover)]">
                        </x-campo>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <div class="relative min-w-[12rem] flex-1 sm:max-w-xs">
                            <x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--texto-tenue)]" />
                            <x-input type="text" wire:model="campo_buscar" class="pl-9" placeholder="Buscar ..." aria-label="Buscar por material, descripción o abastecedor" />
                        </div>
                        <x-button type="button" wire:click="filtrarInformacion(0)"><x-icono nombre="funnel" class="h-4 w-4" /> Filtrar</x-button>
                        <x-secondary-button wire:click="nuevoAbastecedor()"><x-icono nombre="plus-circle" class="h-4 w-4" /> Nuevo</x-secondary-button>
                        <div class="relative" x-on:click.outside="menuAccion = false">
                            <x-secondary-button x-on:click="menuAccion = !menuAccion" x-bind:aria-expanded="menuAccion ? 'true' : 'false'" aria-haspopup="true">
                                <x-icono nombre="bars-3" class="h-4 w-4" /> Acción <x-icono nombre="chevron-down" variante="m" class="h-4 w-4" />
                            </x-secondary-button>
                            <div x-show="menuAccion" x-cloak role="menu"
                                 class="absolute left-0 z-50 mt-1 w-56 overflow-hidden rounded-lg border border-[var(--borde)] bg-[var(--superficie)] py-1 text-[13px] shadow-[var(--sombra-panel)]">
                                <button type="button" role="menuitem" x-on:click="menuAccion = false; dialogo = 'instrucciones'" class="flex w-full items-center gap-2 px-3 py-2 text-left text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="book-open" class="h-4 w-4" /> Leer instrucciones</button>
                                <a role="menuitem" target="_blank" href="https://awsasercol.s3.us-east-1.amazonaws.com/clientes/gruposeb/plantilla_en_blanco.xlsx" x-on:click="menuAccion = false" class="flex items-center gap-2 px-3 py-2 text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="arrow-down-tray" class="h-4 w-4" /> En blanco</a>
                                <button type="button" role="menuitem" wire:click="subirPlantilla()" x-on:click="menuAccion = false" class="flex w-full items-center gap-2 px-3 py-2 text-left text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="arrow-up-tray" class="h-4 w-4" /> Cargar y revisar</button>
                                <button type="button" role="menuitem" x-on:click="menuAccion = false; importarPlantilla()" class="flex w-full items-center gap-2 px-3 py-2 text-left text-[var(--texto)] hover:bg-[var(--nav-hover)]"><x-icono nombre="circle-stack" class="h-4 w-4" /> Importar datos</button>
                            </div>
                        </div>
                        <x-secondary-button wire:click="descargar()"><x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descarga</x-secondary-button>
                        <x-secondary-button x-on:click="dialogo = 'traslado'"><x-icono nombre="arrows-right-left" class="h-4 w-4" /> Traspasar</x-secondary-button>
                    </div>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 32rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="text-right">No.</th>
                                <th>Material</th>
                                <th>Descripción</th>
                                <th>Tipo</th>
                                <th>Abastecedor</th>
                                <th>Planta</th>
                                <th><span class="sr-only">Acciones</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data as $d)
                                <tr wire:key="base-{{ $d['id'] }}" @if ($id_abastecedor == $d['id']) data-sin-hover style="background: var(--acento-suave)" @elseif ($d['estado'] == 0) data-sin-hover style="{{ $bloqueado }}" @endif>
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td class="font-mono">{{ $d['cod_material'] }}</td>
                                    <td>{{ $d['descripcion'] }}</td>
                                    <td>{{ $d['tipo'] }}</td>
                                    <td>{{ $d['valor_abastecedor'] }}</td>
                                    <td>{{ $d['nom_planta'] }}</td>
                                    <td class="w-[1%] whitespace-nowrap !px-2">
                                        <div class="flex items-center justify-end gap-0.5">
                                            @if ($d['estado'] == 1)
                                                <button type="button" wire:click="bloqueaDesbloquea({{ (int) $d['id'] }},{{ (int) $d['estado'] }})" class="ctc-accion" title="Bloquear" aria-label="Bloquear"><x-icono nombre="lock-closed" sprite class="h-[18px] w-[18px] text-emerald-600 dark:text-emerald-400" /></button>
                                            @else
                                                <button type="button" wire:click="bloqueaDesbloquea({{ (int) $d['id'] }},{{ (int) $d['estado'] }})" class="ctc-accion" title="Desbloquear" aria-label="Desbloquear"><x-icono nombre="lock-open" sprite class="h-[18px] w-[18px] text-red-600 dark:text-red-400" /></button>
                                            @endif
                                            <button type="button" wire:click="editarInformacion({{ (int) $d['id'] }})" class="ctc-accion" title="Editar informacion" aria-label="Editar informacion"><x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" /></button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr data-sin-hover><td colspan="7" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay registros con estos filtros.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="flex flex-wrap items-center gap-3 border-t border-[var(--borde)] px-5 py-3 text-[12px] text-[var(--texto-suave)]">
                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-red-600 bg-red-600/20"></span>Bloqueado</span>
                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm border border-[var(--acento-borde)] bg-[var(--acento-suave)]"></span>En edición</span>
                </div>
            </div>

            {{-- 2. Revisión IA de productos --}}
            <div x-show="pestana === 1" x-cloak role="tabpanel">
                <div class="space-y-3 border-b border-[var(--borde)] px-5 py-4">
                    <div class="flex flex-wrap items-end gap-2">
                        <x-campo etiqueta="Existencia" para="campo_existencia" class="w-48">
                            <x-select id="campo_existencia" wire:model="campo_existencia">
                                <option value="">Todas</option>
                                <option value="SI">Creados</option>
                                <option value="NO">No creados</option>
                            </x-select>
                        </x-campo>
                        <x-button type="button" wire:click="revisarAhora()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Revisar</x-button>
                        <x-secondary-button wire:click="descargarRevision()"><x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar</x-secondary-button>
                        <x-secondary-button x-on:click="notificarRevision()"><x-icono nombre="envelope" class="h-4 w-4" /> Notificar</x-secondary-button>
                    </div>
                    <div class="flex flex-wrap gap-3">
                        <x-alerta tipo="exito" class="flex-1"><b>Resumen de Revision:</b> Productos creados <b>{{ $can_creados }}</b> de un total de <b>{{ $can_total }}</b></x-alerta>
                        <x-alerta tipo="error" class="flex-1">Productos NO creados <b>{{ $can_total - $can_creados }}</b></x-alerta>
                    </div>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 32rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="text-right">No.</th>
                                <th>Código</th>
                                <th>Descripción</th>
                                <th>Tipo</th>
                                <th>Creado</th>
                                <th>Notificaciones</th>
                                <th>Código Asercol</th>
                                <th>Nombre comercial</th>
                                <th>Subpartida</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($revision as $r)
                                <tr wire:key="revision-{{ $loop->index }}">
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td class="font-mono">{{ $r['cod_material'] }}</td>
                                    <td>{{ $r['descripcion'] }}</td>
                                    <td>{{ $r['tipo'] }}</td>
                                    <td>
                                        @if (array_key_exists('P' . $r['cod_material'], $resultado))
                                            <x-etiqueta variante="exito"><x-icono nombre="check" variante="m" class="h-3.5 w-3.5" /> Sí</x-etiqueta>
                                        @else
                                            <x-etiqueta variante="peligro"><x-icono nombre="x-mark" variante="m" class="h-3.5 w-3.5" /> No</x-etiqueta>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap">{!! str_replace([',', 'Pendiente'], '<br>', e($r['notificaciones'])) !!}</td>
                                    <td class="font-semibold">{{ $r['codigo_asercol'] }}</td>
                                    <td>{{ $r['nombre_comercial'] }}</td>
                                    <td class="font-mono">{{ $r['subpartida'] }}</td>
                                </tr>
                            @empty
                                <tr data-sin-hover><td colspan="9" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">Pulse Revisar para comparar la base de datos con los productos de Asercol.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- 3. Abastecedores y Comex --}}
            <div x-show="pestana === 2" x-cloak role="tabpanel">
                <div class="flex flex-wrap items-center gap-2 border-b border-[var(--borde)] px-5 py-4">
                    <x-button type="button" wire:click="filtrarAbastecedorInfo()"><x-icono nombre="funnel" class="h-4 w-4" /> Filtrar</x-button>
                    <x-secondary-button wire:click="nuevoAbastecedorInfo()"><x-icono nombre="plus-circle" class="h-4 w-4" /> Nuevo</x-secondary-button>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 32rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="text-right">No.</th>
                                <th>Abastecedor</th>
                                <th>Correo electrónico y planta</th>
                                <th>Tipo material</th>
                                <th>Comex</th>
                                <th>Analista aduanero</th>
                                <th>Observaciones</th>
                                <th><span class="sr-only">Acciones</span></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data_abastecedores as $a)
                                <tr wire:key="abastecedor-{{ $a['id'] }}" @if ($a['estado'] == 0) data-sin-hover style="{{ $bloqueado }}" @endif>
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td><span class="font-medium">{{ $a['nombre'] }}</span><br><span class="text-[12px] text-[var(--acento-texto)]">{{ $a['variable'] }}</span></td>
                                    <td>{{ $a['correo_electronico'] }}<br><b>{{ $a['planta'] }}</b></td>
                                    <td>{{ $a['tipo_descripcion'] ?? '' }}<br><b class="text-[var(--acento-texto)]">{{ $a['tipo'] }}</b></td>
                                    <td title="Correos Analistas: {{ $a['analistas_correos'] }}">{!! str_replace(',', '<br>', e($a['analista'])) !!}</td>
                                    <td>Rosana Garcia<br>Mayra Morales</td>
                                    <td>{{ $a['observaciones'] }}</td>
                                    <td class="w-[1%] whitespace-nowrap !px-2">
                                        <div class="flex items-center justify-end gap-0.5">
                                            @if ($a['estado'] == 1)
                                                <button type="button" wire:click="bloqueaDesbloqueaAbastecedor({{ (int) $a['id'] }},{{ (int) $a['estado'] }})" class="ctc-accion" title="Bloquear" aria-label="Bloquear"><x-icono nombre="lock-closed" sprite class="h-[18px] w-[18px] text-emerald-600 dark:text-emerald-400" /></button>
                                            @else
                                                <button type="button" wire:click="bloqueaDesbloqueaAbastecedor({{ (int) $a['id'] }},{{ (int) $a['estado'] }})" class="ctc-accion" title="Desbloquear" aria-label="Desbloquear"><x-icono nombre="lock-open" sprite class="h-[18px] w-[18px] text-red-600 dark:text-red-400" /></button>
                                            @endif
                                            <button type="button" wire:click="editarInformacionAbastecedor({{ (int) $a['id'] }})" class="ctc-accion" title="Editar informacion" aria-label="Editar informacion"><x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" /></button>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr data-sin-hover><td colspan="8" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay abastecedores registrados.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- 4. Programación arribo --}}
            <div x-show="pestana === 3" x-cloak role="tabpanel">
                <div class="flex flex-wrap items-end gap-2 border-b border-[var(--borde)] px-5 py-4">
                    <x-campo etiqueta="Productos" para="campo_mostrar_productos" class="w-48">
                        <x-select id="campo_mostrar_productos" wire:model="campo_mostrar_productos">
                            <option value="">Todos</option>
                            <option value="con">Con productos</option>
                            <option value="sin">Sin productos</option>
                        </x-select>
                    </x-campo>
                    <x-button type="button" wire:click="actualizaArriboConProductos()"><x-icono nombre="funnel" class="h-4 w-4" /> Filtrar</x-button>
                    <x-secondary-button wire:click="descargarInfoArribo()"><x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar</x-secondary-button>
                    <x-secondary-button x-on:click="notificarArribo()"><x-icono nombre="envelope" class="h-4 w-4" /> Notificar</x-secondary-button>
                    <span class="ml-auto flex items-center gap-1.5 self-center text-[12px] text-[var(--texto-suave)]"><span class="h-2.5 w-2.5 rounded-sm border border-red-600 bg-red-600"></span>No registra abastecedor</span>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 32rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th class="text-right">No.</th>
                                <th>DO</th>
                                <th>Material</th>
                                <th>Abastecedor</th>
                                <th>BL</th>
                                <th>ETA</th>
                                <th>Pto destino</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($data_arribos as $arr)
                                <tr wire:key="arribo-{{ $loop->index }}">
                                    <td class="text-right tabular-nums">{{ $loop->iteration }}</td>
                                    <td class="whitespace-nowrap"><span class="font-mono">{{ $arr['NUMERO_DO'] }}</span><br><span class="text-[12px] text-[var(--acento-texto)]">{{ $arr['ORDEN_COMPRA'] }}</span></td>
                                    <td><b>{{ $arr['CODIGO_PRODUCTO'] }}</b><br>{{ $arr['NOMBRE_COMERCIAL_PROD'] }}</td>
                                    <td>
                                        @if (count($arr['ABASTECEDOR']) > 0)
                                            @foreach ($arr['ABASTECEDOR'] as $inf)
                                                {{ $inf['NOM_ABASTECEDOR'] }} : <b>{{ $inf['TIPO'] }}</b> {{ $inf['PLANTA'] }}<br>
                                                @if ($inf['DETALLE_ABASTECEDOR'] != null)
                                                    <b>Analista : </b>{{ $inf['DETALLE_ABASTECEDOR']['analista'] }}<br>
                                                @endif
                                            @endforeach
                                        @else
                                            <span class="inline-block h-4 w-4 rounded-sm bg-red-600" title="No registra abastecedor"></span><span class="sr-only">No registra abastecedor</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap">{{ $arr['NUMERO_BL'] }}<br><span class="text-[12px] text-[var(--acento-texto)]">{{ $arr['FECHA_BL'] }}</span></td>
                                    <td class="whitespace-nowrap">{{ $arr['ETA'] }}</td>
                                    <td>{{ $arr['PUERTO_DESTINO'] }}</td>
                                </tr>
                            @empty
                                <tr data-sin-hover><td colspan="7" class="!p-0"><div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">No hay arribos programados.</div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- 5. Plantilla notificaciones --}}
            <div x-show="pestana === 4" x-cloak role="tabpanel" class="grid gap-5 p-5 lg:grid-cols-2">
                <div class="overflow-hidden rounded-lg border border-[var(--borde)]">
                    <img id="imagen_plantilla" class="w-full" src="{{ asset($campo_plantilla_imagen) }}" alt="Vista de la plantilla">
                </div>
                <div class="space-y-3">
                    <div class="flex items-end gap-2">
                        <x-campo etiqueta="Plantilla" para="campo_plantilla" class="flex-1">
                            <x-select id="campo_plantilla" x-on:change="cambiarPlantilla()" wire:model="campo_plantilla">
                                @foreach ($plantillas as $planti)
                                    <option value="{{ $planti['id'] }}|{{ $planti['imagen'] }}|{{ $planti['texto1'] }}|{{ $planti['texto2'] }}">{{ $planti['descripcion'] }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                        <x-button type="button" x-on:click="guardarPlantilla()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    </div>
                    <x-campo etiqueta="Información básica" para="texto1">
                        <textarea id="texto1" wire:model="campo_texto1" rows="5" class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] text-[var(--texto)] shadow-sm focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                    </x-campo>
                    <x-campo etiqueta="Instrucciones" para="texto2">
                        <textarea id="texto2" wire:model="campo_texto2" rows="5" class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] text-[var(--texto)] shadow-sm focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                    </x-campo>
                    <x-alerta tipo="info">
                        <p><b>Importante:</b> dentro del texto pueden usarse palabras especiales iniciadas con el signo de interrogación, para que el sistema reemplace automáticamente su valor por información relevante así:</p>
                        <ol class="mt-2 list-inside list-decimal space-y-0.5">
                            <li><b>?cantidad</b> para mostrar la cantidad de productos</li>
                            <li><b>?salto</b> para los saltos de línea</li>
                            <li><b>?abastecedor</b> para escribir el nombre del <b>Abastecedor</b></li>
                            <li><b>?comex</b> para escribir el nombre del <b>Comex</b></li>
                            <li><b>?B y B?</b> para demarcar textos en negrita</li>
                            <li><b>?R y R?</b> para demarcar textos en negrita color rojo</li>
                        </ol>
                    </x-alerta>
                </div>
            </div>
        </section>
    </x-pagina>

    <x-icono-simbolos :nombres="['o:lock-closed', 'o:lock-open', 'o:pencil-square']" />

    <div wire:ignore>
        {{-- Actualización masiva (antes #trasladoAbastecedor) --}}
        <template x-teleport="body">
            <div x-show="dialogo === 'traslado'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="traslado-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="border-b border-[var(--borde)] px-5 py-4"><h2 id="traslado-titulo" class="text-[15px] font-bold text-[var(--texto)]">Actualización masiva de datos del abastecedor</h2></div>
                    <div class="space-y-3 overflow-y-auto px-5 py-4 text-[13px] text-[var(--texto)]">
                        <x-alerta tipo="aviso"><b>IMPORTANTE:</b> esta funcionalidad aplica a los registros que se encuentran filtrados en la pestaña "Base de datos"; verifique que los criterios de filtrado son correctos antes de ejecutar esta opción.</x-alerta>
                        <p class="font-semibold">Seleccione los campos a actualizar…</p>
                        <div class="grid grid-cols-[auto_9rem_1fr] items-center gap-x-3 gap-y-2.5">
                            <x-checkbox id="valida_material" class="!h-5 !w-5" aria-label="Actualizar código material" /><x-label for="M_cod_material" value="Código material" /><x-input type="text" id="M_cod_material" />
                            <x-checkbox id="valida_descripcion" class="!h-5 !w-5" aria-label="Actualizar descripción" /><x-label for="M_descripcion" value="Descripción" /><x-input type="text" id="M_descripcion" />
                            <x-checkbox id="valida_tipo" class="!h-5 !w-5" aria-label="Actualizar tipo de material" /><x-label for="M_tipo" value="Tipo de material" />
                            <x-select id="M_tipo" multiple>
                                <option value="">Seleccione ...</option>
                                <option value="MP">Materia Prima</option>
                                <option value="PT">Producto Terminado</option>
                                <option value="Repuesto">Repuesto</option>
                            </x-select>
                            <x-checkbox id="valida_abastecedor" class="!h-5 !w-5" aria-label="Actualizar abastecedor" /><x-label for="M_id_abastecedor" value="Abastecedor" />
                            <x-select id="M_id_abastecedor" multiple>
                                <option value="">Seleccione ...</option>
                                @foreach ($data_abastecedores as $abas)
                                    <option value="{{ $abas['id'] }}">{{ strtoupper($abas['nombre']) }}</option>
                                @endforeach
                            </x-select>
                            <x-checkbox id="valida_planta" class="!h-5 !w-5" aria-label="Actualizar planta" /><x-label for="M_nom_planta" value="Planta" />
                            <x-select id="M_nom_planta">
                                <option value="">Seleccione ...</option>
                                <option value="Cajica">Cajica</option>
                                <option value="Rionegro">Rionegro</option>
                            </x-select>
                        </div>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                        <x-button type="button" x-on:click="actualizarMasivamente()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    </div>
                </div>
            </div>
        </template>

        {{-- Editar registro de la base de datos (antes #editarAbastecedor) --}}
        <template x-teleport="body">
            <div x-show="dialogo === 'editar'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="editar-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="border-b border-[var(--borde)] px-5 py-4"><h2 id="editar-titulo" class="text-[15px] font-bold text-[var(--texto)]">Actualización de información</h2></div>
                    <div class="space-y-3 overflow-y-auto px-5 py-4">
                        <x-campo etiqueta="Material" para="R_cod_material"><x-input type="text" id="R_cod_material" /></x-campo>
                        <x-campo etiqueta="Descripción" para="R_descripcion"><x-input type="text" id="R_descripcion" /></x-campo>
                        <x-campo etiqueta="Tipo de material" para="R_tipo">
                            <x-select id="R_tipo">
                                <option value="">Seleccione ...</option>
                                <option value="MP">Materia Prima</option>
                                <option value="PT">Producto Terminado</option>
                                <option value="Repuesto">Repuesto</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Abastecedor" para="R_id_abastecedor">
                            <x-select id="R_id_abastecedor">
                                <option value="">Seleccione ...</option>
                                @foreach ($data_abastecedores as $abas)
                                    <option value="{{ $abas['id'] }}">{{ strtoupper($abas['nombre']) }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Planta" para="R_nom_planta">
                            <x-select id="R_nom_planta">
                                <option value="">Seleccione ...</option>
                                <option value="Cajica">Cajica</option>
                                <option value="Rionegro">Rionegro</option>
                            </x-select>
                        </x-campo>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                        <x-button type="button" x-on:click="guardarRegistro()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    </div>
                </div>
            </div>
        </template>

        {{-- Editar abastecedor (antes #editarAbastecedorInfo) --}}
        <template x-teleport="body">
            <div x-show="dialogo === 'editarInfo'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="editar-info-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="border-b border-[var(--borde)] px-5 py-4"><h2 id="editar-info-titulo" class="text-[15px] font-bold text-[var(--texto)]">Actualización de información</h2></div>
                    <div class="space-y-3 overflow-y-auto px-5 py-4">
                        <x-campo etiqueta="Nombre abastecedor" para="A_nombre"><x-input type="text" id="A_nombre" /></x-campo>
                        <x-campo etiqueta="Variable" para="A_variable"><x-input type="text" id="A_variable" /></x-campo>
                        <x-campo etiqueta="Correo abastecedor" para="A_correo_electronico"><x-input type="text" id="A_correo_electronico" /></x-campo>
                        <x-campo etiqueta="Teléfono móvil" para="A_tel_movil"><x-input type="text" id="A_tel_movil" /></x-campo>
                        <x-campo etiqueta="Planta" para="A_planta">
                            <x-select id="A_planta">
                                <option value="">Seleccione ...</option>
                                <option value="Cajica">Cajica</option>
                                <option value="Rionegro">Rionegro</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Tipo de producto" para="A_tipo">
                            <x-select id="A_tipo" multiple class="h-28">
                                <option value="">Seleccione ...</option>
                                <option value="MP">Materia Prima</option>
                                <option value="PT">Producto Terminado</option>
                                <option value="Repuestos">Repuestos</option>
                                <option value="IS">Insumos</option>
                                <option value="PR">Proyectos</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Comex" para="A_comex">
                            <x-select id="A_comex" multiple class="h-20">
                                <option value="">Seleccione ...</option>
                                <option value="Yesid Lopez">Yesid Lopez</option>
                                <option value="Natalia Trujillo">Natalia Trujillo</option>
                            </x-select>
                        </x-campo>
                        <x-campo etiqueta="Correo Comex" para="A_comex_co"><x-input type="text" id="A_comex_co" /></x-campo>
                        <x-campo etiqueta="Observaciones" para="A_observaciones">
                            <textarea id="A_observaciones" wire:model="A_observaciones" rows="2" class="form-textarea block w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[13px] text-[var(--texto)] shadow-sm focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
                        </x-campo>
                    </div>
                    <div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                        <x-button type="button" x-on:click="guardarRegistroAbastecedor()"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                    </div>
                </div>
            </div>
        </template>

        {{-- Resumen de la plantilla cargada (antes #abrirVerResuemn) --}}
        <template x-teleport="body">
            <div x-show="dialogo === 'resumen'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="resumen-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="border-b border-[var(--borde)] px-5 py-4"><h2 id="resumen-titulo" class="text-[15px] font-bold text-[var(--texto)]">Resumen de datos a importar</h2></div>
                    <div id="resumen_carga" class="overflow-y-auto px-5 py-4 text-[13px] text-[var(--texto)]"></div>
                    <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                    </div>
                </div>
            </div>
        </template>

        {{-- Instrucciones del cargue masivo (antes #verInstrucciones) --}}
        <template x-teleport="body">
            <div x-show="dialogo === 'instrucciones'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="instrucciones-titulo">
                <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                <div class="relative flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                    <div class="border-b border-[var(--borde)] px-5 py-4"><h2 id="instrucciones-titulo" class="text-[15px] font-bold text-[var(--texto)]">Instrucciones para cargue masivo por plantilla</h2></div>
                    <div class="space-y-2 overflow-y-auto px-5 py-4 text-[13px] text-[var(--texto)]">
                        <p><b class="text-[var(--acento-texto)]">Paso 1:</b> Descargue la plantilla en blanco y diligénciela como muestra la siguiente imagen:</p>
                        <img src="{{ asset('/img/subida_masiva.png') }}" class="w-full rounded-md border border-[var(--borde)]" alt="Ejemplo de la plantilla diligenciada">
                        <p><b class="text-[var(--acento-texto)]">Paso 2:</b> La columna <b>id_abastecedor</b> se llena de acuerdo a la siguiente información:</p>
                        <ul class="pl-4">
                            <li>1 Maria Alejandra Cardona Gil</li>
                            <li>2 Marisol Jaramillo</li>
                            <li>3 Natalia Bareño</li>
                            <li>4 Juliana Martinez</li>
                            <li>5 Felipe Martinez</li>
                            <li>7 Angie Monroy</li>
                            <li>8 Diego Cardona</li>
                            <li>9 Edith Vargas</li>
                        </ul>
                        <p><b class="text-[var(--acento-texto)]">Paso 3:</b> Cargue y revise el documento.</p>
                        <p><b class="text-[var(--acento-texto)]">Paso 4:</b> Importe los datos (esta opción es irreversible).</p>
                    </div>
                    <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                        <x-secondary-button x-on:click="dialogo = null">Cerrar</x-secondary-button>
                    </div>
                </div>
            </div>
        </template>
    </div>
</div>