<style>
	.sortable {list-style-type:none;margin:0;padding:0;width: auto;}	
	.sortable li{margin: 2px 20px 15px 0; padding: 8px; width: 100%; 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; cursor: pointer;display: inline-block;}
	.sortable_width li{width: 23% !important;}
</style>
<ul class="nav nav-tabs" data-tabs="tabs">
	<li class="active" role="presentation">
		<a data-toggle="tab" href="#basic_bank_template">Basic Information</a>
	</li>
	<li role="presentation">
		<a data-toggle="tab" href="#join_table_info">Joining Table</a>
	</li>
	<li role="presentation">
		<a data-toggle="tab" href="#table_view">Table View</a>
	</li>
	<li role="presentation">
		<a data-toggle="tab" href="#template_setting">Template Settings</a>
	</li>
</ul>
<div class="tab-content">
	<div class="tab-pane fade in active" id="basic_bank_template">
		<?php echo form_open('bank_template_setting/bank_template_save/'.$view_id, array('id'=>'bank_template_save','class'=>'form-inline')); ?>
			<div class="form-group">
				<?php
					if($template_data->prime_bank_template_setting_id){
						$bank_template_id = $template_data->prime_bank_template_setting_id;
					}else{
						$bank_template_id = 0;
					}
					
					echo form_input( array('name'=>'bank_template_id', 'id'=>'bank_template_id', 'type'=>'Hidden','value'=>$bank_template_id));
					echo form_label("Template Name", 'template_name', array('class' => 'required'));
					echo form_input(array( 'name' => 'template_name', 'id' => 'template_name', 'class' => 'form-control input-sm', 'placeholder'=>"Template Name"),$template_data->template_name);
				?>
			</div>
			<div class="form-group">
				<?php
					$template_for_val = "";
					if($template_data->template_for){
						$template_for_val = explode(",",$template_data->template_for);
					}
					echo form_label("Template For", 'template_for', array('class' => 'required'));
					echo form_dropdown(array('name' => 'template_for[]','multiple id' =>'template_for','class' => 'form-control input-sm select2'),$template_for_list,$template_for_val);
					echo "<label><input name='all_category_select' id='all_category_select' type='checkbox'> Select All</label>";
				?>
			</div>
			<div class="form-group">
				<?php
					$select_table_val = array('cw_employees','cw_transactions');
					$select_table     = '';
					if($template_data->select_table){
						$select_table_val = array_merge($select_table_val,explode(",",$template_data->select_table));
					}
					echo form_label("Select Table", 'select_table', array('class' => 'required'));
					echo form_dropdown(array('name' => 'select_table[]','multiple id' =>'select_table','class' => 'form-control input-sm select2'),$table_list,$select_table_val);
				?>
			</div>
			<div class="form-group">
				<?php
					$table_column_val = "";
					if($template_data->table_column){
						$table_column_val = explode(",",$template_data->table_column);
					}
					
					echo form_label("Select Column", 'table_column', array('class' => 'required'));
					echo form_dropdown(array('name' => 'table_column[]','multiple id' =>'table_column','class' => 'form-control input-sm select2'),$columns_list,$table_column_val);
				?>
			</div>
			<div class="form-group">
				<?php
					$select_column_val = "";
					if($template_data->sort_column){
						$select_column_val = explode(",",$template_data->sort_column);
					}
					
					echo form_label("Sort Option", 'sort_column', array('class' => ''));
					echo form_dropdown(array('name' => 'sort_column[]','multiple id' =>'sort_column','class' => 'form-control input-sm select2'),$columns_list,$select_column_val);
				?>
			</div>
			<div class="form-group"  style='margin-bottom:10px;'>
				<button class='btn btn-primary btn-sm' id="bank_template_submit">Submit</button>
			</div>
		<?php echo form_close(); ?>
	</div>
	<div class="tab-pane fade" id="join_table_info">
		<?php  
			echo form_open('bank_template_setting/save_join_table/' . $view_id,array('id'=>'save_join_table','class'=>'form-inline','style'=>'padding:15px;'));
			echo $join_list;
			echo form_close();
		?>
	</div>
	<!-- Table Sort View -->
	<div class="tab-pane fade" id="table_view" style="padding:15px;">
		<?php 
				$template_tab_view = json_decode($template_tab_view);
				$table_content     = $template_tab_view->table_content;
				echo $table_content;
		?>
	</div>
	<div class="tab-pane fade" id="template_setting">
		<?php echo form_open('bank_template_setting/template_setting_save/'.$view_id, array('id'=>'template_setting_save','class'=>'form-inline')); ?>
			<div class="form-group">
				<?php
					echo form_input( array('name'=>'bank_template_id', 'id'=>'bank_template_id', 'type'=>'Hidden','value'=>$view_id));
					echo form_input( array('name'=>'template_id', 'id'=>'template_id', 'type'=>'Hidden','value'=>0));
					echo form_label("Template Column", 'template_column', array('class' => 'required'));
					echo form_dropdown(array('name' => 'template_column','id' =>'template_column','class' => 'form-control input-sm'),$template_column_list);
				?>
			</div>
			<div class="form-group">
				<?php
					$num_list = array(""=>"-- Select Length --");
					for($i = 1; $i <= 255; $i++) {
						$num_list[]  = $i;
					}
					echo form_label("Character Length ", 'char_length', array('class' => 'required'));
					echo form_dropdown(array('name' => 'char_length','id' =>'char_length','class' => 'form-control input-sm'),$num_list);
				?>
			</div>
			<div class="form-group">
				<?php
					$num_list = array(""=>"-- Select Space --");
					for($i = 1; $i <= 255; $i++) {
						$num_list[]  = $i;
					}
					echo form_label("Character Space ", 'char_space', array('class' => 'required'));
					echo form_dropdown(array('name' => 'char_space','id' =>'char_space','class' => 'form-control input-sm'),$num_list);
				?>
			</div>
			<div class="form-group">
				<?php
					$align_list = array(""=>"-- Select Align --","1"=>"Left","2"=>"Right");
					echo form_label("Character Align ", 'char_align', array('class' => 'required'));
					echo form_dropdown(array('name' => 'char_align','id' =>'char_align','class' => 'form-control input-sm'),$align_list);
				?>
			</div>
			<div class="form-group">
				<?php
					echo form_label("Prefix", 'prefix', array('class' => ''));
					echo form_input(array( 'name' => 'prefix', 'id' => 'prefix', 'class' => 'form-control input-sm', 'placeholder'=>"Prefix"));
				?>
			</div>
			<div class="form-group"  style='margin-bottom:10px;'>
				<button class='btn btn-primary btn-sm' id="template_setting_submit">Submit</button>
			</div>
		<?php echo form_close(); ?>
		<!-- Additional Table Column Name View -->
		<div id='column_content' style="padding:10px; !important; overflow: auto;">
			<?php
				echo $column_content;
			?>
		</div>
	</div>
