{% extends '../template.html' %}
{% block subcontent %}
<h2>Keuangan - Buku Besar {{tgl.tahun}}</h2>
<h3>
	<table>
		<tr>
			<td style="height:40px;width:130px">
				Pilih Akun
			</td>
			<td>
				:   <select id="akun" tabindex="-1" style="min-width:150px;">
					{% for row1 in jenisAkun %}
					<optgroup label="{{row1.nama}}">
						{% for row2 in akun %}
						{% if row2.id_jenis == row1.id %}
						<option value="{{row2.id}}">{{row2.kode}}-{{row2.subkode}} {{row2.nama}}</option>
						{% endif %}
						{% endfor %}
					</optgroup>
					{% endfor %}
				</select>
			</td>
		</tr>
		<tr>
			<td style="height:40px">
				Bentuk Laporan
			</td>
			<td>
				:   <input type="radio" id="radioTahun" name="bentukLaporan" value="tahunan">
				<label for="radioTahun">Tahunan</label>
				<input type="radio" id="radioBulan" name="bentukLaporan" value="bulanan">
				<label for="radioBulan">Bulanan</label>
				<input type="radio" id="radioTanggal" name="bentukLaporan" value="harian">
				<label for="radioTanggal">Harian</label> 
			</td>
		</tr>
		<tr>
			<td style="height:30px">
			</td>
			<td>
				<div style="padding-left:10px">
					<select id="tanggal" class="select-day" tabindex="-1"></select>
					<select id="bulan" class="select-month" tabindex="-1">
						<option value="1" >Januari</option>
						<option value="2" >Februari</option>
						<option value="3" >Maret</option>
						<option value="4" >April</option>
						<option value="5" >Mei</option>
						<option value="6" >Juni</option>
						<option value="7" >Juli</option>
						<option value="8" >Agustus</option>
						<option value="9" >September</option>
						<option value="10" >Oktober</option>
						<option value="11" >Nopember</option>
						<option value="12" >Desember</option>
					</select>
					<select id="tahun" tabindex="-1">
						{% for t in listTahun %}
						<option value="{{t.tahun}}" {%if t.aktif == 'y'%}selected{%endif%}>{{t.tahun}}</option>
						{% endfor %}
					</select>
				</div>
			</td>
		</tr>
	</table>
