{% extends '../template.html' %}
{% block style %}
<link href="{% nav public %}css/infomodal.css" rel="stylesheet">
<link href="{% nav public %}css/select2.css" rel="stylesheet">
{% endblock %}
{% block subcontent %}
<!-- iModal -->
<div id="infoModal" class="imodal">
  <!-- iModal content -->
	<div class="imodal-content" style="min-width:700px">
		<span class="close">&times;</span>
		<h2 id="modal-title">Transasi Baru</h2>
		<br/>
		<form method="post" class="formDonasi">
			<input type="hidden" id="id_trans" name="id_trans" value=""/>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td style="width:80px">Nomor</td>
					<td><input type="text" name="nomorTransaksi" class="nomorTransaksi" style="width:200px"></input></td>
				</tr>
				<tr>
					<td style="width:80px">Tanggal</td>
					<td><input type="text" name="tgl" id="date_picker2" value="{{tgl}}"></td>
				</tr>
				<tr>
					<td style="width:80px">Donatur</td>
					<td>
						<span class="donaturList">
							<select class="idDonatur" name="idDonatur" id="nama" style="width:205px">
								{% for d in donatur %}
								<option value="{{d.id}}">{{d.nama}}</option>
								{% endfor %}
							</select>
							<button style="width:40px;" type="button" class="btn btn-default btnDonaturNew"><i class="fas fa-plus"></i></button>
						</span>
						<span class="donaturNew">
							<input type="text" name="donaturNew" class="txtDonaturNew" style="width:200px"/>
							<button style="width:40px;" type="button" class="btn btn-default btnDonaturList"><i class="fa fa-bars"></i></button>
						</span>
					</td>
				</tr>
				<tr>
					<td>Masuk Ke</td>
					<td>
						<select class="akun" name="akun" style="width:205px">
							<option value="2">KAS BENDAHARA</option>
							<option value="5">BCA</option>
							<option value="6">BSM</option>
							<option value="38">BNI SYARIAH</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Nominal</td>
					<td><input type="text" id="nominal" name="nominal" value="0" onkeyup="currency(this);" style="text-align:right;width:200px;" placeholder="0"/></td>
				</tr>
				<tr>
					<td colspan=2><span class="txtError" style="color:red"></span></td>
				</tr>
			</table>
			<br/><input type="submit" class="btn btn-success btnSimpan" value="Simpan"/> <span class="btn btn-danger btnBatal">Batal</span>
		</form>
		<br/>
	</div>
</div>

<h2>Keuangan - Jurnal Donasi</h2>
<h3>
	Tanggal : <input type="text" id="date_picker" value="{{tgl}}">
	Cari: <input type="text" id="find"/>
</h3>
<br/><br/>
<button type="button" class="btn btn-primary btnTambah" style="width:80px">Tambah</button>
<br/><br/>
{% if data.length > 0 %}
<table class="data">
	<tr>
		<th>Tanggal</th>
		<th>Nomor</th>
		<th>Uraian</th>
		<th>Nominal</th>
		<th></th>
	</tr>
	{% for row in data %}
		<tr class="order_histori_{{row.id}} orders" valign="top">
			<td>{{row.tgl}}</td>
			<td>{{row.no_transaksi}}</td>
			<td>{{row.uraian}}</td>
			<td>{{row.total_kredit | currency}}</td>
			<td style="width:100px">
				<button style="width:40px;" type="button" id_trx="{{row.id}}" class="btn btn-default btnUbah"><i class="far fa-edit"></i></button>
				<button style="width:40px;" type="button" id_trx="{{row.id}}" class="btn btn-default btnHapus"><i class="far fa-trash-alt"></i></a>
			</td>
		</tr>
	{% endfor %}
