EVOLUTION-MANAGER

Edit File: padron-nuevosregistros.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>

<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>

.contact {
        padding: 4%;
    }

.col-md-3 {
        /* background: #ff9b00; */
        color: #ffff;
        background: #005393;
        padding: 10px 20px;
        border-top-left-radius: 0.5rem;
        border-bottom-left-radius: 0.5rem;
    }

.contact-info {
        margin-top: 10%;
        text-align: center;
    }

.contact-info img {
        margin-bottom: 15%;
    }

.contact-info h2 {
        margin-bottom: 10%;
        color: white;
    }

.contact-info h4 {
        color: white;
    }

.mr-auto,
    .mx-auto {
        margin-right: inherit !important;
    }

.col-md-9 {
        /* background: #fff; */
        /* background-color: #1d67a3; */
        background-color: #158bba;
        padding: 3%;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
    }

.contact-form label {
        font-weight: 600;
    }

.btn-cancelar {
        background: #5C636A !important;
    }

.contact-form button {
        background: #005393;
        color: #fff;
        font-weight: 600;
        width: max-content;
    }

.contact-form button:focus {
        box-shadow: none;
        color: #fff;
    }

.select2-container--default .select2-selection--single {
        height: 38px;
        padding: 5px;
    }

.select2-selection__rendered {
        line-height: 28px !important;
    }

