<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<div class="content-wrapper" style="min-height: 1203.6px;">
	<!-- Content Header (Page header) -->
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-md-6">
					<h3>Cash Book - Report</h3>
				</div>
				<div class="col-md-6">
				</div>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<div class="card card-outline card-primary">
						<div class="card-header">
							<h3 class="card-title">Search</h3>
						</div>
						<div class="overlay white" id="loading" style="display:none;position: absolute;width: 100%;height: 100%;z-index: 10000;">
							<i class="fas fa-3x fa-sync-alt rotate360"  style="margin: 70px 45%;"></i>
						</div>
						<form role="form">
							<div class="card-body">
								<div class="row">
									<div class="col-md-6">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Date From: </label>
											<div class="col-md-8">  
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text" style="width: 40px;">
															<i class="far fa-calendar-alt"></i>
														</span>
													</div>
													<input type="text" class="form-control" id="txtDatePicker1" value="2020-02-04" aria-label="Date Picker" placeholder="Select a date">
												</div>
											</div>
										</div>
									</div>
									<div class="col-md-6">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Date To: </label>
											<div class="col-md-8">  
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text" style="width: 40px;">
															<i class="far fa-calendar-alt"></i>
														</span>
													</div>
													<input type="text" class="form-control" id="txtDatePicker2" value="2020-02-04" aria-label="Date Picker" placeholder="Select a date">
												</div>
											</div>
										</div>
									</div>	
                                    <div class="col-md-6">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">City:</label>
											<div class="col-md-8">
                                                <select type="text" class="form-control" id="cboCity"></select>
											</div>
										</div>
                                    </div>
									<!-- <div class="col-md-6">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Account Head:</label>
											<div class="col-md-8">
                                                <select type="text" class="form-control" id="cboExpenseReason">
												</select>
											</div>
										</div>	
                                    </div> -->
									<!-- <div class="col-md-6"></div> -->
					                <div class="col-md-6">
					                	<div class="form-group row">
                                        <div class="col-md-6"></div>
					                		<div class="col-md-3">
					                			<button type="button" class="btn btn-primary btn-block" onclick="search()">Search</button>
					                		</div>
					                		<div class="col-md-3">
					                			<button type="button" id="btnExport" value=" Export Table data into Excel " datafrom="myTable" class="btn btn-success btn-block exportToExcel">Export Data</button> 
					                		</div>
					                	</div>
					                </div>
					            </div>
					        </div>
					    </form>
					</div>
				</div>
			</div>
			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title"><span id="total_records" style="font-weight:bold;"> </span></h3>
					<div class="card-tools">
						<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
						<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
					</div>
				</div>
				<div class="card-body p-0 table-responsive">
					<table class="table table-striped table-head-fixed table-bordered" id="myTable" style="max-height: 500px;">
						<thead>                  
							<tr>
								<th style="width: 3%">#</th>
								<th>Date</th>
								<th>Type</th>
								<th>Account Head</th>
								<th>Particular</th>
								<th>Income</th>
								<th>Expense</th>
								<th>Balance</th>
								<!-- <th>Action</th> -->
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</section>
</div>
<?php include '../footer.php'; ?>
<script>
	var C = '<?php echo isset($_SESSION['city'])?$_SESSION['city']:"" ?>';
	
	var d = new Date();
	var mm = (d.getMonth("MM")+1);
	var dd = d.getDate();
	var customDate = d.getFullYear() + "-" + ((mm<10)?"0" + mm:mm) + "-" +  ((dd<10)?"0" + dd:dd);

	$(function(){
		$("body").addClass("sidebar-collapse");
		$('#txtDatePicker1, #txtDatePicker2').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
			showButtonPanel: true,
            showAnim: 'clip',
            autoclose: true
        }).val(customDate);
		if(C=='Main Office'){
			getAllCity();
		}else{
			$("#cboCity").append("<option value= '" + C + "'>" + C + "</option>");	
		}
	});

	$(".exportToExcel").click(function(){
		exportExcel("#myTable");
	});

	function getAllCity(){
		$("#cboCity").find("option").remove();
		// $("#cboCity").append("<option value= '' data-id = ''></option>");
		$.ajax({
			url: APP_URL + "api/city/get_all_rows.php"
		}).done(function(data) {
			$.each(data.records, function(i, v) {
				$("#cboCity").append("<option value= '" + v.name + "'>" + v.name + "</option>");			
			});	
			$("#cboCity").val(C);	
		});
	}
	


	function getExpenseReason(){
		// var city = $("#cboCity").val();
		$("#cboExpenseReason").find("option").remove();
		$("#cboExpenseReason").append("<option value = '' ></option>");
		// $("#txtPackageName").val("");

		$.ajax({
			url: APP_URL + "api/expense_reason/get_expense_reason.php"
		}).done(function(data) {	
			$.each(data.records, function(i, v) {	

					$("#cboExpenseReason").append("<option value= '" + v.expense_reason + "' >" + v.expense_reason + "</option>");			
					
			});
		});
	}	
	
 function search(){
    var df = $("#txtDatePicker1").val();
    var dt = $("#txtDatePicker2").val();
	// var expense_reason = $("#cboExpenseReason").val();
	var city = $("#cboCity").val();
    $.ajax({
     type: "POST",
     url: APP_URL + "api/sales/search_cash_book.php",
     data: JSON.stringify({ df:df, dt:dt, city: city }),
     error: function(data) {
      $("#loading").css("display","none");
    }
  }).done(function(data) {
   console.log(data);
   $("#myTable").find("tbody").find("tr").remove();
   $("#myTable").find("tbody")
   .append($('<tr>')
    .append("<td>1</td>")
    .append("<td><b>Opening Balance</b></td>")
	.append("<td></td>")
    // .append("<td></td>")
    .append("<td></td>")
    .append("<td></td>")
    .append("<td style='text-align: right;font-weight:bold;font-size:20px;'><span id='openingbalance'>0</span></td>")
    );
   $("#openingdate").text(df);
   $("#openingbalance").text(data.balance.toLocaleString());
   var balance = data.balance ;
   $.each(data.records, function(i, v) {
    balance -= v.ex_amt;
    balance += v.in_amt;
    $("#myTable").find("tbody")
    .append($('<tr>')
     .append("<td>" + (i+2) + "</td>")
    //  .append("<td><span style='color:blue;cursor:pointer;' onclick='gotoDetail(\"" + v.date + "\",\"" + v.expense_reason + "\",this)'>" + v.date + "</span></td>")
	 .append("<td>" + v.date + "</td>")
	 .append("<td>" + v.expense_reason + "</td>")
	 .append("<td>" + v.head + "</td>")
     .append("<td>" + v.particular + "</td>")
     .append("<td style='text-align: right;'>" + ((v.in_amt==0)?"":v.in_amt.toLocaleString()) + "</td>")
     .append("<td style='text-align: right;'>" + ((v.ex_amt==0)?"":v.ex_amt.toLocaleString()) + "</td>")
     .append("<td style='text-align: right;" + (data.records.length==(i+1)?"font-weight:bold;font-size:20px;":"") +  "'>" + balance.toLocaleString() + "</td>")
     )
  });
  $("#myTable").find("tbody")
			.append($('<tr style="font-weight:bold;">')
			.append("<td colspan='8'>Total Amount From " + df + " To " + dt + " By Account Head</td>")

  			); 
  $.each(data.records1, function(i, b) {

		$("#myTable").find("tbody")
			.append($('<tr style="font-weight:bold;">')
			.append("<td colspan='2'>" + b.R + "</td>")
			.append("<td colspan='1'>" + b.expense_reason + "</td>")
			.append("<td style='text-align:right;'>" + b.amount + "</td>")
  			); 

  });

  $("#myTable").find("tbody")
			.append($('<tr style="font-weight:bold;">')
			.append("<td colspan='8'>Total Amount From " + df + " To " + dt + " By Type</td>")

  			); 
  $.each(data.records2, function(i, b) {

		$("#myTable").find("tbody")
			.append($('<tr style="font-weight:bold;">')
			.append("<td colspan='2'>" + b.R + "</td>")
			.append("<td style='text-align:right;'>" + b.amount + "</td>")
  			); 

  });

 

   $("#total_records").text("Closing Balance = " + balance.toLocaleString());
 });
}

	function gotoDetail(date,er,obj){

		if(er=='Sales'){
			var win = window.open(APP_URL + "reports/sales.php?d=" + date, '_blank');
		}else if(er=='Office Expense'){
			var win = window.open(APP_URL + "entry/office_expense.php?d=" + date, '_blank');
		}else if(er=='Income'){
			var win = window.open(APP_URL + "entry/office_income.php?d=" + date, '_blank');
		}else if(er=='Payment'){
			var win = window.open(APP_URL + "reports/sales.php?d=" + date, '_blank');
		}
		
		win.focus();
	}

    function gotoSaleDetail(date){
		window.open(APP_URL + "reports/daily_sales.php?d=" + date  , "_blank");
		// document.location = APP_URL + "expense/purchase.php?pid=" + id  , "_blank";
	}

</script>	
