<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="<?php echo e(route('addAdmin')); ?>" enctype='multipart/form-data'>
		<?php echo e(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'>NIK</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 Lengkap</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 m-b-0">
					<label class="control-label col-lg-3 col-md-3 col-sm-12 col-xs-12" id='label-input'>Tanggal Lahir</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 input-group p-t-0 p-b-0 p-l-15 p-r-15">
						<div class="input-group-addon">
							<i class="fa fa-calendar"></i>
						</div>
						<input type="text" name='tgl_lahir' autocomplete='off' placeholder='dd-mm-yyyy' class="form-control pull-right"  id='form_datetime_today' data-date-format="dd-mm-yyyy" required='required'>
					</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 Kelamin</label>
					<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
						<select name="jenis_kelamin" required="required" class="form-control input-sm customInput col-md-7 col-xs-12">
							<option value='' disabled selected> .:: Pilih Jenis Kelamin ::. </option>
							<option value='Laki-Laki'>Laki-Laki</option>
							<option value='Perempuan'>Perempuan</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'>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'>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>
							<?php foreach($provinsis as $provinsi): ?>
								<option value='<?php echo e($provinsi->id_provinsi); ?>'><?php echo e($provinsi->nama_provinsi); ?></option>
							<?php 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'>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'>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_tlp" 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>
								<img id="preview-photo" src="<?php echo url('dist/img/default_image.jpg'); ?>" class="img-polaroid" height="250">
							</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'
        	});
        });
    };

    $('#form_datetime_today').datetimepicker({
        weekStart: 2,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
    });

    function cekMail() {
		var email = $('#email').val();
		var statusNik = $('#statusNik').val();
		$.post("<?php echo 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("<?php echo 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>NIK 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("<?php echo 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("<?php echo 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>