    <!-- 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>
						<h4 class="hk-pg-title"><span class="pg-title-icon"><span class="feather-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg></span></span>Stock Dashboard</h4>
                    </div>
					<div class="d-flex dropdown">

                    </div>
                </div>


		<div class="row">
            <div class="col-xl-12">
                <div class="hk-row">
                    <div class="col-lg-8">
                        <section class="hk-sec-wrapper">
                        <h5 class="hk-sec-title">Stok Sekarang</h5>
                            <div class="table-responsive">
                            <table id="products-table" class="table table-sm table-hover mb-0">
                                <thead>
                                    <tr>
                                        <th>Gambar</th>
                                        <th>Produk</th>
                                        <th>Qty</th>
                                        <th>Ketersediaan</th>
                                    </tr>
                                </thead>
                                <tbody>					
                                </tbody>
                            </table>
                            </div>

                            
                        </section>
                        <div class="card">
                                    <div class="card-header card-header-action">
										<h6>Opname<small class="text-muted pl-10">Riwayat</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" style="will-change: transform;">

                                                
													<a id="openModalBtn" class="dropdown-item" href="Stock/create" >Buat Stok Opname</a>
												</div>
											</div>
										</div>
									</div>
                                    <div class="card-body" style="position: relative;">
                                        <div class="table-responsive">
                                        <table id="history-table" class="table table-sm table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Produk</th>
                                                    <th>Perubahan Stock</th>
                                                    <th>Stock Opname</th>
                                                    <th>Tanggal</th>
                                                </tr>
                                            </thead>
                                            <tbody>					
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                        </div>
                        <!--- Card END -->
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                                    <div class="card-header card-header-action">
										<h6>Stok<small class="text-muted pl-10">Masuk</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" style="will-change: transform;">
													<a id="openModalBtn" class="dropdown-item" href="#" data-toggle="modal" data-target="#exampleModalLarge02">Tambah Stock</a>
												</div>
											</div>
										</div>
									</div>
                                    <div class="card-body" style="position: relative;">
                                        <div class="table-responsive">
                                        <table id="stockin-table" class="table table-sm table-hover mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Tanggal</th>
                                                    <th>Approval</th>
                                                    <th>Products</th>
                                                    <th>Qty</th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>					
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                        </div>
                        <!--- Card END -->


                    </div>

                    
                    
                </div>
            </div>    
        </div>
		<!--- ROW END -->

                                  
    </div>



                                    <div class="modal fade show" id="exampleModalLarge02" tabindex="-1" role="dialog" aria-labelledby="exampleModalLarge02" style="display: none; padding-right: 15px;" aria-modal="true">
                                        <div class="modal-dialog modal-xl" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Add Stock</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                <section class="hk-sec-wrapper">
                                                            <fieldset>
                                                                            <div class="form-group">
                                                                                <select class="form-control select2" id="products" name="products" style="width:80%;"  required>
                                                                                <option value=""></option>
                                                                                </select>
                                                                            </div>    
                                                                            <div class="form-group">
                                                                                <input required type="text" class="form-control" id="qty" name="qty" placeholder="Input Qty" autocomplete="off" / required>
                                                                            </div>
                                                                            <select type="text" class="form-control mt-2 pt-5" id="approval" name="approval">                                
                                                                                    <option value="Putri Angraini">Putri Angraini</option>
                                                                                    <option value="Arjuna Apriliansyah">Arjuna Apriliansyah</option>
                                                                                    <option value="Arjuna Apriliansyah">Dimas Febriansyah</option>
                                                                                    <option value="Arjuna Apriliansyah">Nova Alprian</option>

                                                                            </select>
                                                             </fieldset>
                                                            <!--- Card Body END -->
                                                </section>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                                    <button type="button" id="submit-stock" class="btn btn-primary">Save changes</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


<script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/sweetalert2/sweetalert2.min.js"></script>
<script src="https://texapp.is3.cloudhost.id/api/v2/assets/vendors/promise-polyfill/polyfill.min.js"></script>
<script>
			$(document).ready(function () {	

                $('#openModalBtn').on('click', function() {
                    $('#exampleModalLarge02').modal('show'); // Memanggil modal dengan ID tertentu
                });
                $('#submit-stock').on('click', function() {
                    var addstock = {
                                        products: $("#products").val(),
                                        qty: $("#qty").val(),
                                        approval: $("#approval").val()

                                    };
                 $.ajax({
                    url: baseUrl + 'Stock/addstock',
                    type: 'POST',
                    data: { data: addstock},
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message,
                            onClose: function() {
                                // Setelah SweetAlert ditutup, atur semua kotak centang kembali menjadi tidak tercentang
                                window.location.reload();
                            }
                        });
                    },
                    error: function (xhr, status, error) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong!'
                        });
                    }
                });                
                });
				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,
				});
                var tableStock = $('#stockin-table').DataTable({
					ajax: function (data, callback, settings) {
						$.ajax({
							url: baseUrl + 'Stock/getStockindata',
							type: "GET",
							dataType: "json",
							success: function (response) {
								callback(response);
							},
							error: function (xhr, status, error) {
								console.error(xhr.responseText);
							}
						});
					},
					columns: [
                                { data: "tanggal" },
								{ data: "name" },
                                { data: "qty" },
								{ data: "approval" },

							],
					order: [0, 'desc'],
					bInfo: false,
				});

                var tableHistory = $('#history-table').DataTable({
					ajax: function (data, callback, settings) {
						$.ajax({
							url: baseUrl + 'Stock/getOpname',
							type: "GET",
							dataType: "json",
							success: function (response) {
								callback(response);
							},
							error: function (xhr, status, error) {
								console.error(xhr.responseText);
							}
						});
					},
					columns: [
                                { data: "name" },
								{ data: "qty" },
                                { data: "stock" },
								{ data: "tanggal" },

							],
					order: [3, 'desc'],
					bInfo: false,
				});

                $(".select_group").select2();
                $.getJSON("<?= site_url('products/getproducts') ?>", function(data) {
                    // Iterasi data dan tambahkan opsi ke select box
                    $.each(data, function(key, value) {
                        $('#products').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                });
                $('#products').select2({
                    placeholder: 'Pilih Products',
                    allowClear: true
                });
			});	
				</script>