{{-- Gestión Programación de Arribos (/visibilidad, ProgramacionArribosV2Controller@index). Kit ui-ctc (MigracionLayout.MD,
     L3). Mismas operaciones y mismos POST que antes (arribos/asignacion-transporte, asignacion-os, crear-os,
     notificar-transporte, notificar-transporte-grl, cerrar-os, asignacion-granel, asignacion-granel/eliminar; GET
     arribos/info-pedido), con los mismos campos. Antes public/js/programacion-arribos.js con jQuery, select2, SweetAlert,
     axios y modales Bootstrap; ahora diálogos Alpine, fetch, confirm() y avisos del kit (esta vista ya no carga ese JS).
     Los filtros de arriba (antes wire:model sin componente Livewire, no hacían nada) filtran las filas en el navegador. --}}
@php
    $esGrupo7 = $id_grupo_empresarial == 7;
    $etiquetaOc = $esGrupo7 ? 'Importación' : 'Orden de Compra';
@endphp
<x-app-layout titulo="Gestión Programación de Arribos">
    <x-pagina>
        <div class="space-y-5" x-data="{
                procesando: false,
                aviso: null,
                dialogo: null,
                filtro: { oc: '', agencia: '', transportador: '' },
                crearOs: false, errorOs: false,
                pedidoCurso: '', idPedidoCurso: '', errorTransportador: false,
                granel: { oc: '', producto: '', peso: '', contenedor: '', errores: [], errorCantidad: '' },
                notifGranel: { pedido: '', oc: '', tipo: '' },
                notifOs: { orden: '', privada: 0 },
                url(ruta) { return '{{ url('/') }}/' + ruta; },
                el(id) { return document.getElementById(id); },
                async pedir(ruta, datos, metodo = 'POST') {
                    this.procesando = true;
                    try {
                        let destino = this.url(ruta);
                        const opciones = { method: metodo, headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest',
                                           'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content } };
                        if (metodo === 'GET') destino += '?' + new URLSearchParams(datos);
                        else { opciones.headers['Content-Type'] = 'application/json'; opciones.body = JSON.stringify(datos); }
                        const r = await fetch(destino, opciones);
                        if (!r.ok) throw new Error(r.status);
                        return await r.json();
                    } catch (e) {
                        console.log(e);
                        this.avisar('error', 'No se pudo completar la operación. Intente de nuevo.');
                        return null;
                    } finally {
                        this.procesando = false;
                    }
                },
                avisar(tipo, texto) {
                    this.aviso = { tipo, texto };
                    if (tipo === 'success') setTimeout(() => { if (this.aviso && this.aviso.texto === texto) this.aviso = null; }, 4000);
                },
                confirmar() { return confirm('¿Está usted seguro que desea continuar con la operación?'); },
                filtrar() {
                    const f = { oc: this.filtro.oc.trim().toLowerCase(), agencia: this.filtro.agencia, transportador: this.filtro.transportador.toLowerCase() };
                    document.querySelectorAll('#tblProgramacionArribos [data-fila-arribo]').forEach(tr => {
                        const ver = (!f.oc || (tr.dataset.oc || '').toLowerCase().includes(f.oc))
                            && (!f.agencia || tr.dataset.agencia === f.agencia)
                            && (!f.transportador || (tr.dataset.transportador || '').toLowerCase().includes(f.transportador));
                        tr.style.display = ver ? '' : 'none';
                    });
                },
                accion(ev) {
                    const b = ev.target.closest('[data-accion]');
                    if (!b || b.disabled || this.procesando) return;
                    const d = b.dataset;
                    switch (d.accion) {
                        case 'asignar-transporte': return this.asignarTransporte(d.pedido, d.oc, d.tipo);
                        case 'notificar-carga-suelta': this.notifGranel = { pedido: d.pedido, oc: d.oc, tipo: d.tipo }; this.el('grupoSeguimiento').value = ''; this.dialogo = 'notifGranel'; return;
                        case 'asignar-os': return this.asignarOrdenServicio(d.pedido, d.orden);
                        case 'lugar-entrega': window.open(this.url('arribos/lugar-entrega/?idOrdenServi=' + encodeURIComponent(d.orden)), '_blank', 'location=yes,height=600,width=1200,scrollbars=yes,status=yes'); return;
                        case 'notificar-os': this.notifOs = { orden: d.orden, privada: d.privada }; this.el('grupoSeguimientoOS').value = ''; this.dialogo = 'notifOs'; return;
                        case 'cerrar-os': return this.cerrarOrdenServicio(d.orden);
                        case 'eliminar-granel': return this.eliminarGranel(d.granel);
                    }
                },
                asignarTransporte(idPedido, ordenCompra, tipoCarga) {
                    this.pedidoCurso = ordenCompra;
                    this.idPedidoCurso = idPedido;
                    if (tipoCarga == 2) { this.errorTransportador = false; this.el('idTransportador').value = ''; this.dialogo = 'transportador'; }
                    else this.infoCargaSuelta(idPedido, ordenCompra);
                },
                async grabarAsignacion() {
                    const idTransportador = this.el('idTransportador').value;
                    if (idTransportador == '') { this.errorTransportador = true; return; }
                    this.errorTransportador = false;
                    if (!this.confirmar()) return;
                    const idPedido = this.idPedidoCurso;
                    const d = await this.pedir('arribos/asignacion-transporte', { idPedidoCurso: idPedido, idTransportador: idTransportador });
                    if (!d) return;
                    if (d.razon_social !== undefined) this.el('cl-' + idPedido).textContent = d.razon_social;
                    if (d.btnOrdenServicio !== undefined) this.el('os-' + idPedido).innerHTML = d.btnOrdenServicio;
                    this.avisar(d.tipo, d.status);
                    this.dialogo = null;
                },
                async asignarOrdenServicio(pedido, orden) {
                    if (!this.confirmar()) return;
                    const d = await this.pedir('arribos/asignacion-os', { pedidoCurso: pedido, ordenServicio: orden });
                    if (!d) return;
                    this.el('os-' + pedido).innerHTML = d.btnOrdenServicio;
                    this.el('ordenesServicioActivas').innerHTML = d.tblOrdenServicio;
                    this.avisar(d.tipo, d.status);
                },
                cancelarOrden() { this.crearOs = false; this.errorOs = false; this.el('idTransportadorOrden').value = ''; },
                async grabarOrden() {
                    const idTransportador = this.el('idTransportadorOrden').value;
                    if (idTransportador == '') { this.errorOs = true; return; }
                    this.errorOs = false;
                    const d = await this.pedir('arribos/crear-os', { idTransportador: idTransportador });
                    if (!d) return;
                    if (d.tblProgramacionArribos !== undefined) { this.el('ordenesServicioActivas').innerHTML = d.tblOrdenesServicio; this.el('tblProgramacionArribos').innerHTML = d.tblProgramacionArribos; this.filtrar(); }
                    this.avisar(d.tipo, d.status);
                },
                async enviarNotificacionOS() {
                    if (!this.confirmar()) return;
                    const orden = this.notifOs.orden;
                    const d = await this.pedir('arribos/notificar-transporte', { ordenServicio: orden, info_privada: this.notifOs.privada, tipoCarga: 2, grupoCorreosSeguimiento: this.el('grupoSeguimientoOS').value });
                    if (!d) return;
                    if (d.tipo === 'success') {
                        this.el(orden + '-orden').disabled = true;
                        this.el(orden).disabled = true;
                        this.el(orden + '-notivalor').disabled = false;
                        this.el(orden + '-cerrar').disabled = false;
                        this.el(orden + '-estado-notify').innerHTML = this.$refs.estadoEnviada.innerHTML;
                        this.dialogo = null;
                    }
                    this.avisar(d.tipo, d.status);
                },
                async cerrarOrdenServicio(orden) {
                    if (!this.confirmar()) return;
                    const d = await this.pedir('arribos/cerrar-os', { idOrden: orden });
                    if (!d) return;
                    this.el('tblOsHistoricas').innerHTML = d.tblOrdenesServicioHistorica;
                    this.el('ordenesServicioActivas').innerHTML = d.tblOrdenServicio;
                    this.avisar(d.tipo, d.status);
                },
                limpiarGranel() { this.granel.errores = []; this.granel.errorCantidad = ''; this.el('idTransportadorCargaSuelta').value = ''; this.el('cantidad').value = ''; },
                async infoCargaSuelta(idPedido, ordenCompra) {
                    this.limpiarGranel();
                    const d = await this.pedir('arribos/info-pedido', { idPedido: idPedido }, 'GET');
                    if (!d) return;
                    this.granel.oc = ordenCompra; this.granel.producto = d.producto; this.granel.peso = d.peso; this.granel.contenedor = d.contenedor;
                    this.el('tblAsigTransporteCS').innerHTML = d.tblAsignacionGranel;
                    this.dialogo = 'granel';
                },
                validarCantidad() {
                    this.granel.errorCantidad = parseFloat(this.el('cantidad').value) > parseFloat(this.granel.peso) ? '* El valor asignado supera el peso total de la carga.' : '';
                },
                async grabarAsignacionCS() {
                    const transportador = this.el('idTransportadorCargaSuelta').value;
                    const cantidad = this.el('cantidad').value;
                    const e = [];
                    if (transportador == '') e.push('Debe selecionar un transportador.');
                    if (cantidad == '') e.push('Debe agregar un valor en kilos para continuar.');
                    this.granel.errores = e;
                    if (e.length || !this.confirmar()) return;
                    const d = await this.pedir('arribos/asignacion-granel', { idTransportador: transportador, cantidadAsignada: cantidad, idContenedor: this.granel.contenedor, pesoTotal: this.granel.peso });
                    if (!d) return;
                    this.el('tblAsigTransporteCS').innerHTML = d.tblAsignacionGranel;
                    const celda = this.el('cl-' + d.pedido);
                    if (celda) celda.textContent = d.transporteAsignado;
                    this.avisar(d.tipo, d.status);
                    this.limpiarGranel();
                },
                async eliminarGranel(id) {
                    if (!this.confirmar()) return;
                    const d = await this.pedir('arribos/asignacion-granel/eliminar', { idGranel: id });
                    if (!d) return;
                    this.el('tblAsigTransporteCS').innerHTML = d.tblAsignacionGranel;
                    this.avisar(d.tipo, d.status);
                },
                async enviarNotificacionGranel() {
                    if (!this.confirmar()) return;
                    const d = await this.pedir('arribos/notificar-transporte-grl', { idPedido: this.notifGranel.pedido, ordenCompra: this.notifGranel.oc, tipoCarga: this.notifGranel.tipo, info_privada: 0, grupoCorreosSeguimiento: this.el('grupoSeguimiento').value });
                    if (!d) return;
                    this.avisar(d.tipo, d.status);
                },
             }"
             x-on:click="accion($event)" x-on:keydown.escape.window="dialogo = null">
            <x-encabezado-pagina ruta="Importaciones · Visibilidad Tiempo Real" titulo="Gestión Programación de Arribos" />

            <div x-show="procesando" x-cloak 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 información. Por favor espere…
            </div>
            <template x-if="aviso && aviso.tipo === 'success'"><x-alerta tipo="exito"><span x-text="aviso.texto"></span></x-alerta></template>
            <template x-if="aviso && aviso.tipo === 'warning'"><x-alerta tipo="aviso"><span x-text="aviso.texto"></span></x-alerta></template>
            <template x-if="aviso && aviso.tipo !== 'success' && aviso.tipo !== 'warning'"><x-alerta tipo="error"><span x-text="aviso.texto"></span></x-alerta></template>
            <span x-ref="estadoEnviada" class="hidden"><x-etiqueta variante="info">ENVIADA AL TRANSPORTADOR</x-etiqueta></span>

            {{-- Programación de arribos --}}
            <x-tarjeta titulo="Filtros">
                <div class="grid gap-x-4 gap-y-3 [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
                    <x-campo :etiqueta="$etiquetaOc" para="filtroOc">
                        <x-input type="text" id="filtroOc" x-model="filtro.oc" x-on:input="filtrar()" :placeholder="'Búsqueda por número de ' . $etiquetaOc" />
                    </x-campo>
                    @if ($esGrupo7)
                        <x-campo etiqueta="Agencia" para="agencia">
                            <x-select name="agencia" id="agencia" x-model="filtro.agencia" x-on:change="filtrar()">
                                <option value="">TODAS</option>
                                <option value="PASAR">PASAR</option>
                                <option value="ASERCOL">ASERCOL</option>
                            </x-select>
                        </x-campo>
                    @endif
                    <x-campo etiqueta="Transportador" para="transportador">
                        <x-select name="transportador" id="transportador" x-model="filtro.transportador" x-on:change="filtrar()">
                            <option value="">TODAS</option>
                            @foreach ($transportadores as $tr)
                                <option value="{{ $tr->razon_social }}">{{ $tr->razon_social }}</option>
                            @endforeach
                        </x-select>
                    </x-campo>
                </div>
            </x-tarjeta>

            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <h2 class="flex items-center gap-2 text-[14px] font-bold text-[var(--texto)]">
                        Pedidos pendientes de arribo
                        <span class="rounded-full bg-[var(--superficie-2)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--texto-suave)]" title="Total de pedidos consultados">{{ number_format($total_oc, 0, ',', '.') }}</span>
                    </h2>
                </div>
                <div class="ctc-tabla-caja" style="--alto-tabla: 34rem">
                    <table class="ctc-tabla">
                        <thead>
                            <tr>
                                <th>Orden de servicio</th>
                                <th>Espejo / real</th>
                                <th>{{ $esGrupo7 ? 'IMP' : 'Orden de compra' }}</th>
                                @if ($esGrupo7)<th>Agencia</th>@endif
                                <th>Proveedor</th>
                                <th>Descripción factura</th>
                                <th>Puerto llegada</th>
                                <th>Línea naviera</th>
                                <th>Tipo de carga</th>
                                <th class="text-right">Cantidad contenedores</th>
                                <th>Tipo contenedor</th>
                                <th class="text-right">Peso bruto</th>
                                <th class="text-right">Cajas x referencias</th>
                                <th>ETA</th>
                                <th>Días restantes</th>
                                <th>Transportador asignado</th>
                                <th>Operación</th>
                            </tr>
                        </thead>
                        <tbody id="tblProgramacionArribos">
                            {!! $arribos !!}
                        </tbody>
                    </table>
                </div>
            </section>

            {{-- Órdenes de servicio pendientes de notificar --}}
            <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]" x-data="{ pestanaOs: 'activas' }">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                    <h2 class="text-[14px] font-bold text-[var(--texto)]">Órdenes de servicio pendientes de notificar a transporte</h2>
                    <x-secondary-button id="cOrdenServicio" x-on:click="crearOs = true"><x-icono nombre="plus-circle" class="h-4 w-4" /> Crear orden de servicio</x-secondary-button>
                </div>
                <div id="orden-servicio" x-show="crearOs" x-cloak class="space-y-3 border-b border-[var(--borde)] px-5 py-4">
                    @if ($errors->any())
                        <x-alerta tipo="error">
                            <b>Upss</b> Se han presentado los siguientes errores.
                            <ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
                        </x-alerta>
                    @endif
                    <div class="flex flex-wrap items-end gap-2">
                        <x-campo etiqueta="Transportador asociado a la orden de servicio" para="idTransportadorOrden" class="min-w-[16rem] flex-1">
                            <x-select name="idTransportadorOrden" id="idTransportadorOrden">
                                <option value=""></option>
                                @foreach ($transportadores as $tr)
                                    <option value="{{ $tr->id }}">{{ $tr->razon_social }}</option>
                                @endforeach
                            </x-select>
                        </x-campo>
                        <x-button type="button" id="grabarOrden" x-on:click="grabarOrden()" x-bind:disabled="procesando"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Grabar orden de servicio</x-button>
                        <x-secondary-button id="cancelarOrden" x-on:click="cancelarOrden()"><x-icono nombre="x-mark" variante="m" class="h-4 w-4" /> Cancelar</x-secondary-button>
                    </div>
                    <p id="idTransportadorOrdenError" x-show="errorOs" x-cloak class="text-[12px] font-semibold text-red-600 dark:text-red-400">* Para crear la orden de servicio debe seleccionar un transportador!!</p>
                </div>
                <div role="tablist" class="flex gap-1 border-b border-[var(--borde)] px-5">
                    <x-pestana etiqueta="Pendientes de notificar" :conteo="count($ordenes)" icono="envelope" alpine="pestanaOs === 'activas'" x-on:click="pestanaOs = 'activas'" tamano="chica" />
                    <x-pestana etiqueta="Histórico" :conteo="count($ordenes_historicas)" icono="clock" alpine="pestanaOs === 'historicas'" x-on:click="pestanaOs = 'historicas'" tamano="chica" />
                </div>
                <div x-show="pestanaOs === 'activas'" class="ctc-tabla-caja" style="--alto-tabla: 26rem">
                    <table class="ctc-tabla">
                        <thead><tr><th>Orden de servicio</th><th>Transportador asignado</th><th>Total contenedores</th><th>Estado</th><th>Operación</th></tr></thead>
                        <tbody id="ordenesServicioActivas">
                            @include('Po._arribos-ordenes', ['ordenes' => $ordenes, 'activas' => true])
                        </tbody>
                    </table>
                </div>
                <div x-show="pestanaOs === 'historicas'" x-cloak class="ctc-tabla-caja" style="--alto-tabla: 26rem">
                    <table class="ctc-tabla">
                        <thead><tr><th>Orden de servicio</th><th>Transportador asignado</th><th>Total contenedores</th><th>Estado</th></tr></thead>
                        <tbody id="tblOsHistoricas">
                            @include('Po._arribos-ordenes', ['ordenes' => $ordenes_historicas, 'activas' => false])
                        </tbody>
                    </table>
                </div>
            </section>

            {{-- Asignación de transportador (carga contenerizada) --}}
            <template x-teleport="body">
                <div x-show="dialogo === 'transportador'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="transportador-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="transportador-titulo" class="text-[15px] font-bold text-[var(--texto)]">Asignación de transporte a <span x-text="pedidoCurso"></span></h2></div>
                        <div class="space-y-3 px-5 py-4">
                            <x-campo etiqueta="Transportador" para="idTransportador">
                                <x-select name="idTransportador" id="idTransportador">
                                    <option value=""></option>
                                    @foreach ($transportadores as $tr)
                                        <option value="{{ $tr->id }}">{{ $tr->razon_social }}</option>
                                    @endforeach
                                </x-select>
                            </x-campo>
                            <div x-show="errorTransportador" x-cloak><x-alerta tipo="error"><b>Upss</b> Debes seleccionar un transportador para poder continuar con el proceso.</x-alerta></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" id="grabarAsignacion" x-on:click="grabarAsignacion()" x-bind:disabled="procesando">Asignar</x-button>
                        </div>
                    </div>
                </div>
            </template>

            {{-- Asignación de transportador (carga suelta y granel) --}}
            <template x-teleport="body">
                <div x-show="dialogo === 'granel'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="granel-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-2xl 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="granel-titulo" class="text-[15px] font-bold text-[var(--texto)]">Asignación de transporte a orden de compra <span x-text="granel.oc"></span></h2></div>
                        <div class="space-y-4 overflow-y-auto px-5 py-4 text-[13px] text-[var(--texto)]" x-on:click="accion($event)">
                            <div class="grid gap-3 sm:grid-cols-2">
                                <p>Descripción factura: <b x-text="granel.producto"></b></p>
                                <p>Peso total importado: <b x-text="granel.peso"></b></p>
                            </div>
                            <div class="grid gap-3 border-t border-[var(--borde)] pt-4 sm:grid-cols-2">
                                <x-campo etiqueta="Transportador" para="idTransportadorCargaSuelta">
                                    <x-select name="idTransportadorCargaSuelta" id="idTransportadorCargaSuelta">
                                        <option value=""></option>
                                        @foreach ($transportadores as $tr)
                                            <option value="{{ $tr->id }}">{{ $tr->razon_social }}</option>
                                        @endforeach
                                    </x-select>
                                </x-campo>
                                <x-campo etiqueta="Cantidad asignada Kg" para="cantidad">
                                    <x-input type="text" id="cantidad" name="cantidad" x-on:keyup="validarCantidad()" />
                                    <p x-show="granel.errorCantidad" x-cloak x-text="granel.errorCantidad" class="mt-1 text-[12px] font-semibold text-red-600 dark:text-red-400"></p>
                                </x-campo>
                            </div>
                            <div x-show="granel.errores.length" x-cloak>
                                <x-alerta tipo="error">
                                    <p class="font-semibold">Se han presentado los siguientes errores:</p>
                                    <ul class="mt-1 list-inside list-disc"><template x-for="e in granel.errores"><li x-text="e"></li></template></ul>
                                </x-alerta>
                            </div>
                            <div class="ctc-tabla-caja rounded-lg border border-[var(--borde)]" style="--alto-tabla: 16rem">
                                <table class="ctc-tabla">
                                    <thead><tr><th>Transportador asignado</th><th class="text-right">Total Kg</th><th><span class="sr-only">Operación</span></th></tr></thead>
                                    <tbody id="tblAsigTransporteCS"></tbody>
                                </table>
                            </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" id="grabarAsignacionCS" x-on:click="grabarAsignacionCS()" x-bind:disabled="procesando || granel.errorCantidad !== ''">Asignar</x-button>
                        </div>
                    </div>
                </div>
            </template>

            {{-- Notificación al transportador: carga suelta o granel --}}
            <template x-teleport="body">
                <div x-show="dialogo === 'notifGranel'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="notif-granel-titulo">
                    <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                    <div class="relative w-full max-w-lg 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="notif-granel-titulo" class="text-[15px] font-bold text-[var(--texto)]">Envío de notificación al transportador</h2></div>
                        <div class="px-5 py-4">
                            <x-campo etiqueta="Grupo de correo para seguimiento" para="grupoSeguimiento">
                                <x-select name="grupoSeguimiento" id="grupoSeguimiento">
                                    <option value="">- SELECCIONE UNA OPCIÓN</option>
                                    @foreach ($correos_seguimiento as $correo)
                                        <option value="{{ $correo->id }}">{{ $correo->nombre }}</option>
                                    @endforeach
                                </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" id="enviarNotificacionGranel" x-on:click="enviarNotificacionGranel()" x-bind:disabled="procesando"><x-icono nombre="envelope" class="h-4 w-4" /> Enviar notificación</x-button>
                        </div>
                    </div>
                </div>
            </template>

            {{-- Notificación al transportador: orden de servicio --}}
            <template x-teleport="body">
                <div x-show="dialogo === 'notifOs'" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="notif-os-titulo">
                    <div class="fixed inset-0 bg-black/40" x-on:click="dialogo = null"></div>
                    <div class="relative w-full max-w-lg 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="notif-os-titulo" class="text-[15px] font-bold text-[var(--texto)]">Envío de notificación al transportador</h2></div>
                        <div class="px-5 py-4">
                            <x-campo etiqueta="Grupo de correo para seguimiento" para="grupoSeguimientoOS">
                                <x-select name="grupoSeguimientoOS" id="grupoSeguimientoOS">
                                    <option value="">- SELECCIONE UNA OPCIÓN</option>
                                    @foreach ($correos_seguimiento as $correo)
                                        <option value="{{ $correo->id }}">{{ $correo->nombre }}</option>
                                    @endforeach
                                </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" id="enviarNotificacionOS" x-on:click="enviarNotificacionOS()" x-bind:disabled="procesando"><x-icono nombre="envelope" class="h-4 w-4" /> Enviar notificación</x-button>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </x-pagina>
</x-app-layout>