EVOLUTION-MANAGER

Edit File: padron-elecciones.blade.php

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <title>Municipalidad de Sucre</title>
</head>
<style>
    .pagination {
        flex-wrap: wrap;
    }

.invalid-ci {
        color: red;
    }

.contenedor-opciones {
        padding: 20px 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

.form-row {
        margin-top: 10px;
        margin-bottom: 10px;
    }

@media (max-width: 800px) {
        select {
            display: block;
            width: 100%;
            margin-bottom: 15px;
        }
    }

.form-container {
        max-width: 600px;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

.form-row>.col-md-6 {
        margin-bottom: 15px;
    }

.btn {
        padding: 10px 20px;
        font-size: 16px;
    }

#buscarBtn {
        background-color: #007bff;
        border-color: #007bff;
    }

#buscarBtn:hover {
        background-color: #0056b3;
        border-color: #004085;
    }

a.btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

a.btn-secondary:hover {
        background-color: #5a6268;
        border-color: #4e555b;
    }
</style>

<body>
    <div class="container">
        <h2 style="margin-top: 15px;">BORRADOR EMPADRONADOS</h2>

<p style="text-align: center; padding: 15px 0px; text-align: center; font-weight: 700;">ELECCIÓN DE UNIDADES BASICAS DE PARTICIPACIÓN
            CONSEJO BARRIAL </br> CONSEJO COMUNITARIO
            ELECCIÓN DE UNIDADES BASICAS DE PARTICIPACIÓN</p>

<div class="contenedor-opciones">
            <form action="{{ route('ruta.secreta') }}" method="GET" class="form-container">
                <div class="form-row">
                    <div class="col-md-6">
                        <label for="parroquia">Parroquias</label>
                        <select class="custom-select" id="parroquia" name="parroquia" required>
                            <option selected disabled value="">Seleccione...</option>
                            @foreach($parroquias as $parroquia)
                            <option value="{{ $parroquia->parroquia }}" {{ old('parroquia', $selectedParroquia ?? '') == $parroquia->parroquia ? 'selected' : '' }}>
                                {{ $parroquia->parroquia }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="barrio">Barrios o Comunidades</label>
                        <select class="custom-select" id="barrio" name="barrio">
                            <option selected disabled value="">Seleccione...</option>
                            {{-- Aquí se llenarán dinámicamente los barrios según la parroquia seleccionada --}}
                        </select>
                    </div>
                </div>
                <div class="form-group mt-3">
                    <button id="buscarBtn" class="btn btn-primary" type="submit">Buscar</button>
                    <a href="{{ route('ruta.secreta') }}" class="btn btn-secondary ml-2">Cancelar</a>
                </div>
            </form>

</div>

<div style="width: 100%; overflow-x: auto;">
            <table class="table">
                <thead class="table-dark">
                    <tr>
                        <th scope="col">Número</th>
                        <th scope="col">Nombres y Apellidos</th>
                        <th scope="col">Cédula</th>
                        <th scope="col">Cantón</th>
                        <th scope="col">Parroquia</th>
                        <th scope="col">Barrio</th>
                    </tr>
                </thead>
                <tbody id="tablaResultados">
                    @foreach ($informacion as $index => $dato)
                    <tr>
                        <td>{{$dato->numero}}</td>
                        <td>{{$dato->nombres_apellidos}}</td>
                        @if ($dato->cedula != "")
                        <td class="ci" data-id="{{$index}}">{{$dato->cedula}}</td>
                        @else
                        <td class="ci invalid-ci" data-id="{{$index}}">Sin información</td>
                        @endif
                        <td>{{$dato->canton}}</td>
                        <td>{{$dato->parroquia}}</td>
                        <td>{{$dato->barrio}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div id="paginacion">
                {{$informacion->links()}}
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {
        $('#barrio').select2({
            width: '100%'
        });
    });

$('#parroquia').change(function() {
        var selectedBarrio = '{{ old('
        barrio ', $selectedBarrio) }}';
        var barrioSelect = $('#barrio');
        var selectedId = $(this).val();
        if (selectedId) {
            $.ajax({
                url: '/getBarrios/' + selectedId,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    $('#barrio').empty();
                    $('#barrio').append('<option selected disabled>Seleccione</option>');
                    $.each(data, function(key, value) {
                        $('#barrio').append('<option value="' + value + '">' + value + '</option>');
                    });
                    if (selectedBarrio) {
                        barrioSelect.val(selectedBarrio);
                    }
                }
            });
        } else {
            $('#barrio').empty();
            $('#barrio').append('<option value="">Seleccione</option>');
        }
    });

//Validar que la cédula sea correcta
    function isValidCI(ci) {
        var isNumeric = true;
        var total = 0,
            individual;

for (var position = 0; position < 10; position++) {
            // Obtiene cada posición del número de cédula
            // Se convierte a string en caso de que 'ci' sea un valor numérico
            individual = ci.toString().substring(position, position + 1)

if (isNaN(individual)) {
                console.log(ci, position, individual, isNaN(individual))
                isNumeric = false;
                break;
            } else {
                // Si la posición es menor a 9
                if (position < 9) {
                    // Si la posición es par, osea 0, 2, 4, 6, 8.
                    if (position % 2 == 0) {
                        // Si el número individual de la cédula es mayor a 5
                        if (parseInt(individual) * 2 > 9) {
                            // Se duplica el valor, se obtiene la parte decimal y se aumenta uno 
                            // y se lo suma al total
                            total += 1 + ((parseInt(individual) * 2) % 10);
                        } else {
                            // Si el número individual de la cédula es menor que 5 solo se lo duplica
                            // y se lo suma al total
                            total += parseInt(individual) * 2;
                        }
                        // Si la posición es impar (1, 3, 5, 7)
                    } else {
                        // Se suma el número individual de la cédula al total
                        total += parseInt(individual);
                    }
                }
            }
        }

if ((total % 10) != 0) {
            total = (total - (total % 10) + 10) - total;
        } else {
            total = 0;
        }

if (isNumeric) {
            // La cédula debe contener al menos 10 dígitos
            if (ci.toString().length != 10)
                return false;

// El número de cédula no debe ser cero
            if (parseInt(ci, 10) == 0)
                return false;

// El total debe ser igual al último número de la cédula
            if (total != parseInt(individual))
                return false;

return true;
        }

// Si no es un número
        return false;
    }

// function formulario_registro() {
    //     //location.href ="/nuevo-registro";
    //     window.open("/nuevo-registro");
    // }

$(document).ready(function() {
        $('.ci').each(function() {
            var ci = $(this).text();
            if (!isValidCI(ci)) {
                $(this).addClass('invalid-ci');
            }
        });
        var parroquiaSelect = document.getElementById('parroquia');
        if (parroquiaSelect.value) {
            parroquiaSelect.dispatchEvent(new Event('change'));
        }
    });
</script>

</html>