</h3>
<br/>
<button type="button" class="btn btn-primary btnLihat" style="width:80px">Lihat</button>
<br/><br/><br/>
{% if bentuk == 'tahunan' %}
	{% if data.length > 0 %}
	<table class="data">
		<tr class="table_head">
			<td style="width:150px">Bulan</td>
			<td style="width:100px" align="right">Debit</td>
			<td style="width:100px" align="right">Kredit</td>
			<td style="width:100px" align="right">Saldo</td>
			<td></td>
		</tr>
		<tr class="orders" valign="top">
			<td colspan="3"><b>SALDO AWAL</b></td>
			<td align="right"><b>{{data.saldoAwal | currency}}<b></td>
			<td></td>
		</tr>
		{% for row in data.data %}
		<tr class="orders" valign="top">
			<td>{{row.bulan}}</td>
			<td align="right">{{row.debit | currency}}</td>
			<td align="right">{{row.kredit | currency}}</td>
			<td align="right">{{row.saldo | currency}}</td>
			<td><a href="#" onclick="openDetail('bulanan','{{row.bulan}}')">detail</a></td>
		</tr>
		{% endfor %}
		<tr>
			<td><b>SALDO AKHIR</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.debitAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.kreditAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.saldoAkhir | currency}}</b></td>
		</tr>
	</table>
	{% else %}
		- Data Masih Kosong -<br/><br/>
	{% endif %}
{% endif %}
{% if bentuk == 'bulanan' %}
	<div><a href="{% nav bendahara_keuangan_bukubesar %}?idakun={{idAkun}}&tahun={{tgl.tahun}}" style="font-size:16px"><i class="fas fa-long-arrow-alt-left"></i> lihat setahun</a></div>
	<br/>
	{% if data.length > 0 %}
	<table class="data">
		<tr class="table_head">
			<td style="width:150px">Tanggal</td>
			<td style="width:100px" align="right">Debit</td>
			<td style="width:100px" align="right">Kredit</td>
			<td style="width:100px" align="right">Saldo</td>
			<td></td>
		</tr>
		<tr class="orders" valign="top">
			<td colspan="3"><b>SALDO AWAL</b></td>
			<td align="right"><b>{{data.saldoAwal | currency}}<b></td>
			<td></td>
		</tr>
		{% for row in data.data %}
		<tr class="orders" valign="top">
			<td>{{row.tgl}}</td>
			<td align="right">{{row.debit | currency}}</td>
			<td align="right">{{row.kredit | currency}}</td>
			<td align="right">{{row.saldo | currency}}</td>
			<td><a href="#" onclick="openDetail('harian','{{row.tgl}}')">detail</a></td>
		</tr>
		{% endfor %}
		<tr>
			<td><b>SALDO AKHIR</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.debitAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.kreditAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.saldoAkhir | currency}}</b></td>
		</tr>
	</table>
	{% else %}
		- Data Masih Kosong -<br/><br/>
	{% endif %}
{% endif %}
{% if bentuk == 'harian' %}
	<div><a href="{% nav bendahara_keuangan_bukubesar %}?idakun={{idAkun}}&tahun={{tgl.tahun}}&bulan={{tgl.bulan}}" style="font-size:16px"><i class="fas fa-long-arrow-alt-left"></i> lihat sebulan</a></div>
	<br/>
	{% if data.length > 0 %}
	<table class="data">
		<tr class="table_head">
			<td style="width:80px">Tanggal</td>
			<td style="width:400px">Keterangan</td>
			<td style="width:100px" align="right">Debit</td>
			<td style="width:100px" align="right">Kredit</td>
			<td style="width:100px" align="right">Saldo</td>
		</tr>
		<tr class="orders" valign="top">
			<td colspan="4"><b>SALDO AWAL</b></td>
			<td align="right"><b>{{data.saldoAwal | currency}}<b></td>
		</tr>
		{% for row in data.data %}
		<tr class="orders" valign="top">
			<td>{{row.tgl}}</td>
			<td>{{row.uraian}}</td>
			<td align="right">{{row.debit | currency}}</td>
			<td align="right">{{row.kredit | currency}}</td>
			<td align="right">{{row.saldo | currency}}</td>
		</tr>
		{% endfor %}
		<tr>
			<td colspan="2"><b>SALDO AKHIR</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.debitAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.kreditAkhir | currency}}</b></td>
			<td align="right" style="border-top:solid 1px black;font-size:16px"><b>{{data.saldoAkhir | currency}}</b></td>
		</tr>
	</table>
	{% else %}
		- Data Masih Kosong -<br/><br/>
	{% endif %}
{% endif %}
<br/><br/><br/>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/selectdate.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mLaporan","smBukuBesar");
		$('#akun').val({{idAkun}});
		$('#tahun').val({{tgl.tahun}});
		$('#bulan').val({{tgl.bulan}});
		$('#bulan').trigger('change');
		$('#tanggal').val({{tgl.tanggal}});
		
		$('#radioTahun').on('click',function() {
			$('#tanggal').hide();
			$('#bulan').hide();
		});
		$('#radioBulan').on('click',function() {
			$('#tanggal').hide();
			$('#bulan').show();
		});
		$('#radioTanggal').on('click',function() {
			$('#tanggal').show();
			$('#bulan').show();
		});
		
		var bentuk = "{{bentuk}}";
		if (bentuk == "harian") {
			$('#radioTanggal').trigger('click');
		} else if (bentuk == "bulanan") {
			$("#radioBulan").trigger('click');
		} else {
			$("#radioTahun").trigger('click');
		}
		
		$('.btnLihat').on('click',function() {
			var getparam = "idakun="+$('#akun').val()+"&tahun="+$('#tahun').val(),
				parambulan = "&bulan="+$('#bulan').val();
				paramtanggal = "&tanggal="+$('#tanggal').val();
			if ($('#radioBulan').is(':checked')) {
				getparam += parambulan;
			} else if ($('#radioTanggal').is(':checked')) {
				getparam += parambulan+paramtanggal;
			}
			window.location = "{% nav bendahara_keuangan_bukubesar %}?"+getparam;
		});
	});
	function openDetail(bentuk,tgl){
		if (bentuk == "bulanan") {
			var arrTgl = tgl.split("-");
			window.location = "{% nav bendahara_keuangan_bukubesar %}?idakun={{idAkun}}&tahun={{tgl.tahun}}&bulan="+arrTgl[0]*1;
		}
		if (bentuk == "harian") {
			var arrTgl = tgl.split("-");
			window.location = "{% nav bendahara_keuangan_bukubesar %}?idakun={{idAkun}}&tahun={{tgl.tahun}}&bulan={{tgl.bulan}}&tanggal="+arrTgl[0]*1;
		}
	}
</script>
{% endblock %}