{{-- Visualización de Campos (configuravistas). Kit ui-ctc (MigracionLayout.MD, Configuración); antes jQuery + Bootstrap. --}}
<x-app-layout titulo="Visualización de Campos">
    <x-pagina>
        <x-encabezado-pagina ruta="Exportaciones · Configuración" titulo="Configuracion de Visualizacion de Campos" />

        <x-tarjeta>
            <div class="flex flex-wrap items-end gap-3">
                <x-campo etiqueta="Grupo Empresarial" para="idcompania" class="min-w-[16rem] flex-1">
                    <x-select id="idcompania">
                        <option value="0">Seleccione una compañia ...</option>
                        @foreach ($companias as $c)
                            <option value="{{ $c->id }}" @selected(session('GrupoEmpresarial') == $c->id)>{{ $c->razon_social }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Vistas" para="idvista" class="min-w-[14rem] flex-1">
                    <x-select id="idvista">
                        <option value="0">Seleccione una vista ...</option>
                        @foreach ($vistas as $v)
                            <option value="{{ $v->id }}">{{ $v->nombre_vista }}</option>
                        @endforeach
                    </x-select>
                </x-campo>
                <x-button type="button" id="filtrar"><x-icono nombre="funnel" class="h-4 w-4" /> Filtrar</x-button>
            </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="text-[14px] font-bold text-[var(--texto)]">Campos</h2>
                <span id="mensaje" style="display: none" class="flex items-center gap-1.5 text-[12px] text-[var(--acento-texto)]" role="status">
                    <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                </span>
            </div>
            <div id="campos">
                <div class="ctc-vacio py-10 text-center text-[14px] text-[var(--texto-suave)]">Seleccione un grupo empresarial y una vista, y pulse Filtrar.</div>
            </div>
            <div class="flex flex-wrap items-center gap-2 border-t border-[var(--borde)] px-5 py-3">
                <x-button type="button" id="guardar"><x-icono nombre="check" variante="m" class="h-4 w-4" /> Guardar</x-button>
                <x-secondary-button id="todo"><x-icono nombre="check-circle" class="h-4 w-4" /> Seleccionar todo...</x-secondary-button>
                <x-secondary-button id="ninguno"><x-icono nombre="x-circle" class="h-4 w-4" /> Ninguno...</x-secondary-button>
            </div>
        </section>
    </x-pagina>

    @push('scripts')
        <script>
            (function () {
                var $id = function (id) { return document.getElementById(id); };
                var consulta = function (url, datos) {
                    return fetch(url + '?' + new URLSearchParams(datos), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(function (r) { if (!r.ok) throw new Error(r.status); return r; });
                };
                var faltanDatos = function () {
                    if ($id('idcompania').value == 0 || $id('idvista').value == 0) {
                        alert("FALTAN DATOS\n\nDebe seleccionar una compañia y una vista");
                        return true;
                    }
                    return false;
                };

                function marcar(valor) {
                    var canti = $id('canCampos') ? $id('canCampos').value : 0;
                    for (var f = 1; f <= canti; f++) $id('ck' + f).checked = valor;
                }
                $id('todo').addEventListener('click', function () { marcar(true); });
                $id('ninguno').addEventListener('click', function () { marcar(false); });

                $id('guardar').addEventListener('click', function () {
                    if (faltanDatos()) return;
                    if (!confirm("CONFIRMACION REQUERIDA\n\nSeguro de guardar esta configuracion?")) return;
                    var canti = $id('canCampos') ? $id('canCampos').value : 0;
                    var campos = [];
                    for (var f = 1; f <= canti; f++) {
                        if ($id('ck' + f).checked) campos.push($id('cp' + f).value);
                    }
                    consulta('/exvistas/guardar', { idcompania: $id('idcompania').value, idvista: $id('idvista').value, listadoCampos: campos.join(',') })
                        .then(function (r) { return r.text(); })
                        .then(function (texto) { alert(texto); })
                        .catch(function () {});
                });

                $id('filtrar').addEventListener('click', function () {
                    if (faltanDatos()) return;
                    $id('campos').innerHTML = '';
                    $id('mensaje').style.display = '';
                    consulta('/exvistas/filtrar', { idcompania: $id('idcompania').value, idvista: $id('idvista').value })
                        .then(function (r) {
                            // Con campos llega JSON { tabla, … }; si la vista no tiene tabla, llega el aviso en HTML.
                            return (r.headers.get('content-type') || '').indexOf('json') >= 0 ? r.json().then(function (d) { return d.tabla; }) : r.text();
                        })
                        .then(function (html) { $id('mensaje').style.display = 'none'; $id('campos').innerHTML = html; })
                        .catch(function () { $id('mensaje').style.display = 'none'; alert("ERROR INESPERADO\n\nNo pudo completarse el filtrado"); });
                });
            })();
        </script>
    @endpush
</x-app-layout>