<div class="box box-success b-t-non" id='panel-add'>
	<h4 class="labelYellow">
		<i class="fa fa-pencil m-r-15"></i> Form Edit
	</h4>
	<hr class="m-t-0">
	<form method='post' action="{{ route('editPusatKesehatan') }}" enctype='multipart/form-data'>
		{{ csrf_field() }}
		<div class="box-body">
			<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12 p-0'>
				<div class="form-group" id='gr_mail'>
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Email</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						@if (!empty($asal))
							<input type="hidden" name="asal" value='{{ $asal }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
						@endif
						<input type="hidden" name="id_pusat_kesehatan" value='{{ $pusKes->id_pusat_kesehatan }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
						<input type="text" name="email" id='email' value='{{ $pusKes->users->email }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12" readonly>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group" id='gr_nik'>
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Username</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<input type="text" name="nik" id='nik' value='{{ $pusKes->users->nik }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12" readonly>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Nama Puskesmas</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<input type="text" name="nama" value='{{ $pusKes->nama }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Alamat</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<input type="text" name="alamat" value='{{ $pusKes->alamat }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Pilih Provinsi</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<select name="provinsi_id" id='provinsi' required="required" class="form-control input-sm customInput col-md-7 col-xs-12">
							<option value='' disabled selected> .:: Pilih Provinsi ::. </option>
							@foreach ($provinsis as $provinsi)
								<option value='{!! $provinsi->id_provinsi !!}' <?php if($provinsi->id_provinsi == $pusKes->provinsi_id){echo "selected";} ?>>{!! $provinsi->nama_provinsi !!}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Pilih Kabupaten</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<select name="kabupaten_id" id='kabupaten' required="required" class="form-control input-sm customInput col-md-7 col-xs-12">
							<option value='' disabled selected> .:: Pilih Kabupaten ::. </option>
							@foreach ($kabupatens as $kabupaten)
								<option value='{!! $kabupaten->id_kabupaten !!}' <?php if($kabupaten->id_kabupaten == $pusKes->kabupaten_id){echo "selected";} ?>>{!! $kabupaten->nama_kabupaten !!}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Pilih Kecamatan</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<select name="kecamatan_id" id='kecamatan' required="required" class="form-control input-sm customInput col-md-7 col-xs-12">
							<option value='' disabled selected> .:: Pilih Kecamatan ::. </option>
							@foreach ($kecamatans as $kecamatan)
								<option value='{!! $kecamatan->id_kecamatan !!}' <?php if($kecamatan->id_kecamatan == $pusKes->kecamatan_id){echo "selected";} ?>>{!! $kecamatan->nama_kecamatan !!}</option>
							@endforeach
						</select>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
				<div class="form-group">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>No Telp</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<input type="text" name="no_telp" value='{{ $pusKes->no_telp }}' required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
			</div>
			<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12 p-0'>
				<div class="form-group">
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3">
						<div class="crop-edit">
							<center>
								@if($pusKes->users->foto != null)
									<img id="preview-photo" src="{!! url('dist/img/users/'.$pusKes->users->foto) !!}" class="img-polaroid" width="250">
								@else
									<img id="preview-photo" src="{!! url('dist/img/default_image.jpg') !!}" class="img-polaroid" width="250">
								@endif
							</center>
						</div>
					</div>
					<div class='clearfix p-b-5'></div>
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Foto</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<input type="file" class="upload" onchange="loadFilePhoto(event)" name="foto" accept="image/*" class="form-control customInput input-sm col-md-7 col-xs-12">
						<i>* Kosongi jika foto tidak ingin dirubah</i>
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
			</div>
			<div class='clearfix p-b-5'></div>
		</div>
		<div class="box-footer" id='tombol'>
			<button type="submit" class="btn btn-primary pull-right m-l-15">Simpan <span class="fa fa-save"></span></button>
			<button type="button" class="btn btn-warning btn-cancel pull-right"><span class="fa fa-chevron-left"></span> Kembali</button>
		</div>
	</form>
</div>
<script type="text/javascript">
	var onLoad = (function() {
		$('#panel-add').animateCss('bounceInUp');
	})();

	$('.btn-cancel').click(function(e){
    	e.preventDefault();
    	$('#panel-add').animateCss('bounceOutDown');
    	$('.other-page').fadeOut(function(){
    		$('.other-page').empty();
            $('.main-layer').fadeIn();
        });
    });

    function loadFilePhoto(event) {
        var image = URL.createObjectURL(event.target.files[0]);
        $('#preview-photo').fadeOut(function(){
        	$(this).attr('src', image).fadeIn().css({
        		'-webkit-animation' : 'showSlowlyElement 700ms',
        		'animation'         : 'showSlowlyElement 700ms'
        	});
        });
    };
    $('#provinsi').chosen();
    $('#kabupaten').chosen();
    $('#kecamatan').chosen();
    $('#provinsi').change(function(){
    	var id= $('#provinsi').val();
    	$.post("{!! route('getKabupaten') !!}", {id :id }).done(function(data){
    		var listKab = '<option value="" disabled selected> .:: Pilih Kabupaten ::. </option>';
    		if(data.length > 0){
    			$.each(data, function(k,v){
    				listKab += '<option value="'+v.id_kabupaten+'">'+v.nama_kabupaten+'</option>';
    			});
    		}
    		$('#kabupaten').html(listKab);
    		$('#kabupaten').trigger('chosen:updated');
    	});
    });
    $('#kabupaten').change(function(){
    	var id= $('#kabupaten').val();
    	$.post("{!! route('getKecamatan') !!}", {id :id }).done(function(data){
    		var listKec = '<option value="" disabled selected> .:: Pilih Kecamatan ::. </option>';
    		if(data.length > 0){
    			$.each(data, function(k,v){
    				listKec += '<option value="'+v.id_kecamatan+'">'+v.nama_kecamatan+'</option>';
    			});
    		}
    		$('#kecamatan').html(listKec);
    		$('#kecamatan').trigger('chosen:updated');
    	});
    });
</script>