<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>

<style type="text/css">
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 12%;
	height: 12%;
	z-index: 9999;
	margin: 70px 45%;
	background: url(<?=$app_url;?>loading_gif/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
</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-12">
				<div class="col-md-6">
					<h3>Internet Plan - Entry</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-4">
						<div class="card card-outline card-primary">
							<div class="card-header">
								<h3 class="card-title">Input</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" id="frmEntry">
								<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;">City:</label>
												<div class="col-md-8">
													<select type="text" class="form-control" id="cboCity"></select>
												</div>
											</div>
											<div class="form-group row" style="text-align: right;display:none;">
											<input type="hidden" id="txtID">	
												<label class="col-md-4 col-form-label" style="text-align: right;display:none;">Internet Plan:</label>
												<div class="col-md-8">
													<input type="text" class="form-control" id="txtPackage" disabled>
												</div>
											</div>					
											<div class="form-group row">
												<label class="col-md-4 col-form-label" style="text-align: right;">Internet Plan(MB):</label>
												<div class="col-md-8">
													<div class="input-group input-group">
														<input type="number" class="form-control" onfocus="this.select();" onkeypress="return isNumber(event)" onkeyup="btozero(this);" id="txtMbps" value="0" style="text-align:right;">
													</div>
												</div>
											</div>
			<!-- 								<div class="form-group row">
												<label class="col-md-4 col-form-label" style="text-align: right;">Months:</label>
												<div class="col-md-8">
													<div class="input-group input-group">
														<input type="number" class="form-control" onfocus="this.select();" onkeypress="return isNumber(event)" onkeyup="btozero(this);" id="txtDays" value="0" style="text-align:right;">	
													</div>
												</div>
											</div> -->
											<div class="form-group row">
												<div class="col-md-4"></div>
												<div class="col-md-4 btnSave"></div>
												<div class="col-md-4 btnSave">
													<button type="button" class="btn btn-success btn-block"onclick="validateAndSave();" id="btnSave">Create</button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
		
				<div class="col-md-8">
					<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>
							<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: 700px;">
								<thead>                  
									<tr>
										<th style="width: 3%">#</th>
										<th style="width: 15%">City</th>
										<th style="width: 15%">Internet Plan(MB)</th>
										<!-- <th style="width: 15%">Mbps</th> -->
										<!-- <th style="width: 15%">Days</th> -->
										<th style="width: 3%;">Action</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>

				</div>
				
			</div>
		</div>
	</section>
</div>
<?php include '../footer.php'; ?>
<script>
	var C = '<?= isset($_SESSION['city'])?$_SESSION['city']:"" ?>';
	var code = '<?php echo isset($_SESSION['code'])?$_SESSION['code']:""?>';


	$(function() {
		$("body").addClass("sidebar-collapse");
		
		if(C=='Main Office'){
			getAllCity();
		}else{
			$("#cboCity").append("<option value= '" + C + "'  >" + C + "</option>");	
			getAll();
		}
	});

	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(){
		// generatePackage();
		getAll();
	});

	// $("#txtMbps").change(function(){
	// 	generatePackage();
	// });

	// $("#txtDays").change(function(){
	// 	generatePackage();
	// });

	// function generatePackage(){
	// 	var city_code = $("#cboCity option:selected").attr("data-id");
	// 	var mbps = $("#txtMbps").val();
	// 	// var days = $("#txtDays").val();
	// 	var package = "";
	// 	if(city_code!=""){
	// 		var package = city_code + mbps + "MB";
	// 	}
	// 	$("#txtPackage").val(package);
	// }

	function validateAndSave(){
		$("#loading").css("display","block");
		var city = $("#cboCity").val();
		var package = $("#txtMbps").val() + "MB";
		var mbps = $("#txtMbps").val();
		var days = '';

		if(package==""){
			bootbox.alert("Please choose city.");
			$("#loading").css("display","none");
			return false;
		}

		$.ajax({
			url: APP_URL + "api/package/create.php",
			type: "POST",
			data: JSON.stringify({ city: city, package: package, mbps: mbps, days: days })
		}).done(function(data){	
			$("#loading").css("display","none");
			if(data.message=="created"){
				bootbox.alert("Successfully created.");
				getAll();
			}else if(data.message=="duplicate"){
				bootbox.alert("Not allow duplicate package.");
			}else{
				bootbox.alert("Error on server side.");
			}
		});
	}

	function getAll(){
		$("#myTable").find("tbody").find("tr").remove();
		var city = $("#cboCity").val();
		$.ajax({
			url: APP_URL + "api/package/get_all_packages.php",
			type: "POST",
			data: JSON.stringify({ city: city })
		}).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.");
			}
			$.each(data.records, function(i, v) {	
				if(data.records){$("#total_records").text(" - " + data.records.length + " record(s) found.");}else{$("#total_records").text(0 + " record(s) found.");}
				$("#myTable").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i + 1) + "</td>")
					.append("<td>" + v.city + "</td>")
					// .append("<td>" + v.package + "</td>")
					.append("<td style='text-align:right; padding-right: 20px;'>" + v.mbps + "</td>")
					// .append("<td style='text-align:right; padding-right: 20px;'>" + v.days + "</td>")
					.append("<td style='width: 70px;white-space: nowrap;'> <span type='button' class='btn btn-danger btn-sm' onclick='del(\"" + v.id + "\",this)' style='padding: 0px 8px; min-width: 20px;' title='Delete'><i class='fas fa-trash'></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/package/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 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;
	}

	function btozero(obj){
		generatePackage();
		if($(obj).val() == ""){

			$(obj).val(0);

		}

	}	

</script>
