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

<style>
	.tdDisplayNone{
		display: none;
	}
	
	#myTable tbody tr {
    	cursor: pointer;
    }

	#myTable td:nth-child(7){
		text-align: center;
	}

	#myTable td:nth-child(2){
		width: 80px;
	}

	.uploadcontainer {
		position: relative;
		width: 100%;
		cursor:pointer;
	}

	.uploadimage {
		opacity: 1;
		display: block;
		width: 100%;
		height: auto;
		transition: .5s ease;
		backface-visibility: hidden;
	}

	.uploadmiddle {
		transition: .5s ease;
		opacity: 0;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		text-align: center;
	}

	.uploadcontainer:hover .uploadimage {
		opacity: 0.3;
	}

	.uploadcontainer:hover .uploadmiddle {
		opacity: 1;
	}

	.coverPhoto{
		opacity: 1 !important;
	}

	.coverPhoto .uploadtext{ 
		background-color: #F5700F !important;
	}

	.uploadtext {
		background-color: #4CAF50;
		color: white;
		font-size: 10px;
		padding: 5px;
	}

	#myTableList{
		padding-right: 30% !important;
	}
	#ItemEntry{
		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-12">
				<div class="col-md-6">
					<h3>Monthly Price - Entry</h3>
				</div>
				<div class="col-md-6">
				</div>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
				
			<div class="card card-outline card-primary">	
                <div class="card-header">
                    <h3 class="card-title">Input</h3>
                </div>
				<div class="row mb-2" style='padding-top:2%;'>
					<div class="col-md-4">
						<div class="form-group row">
							<label for="txtDatePicker" class="col-md-4 col-form-label text-right">Date: </label>
							<div class="col-md-8">
								<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="txtDatePicker" 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;">City:</label>
                            <div class="col-md-8">
                                <select type="text" class="form-control" id="cboCity"></select>
                            </div>
                        </div>						
					</div>
					<div class="col-md-1">
					</div>
					<div class="col-md-6">
						<div class="card card-outline">
							<div class="card-header">
								<h3 class="card-title">Internet Plan List<span id="total_records" style="font-weight:bold;"> </span> </h3>
								<!-- <div class="card-tools">
									<button type="button" class="btn btn-primary float-right" onclick='addItem()'><i class="fas fa-plus"></i> Add item</button>
								</div> -->
							</div>
							<div class="card-body p-0  table-responsive">
								<table class="table table-striped table-responsive table-head-fixed table-bordered" id="myTable1" style="max-height: 550px;">
									<thead>                  
										<tr>
                                            <th style="width: 3%">#</th>
                                            <th style="width: 30%">Internet Plan</th>
                                            <th style="width: 30%">Monthly Price</th>
                                            <th style="width: 30%">Installation Fee</th>
										</tr>
									</thead>
									<tbody>
									</tbody>
								</table>
							</div>
						</div>

						<div class="form-group row" style="margin-bottom: 0px;">
							<div class="col-md-6"></div>
							<div class="col-md-3">
							<!-- <button type="button" class="btn btn-primary btn-block" id="btnSubmit" onclick="gotoPhotoUploader()">Photo</button> -->
							</div>
							<div class="col-md-3">
								<button type="button" class="btn btn-success btn-block" onclick="validateAndSave()">Change</button>
							</div>
						</div>				
					</div>
				</div>

			</div>

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

	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').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>");
			search();	
		}
		
	});

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

    function search(){
        var city = $("#cboCity").val();
		$("#myTable1").find("tbody").find("tr").remove();
		$.ajax({
			type: "POST",
			url: APP_URL + "api/package/get_last_package_price.php",
			data: JSON.stringify({ city: city }),
			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) {
				$("#myTable1").find("tbody")
				.append($('<tr>')
					.append("<td>" + (i+1) + "</td>")
					.append("<td>" + v.package + "</td>")
					.append("<td style='text-align:right; padding-right: 20px;'><input type='text' style='text-align:right;' class='form-control' onfocus='this.select();' value='" + v.package_price + "'></td>")
					.append("<td style='text-align:right; padding-right: 20px;'><input type='text' style='text-align:right;' class='form-control' onfocus='this.select();' value='" + v.fee + "'></td>")	
                    .append("<td style='display:none;'>" + v.mbps + "</td>")
                    .append("<td style='display:none;'>" + v.days + "</td>")
					// .append("<td style='text-align:center;'><span class='btn btn-danger btn-sm' style='cursor:pointer; font-size: 12px; width: 40px;' onclick='del(\"" + v.id + "\",this)'><i class='fas fa-trash' title='Delete'></i></span></td>")
				);
			});	


       });
	}

	function validateAndSave(){

		var item_details = [];
		$("#myTable1 tbody tr").each(function (){
			var item_detail = {
				"package" : ($(this).find("td").eq(1).text()),
				"package_price" : (parseInt($(this).find("td").eq(2).find("input").val().replace(/,/g, '')))? (parseInt($(this).find("td").eq(2).find("input").val().replace(/,/g, ''))):0,
                "fee" : (parseInt($(this).find("td").eq(3).find("input").val().replace(/,/g, '')))? (parseInt($(this).find("td").eq(3).find("input").val().replace(/,/g, ''))):0,
                "mbps" : ($(this).find("td").eq(4).text()),
                "days" : ($(this).find("td").eq(5).text())
			}
			item_details.push(item_detail);
		});

		var item = {
			"price_change_date":$("#txtDatePicker").val(),
			"city":$("#cboCity").val(),
			"item_details":item_details
		};
		if($("#txtDatePicker").val()=="" || $("#cboCity").val()==""){
			bootbox.alert("Please fill the box.");
		}else{
			$.ajax({
				url: APP_URL + "api/price_change/create.php",
				type: "POST",
				data: JSON.stringify(item)
			}).done(function(data) {	
				if(data.message=="created"){
					bootbox.alert("Price Change Success.");
				}else{
					bootbox.alert("Error on server side.");
				}
			});
		}
	}


</script>	
