{% extends '../template.html' %}
{% block subcontent %}
<h1>Kunjungan Harian<h1>
<h3>
	Tanggal Kunjungan: <input type="text" id="date_picker" value="{{tgl}}">
	<a style="margin-left:30px" class="btn-success btn" href="{% nav registrasi_keuangan_laporan %}?tgl={{tgl_get}}&xls=y"><i class="far fa-file-excel"></i></a>
	<button style="margin-left:30px" class="btn-danger btn"><i class="far fa-file-pdf"></i></button>
</h3>
<br/>
<table class="data_polos allborder">
	<thead>
		<tr>
			<th rowspan=2 style="text-align:center;border:1px solid #ccc">Nama</th>
			<th rowspan=2 style="text-align:center;border:1px solid #ccc">Poli</th>
			<th rowspan=2 style="text-align:center;border:1px solid #ccc">Item</th>
			<th rowspan=2 style="text-align:center;border:1px solid #ccc">Nominal</th>
			<th colspan=4 style="text-align:center;border:1px solid #ccc">Pembayaran</th>
		</tr>
		<tr>
			<th style="min-width:60px;text-align:center;border:1px solid #ccc">Cash</th>
			<th style="min-width:60px;text-align:center;border:1px solid #ccc">Transfer</th>
			<th style="min-width:60px;text-align:center;border:1px solid #ccc">QRIS</th>
			<th style="min-width:60px;text-align:center;border:1px solid #ccc">Hutang</th>
		</tr>
	</thead>
	<tbody>
		{% for d in data %}
		{% if d.gabungan.length > 0 %}
		{% for k,g in d.gabungan %}
		<tr>
			{% if k == 0 %}
			<td rowspan={{d.span}} style="border:1px solid #ccc">({{d.golongan}}) {{d.nama}}</td>
			<td rowspan={{d.span}} style="border:1px solid #ccc">{{d.poli}}</td>
			{% endif %}
			<td style="border:1px solid #ccc">{{g.nama}}</td>
			<td style="text-align:right;border:1px solid #ccc">{{g.subtot | currency}}</td>
			{% if k == 0 %}
			{% for p in d.pembayaran %}
			<td rowspan={{d.span}} style="border:1px solid #ccc;text-align:right;vertical-align:bottom"><h3>{{p | currency}}</h3></td>
			{% endfor %}
			{% endif %}
		</tr>
		{% endfor %}
		<tr>
			<td style="border:1px solid #ccc"><h3>TOTAL</h3></td>
			<td style="border:1px solid #ccc;text-align:right"><h3>{{d.total | currency}}</h3></td>
		</tr>
		{% else %}
		<tr>
			<td style="border:1px solid #ccc">({{d.golongan}}) {{d.nama}}</td>
			<td style="border:1px solid #ccc">{{d.poli}}</td>
			<td style="border:1px solid #ccc"></td>
			<td style="border:1px solid #ccc"></td>
			{% for p in d.pembayaran %}
			<td style="border:1px solid #ccc;text-align:right;vertical-align:bottom"><h3>{{p | currency}}</h3></td>
			{% endfor %}
		</tr>
		{% endif %}
		{% endfor %}
	</tbody>
</table>

{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mKeuangan","smLaporan");
		$("#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","May","Jun","Jul","Aug","Sep","Oct","Nov","Des"];
					target.val
					(
						newDate.getDate()  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
					
					location.href = "{% nav registrasi_keuangan_laporan %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	});
</script>
{% endblock %}