<div class="container-fluid pembelian-item-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"><?=$judul;?></h1>
		<!--ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page"><?=$judul;?></li>
		</ol-->
	</div>
	<div class="row">
		<div class="col-md-12">
			
			<div class="card">
				<div class="card-header pb-0">
					<div class="input-group input-group-sm pembelian-item-filter-toolbar">
						<div class="input-group-prepend">
							<span class="input-group-text">LIMIT</span>
						</div>
						<select id="limits" name="limits" class="form-control custom-select w-1" onchange="search_item()">
							<option value="10" selected>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="sortBy">SORT</span>
						</div>
						<select id="sortBy" class="form-control custom-select w-1" onchange="search_item()">
							<option value="ASC">ASC</option>
							<option value="DESC" selected>DESC</option>
						</select>
						<input type="text" id="keywords" class="form-control w-40" placeholder="Cari data" onkeyup="search_item();"/>
						<div class="input-group-append pembelian-item-filter-actions">
							<button class="btn btn-danger clear_item pembelian-item-filter-btn" type="button"><i class="fa fa-times"></i> Clear</button>
							<button type="button" class="btn btn-info edit_item pembelian-item-filter-btn" data-id="0"><i class="fa fa-plus"></i> Tambah</button>
							<!--button class="btn btn-primary url_doc" data-url="jenis" type="button" data-toggle="tooltip" data-original-title="Dok Kategori Produk" data-placement="left"><i class="fa fa-info-circle"></i></button-->
						</div>
					</div>
				</div>
				
				<div class="card-body table-responsive">
					<div class="card-block" id="data_item">
					</div><!-- /.card-block -->
				</div><!-- /.card-body -->
			</div><!-- /.card -->
			
		</div>
	</div>
</div>
<!-- Modal Scrollable -->
<div class="modal fade" id="Modal_item" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable" id="save-jenis" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalScrollableTitle">Item pembelian</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='item_id' id='item_id' value='0'>
				<input type='hidden' name='type' id="type">
				<div class="row">
					<div class="col-md-12">
						<div class="form-group">
							<label for="akun_id">Nama Akun</label>
							<select name="akun_id" id="akun_id" class="form-control" title="-- Pilih Akun jika ada --" data-width="100%" data-live-search="true">
								
							</select>
						</div>
						<div class="form-group">
							<label for="judul">Nama Item</label>
							<input type="text" name="judul" id="judul" class="form-control" required>
						</div>
						 
						<label>Kelompok akun </label>
						<div class="form-group d-flex flex-row">
							<select name="kelompok" id="kelompok" class="form-control custom-select" required>
								<option value="8">Persediaan</option>
								<option value="2">Peralatan</option>
							</select>
						</div>
						<label>Aktif </label>
						<div class="form-group d-flex flex-row">
							<select name="aktif" id="aktif" class="form-control custom-select" required>
								<option value="Y" selected>Ya</option>
								<option value="N">Tidak</option>
							</select>
						</div>	
					</div>
				</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" name="submit" class="btn btn-info save_item">Simpan</button>
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="confirm-delete" role="dialog" tabindex="-1">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
				<button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
			</div>
			<div class="modal-body">
				<p>Anda akan menghapus satu url, prosedur ini tidak dapat diubah.</p>
				<p>Apakah Anda ingin melanjutkan?</p>
				<p class="debug-url"></p>
				<input type="hidden" id="data-hapus">
			</div>
			<div class="modal-footer">
				<button class="btn btn-secondary" data-dismiss="modal" type="button">Batal</button> 
				<button class="btn btn-danger hapus_item" type="button">YA</button> 
			</div>
		</div>
	</div>
</div>
 
