<script type="text/javascript">
$(document).ready(function() {
    /* Build the DataTable with third column using our custom sort functions */
    var oTable = $("#test").dataTable( {
        "iDisplayLength": 25,
		 "aLengthMenu": [5,10,25,50,100],
		 "asSorting": [ "asc"], "aTargets": [ 1 ],
		 "sPaginationType": "full_numbers", "aoColumns": [  
			null, 
			null, 
			null, 
			null,
			null, 
			 ]});
     oTable.fnSort( [ [0,'asc'] ] );

     $(".taxCode").css('cursor', 'pointer');

     $(".taxCode").on('click',function(){
     	var THIS = $(this);
     	var $codes = THIS.find('span').html().split(',');
	    var $row = $(this).parents('tr');


     	if($('.TaxList').length == 0){
	     	//$(this).css('position','relative');
	     	$(this).append('<div class="row TaxList content" style="width:550px;z-index:30;position:absolute;top:0;right:0;background:#fff;">'+
	     					<?php
	     						if(isset($GstCodes) && !empty($GstCodes)):
	     							foreach($GstCodes as $v):
	     					?>
	     					'<span class="span12 fl tal" style="width:100px;margin-left:0;"><input id="codeVal<?php echo $v->code; ?>"  type="checkbox" value = "<?php echo $v->code; ?>" name="taxCodes[]" class="span2 fl mapedTaxCode" /><label class="span6 fl" for="codeVal<?php echo $v->code; ?>"><?php echo $v->code; ?></label></span>'+
	     					<?php
	     							endforeach;
	     						endif;
	     					?>
	     				   '<span  class="btn-form btn-success-form saveTaxCode">Save</span></div>');
	     	$.each($codes,function(index,value){
	     		$('input[value="'+value+'"]').prop("checked", true);
	     	});
	    }else{
	    	if($('.TaxList').length > 0){
		 		$('.saveTaxCode').on('click',function(e){
		 			var checkedValues = $('input.mapedTaxCode:checkbox:checked').map(function() {
					    return this.value;
					}).get();
					if(checkedValues.toString() != ''){
						THIS.html('<span style="z-index:10;">'+checkedValues.toString()+'</span>');
						$.ajax({
						    type: "POST",
						    data:"taxCode="+checkedValues.toString()+"&id="+$row.find('.id').html(),
						    url: "<?php echo base_url() ?>gstsetting/saveTaxCode",
						    success: function(data) {
						    	console.log(data);
						    }
					    });	
					}					
					$('.TaxList').remove();
			    });
			}   	
	    }
     });
     
     /*$('.saveTaxCode').on('click',function(){
     	console.log('um here');
     	
     });*/
     $('body').on('click',function(e){
     	var container = $(".taxCode");

	    if (!container.is(e.target) && container.has(e.target).length === 0){
	   		$('.TaxList').remove();
	    }
     });

}); 


</script>
<div id="content">                        
<div class="wrap">
<div class="head">
	<div class="info">
							<!--<h1><?php echo element('compName', $this->session->userdata('logged_in')) ?> [ 
								<?php echo element('compNo', $this->session->userdata('logged_in')) ?> ]</h1>-->
			<ul class="breadcrumb">
            	<li><a href="#"><?php echo $this->lang->line('dashboard') ?></a> <span class="divider">-</span></li>
                <li><a href="#"><?php echo $this->lang->line('module') ?></a> <span class="divider">-</span></li>
                <li class="active"><?php echo $this->lang->line('gstFieldMapping') ?></li>
            </ul>
	</div>
	<div class="search">
		<form action="<?php echo base_url() ?>admin/search" method="post">
			<input name="search_text" type="text" placeholder="search..."/>                                
            <button type="submit"><span class="i-magnifier"></span></button>
		</form>
	</div>                        
</div><!-- head --> 
<div class="content">
<div class="wrap">                    
	<div class="row-fluid">
		<div class="span12">
        	<div class="block">
            	<div class="head">
                	<h2><?php echo $this->lang->line('gstFieldMappingList') ?></h2>                                       
                </div>
            	<div class="content np table-sorting">
            	<table cellpadding="0" cellspacing="0" width="100%" id="test" class="editable">
                	<thead>
                    <tr>
            			<th width="5">#</th>
            			<th><?php echo $this->lang->line('item')?></th>
            			<th><?php echo $this->lang->line('description')?></th>
            			<th><?php echo $this->lang->line('taxCode')?></th>
            			<th style="display:none;">&nbsp;</th>
            		</tr>
        			</thead>
       				 <tbody>
			<?php $bil = 0;
				if($datatbls){
				foreach($datatbls as $key=>$datatbl):
				$bil++?>
            	<tr>
                	<td class="tac"><?php echo $bil; ?></td>
                	<td class="tac"><?php echo $key; ?></td>
                	<td class="tal"><?php echo $datatbl['description']; ?></td>
                	<td class="tac <?php echo $datatbl['changeable']?"taxCode":""; ?>"><span style="z-index:10;"><?php echo $datatbl['taxCode']; ?></span></td>
                	<td class="id" style="display:none;"><?php echo $datatbl['id']; ?></td>
                </tr>
            <?php endforeach; }?>
					</tbody>
			</table>                                         
			</div>

</div>   
</div>
</div>
</div>
</div>
</div>
</div>  

