<?php include '../header.php'; ?>
<?php include '../sidemenu.php'; ?>
<?php
	$D_ = "";
	if(isset($_GET['d'])){
		if(!empty($_GET['d'])){
			$D_ = $_GET['d'];
		}
	}
?>
<style>

	#myCustomer{
		padding-right: 30% !important;
	}
	.displayNone{
		display: none;
	}
	#myTable tbody tr {
    	cursor: pointer;
    }

	#myCustomer-container{
		overflow: hidden;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	@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;
	    }

	    .ansWer{
	        width: 75% !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">
					<h1>Complaint</h1>
				</div>
				<div class="col-md-6">
				</div>
			</div>
		</div>
	</section>
	<section class="content">
		<div class="container-fluid">
			<div class="row" id="SS">
				<div class="col-md-12">

					<div class="card card-outline card-primary">
					<!-- 	<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: 32% 44%;"></i>
						</div> -->
						<div class="card-header">
							<h3 class="card-title">Input</h3>
							
						</div>
						
						<form role="form">
							<div class="card-body">
								<div class="row">
									<div class="col-md-6">
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">City:</label>
											<div class="col-md-8" style="padding-right: 0px;">
												<div class="input-group input-group">
													<select type="text" class="form-control" id="cboCity"></select>
												</div>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Open Date: </label>
											<div class="col-md-8" style="padding-right: 0px;">  
												<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;">ID No.: </label>
											<div class="col-md-3" style="padding-right: 0px;">
												<input type="text" class="form-control" id="txtIDNo3"  disabled>
											</div>
											<div class="col-md-5 input-group" style="padding-right: 0px;" >
												<input type="text" class="form-control" id="txtID" disabled style='display:none;'> 
												<input type="text" class="form-control" id="txtCustomerID" disabled style='display:none;'> 
												<input type="text" class="form-control" id="txtName" disabled>
												<span class="input-group-append">
				                                    <button type="button" class="btn btn-info btn-flat" onclick="getAllCustomer()" id="btnCustomer">...</button>
				                                </span>
											</div>							
										</div>																																				
									</div>

									<div class="col-md-6">
			
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Complaint: </label>
											<div class="col-md-8" style="padding-right: 0px;">
                                                <select type="text" class="form-control" id="cboReason3">
                                                    <option value="Power Lost">Power Lost</option>
                                                    <option value="User/Pwd change">User/Pwd change</option>
                                                    <option value="Connection Lost">Connection Lost</option>
                                                    <option value="Other Service">Other Services</option>
                                                </select>
											</div>
										</div>
										<div class="form-group row">
											<label class="col-md-4 col-form-label" style="text-align: right;">Particular:  </label>
											<div class="col-md-8">
												<input type="text" class="form-control"  id="txtParticular">
											</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="create();" id="btnSave">Save</button>
											</div>
											<div class="col-md-4 btnEdit" style="display: none;">
												<button type="button" class="btn btn-danger btn-block" onclick="clearForm()">Cancel</button>
											</div>
											<div class="col-md-4 btnEdit" style="display: none;">
												<button type="button" class="btn btn-primary btn-block" onclick="create()">Update</button>
											</div>
										</div>																																		
										</div>



								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="card card-outline card-primary">
		<!-- 		<div class="overlay white" id="loading1" 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> -->
				<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">
						<div class="col-md-4">
							<div class="form-group row">
								<!-- <label class="col-md-4 col-form-label" style="text-align: right;">ID No.: </label>
								<div class="col-md-4" >  
									<input type="text" class="form-control float-right" id="txtIDNoS" value="">
								</div> -->
								<div class="col-md-8">
									<select type="combo" class="form-control" id="cboStatus" style="margin-left: 5px;">
										<option value="No Answer">Open Complaint</option>
										<option value="">[All Status]</option>
										<option value="Answer">Closed Complaint</option>
									</select>
								</div>
							</div>
					
						</div>


					<table class="table table-striped table-head-fixed table-bordered" id="myTable3" style="max-height: 500px;">
						<thead>                  
							<tr>
								<th style="width: 3%">No.</th>
								<th style="width: 15%">Open Date Time</th>
								<th style="width: 10%">ID No.</th>
								<th style="width: 15%">Name</th>
								<th style="width: 10%">Complaint</th>
								<th>Particular</th>
								<th style="width: 15%">Close Date Time</th>
								<th>CID</th>
								<th style="text-align: center; width: 8%;">Action</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>

				<div class="modal fade" id="myCustomer">
					<div class="modal-dialog" style="max-width: 100% !important;">
				        <div class="modal-content installID" style="width: 100%; top: 30px; margin-left: 23.5%;">
							<div class="modal-header">
								<h4 class="modal-title">Customer</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-body">
													<table id="myTable" class="table table-bordered table-hover" style="border-collapse: collapse !important;">
														<thead>
															<tr>

																<th>#</th>
																<th>ID No.</th>
																<th>Name</th>
																<th>Customer ID</th>
					
															</tr>
														</thead>
														<tbody></tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
							</section>	
						</div>
					</div>
				</div>

				<div class="modal fade modal-primary" id="myModalAns">
					<div class="modal-dialog" style="max-width: 100% !important;">
						<div class="modal-content ansWer" style="width: 60%; top: 30px; margin-left: 20.5%;">
							<div class="modal-header">
								<h4 class="modal-title">Answer</h4>
								
							</div>
							<div class="modal-body">
								<div class="col-md-12">
									<div class="form-group row">
										<label class="col-md-4 col-form-label" style="text-align: right;">Close Date Time: </label>
										<div class="col-md-7">  
											<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="txtDatePicker3" 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;">By:</label>
										<div class="col-md-7">
											<!-- <input type="text" class="form-control" id="txtCity1" style="display:none;"> -->
											<input type="text" class="form-control" id="txtAnswerBy" value="">
										</div>
										<div class="col-md-1"></div>
									</div>
									<div class="form-group row">
										<label class="col-md-4 col-form-label" style="text-align: right;">Remark:</label>
										<div class="col-md-7">
											<!-- <input type="text" class="form-control" id="txtCity1" style="display:none;"> -->
											<textarea type="text" class="form-control" id="txtRemark" value="" row=2></textarea>
										</div>
										<div class="col-md-1"></div>
									</div>
									<div class="form-group row">
										<label class="col-md-8 col-form-label"></label>
										<div class="col-md-3">
											<button class="btn btn-primary col-md-12" type="button" onclick="addPayment();">Add</button>
										</div>
										<div class="col-md-1"></div>
									</div>
								</div>
							<div class="col-md-12">
								<div class="card card-outline ">
									<div class="card-body p-0">
										<table class="table table-striped table-bordered" id="myTable1">
											<thead>                  
												<tr>
													<th style="width: 10%;">Close Date Time</th>
													<th style="width: 10%;">By</th>
													<th style="width: 20%;">Remark</th>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</div>
							</div>


							</div>
						</div>
					</div>
				</div>


		</div>
	</section>
</div>
<?php include '../footer.php'; ?>
<script>
	var C = '<?php echo isset($_SESSION['city'])?$_SESSION['city']:""?>';
	var D_ = '<?=$D_;?>';
	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);
    // var start = moment().subtract(29, 'days');
    // var end = moment();
    // function cb(start, end) {
    //     $('#reportrange span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
    //     // getPackageList(start.format('YYYY-MM-DD'),end.format('YYYY-MM-DD'));
    // }
	$(function() {
        $("body").addClass("sidebar-collapse");
		$('#txtDatePicker,#txtDatePicker3').datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
			showButtonPanel: true,
            showAnim: 'clip',
            autoclose: true
        }).val(customDate);
		if(C=='Main Office'){
			getAllCity();
			$("#txtDatePicker").attr("disabled", false);
		}else{
			$("#cboCity").append("<option value= '" + C + "'  >" + C + "</option>");	
			getAll3();
			$("#txtDatePicker").attr("disabled", true);
		}
		getAll3();
	});

	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>");	
				}
			});		
		});
	}

	function getAllCustomer(){
		$("#myCustomer").modal('show');
		fillGrid();
	}

	function fillGrid(){
		// var class_id = $("#cboClassGrade").val();
		// var academic_year = $("#cboAcademicYear").val();

		table = $('#myTable').DataTable({
			
			"destroy": true,
			"paging": true,
			"lengthChange": true,
			"searching": true,
			"ordering": true,
			"info": true,
			"autoWidth": false,
			"responsive": true,
			"lengthMenu": [5, 10, 50, 100],
			"pageLength": 5,

			// "scrollX": true,
			// "ajax": APP_URL + "api/customer/get_sales_customer.php",
			"ajax": APP_URL + "api/customer/get_sales_customer.php?city=" + $("#cboCity").val(),
			"columnDefs": [
				{
						'targets': [3],
						"className": 'displayNone'
					},
	            ]
	        });

		$('#myTable').on('click', 'tbody td', function(e){	

			$("#txtIDNo3").val($(this).parent().find("td").eq(1).text());
			$("#txtName").val($(this).parent().find("td").eq(2).text());
			$("#txtCustomerID").val($(this).parent().find("td").eq(3).text());
			$("#myCustomer").modal('hide');
		});

	}

	function create(){ 
		// $("#loading").css("display","block");
		var id = $("#txtID").val();
		var city = $("#cboCity").val();
		var complaint_date = $("#txtDatePicker").val();
		var complaint = $("#cboReason3").val();
		var particular = $("#txtParticular").val();
		var customer_id = $("#txtCustomerID").val();
		var name = $("#txtName").val();
		var id_no = $("#txtIDNo3").val();

		if(id_no.trim()==""){
			bootbox.alert("Please fill the box.");
			// $("#loading").css("display","none");
		}else{
			$.ajax({
				url: APP_URL + "api/complaint/create.php",
				type: "POST",
				data: JSON.stringify({ id: id, city: city, complaint_date: complaint_date, complaint: complaint, particular: particular, customer_id: customer_id, name: name, id_no: id_no }),
			}).done(function(data){
				// $("#loading").css("display","none");
				console.log(data);
				if(data.message=="created"){
					bootbox.alert("Created.");
					$("#txtIDNo3").val("");
					$("#customer_id").val("");
					$("#txtName").val("");
					$("#txtParticular").val("");
					getAll3();
				}else if(data.message=="updated"){
					bootbox.alert("Successfully Updated.");
					clearForm();
					getAll3();
				}else{
					bootbox.alert("Error on server side.");
				}
			});
		}   
	}
	$(".exportToExcel").click(function(){
		exportExcel("#myTable3");
	});

	$("#cboCity").change(function(){
		getAll3();
	});

	$('#cboStatus').change(function() { 
		getAll3();
	});

	function getAll3(){
		$("#loading").css("display","block");			
		var df = "";
		var dt = "";
		var status = $("#cboStatus").val();
        var id_no = $("#txtIDNoS").val();
        var city = $("#cboCity").val();
		table = $('#myTable3').DataTable({
			"destroy": true,
			"paging": true,
			"lengthChange": true,
			"searching": true,
			"ordering": true,
			"info": true,
			"autoWidth": false,
			"responsive": true,
			"lengthMenu": [5, 50, 100, 200, 500, 1000, -1],
			"pageLength": 5,
			// "ajax":{
			// 	"url" : APP_URL + "api/complaint/get_all_rows.php",
			// 	"type" : "POST",
			// 	"contentType": "application/json",
			// 	"data": function ( d ) {
			// 		return JSON.stringify({ city: city, status:status });
			// 	},

			// },
				"columnDefs": [
					{
						'targets': 8,
						'searchable': false,
						'orderable': false,	
						'render': function (){	
							// var id = data.split(" | ")[0];
							return '<td><span class="btn btn-info btn-sm far fa-comment-dots" style="cursor: pointer;padding: 5px 9px 5px 10px;font-size: 17px;margin-bottom: 2px;" onclick="Ans(this)" title="Answer"></span> <span class="btn btn-danger btn-sm fas fas fa-trash-alt" style="cursor: pointer;padding: 5px 9px 5px 10px;font-size: 17px;margin-bottom: 2px;" onclick="del(this)" title="Delete"></span></td>';	
						}
					},
					{
						'targets': [7],
						"className": 'displayNone'
					}
				],
				"ajax": APP_URL + "api/complaint/get_all_rows.php?city=" + city + "&status=" + status,
		});
	}

	// function getAll3(){
	// 	$("#myTable3").find("tbody").find("tr").remove();
	// 	var df = "";
	// 	var dt = "";
	// 	var status = $("#cboStatus").val();
    //     var id_no = $("#txtIDNoS").val();
	// 	$.ajax({
	// 		url: APP_URL + "api/complaint/get_all_rows.php",
	// 		type: "POST",
	// 		data: JSON.stringify({ city: $("#cboCity").val(), df:df, dt:dt, status:status, id_no: id_no })
	// 	}).done(function(data) {
	// 		// $("#loading1").css("display","none");
	// 		$("#myTable3").find("tbody").find("tr").remove();
	// 		console.log(data);
	// 		$("#total_records").text("");
	// 		$.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.");}
	// 			console.log(v);
	// 			$("#myTable3").find("tbody")
	// 			.append($('<tr>')
	// 				.append("<td style='width: 10px'>" + (i+1) + "</td>")
	// 				.append("<td style='display:none;'>" + v.city + "</td>")
	// 				.append("<td>" + v.complaint_date + "</td>")
	// 				.append("<td>" + v.id_no + "</td>")					
	// 				.append("<td>" + v.name + "</td>")
	// 				.append("<td>" + v.complaint + "</td>")
	// 				.append("<td>" + v.particular + "</td>")
	// 				// .append("<td style='display:none;'>" + v.customer_id + "</td>")
	// 				.append("<td>" + v.answer_date + "</td>")
	// 				// .append("<td>" + v.answer_by + "</td>")
	// 				// .append("<td>" + v.remark + "</td>")
	// 				// .append("<td><span class='btn btn-info btn-sm' style='cursor:pointer; font-size: 13px; width: 40px;' onclick='Ans(\"" + v.id + "\", this)' >Ans</span>&nbsp;<span class='btn btn-success btn-sm' onclick='edit(\"" + v.id + "\", this)' style='cursor:pointer; font-size: 13px; width: 40px;' >Edit</span>&nbsp;<span class='btn btn-danger btn-sm' onclick='del(\"" + v.id + "\", this)' style='cursor:pointer; font-size: 13px; width: 40px;' >Del</span></td>")

	// 				.append("<td><span class='btn btn-info btn-sm far fa-comment-dots' style='cursor: pointer;padding: 5px 9px 5px 10px;font-size: 17px;margin-bottom: 2px;' onclick='Ans(\"" + v.id + "\", this)' title='Answer'></span> <span class='btn btn-danger btn-sm fas fas fa-trash-alt' style='cursor: pointer;padding: 5px 9px 5px 10px;font-size: 17px;margin-bottom: 2px;' onclick='del(\"" + v.id + "\", this)' title='Delete'></span></td>")
	// 				)
	// 		});
	// 	});
	// }
	ID="";
	function Ans(obj){
		$("#myModalAns").modal('show');
		var tr = $(obj).parent().parent();
		var opt = $(tr).find("td").eq(7).text();
		ID = opt;	
		$("#myTable1").find("tbody tr").remove();
		$.ajax({
			url: APP_URL + "api/complaint/get_one_complaint.php",
			type: "POST",
			data: JSON.stringify({ id: opt })
		}).done(function(data){
			console.log(data)
				$.each(data, function(i, v) {
					$("#myTable1").find("tbody")
						.append($('<tr>')
							// .append("<td style='width: 10px'>" + ($("#myTable1P tbody tr").length +1) + "</td>")
							.append("<td>" + v.answer_date + "</td>")
							.append("<td>" + v.answer_by + "</td>")
							.append("<td>" + v.remark + "</td>")
						)
				});
				// $("#txtTotalAmountP").val(data.t);
		});
	}

	function addPayment(){
		var answer_date = $("#txtDatePicker3").val();
		var answer_by = $("#txtAnswerBy").val();
		var remark = $("#txtRemark").val();

		$.ajax({
			url: APP_URL + "api/complaint/update_answer.php",
			type: "POST",
			data: JSON.stringify({ id: ID, answer_date: answer_date, answer_by: answer_by,remark: remark })
		}).done(function(data) {
			if(data.message=="updated"){
				$("#myModalAns").modal('hide');
				bootbox.alert("Done.");
				getAll3();
			}else{
				bootbox.alert("Error on server side.");
			}
		});
		
	}

	function edit(obj){
		// $("#txtCustomer").focus();

		// $("#txtCustomer").attr("disabled", true);
		$("#cboCity").attr("disabled", true);

		$(".btnSave").css("display", "none");
		$(".btnEdit").css("display", "block");
		$(".fa-edit").attr("disabled", true);

		$(obj).attr("disabled", false);
		var tr = $(obj).parent().parent();
		var opt = $(tr).find("td").eq(7).text();

		$("#txtID").val(opt);
		// $("#cboCity").val($(tr).find("td").eq(1).text());
		$("#txtDatePicker").val($(tr).find("td").eq(2).text());
		$("#txtIDNo3").val($(tr).find("td").eq(3).text());
		$("#txtName").val($(tr).find("td").eq(4).text());
		$("#cboReason3").val($(tr).find("td").eq(5).text());
		$("#txtParticular").val($(tr).find("td").eq(6).text());
		$("#txtCustomerID").val($(tr).find("td").eq(7).text());

	}

	function del(obj){
		var tr = $(obj).parent().parent();
		var opt = $(tr).find("td").eq(7).text();
		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/complaint/delete.php",
						data: JSON.stringify({ id: opt }),
						success: function(data){
							if(data=="deleted"){
								// getAll();
								$(obj).parent().parent().remove();
							}else{
								bootbox.alert("Error on server side.");
							}
						}
					});
				}
			}
		});
	}

	function clearForm(){

		$("#cboCity").attr("disabled", false);

		$(".btnSave").css("display", "block");
		$(".btnEdit").css("display", "none");
		$(".fa-edit").attr("disabled", false);

		$("#txtID").val("");
		$("#txtParticular").val("");
		$("#txtIDNo3").val("");
		$("#txtCustomerID").val("");
		$("#txtName").val("");
		// $('#optNORMAL').attr('checked', 'checked');
	}

	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){
		if($(obj).val() == "")$(obj).val(0);
	}

</script>