<input type="hidden" name="halaman" id="halaman" value="0">
<script>
	$(function(){
		$(document).fcs(".form-control");
		search_item();
	});
	
	$('.clear_item').on('click', function(){
		$('#keywords').val('');
		search_item();
	});
	
	function search_item(page_num){
		page_num = page_num?page_num:0;
		var keywords = $('#keywords').val();
		var sortBy = $('#sortBy').val();
		var limits = $('#limits').val();
		
		var urlnya = base_url+ 'pembelian/cariItem/'+page_num
		$.ajax({
			type: 'POST',
			url: urlnya,
			data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
			beforeSend: function(){
				$('body').loading();
			},
			success: function(html){
				$('#data_item').html(html);
				$('#halaman').val(page_num);
				$('body').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('body').loading('stop');
			}
		});
	}
	$('#Modal_item').on('shown.bs.modal', function() {
		$('#judul').focus();
	});
	
	$(document).on('click','.edit_item',function(e){
		e.preventDefault();
		var id = $(this).attr('data-id');
		
		$('#Modal_item').modal({backdrop: 'static', keyboard: false});
		if(id==0){
            $("#type").val('add');
            // $("#akun_id").val('').attr('readonly',true);
			return
			}else{
            $("#type").val('edit');
            // $("#akun_id").attr('readonly',false);
			 
		}
		$.ajax({
			url: base_url + 'pembelian/edit_item',
			data: {id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				if(data.status==true)
				{
					$("#item_id").val(data.id);
					$("#akun_id").val(data.id_akun);
					$("#judul").val(data.title);
					$("#kelompok").val(data.kelompok);
					$("#aktif").val(data.aktif);
					}else{
					$('#Modal_item').modal('hide');
				}
				$('body').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('#Modal_item').modal('hide');
				$('body').loading('stop');
			}
		});
	});
	
	$('#aktif').on('change', function() {
		$("#aktif").removeClass("is-invalid").addClass("is-valid");
	});
	$("#judul").keyup(function(){
		$("#judul").removeClass("is-invalid").addClass("is-valid");
	});
	
	$(document).on('click','.save_item',function(e){
		e.preventDefault();
		
		var id       = $("#item_id").val();
		var id_akun  = $("#akun_id").val();
		var type     = $("#type").val();
		var judul    = $("#judul").val();
		var kelompok = $("#kelompok").val();
		var aktif    = $("#aktif").val();
		var halaman  = $("#halaman").val();
		
		if(judul==''){
			$("#judul").addClass('is-invalid');
			$("#judul").focus();
			return;
		}
	 
		if(kelompok==''){
			$("#kelompok").addClass('is-invalid');
			return;
		}
		
		if(aktif==''){
			$("#aktif").addClass('is-invalid');
			return;
		}
		
		$.ajax({
			url: base_url + 'pembelian/save_item',
			data: {id:id,type:type,judul:judul,kelompok:kelompok,id_akun:id_akun,aktif:aktif},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('#save-jenis').loading({zIndex:1060});
			},
			success: function(data) {
				if(data.status==true){
					showNotif('bottom-right','Simpan data',data.msg,'success');
					}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				search_item(halaman);
				load_jenis_akun();
				$('#Modal_item').modal('hide');
				$('#save-jenis').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('#save-jenis').loading('stop');
			}
		});
	});
	
	$(document).on('click','.hapus_item',function(e){
		var id = $("#data-hapus").val();
		var halaman = $("#halaman").val();
		$.ajax({
			url: base_url + 'pembelian/hapus_item',
			data: {type:'hapus',id:id},
			method: 'POST',
			dataType:'json',
			beforeSend: function(){
				$('body').loading();
			},
			success: function(data) {
				if(data.status==true){
					showNotif('bottom-right','Hapus data',data.msg,'success');
					}else{
					sweet('Peringatan!!!',data.msg,'warning','warning');
				}
				$('#confirm-delete').modal('hide');
				search_item(halaman);
				$('body').loading('stop');
			},
			error: function(xhr, status, error) {
				var err = xhr.responseText ;
				sweet('Server!!!',err,'error','danger');
				$('body').loading('stop');
			}
		});
	});
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
	
	$('body').on('hidden.bs.modal', '.modal', function() {
		// $('.form-control').val('')
	});
	
	$("#akun_id").filter(function () {
		var deptid = 11;
		$.ajaxQueue({
			url: base_url + "produk/load_jenis",
			type: 'GET',
			dataType: 'json',
			beforeSend: function () {
				$("#akun_id").append("<option value='loading'>loading</option>");
				$("#akun_id").attr("disabled", true);
			},
			success: function (response) {
				$("#akun_id option[value='loading']").remove();
				$("#akun_id").attr("disabled", false);
				$("#akun_id").append("<option value=''>Pilih Akun Jika Ada</option>");
				var len = response.length;
				for (var i = 0; i < len; i++) {
					var id = response[i]['id'];
					var name = response[i]['name'];
					$("#akun_id").append("<option value='" + id + "'>" + name + "</option>");
				}
			}
		});
	});
	
	function load_jenis_akun(){
		$.ajax({
			url: base_url + "produk/load_jenis",
			type: 'POST',
			dataType: 'json',
			beforeSend: function () {
				$("#akun_id").append("<option value='loading'>loading</option>");
				$("#akun_id").empty();
			},
			success: function (response) {
				// $("#jenis_lembaga_"+jenis+" option[value='loading']").remove();
				$("#akun_id").append("<option value=''>Pilih Akun jika ada</option>");
				var len = response.length;
				for (var i = 0; i < len; i++) {
					var id = response[i]['id'];
					var name = response[i]['name'];
					
					$("#akun_id").append("<option value='" + id + "'>" + name + "</option>");
					
				}
			},
			error : function(res, status, httpMessage) {
				if(res.status==401){
					sweet_login(httpMessage,'warning',base_url);
					}else{
					sweet("Peringatan!!!", httpMessage, "warning", "warning");
				}			
			}
		});
	}
	
	$("#judul").autocomplete({
		source: function (request, response) {
			$.ajax({
				url: base_url + "produk/ajax",
				dataType: "json",
				method: "post",
				data: {
					name_startsWith: request.term,
					type: "pembelian_bahan_table",
					row_num: 1,
				},
				success: function (data) {
					response(
						$.map(data, function (item) {
							var code = item.split("|");
							return {
								label: code[0],
								value: code[0],
								data: item,
							};
						})
					);
				},
				error: function (xhr, ajaxOptions, thrownError) {
					sweet("Peringatan!!!", thrownError, "warning", "warning");
				},
			});
		},
		autoFocus: true,
		minLength: 0,
		select: function (event, ui) {
			var names = ui.item.data.split("|");
			id_arr = $(this).attr("id");
			id = id_arr.split("_");
			$("#ket_" + id[1]).val(names[0]);
		},
	});
