{{-- Integración Ternium · Relación de facturas enviadas (/integracion/facturas, ExPOController@integracion).
     Kit ui-ctc (MigracionLayout.MD L3). Mismos filtros (ids y valores por defecto), Filtrar por AJAX a
     /integracion/data/facturas y "Ver posiciones" en el panel de posiciones. El JavaScript es el de antes (jQuery, cargado
     solo en esta pantalla); solo cambia el aviso de "Filtrando…". El modal #info de antes no lo abría nada: se quitó. --}}
<x-app-layout titulo="Facturas enviadas">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Integración" titulo="Relación de facturas enviadas" />

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

        <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-2 lg:grid-cols-4">
                <x-campo etiqueta="Buscar por factura, embarque, barco" para="txtBusqueda">
                    <x-input type="text" id="txtBusqueda" value="" class="!bg-amber-50 dark:!bg-amber-500/10" />
                </x-campo>
                <x-campo etiqueta="Tipo de fecha de filtrado" para="txtTipoFecha">
                    <x-select name="txtTipoFecha" id="txtTipoFecha">
                        <option {{ ($tipoFechaFiltro == 1) ? 'selected' : '' }} value="1">Fecha de Transaccion</option>
                        <option {{ ($tipoFechaFiltro == 2) ? 'selected' : '' }} value="2">Fecha de Factura</option>
                        <option {{ ($tipoFechaFiltro == 3) ? 'selected' : '' }} value="3">No filtrar fechas</option>
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Desde" para="txtFechaInicial">
                    <x-input type="date" id="txtFechaInicial" autofocus value="{{ $desde }}" />
                </x-campo>
                <x-campo etiqueta="Hasta" para="txtFechaFinal">
                    <x-input type="date" id="txtFechaFinal" value="{{ $hasta }}" />
                </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>

        {{-- Posiciones de la factura (Ver posiciones) --}}
        <section id="infoPosiciones" style="display:none" class="overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
                <p class="text-[13px] font-semibold text-[var(--texto)]">Información de posiciones</p>
                <x-secondary-button onclick="cerrarInfoPosiciones()" class="!h-8"><x-icono nombre="x-mark" /> Cerrar información</x-secondary-button>
            </div>
            <div id="dataPosiciones" class="max-h-[300px] overflow-y-auto p-4"></div>
        </section>

        <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div id="datos">
                {!! $tablaInfo !!}
            </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 es el de antes. --}}
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
        function verPosiciones(idF) {
            $.ajax({
                type:"get",
                "url": "/integracion/data/facturas",
                "data":{
                    id : idF
                },
                success : function(data) {
                    console.log(data['datos'])
                    $("#dataPosiciones").html(data['datos']);
                    $("#infoPosiciones").show()
                },
                error : function() { alert("ERROR\nHa ocurrido un error inesperado al intentar mostrar las posiciones"); }
            })
        }

        function cerrarInfoPosiciones() {
            $("#infoPosiciones").hide()
        }

        $(document).ready(function(){
          var jsonData = "data JSON";

            $("#filtrar").click(function(){
                $("#datos").html($("#plantillaCargando").html())
                ruta = "/integracion/data/facturas";
                $.ajax({
                    type:"get",
                    "url": ruta,
                    "data":{
                        busqueda     : $("#txtBusqueda").val(),
                        tipoFecha    : $("#txtTipoFecha").val(),
                        fechaInicial : $("#txtFechaInicial").val(),
                        fechaFinal   : $("#txtFechaFinal").val()
                    },
                    success : function(data) {
                        $("#datos").html(data['tabla']);
                    },
                    error : function() { alert("ERROR\nHa ocurrido un error inesperado al intentar filtrar las facturas"); }
                })
            });

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