@extends('layouts.adminmonevpkam')

@section('content')
<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        KELURAHAN<br>
        <small>data kelurahan yang masuk dalam pengelolaan anda</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="{{ url('home') }}"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="{{ url('/admin/kelurahans') }}">Data Kelurahan</a></li>
        <li class="active">Tambah Data Kelurahan</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

      <!-- /.row (main row) -->
      <div class='row'>
        
        <div class='col-md-12'>
            <!-- Box -->
            <div class="box box-primary" >
                <div class="box-header with-border">
                    <h3 class="box-title">Tambah Data Kelurahan</h3>
                </div>
                @include('layouts._flash')
                {!! Form::open(['url' => route('kelurahans.store'),'method' =>'post','class'=>'form-horizontal'])!!}
                <div class="box-body">
                    @include('kelurahans._form')
                </div><!-- /.box-body -->
                <div class="box-footer">
                    {{ Form::hidden('created_by', Auth::user()->id) }}
                    {!! Form::submit('Simpan', ['class'=>'btn btn-primary']) !!}
                </div><!-- /.box-footer-->
                {!! Form::close() !!}
            </div><!-- /.box -->
        </div>
      </div><!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
@endsection

@section('scripts')
    <script type="text/javascript" src="{{ asset('js/monevpkam.js') }}"></script>
    <script>
        $('#idprovinsi').on('change', function(e) {
            var idprov = e.target.value;
            var url = "{{route('wilayah.provinsi')}}"+"?idprovinsi=" + idprov;
             //ajax
             $.get(url, function(data) {
                 //success data
                 $('#idkabupaten').empty();
                 $('#idkecamatan').empty();
                 $('#idkelurahan').empty();
                 
                 $('#idkabupaten').append('<option value>Pilih Kabupaten/Kota</option>');
                 $('#idkecamatan').append('<option value>Pilih Kecamatan</option>');
                 $('#idkelurahan').append('<option value>Pilih Kelurahan</option>');

                 $.each(data, function(index, kabupatenObj) {
                     $('#idkabupaten').append('<option value='+ kabupatenObj.idkabupaten + '>'
                     + kabupatenObj.namakabupaten + '</option>');
                 });

                 $('#idkabupaten').select('refresh',true);
             });

        });

        $('#idkabupaten').on('change', function(e) {
            var idkab = e.target.value;
            var url = "{{route('wilayah.kabupaten')}}"+"?idkabupaten=" + idkab;
             //ajax
             $.get(url, function(data) {
                 //success data

                 $('#idkecamatan').empty();
                 $('#idkelurahan').empty();
                 $('#idkecamatan').append('<option value>Pilih Kecamatan</option>');
                 $('#idkelurahan').append('<option value>Pilih Kelurahan</option>');

                 $.each(data, function(index, kecamatanObj) {

                     $('#idkecamatan').append('<option value='+ kecamatanObj.idkecamatan + '>'+ kecamatanObj.namakecamatan + '</option>');

                 });
                 $('#idkecamatan').select('refresh',true);
             });
        });
      
        $('#idkecamatan').on('change', function(e) {
            var idkec = e.target.value;
            var url = "{{route('wilayah.kecamatan')}}"+"?idkecamatan=" + idkec;
             //ajax
             $.get(url, function(data) {
                  //success data
                  
                 $('#idkelurahan').empty();
                 $('#idkelurahan').append('<option value>Pilih Kelurahan</option>');
                 $.each(data, function(index, kelurahanObj) {

                     $('#idkelurahan').append('<option value='+ kelurahanObj.idkelurahan + '>'+ kelurahanObj.namakelurahan + '</option>');
                 });
                 $('#idkelurahan').select('refresh',true);
             });
        });

    </script>
@endsection