<?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: 90% !important;
	        margin-left: 5.5% !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>Control - 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>
									<div class="col-md-4">
										<div class="form-group row">
											<label class="col-md-3 col-form-label" style="text-align: right;">ID No.:</label>
											<div class="col-md-5" style="padding-bottom: 2px;">
												<input type="text" class="form-control" id="txtIDNo">
											</div>

											<div class="col-md-4">
                                                <select type="text" class="form-control" id="cboStatus">
													<option value='All'>Status[All]</option>
													<option value='Active'>Active</option>
													<option value='Disable'>Disable</option>
													<option value='New'>New</option>
												</select>
											</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;">Customer Name:</label>
											<div class="col-md-8">
												<input type="text" class="form-control" id="txtCustomerName">
											</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="myModalUMM">
					<div class="modal-dialog" style="max-width: 100% !important;">
        				<div class="modal-content installID" style="width: 40%; top: 40px; margin-left: 32.5%;">
        					<div class="modal-header">
				                <!-- <h4 class="modal-title">List </h4> -->
		
				            </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">ID No. - <span id="id_no" style="font-weight:bold;"> </span></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-12">
															    <div class="form-group row">
																	<label class="col-md-4 col-form-label" style="text-align: right;"> ONU Sn:  </label>
																	<div class="col-md-8">
																		<input type="text" class="form-control" id="txtONUSn">
																	</div>
																</div>
																<div class="form-group row">
																	<label class="col-md-4 col-form-label" style="text-align: right;"> Port:  </label>
																	<div class="col-md-8">
																		<input type="text" class="form-control" id="txtPort">
																	</div>
																</div>
																<div class="form-group row">
																	<label class="col-md-4 col-form-label" style="text-align: right;"> ONU ID:  </label>
																	<div class="col-md-8">
																		<input type="text" class="form-control" id="txtONTID">
																	</div>
																</div>
															</div>
															<div class="col-md-12">
																<div class="form-group row" style="margin-bottom: 0px;">
																	<div class="col-md-8"></div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-primary btn-block" onclick="updateONT()">Add</button>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</form>
											</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;font-size: 15px;">
						<thead>                  
							<tr>
								<th style="width: 4%;">#</th>
								<!-- <th style="text-align: center; width: 6%;">Status</th> -->
								<th style="text-align: center; width: 9%;">ID No.</th>
								<th style="text-align: center; width: 9%;">Customer Name</th>
								<th style="text-align: center; width: 9%;">Plan_Months</th>
								<th style="text-align: center; width: 9%;">ONU Sn</th>
								<th style="text-align: center; width: 7%;">Port</th>
								<th style="text-align: center; width: 7%;">ONU ID</th>
								<th style="text-align: center; width: 9%;">MME ID</th>
								<th style="text-align: center; width: 8%;">PPPOE Name</th>
								<th style="text-align: center; width: 9%;">PPPOE Pwd</th>
								<th style="text-align: center; width: 10%;">Status</th>
								<!--<th style="text-align: center; width: 10%;">Action</th>-->
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>	

			<div class="modal fade" id="myModalDetail" style="padding-right: 20% !important;">
					<div class="modal-dialog">
						<div class="modal-content" style="width: 100%;">
							<section class="content">
								<div class="container-fluid">
									<div class="row">
										<div class="col-md-12">
											<div class="card card-outline ">
												<div class="card-header">
													<h3 class="card-title">ID No. - <span id="id_noD" style="font-weight:bold;"> </span><span id="sn_noD" style="font-weight:bold;display:none;"> </span><span id="stD" style="font-weight:bold;display:none;"> </span></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-12">
																<div class="form-group row" style="margin-bottom: 0px;">
																	<div class="col-md-4">
																		<button type="button" class="btn btn-warning btn-block" onclick="setD('reboot')">Reboot</button>
																	</div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-warning btn-block" onclick="setD('resync_config')">Resync config</button>
																	</div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-warning btn-block" onclick="setD('restore_factory_defaults')">Restore Defaults</button>
																	</div>
																</div>
															</div>
															<div class="col-md-12">
																<div class="form-group row" style="margin-bottom: 0px;">
																	<div class="col-md-4">
																		<button type="button" class="btn btn-primary btn-block" onclick="speed()">Speed Change</button>
																	</div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-warning btn-block" onclick="setDE()"><span id="myButton"> </span></button>
																	</div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-danger btn-block" onclick="setD('delete')">Delete</button>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
										
									</div>
								</div>
							</section>	
						</div>
					</div>
				</div>

                <div class="modal fade" id="myModalSpeed" style="padding-right: 76px !important;">
					<div class="modal-dialog">
						<div class="modal-content" style="width: 100%;">
							<section class="content">
								<div class="container-fluid">
									<div class="row">
										<div class="col-md-12">
											<div class="card card-outline ">
												<div class="card-header">
													<h3 class="card-title">ID No. - <span id="id_no1" style="font-weight:bold;"> </span><span id="sn_no" style="font-weight:bold;display:none;"> </span></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-12">
																<div class="form-group row">
																	<label class="col-md-4 col-form-label" style="text-align: right;"> Upload:  </label>
																	<div class="col-md-8">
																		<input type="number" class="form-control" id="txtUpload" style='text-align:right;'>
																	</div>
																</div>
																<div class="form-group row">
																	<label class="col-md-4 col-form-label" style="text-align: right;" > Download:  </label>
																	<div class="col-md-8">
																		<input type="number" class="form-control" id="txtDownload" style='text-align:right;'>
																	</div>
																</div>
															</div>
															<div class="col-md-12">
																<div class="form-group row" style="margin-bottom: 0px;">
																	<div class="col-md-8"></div>
																	<div class="col-md-4">
																		<button type="button" class="btn btn-primary btn-block" onclick="setSpeed()">Change</button>
																	</div>
																</div>
															</div>
														</div>
													</div>
												</form>
											</div>
										</div>
										
									</div>
								</div>
							</section>	
						</div>
					</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);
	$('#datePicker').attr("data-date",customDate);
	$("#txtDatePicker").val(customDate);

	$(function(){
		$('#datePicker').datepicker();
		$("body").addClass("sidebar-collapse");	
		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) {
				if(v.name!='Main Office'){
					$("#cboCity").append("<option value= '" + v.name + "' data-code= '" + v.code + "' smart_key= '" + v.smart_key + "' olt_id= '" + v.olt_id + "'>" + v.name + "</option>");	
				}
			});		
		});
	}

	function search(){
		$("#loading").css("display","block");
		// var expire_date = $("#txtDatePicker").val();
		var id_no = $("#txtIDNo").val();
		var customer_name = $("#txtCustomerName").val();
		var city = $("#cboCity").val();
		var status_ = $("#cboStatus").val();
		var smart_key = $("#cboCity option:selected").attr("smart_key");
		var olt_id = $("#cboCity option:selected").attr("olt_id");
		$("#myTable").find("tbody").find("tr").remove();
		$.ajax({
			type: "POST",
			url: APP_URL + "api/ont/search.php",
			data: JSON.stringify({ id_no: id_no, customer_name: customer_name, city: city, status_: status_, smart_key: smart_key, olt_id: olt_id }),
			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) {

var icon="";
// 			if(v.status_=='Online'){
// 					var $btn_status = 'btn-success';
// 					var icon = '<i class="fa fa-globe fa-lg text-green"></i>';
// 				}else if(v.status_=='Offline'){
// 					var $btn_status = 'btn-danger';
// 					var icon = '<i class="fa fa-plug fa-lg text-grey"></i>';
// 				}else if(v.status_=='Power fail'){
// 					var $btn_status = 'btn-dark';
// 					var icon = '<i class="fa fa-plug fa-lg text-grey"></i>';
// 				}else if(v.status_=='LOS'){
// 					var $btn_status = 'btn-warning';
//                     var icon = '<i class="fas fa-unlink"></i>';
// 				}else{
//                     var $btn_status = '';
//                     var icon = '.';
//                 }

				if(v.status_=="Enabled"){
					var $btn = 'color:green;';
				}else if(v.status_=="Disabled"){
					var $btn = 'color:red;'
				}

				$("#myTable").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
                    .append("<td>" + v.id_no + "</td>")
                    .append("<td>" + v.customer_name + "</td>")
					.append("<td>" + v.package + "</td>")
					.append("<td style='text-align:right;background-color:#cfc0f1;cursor:pointer;' onclick='umm(\"" + v.id_no + "\",this)'>" + v.ont_snno + "</td>")
					.append("<td style='text-align:right;background-color:#cfc0f1;cursor:pointer;' onclick='umm(\"" + v.id_no + "\",this)'>" + v.port + "</td>")
					.append("<td style='text-align:right;background-color:#cfc0f1;cursor:pointer;' onclick='umm(\"" + v.id_no + "\",this)'>" + v.ont_id + "</td>")
					.append("<td>" + v.mme_id + "</td>")
					.append("<td>" + v.pppoe_name + "</td>")
					.append("<td>" + v.ont_password + "</td>")
					.append(
                        "<td style='text-align:center;'>\
                            <span style='" + $btn + "; font-size:12px;'>\
                                <i class='fas' style='cursor:pointer;' title='status' \
                                onclick='setDE(\"" + v.id_no + "\",\"" + v.ont_snno + "\",\"" + v.status_ + "\",this)'>\
                                " + v.status_ + "\
                                </i>\
                            </span>\
                        </td>"
                        )
				// 	.append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 10px; width: 150px;' onclick='setDE(\"" + v.id_no + "\",\"" + v.ont_snno + "\",\"" + v.status_ + "\",this)'><i class='fas fa-detail' title='Change Status'>Change Status</i></span></td>")
				);
			});	
       });
	}	


	function del(id, obj){
        // bootbox for good looking 'confirm pop up'
        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/ont/delete.php",
        				data: JSON.stringify({ id: id }),
        				success: function(data){
        					if(data=="deleted"){
        						$(obj).parent().parent().remove();
        					}else{
        						bootbox.alert("Error on server side.");
        					}
        				}
        			});
        		}
        	}
        });
    }

	function umm(id_no,obj){
		$("#myModalUMM").modal('show');
		$("#id_no").text(id_no);
		$("#txtONUSn").val($(obj).parent().find("td").eq(4).text());
		$("#txtPort").val($(obj).parent().find("td").eq(5).text());
		$("#txtONTID").val($(obj).parent().find("td").eq(6).text());
		onu_sn_ = $(obj).parent().find("td").eq(4);
		port_ = $(obj).parent().find("td").eq(5);
		ont_id_ = $(obj).parent().find("td").eq(6);
		
	}
	
	function updateONT(){	
		$("#loading").css("display","block");
		var onu_sn = $("#txtONUSn").val();	
		var port = $("#txtPort").val();	
		var ont_id = $("#txtONTID").val();	
		var id_no = $("#id_no").text();

		if(onu_sn==""){
			bootbox.alert("Please fill the box.");
			$("#loading").css("display","none");
			return false;
		}else{
			$.ajax({
				url: APP_URL + "api/ont/update_port.php",
				type: "POST",
				data: JSON.stringify({ id_no: id_no, port: port, ont_id: ont_id, onu_sn: onu_sn }),
			}).done(function(data){
				$("#loading").css("display","none");
				if(data.message=="updated"){
					$("#txtPort").val("");
					$("#txtONTID").val("");
					$("#txtONUSn").val("");
					search();
				// 	onu_sn_.text(onu_sn);
				// 	port_.text(port);
				// 	ont_id_.text(ont_id);
					bootbox.alert("Successfully Added.");
					// $("#myCategory")[0].reset();
					$("#myModalUMM").modal('hide');
				}else{
					bootbox.alert("Error on server side.");
				}
			});
		}		
	}
	
	var T = "";
	function detail(id_no,sn_no,st,obj){
		$("#myModalDetail").modal('show');
		$("#id_noD").text(id_no);
		$("#sn_noD").text(sn_no);
		$("#stD").text(st);

		if(st=="Enabled"){
			$("#myButton").text("Disable ONU");
		}else if(st=="Disabled"){
			$("#myButton").text("Enabled ONU");
		}
	}

    function setDE(id_no,sn_no,st,obj){
// 		if(status!=0){

			var smart_key = $("#cboCity option:selected").attr("smart_key");
			
			bootbox.confirm({
				message: "<h4>Are you sure that you want to change status?</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/ont/change_status.php",
							data: JSON.stringify({ id_no: id_no, sno:sn_no, status: st, smart_key: smart_key }),
							success: function(data){
								if(data.message=="updated"){

									$("#myModalDetail").modal('hide');
									search();
									// $(obj).parent().parent().remove();
								}else{
									bootbox.alert("Error on server side.");
								}
							}
						});
					}
				}
			});
// 		}
	}




</script>	
