<style>
	.sortable {list-style-type:none;margin:0;padding:0;width: auto;}
	.sortable li{margin: 2px 20px 15px 0; padding: 8px; width: 23%; height: auto; font-size: inherit; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); background-color: #FFFFFF; border: 0px; border-radius: 2px; display: inline-block;}
	}
</style>
<ul class="nav nav-tabs" data-tabs="tabs">
	<li class="active" role="presentation">
		<a data-toggle="tab" href="#form_design">Form Design Layout</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane fade in active" id="form_design">
		<?php echo form_open('employee_enrolment/save_form/' . $prime_module_id,array('id'=>'save_form','class'=>'form-inline')); ?>
			<fieldset id="FundBasicInfo">
				<div class="form-group">
					<?php
						echo form_input( array('name'=>'prime_module_id', 'id'=>'prime_module_id', 'type'=>'Hidden','value'=>$prime_module_id));
						echo form_label("Form Details", 'form_details', array('class' => 'required'));
						echo form_dropdown(array( 'name' => 'form_details', 'id' => 'form_details', 'class' => 'form-control input-sm'), $form_name_list);
					?>
				</div>
			</fieldset>
		<div style="padding:15px;background-color: #f2f2f2;" id="input_view_data">
		</div>
		<?php echo form_close(); ?>
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function (){
	$('#input_view_data').hide();
	$("#form_details").change(function(){
		var form_name = $('#form_details').val();
		var module_id = $('#prime_module_id').val();
		if(form_name && module_id){
			$.ajax({
				type: "POST",
				url: '<?php echo site_url($controller_name . "/form_name_field_list"); ?>',
				data: {module_id:module_id,form_name:form_name},
				success: function(data) {
					var rslt = JSON.parse(data);
					$('#input_view_data').show();
					$('#input_view_data').html(rslt.view_content);
					$("#form_label_"+form_name).click(function () {
						$(".check_all").prop('checked', $(this).prop('checked'));
					});
					$(".check_all").change(function(){
						if (!$(this).prop("checked")){
							$("#form_label_"+form_name).prop("checked",false);
						}
					});
				},
			});
		}
		});
		
		$("#save_form").validate({
			rules: {
				form_details: 'required'
			},
			submitHandler: function(form) {
				$("#submit").html("<i class='fa fa-spinner fa-spin'></i> Processing...");
				$('#submit').attr('disabled','disabled');
				var save_data = JSON.stringify($("#save_form").serializeArray());
				$.ajax({
					type: "POST",
					url: '<?php echo site_url($controller_name . "/save_form"); ?>',
					data:{save_data:save_data},
					success: function (data) {
						$('#submit').attr('disabled',false);
						$("#submit").html("Submit");
						var rslt = JSON.parse(data);
						if(rslt.success){
							toastr.success(rslt.message);
						}
						dialog_support.hide();
					}
				});
			}
		});
	});	
</script>