@extends('layouts.loginmonevpkam')
@section('content')
  <div class="register-logo">
    <a href="{{ url('/') }}">e-MONEV <b>PKAM</b></a>
  </div>
  <div class="register-box-body">
    <p class="login-box-msg">Pendaftaran User Monev</p>
    <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
    {{ csrf_field() }}
                <div class='form-group'> 
                    <select id="role_id"   class="form-control" name="role_id" }}">
                        <option value = > PILIH GROUP USER</option>
                        <option value ='3' > PROVINSI</option>
                        <option value ='4' > KABUPATEN</option>
                        <option value ='5' > PUSKESMAS</option>
                    </select> 
                </div>
                <div class='form-group'> 
                  {!! Form::select('fltrprovinsi',[],null,['class'=>'form-control fltrprovinsi','id'=>'fltrprovinsi', 'disabled', 'required']) !!}
                </div>
                <div class='form-group'> 
                  {!! Form::select('fltrkabupaten',[],null,['class'=>'form-control fltrkabupaten','id'=>'fltrkabupaten', 'disabled', 'required']) !!}
                </div>                 
                <div class='form-group'> 
                  {!! Form::select('fltrpuskesmas',[],null,['class'=>'form-control fltrpuskesmas','id'=>'fltrpuskesmas', 'disabled', 'required']) !!}
                </div>

            <div class="form-group has-feedback {{ $errors->has('username') ? ' has-error' : '' }}">

                    <input id="username" type="text" class="form-control" name="username" value="{{ old('username') }}" placeholder="User name" required>
                    @if ($errors->has('username'))
                        <span class="help-block">
                            <strong>{{ $errors->first('username') }}</strong>
                        </span>
                    @endif
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
            </div>


            <div class="form-group has-feedback {{ $errors->has('name') ? ' has-error' : '' }}">

                    <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" placeholder="Full name" required>
                    @if ($errors->has('name'))
                        <span class="help-block">
                            <strong>{{ $errors->first('name') }}</strong></span>
                        </span>
                    @endif
                    <span class="glyphicon glyphicon-user form-control-feedback">
            </div>

            <div class="form-group has-feedback {{ $errors->has('email') ? ' has-error' : '' }}">
                    <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required placeholder="Email">
                     @if ($errors->has('email'))
                        <span class="help-block">
                            <strong>{{ $errors->first('email') }}</strong></span>
                        </span>
                    @endif
                    <span class="glyphicon glyphicon-envelope form-control-feedback">
                   
            </div>

            <div class="form-group has-feedback {{ $errors->has('password') ? ' has-error' : '' }}">
                    <input id="password" type="password" class="form-control" name="password" required placeholder="Password">
                    @if ($errors->has('password'))
                        <span class="help-block">
                            <strong>{{ $errors->first('password') }}</strong></span>
                        </span>
                    @endif
                     <span class="glyphicon glyphicon-lock form-control-feedback">
            </div>

            <div class="form-group has-feedback {{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required placeholder="Retype Password">
                     @if ($errors->has('password_confirmation'))
                        <span class="help-block">
                            <strong>{{ $errors->first('password_confirmation') }}</strong>
                        </span>
                    @endif    
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                   
            </div>

      <div class="row">
        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                {{ Form::hidden('hnamaprovinsi',null, array('id' => 'hnamaprovinsi')) }}
                                {{ Form::hidden('hnamakabupaten',null, array('id' => 'hnamakabupaten')) }}
                                {{ Form::hidden('hnamapuskesmas',null, array('id' => 'hnamapuskesmas')) }}
                                <button type="submit" class="btn btn-primary">
                                    Register
                                </button>
                            </div>
                        </div>
        <!-- /.col -->
      </div>
    </form>

    <a href="{{ url('/login') }}" class="text-center"><i class="fa fa-sign-in"></i> kembali ke login</a>
  </div>
  <!-- /.form-box -->
@endsection

