EVOLUTION-MANAGER

Edit File: padron-consultas.blade.php

@extends('layouts.master')

@section('style')
<script src="{{ asset('padron-electoral/js/jquery.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

body {
        font-family: sans-serif !important;
    }

.lato-regular {
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

.lato-bold {
        font-family: "Lato", sans-serif;
        font-weight: 700;
        font-style: normal;
    }

.contenedor-consulta-padron {
        position: relative;
        margin-top: 150px;
        margin-bottom: 150px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.fondo-color {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 1000px;
        padding: 25px;
        background-color: #00447D;
        color: white;
        margin-bottom: 25px;
        border-radius: 2mm;
    }

.fondo-color h2 {
        color: white;
    }

.fondo-color p {
        margin-bottom: 0px;
    }

.fondo-color img.animacion-suave {
        width: 250px;
    }

.fondo-color h2,
    .fondo-color p {
        transition: transform 0.5s ease;
    }

@media (min-width: 768px) {
        /* .fondo-color img.animacion-suave {
                transition: transform 0.5s ease;
            }

.fondo-color img.animacion-suave:hover {
                transform: rotate(5deg);
            } */

.fondo-color h2:hover,
        .fondo-color p:hover {
            transform: scale(1.2);
            /* Aumenta el tamaño al 110% */
        }
    }

.linea {
        width: 100%;
        height: 2px;
        background-color: white;
        margin-top: 10px;
        margin-bottom: 25px;
    }

.has-search .form-control {
        padding-left: 2.375rem;
    }

.has-search .form-control-feedback {
        position: absolute;
        z-index: 2;
        display: block;
        width: 2.375rem;
        height: 2.375rem;
        line-height: 2.375rem;
        text-align: center;
        pointer-events: none;
        color: #aaa;
    }

#results {
        width: 95%;
        max-width: 1200px;
        overflow-x: auto;
        margin: auto;
        margin-top: 25px;
    }

.modal-de-carga {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.5);
    }

.modal-content-de-carga {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }

.spinner-de-carga {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-left-color: #000;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        margin: 20px auto;
    }

@keyframes spin {
        0% {
            transform: rotate(0deg);
        }

100% {
            transform: rotate(360deg);
        }
    }
</style>

@endsection

@section('contenido')

@if (session('status'))
<script>
    mensaje_alerta("success", "{{ session('status') }}", "Creación exitosa");
</script>

@else

@endif

<div class="contenedor-consulta-padron">
    <div class="fondo-color">
        <img src="{{ asset('public/padron-electoral/imagenes/Sucre-02.png') }}" class="animacion-suave" style="width: 250px;" alt="Sucre-02">
        <div class="linea"></div>
        <h2 class="lato-bold">¡CONSULTA SI ESTAS EMPADRONADO!</h2>
        <P style="text-align: center; font-size: 20px;" class="lato-regular">Verifica que tu información sea la correcta,</br> si no es asi ¡regístrate!</P>
    </div>
    <nav class="navbar navbar-light bg-light">
        <form id="search-form" class="form-inline">
            @csrf
            <div class="form-group">
                <label class="control-label col-sm-4 lato-bold" for="cedula">Número de Cédula</label>
                <div class="col-sm-12">
                    <input class="form-control mr-sm-3" type="search" name="cedula" id="cedula" placeholder="**********" aria-label="Search">
                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
                </div>
            </div>
        </form>
    </nav>
    <id id="results"></id>
</div>

<div id="loadingModal" class="modal-de-carga">
    <div class="modal-content-de-carga">
        <div class="spinner-de-carga"></div>
        <p>Por favor, espere...</p>
    </div>
</div>

var cedula = $('input[name="cedula"]').val();

