<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    
 
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/style-old.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/grid.css" />


	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL;?>css/jquery.jqplot.min.css" />

<style type="text/css">
    body {
	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
	font-size: .79rem;
	background:#fff;
}
.ui-jqgrid .ui-jqgrid-view, .ui-jqgrid-bdiv, .ui-jqgrid-btable{width: 100% !important; overflow-x:hidden !important;}

.ui-state-hover .ui-pg-div .ui-icon{ margin: -1px 0; padding:0; height:18px;}

.ui-icon-closethick{cursor: pointer;}

#graphRight {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	margin-top: 0px;
	width: 425px;
	height: 285px;

	z-index: 0;

}

#graphRightInner {
	position: relative;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 5px 5px 5px 5px;
	padding : 30px;
	width: 425px;
	height: 285px;
	border: 1px solid black;
	z-index: 1;

}

.ui-front {
	z-index: 100;
}
.ui-dialog-titlebar-close {
  visibility: hidden;
}
label[for="ExpenseFromDate"] {
	margin-right: 10px;
}
label[for="ExpenseToDate"] {
	margin-right: 10px;
}
</style>
<script>
	var lblEnterName = '<?php echo __("LBL_ENTER_NAME"); ?>';
	var lblNameMustHaveLessThan = '<?php echo __("LBL_THE_NAME_MUST_HAVE_LESS_THAN"); ?>';
	var lblCharacters = '<?php echo __("LBL_CHARACTERS"); ?>';
	var lblParticipantExist = '<?php echo __("LBL_PARTICIPANT_ALREADY_EXIST"); ?>';
	var lblParticipantShouldNotContain = "<?php echo __('LBL_PARTICIPANT_NAME_SHOULD_NOT_CONTAIN'); ?>";
	var lblCreatedBy = "<?php echo __('LBL_CREATED_BY'); ?>";
	var lblOn = "<?php echo __('LBL_ON'); ?>";
	var lblClickToLogin = "<?php echo __('LBL_CLICK_TO_LOGIN'); ?>";
	var lblLoggedInAs = "<?php echo __('LBL_LOGGED_IN_AS'); ?>";
	var lblChangedOn = "<?php echo __('LBL_CHANGED_ON'); ?>";
	var lblPaidBy = "<?php echo __('LBL_PAID_BY'); ?>";
	var lblPreviousDescription = "<?php echo __('LBL_PREVIOUS_DESCRIPTION'); ?>";
	var lblNewDescription = "<?php echo __('LBL_NEW_DESCRIPTION'); ?>";
	var lblWhoPaid = "<?php echo __('LBL_WHO_PAID'); ?>";
	var lblHowMuch = "<?php echo __('LBL_HOW_MUCH'); ?>";
	var lblInvoles = "<?php echo __('LBL_INVOLVES'); ?>";
	var lblWhen = "<?php echo __('LBL_WHEN'); ?>";
	var lblWhatReason = "<?php echo __('LBL_WHAT_REASON'); ?>";
	var lblForYou = "<?php echo __('LBL_FOR_YOU'); ?>";
	var lblExpenseList = "<?php echo __('LBL_EXPENSE_LIST'); ?>";
    var lblAddExpense = '<?php echo __("LBL_ADD_EXPENSE"); ?>';
    var lblEditExpense = '<?php echo __("LBL_EDIT_EXPENSE"); ?>';
    var lblDeleteExpense = '<?php echo __("LBL_DELETE_EXPENSE"); ?>';
    var lblFindExpenses = '<?php echo __("LBL_FIND_EXPENSES"); ?>';
    var lblSave = '<?php echo __("LBL_SAVE"); ?>';
    var lblCancel = '<?php echo __("LBL_CANCEL"); ?>';
    var lblSaveContinue = '<?php echo __("LBL_SAVE_CONTINUE"); ?>';
    var lblWantDeleteExpense = '<?php echo __("LBL_WANT_DELETE_EXPENSE"); ?>';
    var lblPleaseEnterNameOfExpense = '<?php echo __("LBL_ENTER_NAME_OF_YOUR_EXPENSE"); ?>';
    var lblExpenseNameLessThanChar = '<?php echo __("LBL_EXPENSE_NAME_LESS_THAN_CHARACTER"); ?>';
    var lblValidAmount = '<?php echo __("LBL_VALID_AMOUNT"); ?>';
    var lblDistributedAmountSame = '<?php echo __("LBL_DISTRIBUTED_AMOUNT_SAME_AS_EXPENSE_AMOUNT"); ?>';
    var lblDateNotValid = '<?php echo __("LBL_DATE_NOT_VALID"); ?>';
    var lblCantDownload = "<?php echo __('LBL_SORRY_CANT_DOWNLOAD'); ?>";
    var lblBalanceOf = "<?php echo __('LBL_BALANCE_OF'); ?>";
    var lblClickTransactionMadeAlready = "<?php echo __('LBL_CLICK_TRANSACTION_MADE_ALREADY'); ?>";
    var lblEnterParticipantName = "<?php echo __('LBL_PLEASE_ENTER_PARTICIPANT_NAME'); ?>";
    var lblExpenseNameLessChar = "<?php echo __('LBL_EXPENSE_NAME_LESS_THAN_CHAR'); ?>";
    var lblParticipantAlreadyExist = "<?php echo __('LBL_PARTICIPANT_EXIST'); ?>";
    var lblName = "<?php echo __('LBL_NAME'); ?>";
    var lblTotalCharge = "<?php echo __('LBL_TOTAL_CHARGE'); ?>";
    var lblTotalPaid = "<?php echo __('LBL_TOTAL_PAID'); ?>";
    var lblBalance = "<?php echo __('LBL_BALANCE'); ?>";
    var lblParticipantList = "<?php echo __('LBL_PARTICIPANT_LIST'); ?>";
    var lblAddParticipant = "<?php echo __('LBL_ADD_PARTICIPANT'); ?>";
    var lblEditParticipant = "<?php echo __('LBL_EDIT_PARTICIPANT'); ?>";
    var lblDeleteParticipant = "<?php echo __('LBL_DELETE_PARTICIPANT'); ?>";
    var lblFindParticipant = "<?php echo __('LBL_FIND_PARTICIPANT'); ?>";
    var lblWantDeleteParticipant = "<?php echo __('LBL_WANT_DELETE_PARTICIPANT'); ?>";
    var lblDataSavingFailed = "<?php echo __('LBL_DATA_SAVING_FAILED'); ?>";
    var lblEmailSent = '<?php echo __("LBL_EMAIL_SENT"); ?>';
    var lblEmailSentFail = '<?php echo __("LBL_EMAIL_SENT_FAIL"); ?>';
    var lblDataSaved = '<?php echo __("LBL_DATA_SAVED_SUCCESSFULLY"); ?>';
    var lblExpenseNotFound = '<?php echo __("LBL_EXPENSE_NOT_FOUND"); ?>';
