<div class="container-fluid" id="container-wrapper">
	<div class="d-sm-flex align-items-center justify-content-between mb-4">
		<h1 class="h3 mb-0 text-gray-800"><?= $title;  ?></h1>
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="./">Home</a></li>
			<li class="breadcrumb-item active" aria-current="page"><?= $title;  ?></li>
		</ol>
	</div>
	<div class="row">
		<div class="col-lg-12 mb-4">
			<form action="#" method="post">
				<div class="card">
					<div class="card-header pb-0">
						<div class="input-group input-group-sm">
							<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-60px" onchange="search_journal()">
								<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="sortBy">SORT</span>
							</div>
							<select id="sortBy" class="form-control custom-select w-60px" onchange="search_journal()">
							  <option value="DESC" selected>Terbaru</option>
							  <option value="ASC">Terlama</option>
							</select>

							
							<input type="text" id="keywords" class="form-control w-10" placeholder="Cari data" onkeyup="search_journal();"/>
							<div class="input-group-append">
								<button class="btn btn-danger btn-sm clear_cari" type="button"><i class="fa fa-times"></i> Clear</button>
								<a href="<?= base_url(); ?>journal/add/" class="btn btn-sm btn-primary shadow-sm">
									<i class="fa fa-fw fa-plus fa-sm text-white-50"></i>
									Tambah Transaksi
								</a>
								<a href="" class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#cetakJournal">
									<i class="fa fa-fw fa-print fa-sm text-white-50"></i>
									Cetak
								</a>
							</div>
						</div>
					</div>
					
					<div class="card-body" id="data_journal">
						
					</div><!-- /.card-body -->
				</div><!-- /.card -->
			</form>
		</div>
	</div>
</div>
<!-- /.container-fluid -->



<!-- Modal -->
<div class="modal fade" id="cetakJournal" tabindex="-1" role="dialog" aria-labelledby="cetakJournalLabel" aria-hidden="true" >
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="cetakJournalLabel"></h5>
			</div>
			<form action="<?= base_url('journal/printgeneraljournal'); ?>" method="post" target="_BLANK">
				<div class="modal-body">
					<div class="form-group row">
						<label for="tglTransaksi" class="col-sm-4 col-form-label">Tanggal Awal</label>
						<div class="col-sm-8">
							<input type="date" class="form-control" id="tglAwal" name="tglAwal" value="<?= $tglAwal; ?>">
						</div>
					</div>
					<div class="form-group row">
						<label for="noTransaksi" class="col-sm-4 col-form-label">Tanggal Akhir</label>
						<div class="col-sm-8">
							<input type="date" class="form-control" id="tglAkhir" name="tglAkhir" value="<?= $tglAkhir; ?>">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
					<button type="submit" class="btn btn-success">Cetak</button>
				</div>
			</div>
		</form>
	</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 flat">
			<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 rounded-0" data-dismiss="modal" type="button">Batal</button> 
				<button class="btn btn-danger rounded-0 hapus_journal" type="button">YA</button> 
			</div>
		</div>
	</div>
</div>

<script>
	search_journal();
	function search_journal(page_num){
		page_num = page_num?page_num:0;
		var keywords = $('#keywords').val();
		var sortBy = $('#sortBy').val();
		var limits = $('#limits').val();
		
		$.ajax({
			type: 'POST',
			url: base_url+"journal/ajax_list_journal/"+page_num,
			data:{page:page_num,keywords:keywords,sortBy:sortBy,limits:limits},
			beforeSend: function(){
				$('body').loading();
			},
			success: function(html){
				$('#halaman').val(page_num);
				$('#data_journal').html(html);
				$('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");
				}			
			}
		});
	}
	// var table;
	// $(document).ready(function() {
	// var table = $('#table-serverside').DataTable({
	// "processing": true,
	// "serverSide": true,
	// "order": [],
	// "ajax": {
	// "url": base_url+"journal/ajax_list_journal",
	// "type": "POST"
	// },
	// "columnDefs": [
	// {
	// "targets": [0],
	// "orderable": false,
	// },
	// ],
	// });
	
	// });
	
	$(document).ready(function() {
		
		$('.detailJournal').on('click',function(){
			var id = $(this).data('id_jurnal');
			
			alert(id);
			
			$('#detailJournal').modal({backdrop: 'static', keyboard: false}) ;
			
			//AJAX REQUEST TO GET SELECTED PRODUCT
			$.ajax({
				url: base_url+"journal/auto_journal",
				method: "POST",
				data :{id:id},
				async : true,
				dataType : 'json',
				success : function(data){
					
					$("#detailJournalabel").text("Detail Transaksi : " + data[0].no_trans),
					$("#tglTransaksi").val(data[0].tgl),
					$("#noTransaksi").val(data[0].no_trans),
					$("#keterangan").val(data[0].keterangan);
					var href = '<?= base_url('assets/file/bukti/') ?>';
					var bukti = data[0].bukti;
					
					var url_href = href+bukti;
					$("#buktiTransaksi").prop('href', url_href);
					
					console.log(url_href);
					// $("#buktiTransaksi").prop('href', '');
					
					function change(data){
						var reverse = data.toString().split('').reverse().join(''),
						thousand = reverse.match(/\d{1,3}/g);
						thousand = thousand.join(',').split('').reverse().join('');
						return thousand;
					}
					
					let el = "";
					$.each(data,function(index,da){
						el += "<tr>";
						el += "<td width='100px'><input type='text' class='form-control' value='"+da.kel_akun + "-"+da.noakun+"' readonly></td>";
						el += "<td><input type='text' class='form-control' value='"+da.nama+"' readonly></td>";
						el += "<td><input type='text' class='form-control' value='Rp. "+change(da.nilai)+"' readonly></td>";
						el += "<td width='100px'><input type='text' class='form-control' value='"+da.perkiraan+"' readonly></td>";
						el += "</tr>";
						
					});
					
					$("#insert-form").append(el);
				}
			});
		});
	});
	$(document).on('click','.hapus_journal',function(e){
		e.preventDefault();
		var id = $("#data-hapus").val();
		// var halaman = $("#halaman").val();
		$.ajax({
			url: base_url + 'journal/hapus_journal',
			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_journal();
				$('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");
				}			
			}	
		});
	});
	$('#confirm-delete').on('show.bs.modal', function(e) {
		$('#data-hapus').val($(e.relatedTarget).data('id'));
	});
	
	$('.clear_cari').on('click', function(){
		$('#keywords').val('');
		search_journal();
	});
	
</script>		