<?php
$field_var = "DESCRIBE `main_salaryslip`";
$field_name = $db->run ( $field_var )->fetchAll ();

foreach ( $field_name as $row ) {
	$firstarr [] = $row ['Field'];
}

$first_var = "DESCRIBE `first_salaryslip`";
$firstfield_name = $db->run ( $first_var )->fetchAll ();
foreach ( $firstfield_name as $row1 ) {
	$secondarr [] = $row1 ['Field'];
}

$third_var = "DESCRIBE `second_salaryslip`";
$secondfield_name = $db->run ( $third_var )->fetchAll ();
foreach ( $secondfield_name as $row3 ) {
	$thirdarr [] = $row3 ['Field'];
}

$footer_var = "DESCRIBE `footer_salaryslip`";
$footerfield_name = $db->run ( $footer_var )->fetchAll ();
foreach ( $footerfield_name as $row5 ) {
	$footerarr [] = $row5 ['Field'];
}
?>

<html>
<head>
<title>Salary Slip</title>
<!--basic styles-->

<link rel="stylesheet"
	href="<?php echo SITE_URL.'/assets/backend';?>/css/font-awesome.min.css" />

<!--[if IE 7]>
		  <link rel="stylesheet" href="<?php echo SITE_URL.'/assets/backend';?>/css/font-awesome-ie7.min.css" />
		<![endif]-->

<!--page specific plugin styles-->

<link rel="stylesheet"
	href="<?php echo SITE_URL.'/assets/backend';?>/css/bootstrap-editable.css" />

<!--fonts-->

<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />

<!--ace styles-->

<link rel="stylesheet"
	href="<?php echo SITE_URL.'/assets/backend';?>/css/ace.min.css" />
<style>
td {
	height: 20px;
}
</style>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body id="main-body">



	<table border="1" style="width: 100%;">
		<tr>
			<td colspan="5" style="text-align: center; font-size: 30px;"><b
				class="first" id="header">
					<?php echo $firstarr[1];?>
				</b>&<b class="first" id="header"><?php echo $firstarr[2];?></b></td>
		</tr>
		<tr>
			<td colspan="5" style="text-align: center;">Salary Slip For The Month
				Of:<b class="first" id="header"><?php echo $firstarr[3];?></b>:<b
				class="first" id="header"><?php echo $firstarr[4];?></b>
			</td>
		</tr>
		<tr>
			<td colspan='2'><b class="first" id="header"><?php echo $firstarr[5];?></b></td>
			<td><b class="first" id="header"><?php echo $firstarr[6];?></b></td>
			<td colspan='2'></td>
		</tr>
		<tr>
			<td><b class="first" id="header"><?php echo $firstarr[7];?></b></td>
			<td colspan='4'></td>
		</tr>
		<tr>
			<td><b class="first" id="header"><?php echo $firstarr[8];?></b></td>
			<td colspan='4'></td>
		</tr>
		<tr>
			<td><b class="first" id="header"><?php echo $firstarr[9];?></b></td>
			<td><b class="first" id="header"><?php echo $firstarr[10];?></b></td>
			<td><b class="first" id="header"><?php echo $firstarr[11];?></b></td>
			<td><b class="first" id="header"><?php echo $firstarr[12];?></b></td>
			<td><b class="first" id="header"><?php echo $firstarr[13];?></b></td>
		</tr>
	</table>
	<div style="width: 100%; background: #CCC;">
		<div style="float: left; width: 46%;">
			<table border="1" style="width: 100%;" class="firsttable" id="earn">	
			<?php
			$firstnum = 1;
			foreach ( $secondarr as $row2 ) {
				if ($row2 != 'id') {
					
					?>	
						<tr>
					<td style="width:50%;<?php if($firstnum == 2){?>text-align:right;<?php }?>">
						<b class="first" id="<?php echo "earn";?>"><?php echo $row2;?></b>
					</td>
					<td style="width: 50%;"></td>
				</tr>
			<?php
				
				}
				$firstnum ++;
			}
			?>
				
			</table>
			<table style="width: 100%;">
				<tr style="text-align: right;">
					<td><input type="button" name="create" onclick="increase_n(1);"
						value="Add Earnings"></td>
				</tr>
			</table>
		</div>

		<div style="float: left; width: 54%;">
			<table border="1" style="width: 100%;" class="deduction">	
				<?php
				$secondnum = 1;
				foreach ( $thirdarr as $row4 ) {
					if ($row4 != 'id') {
						
						?>	
								<tr>
					<td style="width: 30%;"></td>
					<td style="width:50%;<?php if($secondnum == 2){?>text-align:right;<?php }?>">
						<b class="first" id="<?php echo "ded";?>"><?php echo $row4;?></b>
					</td>
					<td style="width: 50%;"></td>
				</tr>
					<?php
					
					}
					$secondnum ++;
				}
				?>
			</table>
		</div>
	</div>
	<div style="float: left; width: 100%; background: #FF000;">
		<table border='2' style="width: 100%;">
			<tr>
			<?php
			$footers = "footer";
			?>
				<td style="width: 25%;"><b class="first" id="<?php echo $footers;?>"><?php echo $footerarr[1];?></b></td>
				<td style="width: 25%;"><b></b></td>
				<td style="width: 25%;"><b class="first" id="<?php echo $footers;?>"><?php echo $footerarr[2];?></b></td>
				<td style="width: 25%;"><b></b></td>
			</tr>
			<tr>
				<td colspan='4' style="width: 25%;"><b class="first"
					id="<?php echo $footers;?>"><?php echo $footerarr[3];?></b></td>
			</tr>

			<tr>
				<td colspan='2'><b class="first" id="<?php echo $footers;?>"><?php echo $footerarr[4];?></b></td>
				<td><b class="first" id="<?php echo $footers;?>"><?php echo $footerarr[5];?></b></td>
				<td><b class="first" id="<?php echo $footers;?>"><?php echo $footerarr[6];?></b></td>
			</tr>
		</table>
	</div>
	<script>
	//$(document).ready(function(){
