@extends('plantilla.header')

@section('titulo')
Cambiar Datos
@stop

@section('js')
    <script>
        function edit(va){
            
            $("#modal-load").modal({
                show: false,
                keyboard: false,
                backdrop: 'static'
            });

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

            var request = new XMLHttpRequest();

            request.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {

                    var myObj = JSON.parse(this.responseText); 
                    console.log(myObj);

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

                    $('#cedulas').val(myObj.datos.cedula);
                    $('#nombres').val(myObj.datos.nombre);

                    $('#ncasa').val(myObj.datos.calle);
                    $('#direccion').val(myObj.datos.direccion);

                    $('#ijf').val(myObj.datos.jefe_id);
                    $('#ip').val(myObj.datos.id);

                    document.getElementById("szona").value = myObj.datos.zona;

                    $("#scomunidad").empty();
                    $("#scomunidad").append('<option value="" selected="selected">SELECCIONE</option>');

                    for (var i = 0; i < myObj.comunidad.length; i++) {
                        $("#scomunidad").append('<option value="'+myObj.comunidad[i].id+'">'+myObj.comunidad[i].nombre+'</option>');
                    }

                    document.getElementById("scomunidad").value = myObj.datos.id_jefe_com;

                    //cerrar('modal-load');
                    setTimeout(mensaje_load,500);

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

            request.open('GET', "{{url('/buscarjf')}}/"+va);
            request.send();

            /**/

        }

        $("#szona").change(function(event){
                $("#scomunidad").empty();
                $("#scomunidad").append('<option value="" selected="selected">ESPERE UN MOMENTO</option>');
                var request = new XMLHttpRequest();

                var p = '/'+event.target.value;

                request.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {

                        var myObj = JSON.parse(this.responseText);

                        $("#scomunidad").empty();
                        $("#scomunidad").append('<option value="" selected="selected">SELECCIONE</option>');

                        for (var i = 0; i < myObj.datos.length; i++) {
                            $("#scomunidad").append('<option value="'+myObj.datos[i].id+'">'+myObj.datos[i].nombre+'</option>');
                        }

                    }
                };

                request.open('GET', "{{url('/bzona')}}"+p);
                request.send();
        });
    </script>
@stop

@section('contenido')
@if (!empty($info))
<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 {{$info[0]->nombre}}</h3>
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="form-group">
                    <table class="table table-hover">
                        <thead>
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">Cédula</th>
                            <th scope="col">Nombre</th>
                            <th scope="col">Zona</th>
                            <th scope="col">Comunidad</th>
                            <th scope="col">Acción</th>
                          </tr>
                        </thead>
                        <tbody>
                            @foreach ($info as $n => $p)
                                <tr>
                                    <th scope="row">{{$n+1}}</th>
                                    <td>{{$p->cedula}}</td>
                                    <td>{{$p->nombre}}</td>
                                    <td>{{$p->zona}}</td>

                                    <td>{{$p->comunidad}}</td>
                                    <td><button type="submit" onclick="edit({{$p->jefe_id}})" class="btn btn-info btn-sm"><i class="fa-solid fa-pen-to-square"></i></button></td>
                                </tr>
                            @endforeach
                        </tbody>
                      </table>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="modal-info" tabindex="-1" role="dialog" aria-labelledby="modal-load" aria-hidden="true">
    <div class="modal-dialog" role="document">
        {!!Form::open(['url' => route('cambiop'), 'method' => 'POST', 'class' => 'login-form'])!!}
        <input type="hidden" name="ijf" id="ijf" autocomplete="off">
        <input type="hidden" name="ip" id="ip" autocomplete="off">

        <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">
                            <h3 class="h5 mb-4">Datos a Editar</h3>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="city">Cédula</label>
                                        <input class="form-control" name="cedulas" id="cedulas" autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="city">Nombre y Apellido</label>
                                        <input class="form-control" name="nombres" id="nombres" autocomplete="off" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <div class="form-group">
                                        
                                    </div>
                                </div>
                            </div>
                            <h3 class="h5 mb-4">Comunidad</h3>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="city">Zona</label>
                                        <select class="form-select" name="szona" id="szona" required>
                                            <option value="" selected>SELECCIONE</option>
                                            <option value="A">ZONA A</option>
                                            <option value="B">ZONA B</option>
                                            <option value="C">ZONA C</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="form-group">
                                        <label for="city">Comunidad</label>
                                        <select class="form-select" name="scomunidad" id="scomunidad" required>
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="city">N° Casa</label>
                                        <input class="form-control" name="ncasa" id="ncasa" autocomplete="off" 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>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Guardar</button>

                <a onclick="cerrar('modal-info')" class="btn btn-danger">Cerrar</a>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</div>

@else  
    {!!Form::open(['url' => route('rep'), 'method' => 'POST', 'class' => 'login-form'])!!}
    <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">Cambiar Datos</h3>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Nacionalidad</label>
                        <select class="form-select" name="nacionalidad" id="nacionalidad" required>
                            <option value="" selected>SELECCIONE</option>
                            <option value="V">V</option>
                            <option value="E">E</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="form-group">
                        <label for="city">Cédula</label>
                        <input class="form-control" name="cedula" id="cedula" onkeypress="return solonumero(event)" autocomplete="off" maxlength="9" minlength="6" required>
                    </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 type="submit" class="btn btn-primary"><i class="fa-solid fa-check"></i> Consultar</button>
                    </div>
                </div>
            </div>

            

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