if (validateInput(cedula)) {

var procesodecargar = document.getElementById('loadingModal');
            procesodecargar.style.display = 'block';

$.ajax({
                url: 'post-consulta',
                type: 'POST',
                data: {
                    cedula: cedula
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',
                success: function(data) {
                    procesodecargar.style.display = 'none';
                    var results = $('#results');
                    results.empty();

if (data.datos.length > 0) {
                        mensaje_alerta("info", "Busqueda finalizada", "Se encontraron resultados");
                        var table = '<div class="table-responsive">';
                        table += '<table class="table"><thead class="table-dark"><tr><th>Nombres Completos</th><th>Cédula</th><th>Cantón</th><th>Parroquia</th><th>Barrio o Comunidad</th></tr></thead><tbody>';
                        $.each(data.datos, function(index, item) {
                            table += '<tr><td>' + item.nombres_apellidos + '</td><td>' + item.cedula + '</td><td>' + item.canton + '</td><td>' + item.parroquia + '</td><td>' + item.barrio + '</td></tr>';
                        });
                        table += '</tbody></table>';
                        table += '</div>';
                        if (data.registrar == "SI") {
                            table += '<div class="alert alert-success" role="alert">Verifica que lo información sea correcta, si no es así te invitamos a que te registres dando click en el boton Registrate</div>';
                            table += `
                                <div class="list-group" style="width: max-content">
                                    <a href="#" class="list-group-item list-group-item-action active" id="enlaceRegistro" onclick="abrirConParametro('{{ url('/nuevo-registro') }}')">Registrate</a>
                                </div>`;
                        }
                        results.append(table);
                    } else {
                        mensaje_alerta("info", "Busqueda finalizada", "No se encontraron resultados");
                        var ivitacion_registro = '<div class="alert alert-dark" role="alert">No se encontraron resultados, te invitamos a que te registres dando click en el boton Registrate</div>';
                        ivitacion_registro += `
                            <div class="list-group" style="width: max-content">
                                <a href="#" class="list-group-item list-group-item-action active" id="enlaceRegistro" onclick="abrirConParametro('{{ url('/nuevo-registro') }}')">Registrate</a>
                            </div>`;
                        results.append(ivitacion_registro);
                    }
                },
                error: function(xhr, status, error) {
                    procesodecargar.style.display = 'none';
                    var results = $('#results');
                    results.empty();

if (xhr.status === 422 || xhr.status === 419) { // Error de validación
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            var errorList = '<ul>';
                            $.each(errors, function(key, value) {
                                errorList += '<li>' + value + '</li>';
                            });
                            errorList += '</ul>';
                            results.append('<div class="alert alert-danger">' + errorList + '</div>');
                        }
                        if (xhr.status === 419) {
                            location.reload();
                        }
                    } else { // Otros errores
                        results.append('<div class="alert alert-danger">Ocurrió un error. Intente nuevamente.</div>');
                    }
                }
            });
        } else {
            var results = $('#results');
            results.empty();
            results.append('<div class="alert alert-danger">Ocurrió un error. Ingrese su número de cédula.</div>');
            mensaje_alerta("warning", "Datos ingresados invalidos", "Asegurese de ingresar un número de cedula válido");
        }
    });

$("#enlaceRegistro").click(function(e) {
        e.preventDefault();
    });

function abrirConParametro(ruta) {
        var inputValue = document.getElementById('cedula').value;
        if (inputValue) {
            var url = ruta + '?campo=' + encodeURIComponent(inputValue);
            // console.log(url);
            window.location = url;
            return false; // Previene el comportamiento por defecto del enlace
        }
    }

function validateInput(input) {
        var inputStr = input.toString();

if (!isNaN(input) && inputStr.length <= 10 && isValidCI(inputStr)) {
            return true;
        } else {
            return false;
        }
    }

function mensaje_informativo() {
        Swal.fire({
            title: "¿Estas empadronado?",
            text: "Consulta si estas empadronado y si es asi verifica que la información sea correcta, si la información no es correcta regístrate",
            icon: "info",
            footer: "<h4 style='color:red'>A PARTIR DE 16 AÑOS EN ADELANTE TE INVITAMOS A REGISTRARTE</h4>"
        });
    }

//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;
    }
</script>

@endsection