<!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;}

#TblGrid_grid ,#TblGrid_income_grid{
	display:block;
	border: 0px solid red;
	padding:5px;
	margin-top:5px;
	width:290px;
	height:140px;
	overflow:auto;
	}	
</style>


 <style type="text/css">

        #graphRight {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            margin-top: 0px;
            width: 298px;
            height: 285px;
           
            z-index: 0;
            
        } 

        #graphRightInner {
            position: relative;
            
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: 5px 5px 5px 5px;
            padding : 30px;
            width: 300px;
            height: 285px; 
            border: 1px solid black;
            z-index: 1;
            
        } 
        
		.ui-front {
			z-index: 100;
		}
		.ui-dialog-titlebar-close {
		  visibility: hidden;
		}

		.graph .graphLeft{width: 503px; float:left; padding:10px; min-height:285px; overflow:auto;}
		.graph .graphRight{width: 207px; float:left; border-left: 1px solid #abc6df; padding:10px 10px 10px 3px; min-height:285px;}
        </style>


	<script  type="text/javascript">

        var lblForWhatReason = '<?php echo __("LBL_WHAT_REASON"); ?>';
        var lblExpenseList = '<?php echo __("LBL_EXPENSE_LIST"); ?>';
        var lblCategory = '<?php echo __("LBL_CATEGORY"); ?>';
        var lblExpenseNOTFOUND = '<?php echo __("LBL_EXPENSE_NOT_FOUND"); ?>';
        var lblCreatedOna = '<?php echo __("LBL_CREATED_ON"); ?>';
        var lblWhen = '<?php echo __("LBL_WHEN"); ?>';
        var lblDay = '<?php echo __("LBL_DAY"); ?>';
        var lblAmount = '<?php echo __("LBL_AMOUNT"); ?>';
        var lblAddExpense = '<?php echo __("LBL_ADD_EXPENSE"); ?>';
        var lblModifyExpense = '<?php echo __("LBL_MODIFY_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 lblIncomeList = '<?php echo __("LBL_INCOME_LIST"); ?>';
        var lblFindIncome = '<?php echo __("LBL_FIND_INCOME"); ?>';
        var lblAddIncome = '<?php echo __("LBL_ADD_INCOME"); ?>';
        var lblModifyIncome = '<?php echo __("LBL_MODIFY_INCOME"); ?>';
        var lblDeleteIncome = '<?php echo __("LBL_DELETE_INCOME"); ?>';
        var lblWantDeleteIncome = '<?php echo __("LBL_DO_YOU_DELETE_INCOME"); ?>';
        var lblEnterNameOfExpense = '<?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 lblDateNotValid = '<?php echo __("LBL_DATE_NOT_VALID"); ?>';
        var lblCantDownload = "<?php echo __('LBL_SORRY_CANT_DOWNLOAD'); ?>";
        var lblIncomesOf = '<?php echo __("LBL_INCOMES_OF"); ?>';
        var lblTotalIncome = '<?php echo __("LBL_TOTAL_INCOME"); ?>';
        var lblTotalExpense = '<?php echo __("LBL_TOTAL_EXPENSE"); ?>';
        var lblBalance = '<?php echo __("LBL_BALANCE"); ?>';
        var lblDataSavingFailed = '<?php echo __("LBL_DATA_SAVING_FAILED"); ?>';
        var lblIncome = '<?php echo __("LBL_INCOME"); ?>';
        var lblExpens = '<?php echo __("LBL_EXPENS"); ?>';
        var lblDataSaved = '<?php echo __("LBL_DATA_SAVED_SUCCESSFULLY"); ?>';
        var lblEmailSent = '<?php echo __("LBL_EMAIL_SENT"); ?>';
        var lblEmailSentFail = '<?php echo __("LBL_EMAIL_SENT_FAIL"); ?>';

	</script>
<script type="text/javascript">

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

<?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 style="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"></div>
                </th>
                <th  >
                   
                </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_INCOMES"); ?></a></li>
	<li><a href="#tabs-2"><img alt="Expenses" src="<?php echo CDN_URL;?>images/expense_icon.png" align="absmiddle"> <?php echo __("LBL_EXPENSE"); ?></a></li>
	<li><a href="#tabs-3"><img alt="Expenses" src="<?php echo CDN_URL;?>images/balance_icon.png" align="absmiddle"> <?php echo __("LBL_BALANCE"); ?></a></li>
	<li><a href="#tabs-4"><img alt="Expenses" src="<?php echo CDN_URL;?>images/share_icon.png" align="absmiddle"> <?php echo __("LBL_SHARE"); ?></a></li>
	<li><a href="#tabs-5"><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">
		   <!-- Tab Participant List -->
		<table id="income_grid"><tr><td/></tr></table>
		<div id="income_pager"> </div> 
		</div>	
	</div>
	
	<div id="tabs-2">
	  <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-3">
		<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="income_chart" style=" height:130px;"></div>
                    	<div   id="expense_chart" style=" height:130px;"></div>
				</div>
				<div class="graphRight">
                    	<a id="slideLeft" href="#"><img src="<?php echo CDN_URL;?>images/slide-left-icon.png" alt=""/></a>

                    	<div id="balance_chart"  style=" height:190px;"></div>
                        <div id="balance_description_div">  </div>
                       
				</div>
			</div> 
	 
		</div>
	</div> 
	 
	 
	 <div id="tabs-4">	
	  <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_BELOW_AND_SEND_EMAIL"); ?></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' => __('LBL_PLEASE_PROVIDE_EMAIL'),'length'=>'200px','required'=>'true','style'=>'width:240px; height:20px;'));    ?>
<br/>
<?php echo $this->Form->end('Send');?> <img id="loadImg" style="display:none;" src="<?php echo CDN_URL;?>images/loading.gif" /></p></td></tr></table>
		</div>
	 </div>
	 <div id="tabs-5">	
	  <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="loadImg" 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.pieRenderer.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/family_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('printIncomeList', array('type' => 'hidden','id'=>'printIncomeList'));
		echo $this->Form->input('printExpense', array('type' => 'hidden','id'=>'printExpense'));
		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){ 
	  			dashBoard.setCategory(2);
	   			dashBoard.setIncomeGridExtension();           	 
	        } else if(newIndex == 1){            		   
	 			dashBoard.setCategory(1);			
				dashBoard.setExpenseGridExtension(); 
	        }  else if(newIndex == 2){      
	   			dashBoard.drawGraph(); 	          	 
        	} else if(newIndex == 3){             		 
      			var expense_url = "<?php echo HTTP_SITE_URL."/";?>"+dashBoard.expense.unique_url;
        		$("#divExpenseURL").html('<br/><?php echo __("LBL_THE_FAMILY_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 == 4){
        		$("#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: 507}, {duration: 1000});
				$('.graphRight').show(1000);
			});

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

	  
	 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>
  
 
 
    
</body>
</html>