{% 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">Tahun Buku Baru</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_trans" name="id_trans" value=""/>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td colspan=2><span class="txtError" style="color:red"></span></td>
				</tr>
				<tr>
					<td style="vertical-align:top;width:80px">Nama</td>
					<td><input type="text" name="nama"></textarea></td>
				</tr>
				<tr>
					<td style="width:80px">Tanggal Awal</td>
					<td><input type="text" name="tglAwal" id="date_picker" value="{{tgl}}"></td>
				</tr>
				<tr>
					<td style="width:80px">Tanggal Akhir</td>
					<td><input type="text" name="tglAkhir" id="date_picker2" value="{{tgl}}"></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 - Saldo Awal</h2>
<h3>
	Tahun Buku
</h3><br/>
<table border=0>
	<tr>
		<td>Nama Tahun Buku</td>
		<td>: </td>
	</tr>
	<tr>
		<td>Awal</td>
		<td>: </td>
	</tr>
	<tr>
		<td>Akhir</td>
		<td>: </td>
	</tr>
	<tr>
		<td style="padding-top:20px">
			<button type="button" class="btn btn-primary btnBaru" style="display:none">Tahun Buku Baru</button>
			<button type="button" class="btn btn-primary btnBaru">Edit Tahun Buku</button>
		</td>
		<td style="padding-top:20px;padding-left:10px"><button type="button" class="btn btn-danger btnTutup">Tutup Buku</button></td>
	</tr>
</table>
<br/><br/>
<h3>
	Saldo Awal
</h3><br/>
{% if data.length > 0 %}
<table class="data">
	<tr class="table_head">
		<td style="width:80px">Kode</td>
		<td style="width:400px">Akun</td>
		<td style="width:100px" align="right">Saldo</td>
	</tr>
	{% for row in data %}
	<tr class="orders" valign="top">
		<td>{{row.kode}}-{{row.subkode}}</td>
		<td>{{row.nama}}</td>
		<td align="right"><input type="text" name="{{row.id}}" value="{{row.saldo | currency}}"/></td>
	</tr>
	{% endfor %}
</table>
{% else %}
	- Belum Ada Akun -<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">
	$(document).ready(function() {
		menuSelected("mSetting","smTahunBuku");
		$("#date_picker").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() 
					);
				}
		});
		$("#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() 
					);
				}
		});
		$(".btnBaru").on("click", function(){
			$(".nomorTransaksi").val("-- proses generate nomor --");
			$("#id_trans").val("");
			$("#infoModal").show();
			$("#date_picker1").val("{{tgl }}");
			$("#date_picker2").val("{{tgl}}");
			$("#akunm").val(1).change();
			updateTotal();
		});
	});
</script>
{% endblock %}