@extends('plantilla.header')

@section('titulo')
   Buscar Persona
@stop

@section('js')
<script>
    
    $("#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')
{!!Form::open(['url' => route('indexp'), '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">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-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> Seleccionar</button>
                </div>
            </div>
        </div>

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