<div class="container-fluid stok-page" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800 stok-page-title">Data stok barang</h1>
		<!--ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page">stok barang</li>
		</ol-->
	</div>
	<div class="row">
		<div class="col-md-12">
			<form action="#" method="post">
				<div class="card">
					<div class="card-header pb-0">
						<div class="input-group input-group-sm stok-filter-toolbar">
							<div class="input-group-prepend">
								<span class="input-group-text" for="limits">LIMIT</span>
							</div>
							<select id="limits" name="limits" class="form-control custom-select w-1" onchange="search_Stok()">
								<option value="10">10</option>
								<option value="20">20</option>
								<option value="50">50</option>
								<option value="100">100</option>
							</select>
							<div class="input-group-prepend">
							  <span class="input-group-text" for="sortField">SORT BY</span>
							</div>
							<select id="sortField" class="form-control custom-select w-1" onchange="search_Stok()">
							  <option value="total_stok" selected>Total Stok</option>
							  <option value="stok_masuk">Stok Awal</option>
							  <option value="stok_keluar">Stok Keluar</option>
							</select>

							<div class="input-group-prepend">
							  <span class="input-group-text" for="sortBy">URUTKAN</span>
							</div>
							<select id="sortBy" class="form-control custom-select w-1" onchange="search_Stok()">
							  <option value="ASC" selected>Terkecil &rarr; terbesar</option>
							  <option value="DESC">Terbesar &rarr; terkecil</option>
							</select>


							<div class="input-group-prepend stok-mobile-search-label">
							  <span class="input-group-text" for="keywords">Cari data</span>
							</div>
							<input type="text" id="keywords" class="form-control w-40" placeholder="Cari nama barang..." onkeyup="search_Stok();"/>
							<div class="input-group-append stok-filter-actions">
								<button class="btn btn-danger clear_stok stok-filter-btn" type="button"><i class="fa fa-times"></i> Clear</button>
								<button type="button" class="btn btn-info add_bahan stok-filter-btn" data-id="0"><i class="fa fa-plus"></i> Tambah</button>
								<button type="button" class="btn btn-secondary print_stok stok-filter-btn" id="print_stok" data-toggle="tooltip" data-original-title="Print PDF"><i class="fa fa-print fa-1x"></i> Print</button>
								<button type="button" class="btn btn-warning open_minimum_stok stok-filter-btn" data-toggle="tooltip" data-original-title="Atur Limit Low Stok"><i class="fa fa-sliders"></i> Limit Stok</button>
								<!--button class="btn btn-primary url_doc" data-url="stok" type="button" data-toggle="tooltip" data-original-title="Dok Bahan Produk" data-placement="left"><i class="fa fa-info-circle"></i></button-->
							</div>
						</div>
					</div>
					
					<div class="card-body table-responsive" id="dataStok">
						<div class="card-block">
							<?php
								$stokTriggerStatus = isset($stok_keluar_trigger_status) ? (int)$stok_keluar_trigger_status : stok_keluar_trigger_status();
								$stokTriggerLabel = stok_keluar_trigger_status_label($stokTriggerStatus);
							?>
							<!-- INFO NOTE (baru) -->
						    <div class="d-flex align-items-center justify-content-between flex-wrap mb-3 stok-info-banner">
							  <div class="d-flex align-items-center" style="gap:8px;">
							    <i class="fa fa-info-circle" style="color:#2b6cb0;"></i>
							    <div class="stok-info-banner__text">
							      <b>Info:</b> Data Stok akan otomatis berkurang (setelah status di List Pekerjaan berubah menjadi <b class="stok-trigger-status-label"><?=$stokTriggerLabel;?></b>).
							    </div>
							  </div>
							  <button type="button" class="btn btn-primary btn-sm open_stok_trigger_setting stok-info-banner__button" data-status="<?=$stokTriggerStatus;?>">
							    <i class="fa fa-cog"></i> Atur Stok Berkurang
							  </button>
							</div>

							<table class="table table-striped table-mailcard" >
								<thead>
									<tr>
										<th class="w-1 text-center">No</th>
										<th class="w-10 pl-1">Merk</th>
										<th class="w-8 text-right">Stok Awal</th>
										<th class="w-8 text-right">Stok Keluar</th>
										<th class="w-10 text-right">Total Stok</th>
									</tr>
								</thead>
								<tbody>
									  <?php
									  // =========================
									  // FIX: Format angka stok biar desimal tidak kepanjangan
									  // - Integer tampil tanpa desimal
									  // - Desimal tampil max 2 angka, buang nol belakang (144,70 => 144,7)
									  // =========================
									  if (!function_exists('pj_fmt_stok')) {
									    function pj_fmt_stok($val, $maxDec = 2)
									    {
									      if ($val === null || $val === '') return '0';
									      $n = (float)$val;

									      // anggap integer bila selisih sangat kecil (mengatasi 4.0000000001)
									      $isInt = abs($n - round($n)) < 0.000000001;
									      if ($isInt) return number_format($n, 0, ',', '.');

									      // bulatkan dulu untuk menghindari float panjang
									      $n = round($n, $maxDec);

									      // format lalu rapikan trailing zero
									      $s = number_format($n, $maxDec, ',', '.');
									      return rtrim(rtrim($s, '0'), ',');
									    }
									  }

									  // =========================
										// NEW: helper unit satuan (cm/m/pcs) per bahan
										// - Ambil dari $row->satuan kalau sudah ada dari query join
										// - Kalau belum ada, ambil dari tabel satuan via id_satuan (pakai cache biar tidak berat)
										// =========================
										if (!function_exists('pj_unit_norm')) {
										  function pj_unit_norm($u)
										  {
										    $u = trim((string)$u);
										    if ($u === '') return '';
										    $k = strtoupper($u);

										    $map = [
										      'MTR' => 'm', 'METER' => 'm', 'M' => 'm',
										      'CM'  => 'cm',
										      'PCS' => 'pcs', 'PIECES' => 'pcs',
										    ];
										    return $map[$k] ?? strtolower($u);
										  }
										}

										if (!function_exists('pj_get_unit_for_row')) {
										  function pj_get_unit_for_row($row)
										  {
										    // 1) kalau sudah ada dari join model: $row->satuan
										    if (is_object($row) && !empty($row->satuan)) {
										      return pj_unit_norm($row->satuan);
										    }

										    // 2) fallback: ambil dari tabel satuan berdasarkan id_satuan
										    if (!is_object($row) || empty($row->id_satuan)) return '';

										    static $cache = []; // cache per id_satuan
										    $idSatuan = (int)$row->id_satuan;
										    if ($idSatuan <= 0) return '';

										    if (array_key_exists($idSatuan, $cache)) {
										      return $cache[$idSatuan];
										    }

										    $CI = get_instance();
										    $q  = $CI->db->select('satuan')->from('satuan')->where('id', $idSatuan)->get();
										    $u  = '';
										    if ($q && $q->num_rows() > 0) {
										      $u = pj_unit_norm($q->row()->satuan);
										    }

										    $cache[$idSatuan] = $u;
										    return $u;
										  }
										}

										if (!function_exists('pj_stock_cell')) {
										  function pj_stock_cell($val, $row)
										  {
										    $num  = pj_fmt_stok($val);
										    $unit = pj_get_unit_for_row($row);
										    return $unit ? ($num . ' <small class="text-muted">' . $unit . '</small>') : $num;
										  }
										}

									  ?>

									  <?php
										// =========================
										// Helpers stok + unit + badge LOW STOCK (untuk render awal)
										// =========================
										if (!function_exists('pj_fmt_stok')) {
										  function pj_fmt_stok($val, $maxDec = 2)
										  {
										    if ($val === null || $val === '') return '0';
										    $n = (float)$val;

										    $isInt = abs($n - round($n)) < 0.000000001;
										    if ($isInt) return number_format($n, 0, ',', '.');

										    $n = round($n, $maxDec);
										    $s = number_format($n, $maxDec, ',', '.');
										    return rtrim(rtrim($s, '0'), ',');
										  }
										}

										if (!function_exists('pj_unit_norm')) {
										  function pj_unit_norm($u)
										  {
										    $u = trim((string)$u);
										    if ($u === '') return '';
										    $k = strtoupper($u);

										    $map = [
										      'MTR' => 'm', 'METER' => 'm', 'M' => 'm',
										      'CM'  => 'cm',
										      'PCS' => 'pcs', 'PIECES' => 'pcs',
										      'LBR' => 'lbr',
										    ];
										    return $map[$k] ?? strtolower($u);
										  }
										}

										if (!function_exists('pj_get_unit_for_row')) {
										  function pj_get_unit_for_row($row)
										  {
										    // kalau model sudah join satuan: $row->satuan
										    if (is_object($row) && !empty($row->satuan)) {
										      return pj_unit_norm($row->satuan);
										    }

										    // fallback ambil dari tabel satuan via id_satuan (cache)
										    if (!is_object($row) || empty($row->id_satuan)) return '';

										    static $cache = [];
										    $idSatuan = (int)$row->id_satuan;
										    if ($idSatuan <= 0) return '';

										    if (array_key_exists($idSatuan, $cache)) return $cache[$idSatuan];

										    $CI = get_instance();
										    $q  = $CI->db->select('satuan')->from('satuan')->where('id', $idSatuan)->get();
										    $u  = '';
										    if ($q && $q->num_rows() > 0) $u = pj_unit_norm($q->row()->satuan);

										    $cache[$idSatuan] = $u;
										    return $u;
										  }
										}

										if (!function_exists('pj_stock_cell')) {
										  function pj_stock_cell($val, $row)
										  {
										    $num  = pj_fmt_stok($val);
										    $unit = pj_get_unit_for_row($row);
										    return $unit ? ($num . ' <small class="text-muted">' . $unit . '</small>') : $num;
										  }
										}

										if (!function_exists('pj_low_badge')) {
										  function pj_low_badge($total, $minimum)
										  {
										    $t = (float)$total;
										    $m = (float)$minimum;
										    $badgeStyle = 'font-size:11px;letter-spacing:0;display:inline-flex;align-items:center;gap:4px;border-radius:6px;padding:3px 7px;background:#ff4d4f;border:1px solid #ff4d4f;color:#fff;';
										    $icon = '<i class="fa fa-warning" style="color:#ffd43b;font-size:15px;line-height:1;text-shadow:-1px 0 #111,0 1px #111,1px 0 #111,0 -1px #111;"></i>';

										    if ($t <= 0) {
										      return ' <span class="badge badge-danger ml-1" style="'.$badgeStyle.'">'.$icon.'<span>STOK KOSONG</span></span>';
										    }

										    if ($m > 0 && $t <= $m) {
										      return ' <span class="badge badge-danger ml-1" style="'.$badgeStyle.'">'.$icon.'<span>LOW STOCK</span></span>';
										    }

										    return '';
										  }
										}
										?>


								<?php if(!empty($result)){

									$no = 1;
									$total = 0;
									foreach ($result as $row){
											
											$jml_masuk  = (float) stok_masuk($row->id);
											$jml_keluar = (float) stok_keluar($row->id);
											$total      = $jml_masuk - $jml_keluar;
											$minimum    = isset($row->batas_minimum_stok) ? (float)$row->batas_minimum_stok : 0;
											$title      = htmlspecialchars($row->title, ENT_QUOTES, 'UTF-8');

											echo "<tr>
													  <td class='text-center'>$no</td>
													  <td class='pl-1'>".$title."</td>

													  <td class='text-right' data-value='".htmlspecialchars($jml_masuk, ENT_QUOTES)."'>".pj_stock_cell($jml_masuk, $row)."</td>
													  <td class='text-right' data-value='".htmlspecialchars($jml_keluar, ENT_QUOTES)."'>".pj_stock_cell($jml_keluar, $row)."</td>
													  <td class='text-right' data-value='".htmlspecialchars($total, ENT_QUOTES)."'>".pj_stock_cell($total, $row).pj_low_badge($total, $minimum)."</td>
													</tr>";



											$no++;
										} }else{ ?>
										<tr>
											<td colspan="5">Data belum ada</td>
										</tr>
									<?php } ?>
								</tbody>
							</table>

							<div class="stok-mobile-list">
								<?php if(!empty($result)){
									$no = $this->uri->segment(3)+1;
									foreach ($result as $row){
										$jml_masuk  = (float) stok_masuk($row->id);
										$jml_keluar = (float) stok_keluar($row->id);
										$total      = $jml_masuk - $jml_keluar;
										$minimum    = isset($row->batas_minimum_stok) ? (float)$row->batas_minimum_stok : 0;
										$title      = htmlspecialchars($row->title, ENT_QUOTES, 'UTF-8');
										$badgeLow   = pj_low_badge($total, $minimum);
										$isDanger   = ($total <= 0 || ($minimum > 0 && $total <= $minimum));
										?>
										<div class="stok-mobile-card">
											<div class="stok-mobile-head">
												<div class="stok-mobile-head-left">
													<div class="stok-mobile-badge"><?php echo $no; ?></div>
													<div class="min-w-0">
														<div class="stok-mobile-title"><?=$title?></div>
													</div>
												</div>
												<?php if (!empty($badgeLow)) { ?>
													<div class="stok-mobile-status"><?=$badgeLow?></div>
												<?php } ?>
											</div>

											<div class="stok-mobile-stats">
												<div class="stok-mobile-stat">
													<div class="stok-mobile-stat-label">Stok Awal</div>
													<div class="stok-mobile-stat-value"><?=pj_stock_cell($jml_masuk, $row)?></div>
												</div>
												<div class="stok-mobile-stat">
													<div class="stok-mobile-stat-label">Stok Keluar</div>
													<div class="stok-mobile-stat-value"><?=pj_stock_cell($jml_keluar, $row)?></div>
												</div>
												<div class="stok-mobile-stat">
													<div class="stok-mobile-stat-label">Total Stok</div>
													<div class="stok-mobile-stat-value <?= $isDanger ? 'is-danger' : ''; ?>"><?=pj_stock_cell($total, $row)?></div>
												</div>
											</div>
										</div>
									<?php
										$no++;
									}
								}else{ ?>
									<div class="stok-mobile-footer">Data belum ada</div>
								<?php } ?>
							</div>

							<?php if(!empty($result)){ ?>
								<div class="stok-mobile-footer">Menampilkan : <?=count($result)?></div>
							<?php } ?>

							<nav aria-label="Page navigation" class="mt-2">
								<?php 
									echo $this->ajax_pagination->create_links(); 
								?>
							</nav>
						</div><!-- /.card-body -->
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</form>
		</div>
	</div>
