{{-- Integración Ternium · Envío de declaración de importación (/integracion/dec_impo, ExPOController@integracion).
     Kit ui-ctc (MigracionLayout.MD L3). Mismos campos (ids), Filtrar por AJAX a /integracion/data/dec_impo y Enviar a
     /ws/envioDecImpo (Ternium) con confirmación: el JavaScript que arma y envía los datos es el de antes (jQuery, cargado
     solo en esta pantalla); solo cambia el aviso de "Filtrando…". --}}
<x-app-layout titulo="Envío de declaración de importación">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Integración" titulo="Envío de declaración de importación"
                             descripcion="Filtre los parámetros y envíe las coladas de la vista a la plataforma de Ternium." />

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

        {{-- Respuesta de Ternium al enviar: la muestra el script --}}
        <div id="resumen" style="display: none" class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
            <p class="font-bold">Respuesta de envío por parte del cliente</p>
            <div id="detalleResumen" class="mt-1"></div>
            <x-secondary-button onclick="cerrarResumen()" class="mt-3 !h-8"><x-icono nombre="x-mark" /> Cerrar resumen</x-secondary-button>
        </div>

        <x-tarjeta titulo="Filtros">
            <div class="grid gap-4 sm:grid-cols-3">
                <x-campo etiqueta="No. embarque" para="txtEmbarque">
                    <x-input type="text" id="txtEmbarque" value="" class="!bg-amber-50 dark:!bg-amber-500/10" />
                </x-campo>
                <x-campo etiqueta="Pedido importación" para="txtPedido">
                    <x-input type="text" id="txtPedido" autofocus value="" />
                </x-campo>
                <x-campo etiqueta="Número DO" para="txtNumdo" ayuda="Enter filtra.">
                    <x-input type="text" id="txtNumdo" value="" />
                </x-campo>
            </div>
            <div class="mt-4 flex flex-wrap items-center gap-2">
                <x-button type="button" id="filtrar"><x-icono nombre="funnel" /> Filtrar</x-button>
                <x-enlace-boton href="#"><x-icono nombre="arrow-down-tray" /> Descargar</x-enlace-boton>
            </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">
                <p class="text-[13px] text-[var(--texto-suave)]">Coladas por declaración</p>
                <x-secondary-button id="enviar"><x-icono nombre="cloud-arrow-up" /> Enviar información</x-secondary-button>
            </div>
            <div id="datos">
                <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]">
                    <x-icono nombre="funnel" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                    <p class="mt-2">Filtre los parámetros…</p>
                </div>
            </div>
        </section>
    </x-pagina>

    <template id="plantillaCargando">
        <div class="py-12 text-center text-[14px] text-[var(--texto-suave)]">
            <x-icono nombre="arrow-path" class="mx-auto h-7 w-7 animate-spin text-[var(--texto-tenue)]" />
            <p class="mt-2 font-semibold text-[var(--texto)]">Filtrando…</p>
            <p>por favor espere unos segundos…</p>
        </div>
    </template>

    @push('scripts')
        {{-- jQuery solo en esta pantalla: el script de envío es el de antes. --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
          var jsonData = "data JSON";

            $("#txtNumdo").keypress(function(e) {
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code==13){
                    $("#filtrar").click();
                }
            });
            

            $("#filtrar").click(function(){
                $("#datos").html($("#plantillaCargando").html())
                ruta = "/integracion/data/dec_impo";
                $.ajax({
                    type:"get",
                    "url": ruta,
                    "data":{
                        numdo     : $("#txtNumdo").val(),
                        embarque  : $("#txtEmbarque").val(),
                        pedidoImp : $("#txtPedido").val()
                    },
                    success : function(data) {
                        $("#datos").html(data['tabla']);
                    },
                    error : function() { alert("ERROR\nHa ocurrido un error inesperado"); }
                })
            });

            $("#enviar").click(function(){
                texto = "\nCONFIRMACION REQUERIDA\n\nEsta opcion requiere confirmacion, al hacerlo todas las coladas relacionadas en la vista seran enviadas a la plataforma de Ternium\n\nConfirma el envio?";
                ruta = "/ws/envioDecImpo";
                if(confirm(texto)) {
                  console.log("embarque "+$("#txtEmbarque").val());
                  $.ajax({
                    type:"get",
                    "url": ruta,
                    async: false,
                    "data":{
                        numdo     : $("#txtNumdo").val(),
                        embarque  : $("#txtEmbarque").val(),
                        pedidoImp : $("#txtPedido").val()
                    },
                    success : function(data) {
                      $("#resumen").show()
                      $("#detalleResumen").html(data['respuesta'])
                      /*
                      respuesta = JSON.parse(data);
                      console.log(respuesta);
                      html  = "ID de Transaccion : "+respuesta.traceId;
                      html += ", Coladas Recibidas : "+respuesta.coladasTotalesRecibidas;
                      html += ", Coladas Rechazadas : "+respuesta.coladasTotalesRechazadas;
                      html += ", Coladas Aceptadas : "+(respuesta.coladasTotalesRecibidas - respuesta.coladasTotalesRechazadas);
                      $("#detalleResumen").html(html)
                      */
                      
                    },
                    error : function() { alert("ERROR\nHa ocurrido un error inesperado"); }
                  });         
                }
            });
      });

      function cerrarResumen() {
         $("#resumen").hide()
      }
        </script>
    @endpush
</x-app-layout>