</script>
<script type="text/javascript">

	$(function() {
	$( "#tabs" ).tabs();
	});
</script>

</head>
<body>
<?php
	echo $this->Form->input('expenseData', array('type' => 'hidden','id'=>'expenseData','value'=>$expenseData));  
	echo $this->Form->input('justCreated', array('type' => 'hidden','id'=>'justCreated','value'=>$justCreated));  
	echo $this->Form->create(null, array('id'=> 'loadForm','url' => array('controller' => 'Expense', 'action' => 'loadTab')));	
	echo $this->Form->end();  
?>

 



 <h1 class="tabTitle"><div id="expenseTitleDiv"></div></h1>
 <table><tr><td> <div id="expenseDescDiv"></div></td><td text-align:right><div id="expenseLoginAsDiv" style="text-align:right"></div></td></tr></table>
 <table>
	<tr><td><strong><div id="expenseCreatedByDiv"></div></strong></td><td class="tabRight" style="text-align:right">
		<a style="cursor:pointer" onClick="gotoHome()"> <img title="Visit Home Page" src="<?php echo CDN_URL;?>images/home-icon.png" alt=""/> <?php echo __("LBL_HOME"); ?> </a>
		|<a  style="cursor:pointer" onClick="createGroupExpense()"><?php echo __("LBL_NEW_GROUP_EXPENSECOUNT"); ?></a>
		|<a  style="cursor:pointer" onClick="createMessExpense()"><?php echo __("LBL_NEW_MESS_EXPENSECOUNT"); ?></a>
		|<a  style="cursor:pointer" onClick="createFamilyExpense()"><?php echo __("LBL_NEW_FAMILY_EXPENSECOUNT"); ?></a>
		<!-- <a style="cursor:pointer"  onClick="dashBoard.printExpense()">| <?php echo __("LBL_PRINT"); ?></a> -->
		<a style="cursor:pointer"  href="<?php echo HTTP_SITE_URL.'Expense/printReport/'.$uniqueURL; ?>" onClick="printReport()">| <?php echo __("LBL_PRINT"); ?></a>
		 
		</td>
	
	</tr></table>
