{% extends 'template.html' %}
{% block subcontent %}
	<div>
	<h2>List Kunjungan: <input type="text" id="date_picker" value="{{tgl}}">
		Cari: <input type="text" id="find"/>
	</h2>

	{% if data.length > 0 %}
	<table class="orderhistory data">
		<tr>
			<th>Antrian</th>
			<th>Tanggal</th>
			<th>Jam</th>
			<th>No. RM</th>
			<th>Nama</th>
			<th>Golongan</th>
			<th>Poli</th>
			<th style="width:80px">Status</th>
			<th></th>
		</tr>
		{% for row in data %}
			<tr class="order_histori_{{row.id}} orders" valign="top">
				<td>{{row.no_kunjungan}}</td>
				<td>{{row.tgl}}</td>
				<td>{{row.jam}}</td>
				<td>{{row.no_rekmed}}</td>
				<td><abbr title="Alamat : {{row.alamat}} , Telp. {{row.tlp}}">{{row.nama}}</abbr></td>
				<td>{{row.golongan}}</td>
				<td>{{row.poli}}</td>
				<td class="status"><b>{{row.status}}</b></td>
				<td class="histori_options">
					<a href="{% nav registrasi_kunjungan_detail %}/{{ row.id }}" style="background:blue;display:none">Detail</a>
					<a href="{% nav registrasi_kunjungan_del %}/{{ row.id }}" class="btn" style="background:red;font-size:12px;padding:5px">Batal</a>
				</td>
			</tr>
		{% endfor %}
	</table>
	<div id="current_time" year="{{current.year}}" month="{{current.mon}}" day="{{current.mday}}" hour="{{current.hours}}" minute="{{current.minutes}}" second="{{current.seconds}}"></div>
	{% else %}
		- Kunjungan Masih Kosong -<br/><br/>
	{% endif %}
	
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#find").keyup(function() {
			$this = $(this);
			$(".orders").hide();
			if ($this.val().trim() != '') {
				$(".orders").each(function() {
					$va = $(this).find('td');
					if ((
						$va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(2).find('abbr').attr('title').toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(3).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(4).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0)
					) {
						console.debug($va.eq(2).text().toLowerCase().indexOf($this.val().toLowerCase()));
						$(this).show();
					}
				});
			} else {
				$(".orders").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 registrasi_kunjungan %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
	});
</script>
{% endblock %}