{% extends '../template.html' %}
{% block subcontent %}
<h1>Kunjungan Harian<h1>
<h3>
	Tanggal Kunjungan: <input type="text" id="date_picker" value="{{tgl}}">
	Cari: <input type="text" id="find"/>
</h3>
<br/>
{% for d in data %}
<div class="pasien">
	<br/><br/>
	<table class="data" style="border:0px">
		<tr>
			<td><b>Nama Pasien</b></td>
			<td>: {{d.nama}} - {{d.golongan}} 
				{%if d.golongan == 'Dhuafa'%}<i class="fas fa-circle" style="color:yellow"></i>{%endif%}
				{%if d.golongan == 'Khusus'%}<i class="fas fa-circle" style="color:green"></i>{%endif%}
				{%if d.golongan == 'Umum'%}<i class="fas fa-circle" style="color:blue"></i>{%endif%}
				{%if d.golongan == 'Kerja Sama'%}<i class="fas fa-circle" style="color:red"></i>{%endif%}
				{%if d.golongan == 'Gratis'%}<i class="fas fa-circle" style="color:gray"></i>{%endif%}
			</td>
		</tr>
		<tr>
			<td><b>Poli</b></td>
			<td>: {{d.poli}} - {{d.dokter}}</td>
		</tr>
	</table>
	<table class="data">
		<tr>
			<td style="width:350px"><b>Tindakan<b></td>
			<td style="width:70px"></td>
			<td style="width:70px;text-align:right"><b>{{d.tottindakan | currency}}</b></td>
		</tr>
		{% for dt in d.tindakan %}
		<tr>
			<td><span style="padding-left:20px">{{dt.nama}}</span></td>
			<td style="text-align:right">{{dt.subtot | currency}}</td>
			<td></td>
		</tr>
		{% endfor %}
		<tr>
			<td style="width:350px"><b>Obat<b></td>
			<td style="width:70px"></td>
			<td style="width:70px;text-align:right"><b>{{d.totobat | currency}}</b></td>
		</tr>
		{% for do in d.obat %}
		<tr>
			<td><span style="padding-left:20px">{{do.nama}}</span></td>
			<td style="text-align:right">{{do.subtot | currency}}</td>
			<td></td>
		</tr>
		{% endfor %}
		<tr>
			<td style="width:350px"><b>Biaya Lain<b></td>
			<td style="width:70px"></td>
			<td style="width:70px;text-align:right"><b>{{d.totbiaya | currency}}</b></td>
		</tr>
		{% for db in d.biaya %}
		<tr>
			<td><span style="padding-left:20px">{{db.nama}}</span></td>
			<td style="text-align:right">{{db.subtot | currency}}</td>
			<td></td>
		</tr>
		{% endfor %}
		<tr>
			<td style="width:350px"><h3>Total</h3></td>
			<td style="width:70px"></td>
			<td style="width:70px;text-align:right"><h3>{{d.total | currency}}</h3></td>
		</tr>
		<tr>
			<td style="width:350px"><h3>Pembayaran</h3></td>
			<td></td>
			<td></td>
		</tr>
		{% for k,p in d.pembayaran %}
		<tr>
			<td><span style="padding-left:20px">{{k}}</span></td>
			<td style="text-align:right"><b>{{p | currency}}</b></td>
			<td></td>
		</tr>
		{% endfor %}
	</table>
</div>
{% endfor %}
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mKunjungan","smHarian");
		$("#find").keyup(function() {
			$this = $(this);
			$(".pasien").hide();
			if ($this.val().trim() != '') {
				$(".pasien").each(function() {
					$va = $(this).find('td');
					if ($va.eq(1).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0) {
						$(this).show();
					}
				});
			} else {
				$(".pasien").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","May","Jun","Jul","Aug","Sep","Oct","Nov","Des"];
					target.val
					(
						newDate.getDate()  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
					
					location.href = "{% nav bendahara_kunjungan_harian %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	});
</script>
{% endblock %}