<div id="participantBox">

	<div class="round">
        <table class="gridTable" style="text-align:left"  >
             <tr>
                <th>
                   <div id="expense_table_title_id"> <?php echo __("LBL_CLICK_NAME_TO_LOGIN"); ?></div>
                </th>
                <th  >
                    <a style="cursor:pointer" id="create-participant"><img src="<?php echo CDN_URL;?>images/add-icon.png" alt=""/> <?php echo __("LBL_ADD_PARTICIPANT"); ?></a>
                </th>
            </tr>
        </table>  
    </div>  
					
					
					
    <div class="contentDisplay" id="div_participant">
        
     </div>
				   
</div>
 
 
<div id="tabs" style="display:none">
	<ul>
	<li><a href="#tabs-1"><img alt="Expenses" src="<?php echo CDN_URL;?>images/expense_icon.png" align="absmiddle"> <?php echo __("LBL_EXPENSE"); ?></a></li>
	<li><a href="#tabs-2"><img alt="Expenses" src="<?php echo CDN_URL;?>images/balance_icon.png" align="absmiddle"> <?php echo __("LBL_BALANCE"); ?></a></li>
	<li><a href="#tabs-3"><img alt="Expenses" src="<?php echo CDN_URL;?>images/participant_icon.png" align="absmiddle"> <?php echo __("LBL_PARTICIPANTS"); ?></a></li>
	<li><a href="#tabs-4"><img alt="Expenses" src="<?php echo CDN_URL;?>images/log_icon.png" align="absmiddle"> <?php echo __("LBL_LOGS"); ?></a></li>
	<li><a href="#tabs-5"><img alt="Expenses" src="<?php echo CDN_URL;?>images/share_icon.png" align="absmiddle"> <?php echo __("LBL_SHARE"); ?></a></li>
	<li><a href="#tabs-6"><img alt="Expenses" src="<?php echo CDN_URL;?>images/setting_icon.png" align="absmiddle"> <?php echo __("LBL_SETTINGS"); ?></a></li>
	</ul>	
	<div id="tabs-1">
	  <div class="tabContent">
		 <style type="text/css">    
		   
		    .jqplot-yaxis-tick {
		      white-space: nowrap;
		    }
		  </style>
	
			<table id="grid"><tr><td/></tr></table>
			<div id="expense_pager"> </div>
			</div>
    </div>
	
	<div id="tabs-2">
	  <div class="tabContent">  
	  
	  		<div id="balanceDivId" class="graph">
                	<div class="graphLeft">
                    	<a id="slideRight" href="#"><img src="<?php echo CDN_URL;?>images/slide-right-icon.png" alt=""/></a>
                        
                    	<div   id="balance_chart" style=" height:250px;"></div>
                       <!-- <div class="graphBtn"><a id="btnDownloadImage"  >Download Graph</a></div> -->
                          
                    </div>
                    <div class="graphRight">
                    	<a id="slideLeft" href="#"><img src="<?php echo CDN_URL;?>images/slide-left-icon.png" alt=""/></a>

                    	<h2>How to balance?</h2>
                        <div class="balanceContent" id="balance_payment_div"></div>
                        <div class="blanceLink">
                        	<img src="<?php echo CDN_URL;?>images/info-icon.png" alt=""/>  <?php echo __("LBL_CLICK_ON_THE"); ?> <img src="<?php echo CDN_URL;?>images/tick-icon.png" alt=""/><?php echo __("LBL_SIGN_IF_TRANSACTION_MADE"); ?>
                        </div>
                    </div>
                </div>

		</div>
	</div>
	<div id="tabs-3"> 	
	  <div class="tabContent">
		   <!-- Tab Participant List -->
		<table id="participant_grid"><tr><td/></tr></table>
		<div id="participant_pager"> </div> 
		</div>	
	</div>
 
	<div id="tabs-4" >
	  <div class="tabContent">
	  
		 <?php 
			 echo $this->Form->create(null, array('id'=> 'viewLogForm','return'=>false,'url' => array('controller' => 'Expense', 'action' => 'displayLog')));
			
		?>
		<?php echo $this->Form->hidden('logExpenseId'); ?> 
	
		<table>
			<tr>
				<td> <?php echo $this->Form->input('fromDate',array('readonly'=>true,'lable'=>false)); ?></td>
				<td><?php echo $this->Form->input('toDate',array('readonly'=>true,'lable'=>false));?></td>
				<td><?php echo $this->Form->end('View Log');?> <img  id="loadImg" style="display:none;margin-top:-10px;" src="<?php echo CDN_URL;?>images/loading.gif" /></td>
			</tr>
		</table> 
		
		
		<table id="log_grid"><tr> <td></td></tr></table>
		 <div id="log_pager"></div>  
	  </div>
	</div>
	 
	 <div id="tabs-5">	
	  <div class="tabContent">
			<?php 
			 echo $this->Form->create(null, array('id'=> 'sendEmailForm','url' => array('controller' => 'Expense', 'action' => 'sendEmail')));
			  echo $this->Form->hidden('emailExpenseTitle'); 
			  echo $this->Form->hidden('emailUniqueURL');
			  
			 ?> 
	 
			 <div><b><?php echo __("LBL_COPY_TEXT_INTO_EMAIL_SEND_GROUP"); ?></b><br/>  </div>
			<div id = "divExpenseURL"></div>
			<div id = "divExpenseFacebookURL"></div><br/>
			<p><?php echo __("LBL_EXPENSECOUNT_TOOL_CREATE_GROUP_MESS_FAMILY_EXPENSE"); ?></p>
			<table><tr><td> Or </br/> </br/> <?php echo __("LBL_PUT_EMAIL_ADDRESS"); ?>:<?php echo $this->Form->input('email',array('label'=>false,'email' => 'Please provide your email','length'=>'200px','required'=>'true','style'=>'width:240px; height:20px;'));    ?>


