<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<?php
	$D_ = "";
	if(isset($_GET['d'])){
		if(!empty($_GET['d'])){
			$D_ = $_GET['d'];
		}
	}
?>
<!-- <style>
	#myTable td:nth-child(2) {
	display: none
	}
</style> -->
<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">
					<h1>Sales (Mbps-Months) - Report</h1>
				</div>
				<div class="col-md-6">
				</div>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="row" id="SS">
				<div class="col-md-12">
					<div class="card card-outline ">
						<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: 1000;">
							<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&nbsp;<input id="chkDateFrom" type="checkbox" checked >:</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="txtDatePicker" value="2020-02-04" aria-label="Date Picker" placeholder="Select a date">
												</div>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">City:</label>
											<div class="col-md-8">
												<div class="input-group input-group">
													<select type="text" class="form-control" id="cboCity"></select>
												</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="txtDatePicker1" value="2020-02-04" aria-label="Date Picker" placeholder="Select a date">
												</div>
											</div>
										</div>


										<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 ">
				<div class="card-header">
					<h3 class="card-title">List -&nbsp;<span id="total_records" style="font-weight:bold;"> </span></h3>
					<h3 class="card-title" style='padding-left:1000px;'> <span id="tb" style="font-weight:bold;"> </span></h3>
				</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 style="text-align: center;min-width:100px;">Internet Plan</th>
								<th style="text-align: center;min-width:100px;">1M</th>
								<th style="text-align: center;min-width:100px;">2M</th>
								<th style="text-align: center;min-width:100px;">3M</th>
								<th style="text-align: center;min-width:100px;">4M</th>
								<th style="text-align: center;min-width:100px;">5M</th>
								<th style="text-align: center;min-width:100px;">6M</th>
								<th style="text-align: center;min-width:100px;">7M</th>
								<th style="text-align: center;min-width:100px;">8M</th>
								<th style="text-align: center;min-width:100px;">9M</th>
								<th style="text-align: center;min-width:100px;">10M</th>
								<th style="text-align: center;min-width:100px;">11M</th>
								<th style="text-align: center;min-width:100px;">12M</th>
								<th style="text-align: center;min-width:100px;">Total</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 code = '<?php echo isset($_SESSION['code'])?$_SESSION['code']:"" ?>';
	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");	
		$('#txtDatePicker, #txtDatePicker1').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 + "'  data-code= '" + code + "' >" + C + "</option>");
		}


	});

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

	$("#chkDateFrom").change(function(){
		if($("#chkDateFrom").prop("checked")){
			$("#txtDatePicker").attr("disabled",false);
			$("#txtDatePicker1").attr("disabled",false);
		}else{
			$("#txtDatePicker").attr("disabled",true);
			$("#txtDatePicker1").attr("disabled",true);
		}
	});

	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) {
				if(v.name!='Main Office'){
					$("#cboCity").append("<option value= '" + v.name + "' data-code= '" + v.code + "' >" + v.name + "</option>");	
				}
			});		
		});
	}

	function search(){
		$("#loading").css("display","block");
		var df =($("#chkDateFrom").prop("checked"))?$("#txtDatePicker").val():"";
		var dt =($("#chkDateFrom").prop("checked"))?$("#txtDatePicker1").val():"";
		var city = $("#cboCity").val();

		$("#myTable").find("tbody").find("tr").remove();
		$.ajax({
			type: "POST",
			url: APP_URL + "api/sales/search_by_mbps.php",
			data: JSON.stringify({ df: df,dt: dt, city: city, ym:"" }),
			error: function(data) {
				$("#loading").css("display","none");
			}
		}).done(function(data) {	
			$("#loading").css("display","none");
			$.each(data.records, function(i, v) {
				$("#myTable").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
                    .append("<td style='text-align:right'>" + v.mbps + "</td>")
					.append("<td style='text-align:right'>" + v.M1M + "</td>")
					.append("<td style='text-align:right'>" + v.M2M + "</td>")
					.append("<td style='text-align:right'>" + v.M3M + "</td>")
					.append("<td style='text-align:right'>" + v.M4M + "</td>")
					.append("<td style='text-align:right'>" + v.M5M + "</td>")
					.append("<td style='text-align:right'>" + v.M6M + "</td>")
					.append("<td style='text-align:right'>" + v.M7M + "</td>")
					.append("<td style='text-align:right'>" + v.M8M + "</td>")
					.append("<td style='text-align:right'>" + v.M9M + "</td>")
					.append("<td style='text-align:right'>" + v.M10M + "</td>")
					.append("<td style='text-align:right'>" + v.M11M + "</td>")
					.append("<td style='text-align:right'>" + v.M12M + "</td>")
					.append("<td style='text-align:right'>" + v.total + "</td>")
				);
			});	
			$("#myTable").find("tbody")
			.append($('<tr style="font-weight:bold;">')
			.append("<td colspan='2' style='text-align:right;'>Total:</td>")
			.append("<td style='text-align:right;'>" + data.M1MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M2MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M3MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M4MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M5MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M6MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M7MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M8MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M9MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M10MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M11MF + "</td>")
			.append("<td style='text-align:right;'>" + data.M12MF + "</td>")
			.append("<td style='text-align:right;'>" + data.totalF + "</td>")
  			);  
       });

		// hideEmptyCols($("#myTable"));

	}	
	
		function hideEmptyCols(table) {
			// alert("a");
		    var rows = $("tr", table).length-1;
		    // alert(table);
		    var numCols = $("th", table).length;
		    for ( var i=1; i<=numCols; i++ ) {
		        if ( $("td:empty", $("td:nth-child(" + i + ")", table)).length == rows ) {
		            $("td:nth-child(" + i + ")", table).hide(); //hide <td>'s
		            $("th:nth-child(" + i + ")", table).hide(); //hide header <th>
		        }
		    }
		}

	function getTotal(num){
		var total = 0;
		$("#myTable tbody tr td:nth-child(" + num + ")").each(function(){
			total += parseInt(($(this).text())?($(this).text()):0);
		});
		return total.toLocaleString();
	}
	
	
</script>	