</div>

<script type="text/javascript">
$(document).ready(function(){
	call_select();
	var bank_template_id = parseInt($('#bank_template_id').val());
	if(bank_template_id === 0){
		get_table_column();
	}
	var template_for_val    = "#<?php echo $template_for_val;?>";
	if((template_for_val === "") || (template_for_val === "#")){
		$('#template_for option:selected').removeAttr('selected');
	}
	
	var select_table_val    = "#<?php echo $select_table_val;?>";
	if((select_table_val === "") || (select_table_val === "#")){
		$('#select_table option:selected').removeAttr('selected');
	}
	
	var table_column_val    = "#<?php echo $table_column_val;?>";
	if((table_column_val === "") || (table_column_val === "#")){
		$('#table_column option:selected').removeAttr('selected');
	}
	
	var select_column_val    = "#<?php echo $select_column_val;?>";
	if((select_column_val === "") || (select_column_val === "#")){
		$('#sort_column option:selected').removeAttr('selected');
	}
	
	$("#all_category_select").click(function(){
		if($("#all_category_select").is(':checked') ){
			$("#template_for > option").prop("selected","selected");
			$("#template_for").trigger("change");
		}else{
			$("#template_for > option").removeAttr("selected");
			$("#template_for").trigger("change");
		}
	});
	
	
	/* GET TABLE COLUM LIST*/
	$("#select_table").change(function(){
		get_table_column();
	});
		
	$('#bank_template_save').validate($.extend({
		submitHandler: function (form){
			$("#bank_template_submit").html("<i class='fa fa-spinner fa-spin'></i> Processing...");
			$('#bank_template_submit').attr('disabled','disabled');
			$(form).ajaxSubmit({
				success: function (response){
					$('#bank_template_submit').attr('disabled',false);
					$("#bank_template_submit").html("Submit");
					if(response.success){
						toastr.success(response.message);
						table_support.refresh();
					}else{
						toastr.error(response.message);
					}
					$('.modal').modal('hide');
				},
				dataType: 'json'
			});
		},
		rules:{
			template_name: "required",
			"template_for[]": "required",
			"select_table[]": "required",
			"table_column[]": "required",
		}
	}));
	
	//Table join save list
	$('#save_join_table').validate({
		submitHandler:function(form) {
			var isValid = true;
			$("select[name='line_prime_table[]']").each(function() {
				if($(this).val() == "" && $(this).val().length < 1) {
					$(this).addClass('error');
					isValid = false;
				} else {
					$(this).removeClass('error');
				}
			});
			$("select[name='line_prime_col[]']").each(function() {
				if($(this).val() == "" && $(this).val().length < 1) {
					$(this).addClass('error');
					isValid = false;
				} else {
					$(this).removeClass('error');
				}
			});
			$("select[name='line_join_type[]']").each(function() {
				if($(this).val() == "" && $(this).val().length < 1) {
					$(this).addClass('error');
					isValid = false;
				} else {
					$(this).removeClass('error');
				}
			});
			$("select[name='line_join_table[]']").each(function() {
				if($(this).val() == "" && $(this).val().length < 1) {
					$(this).addClass('error');
					isValid = false;
				} else {
					$(this).removeClass('error');
				}
			});
			$("select[name='line_join_col[]']").each(function() {
				if($(this).val() == "" && $(this).val().length < 1) {
					$(this).addClass('error');
					isValid = false;
				} else {
					$(this).removeClass('error');
				}
			});
			if(isValid) {
				$("#save_join_table_btn").html("<i class='fa fa-spinner fa-spin'></i> Processing...");
				$('#save_join_table_btn').attr('disabled','disabled');
				$(form).ajaxSubmit({
					success: function (response){
						$('#save_join_table_btn').attr('disabled',false);
						$("#save_join_table_btn").html("Save");
						toastr.success(response.message);
					},
					dataType: 'json'
				});
			}else{
				toastr.error("Map all table join");
			}
			//$('.modal').modal('toggle');
		}
	});
	
	
	$('#template_setting_save').validate($.extend({
		submitHandler: function (form){
			$("#template_setting_submit").html("<i class='fa fa-spinner fa-spin'></i> Processing...");
			$('#template_setting_submit').attr('disabled','disabled');
			$(form).ajaxSubmit({
				success: function (response){
					$('#template_setting_submit').attr('disabled',false);
					$("#template_setting_submit").html("Submit");
					if(response.success){
						toastr.success(response.message);
						$("#column_content").html(response.column_content);
					}else{
						toastr.error(response.message);
					}
					document.getElementById("template_setting_save").reset();
					$('#template_column').attr("style", "pointer-events: auto;");
					$("#template_id").val(0);
				},
				dataType: 'json'
			});
		},
		rules:{
			template_column: "required",
			char_length: "required",
			char_space: "required",
			char_align: "required",
		}
	}));
	
	//Mandatory Fields Do Not Remove by user
	$("#select_table").change(function(){
		var obj = ["cw_employees", "cw_transactions"];
		$.each( obj, function(key,value){
			$('#select_table option[value="' + value +'"]').prop("selected", true);
		});
	});
	default_sortable();
});