<br/>
<?php echo $this->Form->end('Send');?> <img  id="loadImg1" style="display:none;" src="<?php echo CDN_URL;?>images/loading.gif" /></p></td></tr></table>
		</div>
	 </div>
	 <div id="tabs-6">	
	  <div class="tabContent">
	 	<b><?php echo __("LBL_GENERAL_INFORMATION"); ?></b><br/>
	 
			<?php 
			 echo $this->Form->create(null, array('id'=> 'updateGroupExpenseForm','url' => array('controller' => 'Home', 'action' => 'updateGroupExpense')));
			?> 
			<span id="error_title"></span><br/>	 
			<span id="error_currency"></span><br/>
			<?php 
					echo $this->Form->hidden('expenseid'); 
				  	echo $this->Form->hidden('version'); 
				    echo $this->Form->hidden('expenseType',array("value"=>"2")); 
			?> 
			<table>		
				<tr> <td><?php echo __("LBL_TITLE"); ?></td><td><?php echo $this->Form->input('title',array('label'=>false,'title' => 'Please provide title','length'=>'200px','required'=>'false'));    ?></td></tr>
				
				<tr> <td><?php echo __("LBL_CURRENCY"); ?></td><td><?php echo $this->Form->input('currency',array('label'=>false)) ; ?></td></tr>
				
				<tr> <td><?php echo __("LBL_DESCRIPTION"); ?></td><td><?php echo $this->Form->textarea('description',array('rows' => '5', 'cols' => '45'));?></td></tr>
				<tr> <td>&nbsp;</td><td><br/><?php echo $this->Form->end('Save');?> <img id="loadImg2" style="display:none;" src="<?php echo CDN_URL;?>images/loading.gif" /></td></tr>
			</table> 
	 </div>
	 </div>
</div>

	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="<?php echo CDN_URL; ?>js/excanvas.js"></script><![endif]-->


	<script src="<?php echo CDN_URL; ?>js/jquery-1.11.0.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery-ui.js"></script>
	<script src="<?php echo CDN_URL; ?>js/i18n/grid.locale-en.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery.jqGrid.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery.jqplot.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.barRenderer.min.js"></script>

	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.pointLabels.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/group_expense.js"></script>
  
 
<?php 

echo $this->Form->create(null, array('id'=>'expenseForm','url' => array('controller' => 'Expense', 'action' => 'changeGroupExpense')));


echo $this->Form->end();

echo $this->Form->create(null, array('id'=>'participantForm','url' => array('controller' => 'Expense', 'action' => 'changeParticipant')));


echo $this->Form->end();
  
?>
 
 
 <?php 
		echo $this->Form->create("Expense", array('target'=>'blank','id'=> 'printForm','url' => array('controller' => 'Expense', 'action' => 'printExpense')));
	
		echo $this->Form->input('printExpenseList', array('type' => 'hidden','id'=>'printExpenseList'));
		echo $this->Form->input('printExpense', array('type' => 'hidden','id'=>'printExpense'));
		echo $this->Form->input('printBalance', array('type' => 'hidden','id'=>'printBalance'));
		echo $this->Form->input('printNames', array('type' => 'hidden','id'=>'printNames'));
		
		echo $this->Form->end();	
?>

  
 <script>