</div>
<div id="ModalStok" class="modal left fade" role="dialog">
    <div class="modal-dialog" id="load-save-bahan">
        <div class="modal-content flat">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalScrollableTitle">Stok Awal</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body" >
				<input type="hidden" name="type" id="type" class="form-control" required>
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
							<label for="judul">Nama Bahan/Barang</label>
							<select class="form-control select-box" id="bahan_stok">
								<option value="">Pilih bahan</option>
								<?php foreach($bahan AS $val){ ?>
									<option value="<?=$val->id;?>"><?=$val->title;?></option>
								<?php } ?>
							</select>
						</div>
						<div class="form-group" style="display:none">
							<label for="harga_modal">Harga Beli</label>
							<input type="text" onkeyup='formatNumber(this)' name="harga_beli" id="harga_beli" class="form-control" readonly>
						</div>
						
						<div class="form-group">
							<label for="jumlah">Jumlah Stok</label>
							<input type="text" name="jumlah" id="jumlah" class="form-control" required>
						</div>
						<div class="form-group">
							<label for="keterangan">Keterangan</label>
							<input type="text" name="keterangan" id="keterangan" class="form-control">
						</div>
						<div class="form-group mb-0">
							<div class="custom-control custom-checkbox">
								<input type="checkbox" class="custom-control-input" id="stok_lanjut_input" checked>
								<label class="custom-control-label" for="stok_lanjut_input">Lanjut input berikutnya</label>
							</div>
						</div>
					</div>
				</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" name="submit" class="btn btn-info save_stok_masuk">Simpan [ctrl+s]</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div id="ModalMinimumStok" class="modal left fade" role="dialog">
    <div class="modal-dialog" id="load-save-minimum-stok">
        <div class="modal-content flat">
			<div class="modal-header">
				<h5 class="modal-title">Batas Minimum Stok</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<input type="hidden" id="minimum_stok_id">
				<div class="form-group">
					<label for="minimum_stok_bahan">Nama Bahan/Barang</label>
					<select class="form-control select-box" id="minimum_stok_bahan">
						<option value="">Pilih bahan</option>
						<?php foreach($bahan AS $val){
							$minimumStok = isset($val->batas_minimum_stok) ? (float)$val->batas_minimum_stok : 0;
							$satuanStok = !empty($val->satuan) ? pj_unit_norm($val->satuan) : '';
						?>
							<option value="<?=$val->id;?>" data-minimum="<?=$minimumStok;?>" data-unit="<?=htmlspecialchars($satuanStok, ENT_QUOTES, 'UTF-8');?>"><?=htmlspecialchars($val->title, ENT_QUOTES, 'UTF-8');?></option>
						<?php } ?>
					</select>
				</div>
				<div class="form-group">
					<label for="batas_minimum_stok">Limit Low Stok</label>
					<div class="input-group">
						<input type="text" id="batas_minimum_stok" class="form-control" required>
						<div class="input-group-append">
							<span class="input-group-text" id="batas_minimum_stok_satuan">-</span>
						</div>
					</div>
				</div>
				<div class="form-group mb-0">
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="minimum_stok_lanjut_input" checked>
						<label class="custom-control-label" for="minimum_stok_lanjut_input">Lanjut atur item berikutnya</label>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-info save_minimum_stok">Simpan</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div id="ModalStokTriggerStatus" class="modal left fade" role="dialog">
    <div class="modal-dialog" id="load-save-stok-trigger">
        <div class="modal-content flat">
			<div class="modal-header">
				<h5 class="modal-title">Atur Stok Berkurang</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label>Stok otomatis berkurang saat status pekerjaan menjadi</label>
					<div class="custom-control custom-radio mb-2">
						<input type="radio" id="stok_trigger_proses" name="stok_trigger_status" class="custom-control-input" value="2" <?=((isset($stok_keluar_trigger_status) ? (int)$stok_keluar_trigger_status : stok_keluar_trigger_status()) === 2 ? 'checked' : '');?>>
						<label class="custom-control-label" for="stok_trigger_proses">Proses</label>
					</div>
					<div class="custom-control custom-radio">
						<input type="radio" id="stok_trigger_selesai" name="stok_trigger_status" class="custom-control-input" value="3" <?=((isset($stok_keluar_trigger_status) ? (int)$stok_keluar_trigger_status : stok_keluar_trigger_status()) !== 2 ? 'checked' : '');?>>
						<label class="custom-control-label" for="stok_trigger_selesai">Selesai</label>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-info save_stok_trigger_status">Simpan</button>
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<input type="hidden" name="halaman" id="halaman" value="0">
<form method="POST" action="<?=base_url();?>laporan/cetak_stok_bahan" id="target_print_stok" target="_blank">
	<input type="hidden" name="sortby_cetak" id="sortby_cetak" readonly  />
	<input type="hidden" name="trx_cetak" id="trx_cetak" readonly />
	<input type="hidden" name="tanggal_cetak" id="tanggal_cetak" readonly  />
