<!DOCTYPE html>
<html lang="en">
	<head>
		<?php $this->load->view('main/head');?>
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="dek/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="dek/assets/css/font-awesome.css" />

		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="dek/assets/css/select2.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="dek/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="dek/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
		
		<!-- ace settings handler -->
		<script src="dek/assets/js/ace-extra.js"></script>
	</head>

	<body class="no-skin">
		<!-- #section:basics/navbar.layout -->
		<?php $this->load->view('main/menu_ndhuwur');?>

		<!-- /section:basics/navbar.layout -->
		<div class="main-container" id="main-container">
			<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
			</script>

			<!-- #section:basics/sidebar.horizontal -->
			<?php $this->load->view('main/top_menu');?>

			<!-- /section:basics/sidebar.horizontal -->
			<div class="main-content">
				<div class="main-content-inner">
					<div class="page-content">
						<!-- #section:settings.box -->
						
						<!-- /section:settings.box -->
						<div class="page-header">
							<h1>
								Rawat Inap
								<small>
									<i class="ace-icon fa fa-angle-double-right"></i>
									Kelola Kamar
								</small>
							</h1>
						</div><!-- /.page-header -->

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								
								<form class="form-horizontal" id="validation-form" method="post">
									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="state">Pilih Kamar</label>

										<div class="col-xs-12 col-sm-9">
											<select id="state" name="kamar" class="select2" data-placeholder="Click to Choose...">
												<option value="">&nbsp;</option>
												<option value="AL">Alabama</option>
												<option value="AK">Alaska</option>
												<option value="AZ">Arizona</option>
												<option value="AR">Arkansas</option>
												<option value="CA">California</option>
												<option value="CO">Colorado</option>
												<option value="CT">Connecticut</option>
												<option value="DE">Delaware</option>
											</select>
										</div>
									</div>

									<div class="space-1"></div>

									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="password">Kapasitas:</label>

										<div class="col-xs-12 col-sm-3">
											<div class="clearfix">
												<input type="text" name="kapasitas" id="password" class="col-xs-12 col-sm-4" />
											</div>
										</div>
									</div>
									
									<div class="space-1"></div>

									<div class="form-group">
										<label class="control-label col-xs-12 col-sm-2 no-padding-right" for="password">Terisi:</label>

										<div class="col-xs-12 col-sm-3">
											<div class="clearfix">
												<input type="text" name="kapasitas" id="password" class="col-xs-12 col-sm-4" />
											</div>
										</div>
									</div>

									<div class="space-2"></div>

									<div class="hr hr-dotted"></div>

									
									<div class="form-group">
										<div class="col-xs-12 col-sm-4 col-sm-offset-2">
											<button class="btn btn-success btn-sm btn-next" data-last="Finish">
												Next
												<i class="ace-icon fa fa-arrow-right icon-on-right"></i>
											</button>
										</div>
									</div>
								</form>

								<!-- PAGE CONTENT ENDS -->
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content -->
				</div>
			</div><!-- /.main-content -->

			<?php $this->load->view('main/footer');?>

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
			</a>
		</div><!-- /.main-container -->

				<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='dek/assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='dek/assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='dek/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
		<script src="dek/assets/js/bootstrap.js"></script>

		<!-- page specific plugin scripts -->
		<script src="dek/assets/js/fuelux/fuelux.wizard.js"></script>
		<script src="dek/assets/js/jquery.validate.js"></script>
		<script src="dek/assets/js/additional-methods.js"></script>
		<script src="dek/assets/js/bootbox.js"></script>
		<script src="dek/assets/js/jquery.maskedinput.js"></script>
		<script src="dek/assets/js/select2.js"></script>

		<!-- ace scripts -->
		<script src="dek/assets/js/ace/elements.scroller.js"></script>
		<script src="dek/assets/js/ace/elements.colorpicker.js"></script>
		<script src="dek/assets/js/ace/elements.fileinput.js"></script>
		<script src="dek/assets/js/ace/elements.typeahead.js"></script>
		<script src="dek/assets/js/ace/elements.wysiwyg.js"></script>
		<script src="dek/assets/js/ace/elements.spinner.js"></script>
		<script src="dek/assets/js/ace/elements.treeview.js"></script>
		<script src="dek/assets/js/ace/elements.wizard.js"></script>
		<script src="dek/assets/js/ace/elements.aside.js"></script>
		<script src="dek/assets/js/ace/ace.js"></script>
		<script src="dek/assets/js/ace/ace.ajax-content.js"></script>
		<script src="dek/assets/js/ace/ace.touch-drag.js"></script>
		<script src="dek/assets/js/ace/ace.sidebar.js"></script>
		<script src="dek/assets/js/ace/ace.sidebar-scroll-1.js"></script>
		<script src="dek/assets/js/ace/ace.submenu-hover.js"></script>
		<script src="dek/assets/js/ace/ace.widget-box.js"></script>
		<script src="dek/assets/js/ace/ace.settings.js"></script>
		<script src="dek/assets/js/ace/ace.settings-rtl.js"></script>
		<script src="dek/assets/js/ace/ace.settings-skin.js"></script>
		<script src="dek/assets/js/ace/ace.widget-on-reload.js"></script>
		<script src="dek/assets/js/ace/ace.searchbox-autocomplete.js"></script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
			
				$('[data-rel=tooltip]').tooltip();
			
				$(".select2").css('width','200px').select2({allowClear:true})
				.on('change', function(){
					$(this).closest('form').validate().element($(this));
				}); 
			
			
				var $validation = false;
				$('#fuelux-wizard-container')
				.ace_wizard({
					//step: 2 //optional argument. wizard will jump to step "2" at first
					//buttons: '.wizard-actions:eq(0)'
				})
				.on('actionclicked.fu.wizard' , function(e, info){
					if(info.step == 1 && $validation) {
						if(!$('#validation-form').valid()) e.preventDefault();
					}
				})
				.on('finished.fu.wizard', function(e) {
					bootbox.dialog({
						message: "Thank you! Your information was successfully saved!", 
						buttons: {
							"success" : {
								"label" : "OK",
								"className" : "btn-sm btn-primary"
							}
						}
					});
				}).on('stepclick.fu.wizard', function(e){
					//e.preventDefault();//this will prevent clicking and selecting steps
				});
			
			
				//jump to a step
				/**
				var wizard = $('#fuelux-wizard-container').data('fu.wizard')
				wizard.currentStep = 3;
				wizard.setState();
				*/
			
				//determine selected step
				//wizard.selectedItem().step
			
			
			
				//hide or show the other form which requires validation
				//this is for demo only, you usullay want just one form in your application
				$('#skip-validation').removeAttr('checked').on('click', function(){
					$validation = this.checked;
					if(this.checked) {
						$('#sample-form').hide();
						$('#validation-form').removeClass('hide');
					}
					else {
						$('#validation-form').addClass('hide');
						$('#sample-form').show();
					}
				})
			
			
			
				//documentation : http://docs.jquery.com/Plugins/Validation/validate
			
			
				$.mask.definitions['~']='[+-]';
				$('#phone').mask('(999) 999-9999');
			
				jQuery.validator.addMethod("phone", function (value, element) {
					return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
				}, "Enter a valid phone number.");
			
				$('#validation-form').validate({
					errorElement: 'div',
					errorClass: 'help-block',
					focusInvalid: false,
					ignore: "",
					rules: {
						email: {
							required: true,
							email:true
						},
						password: {
							required: true,
							minlength: 5
						},
						password2: {
							required: true,
							minlength: 5,
							equalTo: "#password"
						},
						name: {
							required: true
						},
						phone: {
							required: true,
							phone: 'required'
						},
						url: {
							required: true,
							url: true
						},
						comment: {
							required: true
						},
						state: {
							required: true
						},
						platform: {
							required: true
						},
						subscription: {
							required: true
						},
						gender: {
							required: true,
						},
						agree: {
							required: true,
						}
					},
			
					messages: {
						email: {
							required: "Please provide a valid email.",
							email: "Please provide a valid email."
						},
						password: {
							required: "Please specify a password.",
							minlength: "Please specify a secure password."
						},
						state: "Please choose state",
						subscription: "Please choose at least one option",
						gender: "Please choose gender",
						agree: "Please accept our policy"
					},
			
			
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
			
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
						$(e).remove();
					},
			
					errorPlacement: function (error, element) {
						if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
			
					submitHandler: function (form) {
					},
					invalidHandler: function (form) {
					}
				});
			
				
				
				
				$('#modal-wizard-container').ace_wizard();
				$('#modal-wizard .wizard-actions .btn[data-dismiss=modal]').removeAttr('disabled');
				
				
				/**
				$('#date').datepicker({autoclose:true}).on('changeDate', function(ev) {
					$(this).closest('form').validate().element($(this));
				});
				
				$('#mychosen').chosen().on('change', function(ev) {
					$(this).closest('form').validate().element($(this));
				});
				*/
				
				
				$(document).one('ajaxloadstart.page', function(e) {
					//in ajax mode, remove remaining elements before leaving page
					$('[class*=select2]').remove();
				});
			})
		</script>

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->
		<link rel="stylesheet" href="dek/assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="dek/docs/assets/js/themes/sunburst.css" />

		<script type="text/javascript"> ace.vars['base'] = '..'; </script>
		<script src="dek/assets/js/ace/elements.onpage-help.js"></script>
		<script src="dek/assets/js/ace/ace.onpage-help.js"></script>
		<script src="dek/docs/assets/js/rainbow.js"></script>
		<script src="dek/docs/assets/js/language/generic.js"></script>
		<script src="dek/docs/assets/js/language/html.js"></script>
		<script src="dek/docs/assets/js/language/css.js"></script>
		<script src="dek/docs/assets/js/language/javascript.js"></script>
	</body>
</html>