@section('scripts')
<script>
    $('#role_id').select2({  
               placeholder: {
                        id: '-1', // the value of the option
                        text: 'PILIH GROUP USER '
                        },             
    });

    $('#role_id').on('change', function (evt) {

        $('#fltrprovinsi').attr('disabled',false);
        $('#fltrkabupaten').attr('disabled',false);
        $('#fltrpuskesmas').attr('disabled',false);

        switch ($('#role_id').val()) {
            case '3':
                 //ajax
                $('#fltrprovinsi').prop('disabled',false);
                $('#fltrkabupaten').prop('disabled',true);
                $('#fltrpuskesmas').prop('disabled',true);
                $('.fltrkabupaten').empty();
                $('.fltrprovinsi').append('<option>PILIH KABUPATEN</option>');
                $('.fltrpuskesmas').empty();
                $('.fltrprovinsi').append('<option>PILIH PUSKESMAS</option>');

                 $.get('/wilayahs/loadAvailableUserProvinsi', function(data) {
                     //success data
                     $('#fltrprovinsi').empty();
                     $('#fltrprovinsi').append('<option>PILIH PROVINSI</option>');
                     $.each(data, function(index, Obj) {
                         $('#fltrprovinsi').append('<option value='+ Obj.idprovinsi + '>'+ Obj.namaprovinsi + '</option>');
                     }); 
                    
                 });

                break;
            case '4':
                //ajax
                $('#fltrprovinsi').prop('disabled',false);
                $('#fltrkabupaten').prop('disabled',false);
                $('#fltrpuskesmas').prop('disabled',true);
                $('.fltrkabupaten').empty();
                $('.fltrkabupaten').append('<option>PILIH KABUPATEN</option>');
                $('.fltrpuskesmas').empty();
                $('.fltrpuskesmas').append('<option>PILIH PUSKESMAS</option>');
                $.get('/wilayahs/loadDataProvinsi', function(data) {
                     //success data
                     $('#fltrprovinsi').empty();
                     $('#fltrprovinsi').append('<option>PILIH PROVINSI</option>');
                     $.each(data, function(index, Obj) {
                         $('#fltrprovinsi').append('<option value='+ Obj.idprovinsi + '>'+ Obj.namaprovinsi + '</option>');
                     }); 
                    
                 });
                break;
            case '5':
                 //ajax
                $('#fltrprovinsi').prop('disabled',false);
                $('#fltrkabupaten').prop('disabled',false);
                $('#fltrpuskesmas').prop('disabled',false);
                $('.fltrkabupaten').empty();
                $('.fltrkabupaten').append('<option>PILIH KABUPATEN</option>');
                $('.fltrpuskesmas').empty();
                $('.fltrpuskesmas').append('<option>PILIH PUSKESMAS</option>');
                $.get('/wilayahs/loadDataProvinsi', function(data) {
                     //success data
                     $('#fltrprovinsi').empty();
                     $('#fltrprovinsi').append('<option>PILIH PROVINSI</option>');
                     $.each(data, function(index, Obj) {
                         $('#fltrprovinsi').append('<option value='+ Obj.idprovinsi + '>'+ Obj.namaprovinsi + '</option>');
                     }); 
                    
                 }); 
                break;
        }  

  }); 
    
    $(".fltrprovinsi").select2({
      placeholder: {
        id: '0', // the value of the option
        text: 'PILIH PROVINSI',
      }
    });
  
    $(".fltrkabupaten").select2({
      placeholder: {
        id: '0', // the value of the option
        text: 'PILIH KABUPATEN',
      }
    });

    $(".fltrpuskesmas").select2({
      placeholder: {
        id: '0', // the value of the option
        text: 'PILIH PUSKESMAS',
      }
    });
     

    $('.fltrprovinsi').on('change', function (evt) {
          var idprov = $('.fltrprovinsi').val();
          $("#hnamaprovinsi").val($(".fltrprovinsi :selected").text());
          if ($('#role_id').val() == '4' ) {
            $.get('/wilayahs/loadAvailableUserKabupaten?idprovinsi=' + idprov, function(data) {
                         //success data
                         $('.fltrkabupaten').empty();
                         $('.fltrkabupaten').append('<option>PILIH KABUPATEN</option>');
                         $.each(data, function(index, Obj) {
                             $('.fltrkabupaten').append('<option value='+ Obj.idkabupaten + '>'+ Obj.namakabupaten + '</option>');
                         }); 
                        
                     });  
          } 

          if ($('#role_id').val() == '5' ) {
            $.get('/wilayahs/provinsi-dropdown?idprovinsi=' + idprov, function(data) {
                         //success data
                         $('.fltrkabupaten').empty();
                         $('.fltrkabupaten').append('<option>PILIH KABUPATEN</option>');
                         $.each(data, function(index, Obj) {
                             $('.fltrkabupaten').append('<option value='+ Obj.idkabupaten + '>'+ Obj.namakabupaten + '</option>');
                         }); 
                        
                     });
          }
          
    });

    $('.fltrkabupaten').on('change', function (evt) {

        $("#hnamakabupaten").val($(".fltrkabupaten :selected").text());
        if ($('#role_id').val() == '5') {
          var idkab = $('.fltrkabupaten').val();
         
          $.get('/wilayahs/loadAvailableUserPuskesmas?idkabupaten=' + idkab, function(data) {
                         //success data
                         $('.fltrpuskesmas').empty();
                         $('.fltrpuskesmas').append('<option>PILIH PUSKESMAS</option>');
                         $.each(data, function(index, Obj) {
                             $('.fltrpuskesmas').append('<option value='+ Obj.idpuskesmas + '>'+ Obj.namapuskesmas + '</option>');
                         }); 
                     });
      }
    });

    $('.fltrpuskesmas').on('change', function (evt) {
        $("#hnamapuskesmas").val($(".fltrpuskesmas :selected").text());
  });

</script>
@endsection