</form>
<script>

	$("#print_stok").click(function(e) {
	  e.preventDefault();
	  $('#sortby_cetak').val($('#sortBy').val());
	  $('#trx_cetak').val($('#sortField').val());
	  $("#target_print_stok").submit();
	});

	$(".select-box").chosen();

	function focusBahanStokSearch(){
		setTimeout(function(){
			if ($("#bahan_stok_chosen").length) {
				$("#bahan_stok_chosen .chosen-single").trigger('mousedown');
				$("#bahan_stok_chosen .chosen-search input").focus();
			}
		}, 250);
	}

	function focusJumlahStok(){
		setTimeout(function(){
			$("#jumlah").focus().select();
		}, 150);
	}

	function focusMinimumStokSearch(){
		setTimeout(function(){
			if ($("#minimum_stok_bahan_chosen").length) {
				$("#minimum_stok_bahan_chosen .chosen-single").trigger('mousedown');
				$("#minimum_stok_bahan_chosen .chosen-search input").focus();
			}
		}, 250);
	}

	function focusMinimumStokInput(){
		setTimeout(function(){
			$("#batas_minimum_stok").focus().select();
		}, 150);
	}

	function pilihBahanStokBerikutnya(){
		var $select = $("#bahan_stok");
		var currentIndex = $select.prop('selectedIndex');
		var nextValue = '';

		$select.find('option').each(function(index){
			if(index > currentIndex && $(this).val() !== ''){
				nextValue = $(this).val();
				return false;
			}
		});

		if(nextValue !== ''){
			$select.val(nextValue).trigger('chosen:updated').trigger('change');
			return true;
		}

		$select.val("").trigger('chosen:updated');
		return false;
	}

	function resetStokInputFields(){
		$("#jumlah").val("").removeClass("is-invalid is-valid");
		$("#keterangan").val("").removeClass("is-invalid is-valid");
	}

	function pilihMinimumStokBerikutnya(){
		var $select = $("#minimum_stok_bahan");
		var currentIndex = $select.prop('selectedIndex');
		var nextValue = '';

		$select.find('option').each(function(index){
			if(index > currentIndex && $(this).val() !== ''){
				nextValue = $(this).val();
				return false;
			}
		});

		if(nextValue !== ''){
			$select.val(nextValue).trigger('chosen:updated').trigger('change');
			return true;
		}

		$select.val("").trigger('chosen:updated');
		return false;
	}
	
	$('.clear_stok').on('click', function(){
		$('#keywords').val('');
		search_Stok();
	});
	
	
	function search_Stok(page_num){
	  page_num = page_num?page_num:0;
	  var keywords   = $('#keywords').val();
	  var sortBy     = $('#sortBy').val();
	  var sortField  = $('#sortField').val(); // NEW
	  // NEW: sinkronkan untuk kebutuhan print
		$('#sortby_cetak').val(sortBy);
		$('#trx_cetak').val(sortField);

	  var limits     = $('#limits').val();

	  var urlnya = base_url +"stok/cariStok/"+page_num
	  $.ajax({
	    type: 'POST',
	    url: urlnya,
	    data:{
	      page:page_num,
	      keywords:keywords,
	      sortBy:sortBy,
	      sortField:sortField, // NEW
	      limits:limits
	    },

			beforeSend: function(){
				$('#dataStok').loading();
			},
			success: function(html){
				$('#dataStok').html(html);
				$('#halaman').val(page_num);
				$('#dataStok').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#dataStok').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	}
	
	shortcut.add("ctrl+s",function() {
		$(".save_stok_masuk").click();
	});
	function clearform(){
		$("#bahan_stok").val("").trigger("chosen:updated");
		$("#harga_beli").val("");
		resetStokInputFields();
	}

	function clearform_minimum_stok(){
		$("#minimum_stok_id").val("");
		$("#minimum_stok_bahan").val("").trigger("chosen:updated").removeClass("is-invalid is-valid");
		$("#minimum_stok_bahan_chosen").removeClass("is-invalid is-valid");
		$("#batas_minimum_stok").val("").removeClass("is-invalid is-valid");
		$("#batas_minimum_stok_satuan").text("-");
	}
	
	$(document).on('click','.add_bahan',function(e){
		e.preventDefault();
		clearform();
		$('.form-control').addClass('form-control-sm');
		$('.form-group').css('margin-bottom','5px');
		$('#ModalStok').modal('show');
		
	});

	$('#ModalStok').on('shown.bs.modal', function(){
		if($("#bahan_stok").val()){
			focusJumlahStok();
		}else{
			focusBahanStokSearch();
		}
	});

	$('#ModalMinimumStok').on('shown.bs.modal', function(){
		if($("#minimum_stok_bahan").val()){
			focusMinimumStokInput();
		}else{
			focusMinimumStokSearch();
		}
	});

	$(document).on('click','.open_minimum_stok',function(e){
		e.preventDefault();
		clearform_minimum_stok();
		$('.form-control').addClass('form-control-sm');
		$('.form-group').css('margin-bottom','5px');
		$('#ModalMinimumStok').modal('show');
	});

	$(document).on('click','.open_stok_trigger_setting',function(e){
		e.preventDefault();
		var status = $(this).data('status') || $('input[name="stok_trigger_status"]:checked').val() || 3;
		$('input[name="stok_trigger_status"][value="'+status+'"]').prop('checked', true);
		$('#ModalStokTriggerStatus').modal('show');
	});

	$(document).on('click','.save_stok_trigger_status',function(e){
		e.preventDefault();
		var status = $('input[name="stok_trigger_status"]:checked').val();
		$.ajax({
			url: base_url + 'stok/save_stok_trigger_status',
			type: 'POST',
			dataType: 'json',
			data: {status: status},
			beforeSend: function(){
				$('.save_stok_trigger_status').prop('disabled', true);
			},
			success: function(res){
				$('.save_stok_trigger_status').prop('disabled', false);
				if(res.status == 200){
					$('.stok-trigger-status-label').text(res.label);
					$('.open_stok_trigger_setting').attr('data-status', res.value).data('status', res.value);
					$('#ModalStokTriggerStatus').modal('hide');
					search_Stok($('#halaman').val());
					sweet("Berhasil", res.msg, "success", "success");
				}else{
					sweet("Peringatan!!!", res.msg, "warning", "warning");
				}
			},
			error : function(res, status, httpMessage) {
				$('.save_stok_trigger_status').prop('disabled', false);
				sweet("Peringatan!!!", httpMessage, "warning", "warning");
			}
		});
	});

	$("#minimum_stok_bahan").change(function(){
		var id = $(this).val();
		var option = $(this).find('option:selected');
		var minimum = option.data('minimum');
		var unit = option.data('unit');

		$("#minimum_stok_id").val(id);
		$("#batas_minimum_stok").val(id ? minimum : "");
		$("#batas_minimum_stok_satuan").text(id && unit ? unit : "-");
		$("#minimum_stok_bahan").removeClass("is-invalid").addClass("is-valid");
		$("#minimum_stok_bahan_chosen").removeClass("is-invalid").addClass("is-valid");
		if(id){
			focusMinimumStokInput();
		}
	});
	
	$("#jumlah").keyup(function(){
		$("#jumlah").removeClass("is-invalid").addClass("is-valid");
	});

	$("#keterangan").keyup(function(){
		$("#keterangan").removeClass("is-invalid").addClass("is-valid");
	});

	$("#bahan_stok").change(function(){
		$("#bahan_stok").removeClass("is-invalid").addClass("is-valid");
		$("#bahan_stok_chosen").removeClass("is-invalid").addClass("is-valid");
	});

	$("#jumlah").on('keydown', function(e){
		if(e.keyCode === 13){
			e.preventDefault();
			$("#keterangan").focus().select();
		}
	});

	$("#keterangan").on('keydown', function(e){
		if(e.keyCode === 13){
			e.preventDefault();
			$(".save_stok_masuk").click();
		}
	});

	$("#batas_minimum_stok").keyup(function(){
		$("#batas_minimum_stok").removeClass("is-invalid").addClass("is-valid");
	});

	$("#batas_minimum_stok").on('keydown', function(e){
		if(e.keyCode === 13){
			e.preventDefault();
			$(".save_minimum_stok").click();
		}
	});

	$(document).on('click','.save_minimum_stok',function(e){
		e.preventDefault();
		var id = $("#minimum_stok_id").val();
		var minimumRaw = $("#batas_minimum_stok").val();
		var minimum = minimumRaw;
		var halaman = $("#halaman").val();

		if(id==''){
			$("#minimum_stok_bahan").addClass('is-invalid');
			$("#minimum_stok_bahan_chosen").addClass('is-invalid');
			$("#minimum_stok_bahan").focus();
			return;
		}

		if(minimumRaw==''){
			$("#batas_minimum_stok").addClass('is-invalid');
			$("#batas_minimum_stok").focus();
			return;
		}

		$.ajax({
			url: base_url + 'stok/save_minimum_stok',
			data: {id:id,minimum:minimum},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('#load-save-minimum-stok').loading({zIndex:1060,theme:'dark'});
			},
			success: function(data) {
				if(data.status==200){
					showNotif('bottom-right','Batas minimum stok',data.msg,'success');
					$("#minimum_stok_bahan option:selected").data('minimum', minimum).attr('data-minimum', minimum);
					if($("#minimum_stok_lanjut_input").is(":checked")){
						if(pilihMinimumStokBerikutnya()){
							focusMinimumStokInput();
						}else{
							$("#batas_minimum_stok").val("").removeClass("is-invalid is-valid");
							$("#batas_minimum_stok_satuan").text("-");
							focusMinimumStokSearch();
						}
					}else{
						$('#ModalMinimumStok').modal('hide');
						clearform_minimum_stok();
					}
					}else{
					showNotif('bottom-right','Batas minimum stok',data.msg,'warning');
				}
				search_Stok(halaman);
				$('#load-save-minimum-stok').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#load-save-minimum-stok').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}
			}
		});
	});
	function parseStokDecimal(value) {
		value = String(value || '').trim().replace(/\s/g, '');
		if (value.indexOf(',') !== -1) {
			value = value.replace(/\./g, '').replace(',', '.');
		} else if (/^\d{1,3}(\.\d{3})+$/.test(value)) {
			value = value.replace(/\./g, '');
		}
		return value;
	}

	$(document).on('click','.save_stok_masuk',function(e){
		e.preventDefault();
		var id = $("#bahan_stok").val();
		var harga_beli = angka($("#harga_beli").val());
		var jumlah = parseStokDecimal($("#jumlah").val());
		var keterangan = $.trim($("#keterangan").val());
		if(keterangan == ''){
			keterangan = 'Stok awal';
		}
		// console.log(id)
		var halaman = $("#halaman").val();
		if(id==''){
			$("#bahan_stok").addClass('is-invalid');
			$("#bahan_stok").focus();
			return;
		}
		
		if(jumlah=='' || isNaN(parseFloat(jumlah)) || parseFloat(jumlah) <= 0){
			$("#jumlah").addClass('is-invalid');
			$("#jumlah").focus();
			return;
		}
		
		$.ajax({
			url: base_url + 'stok/save_stok',
			data: {id:id,harga_beli:harga_beli,jumlah:jumlah,keterangan:keterangan},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('#load-save-bahan').loading({zIndex:1060,theme:'dark'});
			},
			success: function(data) {
				if(data.status==200){
					showNotif('bottom-right','Simpan stok',data.msg,'success');
					if($("#stok_lanjut_input").is(":checked")){
						resetStokInputFields();
						if(pilihBahanStokBerikutnya()){
							focusJumlahStok();
						}else{
							focusBahanStokSearch();
						}
					}else{
						$('#ModalStok').modal('hide');
						clearform();
					}
					}else{
					sweet('Peringatan!!!',data.msg || 'Data gagal disimpan','warning','warning');
				}
				search_Stok(halaman);
				$('#load-save-bahan').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#load-save-bahan').loading('stop');
				console.log(res.status)
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	});
	
	$("#bahan_stok").change(function(){
		var id = $(this).val();
		if(id > 0){
			$.ajax({
				url: base_url + 'stok/get_harga',
				method: 'POST',
				dataType:'json',
				data:{id:id},
				beforeSend: function(){
					$('body').loading();
				},
				success: function(data) {
					if(data.status==200){
						$('#harga_beli').val(data.harga);
						focusJumlahStok();
						}else{
						sweet('Peringatan!!!',data.msg,'warning','warning');
					}
					$('body').loading('stop');
				},
				error : function(res, status, httpMessage) {
					$('body').loading('stop');
					console.log(res.status)
					if(res.status==401){
						sweet_login(httpMessage,'warning',base_url);
						}else{
						sweet("Peringatan!!!", httpMessage, "warning", "warning");
					}			
				}
			});
			}else{
			$('#harga_beli').val('');
			$('#jumlah').val('');
		}
	});
</script>
<style>.card .table td, .card .table th {padding-right: 1rem;padding-left: 1rem;}</style>
<style>
  .stok-page .stok-mobile-list {
    display: none;
  }

  .stok-page .stok-mobile-search-label {
    display: none;
  }

  .stok-page .stok-mobile-card {
    background: #fff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
    overflow: hidden;
    padding: 0;
  }

  .stok-page .stok-mobile-card + .stok-mobile-card {
    margin-top: 1rem;
  }

  .stok-page .stok-mobile-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1rem .95rem;
  }

  .stok-page .stok-mobile-head-left {
    align-items: center;
    display: flex;
    gap: .85rem;
    min-width: 0;
  }

  .stok-page .stok-mobile-badge {
    align-items: center;
    background: linear-gradient(180deg, #dce9ff, #cfe0ff);
    border-radius: 12px;
    color: #1f2937;
    display: flex;
    flex: 0 0 auto;
    font-size: 1.05rem;
    font-weight: 800;
    height: 52px;
    justify-content: center;
    width: 52px;
  }

  .stok-page .stok-mobile-title {
    color: #1f2937;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.28;
    min-width: 0;
    word-break: break-word;
  }

  .stok-page .stok-mobile-status {
    flex: 0 0 auto;
  }

  .stok-page .stok-mobile-status .badge {
    align-items: center !important;
    background: #ff3338 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 14px rgba(255, 51, 56, .22) !important;
    color: #fff !important;
    display: inline-flex !important;
    font-size: .86rem !important;
    font-weight: 800 !important;
    gap: .45rem !important;
    letter-spacing: 0 !important;
    min-height: 36px !important;
    padding: .45rem .75rem !important;
    white-space: nowrap !important;
  }

  .stok-page .stok-mobile-status .badge i {
    font-size: 1.15rem !important;
  }

  .stok-page .stok-mobile-stats {
    border-top: 1px solid #e5e7eb;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
  }

  .stok-page .stok-mobile-stat {
    min-width: 0;
    padding: .85rem .45rem .8rem;
    text-align: center;
  }

  .stok-page .stok-mobile-stat + .stok-mobile-stat {
    border-left: 1px solid #e5e7eb;
  }

  .stok-page .stok-mobile-stat-label {
    color: #6b7280;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .2rem;
  }

  .stok-page .stok-mobile-stat-value {
    color: #1f2937;
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.22;
  }

  .stok-page .stok-mobile-stat-value.is-danger {
    color: #ff4d4f;
  }

  .stok-page .stok-mobile-footer {
    background: #f3f6f9;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    color: #1f2937;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
    padding: .95rem 1rem;
  }

  .stok-page .stok-info-banner {
    gap: 12px;
    padding: 18px 16px;
    border: 1px dashed rgba(37, 146, 224, .35);
    border-radius: 16px;
    background: linear-gradient(180deg, #fbfdff, #f6fbff);
  }

  .stok-page .stok-info-banner__text {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
  }

  .stok-page .stok-info-banner__button {
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  /* Toolbar desktop diselaraskan dengan pola filter biru pada halaman master. */
  @media (min-width: 1200px) {
    .stok-page .card-header {
      background: #fff;
      border-bottom: 1px solid #e3e6f0;
      padding: 1rem !important;
    }

    .stok-page .stok-filter-toolbar {
      align-items: center;
      display: flex !important;
      flex-wrap: nowrap;
      width: 100%;
    }

    .stok-page .stok-filter-toolbar > .input-group-prepend {
      flex: 0 0 auto;
      margin: 0;
    }

    .stok-page .stok-filter-toolbar > .input-group-prepend:not(:first-child) {
      margin-left: .5rem;
    }

    .stok-page .stok-filter-toolbar .input-group-text {
      align-items: center;
      background: var(--app-theme-color, #3f51b5);
      border: 1px solid var(--app-theme-color, #3f51b5);
      border-radius: .25rem 0 0 .25rem;
      box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .14);
      color: var(--app-theme-text-color, #fff);
      display: inline-flex;
      font-size: .75rem;
      font-weight: 600;
      height: 38px;
      justify-content: center;
      letter-spacing: .01em;
      line-height: 1;
      padding: 0 .72rem;
      white-space: nowrap;
    }

    .stok-page .stok-filter-toolbar > .custom-select {
      background-color: #fff;
      border: 1px solid #d1d3e2;
      border-left: 0;
      border-radius: 0 .25rem .25rem 0;
      box-shadow: none;
      color: #3a3b45;
      flex: 0 0 auto;
      font-size: .8rem;
      height: 38px;
      min-width: 0;
      padding-left: .65rem;
    }

    .stok-page .stok-filter-toolbar > #limits {
      width: 90px !important;
    }

    .stok-page .stok-filter-toolbar > #sortField {
      width: 125px !important;
    }

    .stok-page .stok-filter-toolbar > #sortBy {
      width: 170px !important;
    }

    .stok-page .stok-filter-toolbar > .custom-select:focus,
    .stok-page .stok-filter-toolbar > #keywords:focus {
      border-color: #6f7bd9;
      box-shadow: 0 0 0 .15rem rgba(63, 81, 181, .12);
      outline: 0;
      position: relative;
      z-index: 2;
    }

    .stok-page .stok-filter-toolbar > #keywords {
      border: 1px solid #d1d3e2;
      border-radius: .25rem !important;
      box-shadow: none;
      flex: 1 1 180px;
      font-size: .8rem;
      height: 38px;
      margin-left: .5rem;
      min-width: 140px;
      padding: 0 .75rem;
      width: auto !important;
    }

    .stok-page .stok-filter-actions {
      align-items: center;
      display: flex;
      flex: 0 0 auto;
      gap: .5rem;
      margin-left: .5rem;
    }

    .stok-page .stok-filter-actions .stok-filter-btn {
      align-items: center;
      border: 0;
      border-radius: .25rem !important;
      box-shadow: 0 .125rem .25rem rgba(58, 59, 69, .18);
      display: inline-flex;
      font-size: .8rem;
      font-weight: 600;
      gap: .3rem;
      height: 38px;
      justify-content: center;
      line-height: 1;
      padding: 0 .72rem;
      white-space: nowrap;
    }

    .stok-page .stok-filter-actions .clear_stok {
      background: #ff4d4f;
      color: #fff;
    }

    .stok-page .stok-filter-actions .add_bahan {
      background: #2eb6e6;
      color: #fff;
    }

    .stok-page .stok-filter-actions .print_stok,
    .stok-page .stok-filter-actions .open_minimum_stok {
      background: #3f51b5;
      color: #fff;
    }

    .stok-page .stok-filter-actions .stok-filter-btn:hover,
    .stok-page .stok-filter-actions .stok-filter-btn:focus {
      color: #fff;
      filter: brightness(.96);
      outline: 0;
      box-shadow: 0 .2rem .4rem rgba(58, 59, 69, .24);
    }
  }

  /* Tablet: pasangan label-field tetap rapih dan tombol tidak berhimpitan. */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    .stok-page .card-header {
      background: #fff;
      padding: 1rem !important;
    }

    .stok-page .stok-filter-toolbar {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
      gap: .65rem 0;
    }

    .stok-page .stok-filter-toolbar > .input-group-prepend {
      margin: 0;
    }

    .stok-page .stok-filter-toolbar > .input-group-prepend:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .stok-page .stok-filter-toolbar > #limits { grid-column: 2; grid-row: 1; }
    .stok-page .stok-filter-toolbar > .input-group-prepend:nth-of-type(2) { grid-column: 3; grid-row: 1; margin-left: .65rem; }
    .stok-page .stok-filter-toolbar > #sortField { grid-column: 4; grid-row: 1; }
    .stok-page .stok-filter-toolbar > .input-group-prepend:nth-of-type(3) { grid-column: 1; grid-row: 2; }
    .stok-page .stok-filter-toolbar > #sortBy { grid-column: 2; grid-row: 2; }
    .stok-page .stok-filter-toolbar > #keywords { grid-column: 3 / 5; grid-row: 2; margin-left: .65rem; }
    .stok-page .stok-filter-toolbar > .stok-filter-actions { grid-column: 1 / 5; grid-row: 3; }

    .stok-page .stok-filter-toolbar .input-group-text {
      align-items: center;
      background: var(--app-theme-color, #3f51b5);
      border: 1px solid var(--app-theme-color, #3f51b5);
      border-radius: .25rem 0 0 .25rem;
      color: var(--app-theme-text-color, #fff);
      display: inline-flex;
      font-size: .75rem;
      font-weight: 600;
      height: 38px;
      padding: 0 .72rem;
      white-space: nowrap;
    }

    .stok-page .stok-filter-toolbar > .custom-select,
    .stok-page .stok-filter-toolbar > #keywords {
      border: 1px solid #d1d3e2;
      box-shadow: none;
      font-size: .8rem;
      height: 38px;
      min-width: 0;
      width: 100% !important;
    }

    .stok-page .stok-filter-toolbar > .custom-select {
      border-left: 0;
      border-radius: 0 .25rem .25rem 0;
    }

    .stok-page .stok-filter-toolbar > #keywords {
      border-radius: .25rem !important;
    }

    .stok-page .stok-filter-actions {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
    }

    .stok-page .stok-filter-actions .stok-filter-btn {
      border: 0;
      border-radius: .25rem !important;
      font-size: .8rem;
      font-weight: 600;
      height: 38px;
    }

    .stok-page .stok-filter-actions .clear_stok { background: #ff4d4f; }
    .stok-page .stok-filter-actions .add_bahan { background: #2eb6e6; }
    .stok-page .stok-filter-actions .print_stok,
    .stok-page .stok-filter-actions .open_minimum_stok { background: #3f51b5; color: #fff; }
  }

  @media (max-width: 767.98px) {
    #container-wrapper.stok-page {
      padding-left: .8rem;
      padding-right: .8rem;
    }

    .stok-page .stok-page-title {
      color: #1f2937 !important;
      font-size: 1.85rem;
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
      margin-bottom: 1rem;
    }

    .stok-page > .row > .col-md-12 > form > .card {
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
    }

    .stok-page .card-header {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px !important;
      box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
      margin-bottom: 1rem;
      padding: 1rem !important;
    }

    .stok-page .card-header .input-group {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .85rem .75rem;
      align-items: start;
      width: 100%;
    }

    .stok-page .card-header .input-group > .input-group-prepend:nth-of-type(1) {
      grid-column: 1;
      grid-row: 1;
    }

    .stok-page .card-header .input-group > #limits {
      grid-column: 1;
      grid-row: 2;
    }

    .stok-page .card-header .input-group > .input-group-prepend:nth-of-type(2) {
      grid-column: 2;
      grid-row: 1;
    }

    .stok-page .card-header .input-group > #sortField {
      grid-column: 2;
      grid-row: 2;
    }

    .stok-page .card-header .input-group > .input-group-prepend:nth-of-type(3) {
      grid-column: 1;
      grid-row: 3;
    }

    .stok-page .card-header .input-group > #sortBy {
      grid-column: 1;
      grid-row: 4;
    }

    .stok-page .card-header .input-group > .stok-mobile-search-label {
      display: block;
      grid-column: 2;
      grid-row: 3;
    }

    .stok-page .card-header .input-group > #keywords {
      grid-column: 2;
      grid-row: 4;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%236b7280'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'%3E%3C/circle%3E%3Cpath%20d='m21%2021-4.35-4.35'%3E%3C/path%3E%3C/svg%3E");
      background-position: right 1rem center;
      background-repeat: no-repeat;
      background-size: 1.25rem;
      padding-right: 2.9rem;
    }

    .stok-page .card-header .input-group > .input-group-append {
      grid-column: 1 / span 2;
      grid-row: 5;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .7rem .75rem;
      margin: 0;
      width: 100%;
    }

    .stok-page .card-header .input-group > .stok-filter-actions {
      align-items: stretch;
    }

    .stok-page .card-header .input-group > .input-group-append .stok-filter-btn {
      align-items: center;
      border: 0;
      border-radius: 10px !important;
      border-top-left-radius: 10px !important;
      border-top-right-radius: 10px !important;
      border-bottom-right-radius: 10px !important;
      border-bottom-left-radius: 10px !important;
      box-sizing: border-box;
      box-shadow: 0 8px 16px rgba(15, 23, 42, .12);
      display: inline-flex;
      flex: none !important;
      font-size: .92rem;
      font-weight: 700;
      gap: .4rem;
      justify-content: center;
      letter-spacing: 0;
      line-height: 1;
      min-height: 50px;
      padding: 0 .75rem;
      text-align: center;
      width: 100%;
      white-space: nowrap;
    }

    .stok-page .card-header .input-group > .input-group-append .stok-filter-btn i {
      font-size: .95rem;
      line-height: 1;
      margin: 0;
    }

    .stok-page .card-header .input-group > .input-group-append .stok-filter-btn:focus,
    .stok-page .card-header .input-group > .input-group-append .stok-filter-btn:hover {
      box-shadow: 0 10px 18px rgba(15, 23, 42, .16);
      filter: brightness(.98);
    }

    .stok-page .card-header .input-group .input-group-prepend {
      margin: 0;
    }

    .stok-page .card-header .input-group .input-group-text {
      background: transparent;
      border: 0;
      box-shadow: none !important;
      color: #1f2937;
      display: block;
      font-size: 1rem;
      font-weight: 800;
      height: auto;
      line-height: 1.15;
      padding: 0;
      text-transform: none;
      width: 100%;
    }

    .stok-page .card-header .input-group .custom-select,
    .stok-page .card-header .input-group .form-control {
      border: 1px solid #cfd7e6;
      border-radius: 8px;
      box-shadow: none;
      color: #1f2937;
      font-size: 1rem;
      height: 52px;
      width: 100%;
      min-width: 0;
      padding-left: 1.05rem;
    }

    .stok-page .card-header .input-group .w-1,
    .stok-page .card-header .input-group .w-40 {
      width: 100% !important;
      min-width: 0 !important;
      flex: 1 1 100%;
    }

    .stok-page .card-header .input-group .input-group-append .clear_stok {
      background: linear-gradient(180deg, #ff4247, #f02f35);
      border-color: #ff3338;
    }

    .stok-page .card-header .input-group .input-group-append .add_bahan {
      background: linear-gradient(180deg, #22b8ed, #159bd7);
      border-color: #12a8e8;
    }

    .stok-page .card-header .input-group .input-group-append .print_stok {
      background: linear-gradient(180deg, #7b8796, #687482);
      border-color: #6f7a89;
    }

    .stok-page .card-header .input-group .input-group-append .open_minimum_stok {
      background: linear-gradient(180deg, #ffa326, #ff8f12);
      border-color: #ff9818;
    }

    .stok-page .card-header .input-group .input-group-append .stok-filter-btn:first-child,
    .stok-page .card-header .input-group .input-group-append .stok-filter-btn:last-child {
      border-radius: 10px !important;
    }

    .stok-page .card-body {
      background: transparent;
      border: 0;
      padding: 0;
    }

    .stok-page .card-body.table-responsive {
      overflow: visible;
    }

    .stok-page .card-block {
      padding: 0;
    }

    .stok-page .stok-info-banner {
      align-items: start !important;
      display: grid !important;
      grid-template-columns: 24px minmax(0, 1fr);
      gap: .55rem .7rem;
      margin-bottom: 1rem !important;
      padding: 14px !important;
    }

    .stok-page .stok-info-banner > .d-flex {
      display: contents !important;
    }

    .stok-page .stok-info-banner .fa-info-circle {
      align-self: start;
      font-size: 1.25rem;
      grid-column: 1;
      grid-row: 1;
      line-height: 1;
      margin-top: .1rem;
    }

    .stok-page .stok-info-banner__text {
      font-size: .82rem;
      grid-column: 2;
      grid-row: 1;
      line-height: 1.45;
      max-width: 100%;
    }

    .stok-page .stok-info-banner__button {
      align-items: center;
      align-self: start;
      border: 0;
      border-radius: 9px;
      box-shadow: 0 7px 14px rgba(79, 93, 238, .24);
      display: inline-flex;
      font-size: .78rem;
      font-weight: 700;
      gap: .35rem;
      grid-column: 2;
      grid-row: 2;
      justify-self: start;
      line-height: 1;
      margin-top: .25rem;
      max-width: 100%;
      min-height: 38px;
      padding: 0 .85rem;
      white-space: nowrap;
    }

    .stok-page #dataStok table.table-mailcard {
      display: none;
    }

    .stok-page .stok-mobile-list {
      display: block;
      margin-top: 1rem;
    }

    .stok-page .stok-mobile-footer {
      margin-top: 1rem;
    }

    .stok-page nav .tampil {
      display: none !important;
    }
  }

</style>
<div class="container-fluid stok-page" id="container-wrapper">
