@extends('layouts.master')
@section('css')
{{-- <style type="text/css">
  .profile-user-img
  {
    width: 150px!important;
  }
  .position-img {
  width:100%;
  object-fit:cover;
}
</style> --}}
@endsection
@section('content')
<div class="page-wrapper">
            
	<div class="container-fluid">
	    <div class="col-md-5 align-self-center">
	    	<h4 class="text-themecolor">Add Student</h4>
		</div>
	    <div class="row">
	        <div class="col-lg-4 col-xlg-3 col-md-5">
	            <div class="card">
	                <div class="card-body">
	                    <center class="m-t-30"> <img class="position-img" id="uploadphoto" src="{{asset('eliteadmin/images/users/user.png')}}" class="img-circle" width="150" />
	                    		<div class="col-sm-12 form-group">
	                                <button type="button" class="btn btn-success col-sm-8" data-toggle="modal" data-target="#modal-default">Change Profile Picture</button>
	                            </div>
	                            
	                    		
	                    </center>
	                </div>
	                <div>
	                    <hr> </div>
	                <div class="card-body"> 
	                </div>
	            </div>
	        </div>
	        <div class="col-lg-8 col-xlg-9 col-md-7">
	            <div class="card">
	               <div class="card-body">
	               	 <div class="row" id="">
	                    <div class="col-12">
	                        <div class="card wizard-content">
	                            <div class="card-body">
	                                <form name="create" method="POST"  class="validation-wizard wizard-circle" action="{{ url('master/student') }}"  enctype="multipart/form-data">
	                                	 @csrf
	                                    <!-- Step 1 -->
	                                    <h6>Personal</h6>
	                                    <section>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label> No. Induk Nizhamia : <span class="danger">*</span> </label>
	                                                    <input type="text" class="form-control " id="NIS" name="NIS" placeholder="Akan ditambahkan secara otomatis ketika data disimpan" readonly> </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>NISN <span class="danger"></span> </label>
	                                                    <input type="text" class="form-control " id="NISN" name="NISN"> </div>
	                                            </div>
	                                        </div>                                  
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label for="">Nama Lengkap :<span class="danger">*</span> </label>
	                                                    <input type="text" class=" form-control " id="nama_lengkap" name="nama_lengkap" required>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Nama Panggilan</label>
	                                                    <input type="text" class="form-control" id="nama_panggilan" name="nama_panggilan"> </div>
	                                            </div>
	                                        </div>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label for="">Tempat lahir<span class="danger">*</span> </label>
	                                                    <input type="text" name="tempat_lahir" class="form-control" required>

	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label for="">Tanggal Lahir<span class="danger">*</span> </label>
	                                                    <input type="date" name="tanggal_lahir" class="form-control" required>
	                                            	</div>
	                                        	</div>
	                                        </div>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label for="">Jenis Kelamin<span class="danger">*</span> </label>
	                                                    <div class="custom-control custom-radio">
	                                                        <input type="radio" id="L" name="kelamin" value="L" >
																<label for="male">Laki-Laki</label>
																<input type="radio" id="P" name="kelamin" value="P" >
																<label for="female">Perempuan</label>
	                                                    </div>

	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Agama</label>
	                                                    <select name="agama" id="agama" class="form-control" required>
	                                                    	<option value=""> Pilih Agama</option>
	                                                    	<option value="I"> Islam</option>
	                                                    	<option value="K"> Kristen</option>
	                                                    	<option value="KH">Khatolik</option>
	                                                    	<option value="KH">Hindu</option>
	                                                    	<option value="KH">Budha</option>
	                                                    </select>
	                                            	</div>
	                                        	</div>
	                                        </div> 
	                                    </section>
	                                    <!-- Step 2 -->
	                                    <h6>Kontak</h6>
	                                    <section>
	                                        <div class="row">
	                                            <div class="col-md-12">
	                                                <div class="form-group">
	                                                    <label>Alamat</label>
	                                                    <input type="text" class="form-control " id="alamat" name="alamat" required>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Provinsi</label>
	                                                    <select class="form-control" name="provinsi" required onchange="getKota()" id="provinsi" >
	                                                    	<option value="">Pilih Provinsi</option>
	                                                    	@foreach ($provinsi as $row)
	                                                    		<option value="{{$row->id}}">{{$row->nama}}</option>
	                                                    	@endforeach
	                                                    </select>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Kota/Kabupaten</label>
	                                                    <select class="form-control kota" name="kota" id="kota" required>
	                                                    	<option value="">Pilih Kota/Kabupaten</option>
	                                                    	
	                                                    </select>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Kode Pos</label>
	                                                    <input type="text" name="pos" class="form-control">
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>HP</label>
	                                                    <input type="text" name="hp" class="form-control">
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Emergency Contact</label>
	                                                    <input type="text" name="emergency_contact" class="form-control">
	                                                </div>
	                                            </div>
	                                        </div>
	                                    </section>
	                                    <!-- Step 3 -->
	                                    <h6>Akademik</h6>
	                                    <section>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Tanggal Bergabung</label>
	                                                    <input type="date" class="form-control" id="tgl_bergabung" name="tgl_bergabung" required> </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                            	<div class="form-group">
	                                                    <label >Di Kelas</label>
	                                                    <select class="form-control " id="kelas_pertama" data-placeholder="Type to search cities" name="kelas_pertama" required>
	                                                        <option value="">Pilih Kelas</option>
	                                                        @foreach ($kelas as $row)
	                                                        	<option value="{{$row->id_jenjang}}" >{{$row->nama}}</option>
	                                                        @endforeach
	                                                    </select>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-3">
	                                            	
	                                            		<input type="checkbox" id="pindahan" name="pindahan" value="1">
	                                            			<label>Siswa Pindahan?</label>
	                                            </div>
	                                            <div class="col-md-3">
	                                            	<input type="checkbox" id="program" name="program" value="1">
	                                            			<label>Ikut Program MEN?</label>
	                                            </div>
	                                            <div class="col-md-3">
	                                            	<input type="checkbox" id="msr" name="msr" value="1">
	                                            			<label>Ikut SND?</label>
	                                            </div>
	                                            <div class="col-md-3">
	                                            	<input type="checkbox" id="promote" name="promote" value="1">
	                                            			<label>Agree Promote?</label>
	                                            </div>
	                                            <div class="col-md-6">
	                                            	<div class="form-group">
	                                            		<label>Lokasi Berkas Hard Copy</label>
	                                            		<input type="text" name="lokasi_berkas" class="form-control">
	                                            	</div>
	                                            </div>
	                                            <div class="col-md-6">
	                                            	<div class="form-group">
	                                            		<label>Status Siswa</label>
	                                            		@php
	                                            			$status = [
	                                            				['key'=> 'notactive',
	                                            				 'value'=>'Not Active'
	                                            				],
	                                            				['key'=> 'active',
	                                            				 'value'=>'Active'
	                                            				],
	                                            				['key'=> 'cancelled',
	                                            				 'value'=>'Cancelled'
	                                            				],
	                                            				['key'=> 'graduated',
	                                            				 'value'=>'Graduated'
	                                            				],
	                                            			]
	                                            		@endphp
	                                            		<select name="status" class="form-control"required>
	                                            			<option value="">-- Pilih Status --</option>
	                                            			@foreach ($status as $element)
	                                            				<option value="{{$element['key']}}">{{$element['value']}}</option>
	                                            			@endforeach
	                                            		</select>
	                                            		
	                                            	</div>
	                                            </div>
	                                           
	                                        </div>
	                                    </section>
	                                    <!-- Step 4 -->
	                                    {{-- <h6>Parents</h6>
	                                    <section>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Nama Orang Tua</label>
	                                                    <input type="text" class="form-control" name="nama_ortu" required>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Hubungan</label>
	                                                    <select class="form-control" name="hub_ortu" required>
	                                                    	<option value="">Pilih Hubungan</option>
	                                                    	<option value="A">Ayah</option>
	                                                    	<option value="I">Ibu</option>
	                                                    	<option value="W">wali</option>
	                                                    </select>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Email</label>
	                                                    <input type="email" class="form-control " name="email_ortu" required>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>No HP</label>
	                                                    <input type="text" class="form-control " name="hp_ortu">
	                                                </div>
	                                            </div>
	                                            <hr>
	                                           {{ <div class="col-md-12">
	                                            	<button class="btn waves-effect waves-light btn-success btn-xs"><i class="fa fa-plus"></i></button>
	                                            </div> }}
	                                        </div>
	                                     </section> --}}
	                                        <!-- Step 4 -->
	                                    <h6>Account</h6>
	                                    <section>
	                                        <div class="row">
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Email Sekolah</label>
	                                                    <input type="email" class="form-control required" name="email_sekolah">
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Email Lainnya</label>
	                                                    <input type="email" class="form-control " id="email2" name="email_lain">
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>User Name</label>
	                                                    <input type="text" class="form-control " placeholder="username sesuai NIS" disabled>
	                                                </div>
	                                            </div>
	                                            <div class="col-md-6">
	                                                <div class="form-group">
	                                                    <label>Password</label>
	                                                    <input type="password" class="form-control " name="password" placeholder="password default NIS siswa" disabled>
	                                                </div>
	                                            </div>
	                                            
	                                        </div>
	                                    </section>
	                                    <div class="modal fade" id="modal-default" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										  <div class="modal-dialog" role="document" style="width: 360px!important;">
										    <div class="modal-content">
										      <div class="modal-header">
										        <h4 class="modal-title">Upload Foto</h4>
										        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
										          <span aria-hidden="true">×</span>
										        </button>
										      </div>
										      <div class="modal-body">
										        <input type="file" name="photo" id="photo">
										      </div>
										      <div class="modal-footer">
										        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
										        <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
										      </div>
										    </div>
										  </div>
										</div>
	                                </form>
	                            </div>
	                        </div>
	                    </div>
	    			 </div>
	               </div>
	            </div>
	        </div>
	    </div>
	    

	   
	</div>
	<!-- ============================================================== -->
	<!-- End Container fluid  -->
	<!-- ============================================================== -->
