<style>
    .prow {
        cursor: pointer;
    }

    .prow:hover {
        text-decoration: underline;
    }
</style>
@if (empty($data))
    <div class="col-md-12 text-center">---- No se encontraron resultados ----</div>
@else <div class="row">
        <p class="text-center baja-leyenda">
            <i>Seleccione de la tabla el Tax Id que quiera</i> dar de baja
        </p>
        <br>
        <div class="col-sm-1"></div>
        <div class="col-sm-10" id="renderTabla">
            <br>
            <table class="table table-hover table-condensed" id="tablaBusqueda">
                <thead>
                    <tr class="btn-fidelitas">
                        <th class="text-center">@traducir('País', 'País')</th>
                        <th class="text-center">@traducir('Nombre', 'Nombre')</th>
                        <th class="text-center">@traducir('Tipo', 'Tipo')</th>
                        <th class="text-center">@traducir('Id Padron', 'Id Padron')</th>
                        <th class="text-center id">@traducir('Tax Id', 'Tax Id')</th>
                    </tr>
                </thead>
                <tbody> @foreach($data as $k => $persona) <tr class="prow" data-id-padron="{{ $persona->id_padron }}">
                    <td id="pais-agregar" class="text-center">
                        <span
                            class="flag-icon flag-icon-background flag-icon-{{ strtolower($persona->country_code) }}"></span>
                    </td>
                    <td id="nombre-agregar" class="text-left">{{ $persona->nombre_persona }}</td>
                    <td id="tipo-agregar" class="text-center">{{ $persona->abreviatura }}</td>
                    <td id="idPadron-agregar" class="text-center">{{ $persona->id_padron }}</td>
                    <td id="cuit-agregar" class="text-center">{{ $persona->identificacion }}</td>
                </tr> @endforeach
                </tbody>
                <tfoot></tfoot>
            </table>
        </div>
        <div class="col-sm-1"></div>
    </div>
    <br>
    <div class="row">
        <div class="col-sm-1"></div>
        <div id="lista_seleccion" class="col-sm-10">
            <br>
            <div id="cuil_baja" style="height: 16vh;">
                <h4 class="text-center">Tax Id para dar de baja</h4>
            </div>
            <div id="cuil_alta" style="height: 16vh;">
                <h4 class="text-center">Tax Id de reemplazo</h4>
            </div>
        </div>
        <div class="col-sm-1"></div>
    </div>
    <br>
    <!-- nuevo -->
    <div class="row" style="display: flex; justify-content: center" id="botones">
        <button class="btn btn-danger col-2" style="margin-right: 10px" onclick="limpiarLista()">Limpiar Lista</button>
        <div class="text-end">
            <form id="formSelect">
                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                <input type="hidden" id="listaCuil" name="listaCUIL[]">
                <input type="hidden" id="listaId" name="listaId[]">
                <button type="button" class="btn btn-fidelitas" onclick="sendData()">Cambiar Tax ID</button>
            </form>

            <div id="alertContainer" class="mt-3"></div>
        </div>
    </div>
    <script src="{{ URL::asset('js/cambioCuil/cambioCuil.js') }}?={{rand()}}"></script>
    <!-- fin nuevo -->
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#botones').css('display', 'none')
            if (sessionStorage.getItem('listcuit') != null) {
                showCUIL = JSON.parse(window.sessionStorage.getItem('listcuit'));
                showCUIL = String(showCUIL);
                showCUIL = showCUIL.split(',');
                elemHtml = '<p class = "text-center cuil"> ' + showCUIL[0] + ' </p>';
                $('#cuil_baja').append(elemHtml);
                if (showCUIL[1] != undefined) {
                    elemHtml = ' <p class = "text-center cuil"> ' + showCUIL[1] + ' </p>';
                    $('#cuil_alta').append(elemHtml);
                }
                $('.baja-leyenda').html(' < i > Ahora seleccione en la tabla el Tax Id que < /i>reemplazará al dado de baja');
            }
            // -------------
            $('#tablaBusqueda').DataTable({
                "pagingType": "full_numbers",
                "ordering": true,
                "pageLength": 5,
                "info": true,
                "lengthMenu": [
                    [5, 10, 25, 50, 100, -1],
                    [5, 10, 25, 50, 100, "Todos"]
                ],
                "language": {
                    "lengthMenu": "@traducir('Mostrar', 'Mostrar') _MENU_ @traducir('registros por página', 'registros por página')",
                    "zeroRecords": "@traducir('No se encontraron resultados para esa búsqueda', 'No se encontraron resultados para esa búsqueda')",
                    "info": "@traducir('Mostrando página', 'Mostrando página') _PAGE_ @traducir('de', 'de') _PAGES_",
                    "infoEmpty": "@traducir('No hay registros disponibles', 'No hay registros disponibles')",
                    "infoFiltered": "(@traducir('filtrados de', 'filtrados de') _MAX_ @traducir('registros totales', 'registros totales'))",
                    "sSearch": "@traducir('Buscar', 'Buscar')",
                    "oPaginate": {
                        "sFirst": "@traducir('Primera', 'Primera')",
                        "sPrevious": "@traducir('Anterior', 'Anterior')",
                        "sNext": "@traducir('Siguiente', 'Siguiente')",
                        "sLast": "@traducir('Última', 'Última')"
                    },
                }
            });
        });

    </script>
@endif