<div class="daftar-harga-shell">
	<div class="daftar-harga-toolbar">
		<div class="daftar-harga-control">
			<label for="limits_cari">Limit</label>
			<select id="limits_cari" name="limits" class="form-control custom-select" onchange="search_harga_bahan()">
				<option value="10">10</option>
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
		</div>
		<div class="daftar-harga-control">
			<label for="sortByCari">Urutan</label>
			<select id="sortByCari" class="form-control custom-select" onchange="search_harga_bahan()">
				<option value="ASC">ASC</option>
				<option value="DESC" selected>DESC</option>
			</select>
		</div>
		<div class="daftar-harga-control daftar-harga-category">
			<label for="sort_kategori_cari">Kategori</label>
			<select name="sort_kategori" id="sort_kategori_cari" class="form-control custom-select" onchange="search_harga_bahan()">
				<option value="">Semua kategori</option>
				<?php foreach($kategori AS $val){ ?>
					<option value="<?=$val->id_jenis;?>"><?=$val->jenis_cetakan;?></option>
				<?php } ?>
			</select>
		</div>
		<div class="daftar-harga-search">
			<i class="fa fa-search"></i>
			<input type="text" id="keywords_cari" class="form-control" placeholder="Cari produk, bahan, atau barcode..." onkeyup="search_harga_bahan_debounced();">
		</div>
		<button class="btn daftar-harga-clear clear_cari_bahan" type="button"><i class="fa fa-refresh"></i> Reset</button>
	</div>

	<div id="data_harga_bahan" class="daftar-harga-results"></div>
</div>

<script>
	$('.clear_cari_bahan').on('click', function(){
		$('#keywords_cari').val('');
		$('#sort_kategori_cari').val('');
		search_harga_bahan();
	});

	var daftarHargaSearchTimer = null;
	function search_harga_bahan_debounced(){
		clearTimeout(daftarHargaSearchTimer);
		daftarHargaSearchTimer = setTimeout(function(){ search_harga_bahan(); }, 250);
	}

	search_harga_bahan();

	function search_harga_bahan(page_num){
		page_num = page_num ? page_num : 0;
		var keywords = $('#keywords_cari').val();
		var sortBy = $('#sortByCari').val();
		var sort_kategori = $('#sort_kategori_cari').val();
		var limits = $('#limits_cari').val();
		var id_member = $('#idmember').val() || 0;

		$.ajax({
			type: 'POST',
			url: base_url + 'produk/daftar_harga_cari/' + page_num,
			data:{page:page_num,keywords:keywords,sortBy:sortBy,kategori:sort_kategori,limits:limits,id_member:id_member},
			beforeSend: function(){ $('#data_harga_bahan').loading(); },
			success: function(html){
				$('#data_harga_bahan').html(html);
				$('#halaman').val(page_num);
				$('#data_harga_bahan').loading('stop');
			},
			error : function(res, status, httpMessage) {
				$('#data_harga_bahan').loading('stop');
				if(res.status==401){ sweet_login(httpMessage,'warning',base_url); }
				else{ sweet('Peringatan!!!', httpMessage, 'warning', 'warning'); }
			}
		});
	}
</script>

<style>
#show-harga .daftar-harga-dialog {
	width: calc(100% - 48px);
	max-width: 1160px;
	height: calc(100vh - 48px);
	margin: 24px auto;
}
#show-harga .daftar-harga-modal {
	width: 100%;
	max-height: none;
	height: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 25px 70px rgba(20, 32, 54, .22);
}
#show-harga .daftar-harga-header {
	min-height: 86px;
	padding: 18px 26px;
	align-items: center;
	border-bottom: 1px solid #e8edf4;
}
#show-harga .daftar-harga-heading {
	display: flex;
	align-items: center;
	gap: 14px;
}
#show-harga .daftar-harga-heading__icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 11px;
	background: #edf4ff;
	color: #1769e8;
	font-size: 20px;
}
#show-harga .daftar-harga-heading h5 {
	margin: 0 0 3px;
	color: #172033;
	font-size: 21px;
	font-weight: 700;
}
#show-harga .daftar-harga-heading p {
	margin: 0;
	color: #7d8799;
	font-size: 12px;
}
#show-harga .daftar-harga-close {
	display: inline-flex;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: #f4f6f9;
	color: #596579;
	font-size: 25px;
	opacity: 1;
}
#show-harga .daftar-harga-body {
	display: flex;
	min-height: 0;
	padding: 20px 26px 24px;
	overflow: hidden;
	background: #fff;
}
#show-harga .daftar-harga,
#show-harga .daftar-harga-shell {
	width: 100%;
	min-height: 0;
	height: 100%;
}
#show-harga .daftar-harga-shell {
	display: flex;
	flex-direction: column;
}
#show-harga .daftar-harga-toolbar {
	display: grid;
	grid-template-columns: 110px 130px minmax(190px, 1fr) minmax(250px, 1.5fr) auto;
	gap: 10px;
	align-items: end;
	margin-bottom: 18px;
}
#show-harga .daftar-harga-control label {
	display: block;
	margin: 0 0 5px;
	color: #667085;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}
#show-harga .daftar-harga-control .form-control,
#show-harga .daftar-harga-search .form-control {
	height: 42px;
	border: 1px solid #dce3ed;
	border-radius: 8px;
	background-color: #fff;
	color: #344054;
	font-size: 12px;
}
#show-harga .daftar-harga-search {
	position: relative;
}
#show-harga .daftar-harga-search i {
	position: absolute;
	top: 50%;
	left: 14px;
	z-index: 2;
	color: #98a2b3;
	transform: translateY(-50%);
}
#show-harga .daftar-harga-search .form-control {
	padding-left: 39px;
}
#show-harga .daftar-harga-clear {
	height: 42px;
	padding: 0 16px;
	border: 1px solid #ffb8bf;
	border-radius: 8px;
	background: #fff;
	color: #e34455;
	font-size: 11px;
	font-weight: 700;
}
#show-harga .daftar-harga-clear:hover {
	background: #fff4f5;
}
#show-harga .daftar-harga-results {
	display: flex;
	min-height: 0;
	flex: 1 1 auto;
	flex-direction: column;
}
.modal-backdrop.daftar-harga-backdrop {
	background: #101828 !important;
	opacity: .58 !important;
	backdrop-filter: blur(2px);
}
body.modal-open #show-harga {
	padding-right: 0 !important;
}
}
@media (max-width: 991.98px) {
	#show-harga .daftar-harga-toolbar {
		grid-template-columns: 1fr 1fr 2fr;
	}
	#show-harga .daftar-harga-search {
		grid-column: 1 / 3;
	}
}
@media (max-width: 575.98px) {
	#show-harga .daftar-harga-dialog {
		width: calc(100% - 20px);
		height: calc(100vh - 20px);
		margin: 10px auto;
	}
	#show-harga .daftar-harga-header,
	#show-harga .daftar-harga-body {
		padding-right: 14px;
		padding-left: 14px;
	}
	#show-harga .daftar-harga-toolbar {
		grid-template-columns: 1fr 1fr;
	}
	#show-harga .daftar-harga-category,
	#show-harga .daftar-harga-search {
		grid-column: 1 / -1;
	}
	#show-harga .daftar-harga-heading p {
		display: none;
	}
}
</style>
