<?php include 'auth_check.php'; ?>
<?php include 'header.php'; ?>

<?php include 'sidemenu.php'; ?>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> -->
<!-- <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script> -->
<style>
    .highcharts-credits{
        display: none;
    }
	#myTable td:nth-child(2){
		width: 20%;
	}
	#myTable td:nth-child(3){
		width: 20%;
	}
	#myTable td:nth-child(4){
		width: 20%;
	}
	#myTable td:nth-child(5){
		width: 20%;
	}
	.hId{
		display: none;
	}
	/* #myTable td:nth-child(1){
		display: none;
	} */
	#myCustomer{
		padding-right: 30% !important;
	}
</style>
        <div class="content-wrapper">
            <div class="content-header">
                <div class="container-fluid">
                </div>
            </div>
            <section class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12 col-sm-6 col-md-3" hidden>
                            <div class="info-box">
                                <!-- <span class="info-box-icon bg-primary elevation-1"><i class="fas fa-users"></i></span> -->
								<span class="info-box-icon bg-info elevation-1"><i class="fas fa-dollar-sign"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text"><span id="txtMontha" style="font-weight: bold;font-size: 17px;"></span> Total Sales</span>
                                    <span class="info-box-number" id="txtTotalSales">
                                        0 
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-success elevation-1"><i class="fas fa-dollar-sign"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">-</span>
                                    <span class="info-box-number" id="txtSaleCredit">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix hidden-md-up"></div>

                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-danger elevation-1"><i class="far fa-money-bill-alt"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">-</span>
                                    <span class="info-box-number" id="txtStockBalance">0 </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-sm-6 col-md-3">
                            <div class="info-box mb-3">
                                <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-dollar-sign"></i></span>

                                <div class="info-box-content">
                                    <span class="info-box-text">-</span>
                                    <span class="info-box-number" id="txtTodayReceivable">0</span>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <!-- <div class="row">
                        <div class="col-12 col-sm-6 col-md-6">
                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Expire List<span id="total_records1" 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 class="table table-striped table-bordered" id="myTable1">
                                        <thead>                  
                                            <tr>
                                                <th style="width: 3%">#</th>
                                                <th style="width: 15%">ID No.</th>
                                                <th style="width: 20%">Name</th>
                                                <th style="width: 15%">Phone</th>
                                                <th style="width: 10%">Days</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-6 col-md-6">
                            <div class="card card-outline card-primary">
                                <div class="card-header">
                                    <h3 class="card-title">Suspend List<span id="total_records2" 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 class="table table-striped table-bordered" id="myTable2">
                                        <thead>                  
                                            <tr>
                                                <th style="width: 3%">#</th>
                                                <th>ID No.</th>
                                                <th>Name</th>
                                                <th>Phone</th>
                                                <th>Date From</th>
                                                <th>Date To</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <!-- <div class="modal fade" id="myCustomer" style="padding-right: 30% !important;">
						<div class="modal-dialog">
							<div class="modal-content" style="width: 200%;">
								<div class="modal-header">
									<h4 class="modal-title">Customer<span id="total_records" style="font-weight:bold;"> </span></h4>
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
								</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-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 class="table table-striped table-bordered" id="myTable">
															<thead>                  
																<tr>
																	<th style="width: 3%">#</th>
																	<th>ID No.</th>
																	<th>Name</th>
																	<th>Type</th>
																	<th>NRC No.</th>
																	<th>Phone No.</th>
											
																</tr>
															</thead>
															<tbody></tbody>
														</table>
													</div>
												</div>
											</div>
										</div>
									</div>
								</section>	
							</div>
						</div>
				</div> -->
                                <!-- <div class="card-header">
                                    <h3 class="card-title">Service Complain</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="row">
                    	<div class="col-12 col-sm-6 col-md-6">
                            <div class="card card-outline card-primary">

                                <div class="card-body p-0">
                                <div class="card-header">
                                    <h3 class="card-title">Service Complaint<span id="total_records3" 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="row" style="margin-top: 15px;">
                                        <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-6" style="padding-right: 0px;">
                                                    <input type="text" class="form-control" id="txtIDNo3"  disabled>
                                                </div>
                                                <div class="col-md-2" style="padding-left: 0px;">
                                                    <span class="input-group-btn">
                                                        <button type="button" class="btn btn-primary" onclick="getAllCustomer()" id="btnCustomer" style="width: 100%;padding-left: 0px;"> . . . </button>
                                                    </span>   
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                			<div class="form-group row">
												<label class="col-md-4 col-form-label" style="text-align: right;">Remark: </label>
												<div class="col-md-8">
													<div class="input-group input-group">
                                                    <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>
                                                    </select>
													</div>
												</div>
											</div>											
                                		</div>
                                		<div class="col-md-3">                            
	                                		<div class="form-group row">
												<div class="col-md-2"></div>
												<div class="col-md-6">
													<button type="button" class="btn btn-primary btn-block" onclick="add3()">Add</button>
												</div>
												<div class="col-md-4"></div>
											</div>
										</div>
                                	</div>
                                    <table class="table table-striped table-bordered" id="myTable3">
                                        <thead>                  
                                            <tr>
                                                <th style="width: 3%">#</th>
                                                <th style="width: 15%">ID No.</th>
                                                <th style="width: 20%">Name</th>
                                                <th style="width: 15%">Phone</th>
                                                <th>Remark</th>
                                                <th style="width: 3%">Delete</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        


                    </div> -->

                </div>
            </section>
        </div>
		<?php include 'footer.php'; ?>
