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


<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>Member Type - 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">
											<input type="hidden" id="txtID">	
												<label class="col-md-4 col-form-label" style="text-align: right;">Member Type:</label>
												<div class="col-md-8">
													<input type="text" class="form-control" id="txtMemberType" >
												</div>
											</div>					
											<div class="form-group row">
												<label class="col-md-4 col-form-label" style="text-align: right;">Monthly Price Dis.(%):</label>
												<div class="col-md-8">
													<div class="input-group input-group">
														<input type="text" class="form-control" onfocus="this.select();" onkeypress="return isNumber(event)" onkeyup="btozero(this);" id="txtMemberDiscount" 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;">Installation Fee Dis.(%):</label>
												<div class="col-md-8">
													<div class="input-group input-group">
														<input type="text" class="form-control" onfocus="this.select();" onkeypress="return isNumber(event)" onkeyup="btozero(this);" id="txtMemberInstallationDiscount" 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: 550px;">
								<thead>                  
									<tr>
										<th style="width: 3%">#</th>
										<th style="width: 15%">City</th>
										<th style="width: 15%">Member Type</th>
										<th style="width: 15%">Monthly Price Dis.(%)</th>
										<th style="width: 15%">Installation Fee Dis.(%)</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']:"" ?>';

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

	function validateAndSave(){
		$("#loading").css("display","block");
		var city = $("#cboCity").val();
		var member_type = $("#txtMemberType").val();
		var member_discount = $("#txtMemberDiscount").val();
		var member_install_discount = $("#txtMemberInstallationDiscount").val();

		if(member_type==""){
			bootbox.alert("Please fill member type.");
			$("#loading").css("display","none");
			return false;
		}

		$.ajax({
			url: APP_URL + "api/member/create.php",
			type: "POST",
			data: JSON.stringify({ city: city, member_type: member_type, member_discount: member_discount, member_install_discount: member_install_discount })
		}).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/member/get_all_rows.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.member_type + "</td>")
					.append("<td style='text-align:right; padding-right: 20px;'>" + v.member_discount + "</td>")
					.append("<td style='text-align:right; padding-right: 20px;'>" + v.member_install_discount + "</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/member/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>
