<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<style>
	@media (max-width:480px){
	    .pagination{
	        display: inline-block;
	    }
	    div.dataTables_wrapper div.dataTables_filter input {
	        display: block;
	        padding-left: 0px !important;
	    }
	    .installID{
	        width: 112% !important;
	        margin-left: 14.5% !important;
	    }
	}
	#myList{

		padding-right: 30% !important;
	}
</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">
					<h3>Customer - 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: 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-4">

										<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 class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">ID No.:</label>
											<div class="col-md-8">
												<input type="text" class="form-control" id="txtIDNo">
											</div>
										</div> -->
									</div>
									<div class="col-md-4">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Name:</label>
											<div class="col-md-8">
												<input type="text" class="form-control" id="txtName">
											</div>
										</div>	
									</div>
									<div class="col-md-4">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Phone No.: </label>
											<div class="col-md-8">
												<input type="text" class="form-control" id="txtPhone">
											</div>
										</div>
										<!-- <div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">NRC No.:</label>
											<div class="col-md-8">
												<input type="text" class="form-control" id="txtCustomerNRC">
											</div>
										</div> -->
										<div class="form-group row">
											<div class="col-md-4"></div>
											<div class="col-md-4" style="padding-bottom: 2px;">
												<button type="button" class="btn btn-primary btn-block" onclick="search()">Search</button>
											</div>
											<div class="col-md-4">
												<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="modal fade" id="myList" >
					<div class="modal-dialog" style="max-width: 100% !important;">
        				<div class="modal-content installID" style="width: 100%; top: 30px; margin-left: 23.5%;">
							<div class="modal-header">
								<!-- <h4 class="modal-title">List<span id="total_records" style="font-weight:bold;"> </span></h4> -->
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<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">List<span id="total_recordsL" style="font-weight:bold;"> </span></h3>
												</div>
												<div class="card-body  p-0" >
													<table class="table table-striped table-responsive table-head-fixed table-bordered" id="myTable2" style="max-height: 500px;" >
														<thead>                  
															<tr>
																<th style="width: 3%">#</th>
																<th>Date</th>
																<th>Invoice No.</th>
																<th>Name</th>
																<th>Package</th>
																<th>Total Amount</th>
																<th>Start Date</th>
																<th>End Date</th>
																<th>Status</th>
																<th style="width: 14%">Action</th>
															</tr>
														</thead>
														<tbody>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</section>	
						</div>
					</div>
				</div>

			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">Customer List<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 style="text-align: center;min-width:100px;">ID No.</th> -->
								<th style="text-align: center;min-width:130px;">Name</th>
								<th style="text-align: center;min-width:100px;">Phone</th>
								<th style="text-align: center;min-width:100px;">Member Type</th>
								<!-- <th style="text-align: center;min-width:100px;">NRC No.</th> -->
								<th style="text-align: center;min-width:300px;">Address</th>
								<!-- <th style="text-align: center; width: 12%;">Current Package</th>
								<th style="text-align: center; width: 12%;">Current Expire Date</th> -->
								<!-- <th style="text-align: center; width: 10%;">Balance</th> -->
								<th style="text-align: center;min-width:100px;">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 c_type = '<?php echo isset($_SESSION['c_type'])?$_SESSION['c_type']:"" ?>';
	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);
	$('#datePicker').attr("data-date",customDate);
	$("#txtDatePicker").val(customDate);

	$(function(){
		$('#datePicker').datepicker();
		$("body").addClass("sidebar-collapse");	
		if(c_type=='Head Office'){
			getAllCity();
		}else{
			$("#cboCity").append("<option value= '" + C + "' data-ctype= 'Branch'>" + 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_no_main.php"
		}).done(function(data) {
			$.each(data.records, function(i, v) {
				$("#cboCity").append("<option value= '" + v.name + "' data-ctype= '" + v.c_type + "'>" + v.name + "</option>");			
			});		
		});
	}

	function search(){
		$("#loading").css("display","block");
		// var expire_date = $("#txtDatePicker").val();
		var name = $("#txtName").val();
		var city = $("#cboCity").val();
		var phone = $("#txtPhone").val();
		// var id_no = $("#txtIDNo").val();

		$("#myTable").find("tbody").find("tr").remove();
		$.ajax({
			type: "POST",
			url: APP_URL + "api/customer/search.php",
			data: JSON.stringify({ name: name, city: city, phone: phone }),
			error: function(data) {
				$("#loading").css("display","none");
			}
		}).done(function(data) {	
			if(data.records.length>1){
				$("#total_records").text(" - " + data.records.length + " records found.");
			}else{
				$("#total_records").text(" - " + data.records.length + " record found.");
			}
			$("#loading").css("display","none");
			$.each(data.records, function(i, v) {
				$("#myTable").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
					// .append("<td>" + v.sales_no + "</td>")
					// .append("<td>" + v.id_no + "</td>")
                    .append("<td>" + v.name + "</td>")
					.append("<td>" + v.phone + "</td>")
					.append("<td>" + v.member_type + "</td>")
                    // .append("<td>" + v.nrc + "</td>")
					.append("<td>" + v.address + "</td>")
					// .append("<td>" + v.package + "</td>")
					// .append("<td>" + v.end_date + "</td>")
					.append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 18px; width: 50px;' onclick='goToDetail(\"" + v.id + "\",this)'><i class='fas fa-clipboard-list' title='Detail'></i></span></td>")
					// .append("<td style='text-align:right'>" + v.balance + "</td>")
					// .append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 18px; width: 50px;' onclick='goToDetail(\"" + v.id + "\")'><i class='fas fa-clipboard-list' title='Detail'></i></span></td>")
				);
			});	
       });
	}	

	function goToDetail(id,obj){
		$("#myList").modal('show');
		getList(id);

	}

	function getList(id){
		$("#loading").css("display","block");

		$("#myTable2").find("tbody").find("tr").remove();
		$.ajax({
			type: "POST",
			url: APP_URL + "api/sales/get_list.php",
			data: JSON.stringify({ id: id }),
			error: function(data) {
				$("#loading").css("display","none");
			}
		}).done(function(data) {	
			if(data.records.length>1){
				$("#total_recordsL").text(" - " + data.records.length + " records found.");
			}else{
				$("#total_recordsL").text(" - " + data.records.length + " record found.");
			}
			$("#loading").css("display","none");
			$.each(data.records, function(i, v) {

				$("#myTable2").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
                    .append("<td>" + v.sales_date + "</td>")
					.append("<td>" + v.invoice_no + "</td>")
                    .append("<td>" + v.name + "</td>")
					.append("<td>" + v.package + "</td>")
					.append("<td style='text-align:right;'>" + v.total_amount + "</td>")
					.append("<td>" + v.start_date + "</td>")
					.append("<td>" + v.end_date + "</td>")
					.append("<td>" + v.S_R + "</td>")
					.append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 13px; width: 40px;' onclick='print(\"" + v.id + "\",this)'><i class='fas fa-print' title='Print'></i></span></td>")
					// .append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 13px; width: 40px;' onclick='print(\"" + v.id + "\",this)'><i class='fas fa-edit' title='Print'></i></span>&nbsp;"+ ((C=="Main Office")?"<span class='btn btn-danger btn-sm' style='cursor:pointer; font-size: 12px; width: 40px;' onclick='del(\"" + v.invoice_no + "\",this)'><i class='fas fa-edit' title='Delete'></i></span>":"") +"</td>")
				);
			});	
       });
	}	

	function print(id,obj){
	var win = window.open(APP_URL + "print/sales_print.php?id=" + id, '_blank');
	win.focus();
	}

	function del(inv,obj){
		bootbox.confirm({
			message: "<h4>Are you sure that you want to delete?</h4>",
			buttons: {
				confirm: {
					label: '<span class="glyphicon glyphicon-ok"></span> Yes',
					className: 'btn-danger'
				},
				cancel: {
					label: '<span class="glyphicon glyphicon-remove"></span> No',
					className: 'btn-primary'
				}
			},
			callback: function (result) {
				if(result){
					$.ajax({
						type: "POST",
						url: APP_URL + "api/sales/delete.php",
						data: JSON.stringify({ inv: inv }),
						success: function(data){
							if(data=="deleted"){
								// getAll();
								$(obj).parent().parent().remove();
							}else{
								bootbox.alert("Error on server side.");
							}
						}
					});
				}
			}
		});
	}
	
</script>	
