<link href="<?php echo base_url()."assets/" ?>fa-picker/dist/css/fontawesome-iconpicker.min.css" rel="stylesheet">
<script src="<?php echo base_url()."assets/" ?>fa-picker/dist/js/fontawesome-iconpicker.min.js"></script>
<!-- Widget ID (each widget will need unique ID)-->
<div class="jarviswidget" id="wid-id-6" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-deletebutton="false">
	<!-- widget options:
		usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
		
		data-widget-colorbutton="false"	
		data-widget-editbutton="false"
		data-widget-togglebutton="false"
		data-widget-deletebutton="false"
		data-widget-fullscreenbutton="false"
		data-widget-custombutton="false"
		data-widget-collapsed="true" 
		data-widget-sortable="false"
		
	-->
	<header>
		<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
		<h2>Role Assigment</h2>				
		
	</header>

	<!-- widget div-->
	<div>
		
		<!-- widget edit box -->
		<div class="jarviswidget-editbox">
			<!-- This area used as dropdown edit box -->
			
		</div>
		<!-- end widget edit box -->
		
		<!-- widget content -->
		<div class="widget-body no-padding">
			
			<form action="<?php echo @$action; ?>" method="post" id="role-form" class="smart-form">
				<header>
					<?php echo $header; ?>
				</header>

				<fieldset>
					<div class="row">
						<section class="col col-3">
							<label class="label">Role Name</label>
							<input id="id" type="hidden" name ="id" value="<?php echo @$id; ?>" />
							<?php echo @$role_id; ?>							
						</section>
						<section class="col col-3">
							<label class="label">Menu Name</label>
							<label class="select">
							<div id="block_menu">
								<?php echo @$menu_id; ?>								
							</div>
						</label>	
						</section>
							
					</div>
					<div class="row">
						<section class="col col-2">
							<label class="label">View Privilage</label>
							<span class="onoffswitch">								
								<input type="checkbox" name="privilage_view" class="onoffswitch-checkbox" id="privilage_view" value="Y" <?php echo @$view; ?>>
								<label class="onoffswitch-label" for="privilage_view"> 
									<div class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></div> 
									<div class="onoffswitch-switch"></div>
								</label> 
							</span> 		
						</section>
						<section class="col col-2">
							<label class="label">Create Privilage</label>
							<span class="onoffswitch">
								<input type="checkbox" name="privilage_create" class="onoffswitch-checkbox" id="privilage_create" value="Y" <?php echo @$create; ?>>
								<label class="onoffswitch-label" for="privilage_create"> 
									<div class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></div> 
									<div class="onoffswitch-switch"></div>
								</label> 
							</span>	
						</section>
						<section class="col col-2">
							<label class="label">Update Privilage</label>
							<span class="onoffswitch">
								<input type="checkbox" name="privilage_update" class="onoffswitch-checkbox" id="privilage_update" value="Y" <?php echo @$edit; ?>>
								<label class="onoffswitch-label" for="privilage_update"> 
									<div class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></div> 
									<div class="onoffswitch-switch"></div>
								</label> 
							</span>	
						</section>
						<section class="col col-2">
							<label class="label">Delete Privilage</label>
							<span class="onoffswitch">
								<input type="checkbox" name="privilage_delete" class="onoffswitch-checkbox" id="privilage_delete" value="Y" <?php echo @$delete; ?>>
								<label class="onoffswitch-label" for="privilage_delete"> 
									<div class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></div> 
									<div class="onoffswitch-switch"></div>
								</label> 
							</span>	
						</section>
						
						<section class="col col-2">
							<label class="label">Approve Privilage</label>
							<span class="onoffswitch">
								<input type="checkbox" name="privilage_approve" class="onoffswitch-checkbox" id="privilage_approve" value="Y" <?php echo @$approve; ?>>
								<label class="onoffswitch-label" for="privilage_approve"> 
									<div class="onoffswitch-inner" data-swchon-text="Yes" data-swchoff-text="No"></div> 
									<div class="onoffswitch-switch"></div>
								</label> 
							</span>	
						</section>
					</div>
					
				</fieldset>

				<footer>
					<button type="submit" name="submit" class="btn btn-primary" value="<?php echo $submit; ?>">
						Save
					</button>
					<button type="reset" id="cancel_create" name="cancel" class="btn btn-default" >
						Batal
					</button>
				</footer>

				<div class="message">
					<i class="fa fa-check fa-lg"></i>
					<p>
						Your comment was successfully added!
					</p>
				</div>
			</form>
			
		</div>
		<!-- end widget content -->
		
	</div>
	<!-- end widget div -->
				
</div>
<!-- end widget -->

<script type="text/javascript">
	
	function get_menu(role_id) {
		$.ajax({
			type:"POST",
			dataType: "html",
			beforeSend : function() {
				$("#block_menu").html('Populating data, please wait..');
			},
			url:"<?php echo site_url('/') . $controller . '/get_menu'; ?>",
			data : "role_id="+role_id,
			success:function(msg){
				$("#block_menu").html(msg);			
			},
			error:function(){
				alert("Load failed");
			}
		});
	}
	
	$(function() {
		$(".chosen-select").chosen();	
		//cancel form
		alert_cancel = 'Are You Sure to cancel this form ?';
		$('#cancel_create').on('click', function () {
			if (confirm(alert_cancel)) {
				window.location.href = "<?php echo site_url('/').'home#'.$controller; ?>";
			}
		});
		
		
		// Validation
		$("#role-form").validate({
			// Rules for form validation
			rules : {				
				role_id : {
					required : true
				},
				menu_id : {
					required : true
				}
			},
			
			submitHandler : function(form) {
				
				$(form).ajaxSubmit({
					/* beforeSubmit: function() {
						$("#hiddenElement").val("false");
						$("#cancel").attr("disabled","disabled");
						$("#button_id").attr("disabled","disabled");
						//$("button[type=submit]").append('<i class="fa fa-gear fa-1x fa-spin"></i>');
						$("#button_id").append('<i class="fa fa-gear fa-1x fa-spin">');
					}, */
					dataType: 'json',
					success : function(msg) {
						window.location.hash = base_url + 'index.php/<?php echo $controller; ?>/';
						/* if (msg.msg == "noauth") {
							window.location = base_url;
						}
						else if (msg.error == true) {
							write_error_html(msg.field);
							
							//button manipulating
							$("#hiddenElement").val("true");
							$(".fa-spin").remove();
							$("#cancel").removeAttr("disabled");
							$("#button_id").removeAttr("disabled");
						} else {
							window.location.hash = base_url + 'create_agent/';
						} */
					}
				});
				
			},

			// Messages for form validation
			messages : {
				menu_id : {
					required : 'Silahkan Pilih Menu'
						
				},
				role_id : {
					required : 'Silahkan Pilih Role'
				}
			},

			// Do not change code below
			errorPlacement : function(error, element) {
				error.insertAfter(element.parent());
			}
		});
	});
</script>