ajax_laravel

@extends('adminv.master') 
@section('title_page') Crear Usuarios @stop
@section('description_page') Gestion de usuario @stop

@section('content')

<form action="{{route('admin.usuario.store')}}" method="post" enctype="multipart/form-data" class="form-horizontal"  >
  <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token()}}" />
  

  <div class="col-md-8" > {{--Col--}}

    <div class="form-group">
      <label class="control-label col-sm-2" for="user">Nombre:</label>
      <div class="col-sm-10">
        <input type="textarea" class="form-control" name="name" placeholder="Nombre" required>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="lastname">Apellido:</label>
      <div class="col-sm-10">
        <input type="textarea" class="form-control" name="last_name" placeholder="Apellido" required>
      </div>
    </div>


    <div class="form-group">
      <label class="control-label col-sm-2" for="ci">CI:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="ci" placeholder="CI" >
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="birth">Fecha de nacimiento:</label>
      <div class="col-sm-10">
        <input type="date" class="form-control" name="birth" placeholder="09/05/2012" >
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="phone">Celular:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="phone" placeholder="Celular" >
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="mail">Correo:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" name="mail" placeholder="Correo" required>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="departament">Departamento: </label>
      <div class="col-sm-10">
        @include('adminv.templates.select',["name"=>"departament","element"=>$departament,"id_attr"=>"departament"])
      </div>
    </div>
    
    <div class="form-group">
      <label class="control-label col-sm-2" for="city">Ciudad:</label>
      <div class="col-sm-10">
        @include('adminv.templates.select',["name"=>"city","element"=>$city,"id_attr"=>"city"])
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-2" for="zone">Zona:</label>
      <div class="col-sm-10">
        @include('adminv.templates.select',["name"=>"zone","element"=>$zone,"id_attr"=>"zone"])
      </div>
    </div>


    <div class="form-group">
      <label class="control-label col-sm-2" for="type_house">Tipo de casa:</label>
      <div class="col-sm-10">
       @include('adminv.templates.select',["name"=>"house","element"=>$house])
     </div>
   </div>

   <div class="form-group">
    <label class="control-label col-sm-2" for="image">Imagen:*</label>
    <div class="col-sm-6">
      <input type="file" class="form-control" name="image" required>
    </div>
  </div>


 </div> {{--End Col--}}

 <div class="form-group">
  <div class="col-sm-offset-1 col-sm-10">
    <a type="submit" class="btn btn-primary" href="{{ URL::previous() }}">
      <span class="glyphicon glyphicon-arrow-left"></span>Volver        
    </a>
    <button type="submit" class="btn btn-success">
      <span class="glyphicon glyphicon-floppy-disk"></span>Guardar
    </button>
  </div>
</div>

</form>

@stop

@section('footer_script')
 <script type="text/javascript">

   $("#departament").on("change",function(){
    if($("#departament").val() == ""){
      $("#city").empty();
      $("#zone").empty();
      return ;
    }
    ajax_zone_city("city");

  });

   $("#city").on("change",function(){
    if($("#city").val() == ""){
      $("#zone").empty();
      return ;
    }
    ajax_zone_city("zone");

  });   


   function ajax_zone_city(option){
    var url = "";
    if(option == "city"){
      url = "/admin/citys/"+$("#departament").val();
    }else if(option == "zone"){
      url = "/admin/zones/"+$("#city").val();
    }else alert("Error");
    
    $.ajax({
      url: url,
      type:"GET",
      beforeSend: function (xhr) {
        var token = $('meta[name="csrf_token"]').attr('content');
        if (token) {
          return xhr.setRequestHeader('X-CSRF-TOKEN', token);
        }
      },

      success:function(data){
        $("#"+option).empty();
        for(var  i=0; i< data.length;i++){
         $("#"+option).append($('<option>', { 
          value: data[i].id,
          text : data[i].name 
        }));
       }
       if(data.length == 0){
         $("#"+option).append($('<option>', { 
          value: "",
          text : "Ningun elemento encontrado" 
        }));
       }

     },error:function(data){ 
      alert("Error!!!!");
    }
  });
  }
</script>
@stop