<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<style>
	.ui-datepicker {
    z-index: 1055 !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>Expire - Report</h3>
				</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 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-6">
										<!-- <div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Expire Date From&nbsp;<input id="chkDateFrom" type="checkbox" checked >:</label>
											<div class="col-md-8">  
												<div class="input-group input-append date" id="datePicker" data-date="2020-02-17" data-date-format="yyyy-mm-dd">
													<div class="input-group-prepend">
														<span class="input-group-addon input-group-text" style="width: 40px; display: table-cell;">
															<i class="far fa-calendar-alt"></i>
														</span>
													</div>
													<input type="text" class="form-control float-right" id="txtDatePicker" value="1982-06-15">
												</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 class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Type: </label>
											<div class="col-md-3">
												<div class="input-group input-group">
													<select type="text" class="form-control" id="cboType">
                                                        <!-- <option value="-"></option> -->
                                                        <option value="E">Expired</option>
                                                        <option value="T">Today</option>
                                                        <option value="O">Ongoing</option>
                                                        <!-- <option value="N">New</option> -->
                                                    </select>
												</div>
											</div>
											<label class="col-md-2 col-form-label" style="text-align: right;">ID No.: </label>
											<div class="col-md-3">
												<input type="text" class="form-control" id="txtIDNo">
											</div>
										</div>
                                        <div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Expire Date From-To&nbsp;<input id="chkDateTo" type="checkbox"  >:</label>
											<div class="col-md-4">  
												<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 class="col-md-4">  
												<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;">Internet Plan:</label>
										<div class="col-md-3">
											<select type="text" class="form-control" id="cboMbps">

											</select>
										</div>
											<label class="col-md-2 col-form-label" style="text-align: right;">Months:</label>
											<div class="col-md-3">
												<select type="text" class="form-control" id="cboMonths">
													<option value=""></option>
													<option value=1>1</option>
													<option value=2>2</option>
													<option value=3>3</option>
													<option value=4>4</option>
													<option value=5>5</option>
													<option value=6>6</option>
													<option value=7>7</option>
													<option value=8>8</option>
													<option value=9>9</option>
													<option value=10>10</option>
													<option value=11>11</option>
													<option value=12>12</option>
												</select>
											</div>											
										</div>
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Remark:</label>
											<div class="col-md-8">
												<div class="input-group input-group">
													<select type="text" class="form-control" id="cboRemark">
                                                        <option value="">[All]</option>
                                                        <option value="Yes">Yes</option>
                                                        <option value="No">No</option>
                                                    </select>
												</div>
											</div>
										</div>
										<div class="form-group row">
											<div class="col-md-6"></div>
											<div class="col-md-3" style="padding-bottom: 2px;">
												<button type="button" class="btn btn-primary btn-block" onclick="getExpireList()">Search</button>
											</div>
											<div class="col-md-3">
											<button type="button" id="btnExport" value=" Export Table data into Excel " datafrom="myTable1" class="btn btn-success btn-block exportToExcel">Export Data</button> 
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>

			<div class="modal fade modal-primary" id="myModalPayment">
				<div class="modal-dialog" style="max-width: 100% !important;">
					<div class="modal-content" style="width: 46%; top: 29px; margin-left: 28%;">
						<div class="modal-header">
							<h4 class="modal-title">Remark</h4>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<div class="col-md-12">
								<div class="form-group row">
									<label class="col-md-4 col-form-label" style="text-align: right;">Date: </label>
									<div class="col-md-7">  
										<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="txtDatePicker3" 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;">Remark:</label>
									<div class="col-md-7">
										<!-- <input type="text" class="form-control" id="txtCity1" style="display:none;"> -->
										<textarea type="text" class="form-control" id="txtRemark" value="" row=2></textarea>
									</div>
									<div class="col-md-1"></div>
								</div>
								<div class="form-group row">
									<label class="col-md-7 col-form-label"></label>
									<div class="col-md-4">
										<button class="btn btn-primary col-md-12" type="button" onclick="addPayment();">Add</button>
									</div>
									<div class="col-md-1"></div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>

			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">List<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 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 class="table table-striped table-responsive table-head-fixed table-bordered" id="myTable1" style="max-height: 500px;">
						<thead>                  
							<tr>
								<th style="width: 3%;">#</th>
								<th style="text-align: center; width: 10%;">Sales Date</th>
								<th style="text-align: center; width: 10%;">ID No.</th>
								<th style="text-align: center; width: 15%;">Name</th>
								<th style="text-align: center; width: 12%;">Phone</th>
								<th style="text-align: center; width: 12%;">Address</th>
								<th style="text-align: center; width: 12%;">Plan_Months</th>
                                <th style="text-align: center; width: 10%;">Days</th>
								<th style="text-align: center; width: 10%;">Start Date</th>
                                <th style="text-align: center; width: 10%;">End Date</th>
								<th style="text-align: center; width: 15%;">Remark</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");	
		$('#txtDatePicker, #txtDatePicker1, #txtDatePicker2, #txtDatePicker3').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>");	
			getPackage();
		}

		if(D_){
			$("#txtDatePicker").val(D_);
			$("#txtDatePicker1").val(D_);
			search();
			$("#SS").attr('style', 'display:none');
		}

	});

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


	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>");	
				}
			});		
		});
	}


	$('#cboCity').change(function() { 
		getPackage();
	});

	function getPackage(){
		var city = $("#cboCity").val();
		// $("#cboPackage").find("option").remove();
		// $("#cboPackage").append("<option value = '' ></option>");
		$("#cboMbps").find("option").remove();
		$("#cboMbps").append("<option value = '' ></option>");

		$.ajax({
			url: APP_URL + "api/package/get_all_packages.php",
			type: "POST",
			data: JSON.stringify({ city: city })
		}).done(function(data) {	
			var mb = "";
			$.each(data.records, function(i, v) {	
				if(mb != v.mbps){
					$("#cboMbps").append("<option value= '" + v.mbps + "' >" + v.mbps + "</option>");	
				}	
				mb = v.mbps;			
			});
		});
	}	

    $('#chkReturn').change(function() {
        if(this.checked) {
            // var returnVal = confirm("Are you sure?");
            // $(this).prop("checked", returnVal);
            $('#txtRemark').val('စက်ဖြုတ်ထားသည်။');      
            $("#txtRemark").attr('disabled', true); 
        }else{
        	$('#txtRemark').val('');    
        	$("#txtRemark").attr('disabled', false);
        }
    
    });

        $('#chkDateTo').change(function() {
        if(this.checked) {
            $("#cboType").val("-");
        }     
    });

    $('#cboType').change(function() {
        if($('#cboType').val()=="-") {
            $( "#chkDateTo" ).prop( "checked", true );
        }else{
            $( "#chkDateTo" ).prop( "checked", false );
        }
    });
    
