{% extends '../template.html' %}
{% block style %}
<link href="{% nav public %}css/infomodal.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">
			<input type="hidden" id="id_trans" name="id_trans" value=""/>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr style="display:none">
					<td style="width:80px">Mode</td>
					<td>
						<input type="radio" id="tipe1" name="tipe_input" value="kasbank">
						<label for="tipe1">Kas Bank</label>
						<input type="radio" id="tipe2" name="tipe_input" value="general">
						<label for="tipe2">Umum</label>
					</td>
				</tr>
				<tr>
					<td style="width:80px">Nomor</td>
					<td><input type="text" name="nomorTransaksi" class="nomorTransaksi"></input></td>
				</tr>
				<tr>
					<td style="width:80px">Tanggal</td>
					<td><input type="text" name="tgl" id="date_picker2" value="{{tgl}}"></td>
				</tr>
			</table><br/>
			
			<table cellpadding="5" cellspacing="0" border="0" class="kasbank">
				<tr>
					<td style="width:80px">Jenis</td>
					<td>
						<select name="jenis" id="jenis">
							<option value="m">Pemasukan</option>
							<option value="k">Pengeluaran</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>Akun</td>
					<td>
						<select name="akun_bendahara" id="akun_bendahara">
							<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><label id="untukdari">Dari</label></td>
					<td>
						<select name="akunm" id="akunm">
							{% for a in akun %}
							{% if a.jenis != 'k' %}
							<option value="{{a.id}}" jenis="{{a.jenis}}">{{a.nama}}</option>
							{% endif %}
							{% endfor %}
						</select>
						<select name="akunk" id="akunk" style="display:none">
							{% for a in akun %}
							{% if a.jenis != 'm' %}
							<option value="{{a.id}}" jenis="{{a.jenis}}">{{a.nama}}</option>
							{% endif %}
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td>Nominal</td>
					<td><input type="text" id="nominal" name="nominal" value="" style="text-align:right;width:100px;" placeholder="0"/></td>
				</tr>
			</table>
			
			<table cellpadding="5" cellspacing="0" border="0" class="general">
				<tr>
					<td style="vertical-align:top;width:80px">Transaksi</td>
					<td style="vertical-align:top">
						<table style="border-collapse:separate;border-spacing:2px">
							<tr>
								<th style="width:330px;background-color:#ececec">Akun</th>
								<th style="width:114px;background-color:#ececec">Debit</th>
								<th style="width:114px;background-color:#ececec">Kredit</th>
							</tr>
						</table>
						<table cellpadding="0" cellspacing="0" border="0">
							<tr colspan=3>
								<div class="akuns" style="padding-bottom:30px">
									<div class="plus btn-success"><i class="fas fa-plus"></i></div>
								</div>
							</tr>
						</table>
						<table cellpadding="0" cellspacing="0" border="0">
							<tr>
								<th style="width:330px"><b>TOTAL</b></th>
								<th style="width:117px;text-align:right;border-top:1px solid gray" class="totalDebit"><b>0</b></th>
								<th style="width:117px;text-align:right;border-top:1px solid gray" class="totalKredit"><b>0</b></th>
							</tr>
						</table>
					</td>
				</tr>
			</table><br/>
			
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td style="vertical-align:top;width:80px">Uraian</td>
					<td><textarea id="uraian" name="uraian" style="width:300px;height:100px"></textarea></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>

<div class="akun_master" style="display:none;padding-bottom:5px">
	<div class="option">
		<div class="minus btn-danger"><i class="fas fa-minus"></i></div>
	</div>
	<table style="margin-left:30px;width:450px;">
		<tr>
			<td>
				<select class="menu1" name="akun[]" style="width:300px">
					{% for ja in jenisAkun %}
					<optgroup label="{{ja.nama}}">
						{% for a in akun %}
						{% if a.id_jenis == ja.id %}
						<option value="{{a.id}}" >{{a.kode}}-{{a.subkode}} {{a.nama}}</option>
						{% endif %}
						{% endfor %}
					</optgroup>
					{% endfor %}
				</select>
			</td>
			<td style="padding-left:10px">
				<input class="nominalDebit" value=0 name="nominalDebit[]" type="text" onkeyup="currency(this);" style="text-align:right;width:100px;" />
			</td>
			<td style="padding-left:10px">
				<input class="nominalKredit" value=0 name="nominalKredit[]" type="text" onkeyup="currency(this);" style="text-align:right;width:100px;" />
			</td>
		</tr>
	</table>
</div>