/* TABLE SORTABLE - START */
function default_sortable(){
	var table_idsInOrder = [];
	$( ".default_table" ).sortable({
		update: function( event, ui ){
			table_idsInOrder = [];
			$('#template_sortable tr > th').each(function() {
				table_idsInOrder.push($(this).attr('id'));
			});
			if(table_idsInOrder){
				$.ajax({
					type: "POST",
					url: '<?php echo site_url($controller_name . "/table_sort_update"); ?>',
					data: {table_idsInOrder:table_idsInOrder},
					success: function(data) {
						var rslt = JSON.parse(data);
						if(rslt.success){
							toastr.success(rslt.message);
						}
					},
				});
				get_table_view_data();
			}
		},connectWith: '.default_table'
	});
}
//GET DEFAULT TABLE UI
function get_table_view_data(){
	var bank_template_id = '<?php echo $view_id; ?>';
	if(bank_template_id){
		$.ajax({
			type: "POST",
			url: '<?php echo site_url($controller_name . "/get_table_view_data"); ?>',
			data: {bank_template_id:bank_template_id},
			success: function(data){
				var rslt = JSON.parse(data);
				if(rslt.success){
					$('#table_view').html(rslt.table_content);
					default_sortable();
				}					
			}
		});
	}
}
/* TABLE SORTABLE - END */

