{% extends 'template.html' %}
{% block title %}At-Ta'awun - Kunjungan{% endblock %}
{% block style %}
	<link href="{% nav public %}css/poli_kunjungan.css" rel="stylesheet">
{% endblock %}
{% block subcontent %}
<div style="margin-left:10px;">
	<h2>List Kunjungan</h2>
	<div class="form-group">
		<div class="input-group date" id="datetimepicker" data-date-format="MM-YYYY"  style="width:150px;">
			<input type="text" class="form-control" name="tgl" id="tanggal" value="{{ tgl_get }}"/>
			<span class="input-group-addon"><i class="far fa-calendar-alt"></i></span>
		</div>
	</div>

	{% if data.length > 0 %}
	<table class="orderhistory data">
		<tr>
			<th>Antrian</th>
			<th>Jam</th>
			<th>No. RM</th>
			<th>Nama</th>
			<th>Usia</th>
			<th>Jns. Kel.</th>
			<th>Golongan</th>
			<th style="width:80px">Status</th>
			<th></th>
		</tr>
		{% for row in data %}
			<tr class="kunjungan_{{row.id}} orders" valign="top">
				<td>{{row.no_kunjungan}}</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.usia}}</td>
				<td>{{row.sex}}</td>
				<td>{{row.golongan}}</td>
				<td class="status">{{row.status}}</td>
				<td class="histori_options">
					{% if row.status == 'antri' %}
					<button class="lanjut btn btn-success" idk="{{row.id}}">Periksa</button>
					{% else %}
					<button class="lanjut btn btn-warning" idk="{{row.id}}" disabled=disabled>Selesai</button>
					{% endif %}
				</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 %}
		<br/><br/>- Tidak Ada Kunjungan -<br/><br/>
	{% endif %}
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(function () {
	  $('#datetimepicker').datetimepicker({
		format: 'DD-MM-YYYY',
		icons: {
			previous: "fas fa-angle-left",
			next: "fas fa-angle-right"
		}
	  });
	});
	$(document).ready(function() {
		$("#find").keyup(function() {
			$this = $(this);
			$(".orders").hide();
			if ($this.val().trim() != '') {
				$(".orders").each(function() {
					$va = $(this).find('td');
					if ((
						$va.eq(3).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(4).find('abbr').attr('title').toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(4).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0 || 
						$va.eq(5).text().toLowerCase().indexOf($this.val().toLowerCase()) >= 0)
					) {
						console.debug($va.eq(4).text().toLowerCase().indexOf($this.val().toLowerCase()));
						$(this).show();
					}
				});
			} else {
				$(".orders").show();
			}
		});
		$('.lanjut').on("click", function(){
			var idk = $(this).attr("idk");
			window.location='{% nav poli_periksa %}?idk='+idk;
		});
		
	});
</script>
{% endblock %}