@extends('header_panel_generico')

@section('titulo_panel'){{ $nombre_cliente }} - {{ $cli_cuit }} (COD N° {{ $cli_codigo }})@endsection

@section('styles_panel')
    <link rel="stylesheet" href="{{ URL::asset('/Libreria_CA/css/config_screening.css') }}">
@endsection

@section('contenido_panel')
    <input type="hidden" name="cliente" value="{{ $cliente }}">
    <input type="hidden" name="cli_codigo" value="{{ $cli_codigo }}">
    <input type="hidden" name="cli_cuit" value="{{ $cli_cuit }}">
    <input type="hidden" name="cliente_nombre" value="{{ $nombre_cliente }}">
    <input type="hidden" name="producto" value="{{ $producto }}">
    <input type="hidden" name="estado" value="{{ $estado ?? 'AGREGAR' }}">
    <input type="hidden" name="tipo_paquete_cliente" value="{{ $tipo_paquete_cliente ?? '' }}">
    <input type="hidden" name="prod_nombre_cliente" value="{{ $prod_nombre_cliente ?? '' }}">
    <input type="hidden" name="limite_consumo_cliente" value="{{ $limite_consumo_cliente ?? '' }}">
    <input type="hidden" name="fecha_desde" value="{{ $fecha_desde ?? '' }}">
    <input type="hidden" name="fecha_hasta" value="{{ $fecha_hasta ?? '' }}">
    <input type="hidden" name="estado_bloquea_cliente" value="{{ $estado_bloquea_cliente ?? '' }}">
    <input type="hidden" name="estado_producto_cliente" value="{{ $estado_producto_cliente ?? '' }}">
    <input type="hidden" name="modalidad_de_pago" value="{{ $modalidad_de_pago ?? '' }}">
    <input type="hidden" name="impe_acceso" value="{{ $impe_acceso ?? '' }}">
    <input type="hidden" name="impe_doc" value="{{ $impe_doc ?? '' }}">

    <div class="w-100 pb-4">
        <x-btn-prod-text class="justify-content-start px-3 pt-3" icon="bi bi-arrow-left" id="atras-servicio-contratado">Atrás</x-btn-prod-text>
        <h4 class="header-subtitle ps-3 mt-0">ASIGNACIÓN DE SERVICIOS</h4>

        <div class="inner-screening-box">
            <div class="screening-step-title">CONFIGURACIÓN DE SCREENING</div>
            <div class="w-100" id="paso-1">
                <div class="screening-step-desc mb-4">Paso 1 de 3: Definí los grupos que formarán parte del screening.</div>

                <div id="listas-container"></div>

                <div class="mt-4">
                    <x-btn-prod-text icon="bi bi-plus-circle" id="btn-agregar-lista">
                        Agregar grupo
                    </x-btn-prod-text>
                </div>
            </div>
            <div id="paso-2" class="d-none">
                <div class="screening-step-desc mb-4">Paso 2 de 3: Seleccioná los informes que se realizarán para cada grupo de forma individual.</div>

                <div id="contenedor-dropdowns" class="d-flex flex-column align-items-center w-100 mt-4"></div>

            </div>
            <div id="paso-3" class="d-none">
                <div class="screening-step-desc mb-4">Paso 3 de 3: Definí qué grupos se cruzarán entre sí y los criterios de cruce. Si un cruce tiene carga de archivo, debe seleccionarse como grupo principal.</div>

                <div id="cruces-container" class="w-100">
                    <!-- Cruces dinámicos -->
                </div>

                <div class="mt-4">
                    <x-btn-prod-text icon="bi bi-plus-circle" id="btn-agregar-cruce">
                        Agregar cruce
                    </x-btn-prod-text>
                </div>
            </div>
            <div id="paso-4" class="d-none">
                <div class="screening-step-desc mb-4">Verificá la configuración antes de confirmar.</div>

                <div class="row w-100 mt-4 px-3">
                    <div class="col-md-6 pe-md-4 mb-4 mb-md-0">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-bold mb-0 text-prod-oscuro" style="font-size: 16px;">GRUPOS E INFORMES INDIVIDUALES</h5>
                            <x-btn-prod-text icon="bi bi-pencil-square" class="btn-editar-paso" data-target-paso="1" style="padding: 4px 16px; font-size: 14px;">
                                Editar
                            </x-btn-prod-text>
                        </div>
                        <div id="resumen-listas-container" class="d-flex flex-column align-items-center w-100"></div>
                    </div>
                    <div class="col-md-6 ps-md-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="fw-bold mb-0 text-prod-oscuro" style="font-size: 16px;">CRUCES</h5>
                            <x-btn-prod-text icon="bi bi-pencil-square" class="btn-editar-paso" data-target-paso="3" style="padding: 4px 16px; font-size: 14px;">
                                Editar
                            </x-btn-prod-text>
                        </div>
                        <div id="resumen-cruces-container" class="d-flex flex-column align-items-center w-100"></div>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-end gap-3 mt-5">
                <x-btn-prod-outline icon="bi bi-x-lg" id="cancelar-paso">
                    Cancelar
                </x-btn-prod-outline>
                <div id="wrapper-btn-siguiente" class="d-inline-block" style="cursor: pointer;">
                    <x-btn-prod-fill disabled id="btn-siguiente" icon="bi bi-check-lg" style="pointer-events: none;">
                        Siguiente
                    </x-btn-prod-fill>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('extras_panel')
    <!-- Modal Sin Informes -->
    <div class="modal fade" id="modalSinInformes" tabindex="-1" aria-labelledby="modalSinInformesLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 700px;">
        <div class="modal-content text-center p-3">
          <div class="modal-header border-0 pb-0 d-flex justify-content-end">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body pt-0">
            <h5 class="mb-4" id="modalSinInformesLabel">SIN INFORMES INDIVIDUALES ASIGNADOS</h5>
            <p class="mb-3 fw-bold" style="color: black;">No se seleccionaron informes individuales para ninguno de los grupos creados.</p>
            <p class="mb-4" style="color: black;">¿Desea continuar de todas formas?</p>
            <div class="d-flex justify-content-center gap-3">
                <x-btn-prod-outline data-bs-dismiss="modal">
                    Volver y configurar
                </x-btn-prod-outline>
                <x-btn-prod-fill id="btn-continuar-sin-informes">
                    Continuar sin informes
                </x-btn-prod-fill>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Exito -->
    <div class="modal fade" id="modalExito" tabindex="-1" aria-labelledby="modalExitoLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 600px;">
        <div class="modal-content text-center p-4">
          <div class="modal-header border-0 pb-0 d-flex justify-content-end">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body pt-0 px-4">
            <h5 class="mb-4 fw-bold" id="modalExitoLabel" style="font-size: 18px; color: #000;">SCREENING CONFIGURADO EXITOSAMENTE</h5>
            <p class="mb-5 fw-bold" style="font-size: 14px; color: #000;">Los grupos y los cruces se guardaron correctamente.</p>
            <div class="d-grid">
                <x-btn-prod-fill data-bs-dismiss="modal" style="width: 100%;">
                    Aceptar
                </x-btn-prod-fill>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal Confirmar Cancelacion -->
    <div class="modal fade" id="modalConfirmarCancelacion" tabindex="-1" aria-labelledby="modalConfirmarCancelacionLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" style="max-width: 600px;">
        <div class="modal-content text-center p-4">
          <div class="modal-header border-0 pb-0 d-flex justify-content-end">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body pt-0 px-4">
            <h5 class="mb-4 fw-bold" id="modalConfirmarCancelacionLabel" style="font-size: 18px; color: #000;">¿ESTÁ SEGURO QUE DESEA CANCELAR?</h5>
            <p class="mb-5 fw-bold" style="font-size: 14px; color: #000;">Se perderá todo el progreso de la configuración.</p>
            <div class="d-flex justify-content-center gap-3">
                <x-btn-prod-outline data-bs-dismiss="modal">
                    Volver y configurar
                </x-btn-prod-outline>
                <x-btn-prod-fill id="btn-confirmar-cancelacion">
                    Confirmar
                </x-btn-prod-fill>
            </div>
          </div>
        </div>
      </div>
    </div>