<script>
    var d = new Date();
    var m = d.getMonth();
    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");	
        var mlist = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
        $("#txtMonth").text(mlist[m]);
        $("#txtMonthh").text(mlist[m]);
        $("#txtMonthExpense").text(mlist[m]);
        getSummary();
        // getExpireList();
        // getAll3();
    });

    function getSummary(){
        $.ajax({
            url: APP_URL + "api/utils/get_summary.php"
        }).done(function(data) {
            console.log(data);
            $("#txtTotalSales").text(data.total_sales);
            // createChart(data.chart_categories, data.chart_categories2, data.purchase_series, data.sales_series);
        });
    }

	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,
			"ajax": APP_URL + "api/customer/get_sales_customer.php"
			// "columnDefs": [
			// {
			// 	"targets": [ 1 ],
	        //         // "visible": false,
	        //         "className": 'hide_column',
	        //         "searchable": false
	        //     },
	        //     ]
	        });

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

			$("#txtIDNo3").val($(this).parent().find("td").eq(1).text());

			$("#myCustomer").modal('hide');
		});



	}
    
    function getExpireList(){
		$("#loading").css("display","block");
		$("#myTable1").find("tbody").find("tr").remove();
		$.ajax({
			url: APP_URL + "api/sales/get_expire_list.php",
			error: function(data) {
				$("#loading").css("display","none");
			}
		}).done(function(data) {	
			if(data.records.length>1){
				$("#total_records1").text(" - " + data.records.length + " records found.");
			}else{
				$("#total_records1").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.id_no + "</td>")
                    .append("<td>" + v.name + "</td>")
                    .append("<td>" + v.phone + "</td>")
					.append("<td>" + v.d + "</td>")
					// .append("<td style='text-align:center;'><span class='btn btn-success btn-sm' style='cursor:pointer; font-size: 18px; width: 50px;' onclick='goToDetail(\"" + v.id + "\")'><i class='fas fa-clipboard-list' title='Detail'></i></span></td>")
				);
			});	
       });
	}

    function add3(){ 
		var id_no = $("#txtIDNo3").val();
		var reason = $("#cboReason3").val();

		if(id_no.trim()==""){
			bootbox.alert("Please fill the box.");
		}else{
			$.ajax({
				url: APP_URL + "api/reason/create.php",
				type: "POST",
				data: JSON.stringify({ id_no: id_no, reason: reason }),
			}).done(function(data){
				console.log(data);
				if(data.message=="created"){
					bootbox.alert("Created.");
					$("#txtIDNo3").val("");
					// $("#cboReason3").val("");
					getAll3();
				}else{
					bootbox.alert("Error on server side.");
				}
			});
		}   
	}

    function getAll3(){
		$("#myTable3").find("tbody").find("tr").remove();
		$.ajax({
			url: APP_URL + "api/reason/get_all_rows.php"
		}).done(function(data) {
			console.log(data);
			$.each(data.records, function(i, v) {
				// if(data.records){$("#total_records").text(" - " + data.records.length + " records");}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>" + v.id_no + "</td>")
					.append("<td>" + v.name + "</td>")
					.append("<td>" + v.phone + "</td>")
					.append("<td>" + v.reason + "</td>")
					.append("<td><button type='button' class='btn btn-block btn-danger btn-sm fas fa-delete' onclick='del3(\"" + v.id + "\", this)' style='padding: 0px 13px;font-size: 20px; min-width: 37px'>&times;</button></td>")
					)
			});
		});
	}

    function del3(id, obj){
		bootbox.confirm({
			message: "<h4>Are you sure you want to delete?</h4>",
			buttons: {
				confirm: {
					label: '<span class="glyphicon glyphicon-ok"></span> Delete',
					className: 'btn-danger'
				},
				cancel: {
					label: '<span class="glyphicon glyphicon-remove"></span> Cancel',
					className: 'btn-primary'
				}
			},
			callback: function (result) {
				if(result){
					$.ajax({
						type: "POST",
						url: APP_URL + "api/reason/delete.php",
						data: JSON.stringify({ id: id }),
						success: function(data){
							if(data=="deleted"){
								$(obj).parent().parent().remove();
								getAll3();
							}else{
								bootbox.alert("Error on server side.");
							}
						}
					});
				}
			}
		});
	}

</script>