function getExpireList(){
		// var df =($("#chkDateFrom").prop("checked"))?$("#txtDatePicker").val():"";
		// var dd = $("#txtDatePicker").val();
		var df = $("#txtDatePicker1").val();
		var dt = $("#txtDatePicker2").val();
		var mbps = $("#cboMbps").val();
		var months = $("#cboMonths").val();
        var city = $("#cboCity").val();
        var remark = $("#cboRemark").val();
        var exp_type = $("#cboType").val();  
        var id_no = $("#txtIDNo").val();  
        var check_type = ($("#chkDateTo").prop("checked"))?1:0;
		$("#loading").css("display","block");
		$("#myTable1").find("tbody").find("tr").remove();
		$.ajax({
			url: APP_URL + "api/sales/search_expire_list.php",
            type: "POST",
			data: JSON.stringify({ mbps: mbps, months: months, city: city, exp_type: exp_type, id_no: id_no, remark: remark , df: df, dt: dt, check_type:check_type})

		}).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");
			// var $total=0
			$.each(data.records, function(i, v) {
				$("#myTable1").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
					.append("<td>" + v.sales_date + "</td>")
                    .append("<td>" + v.id_no + "</td>")
                    .append("<td>" + v.name + "</td>")
                    .append("<td>" + v.phone + "</td>")
                    .append("<td>" + v.address + "</td>")
					.append("<td>" + v.package + "</td>")
					// .append("<td style='text-align:right;'>" + (v.price).toLocaleString() + "</td>")
					.append("<td style='text-align:right;'>" + v.d + "</td>")
					.append("<td>" + v.start_date + "</td>")
                    .append("<td>" + v.end_date + "</td>")
					.append("<td style='background-color:#eee3cf;cursor:pointer;' onclick='payment(\"" + v.invoice_no + "\",\"" + v.id_no + "\",this)'>" + v.remark + "</td>")
					.append("<td>" + v.remark_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 + "\")'><i class='fas fa-clipboard-list' title='Detail'></i></span></td>")
				);
				// $total += (v.price);
			});	
			// $("#myTable1").find("tbody")
			// .append($('<tr style="font-weight:bold;">')
			// .append("<td colspan='7' style='text-align:right;'>Total:</td>")
			// .append("<td style='text-align:right;'>" + (($total)?$total:0).toLocaleString() + "</td>")
  			// );  

       });
		// getExpireList2();
	}

	
	function payment(ino,obj){
		$("#myModalPayment").modal('show');
		INO = ino;	
	}
	
	function addPayment(){
		var date = $("#txtDatePicker3").val();
		var remark = $("#txtRemark").val();

		$.ajax({
			url: APP_URL + "api/expire_remark/create.php",
			type: "POST",
			data: JSON.stringify({ ino: INO, date: date, remark: remark })
		}).done(function(data) {
			if(data.message=="created"){
				$("#myModalPayment").modal('hide');
				bootbox.alert("Added.");
				getExpireList();
			}else{
				bootbox.alert("Error on server side.");
			}
		});
		
	}

	function goToDetail(id){
		document.location = APP_URL + "entry/sales.php?id=" + id;
	}	

	function isNumber(evt) {
		evt = (evt) ? evt : window.event;
		var charCode = (evt.which) ? evt.which : evt.keyCode;
		if ( (charCode > 31 && charCode < 48) || charCode > 57) {
			return false;
		}
		return true;
	}
	
</script>	