//SELECT CALL
function call_select(){
	$(function(){
		$('.select2').select2();
		$('.select2-tags').select2({
			tags: true,
			tokenSeparators: [','],
		});
	});
}

function get_char_edit(template_char_id){
	if(template_char_id){
		$.ajax({
			type: "POST",
			url: '<?php echo site_url($controller_name . "/get_char_edit"); ?>',
			data: {template_char_id:template_char_id},
			success: function(data) {
				var rslt = JSON.parse(data);
				if(rslt.success){
					$("#template_id").val(rslt.edit_result.prime_bank_template_tab_id);
					$("#template_column").val(rslt.edit_result.template_column);
					$('#template_column').attr("style", "pointer-events: none;");
					$("#char_length").val(rslt.edit_result.char_length);
					$("#char_space").val(rslt.edit_result.char_space);
					$("#char_align").val(rslt.edit_result.char_align);
					$("#prefix").val(rslt.edit_result.prefix);
				}else{
					toastr.error(rslt.message);
				}
			},
		});
	}
}

function remove_char_column(template_char_id,bank_template_id){
	if(confirm("Are you sure to delete?")){
		if(template_char_id){
			$.ajax({
				type: "POST",
				url: '<?php echo site_url($controller_name . "/remove_char_column"); ?>',
				data: {template_char_id:template_char_id,bank_template_id:bank_template_id},
				success: function(data) {
					var rslt = JSON.parse(data);
					if(rslt.success){
						$("#column_content").html(rslt.column_content);
						toastr.success(rslt.message);
					}else{
						toastr.error(rslt.message);
					}
				},
			});
		}
	}
}

function get_table_column(){
	var select_table = $('#select_table').val();
	if(select_table){
		$.ajax({
			type: "POST",
			url: '<?php echo site_url($controller_name . "/get_table_column"); ?>',
			data: {select_table:select_table},
			success: function(data) {
				var rslt = JSON.parse(data);
				$('#table_column option:selected').removeAttr('selected');
				$('#sort_column option:selected').removeAttr('selected');
				if(rslt.success){
					if(rslt.table_column){
						$('#table_column').empty();
						$('#sort_column').empty();
						var option = "";
						$.each(rslt.table_column, function (index, value) {
							option += '<option value="' + index + '">' + value + '</option>';
						});
						$('#table_column').append(option);
						$('#sort_column').append(option);
					}
					call_select();
				}else{
					toastr.error(rslt.message);
				}
			},
		});
	}
}