<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<style>
	
	.hId{
		display: none;
	}
	@media (max-width:480px){
	    .pagination{
	        display: inline-block;
	    }
	    div.dataTables_wrapper div.dataTables_filter input {
	        display: block;
	        padding-left: 0px !important;
	    }
	    .installID{
	        width: 112% !important;
	        margin-left: 14.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>Status</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-6">
					<div class="form-group row">
						<label class="col-md-1 col-form-label" style="text-align: left;">City:</label>
						<div class="col-md-4">
							<select type="text" class="form-control" id="cboCity"></select>
						</div>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group row">
						<label class="col-md-8 col-form-label" style="text-align: right;"><span id='txtDate'></span>&nbsp;DATE: </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="txtDatePicker" value="2020-02-04" aria-label="Date Picker" placeholder="Select a date">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="card card-outline card-primary">
				<div class="card-header">
					<h3 class="card-title">To Activate List<span  style="font-weight:bold;"> </span></h3>
				</div>
				<div class="card-body">
					<table id="myTable" class="table table-bordered table-hover" style="border-collapse: collapse !important;">
						<thead style="background-color: #ecedee;">
							<tr>
 								<th style="width: 5%;">#</th>
 								<th style="text-align: center; width: 10%;">Invoice No.</th>
								<th style="text-align: center; width: 10%;">ID No.</th>
								<th style="text-align: center;">Customer Name</th>
								<th style="text-align: center;">Customer Phone</th>
								<th style="text-align: center; width: 10%;">Package</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: 6%;">Action</th>
							</tr>
						</thead>
						<tbody style="cursor: pointer;"></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').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
			showButtonPanel: true,
            showAnim: 'clip',
            autoclose: true
        }).val(customDate);
		$("#txtDate").text("ACTIVATE");

		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 getAll(){
		var status = 'activate';
		table = $('#myTable').DataTable({
			// "scrollX": true,
			"destroy": true,
			"paging": true,
			"lengthChange": true,
			"searching": true,
			"ordering": true,
			"info": true,
			"autoWidth": false,
			"responsive": true,
			"lengthMenu": [5, 10, 50, 100],
			"pageLength": 5,
			"order": [[ 0, "asc" ]],
			'columnDefs': [	
			{
				'targets': [0, 5, 6, 7, 8],
				'searchable': false
			},	
            {
                'targets': [8], // Index of the "Action" column
                'searchable': false,
                'orderable': false,
                'render': function () {
                    return '<td><button type="button" class="btn btn-success btn-sm" onclick="goToStatusChange(this, \'' + status + '\');" style="min-width: 44px;">Activate</button></td>';
                }
            },


			],
			"ajax": APP_URL + "api/customer/get_customer_status.php?status=" + status + "&city=" + $("#cboCity").val()
		});	
	}

	function goToStatusChange(obj,status){
		var date = $("#txtDatePicker").val();
		var invoice_no = $(obj).parent().parent().find("td").eq(1).text();
		var id_no = $(obj).parent().parent().find("td").eq(2).text();
		
		bootbox.confirm({
			message: "<h4>Are you sure you want to activate?</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_customer_status.php",
						data: JSON.stringify({ id_no: id_no, status: status, invoice_no: invoice_no, date: date }),
						success: function(data){
							if(data.message=="updated"){
								$(obj).parent().parent().remove();
							}else{
								bootbox.alert("Error on server side.");
							}
						}
					});
				}
			}
		});
	}

</script>