</table>
{% else %}
	- Transaksi Masih Kosong -<br/><br/>
{% endif %}
<br/><br/><br/>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript" src="{% nav public %}js/infomodal.js"></script>
<script type="text/javascript" src="{% nav public %}js/select2/select2.min.js"></script>
<script type="text/javascript">
	var modal = document.getElementById('infoModal');
	var jenisInputDonatur = "list";
	$(document).ready(function() {
		menuSelected("mJurnal","smDonasi");
		$('.idDonatur').select2({
			minimumResultsForSearch: 10
		});
		$('.akun').select2({
			minimumResultsForSearch: 10
		});
		$("#find").keyup(function() {
			$this = $(this);
			$(".orders").hide();
			if ($this.val().trim() != '') {
				$(".orders").each(function() {
					$va = $(this).find('td');
					if ((
						$va.eq(1).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(3).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0)
					) {
						console.debug($va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()));
						$(this).show();
					}
				});
			} else {
				$(".orders").show();
			}
		});
		$("#date_picker").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					var month= ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Oct","Nov","Des"];
					target.val
					(
						newDate.getDate()  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
					location.href = "{% nav bendahara_keuangan_jurnaldonasi %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
		$("#date_picker2").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					if (newDate.getDate() < 10) {
						tgl = "0" + newDate.getDate();
					} else {
						tgl = newDate.getDate();
					}
					var month= ["01","02","03","04","05","06","07","08","09","10","11","12"];
					target.val
					(
						tgl  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
				}
		});
		$('.btnTambah').on("click", function(){
			$('.nomorTransaksi').val("-- proses generate nomor --");
			$.ajax({
				type: "GET",
				url: "{% nav bendahara_keuangan_getnomor %}",
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('.nomorTransaksi').val(data);
				}
			});
			$('#id_trans').val('');
			$(".btnDonaturList").trigger("click");
			$('#infoModal').show();
			$('#modal-title').html('Transaksi Baru');
			$('#date_picker2').val('{{ tgl_get }}');
			$('#nominal').val('');
			$('.idDonatur').val(1).trigger('change');
			$('.akun').val(2).trigger('change');
			$('.txtError').text("");
		});
		$('.btnUbah').on("click", function(){
			$('.imodal-content').hide();
			$(".btnDonaturList").trigger("click");
			$('.txtError').text("");
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			
			var trx = $(this).attr('id_trx');
			$("#id_trans").val(trx);
			$.ajax({
				type: "GET",
				url: "{% nav bendahara_keuangan_getdonasi %}?id="+trx,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#date_picker2').val(data.tgl);
					$('.idDonatur').val(data.id_sumber).trigger('change');
					$('#nominal').val(data.nominal);
					$('.nomorTransaksi').val(data.no_transaksi);
					$('.akun').val(data.akun).trigger('change');
					$('#modal-title').html('Edit Transaksi');
					$('.imodal-content').show();
				}
			});
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		$(".btnHapus").on("click",function() {
			if (confirm("Apakah Anda Yakin Ingin Menghapus Data Ini ?")) {
				var trx = $(this).attr('id_trx');
				$.ajax({
					type: "GET",
					url: "{% nav bendahara_keuangan_deltransaksi %}?id="+trx,
					dataType: "json",
					async: true,
					cache: false,
					timeout:30000,
					success: function(status){
						location.reload();
					},
					error: function(){
						alert("Proses terhenti, silakan refresh halaman ini");
					}
				});
			}
		});
		$('.btnDonaturNew').on('click',function() {
			jenisInputDonatur = "new";
			$('.donaturList').hide();
			$('.donaturNew').show();
		});
		$('.btnDonaturList').on('click',function() {
			jenisInputDonatur = "list";
			$('.donaturNew').hide();
			$('.txtDonaturNew').val('');
			$('.donaturList').show();
		});
		$('.formDonasi').submit(function() {
			var err = "";
			if ($('#nominal').val() == 0 || $('#nominal').val() == "") {
				err += "<br/>*nominal tidak boleh kosong";
			}
			if (jenisInputDonatur == "new" && $('.txtDonaturNew').val() == "") {
				err += "<br/>*nama donatur tidak boleh kosong";
			}
			if (err != "") {
				$('.txtError').html(err);
				return false;
			}
		});
	});
	
	function currency(angka){
		var number_string = angka.value.replace(/[^,\d]/g, '').toString(),
		split   		= number_string.split(','),
		sisa     		= split[0].length % 3,
		rupiah     		= split[0].substr(0, sisa),
		ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);

		if(ribuan){
			separator = sisa ? '.' : '';
			rupiah += separator + ribuan.join('.');
		}
		if(split[1] != undefined){
			if(split[1].length > 2){
				split[1] = '0.'+split[1];
				split[1] = parseFloat(split[1]).toFixed(2);
				split[1] = split[1].toString().substr(2);
			}
		}

		rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
		angka.value = rupiah;
	}
</script>
{% endblock %}