<style>
	.tbl-qa{width: 98%;font-size:0.9em;background-color: #f5f5f5;}
	.tbl-qa th.table-header {padding: 5px;text-align: left;padding:10px;}
	.tbl-qa .table-row td {background-color: #bfcfffn;}
	.ajax-action-links {color: #09F; margin: 10px 0px;cursor:pointer;}
	.ajax-action-button {border:#094 1px solid;color: #09F; margin: 10px 0px;cursor:pointer;display: inline-block;padding: 10px 20px;}
	.edited td {padding:5px!important;background:#f7f7f7}
</style>
<?php
if (!function_exists('produk_harga_decimal_format')) {
	function produk_harga_decimal_format($value) {
		$value = (float) $value;
		$formatted = rtrim(rtrim(number_format($value, 4, '.', ''), '0'), '.');
		if ($formatted === '') {
			return '0';
		}
		$parts = explode('.', $formatted);
		$whole = number_format((float) $parts[0], 0, ',', '.');
		return count($parts) > 1 ? $whole.','.$parts[1] : $whole;
	}
}
?>

<div class="table-wrapper">
	
	<table class="table table-bordered tbl-qa" id="table_range">
		<thead>
			<tr>
				<th class="align-middle text-center w-5">No.</th>
				<th>Satuan</th>
				<th>Jml. Min</th>
				<th>Jml. Max</th>
				<th>Harga Jual</th>
				<th> <button class="btn btn-info btn-sm" id="add-more" onClick="createNew();"><i class="fa fa-plus"></i> Tambah</button></th>
			</tr>
			<tr>
				<td class="align-middle text-center">#</td>
				<td class="align-middle text-left">
					<select class="form-control form-control-sm flat" disabled>
						<option><?=get_satuan($bahan->id_satuan);?></option>
					</select>
				</td>
				<td class="align-middle text-center">-</td>
				<td class="align-middle text-center">-</td>
				<td class="align-middle" ><?=produk_harga_decimal_format($bahan->harga_jual);?></td>
				<td class="align-middle">Default</td>
			</tr>
		</thead>
		<tbody id="table-body">
			
			<?php 
				$a = 0;
				$no = 1;
				foreach($result AS $row) {
					$id=$row->id; 
					$satuan=$row->id_satuan; 
					$jumlah_minimal=$row->jumlah_minimal; 
					$jumlah_maksimal=$row->jumlah_maksimal; 
					$harga_jual=produk_harga_decimal_format($row->harga_jual); 
				?>
				<tr class="table-row" id="table-row-<?php echo $id; ?>" data-id="<?php echo $satuan; ?>" data-row="<?php echo $a; ?>">
					<td><?=$no;?></td>
					<td onChange="getData(<?=$a;?>,<?=$id;?>)" >
						<select name="load_satuan_range_edit" id="load_satuan_range_<?=$a;?>" class="form-control form-control-sm" data-valueKey="id" data-displayKey="name" required>
						</select>
					</td>
					<td contenteditable="true" onBlur="saveToDatabase(this,'jumlah_minimal','<?php echo $id; ?>')" onClick="editRow(this);"><?php echo $jumlah_minimal; ?></td>
					<td contenteditable="true" onBlur="saveToDatabase(this,'jumlah_maksimal','<?php echo $id; ?>')" onClick="editRow(this);"><?php echo $jumlah_maksimal; ?></td>
					<td contenteditable="true" onBlur="saveToDatabase(this,'harga_jual','<?php echo $id; ?>')" onClick="editRow(this);"><?php echo $harga_jual; ?></td>
					<td><button class="btn btn-danger btn-sm" onclick="deleteRecord(<?php echo $id; ?>);"><i class="fa fa-remove"></i> Hapus</button></td>
				</tr>
			<?php $a++;$no++;} ?>     
		</tbody>
	</table>
	
	<input type="hidden" id="id_bahan" value="<?=$id_bahan;?>">
</div>

<script type="text/javascript">
	var satuan_add = "<?=$bahan->id_satuan;?>";
	function createNew() {
		$("#add-more").hide();
		no = $('#table_range > tbody tr').length+1;
		i = $('#table_range > tbody tr').length;
		var data = '<tr class="table-row" id="new_row_ajax">' +
		'<td>'+no+'</td><td><select name="load_satuan_range_add" id="load_satuan_range_'+i+'" class="form-control form-control-sm" data-valueKey="id" data-displayKey="name" required></select></td>' +
		'<td contenteditable="true" id="txt_jumlah_minimal" onBlur="addToHiddenField(this,\'jumlah_minimal\')" onClick="editRow(this);"></td>' +
		'<td contenteditable="true" id="txt_jumlah_maksimal" onBlur="addToHiddenField(this,\'jumlah_maksimal\')" onClick="editRow(this);"></td>' +
		'<td contenteditable="true" id="txt_harga_jual" onBlur="addToHiddenField(this,\'harga_jual\')" onClick="editRow(this);"></td>' +
		'<td class="harga-new-row-action"><input type="hidden" id="id_satuan" /><input type="hidden" id="jumlah_minimal" /><input type="hidden" id="jumlah_maksimal" /><input type="hidden" id="harga_jual" /><span id="confirmAdd" class="harga-inline-actions"><button type="button" onClick="addToDatabase('+i+')" class="btn harga-inline-save" title="Simpan harga" aria-label="Simpan harga"><i class="fa fa-check" aria-hidden="true"></i><span>Simpan</span></button><button type="button" onclick="cancelAdd();" class="btn harga-inline-cancel" title="Batalkan" aria-label="Batalkan penambahan harga"><i class="fa fa-times" aria-hidden="true"></i></button></span></td>' +
		'</tr>';
		$("#table-body").append(data);
		// console.log(i);
		// console.log(satuan_add);
		satuan_range(i,satuan_add)
	}
	function saveData(a) {
		console.log(a)
	}
	function cancelAdd() {
		$("#add-more").show();
		$("#new_row_ajax").remove();
	}
	function editRow(editableObj) {
		$(editableObj).css("background","#FFF");
	}
	
	function addToDatabase(i) {
		var satuan = $("#load_satuan_range_"+i).val();
		var minimal = typeof hargaPrepareValue === 'function' ? hargaPrepareValue('jumlah_minimal', $("#jumlah_minimal").val() || $("#txt_jumlah_minimal").text()) : $("#jumlah_minimal").val();
		var maksimal = typeof hargaPrepareValue === 'function' ? hargaPrepareValue('jumlah_maksimal', $("#jumlah_maksimal").val() || $("#txt_jumlah_maksimal").text()) : $("#jumlah_maksimal").val();
		var harga = typeof hargaPrepareValue === 'function' ? hargaPrepareValue('harga_jual', $("#harga_jual").val() || $("#txt_harga_jual").text()) : $("#harga_jual").val();
		var id_bahan = $("#id_bahan").val();
		$("#confirmAdd").html('<img src="'+base_url+'assets/img/ajax-loader.gif" />');
		var no = i+1;
		$.ajax({
			url: base_url+"produk/add_harga_range",
			type: "POST",
			data:{id:id_bahan,satuan:satuan,minimal:minimal,maksimal:maksimal,harga:harga,no:no,row:i},
			success: function(data){
				$("#new_row_ajax").remove();
				$("#add-more").show();		  
				$("#table-body").append(data);
				satuan_range(i,satuan);
			}
		});
	}
	function addToHiddenField(addColumn,hiddenField) {
		var columnValue = typeof hargaPrepareValue === 'function' ? hargaPrepareValue(hiddenField, $(addColumn).text()) : $(addColumn).text();
		$("#"+hiddenField).val(columnValue);
		if(typeof hargaUpdateCellDisplay === 'function'){
			hargaUpdateCellDisplay(addColumn, hiddenField, columnValue);
		}
	}
	function getData(a,id) {
		// console.log(id);
		var id_satuan = $("#load_satuan_range_"+a).val();
		saveToDatabase(id_satuan,'id_satuan',id)
	}
	
	function saveToDatabase(editableObj,column,id) {
		$(editableObj).css("background","#FFF url("+base_url+"assets/img/ajax-loader.gif) no-repeat right");
		if($.isNumeric(editableObj)){
			var editval = editableObj;
			}else{
			var editval = typeof hargaPrepareValue === 'function' ? hargaPrepareValue(column, $(editableObj).text()) : $(editableObj).text();
		}
		$.ajax({
			url: base_url+"produk/edit_harga_range",
			type: "POST",
			data:'column='+column+'&editval='+editval+'&id='+id,
			success: function(data){
				if(!$.isNumeric(editableObj)){
					if(typeof hargaUpdateCellDisplay === 'function'){
						hargaUpdateCellDisplay(editableObj, column, editval);
					}
					$(editableObj).css("background","");
				}
				
			}
		});
	}
	
	function deleteRecord(id) {
		show_Confirm(id);
	}
	
	function show_Confirm(id) {
		confirm.show({
			title: 'Hapus Item',
			content: 'Item akan di hapus, Anda Yakin?',
			btns: [{
				callback: function(instance){
					instance.close = true;
					$.ajax({
						url: base_url+"produk/delete_harga_range",
						type: "POST",
						data:'id='+id,
						success: function(data){
							$("#table-row-"+id).remove();
						}
					});
				}
				}, {
				text: 'Tidak',
				callback: function(){
					console.log('Hapus item dibatalkan');
				}
			}] 
		})
	}
	document.querySelectorAll('#table_range > tbody tr').forEach(trObj => {
		var tableValue = trObj.id;
		
		var result = tableValue.split('-');
		var data = 	$('#'+tableValue).attr('data-row');
		var idsatuan = 	$('#'+tableValue).attr('data-id');
		satuan_range(data,idsatuan);
		// console.log(result[2])
	});
	
	function satuan_range(tipe,idjenis){
		$.ajax({
			url: base_url + "produk/load_satuan_range",
			type: 'POST',
			data: {id:idjenis},
			dataType: 'json',
			beforeSend: function () {
				$("#load_satuan_range_"+tipe).append("<option value='loading'>loading</option>");
				$("#load_satuan_range_"+tipe).empty();
			},
			success: function (response) {
				// $("#jenis_lembaga_"+jenis+" option[value='loading']").remove();
				$("#load_satuan_range_"+tipe).append("<option value=''>Pilih</option>");
				var len = response.length;
				for (var i = 0; i < len; i++) {
					var id = response[i]['id'];
					var name = response[i]['name'];
					if(id==idjenis){
						$("#load_satuan_range_"+tipe).append("<option value='" + id + "' selected>" + name + "</option>");
						}else{
						$("#load_satuan_range_"+tipe).append("<option value='" + id + "'>" + name + "</option>");
					}
					
				}
			},
			error: function (xhr, ajaxOptions, thrownError) {
				sweet('Peringatan!!!',thrownError,'warning','warning');
			}
		});
	}
</script>

