@extends('plantilla.header')

@section('titulo')
   Buscar Persona
@stop

@section('js')
<script type="text/javascript">
    function bb(){
        cerrar('modal-cne');
        var request = new XMLHttpRequest();
        var na = document.getElementById("nacionalidad").value;
        var ce = $("#cedula").val();

        if (na == "" || ce == "") {
            
            $("#id_mensaje").empty();
            $("#id_mensaje").append('<h3 class="h6 mb-4">Debes de colocar la nacionalidad y la cédula</h3>');

            $("#modal-mensaje").modal({
                show: false,
                keyboard: false,
                backdrop: 'static'
            });
            $("#modal-mensaje").modal("show");
        } else {
            $("#modal-load").modal({
                show: false,
                keyboard: false,
                backdrop: 'static'
            });

            var zon = "{{$ZONA}}";

            $("#modal-load").modal("show");

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });


            $.ajax({
            type: "POST",
            url: "{{url('/cne')}}",
            data:  {_token:"{{ csrf_token() }}",n1:na, c1:ce, zo:zon},
            cache:false,
                success: function(data){
                    const obj = JSON.parse(data);
                    console.log(obj);

                    $("#id_pago").empty();

                    var tod = 0;
                    
                    for (let index = 0; index < obj.tarifa1.length; index++) {
                        $("#id_pago").append('<tr><td><div class="form-check"><input class="form-check-input pagos marcar'+index+'" type="checkbox" value="'+obj.tarifa1[index].id+'" name="pagos[]" id="pagos[]"><label class="form-check-label" for="pagos[]">'+trimestre(obj.tarifa1[index].trimestre)+' TRIMESTRE Bs. '+number_format(obj.tarifa1[index].tarifa, 2)+'</label></div></td><td><div class="form-check"><input class="form-check-input bloqueo'+index+'" type="checkbox" value="" name="esta[]" id="esta[]" hidden> <input class="form-check-input bloqueo2'+index+'" type="checkbox" value="" name="esta2[]" id="esta2[]" hidden> </div></td><td class="estatus'+index+'"></td></tr>');

                        for (let index1 = 0; index1 < obj.lista.length; index1++) {
                            if (obj.tarifa1[index].id == obj.lista[index1].id_pagos || obj.tarifa1[index].trimestre == obj.lista[index1].trimestre) {
                                $(".marcar"+index).attr('disabled', 'disabled');
                                $(".marcar"+index).attr('checked', 'checked');
                                tod = 1;

                                $(".bloqueo"+index).val(obj.lista[index1].pagos);
                                $(".bloqueo2"+index).val(obj.lista[index1].pagos);

                                if (obj.lista[index1].estatus == 'AC') {
                                    $(".estatus"+index).empty();
                                    $(".estatus"+index).append('<i style="color: #03cd00;" class="fa-solid fa-check"></i>');

                                    $(".bloqueo"+index).removeAttr('hidden');
                                    

                                    //$(".bloqueo").attr('required', 'required');
                                } else {
                                    $(".estatus"+index).empty();
                                    $(".estatus"+index).append('<i style="color: #cd0000;" class="fa-solid fa-xmark"></i> Bloqueado');
                                    $(".bloqueo2"+index).removeAttr('hidden');
                                }
                            }
                        }
                    }

                    if (tod == 1) {
                        $("#all").attr('disabled', 'disabled');
                    }

                    if(obj.error == "NO"){
                        //OK
                        var zon = $("#zon").val();
                        var com = parseInt($("#com").val());

                        if (obj.pagos == "SI") {
                            if (zon === obj.zon && com === obj.com) {
                                $("#tcedu").val(obj.cedula);
                                $("#tnombre").val(obj.nombre);
                                $("#ttelefono").val(obj.telefono);
                                $("#tcorreo").val(obj.correo);

                                $("#id_jefe_fa").val(obj.ids);

                                $("#ncasa").val(obj.calle);
                                $("#direccion").val(obj.direccion);


                                $("#tnombre").attr('readonly', 'readonly');

                                if (obj.pro == "NO") {
                                    document.getElementById("espropietario").checked = true;

                                    var cc = obj.pcedula.split('-');

                                    document.getElementById("pnacionalidad").value = cc[0];

                                    $("#pcedula").val(cc[1]);

                                    $("#pnombre").val(obj.pnombre);
                                    $("#ptelefono").val(obj.ptelefono);

                                    $("#propietario").removeAttr('hidden');

                                    $("#pnacionalidad").attr('required', 'required');
                                    $("#pcedula").attr('required', 'required');
                                    $("#pnombre").attr('required', 'required');

                                    $("#selectpro").val("NO");
                                }

                                $("#b__").attr('hidden', 'hidden');
                                $("#b2__").removeAttr('hidden');
                                setTimeout(mensaje_load,500);
                            } else {
                                setTimeout(mensaje_load,500);

                                $("#id_mensaje").empty();
                                $("#id_mensaje").append('<h3 class="h6 mb-4">El número de cédula '+obj.cedula+' se encuentra registrada en el sector '+obj.zon+', comunidad '+obj.comunidad+'.</h3>');

                                $("#modal-mensaje").modal({
                                    show: false,
                                    keyboard: false,
                                    backdrop: 'static'
                                });

                                $("#modal-mensaje").modal("show");
                            }
                        } else {
                            $("#tcedu").val(obj.cedula);
                            $("#tnombre").val(obj.nombre);
                            $("#ttelefono").val(obj.telefono);
                            $("#tcorreo").val(obj.correo);

                            $("#id_jefe_fa").val(obj.ids);

                            $("#ncasa").val(obj.calle);
                            $("#direccion").val(obj.direccion);


                            $("#tnombre").attr('readonly', 'readonly');

                            $("#b__").attr('hidden', 'hidden');
                            $("#b2__").removeAttr('hidden');
                            setTimeout(mensaje_load,500);
                        }  
                    }else{
                        //FALLO
                        $("#tcedu").val(obj.cedula);
                        $("#tnombre").val(obj.nombre);
                        $("#ttelefono").val(obj.telefono);
                        $("#id_jefe_fa").val(obj.ids);
                        $("#tcorreo").val(obj.correo);

                        $("#b__").attr('hidden', 'hidden');
                        $("#b2__").removeAttr('hidden');
                        $("#tnombre").removeAttr('readonly');

                        setTimeout(mensaje_load,500);
                        
                        //REINTENTAR CNE
                        $("#id_cne").empty();
                        $("#id_cne").append('<h3 class="h4 mb-4">Error al conectar con la plataforma CNE. </br></br>¿Desea intentar de nuevo?</br></h3>');

                        $("#cne1").removeAttr('hidden');
                        $("#cne2").attr('hidden', 'hidden');

                        $("#modal-cne").modal({
                            show: false,
                            keyboard: false,
                            backdrop: 'static'
                        });

                        $("#modal-cne").modal("show");
                    }     
                }
            });
        }

    }

    function bb2(){
        cerrar('modal-cne');

        var request = new XMLHttpRequest();
        var na = document.getElementById("pnacionalidad").value;
        var ce = $("#pcedula").val();

        if (na == "" || ce == "") {
            
            $("#id_mensaje").empty();
            $("#id_mensaje").append('<h3 class="h6 mb-4">Debes de colocar la nacionalidad y la cédula</h3>');

            $("#modal-mensaje").modal({
                show: false,
                keyboard: false,
                backdrop: 'static'
            });
            $("#modal-mensaje").modal("show");
        } else {

            $("#modal-load").modal({
                show: false,
                keyboard: false,
                backdrop: 'static'
            });

            $("#modal-load").modal("show");

            $.ajax({
            type: "POST",
            url: "{{url('/cne')}}",
            data:  {_token:"{{ csrf_token() }}",n1:na, c1:ce},
            cache:false,
                success: function(data){
                    const obj = JSON.parse(data);
                    //console.log(obj);
                    if(obj.error == "NO"){
                        //OK
                        $("#pnombre").val(obj.nombre);
                        $("#ptelefono").val(obj.telefono);

                        $("#pnombre").attr('readonly', 'readonly');

                        setTimeout(mensaje_load,500);
                    }else{
                        //FALLO
                        $("#pnombre").val(obj.nombre);
                        $("#ptelefono").val(obj.telefono);

                        $("#pnombre").removeAttr('readonly');

                        setTimeout(mensaje_load,500);

                        //REINTENTAR CNE
                        $("#id_cne").empty();
                        $("#id_cne").append('<h3 class="h4 mb-4">Error al conectar con la plataforma CNE. </br></br>¿Desea intentar de nuevo?</br></h3>');

                        $("#cne2").removeAttr('hidden');
                        $("#cne1").attr('hidden', 'hidden');

                        $("#modal-cne").modal({
                            show: false,
                            keyboard: false,
                            backdrop: 'static'
                        });

                        $("#modal-cne").modal("show");
                    }     
                }
            });
        }
    }


  $("#espropietario").change(function(event){
    if ($('#espropietario:checked').val() !== undefined)
    {
        //Checked pnacionalidad pcedula pnombre ptelefono
        //console.log("OK");
        $("#propietario").removeAttr('hidden');

        $("#pnacionalidad").attr('required', 'required');
        $("#pcedula").attr('required', 'required');
        $("#pnombre").attr('required', 'required');

        $("#selectpro").val("NO");
    }
    else
    {
        //Not checked
       // console.log("NOT OK");
        $("#propietario").attr('hidden', 'hidden');

        $("#pnacionalidad").removeAttr('required');
        $("#pcedula").removeAttr('required');
        $("#pnombre").removeAttr('required');

        $("#selectpro").val("SI");
    }
        
  });

    $("#all").click(function()
    {
        if($("#all").length == $("#all:checked").length) 
        {
            $(".pagos").attr("checked", "checked");
        } 
        else 
        {
            $(".pagos").removeAttr("checked");
        }
    });