.select2-container .select2-selection--single .select2-selection__rendered {
        display: block;
        padding-left: 10px;
        padding-right: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.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')

<div class="container contact">
    <div class="row">
        <div class="col-md-3">
            <div class="contact-info">
                <img src="{{ asset('public/padron-electoral/imagenes/sucrense-corazon.png')}}" alt="sucrense-corazon" style="width: 100%;">
                <h2>Registro</h2>
                <h4>¡Ingrese su información correctamente!</h4>
            </div>
        </div>
        <div class="col-md-9">
            <div class="contact-form">
                <form action="nuevo-registro" method="POST" id="envio_formulario" style="color: #ffff;">
                    @csrf
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="nombres_completos">Nombres completos</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="nombres_completos" required placeholder="Ingrese sus nombres" name="nombres_completos" value="{{ old('nombres_completos') }}">
                            @if($errors->has('nombres_completos'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('nombres_completos')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="apellidos_completos">Apellidos completos</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="apellidos_completos" required placeholder="Ingrese sus nombres" name="apellidos_completos" value="{{ old('apellidos_completos') }}">
                            @if($errors->has('apellidos_completos'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('apellidos_completos')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="cedula">Cédula</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="cedula" required placeholder="Ingrese sus cédula" name="cedula" value="{{ old('cedula', $campo) }}">
                            @if($errors->has('cedula'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('cedula')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="fecha_nacimiento">Fecha de Nacimiento</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="fecha_nacimiento" required placeholder="dd/mm/aaaa" name="fecha_nacimiento" value="{{ old('fecha_nacimiento', $campo) }}">
                            @if($errors->has('fecha_nacimiento'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('fecha_nacimiento')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-5" for="fecha_expiracion">Fecha de Expiracion C. I.</label>
                        <div class="col-sm-10">
                            <input type="date" class="form-control" id="fecha_expiracion" required placeholder="dd/mm/aaaa" name="fecha_expiracion" value="{{ old('fecha_expiracion', $campo) }}">
                            @if($errors->has('fecha_expiracion'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('fecha_expiracion')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="canton">Cantón</label>
                        <div class="col-sm-10">
                            <select required class="form-control" id="canton" name="canton">
                                <option selected>Sucre</option>
                            </select>
                            @if($errors->has('canton'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('canton')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="parroquia">Parroquia</label>
                        <div class="col-sm-10">
                            <select required class="form-control" id="parroquia" name="parroquia">
                                <option selected disabled>Seleccione</option>
                                @foreach ($parroquias as $dato)
                                <option>{{$dato->nombre}}</option>
                                @endforeach
                            </select>
                            @if($errors->has('parroquia'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('parroquia')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-4" for="barrio">Barrio o Comunidad</label>
                        <div class="col-sm-10">
                            <select class="form-control" id="barrio" name="barrio">
                                <option selected disabled>Seleccione</option>
                            </select>
                            @if($errors->has('barrio'))
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first('barrio')  }}
                            </div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Registrarse</button>
                            <div class="d-inline-block mr-5"></div>
                            <button type="button" class="btn btn-secondary btn-cancelar">
                                
                                <a onclick="cancelar_registro()" style="color: inherit; text-decoration: none;">Cancelar</a>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</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>

$(document).ready(function() {
        $('#barrio').select2({
            width: '100%'
        });
    });
</script>
@if (session('status'))
<script>
    mensaje_alerta("success", "{{ session('status') }}", "Creación exitosa");
</script>
@endif
@if ($errors->has('error'))
<script>
    mensaje_alerta("error", "Error", "{{ $errors->first('message') }}");
</script>
@endif
@if($errors->has('barrio') || $errors->has('parroquia') || $errors->has('canton') || $errors->has('cedula') || $errors->has('nombres_completos') || $errors->has('apellidos_completos'))
<script>
    mensaje_alerta("error", "Error en la validación", "Revise que los datos que esta enviando sean correctos, recuerde que solo se puede registrar una vez");
</script>
@endif
<script>
    document.getElementById('nombres_completos').addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });

document.getElementById('apellidos_completos').addEventListener('input', function() {
        this.value = this.value.toUpperCase();
    });

$("#nombres_completos").on('input', function(event) {
        var regex = new RegExp("^[a-zA-Z ñÑ]+$");
        var input = $(this).val();
        if (!regex.test(input)) {
            $(this).val(input.replace(/[^a-zA-Z ñÑ]/g, ''));
        }
    });

$("#apellidos_completos").on('input', function(event) {
        var regex = new RegExp("^[a-zA-Z ñÑ]+$");
        var input = $(this).val();
        if (!regex.test(input)) {
            $(this).val(input.replace(/[^a-zA-Z ñÑ]/g, ''));
        }
    });

$('#parroquia').change(function() {
        var selectedId = $(this).val();
        if (selectedId) {
            var procesodecargar = document.getElementById('loadingModal');
            procesodecargar.style.display = 'block';
            $.ajax({
                url: 'get-options/' + selectedId,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    procesodecargar.style.display = 'none';
                    $('#barrio').empty();
                    $('#barrio').append('<option selected disabled>Seleccione</option>');
                    $.each(data, function(key, value) {
                        $('#barrio').append('<option value="' + value + '">' + value + '</option>');
                    });
                }
            });
        } else {
            $('#barrio').empty();
            $('#barrio').append('<option value="">Seleccione</option>');
        }
    });

Swal.fire({
                    title: "Verifique que su información sea la correcta",
                    html: `
                            <p><strong>Nombres completos:</strong> ${nombres}</p>
                            <p><strong>Apellidos completos:</strong> ${apellidos}</p>
                            <p><strong>Cédula:</strong> ${cedula}</p>
                            <p><strong>Fecha nacimiento:</strong> ${fechaFormateada}</p>
                            <p><strong>Fecha expiracion C. I.:</strong> ${expiracionFormateada}</p>
                            <p><strong>Cantón:</strong> ${canton}</p>
                            <p><strong>Parroquia:</strong> ${parroquia}</p>
                            <p><strong>Barrio o Comunidad:</strong> ${barrio}</p>
                            <p style="color: red">¡Una vez registrada la información no podra volver a registrarse!</p>
                        `,
                    // showDenyButton: true,
                    showCancelButton: true,
                    confirmButtonText: "Guardar",
                    denyButtonText: `No, Guardar`
                }).then((result) => {
                    if (result.isConfirmed) {
                        var procesodecargar = document.getElementById('loadingModal');
                        procesodecargar.style.display = 'block';
                        this.submit();
                    } else if (result.isDenied) {
                        Swal.fire("No se ha guardado ninguna información", "", "info");
                    }
                });

}
        } else
            mensaje_alerta("error", "Número de cedula incorrecto", "Por favor ingrese un número de cédula válido");
    });

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