{% extends '../template.html' %}
{% block title %}Pasien{% endblock %}
{% block style %}
	<link href="{% nav public %}css/infomodal.css" rel="stylesheet">
{% endblock %}
{% block subcontent %}
	<h2>Data Pasien > List Pasien</h2>
	<!-- iModal -->
	<div id="infoModal" class="imodal">
		<!-- iModal content -->
		<div class="imodal-content" style="width:400px;max-width:90%">
			<span class="close">&times;</span>
				<form method="post">
					<input type="hidden" id="id_pasien" name="id_pasien" value=""/>
					<table style="width:80%;padding:20px">
						<tr>
							<td><h2>Pilih Poli</h2></td>
						</tr>
						<tr>
							<td>
								<select id="poli" name="poli" style="width:120px">
									{% for p in poli %}
									<option value="{{p.id}}">{{p.nama}}</option>
									{% endfor %}
								</select>
							</td>
						</tr>
						<tr>
							<td><h2>Lama / Baru</h2></td>
						</tr>
							<td>
								<select id="baru" name="baru" style="width:120px">
									<option value="y">Pasien Baru</option>
									<option value="t">Pasien Lama</option>
								</select>
							</td>
						</tr>
						<tr>
							<td style="padding-top:20px"><button type="submit" class="btn btn-primary" id="simpan">Lanjut</button></td>
						</tr>
					</table>
				</form>
			<br/>
		</div>
	</div> 
	
	<form method="get">
		<b>Cari: <input type="text" id="find" name="find" value="{{find}}"/></b>
		<input type="submit" value="Go"/>
	</form>
	<br/><br/>
	<a href="{% nav registrasi_administrasi_pasiennew %}" class="big_btn">Tambah</a>
	<br/><br/>
	<label>Hal : </label>
	<select class="halaman" style="width:50px">
		{% for p in page %}
		<option value="{{ p.link }}" {% if p.active == 'yes' %}selected="selected"{% endif %}>{{ p.number }}</option>
		{% endfor %}
	</select>
	<label> dari {{hal}} halaman</label>
	</br></br>
	{% if data.length > 0 %}
	<table class="data" style="width:100%">
		<tr>
			<th>No. RekMed</th>
			<th>Kelompok</th>
			<th>No. Identitas</th>
			<th>Nama</th>
			<th>Usia</th>
			<th>Jns Kel</th>
			<th>Alamat</th>
			<th>Telepon</th>
			<th>Golongan</th>
			<th style="min-width:80px;"></th>
			<th></th>
		</tr>
		{% for row in data %}
			<tr>
				<td>{{row.no_rekmed}}</td>
				<td>{{row.kelompok}}</td>
				<td>{{row.no_nik}}</td>
				<td><abbr title="Nama Kel. : {{row.namakel}}">{{row.nama}}</td>
				<td><abbr title="Tgl Lahir : {{row.tgl_lahir}}">{{row.age}}</td>
				<td>{{row.sex}}</td>
				<td style="max-width:300px;">{{row.alamat}}</td>
				<td>{{row.tlp}}</td>
				<td>{{row.golongan}}</td>
				<td>
					<a href="{% nav registrasi_administrasi_pasienedit %}/{{ row.id }}" class="btn btn-default"><i class="far fa-edit"></i></a>
					<a onclick="return confirm('Apakah Anda Yakin Ingin Menghapus Data Ini ?');" class="btn btn-default" href="{% nav registrasi_administrasi_pasiendel %}/{{ row.id }}"><i class="far fa-trash-alt"></i></a>
				</td>
				<td>
					<button class="btn btn-success lanjut" idp="{{row.id}}">DAFTAR <i class="fas fa-arrow-right"></i></button>
				</td>
			</tr>
		{% endfor %}
	</table>
	{% else %}
		Data kosong, klik tombol <b>Tambah Pasien</b> untuk menambahkan data pasien baru.<br/>
	{% endif %}
	</br></br>
	<label>Hal : </label>
	<select class="halaman" style="width:50px">
		{% for p in page %}
		<option value="{{ p.link }}" {% if p.active == 'yes' %}selected="selected"{% endif %}>{{ p.number }}</option>
		{% endfor %}
	</select>
	<label> dari {{hal}} halaman</label>
	</br></br>
{% endblock %}

{% block script %}
<script>
	var modal = document.getElementById('infoModal');
	$(document).ready(function () {
		menuSelected("mAdministrasi","smPasien");
		$(function () {
			$('.lanjut').on("click", function(){
				modal.style.display = "block";
				var idp = $(this).attr("idp");
				$("#id_pasien").val(idp);
			});
			$('.halaman').on("change", function(){
				window.location = $(this).val();
			});
		});
	});

	// Get the <span> element that closes the modal
	var span = document.getElementsByClassName("close")[0];

	// When the user clicks on <span> (x), close the modal
	span.onclick = function() {
	  modal.style.display = "none";
	}

	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	  if (event.target == modal) {
		modal.style.display = "none";
	  }
	}
</script>
{% endblock %}