@endsection

@section('funcionesJS')
    <script>
         $(document).ready(function () {
                // Función para retornar a servicios contratados
                function volverAlInicio() {
                    let form = $('<form>', {
                        action: '/blue/servicios-contratados-cliente',
                        method: 'POST'
                    });

                    form.append($('<input>').attr({ type: 'hidden', name: '_token', value: '{{ csrf_token() }}' }))
                        .append($('<input>').attr({ type: 'hidden', name: 'cliente', value: $('input[name="cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'cli_codigo', value: $('input[name="cli_codigo"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'cli_cuit', value: $('input[name="cli_cuit"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'cliente_nombre', value: $('input[name="cliente_nombre"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'id_producto', value: $('input[name="producto"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'estado', value: $('input[name="estado"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'tipo_paquete_cliente', value: $('input[name="tipo_paquete_cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'prod_nombre_cliente', value: $('input[name="prod_nombre_cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'limite_consumo_cliente', value: $('input[name="limite_consumo_cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'fecha_desde', value: $('input[name="fecha_desde"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'fecha_hasta', value: $('input[name="fecha_hasta"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'estado_bloquea_cliente', value: $('input[name="estado_bloquea_cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'estado_producto_cliente', value: $('input[name="estado_producto_cliente"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'modalidad_de_pago', value: $('input[name="modalidad_de_pago"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'impe_acceso', value: $('input[name="impe_acceso"]').val() }))
                        .append($('<input>').attr({ type: 'hidden', name: 'impe_doc', value: $('input[name="impe_doc"]').val() }));

                    $('body').append(form);
                    form.submit();
                }

                // Botón Atrás: Vuelve al paso anterior, si está en el 1 hace lo mismo que cancelar
                $('#atras-servicio-contratado').on('click', function(e) {
                    e.preventDefault();
                    if (pasoActual > 1) {
                        retrocederPaso();
                    } else {
                        $('#modalConfirmarCancelacion').modal('show');
                    }
                });

                const $container = $('#listas-container');
                const $btnSiguiente = $('#btn-siguiente');
                const $wrapperSiguiente = $('#wrapper-btn-siguiente');
                let pasoActual = 1;
                let switchCounter = 1;

                // Catálogos cargados desde SCR_obtener_catalogos
                const opcionesSubmenu  = @json(collect($procesos_primarios)->map(fn($p) => ['id' => $p->id_proceso, 'label' => $p->descripcion]));
                const criteriosCruce   = @json(collect($criterios_cruce)->map(fn($c) => ['id' => $c->id_cruce, 'label' => $c->descripcion]));
                const todasLasFamilias = @json(collect($familias)->map(fn($f) => ['id' => $f->familia, 'nombre' => $f->nombre_familia, 'lista_screening' => $f->lista_screening]));

                // Capturar click en el wrapper del botón Siguiente
                $wrapperSiguiente.on('click', function(e) {
                    // Si el botón interno está deshabilitado, mostramos errores
                    if ($btnSiguiente.prop('disabled')) {
                        if (pasoActual === 1) {
                            $('.lista-item').each(function () {
                                const $inputNombre = $(this).find('.input-nombre');
                                if ($.trim($inputNombre.val()) === '') {
                                    $inputNombre.addClass('input-error'); // Agrega borde rojo
                                }
                            });
                        } else if (pasoActual === 3) {
                            $('#cruces-container .cruce-item').each(function() {
                                const valPrin = $(this).find('.select-lista-principal').val();
                                const valSec = $(this).find('.select-lista-secundaria').val();
                                const cantCriterios = $(this).find('.check-criterio:checked').length;

                                if (!valPrin) $(this).find('.select-lista-principal').addClass('is-invalid');
                                if (!valSec) $(this).find('.select-lista-secundaria').addClass('is-invalid');
                                if (cantCriterios === 0) {
                                    $(this).find('.dropdown-lista').addClass('border-danger border-2');
                                }
                            });
                        }
                    } else {
                        // Si estamos en el Paso 1 y pasamos al Paso 2
                        if (pasoActual === 1) {
                            generarDropdownsPaso2();
                            pasoActual++;
                            $('#paso-1').addClass('d-none');
                            $('#paso-2').removeClass('d-none');
                        } else if (pasoActual === 2) {
                            // Validar si hay algún checkbox tildado en el Paso 2
                            let hayChecked = false;
                            $('.check-opcion').each(function() {
                                if ($(this).prop('checked')) {
                                    hayChecked = true;
                                    return false; // break del each
                                }
                            });

                            if (hayChecked) {
                                avanzarAPaso3();
                            } else {
                                $('#modalSinInformes').modal('show');
                            }
                        } else if (pasoActual === 3) {
                            avanzarAPaso4();
                        } else if (pasoActual === 4) {
                            guardarConfiguracion();
                        }
                    }
                });
                // Botón para continuar sin informes en el modal del paso 2
                $('#btn-continuar-sin-informes').on('click', function() {
                    $('#modalSinInformes').modal('hide');
                    avanzarAPaso3();
                });

                function avanzarAPaso3() {
                    pasoActual = 3;
                    $('#paso-2').addClass('d-none');
                    $('#paso-3').removeClass('d-none');
                    $('#btn-siguiente').html('<i class="bi bi-check-lg" style="margin-right: 5px;"></i> Revisar configuración');
                    actualizarListasPaso3();
                }

                function avanzarAPaso4() {
                    pasoActual = 4;
                    $('#paso-3').addClass('d-none');
                    $('#paso-4').removeClass('d-none');

                    $('#btn-siguiente').html('<i class="bi bi-check-lg" style="margin-right: 5px;"></i> Confirmar');
                    generarResumenPaso4();
                }

                function retrocederPaso() {
                    if (pasoActual === 2) {
                        pasoActual--;
                        $('#paso-2').addClass('d-none');
                        $('#paso-1').removeClass('d-none');
                        validarBotonSiguiente();
                    } else if (pasoActual === 3) {
                        pasoActual--;
                        $('#paso-3').addClass('d-none');
                        $('#paso-2').removeClass('d-none');
                        $('#btn-siguiente').html('<i class="bi bi-check-lg" style="margin-right: 5px;"></i> Siguiente');
                        $btnSiguiente.prop('disabled', false);
                        $btnSiguiente.css('pointer-events', 'auto');
                    } else if (pasoActual === 4) {
                        pasoActual--;
                        $('#paso-4').addClass('d-none');
                        $('#paso-3').removeClass('d-none');
                        $('#btn-siguiente').html('<i class="bi bi-check-lg" style="margin-right: 5px;"></i> Revisar configuración');
                        validarBotonSiguientePaso3();
                    }
                }

                // Botón cancelar abre modal de confirmación
                $('#cancelar-paso').on('click', function() {
                    $('#modalConfirmarCancelacion').modal('show');
                });

                // Confirmar cancelación lleva al inicio
                $('#btn-confirmar-cancelacion').on('click', function() {
                    volverAlInicio();
                });

                // PASO 1

                // Devuelve el set de IDs de familia ya usados en otras listas (no en $listaItem)
                function familiasUsadas($excluir) {
                    const usadas = new Set();
                    $('#listas-container .lista-item').not($excluir).each(function() {
                        $(this).find('.check-familia:checked').each(function() {
                            usadas.add(parseInt($(this).val()));
                        });
                    });
                    return usadas;
                }

                // Recalcula disabled/enabled de los checkboxes de todas las listas
                function sincronizarFamilias() {
                    $('#listas-container .lista-item').each(function() {
                        const $lista = $(this);
                        const usadas = familiasUsadas($lista);
                        $lista.find('.check-familia').each(function() {
                            const id = parseInt($(this).val());
                            if (usadas.has(id)) {
                                $(this).prop('disabled', true).closest('.familia-check-wrap').addClass('opacity-50');
                            } else {
                                $(this).prop('disabled', false).closest('.familia-check-wrap').removeClass('opacity-50');
                            }
                        });
                    });
                }

                // Genera el HTML de checkboxes de familias para un lista-item
                // listaScreeningId: ID real de BD del grupo (null si es nuevo)
                function checkboxesFamilias(switchId, listaScreeningId) {
                    let html = '';
                    todasLasFamilias.forEach(function(f) {
                        const preChecked = listaScreeningId !== null
                            && f.lista_screening !== null
                            && f.lista_screening == listaScreeningId;
                        html += `
                            <div class="familia-check-wrap col-6 col-md-3">
                                <div class="form-check mt-0">
                                    <input class="form-check-input checkbox-prod check-familia" type="checkbox" value="${f.id}" id="fam_${switchId}_${f.id}" ${preChecked ? 'checked' : ''}>
                                    <label class="form-check-label text-prod-oscuro" for="fam_${switchId}_${f.id}" style="font-size:14px;">${f.nombre}</label>
                                </div>
                            </div>`;
                    });
                    return html;
                }

                // Construye el HTML completo de un lista-item acordeón
                // listaScreeningId: ID real de BD para pre-tildar familias (null en grupos nuevos)
                function buildListaItem(switchId, numero, listaScreeningId = null) {
                    return `
                    <div class="lista-item mb-3" data-lista-screening="${listaScreeningId ?? ''}">
                        <div class="lista-acordeon-header bg-prod-background d-flex align-items-center justify-content-between">
                            <div class="d-flex align-items-center gap-3">
                                <i class="bi bi-chevron-down icon-flecha-lista"></i>
                                <span class="fw-bold text-prod-oscuro lista-numero-label">GRUPO ${numero}</span>
                            </div>
                            <span class="text-prod-oscuro fw-bold" style="font-size:13px;"><span class="badge-familias">0</span> familias seleccionadas</span>
                        </div>
                        <div class="lista-acordeon-body">
                            <div class="row g-0">
                                <div class="col-md-4 col-izq d-flex flex-column gap-3">
                                    <div>
                                        <label class="form-label text-prod-pri fw-bold mb-1" style="font-size:13px;">Nombre</label>
                                        <x-input-prod placeholder="Placeholder" class="input-green-bg input-nombre"/>
                                        <span class="msg-nombre-duplicado d-none text-neg-pri" style="font-size:12px;">Ya existe un grupo con este nombre.</span>
                                    </div>
                                    <div>
                                        <label class="form-label text-prod-pri fw-bold mb-1" style="font-size:13px;">Abreviatura (máx. 3 letras)</label>
                                        <x-input-prod placeholder="EJ: PRV" class="input-green-bg input-abreviatura" maxlength="3"/>
                                        <span class="msg-abreviatura-duplicada d-none text-neg-pri" style="font-size:12px;">Ya existe un grupo con esta abreviatura.</span>
                                    </div>
                                    <div>
                                        <label class="form-label text-prod-pri fw-bold mb-1" style="font-size:13px;">Descripción</label>
                                        <textarea class="form-control input-prod" rows="4" placeholder="Placeholder"></textarea>
                                    </div>
                                    <div>
                                        <div class="form-check form-switch d-flex align-items-center gap-2">
                                            <input class="switch-prod form-check-input switch-archivo" type="checkbox" id="switch_${switchId}">
                                            <label class="form-check-label text-prod-pri fw-bold" for="switch_${switchId}" style="font-size:13px;">Grupo con carga de archivo</label>
                                        </div>
                                        <div class="tooltip-archivo label-inferior d-none" style="font-size:12px;">La carga de archivo asignada a esta lista.</div>
                                    </div>
                                </div>
                                <div class="col-md-8 col-der">
                                    <span class="fw-bold text-prod-pri d-block mb-2" style="font-size:14px;">FAMILIAS ASOCIADAS</span>
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <button type="button" class="btn-seleccionar-todos btn-prod-text fw-bold" style="font-size:14px;">Seleccionar todo</button>
                                        <div class="input-group d-flex justify-content-end w-50">
                                            <input type="text" class="input-prod input-buscar-familia" placeholder="Buscar">
                                        </div>
                                    </div>
                                    <div class="row g-2 contenedor-familias">
                                        ${checkboxesFamilias(switchId, listaScreeningId)}
                                    </div>
                                    <div class="d-flex justify-content-end mt-3 cont-btn-eliminar ${numero === 1 ? 'd-none' : ''}">
                                        <button type="button" class="btn-eliminar btn-neg-text btn-small">
                                            <i class="bi bi-trash"></i> Eliminar grupo
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
                }

                // 1. Renumera grupos y muestra/oculta botones eliminar
                function actualizarListas() {
                    const $items = $('#listas-container .lista-item');
                    $items.each(function(index) {
                        $(this).find('.lista-numero-label').text('GRUPO ' + (index + 1));
                        const $btn = $(this).find('.cont-btn-eliminar');
                        $items.length > 1 ? $btn.removeClass('d-none') : $btn.addClass('d-none');
                    });
                    validarBotonSiguiente();
                }

                // 2. Habilita Siguiente solo si todos los nombres y abreviaturas están completos, únicos y tienen al menos una familia
                function validarBotonSiguiente() {
                    const $listas = $('#listas-container .lista-item');
                    let ok = true;
                    let cant = 0;
                    const nombres = [];
                    const abreviaturas = [];

                    $listas.each(function() {
                        cant++;
                        const nombre = $.trim($(this).find('.input-nombre').val());
                        const abrev  = $.trim($(this).find('.input-abreviatura').val());
                        if (nombre === '') ok = false;
                        if (abrev === '' || abrev.length > 3) ok = false;
                        if ($(this).find('.check-familia:checked').length === 0) ok = false;
                        nombres.push(nombre);
                        abreviaturas.push(abrev);
                    });

                    // Detectar duplicados de nombre
                    const hayDupNombres = nombres.some((n, i) => n !== '' && nombres.indexOf(n) !== i);
                    if (hayDupNombres) ok = false;

                    // Detectar duplicados de abreviatura
                    const hayDupAbrev = abreviaturas.some((a, i) => a !== '' && abreviaturas.indexOf(a) !== i);
                    if (hayDupAbrev) ok = false;

                    // Marcar/desmarcar errores visuales
                    $listas.each(function() {
                        const $inpNombre = $(this).find('.input-nombre');
                        const $inpAbrev  = $(this).find('.input-abreviatura');
                        const nombre = $.trim($inpNombre.val());
                        const abrev  = $.trim($inpAbrev.val());

                        const esDupNombre = nombre !== '' && nombres.filter(n => n === nombre).length > 1;
                        $inpNombre.toggleClass('input-error', esDupNombre);
                        $(this).find('.msg-nombre-duplicado').toggleClass('d-none', !esDupNombre);

                        const esDupAbrev = abrev !== '' && abreviaturas.filter(a => a === abrev).length > 1;
                        $inpAbrev.toggleClass('input-error', esDupAbrev);
                        $(this).find('.msg-abreviatura-duplicada').toggleClass('d-none', !esDupAbrev);
                    });

                    const habilitar = ok && cant > 0;
                    $btnSiguiente.prop('disabled', !habilitar).css('pointer-events', habilitar ? 'auto' : 'none');
                }

                // 3. Agregar lista
                $('#btn-agregar-lista').on('click', function(e) {
                    e.preventDefault();
                    switchCounter++;
                    const num = $('#listas-container .lista-item').length + 1;
                    $('#listas-container').append(buildListaItem(switchCounter, num));
                    actualizarListas();
                    sincronizarFamilias();
                });

                // 4. Toggle acordeón
                $container.on('click', '.lista-acordeon-header', function(e) {
                    if ($(e.target).closest('.btn-eliminar').length) return;
                    const $header = $(this);
                    const $body   = $header.next('.lista-acordeon-body');
                    const $arrow  = $header.find('.icon-flecha-lista');
                    const open    = !$body.hasClass('d-none');
                    $body.toggleClass('d-none', open);
                    $header.toggleClass('collapsed', open);
                    $arrow.css('transform', open ? 'rotate(-90deg)' : 'rotate(0deg)');
                });

                // 5a. Abreviatura: forzar mayúsculas, solo letras, máx 3
                $container.on('input', '.input-abreviatura', function() {
                    const val = $(this).val().replace(/[^a-zA-Z]/g, '').toUpperCase().slice(0, 3);
                    $(this).val(val);
                    validarBotonSiguiente();
                });

                // 5. Quitar borde rojo al escribir
                $container.on('input', '.input-nombre', function() {
                    $(this).removeClass('input-error');
                    validarBotonSiguiente();
                });

                // 6. Eliminar lista
                $container.on('click', '.btn-eliminar', function(e) {
                    e.stopPropagation();
                    $(this).closest('.lista-item').remove();
                    actualizarListas();
                    sincronizarFamilias();
                });

                // 7. Switch archivo — solo uno activo
                let tooltipTimeout;
                $container.on('change', '.switch-archivo', function() {
                    const $cur = $(this);
                    if (tooltipTimeout) clearTimeout(tooltipTimeout);
                    if ($cur.prop('checked')) {
                        $('.switch-archivo').not(this).prop('checked', false);
                        $('.label-inferior').addClass('d-none');
                        const $tip = $cur.closest('.mb-3').find('.label-inferior');
                        $tip.removeClass('d-none');
                        tooltipTimeout = setTimeout(() => $tip.addClass('d-none'), 3000);
                    } else {
                        $cur.closest('.mb-3').find('.label-inferior').addClass('d-none');
                    }
                });

                // 8. Check familia — sincronizar exclusividad entre listas
                $container.on('change', '.check-familia', function() {
                    const $lista  = $(this).closest('.lista-item');
                    const checked = $lista.find('.check-familia:checked').length;
                    $lista.find('.badge-familias').text(checked);
                    sincronizarFamilias();
                    validarBotonSiguiente();
                });

                // 9. Seleccionar todo (solo las habilitadas y visibles)
                $container.on('click', '.btn-seleccionar-todos', function() {
                    const $lista = $(this).closest('.lista-item');
                    const $checks = $lista.find('.contenedor-familias .familia-check-wrap:visible .check-familia:not(:disabled)');
                    const todasChecked = $checks.length > 0 && $checks.filter(':checked').length === $checks.length;
                    $checks.prop('checked', !todasChecked);
                    $lista.find('.badge-familias').text($lista.find('.check-familia:checked').length);
                    sincronizarFamilias();
                    validarBotonSiguiente();
                });

                // 10. Buscador de familias
                $container.on('input', '.input-buscar-familia', function() {
                    const q = $(this).val().toLowerCase();
                    $(this).closest('.lista-acordeon-body').find('.familia-check-wrap').each(function() {
                        const nombre = $(this).find('label').text().toLowerCase();
                        $(this).toggleClass('d-none', q !== '' && !nombre.includes(q));
                    });
                });

                // PASO 2

                // 1. Generar HTML del Paso 2 dinámicamente
                function generarDropdownsPaso2() {
                    const $contenedorPaso2 = $('#contenedor-dropdowns');
                    $contenedorPaso2.empty(); // Limpiar por si vuelve atrás y avanza de nuevo

                    // Recorrer cada lista del paso 1
                    $('.lista-item').each(function (index) {
                        const nombreLista = $(this).find('.input-nombre').val().trim();

                        if (nombreLista !== '') {
                            // Generar los checkboxes para esta lista
                            let checkboxesHtml = '';
                            opcionesSubmenu.forEach((opcion, i) => {
                                checkboxesHtml += `
                                    <div class="form-check mb-2">
                                        <input class="form-check-input checkbox-prod check-opcion" type="checkbox" value="${opcion.id}" id="check_${index}_${i}">
                                        <label class="form-check-label text-prod-oscuro fw-600" for="check_${index}_${i}" style="font-size: 14px;">
                                            ${opcion.label}
                                        </label>
                                    </div>
                                `;
                            });

                            // Estructura del Dropdown (Acordeón)
                            const dropdownHtml = `
                                <div class="dropdown-lista mb-3 rounded w-75">
                                    <div class="dropdown-header d-flex justify-content-between align-items-center">
                                        <div class="d-flex align-items-center gap-2 text-gris-400">
                                            <i class="bi bi-chevron-right icon-flecha"></i>
                                            <span class="fw-bold">GRUPO ${index + 1}: ${nombreLista}</span>
                                        </div>
                                        <span class="badge rounded-pill contador-opciones bg-prod-pri">0</span>
                                    </div>

                                    <div class="dropdown-body p-3 d-none">
                                        ${checkboxesHtml}
                                    </div>
                                </div>
                            `;

                            $contenedorPaso2.append(dropdownHtml);

                            // Si hay precarga para esta lista, tildar los checkboxes
                            if (window._preloadProcesos && window._preloadProcesos[index]) {
                                const ids = window._preloadProcesos[index];
                                const $dropdown = $contenedorPaso2.find('.dropdown-lista').last();
                                ids.forEach(function(id) {
                                    $dropdown.find('.check-opcion[value="' + id + '"]').prop('checked', true);
                                });
                                const count = $dropdown.find('.check-opcion:checked').length;
                                $dropdown.find('.contador-opciones').text(count);
                            }
                        }
                    });
                }

                // 2. Abrir/Cerrar Dropdown
                $('#paso-2').on('click', '.dropdown-header', function() {
                    const $currentDropdown = $(this).closest('.dropdown-lista');
                    const $body = $(this).next('.dropdown-body');
                    const $icono = $(this).find('.icon-flecha');

                    // Cerrar todos los demás que estén abiertos
                    $('#paso-2 .dropdown-lista').not($currentDropdown).each(function() {
                        $(this).find('.dropdown-body').addClass('d-none');
                        $(this).find('.icon-flecha').removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    });

                    $body.toggleClass('d-none');

                    // Cambiar dirección de la flecha
                    if ($body.hasClass('d-none')) {
                        $icono.removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    } else {
                        $icono.removeClass('bi-chevron-right').addClass('bi-chevron-down');
                    }
                });

                // 3. Actualizar contador al marcar/desmarcar checkboxes
                $('#paso-2').on('change', '.check-opcion', function() {
                    const $dropdown = $(this).closest('.dropdown-lista');
                    const cantidadSeleccionados = $dropdown.find('.check-opcion:checked').length;
                    const $badge = $dropdown.find('.contador-opciones');

                    $badge.text(cantidadSeleccionados);
                });

                // PASO 3
                let listasDisponibles = [];
                let listaConArchivo = null;

                function actualizarListasPaso3() {
                    listasDisponibles = [];
                    listaConArchivo = null;

                    // Recopilar listas del paso 1
                    $('#listas-container .lista-item').each(function(index) {
                        const name = $(this).find('.input-nombre').val().trim();
                        const isArchivo = $(this).find('.switch-archivo').prop('checked');
                        if (name !== '') {
                            const listObj = {
                                id: index,
                                name: name,
                                isArchivo: isArchivo
                            };
                            listasDisponibles.push(listObj);
                            if (isArchivo) {
                                listaConArchivo = listObj;
                            }
                        }
                    });

                    if ($('#cruces-container .cruce-item').length === 0) {
                        // Si hay precarga de cruces la usamos; si no, agregamos uno vacío
                        if (window._preloadCruces && window._preloadCruces.length > 0) {
                            // Agrupar criterios por par (A, B) para crear un cruce-item por par
                            const pares = {};
                            window._preloadCruces.forEach(function(c) {
                                const key = c.idxA + '_' + c.idxB;
                                if (!pares[key]) pares[key] = { idxA: c.idxA, idxB: c.idxB, criterios: [] };
                                pares[key].criterios.push(c.id_cruce);
                            });

                            Object.values(pares).forEach(function(par) {
                                agregarCruce();
                                const $ultimo = $('#cruces-container .cruce-item').last();
                                llenarSelectsDeCruce($ultimo);
                                $ultimo.find('.select-lista-principal').val(par.idxA);
                                llenarSelectsDeCruce($ultimo); // re-llenar secundaria con principal ya seteado
                                $ultimo.find('.select-lista-secundaria').val(par.idxB);
                                par.criterios.forEach(function(id) {
                                    $ultimo.find('.check-criterio[value="' + id + '"]').prop('checked', true);
                                });
                                const count = $ultimo.find('.check-criterio:checked').length;
                                $ultimo.find('.contador-opciones').text(count);
                                // Mostrar pregunta (evalúa ambos selects ya seteados) y precargar radio
                                actualizarPreguntaContraparte($ultimo);
                                if (par.idxA === par.idxB && window._preloadTodosProcesos && window._preloadTodosProcesos[par.idxA]) {
                                    const val = window._preloadTodosProcesos[par.idxA]; // 'T' o 'P'
                                    $ultimo.find('.radio-contraparte[value="' + val + '"]').prop('checked', true);
                                }
                            });
                        } else {
                            agregarCruce();
                        }
                    } else {
                        $('#cruces-container .cruce-item').each(function() {
                            llenarSelectsDeCruce($(this));
                        });
                    }
                    validarBotonSiguientePaso3();
                }

                function agregarCruce() {
                    const randomId = Math.random().toString(36).substr(2, 9);
                    const htmlCruce = `
                    <div class="w-75 mx-auto mb-3 cruce-item">
                        <div class="lista-acordeon-header bg-prod-background d-flex align-items-center justify-content-between">
                            <span class="fw-bold text-prod-oscuro cruce-titulo" style="font-size:15px;">CRUCE 1:</span>
                        </div>
                        <div class="lista-acordeon-body">
                            <div class="row mb-4">
                                <div class="col-md-5">
                                    <label class="form-label text-prod-pri fw-bold" style="font-size: 14px;">Grupo principal</label>
                                    <select class="form-select select-lista-principal input-prod">
                                    </select>
                                </div>
                                <div class="col-md-2 d-flex align-items-end justify-content-center">
                                    <span>contra</span>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label text-prod-pri fw-bold" style="font-size: 14px;">Grupo secundario</label>
                                    <select class="form-select select-lista-secundaria input-prod">
                                    </select>
                                </div>
                            </div>
                            <div class="pregunta-contraparte d-none mb-3">
                                <p class="fw-bold text-prod-pri mb-2" style="font-size:14px;">¿Contra qué contrapartes se debe realizar el cruce?</p>
                                <div class="form-check mb-2">
                                    <input class="form-check-input checkbox-prod radio-contraparte" type="radio" name="contraparte_${randomId}" value="P" id="cp1_${randomId}">
                                    <label class="form-check-label" for="cp1_${randomId}" style="font-size:14px;">Solo contra las contrapartes del mismo proceso.</label>
                                </div>
                                <div class="form-check mb-2">
                                    <input class="form-check-input checkbox-prod radio-contraparte" type="radio" name="contraparte_${randomId}" value="T" id="cp2_${randomId}">
                                    <label class="form-check-label" for="cp2_${randomId}" style="font-size:14px;">Contra todas las contrapartes del grupo.</label>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label text-prod-pri fw-bold" style="font-size: 14px;">Criterio de cruce</label>
                                    <div class="dropdown-lista w-100">
                                        <div class="dropdown-header d-flex justify-content-between align-items-center" style="cursor: pointer;">
                                            <div class="d-flex align-items-center gap-2 text-gris-400">
                                                <i class="bi bi-chevron-right icon-flecha"></i>
                                                <span class="fw-bold">Seleccionar criterios</span>
                                            </div>
                                            <span class="badge rounded-pill contador-opciones bg-prod-pri">0</span>
                                        </div>
                                        <div class="dropdown-body p-3 d-none">
                                            ${criteriosCruce.map((c, i) => `
                                            <div class="form-check mb-2">
                                                <input class="form-check-input checkbox-prod check-criterio" type="checkbox" value="${c.id}" id="crit_${i}_${randomId}">
                                                <label class="form-check-label text-prod-oscuro fw-600" for="crit_${i}_${randomId}" style="font-size: 14px;">
                                                    ${c.label}
                                                </label>
                                            </div>`).join('')}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end cont-btn-eliminar-cruce d-none">
                                <button type="button" class="btn-eliminar-cruce btn-neg-text btn-small px-0">
                                    <i class="bi bi-trash"></i> Eliminar cruce
                                </button>
                            </div>
                        </div>
                    </div>
                    `;
                    $('#cruces-container').append(htmlCruce);

                    llenarSelectsDeCruce($('#cruces-container .cruce-item').last());

                    actualizarBotonesEliminarCruce();
                    actualizarTitulosCruces();
                    validarBotonSiguientePaso3();
                }

                // Devuelve los pares (prin, sec) ya usados en otros cruces (no en $cruceActual)
                function paresUsados($cruceActual) {
                    const pares = [];
                    $('#cruces-container .cruce-item').not($cruceActual).each(function() {
                        const p = $(this).find('.select-lista-principal').val();
                        const s = $(this).find('.select-lista-secundaria').val();
                        if (p && s) pares.push({ p, s });
                    });
                    return pares;
                }

                function llenarSelectsDeCruce($cruce) {
                    const $selectPrincipal = $cruce.find('.select-lista-principal');
                    const $selectSecundaria = $cruce.find('.select-lista-secundaria');

                    const valPrin = $selectPrincipal.val();
                    const valSec  = $selectSecundaria.val();

                    $selectPrincipal.empty().append('<option value="" selected disabled>Seleccionar</option>');
                    $selectSecundaria.empty().append('<option value="" selected disabled>Seleccionar</option>');

                    // Todas las listas pueden ser principal
                    listasDisponibles.forEach(lista => {
                        $selectPrincipal.append(`<option value="${lista.id}">${lista.name}</option>`);
                    });

                    // Secundaria: si hay lista con archivo, no puede ser secundaria SALVO que sea
                    // la misma que la principal (cruce consigo misma)
                    listasDisponibles.forEach(lista => {
                        const esArchivoYNoPrincipal = listaConArchivo !== null
                            && lista.id === listaConArchivo.id
                            && lista.id.toString() !== valPrin;
                        if (!esArchivoYNoPrincipal) {
                            $selectSecundaria.append(`<option value="${lista.id}">${lista.name}</option>`);
                        }
                    });

                    if (valPrin && $selectPrincipal.find(`option[value="${valPrin}"]`).length > 0) {
                        $selectPrincipal.val(valPrin);
                    }
                    if (valSec && $selectSecundaria.find(`option[value="${valSec}"]`).length > 0) {
                        $selectSecundaria.val(valSec);
                    }
                }

                function actualizarTitulosCruces() {
                    $('#cruces-container .cruce-item').each(function(index) {
                        $(this).find('.cruce-titulo').text(`CRUCE ${index + 1}:`);
                    });
                }

                function actualizarBotonesEliminarCruce() {
                    const $cruces = $('.cruce-item');
                    if ($cruces.length > 1) {
                        $('.cont-btn-eliminar-cruce').removeClass('d-none');
                    } else {
                        $('.cont-btn-eliminar-cruce').addClass('d-none');
                    }
                }

                function validarBotonSiguientePaso3() {
                    if (pasoActual !== 3) return;

                    const $cruces = $('#cruces-container .cruce-item');
                    let ok = true;

                    // Recolectar todos los pares para detectar duplicados/inversos
                    const pares = [];
                    $cruces.each(function() {
                        const p = $(this).find('.select-lista-principal').val();
                        const s = $(this).find('.select-lista-secundaria').val();
                        pares.push({ p: p || '', s: s || '' });
                    });

                    $cruces.each(function(idx) {
                        const $cruce = $(this);
                        const valPrin = $cruce.find('.select-lista-principal').val();
                        const valSec  = $cruce.find('.select-lista-secundaria').val();
                        const cantCriterios = $cruce.find('.check-criterio:checked').length;

                        // Validación básica: campos completos y criterios
                        if (!valPrin || !valSec || cantCriterios === 0) ok = false;

                        // Validación duplicado/inverso: compara contra todos los otros pares
                        let esDuplicado = false;
                        if (valPrin && valSec) {
                            pares.forEach(function(par, i) {
                                if (i === idx) return;
                                const mismoOrden   = par.p === valPrin && par.s === valSec;
                                const ordenInverso = par.p === valSec  && par.s === valPrin;
                                if (mismoOrden || ordenInverso) esDuplicado = true;
                            });
                        }

                        // Marcar/desmarcar error visual en los selects
                        $cruce.find('.select-lista-principal').toggleClass('is-invalid', esDuplicado);
                        $cruce.find('.select-lista-secundaria').toggleClass('is-invalid', esDuplicado);

                        if (esDuplicado) ok = false;
                    });

                    const habilitar = ok && $cruces.length > 0;
                    $btnSiguiente.prop('disabled', !habilitar).css('pointer-events', habilitar ? 'auto' : 'none');
                }

                // Muestra/oculta la pregunta de contraparte según si el cruce es consigo mismo y tiene archivo
                function actualizarPreguntaContraparte($cruce) {
                    const valPrin = $cruce.find('.select-lista-principal').val();
                    const valSec  = $cruce.find('.select-lista-secundaria').val();
                    const esMismaLista = valPrin && valSec && valPrin === valSec;
                    const tieneArchivo = listaConArchivo !== null && valPrin && valPrin === listaConArchivo.id.toString();
                    $cruce.find('.pregunta-contraparte').toggleClass('d-none', !(esMismaLista && tieneArchivo));
                }

                $('#paso-3').on('change', 'select, .check-criterio', function() {
                    const $cruce = $(this).closest('.cruce-item');

                    if ($(this).is('select')) {
                        llenarSelectsDeCruce($cruce);
                        actualizarPreguntaContraparte($cruce);
                    } else if ($(this).hasClass('check-criterio')) {
                        const cant = $cruce.find('.check-criterio:checked').length;
                        if (cant > 0) $cruce.find('.dropdown-lista').removeClass('border-danger border-2');
                    }

                    // Revalida todos los cruces (puede que el cambio resuelva un duplicado en otro)
                    validarBotonSiguientePaso3();
                });

                // Abrir/Cerrar Dropdown de Criterios (Paso 3)
                $('#paso-3').on('click', '.dropdown-header', function() {
                    const $body = $(this).next('.dropdown-body');
                    const $icono = $(this).find('.icon-flecha');

                    $body.toggleClass('d-none');

                    if ($body.hasClass('d-none')) {
                        $icono.removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    } else {
                        $icono.removeClass('bi-chevron-right').addClass('bi-chevron-down');
                    }
                });

                // Actualizar contador al marcar/desmarcar criterios (Paso 3)
                $('#paso-3').on('change', '.check-criterio', function() {
                    const $dropdown = $(this).closest('.dropdown-lista');
                    const cantidadSeleccionados = $dropdown.find('.check-criterio:checked').length;
                    const $badge = $dropdown.find('.contador-opciones');

                    $badge.text(cantidadSeleccionados);
                });

                $('#btn-agregar-cruce').on('click', function(e) {
                    e.preventDefault();
                    agregarCruce();
                });

                $('#paso-3').on('click', '.btn-eliminar-cruce', function(e) {
                    e.preventDefault();
                    $(this).closest('.cruce-item').remove();
                    actualizarBotonesEliminarCruce();
                    actualizarTitulosCruces();
                    validarBotonSiguientePaso3();
                });

                // Generar elementos del paso 4 en forma de resúmenes
                function generarResumenPaso4() {
                    const $containerListas = $('#resumen-listas-container');
                    const $containerCruces = $('#resumen-cruces-container');
                    $containerListas.empty();
                    $containerCruces.empty();

                    // --- COLUMNA 1: Listas e Informes Individuales (Recopilación del DOM del Paso 2) ---
                    $('#contenedor-dropdowns .dropdown-lista').each(function(index) {
                        const cantChecked = parseInt($(this).find('.contador-opciones').text()) || 0;
                        const nombreListaFull = $(this).find('.dropdown-header span.fw-bold').text().trim();

                        // Determinamos si es la que tiene archivo fijándonos en paso 1
                        const isArchivo = $('.lista-item').eq(index).find('.switch-archivo').prop('checked');
                        const badgeArchivo = isArchivo
                            ? `<span class="badge ms-2 rounded-1 fw-bold bg-prod-pri text-gris-50" style="font-size: 11px; padding: 4px 8px;">Grupo con carga de archivo</span>`
                            : '';

                        // Familias seleccionadas en este grupo (del DOM del Paso 1)
                        let familiasHtml = '';
                        $('.lista-item').eq(index).find('.check-familia:checked').each(function() {
                            const nombre = $(this).next('label').text().trim();
                            familiasHtml += `
                                <div class="form-check mb-2 d-flex align-items-center">
                                    <input class="form-check-input checkbox-prod check-resumen" type="checkbox" disabled checked>
                                    <label class="form-check-label text-prod-oscuro fw-bold ms-2" style="font-size: 14px; opacity: 1; user-select: none; pointer-events: none;">
                                        ${nombre}
                                    </label>
                                </div>`;
                        });
                        const familiasSection = familiasHtml
                            ? `<div class="mb-3">
                                   <p class="fw-bold text-prod-pri mb-1" style="font-size:14px;">FAMILIAS ASOCIADAS</p>
                                   ${familiasHtml}
                               </div>`
                            : '';

                        let checkboxesHtml = '';
                        $(this).find('.check-opcion:checked').each(function() {
                            const labelText = $(this).next('label').text().trim();
                            checkboxesHtml += `
                                <div class="form-check mb-2 d-flex align-items-center">
                                    <input class="form-check-input checkbox-prod check-resumen" type="checkbox" disabled checked>
                                    <label class="form-check-label text-prod-oscuro fw-bold ms-2" style="font-size: 14px; opacity: 1; user-select: none; pointer-events: none;">
                                        ${labelText}
                                    </label>
                                </div>
                            `;
                        });
                        const informesSection = checkboxesHtml
                            ? `<div>
                                   <p class="fw-bold text-prod-pri mb-1" style="font-size:14px;">INFORMES</p>
                                   ${checkboxesHtml}
                               </div>`
                            : '';

                        const accordionHtml = `
                            <div class="dropdown-lista w-100 rounded mb-3 border border-1" style="border-color: #2F9B73 !important; background-color: #fff;">
                                <div class="dropdown-header d-flex align-items-center" style="cursor: pointer;">
                                    <i class="bi bi-chevron-right icon-flecha me-3 text-gris-400" style="font-size: 16px;"></i>
                                    <span class="text-prod-oscuro fw-bold" style="font-size: 16px;">${nombreListaFull} ${badgeArchivo}</span>
                                </div>
                                <div class="dropdown-body p-3 d-none border-top">
                                    ${familiasSection}
                                    ${informesSection}
                                </div>
                            </div>
                        `;
                        $containerListas.append(accordionHtml);
                    });

                    // --- COLUMNA 2: Cruces (Recopilación del DOM del Paso 3) ---
                    $('#cruces-container .cruce-item').each(function() {
                        const nombrePrin = $(this).find('.select-lista-principal option:selected').text().trim();
                        const nombreSec = $(this).find('.select-lista-secundaria option:selected').text().trim();
                        const cantSettings = $(this).find('.check-criterio:checked').length;

                        // Badge de contraparte si aplica
                        const $radioChecked = $(this).find('.radio-contraparte:checked');
                        const badgeContraparteTexto = $radioChecked.val() === 'P'
                            ? 'Contrapartes del mismo proceso'
                            : $radioChecked.val() === 'T'
                                ? 'Todas las contrapartes del grupo'
                                : '';
                        const badgeContraparte = badgeContraparteTexto
                            ? `<span class="badge ms-2 rounded-1 fw-bold bg-prod-pri text-gris-50" style="font-size: 11px; padding: 4px 8px;">${badgeContraparteTexto}</span>`
                            : '';

                        let checkboxesHtml = '';
                        $(this).find('.check-criterio:checked').each(function() {
                            const labelText = $(this).next('label').text().trim();
                            checkboxesHtml += `
                                <div class="form-check mb-2 d-flex align-items-center">
                                    <input class="form-check-input checkbox-prod check-resumen" type="checkbox" disabled checked>
                                    <label class="form-check-label text-prod-oscuro fw-bold ms-2" style="font-size: 14px; opacity: 1; user-select: none; pointer-events: none;">
                                        ${labelText}
                                    </label>
                                </div>
                            `;
                        });

                        const dropdownTitle = `${nombrePrin} <i class="fas fa-arrow-right mx-2" style="color: #2F9B73;"></i> ${nombreSec}`;

                        const accordionHtml = `
                            <div class="dropdown-lista w-100 rounded mb-3 border border-1" style="border-color: #2F9B73 !important; background-color: #fff;">
                                <div class="dropdown-header d-flex justify-content-between align-items-center" style="cursor: pointer;">
                                    <div class="d-flex align-items-center text-gris-400 flex-wrap gap-1">
                                        <i class="bi bi-chevron-right icon-flecha me-2" style="font-size: 16px;"></i>
                                        <span class="text-prod-oscuro fw-bold" style="font-size: 16px;">${dropdownTitle}</span>
                                        ${badgeContraparte}
                                    </div>
                                    <span class="badge rounded-pill bg-prod-pri ms-2" style="font-size: 14px; padding: 5px 10px;">${cantSettings}</span>
                                </div>
                                <div class="dropdown-body p-3 d-none border-top">
                                    ${checkboxesHtml}
                                </div>
                            </div>
                        `;
                        $containerCruces.append(accordionHtml);
                    });

                    // Abrir el primer acordeón de cada columna por defecto visual
                    $containerListas.find('.dropdown-lista').first().find('.dropdown-header').click();
                    $containerCruces.find('.dropdown-lista').first().find('.dropdown-header').click();
                }

                // Manejo de botones Editar globales del Paso 4
                $('.btn-editar-paso').on('click', function() {
                    const target = $(this).data('target-paso');
                    $('#paso-4').addClass('d-none');
                    $btnSiguiente.prop('disabled', false);
                    $btnSiguiente.css('pointer-events', 'auto');
                    $('#btn-siguiente').html('<i class="bi bi-check-lg" style="margin-right: 5px;"></i> Siguiente');

                    if (target == 1) { // Va al paso 1 (que indirectamente abre paso 2 pero el user pide el 1 visual)
                        // Para simplificar, vuelve al 1
                        pasoActual = 1;
                        $('#paso-1').removeClass('d-none');
                    } else if (target == 3) {
                        pasoActual = 3;
                        $('#paso-3').removeClass('d-none');
                    }
                });

                // Manejo general de los acordeones del Paso 4 (misma logica que Paso 2)
                $('#paso-4').on('click', '.dropdown-header', function() {
                    const $currentDropdown = $(this).closest('.dropdown-lista');
                    const $container = $currentDropdown.parent(); // Puede ser listas o cruces
                    const $body = $(this).next('.dropdown-body');
                    const $icono = $(this).find('.icon-flecha');

                    // Cerrar todos los demás que estén abiertos en la misma columna
                    $container.find('.dropdown-lista').not($currentDropdown).each(function() {
                        $(this).find('.dropdown-body').addClass('d-none');
                        $(this).find('.icon-flecha').removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    });

                    $body.toggleClass('d-none');

                    if ($body.hasClass('d-none')) {
                        $icono.removeClass('bi-chevron-down').addClass('bi-chevron-right');
                    } else {
                        $icono.removeClass('bi-chevron-right').addClass('bi-chevron-down');
                    }
                });

                // Precarga en modo MODIFICAR
                @if($estado === 'MODIFICAR' && count($config_listas))
                (function() {
                    const configListas   = @json($config_listas);
                    const configProcesos = @json($config_procesos);
                    const configCruces   = @json($config_cruces);

                    // --- Paso 1: poblar listas ---
                    // Mapear lista_screening → índice de wizard (para procesos y cruces)
                    const idToIndex = {};
                    const $cont = $('#listas-container');
                    $cont.empty();

                    // Mapa lista_screening → [familia_id] para precargar familias
                    const familiasPorLista = {};
                    const _rawFamilias = @json(collect($familias)->map(fn($f) => ['familia' => $f->familia, 'lista_screening' => $f->lista_screening]));
                    _rawFamilias.forEach(function(f) {
                        if (f.lista_screening) {
                            if (!familiasPorLista[f.lista_screening]) familiasPorLista[f.lista_screening] = [];
                            familiasPorLista[f.lista_screening].push(parseInt(f.familia));
                        }
                    });

                    configListas.forEach(function(lista, index) {
                        idToIndex[lista.lista_screening] = index;
                        switchCounter++;
                        // Pasamos el lista_screening real para que checkboxesFamilias pre-tilde automáticamente
                        $cont.append(buildListaItem(switchCounter, index + 1, lista.lista_screening));
                        const $nuevo = $cont.find('.lista-item').last();
                        $nuevo.find('.input-nombre').val(lista.nombre_lista);
                        $nuevo.find('.input-abreviatura').val(lista.abreviatura_pestana_excel ?? '');
                        $nuevo.find('textarea').val(lista.detalle_adicional ?? '');
                        if (lista.carga_archivo) $nuevo.find('.switch-archivo').prop('checked', true);
                        $nuevo.find('.badge-familias').text($nuevo.find('.check-familia:checked').length);
                    });
                    sincronizarFamilias();

                    // --- Paso 2: preseleccionar procesos (se aplica cuando generarDropdownsPaso2 se llame) ---
                    window._preloadProcesos = {};
                    configProcesos.forEach(function(p) {
                        const idx = idToIndex[p.lista_screening];
                        if (idx === undefined) return;
                        if (!window._preloadProcesos[idx]) window._preloadProcesos[idx] = [];
                        window._preloadProcesos[idx].push(parseInt(p.id_proceso));
                    });

                    // Mapa índice → todos_proceso para precargar el radio en cruces consigo misma
                    window._preloadTodosProcesos = {};
                    configListas.forEach(function(lista, index) {
                        if (lista.todos_proceso) {
                            window._preloadTodosProcesos[index] = lista.todos_proceso;
                        }
                    });

                    // --- Paso 3: precargar cruces ---
                    window._preloadCruces = configCruces.map(function(c) {
                        return {
                            idxA:     idToIndex[c.lista_screening_a],
                            idxB:     idToIndex[c.lista_screening_b],
                            id_cruce: parseInt(c.id_cruce),
                        };
                    });
                })();
                @endif

                // Revisión inicial al cargar la página — inserta la primera lista
                @if($estado !== 'MODIFICAR' || !count($config_listas))
                switchCounter++;
                $('#listas-container').append(buildListaItem(switchCounter, 1));
                @endif
                actualizarListas();

                // En MODIFICAR con config existente, saltar directamente al Paso 4
                @if($estado === 'MODIFICAR' && count($config_listas))
                generarDropdownsPaso2();
                actualizarListasPaso3();
                $('#paso-1').addClass('d-none');
                avanzarAPaso4();
                @endif

                // Serializa el estado del wizard y lo envía al backend
                function guardarConfiguracion() {
                    $btnSiguiente.prop('disabled', true).css('pointer-events', 'none');

                    // Listas (Paso 1)
                    // Buscar respuesta de todos_proceso por lista (del cruce consigo misma con archivo)
                    const todosProcesosMap = {};
                    $('#cruces-container .cruce-item').each(function() {
                        const idxA = $(this).find('.select-lista-principal').val();
                        const idxB = $(this).find('.select-lista-secundaria').val();
                        if (idxA && idxB && idxA === idxB) {
                            const $radio = $(this).find('.radio-contraparte:checked');
                            if ($radio.length) {
                                todosProcesosMap[parseInt(idxA)] = $radio.val(); // 'T' o 'P'
                            }
                        }
                    });

                    const listas = [];
                    $('#listas-container .lista-item').each(function(index) {
                        const familias_ids = [];
                        $(this).find('.check-familia:checked').each(function() {
                            familias_ids.push(parseInt($(this).val()));
                        });
                        const listaScreeningId = $(this).data('lista-screening') || null;
                        listas.push({
                            lista_index:     index,
                            lista_screening: listaScreeningId ? parseInt(listaScreeningId) : null,
                            nombre:          $(this).find('.input-nombre').val().trim(),
                            detalle:         $(this).find('textarea').val().trim(),
                            abreviatura:     $(this).find('.input-abreviatura').val().trim(),
                            con_archivo:     $(this).find('.switch-archivo').prop('checked') ? 1 : 0,
                            todos_proceso:   todosProcesosMap[index] || null,
                            familias:        familias_ids,
                        });
                    });

                    // Procesos (Paso 2): un ítem por checkbox tildado
                    const procesos = [];
                    $('#contenedor-dropdowns .dropdown-lista').each(function(listaIdx) {
                        $(this).find('.check-opcion:checked').each(function() {
                            procesos.push({
                                lista_index: listaIdx,
                                id_proceso:  parseInt($(this).val()),
                            });
                        });
                    });

                    // Cruces (Paso 3): un ítem por (par de listas × criterio tildado)
                    const cruces = [];
                    $('#cruces-container .cruce-item').each(function() {
                        const idxA = parseInt($(this).find('.select-lista-principal').val());
                        const idxB = parseInt($(this).find('.select-lista-secundaria').val());
                        $(this).find('.check-criterio:checked').each(function() {
                            cruces.push({
                                lista_a_index: idxA,
                                lista_b_index: idxB,
                                id_cruce:      parseInt($(this).val()),
                            });
                        });
                    });

                    $.ajax({
                        url:         '/blue/servicio-contratados-cliente/screening/guardar',
                        method:      'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            _token:  '{{ csrf_token() }}',
                            cliente: $('input[name="cliente"]').val(),
                            listas:  listas,
                            procesos: procesos,
                            cruces:  cruces,
                        }),
                        success: function(res) {
                            if (res.ok) {
                                volverAlInicio();
                            } else {
                                alert('Error al guardar: ' + (res.error || 'Error desconocido'));
                                $btnSiguiente.prop('disabled', false).css('pointer-events', 'auto');
                            }
                        },
                        error: function(xhr) {
                            const msg = xhr.responseJSON ? xhr.responseJSON.error : xhr.statusText;
                            alert('Error al guardar: ' + msg);
                            $btnSiguiente.prop('disabled', false).css('pointer-events', 'auto');
                        },
                    });
                }
            });
    </script>
@endsection