{% extends '../template.html' %}
{% block title %}Tambah Transaksi Keuangan{% endblock %}
{% block subcontent %}
	{% if session.flash.error != "" %}
		{{ session.flash.error | safe }}
	{% endif %}

	<h2>List Transaksi Keuangan > Transaksi Baru</h2>
	<form method="post">
		<table cellpadding="5" cellspacing="0" border="0">
			<tr>
				<td>Tanggal</td>
				<td><input type="text" name="tgl" id="date_picker" value="{{tgl}}"></td>
			</tr>
			<tr>
				<td>Jenis</td>
				<td>
					<select name="jenis" id="jenis">
						<option value="m">Kas Masuk</option>
						<option value="k">Kas Keluar</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>Uraian</td>
				<td><textarea name="uraian" style="width:300px;height:100px"></textarea></td>
			</tr>
			<tr>
				<td>Nominal</td>
				<td><input type="text" name="nominal" onkeyup="currency(this)" style="text-align:right" value=""/></td>
			</tr>
		</table>
		<br/><input type="submit" class="btn btn-success" value="Simpan" /> <a class="btn btn-danger" href="javascript:history.back()">Batal</a>
	</form>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mKeuangan","smKas");
		$("#akun option[jenis='k']").hide();
		$("#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() 
					);
				}
		});
		$("#jenis").on('change',function() {
			if ($(this).val() == "m") {
				$("#untukdari").text("Dari");
				$("#akunm").show();
				$("#akunk").hide();
			} else {
				$("#untukdari").text("Untuk");
				$("#akunm").hide();
				$("#akunk").show();
			}
			$('#akun').val() = 0;
		});
	});
	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 %}