</script>
@stop

@section('contenido')

<div class="row">
    <div class="col-12 col-xl-12">
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Zona: {{$ZONA}} - Comunidad: {{$COMUNIDAD}}</h3>
            <h3 class="h6 mb-4">Jefe de Comunidad: {{$JCO}} - Teléfono: {{$JTE}}</h3>
            <input type="hidden" name="com" id="com" value="{{$IDCO}}">
            <input type="hidden" name="zon" id="zon" value="{{$ZONA}}">
        </div>
    </div>
</div>

<div class="row" id="b__">
    <div class="col-12 col-xl-12">
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Buscar Persona</h3>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <div class="form-group">
                        <label for="city">Nacionalidad</label>
                        <select class="form-select mb-0" id="nacionalidad" name="nacionalidad" required>
                            <option value="" selected="selected">SELECCIONE</option>
                            <option value="V">V</option>
                            <option value="E">E</option>
                            <option value="J">J</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                    <label for="city">Cédula</label>
                        <input class="form-control" type="text" name="cedula" id="cedula" value="" onkeypress="return solonumero(event)" autocomplete="off" required maxlength="9"> 
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-6 mb-3">
                    <div class="form-group">
                        
                    </div>
                </div>
                <div class="col-sm-6" style="text-align: right;">
                    <div class="form-group">
                        <button class="btn btn-primary" onclick="bb()"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" id="b2__" hidden="hidden">
    {!!Form::open(['url' => route('reg__persona'), 'method' => 'POST', 'class' => 'login-form'])!!}
    <input name="urls" id="urls" value="{{$ZONA}}-{{$IDCO}}" type="hidden">

    <div class="col-12 col-xl-12">
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Datos Personales del Habitante</h3>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <div class="form-group">
                        <label for="city">Cédula</label>
                        <input name="tcedu" id="tcedu" type="text" class="form-control" required readonly>

                        <input name="id_jefe_fa" id="id_jefe_fa" type="hidden" value="" class="form-control" readonly>
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="form-group">
                        <br>
                        <a class="btn btn-defaulf" onclick="bb()"><i class="fa-solid fa-arrows-rotate"></i></a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Nombre y Apellido</label>
                        <input name="tnombre" id="tnombre" type="text" class="form-control" required readonly>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Teléfono</label>
                        <input name="ttelefono" id="ttelefono" type="text" class="form-control">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Correo</label>
                        <input name="tcorreo" id="tcorreo" type="email" class="form-control">
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">¿Usted es el Propietario?</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" value="SI" type="checkbox" role="switch" id="espropietario" name="espropietario">
                            <label class="form-check-label" for="espropietario">SI/NO</label>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-12 col-xl-12" id="propietario" hidden>
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Datos Personales del Propietario</h3>
            <div class="row">
                <div class="col-md-3 mb-3">
                    <div class="form-group">
                        <label for="city">Nacionalidad</label>
                        <select class="form-select mb-0" id="pnacionalidad" name="pnacionalidad">
                            <option value="" selected="selected">SELECCIONE</option>
                            <option value="V">V</option>
                            <option value="E">E</option>
                            <option value="J">J</option>
                        </select>

                        <input name="id_prop" id="id_prop" type="hidden" value="" class="form-control" readonly>
                        <input name="selectpro" id="selectpro" type="hidden" value="SI" class="form-control" readonly>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="form-group">
                    <label for="city">Cédula</label>
                        <input class="form-control" type="text" onkeypress="return solonumero(event)" name="pcedula" id="pcedula" value="" autocomplete="off" maxlength="9"> 
                    </div>
                </div>
                <div class="col-md-3 mb-3">
                    <div class="form-group">
                        <br>
                        <a class="btn btn-primary" onclick="bb2()"><i class="fa fa-search" aria-hidden="true"></i> Buscar</a>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Nombre y Apellido</label>
                        <input name="pnombre" id="pnombre" type="text" class="form-control">
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Teléfono</label>
                        <input name="ptelefono" id="ptelefono" type="text" class="form-control">
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-12 col-xl-12">
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Dirección de Habitación</h3>
            

            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">N° Casa</label>
                        <input name="ncasa" id="ncasa" type="text" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="form-group">
                        <label for="city">Dirección</label>
                        <textarea class="form-control" name="direccion" id="direccion" required></textarea>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-12 col-xl-12">
        <div class="card card-body bg-white border-light shadow-sm mb-4">
            <h3 class="h5 mb-4">Información de Pago</h3>
            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="form-group">
                        @if (!empty($TA))
                            <div class="col-md-12 mb-3">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th scope="col">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="all" name="all" id="all">
                                                    <label class="form-check-label" for="all">TODO</label>
                                                </div>
                                            </th>
                                          <th scope="col">Bloquear/Liberar</th>
                                          <th scope="col">Estatus</th>
                                        </tr>
                                      </thead>
                                    <tbody id="id_pago">
                                        
                                    </tbody>
                                </table>
                            </div>
                            
                        @else
                            <div class="col-md-12 mb-3">
                                <h3 class="h6 mb-4">Sin Registro</h3>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-12 col-xl-12">
            <div class="card card-body bg-white border-light shadow-sm mb-4">
                <div class="row">
                    <div class="col-sm-6 mb-3">
                        <div class="form-group">
                        <a href="{{route('indexp')}}" class="btn btn-primary"><i class="fa fa-reply"></i> Cancelar</a>
                        </div>
                    </div>
                    <div class="col-sm-6" style="text-align: right;">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i> Guardar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {!! Form::close() !!}
</div>

<div class="modal fade" id="modal-lista" tabindex="-1" role="dialog" aria-labelledby="modal-load" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 col-xl-12">
                        <div class="card card-body bg-white border-light shadow-sm mb-4">
                            <div class="row">
                                <div class="col-md-12 mb-3" align="center" id="id_cne">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <a onclick="bb()" id="cne1" class="btn btn-success" hidden>Si (Reintentar)</a>
                <a onclick="bb2()" id="cne2" class="btn btn-success" hidden>Si (Reintentar)</a>

                <a onclick="cerrar('modal-cne')" class="btn btn-danger">No (Manual)</a>
            </div>
        </div>
    </div>
</div>

<?php
    function TRIMESTRE($v){
        $t = array(
            '1' => 'I',
            '2' => 'II',
            '3' => 'III',
            '4' => 'IV',
            '5' => 'V',
            '6' => 'VI',
            '7' => 'VII',
            '8' => 'VIII',
            '9' => 'IX',
            '10' => 'X',
        );

        return $t[$v];
    }
?>

@stop