$(function() {
	$("#tabs").tabs({        
		activate: function( event, ui ) {
	    	var newIndex = ui.newTab.index();

	    	if(newIndex == 0){      
	    		//  $("#balance_payment_div").html("");	    			
	    			dashBoard.setExpenseGridExtension(); 	        	 
	        } else if(newIndex == 1){      
	    		//  $("#balance_payment_div").html("");
	    			dashBoard.drawGraph(); 	        	 
	        }  else if(newIndex == 2){      
	    		//  $("#balance_payment_div").html("");
	    		dashBoard.resetParticipantBalance();
    			dashBoard.displayParticipantList(); 	  
    			dashBoard.setParticipantGridExtension(); 	        	 
        	} else if(newIndex == 3){     
        		 
        		dashBoard.generateLogList("",1);
        	
        	 
            	if($("#ExpenseFromDate").val() == "" && $("#ExpenseToDate").val() == ""){
	            	var currentDate = new Date();
	            	var lastWeek = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
	        		 $("#ExpenseFromDate").datepicker("setDate",lastWeek );
	        		 $("#ExpenseToDate").datepicker("setDate", new Date());
            	}
       		 
        		       	 
        	}  else if(newIndex == 4){      
        		var expense_url = "<?php echo HTTP_SITE_URL."/";?>"+dashBoard.expense.unique_url;
        		$("#divExpenseURL").html('<br/><?php echo __("LBL_THE_GROUP_EXPENSE"); ?> "'+dashBoard.expense.title+'" <?php echo __("LBL_ACCESSIBLE_ON_EXPENSECOUNT"); ?> <?php echo __("LBL_THE_URL_IS"); ?>:<br/> <a style="color:#0000CD; background-color:transparent;" target=blank href="'+expense_url+'"  >'+expense_url+'</a> ');
        		$("#divExpenseFacebookURL").html("<br/><?php echo __("LBL_ACCESS_FROM_MOBILE"); ?><br/>");
        		       	 
        	}  else if(newIndex == 5){      
        		 
        		$("#ExpenseExpenseid").val(dashBoard.expense.id);	
	    		 $("#ExpenseTitle").val(dashBoard.expense.title);	
	    		 $("#ExpenseCurrency").val(dashBoard.expense.currency);
	    		 $("#ExpenseDescription").val(dashBoard.expense.description);        	 
        	}    
		} 
	});
});
</script>
   
    <script>

    $(function() {
    	$( "input[type=submit]" )
    	.button()
    	});

			$("#slideRight").hide();
			//Slider js
			$("#slideLeft").click(function(){
				$('.graphRight').hide(1000);
				$('.graphLeft').animate({width: 740}, {duration: 1000});
				$("#slideRight").show();
			});
			$("#slideRight").click(function(){
				$("#slideRight").hide();
				$('.graphLeft').animate({width: 298}, {duration: 1000});
				$('.graphRight').show(1000);
			});

 
	$("#btnDownloadImage").click(function( event ) {
		 dashBoard.createGraphImage()
	});

	  $( "#ExpenseFromDate" ).datepicker({
		  changeMonth: true,
		  changeYear: true,
		  yearRange: "2015:2099",		 
		  dateFormat: "yy-mm-dd" 
		   
		  });

	  $( "#ExpenseToDate" ).datepicker({
		  changeMonth: true,
		  changeYear: true,
		  yearRange: "2015:2099",		  
		  dateFormat: "yy-mm-dd"
		 
		  });
	  
	 function createGroupExpense(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL;?>/Home/createGroupExpense";
		}
	 
	 }
	 
	 function createMessExpense(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL;?>/Home/createMessExpense";
		}
	 
	 }
	 
	 function createFamilyExpense(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL;?>/Home/createFamilyExpense";
		}
	 
	 }
	 
  	function gotoHome(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL;?>";
		}
	 
	 } 	
	 
	 function printGroupExpense(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL;?>/Home/print";
		}
	 
	 }
	 
	 function printReport(){ 
	 
	 	if (top.location!= self.location) {
			top.location = "<?php echo HTTP_SITE_URL.'Expense/printReport/'.$uniqueURL; ?>";
		}
	 
	 }
	
 	
	 
</script>
  
   
  
  <style>
 
 

fieldset { padding:0; border:0; margin-top:5px; }
 

 
</style>

<div id="dialog-form" title="New Participant" style="display:none"> 
	<p class="validateTips"></p>
	<form>
	<fieldset>
	<label for="name"><?php echo __("LBL_NAME"); ?></label>
	<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
	 
	 
	<input type="submit" tabindex="-1" style=" top:-1000px">
	</fieldset>
	</form>
</div>
</body>
</html>