</div>
@endsection
@section('js')
<script type="text/javascript">
	function readURL(input,kategori) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

          reader.onload = function(e) {
            if(kategori == "photo"){
              $('#uploadphoto').attr('src', e.target.result);
            }
            else if(kategori == "icon"){
              $('#uploadicon').attr('src', e.target.result);
            }
          }

          reader.readAsDataURL(input.files[0]);
        }
      }
      //set Photo to preview container
      $("#photo").change(function() {
        readURL(this,kategori = "photo");
      });

      function getKota()
  {
    var idprovinsi = $('#provinsi').val();
    //poses call ajax
    $('.kota option:contains("--Pilih--")').text('Loading..');
    $.post('{{ url('master/student/getkota') }}', 
    {
        _token      : '{!! csrf_token() !!}',
        provinsi     : idprovinsi,
    }, 
    function(response){
        $('.kota option:contains("Loading..")').text('--Pilih--');
        if(response)
        {
        	console.log(response);
            parent_kategori = response;
            removeOptions(document.getElementById("kota"));

            $.each(response, function(key, value){

              parseToSelect('.kota', value.id, value.nama);
            });
            $("#kota").prepend("<option value=''>Pilih Kota</option>").val('');
        }
        
    });

  }
  function removeOptions(selectbox)
    {
        var i;
        for(i = selectbox.options.length - 1 ; i >= 0 ; i--)
        {
            selectbox.remove(i);
        }
    }

    function parseToSelect(class_name, id, name)
    {

       $(class_name).append("<option value='"+id+"'>"+name+"</option>");
    }
</script>
@endsection