<div class="box box-success b-t-non" id='panel-add'>
	<h4 class="labelGreen">
		<i class="fa fa-plus-square iconLabel m-r-15"></i> Form Tambah
	</h4>
	<hr class="m-t-0">
	<form method='post' action="{{ route('addPusatKesehatan') }}" 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">
						<input type="text" name="email" id='email' onkeyup="cekMail()" required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
						<div class='iconStatus' id='icon_email'></div>
					</div>
					<span class='col-lg-9 col-md-9 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3' id="cek_mail">
						<input type='hidden' name='statusMail' value='Exist' id='statusMail' class='form-control'>
					</span>
				</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' onkeyup="cekNik()" required="required" autocomplete='off' class="form-control input-sm customInput col-md-7 col-xs-12">
						<div class='iconStatus' id='icon_nik'></div>
					</div>
					<span class='col-lg-9 col-md-9 col-sm-12 col-xs-12 col-lg-offset-3 col-md-offset-3' id="cekNik">
						<input type='hidden' name='statusNik' value='Exist' id='statusNik' class='form-control'>
					</span>
				</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" 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" 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 !!}'>{!! $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>
						</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>
						</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" 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'>Jenis Pusat Kesehatan</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<select name="jenis" required="required" class="form-control input-sm customInput col-md-7 col-xs-12">
							<option value='' disabled selected> .:: Pilih Jenis Pusat Kesehatan ::. </option>
							<option value='Puskesmas'>Puskesmas</option>
							<option value='Rumah Sakit'>Rumah Sakit</option>
						</select>
					</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>
								<img id="preview-photo" src="{!! url('dist/img/default_image.jpg') !!}" class="img-polaroid" height="200">
							</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">
					</div>
				</div>
				<div class='clearfix p-b-5'></div>
			</div>
			<div class='clearfix p-b-5'></div>
		</div>
		<div class="box-footer">
			<span id='tombol'>
				<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>
			</span>
			<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'
        	});
        });
    };

    function cekMail() {
		var email = $('#email').val();
		var statusNik = $('#statusNik').val();
		$.post("{!! route('cekMail') !!}", {email:email}).done(function(data){
			if(data.length == 0){
				var icon = "<i class='fa fa-check-circle'></i>";
				$('#icon_email').attr('style','color:green');
				var status = "<input type='hidden' name='statusMail' value='Ready' id='statusMail' class='form-control'>";
				$('#gr_mail').attr('class','form-group');
				if (statusNik == 'Ready') {
					var button = '<button type="submit" class="btn btn-primary pull-right m-l-15">Simpan <span class="fa fa-save"></span></button>';
				}else{
					var button = '<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>';
				}
			}else{
				var icon = "<i class='fa fa-warning'></i>";
				$('#icon_email').attr('style','color:red');
				$('#gr_mail').attr('class','form-group has-error');
				var status = "<input type='hidden' name='statusMail' value='Exist' id='statusMail' class='form-control'><p class='messageError'><i>Email Sudah Digunakan</i></p>";
				var button = '<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>';
			}
			if (email != '') {
				$('#cek_mail').html(status);
				$('#icon_email').html(icon);
				$('#tombol').html(button);
			}else{
				$('#cek_mail').html("<input type='hidden' name='statusMail' value='Exist' id='statusMail' class='form-control'>");
				$('#icon_email').html("");
				$('#tombol').html('<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>');
			};
		});
	}

	function cekNik() {
		var nik = $('#nik').val();
		var statusMail = $('#statusMail').val();
		$.post("{!! route('cekNik') !!}", {nik:nik}).done(function(data){
			if(data.length == 0){
				$('#gr_nik').attr('class','form-group');
				var icon = "<i class='fa fa-check-circle'></i>";
				$('#icon_nik').attr('style','color:green');
				var status = "<input type='hidden' name='statusNik' value='Ready' id='statusNik' class='form-control'>";
				if (statusMail == 'Ready') {
					var button = '<button type="submit" class="btn btn-primary pull-right m-l-15">Simpan <span class="fa fa-save"></span></button>';
				}else{
					var button = '<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>';
				}
			}else{
				$('#gr_nik').attr('class','form-group has-error');
				var icon = "<i class='fa fa-warning'></i>";
				$('#icon_nik').attr('style','color:red');
				var status = "<input type='hidden' name='statusNik' value='Exist' id='statusNik' class='form-control'><p class='messageError'><i>Username Sudah Digunakan</i></p>";
				var button = '<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>';
			}
			if (nik != '') {
				$('#cekNik').html(status);
				$('#icon_nik').html(icon);
				$('#tombol').html(button);
			}else{
				$('#cekNik').html("<input type='hidden' name='statusNik' value='Exist' id='statusNik' class='form-control'>");
				$('#icon_nik').html("");
				$('#tombol').html('<button type="submit" class="btn btn-primary pull-right m-l-15" disabled>Simpan <span class="fa fa-save"></span></button>');
			};
		});
	}

    $('#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>