</script>		
<style>
	.card .table td, .card .table th {
    padding-right: 1rem;
    padding-left: 1rem;
	}

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

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

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

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

		.pembelian-item-page .pembelian-item-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 .75rem;
			white-space: nowrap;
		}

		.pembelian-item-page .pembelian-item-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 1 280px !important;
			font-size: .8rem;
			height: 38px;
			min-width: 100px;
			padding-left: .65rem;
			width: 280px !important;
		}

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

		.pembelian-item-page .pembelian-item-filter-toolbar > .custom-select:focus,
		.pembelian-item-page .pembelian-item-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;
		}

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

		.pembelian-item-page .pembelian-item-filter-actions .pembelian-item-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 .78rem;
			white-space: nowrap;
		}

		.pembelian-item-page .pembelian-item-filter-actions .clear_item {
			background: #ff4d4f;
			color: #fff;
		}

		.pembelian-item-page .pembelian-item-filter-actions .edit_item {
			background: #2eb6e6;
			color: #fff;
		}

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

	/* Tablet tetap tersusun rapih tanpa memisahkan label dari field. */
	@media (min-width: 768px) and (max-width: 1199.98px) {
		.pembelian-item-page .card-header {
			background: #fff;
			padding: 1rem !important;
		}

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

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

		.pembelian-item-page .pembelian-item-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 .75rem;
			white-space: nowrap;
		}

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

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

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

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

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

		.pembelian-item-page .pembelian-item-filter-actions .clear_item { background: #ff4d4f; color: #fff; }
		.pembelian-item-page .pembelian-item-filter-actions .edit_item { background: #2eb6e6; color: #fff; }
	}
</style>
