    <!-- Main Content -->
        <div class="hk-pg-wrapper">
			<!-- Container -->
            <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">

				<div class="hk-pg-header mb-10">
						<div>
						<select id="tahun" 
              class="form-control" >
               
              </select> 
						</div>
				</div>

				<!-- Row -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="hk-row">
							<div class="col-lg-3 col-sm-6">
								<div class="card card-sm">
									<div class="card-body">
										<span class="d-block font-11 font-weight-500 text-dark text-uppercase mb-10">New Costumer</span>
										<div class="d-flex align-items-center justify-content-between position-relative">
											<div>
												<span class="d-block display-5 font-weight-400 text-dark"><p id="totalClients"></p><span class="text-success font-12 font-weight-600"><p id="percentageChange"></p></span></span>
											</div>
											<div class="position-absolute r-0 b-0 w-40">
												<div id="chart3"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6">
								<div class="card card-sm">
									<div class="card-body">
										<span class="d-block font-11 font-weight-500 text-dark text-uppercase mb-10">New Order</span>
										<div class="d-flex align-items-center justify-content-between position-relative">
											<div>
												<span class="d-block">
													<span class="display-5 font-weight-400 text-dark"><p id="totalOrders"></p><span class="text-success font-12 font-weight-600"><p id="percentageChange2"></p></span></span>
												</span>
											</div>
											<div class="position-absolute r-0 b-0 w-40">
												<div id="chart4"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6">
								<div class="card card-sm">
									<div class="card-body">
										<span class="d-block font-11 font-weight-500 text-dark text-uppercase mb-10">Revenue this month</span>
										<div class="d-flex align-items-end justify-content-between">
											<div>
												<span class="d-block">
													<span class="display-5 font-weight-400 text-dark">$8,725</span>
													<small>excl tax</small>
												</span>
											</div>
											<div>
												<span class="text-success font-12 font-weight-600">+5%</span>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-sm-6">
								<div class="card card-sm">
									<div class="card-body">
										<span class="d-block font-11 font-weight-500 text-dark text-uppercase mb-10">Outstanding Invoices</span>
										<div class="d-flex align-items-end justify-content-between">
											<div>
												<span class="d-block">
													<span class="display-5 font-weight-400 text-dark">18 invoices</span>
												</span>
											</div>
											<div>
												<span class="text-danger font-12 font-weight-600">-12%</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="hk-row">
							<div class="col-lg-8">
								<div class="card card-refresh">
									<div class="refresh-container">
										<div class="loader-pendulums"></div>
									</div>
									<div class="card-header card-header-action">
										<div>
											<h6 class="mb-10">Revenue</h6>
											<p class="font-14 w-80">Revenue is the income that a business has from its normal business activities, usually from the sale of goods and services to customers.</p>
										</div>
										<div class="d-flex align-items-center card-action-wrap">
											<a href="#" class="inline-block refresh mr-15">
												<i class="ion ion-md-radio-button-off"></i>
											</a>
											<a href="#" class="inline-block full-screen">
												<i class="ion ion-md-expand"></i>
											</a>
										</div>
									</div>
									<div class="card-body">
									</div>
								</div>
							</div>
							<div class="col-lg-4">
									<div class="card">
									<div class="card-header card-header-action">
										<h6>Order Reports<small class="text-muted pl-10">Monthly Preview</small></h6>
										<div class="d-flex align-items-center card-action-wrap">
											<div class="inline-block dropdown">
												<a class="dropdown-toggle no-caret" data-toggle="dropdown" href="#" aria-expanded="false" role="button"><i class="ion ion-ios-more"></i></a>
												<div class="dropdown-menu dropdown-menu-right">
													<a class="dropdown-item" href="#">Action</a>
													<a class="dropdown-item" href="#">Another action</a>
													<a class="dropdown-item" href="#">Something else here</a>
													<div class="dropdown-divider"></div>
													<a class="dropdown-item" href="#">Separated link</a>
												</div>
											</div>
										</div>
									</div>
									<div class="card-body">
										<div id="chart2" style="height:194px;"></div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="card">
							<div class="card-body pa-0">
								<div class="table-wrap">
									<div class="table-responsive">
										<table id="products-table" class="table table-sm table-hover mb-0">
											<thead>
												<tr>
													<th>Image</th>
													<th>Products</th>
													<th>Qty</th>
													<th>Aailability</th>
												</tr>
											</thead>
											<tbody>
												
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>		
					</div>
                </div>
                <!-- /Row -->
            </div>
            <!-- /Container -->
			<script>
			$(document).ready(function () {	
				var baseUrl = "<?php echo base_url(); ?>";
				var table = $('#products-table').DataTable({
					ajax: function (data, callback, settings) {
						$.ajax({
							url: baseUrl + 'Stock/generatedata',
							type: "GET",
							dataType: "json",
							success: function (response) {
								callback(response);
							},
							error: function (xhr, status, error) {
								console.error(xhr.responseText);
							}
						});
					},
					columns: [
								{ 
									data: 'image',
									render: function(data, type, row) {
										return '<img class="img-fluid rounded" src="' + data + '" onerror="this.onerror=null;this.src=\'https://texapp.is3.cloudhost.id/fa44cb8fc0c7c8b613c83c2cc13637c8.jpg\'" style="width:40px;height:40px;" alt="icon">';
									}
								},
								{ data: "name" },
								{ data: "stock_diff" },
								{ 
									data: "availability",
									render: function(data, type, row) {
										if (data === "1") {
											return '<span class="badge badge-soft-success">Tersedia</span>';
										} else {
											return '<span class="badge badge-soft-primary">Tidak Tersedia</span>';
										}
									}
								}
							],
					order: [1, 'asc'],
					pageLength: 20,
					searching: false,
					bPaginate: false,
					bFilter: false,
					bInfo: false,
				});
			});	
				</script>
            