{{-- Fletes x Transporte (costos-fletes). Configuración de fletes por tipo de contenedor y transportador, con el kit ui-ctc
     (MigracionLayout.MD, Configuración). Crear y eliminar van por fetch a costos-fletes/crear y costos-fletes/eliminar,
     como antes (public/js/fletes.js con jQuery, select2, SweetAlert y axios, que esta vista ya no carga). --}}
<x-app-layout titulo="Fletes x Transporte">
    <x-pagina>
        <div class="space-y-5" x-data="{
                errores: [],
                aviso: null,
                procesando: false,
                validar() {
                    const e = [];
                    if (document.getElementById('idTransportador').value == '') e.push('Debe selecionar un transportador.');
                    if (document.getElementById('idTipo').value == '') e.push('Debe selecionar un tipo de contenedor.');
                    if (document.getElementById('valor').value == '') e.push('Debe agregar un valor en pesos para continuar.');
                    this.errores = e;
                    return e.length === 0;
                },
                limpiar() {
                    this.errores = [];
                    document.getElementById('idTransportador').value = '';
                    document.getElementById('idTipo').value = '';
                    document.getElementById('valor').value = '';
                },
                async enviar(url, datos) {
                    this.procesando = true;
                    this.aviso = null;
                    try {
                        const r = await fetch(url, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json',
                                       'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
                            body: JSON.stringify(datos),
                        });
                        if (!r.ok) throw new Error(r.status);
                        const d = await r.json();
                        document.getElementById('fletes').innerHTML = d.tblFletes;
                        this.aviso = { tipo: d.tipo, texto: d.status };
                        if (d.tipo === 'success') setTimeout(() => { if (this.aviso && this.aviso.texto === d.status) this.aviso = null; }, 4000);
                        $dispatch('fletes-cerrar');
                        this.limpiar();
                    } catch (e) {
                        console.log(e);
                        this.aviso = { tipo: 'error', texto: 'No se pudo completar la operación. Intente de nuevo.' };
                    } finally {
                        this.procesando = false;
                    }
                },
                guardar() {
                    if (!this.validar()) return;
                    if (!confirm('¿Está usted seguro que desea continuar con la operación?')) return;
                    this.enviar('{{ url('costos-fletes/crear') }}', { transportador: document.getElementById('idTransportador').value, tipo: document.getElementById('idTipo').value, valor: document.getElementById('valor').value });
                },
                eliminar(ev) {
                    const b = ev.target.closest('[data-eliminar]');
                    if (!b || this.procesando) return;
                    if (!confirm('¿Está usted seguro que desea continuar con la operación?')) return;
                    this.enviar('{{ url('costos-fletes/eliminar') }}', { idFlete: b.dataset.eliminar });
                },
            }">
            <x-encabezado-pagina ruta="Importaciones · Configuración" titulo="Fletes x Transporte"
                                 descripcion="Configuración de fletes por tipo de carga y transportador." />

            <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 !== 'success'"><x-alerta tipo="error"><span x-text="aviso.texto"></span></x-alerta></template>

            <x-catalogo.formulario titulo="Agregar nueva configuración" x-on:fletes-cerrar.window="abierto = false">
                <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>
                <x-campo etiqueta="Tipo" para="idTipo">
                    <x-select name="idTipo" id="idTipo">
                        <option value=""></option>
                        @foreach ($tipos as $tc)
                            <option value="{{ $tc->id }}">{{ $tc->descripcion }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Valor en pesos" para="valor"><x-input type="text" id="valor" name="valor" /></x-campo>
                <div class="col-span-full" x-show="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 space-y-0.5"><template x-for="e in errores"><li x-text="e"></li></template></ul>
                    </x-alerta>
                </div>
                <x-slot name="botones">
                    <x-button type="button" x-on:click="guardar()" x-bind:disabled="procesando"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Registrar configuración</x-button>
                    <x-secondary-button x-on:click="abierto = false; limpiar()"><x-icono nombre="x-mark" variante="m" class="h-4 w-4" /> Cancelar</x-secondary-button>
                </x-slot>
            </x-catalogo.formulario>

            <x-catalogo.lista titulo="Fletes configurados" :leyenda-inactivo="false">
                <thead>
                    <tr>
                        <th>Transportador</th>
                        <th>Tipo de contenedor</th>
                        <th class="text-right">Valor</th>
                        <th><span class="sr-only">Acciones</span></th>
                    </tr>
                </thead>
                <tbody id="fletes" x-on:click="eliminar($event)">
                    @include('CostosFletes.filas', ['fletes' => $fletes])
                </tbody>
            </x-catalogo.lista>
        </div>
    </x-pagina>
</x-app-layout>