<h2>Keuangan - Jurnal Umum</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>Akun</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>
			<table style="margin-left:-10px">
			{% for a in row.detail %}
				{% if a.kredit == 0 %}
				<tr>
					<td style="border:0px;width:200px">{{a.nama}}</td>
					<td style="border:0px;width:50px;text-align:right">{{a.debit | currency}}</td>
					<td style="border:0px;width:50px;text-align:right"></td>
				</tr>
				{% endif %}
			{% endfor %}
			{% for a in row.detail %}
				{% if a.debit == 0 %}
				<tr>
					<td style="border:0px;width:200px">{{a.nama}}</td>
					<td style="border:0px;width:50px;text-align:right"></td>
					<td style="border:0px;width:50px;text-align:right">{{a.kredit | currency}}</td>
				</tr>
				{% endif %}
			{% endfor %}
			</table>
		</td>
		<td style="width:140px">
			<button style="width:40px;" type="button" id_trx="{{row.id}}" class="btn btn-default btnUbah" sumber="{{row.sumber}}"><i class="far fa-edit"></i></button>
			{% if row.sumber == 'bendahara' %}
			<button style="width:40px;" type="button" id_trx="{{row.id}}" class="btn btn-default btnHapus"><i class="far fa-trash-alt"></i></button>	
			<button style="width:40px;" type="button" id_trx="{{row.id}}" class="btn btn-default btnSalin"><i class="far fa-copy"></i></button>
			{% endif %}
		</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">
	var modal = document.getElementById('infoModal');
	$(document).ready(function() {
		menuSelected("mJurnal","smUmum");
		$("#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_jurnalumum %}?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("");
			$('#infoModal').show();
			$('#modal-title').html('Transaksi Baru');
			$('#jenis').val('m').change();
			$('#date_picker2').val('{{ tgl_get }}');
			$('#akunm').val(1).change();
			$('#uraian').val('');
			$('#nominal').val('');
			$("#tipe2").prop("checked",true);
			$("#tipe2").change();
			$(".akun").each(function() {
				$(this).remove();
			});
			updateTotal();
		});
		$('.btnUbah').on("click", function(){
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('.btnSimpan').show();
			$('#modal-title').html('Sedang memproses...');
			$("#tipe2").prop("checked",true);
			$("#tipe2").change();
			$(".akun").each(function() {
				$(this).remove();
			});
			if ($(this).attr('sumber') == "kunjungan") {
				$('.btnSimpan').hide();
			}
			
			var trx = $(this).attr('id_trx');
			$("#id_trans").val(trx);
			$.ajax({
				type: "GET",
				url: "{% nav bendahara_keuangan_gettransaksi %}?id="+trx,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#date_picker2').val(data.tgl);
					<!-- $('#jenis').val(data.jenis).change(); -->
					<!-- if (data.jenis == "m") { -->
						<!-- $('#akunm').val(data.id_akun); -->
						<!-- $("#akunm").show(); -->
						<!-- $("#akunk").hide(); -->
					<!-- } else { -->
						<!-- $('#akunk').val(data.id_akun); -->
						<!-- $("#akunm").hide(); -->
						<!-- $("#akunk").show(); -->
					<!-- } -->
					<!-- $('#nominal').val(data.nominal); -->
					$('.nomorTransaksi').val(data.no_transaksi);
					$('#uraian').val(data.uraian);
					$('#modal-title').html('Edit Transaksi');
					loadTransaksiAkun(data.akun);
					$('.imodal-content').show();
				}
			});
			if ($(this).attr('sumber') != "bendahara") {
				$('.nominalDebit').attr('disabled', true);
				$('.nominalKredit').attr('disabled', true);
			}
		});
		$('.btnSalin').on("click", function(){
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			$('.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);
				}
			});
			$("#tipe2").prop("checked",true);
			$("#tipe2").change();
			$(".akun").each(function() {
				$(this).remove();
			});
			
			var trx = $(this).attr('id_trx');
			$("#id_trans").val("");
			$.ajax({
				type: "GET",
				url: "{% nav bendahara_keuangan_gettransaksi %}?id="+trx,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#date_picker2').val(data.tgl);
					$('#uraian').val(data.uraian);
					$('#modal-title').html('Transaksi Baru');
					loadTransaksiAkun(data.akun);
					$('.imodal-content').show();
				}
			});
		});
		$("#tipe1").on('change',function() {
			$(".kasbank").show();
			$(".general").hide();
		});
		$("#tipe2").on('change',function() {
			$(".kasbank").hide();
			$(".general").show();
		});
		$("#jenis").on('change',function() {
			if ($(this).val() == "m") {
				$("#untukdari").text("Dari");
				$("#akunm").show();
				$("#akunk").hide();
			} else {
				$("#untukdari").text("Untuk");
				$("#akunm").hide();
				$("#akunk").show();
			}
		});
		$(".plus").on("click",function() {
			newAkun();
		});
		$(".minus").on("click",function() {
			$(this).parent().parent().remove();
			updateTotal();
		});
		$(".btnSimpan").on("click",function() {
			$('.nominalDebit').attr('disabled', true);
			$('.nominalKredit').attr('disabled', true);
		});
		$(".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");
					}
				});
			}
		});
	});
	function loadTransaksiAkun(d) {
		if (d != null) {
			$.each(d,function(){
				newAkun();
			});
			key = 0;
			$(".akun").each(function() {
				$(this).find(".menu1").val(d[key].id_akun);
				$(this).find(".nominalDebit").val(d[key].debit);
				$(this).find(".nominalKredit").val(d[key].kredit);
				key += 1;
			});
			updateTotal();
		}
	}
	function newAkun() {
		$menu = $(".akun_master").clone(true).removeClass("akun_master").addClass("akun").show();
		$menu.insertBefore($(".plus"));
	}
	function updateTotal() {
		$(".txtError").text("");
		total = 0;
		$(".akun").each(function() {
			total += $(this).find(".nominalDebit").val().replace(/[^,\d]/g, '').replace(/,/g, '.')*1;
		});
		$(".totalDebit").text(total.formatMoney(2,',','.'));
		total = 0;
		$(".akun").each(function() {
			total += $(this).find(".nominalKredit").val().replace(/[^,\d]/g, '').replace(/,/g, '.')*1;
		});
		$(".totalKredit").text(total.formatMoney(2,',','.'));
		
		if ($(".totalDebit").text() == "0,00" && $(".totalKredit").text() == "0,00") {
			$(".btnSimpan").prop("disabled", true);
		} else if ($(".totalDebit").text() != $(".totalKredit").text()) {
			$(".btnSimpan").prop("disabled", true);
			$(".txtError").text("*Total Tidak Balance");
		} else {
			$(".btnSimpan").prop("disabled", 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;
		
		updateTotal();
	}
</script>
{% endblock %}