var size_ini =Math.floor(Math.random() * (1000 + 1));
function increase_n(size) 
{
    var size_increase = size_ini++;
      $.ajax({
		type:"POST",
		url:"<?php echo $link->link("testing", Admin);?>",
		data:'earning=empty_'+size_increase,
		success:function(data){
			
			$(".firsttable").append(data);
			//-----------------------------------------NEXT------------------------------	
		    $(".first").on('click',function(){ 
			var value = $(this).html();
			if(value.match(/\s/g))
			{
			var value= value.trim();
			 var value1 = value.replace(/\s/g, '&nbsp;');
			}
			else
			{
			var value1 = value;
			}
			$(this).html('<input class="bhangi" type="text" name='+value1+' value='+value1+'>');
			
			$(".first").off("click");
			$(this).removeClass("first").addClass("intro");
			}).on('focusout',function(){
				alert("pehle");
				var abhi= $(".bhangi").val();
				var name= $(".bhangi").attr('name');
				var ides= $(this).attr('id');
				//alert(ides);

				if(abhi.match(/\s/g))
				{
					var abhi= abhi.trim();
					 var abhi = abhi.replace(/\s/g, '_____');
				}
				if(name.match(/\s/g))
				{
					var name= name.trim();
					 var name = name.replace(/\s/g, '_____');
				}
				if(abhi=='')
				{
					$(".bhangi").focus();
					$(".bhangi").attr('placeholder',"Can't set this field empty");
					return false;
				}
				 $.ajax({
					    type: "POST", //changed
					    url: "<?php echo $link->link("testing", Admin);?>",
					    data: 'presentvalue=' + abhi+'&pastvalue='+name+'&id='+ides, // changed
					    success: function(data){
						    alert(data);
						    if(data ==0)
						    {
							    alert("please change the value");
							    return false;
							}else{
								$('.bhangi').hide();
								$(".intro").html(data);
								$(".intro").removeClass("intro").addClass("first");
								}	
							 
					        }
					    });
				    return false;
		  });
//------------------------------------FINISH-----------------
			}
		});
}


		$(".first").on('click',function(){ 
		var value = $(this).html();
		if(value.match(/\s/g))
		{
			var value= value.trim();
			 var value1 = value.replace(/\s/g, '&nbsp;');
		}
		else
		{
			var value1 = value;
		}
		$(this).html('<input class="bhangi" type="text" name='+value1+' value='+value1+'>');
		
		$(".first").off("click");
		$(this).removeClass("first").addClass("intro");
			}).on('focusout',function(){
				alert("src");
					var abhi= $(".bhangi").val();
					var name= $(".bhangi").attr('name');
					var ides= $(this).attr('id');
					//alert(ides);
					if(abhi.match(/\s/g))
					{
						var abhi= abhi.trim();
						 var abhi = abhi.replace(/\s/g, '_____');
					}
					if(name.match(/\s/g))
					{
						var name= name.trim();
						 var name = name.replace(/\s/g, '_____');
					}
					if(abhi=='')
					{
						$(".bhangi").focus();
						$(".bhangi").attr('placeholder',"Can't set this field empty");
						return false;
					}
					 $.ajax({
						    type: "POST", //changed
						    url: "<?php echo $link->link("testing", Admin);?>",
						    data: 'presentvalue=' + abhi+'&pastvalue='+name+'&id='+ides, // changed
						    success: function(data){
							    alert(data);
							    if(data ==0)
							    {
								    alert("please change the value");
								    return false;
								}else{
									$('.bhangi').hide();
									$(".intro").html(data);
									$(".intro").removeClass("intro").addClass("first");
									}	
								  //-----------------------------------------NEXT------------------------------	
							    $(".first").on('click',function(){ 
								var value = $(this).html();
								if(value.match(/\s/g))
								{
								var value= value.trim();
								 var value1 = value.replace(/\s/g, '&nbsp;');
								}
								else
								{
								var value1 = value;
								}
								$(this).html('<input class="bhangi" type="text" name='+value1+' value='+value1+'>');
								
								$(".first").off("click");
								$(this).removeClass("first").addClass("intro");
								});
//------------------------------------FINISH-----------------
								    /*if(data !=0)
								    {
											$('.bhangi').hide();
											$(".intro").html(data);
											$(".intro").removeClass("intro").addClass("first");	
								    }*/
								    
									
						        }
						    });
					    return false;
			  });
		  
		/*$('#main-body').mouseup(function(e){ 
//alert(e.target.clone());
			if(e.target.className == "") 
	        {
				var node = $(".bhangi").val();
				$(".bhangi").hide();
				$(".").html(node);
	        }
			});*/	
	//});

		
</script>
</body>
</html>