{% extends 'template.html' %}
{% block subcontent %}
<div style="margin-left:10px;">
	<h2>Periksa Pasien</h2>
	<h3 style="margin:5px 0px;">Data Pasien</h3>
	<table class="data" cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td style="width:90px;">No. RM</td>
			<td style="width:492px;">{{ pasien.no_rekmed }}</td>
		</tr>
		<tr>
			<td><b>Nama</b></td>
			<td><b>{{ pasien.nama }}</b>
			</td>
		</tr>
		<tr>
			<td>Alamat</td>
			<td>{{ pasien.alamat }}</td>
		</tr>
		<tr>
			<td>Usia</td>
			<td>{{ pasien.usia }}</td>
		</tr>
		<tr>
			<td>Jns Kel.</td>
			<td>{{ pasien.sex }}</td>
		</tr>
		<tr>
			<td>Golongan</td>
			<td>{{ pasien.gol }}</td>
		</tr>
	</table>
	<form  method="post">
		{% if session.flash.error != "" %}
			<div class="error">
				<b>Ada Kesalahan:</b><br/> 
				{{ session.flash.error | safe }}
			</div>
		{% endif %}
		<br/>
		<h3 style="margin:5px 0px;">Form Pemeriksaan Pasien</h3>
		<table cellpadding="5">
			<tr valign="top">
				<td style="width:90px;">Keluhan</td>
				<td><textarea name="keluhan" style="width:300px;height:100px"></textarea></td>
			</tr>
			<tr valign="top">
				<td>Diagnosa</td>
				<td><textarea name="diagnosa" style="width:300px;height:60px"></textarea></td>
			</tr>
			<tr valign="top">
				<td style="padding-top:10px">Tindakan</td>
				<td>
					<div class="tindakan">
						<div class="clearfix"></div>
						<center><br/><br/><h3>Loading Data...</h3></center>
						<div class="plus btn-success"><i class="fas fa-plus"></i></div>
					</div>
				</td>
			</tr>
		</table><br/><br/><br/>
		<button class="submit btn btn-primary" type="submit" >Selesai</button>
		<br/><br/>
	</form>
</div>
<div class="tindakan_item_master" style="display:none">
	<div class="option">
		<div class="minus btn-danger"><i class="fas fa-minus"></i></div>
	</div>
	<table style="margin-left:30px;">
		<tr>
			<td>
				<select class="menu1" name="menu[]">
				{% for t in tindakan %}
					<option kode="{{t.kode}}" id_tindakan="{{t.id}}" value="{{t.id}};{{t.harga}}">{{t.nama | safe}} - {{ t.harga | currency }}</option>
				{% endfor %}
				</select>
			</td>
			<td style="padding-left:10px;">
				Jml: <input class="jml" value="1" name="jml[]" type="text" style="width:50px;" />
			</td>
			<td>
				<span class="total">Rp <span class="total_price">0</span></span>
			</td>
		</tr>
	</table>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$i=1;
	$(document).ready(function() {
		$(".plus").on("click",function() {
			$menu = $(".tindakan_item_master").clone().removeClass("tindakan_item_master").addClass("tindakan_item").show();
			$menu.insertBefore($('.plus')).find('.jml').keyup();
		});
		$(".minus").on("click",function() {
			$(this).parent().parent().remove();
			$(this).parent().parent().find(".jml").keyup();
		});
		$("#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 poli_kunjungan %}?tgl=" + newDate.getDate()  + "-" + (newDate.getMonth() + 1) + "-" + newDate.getFullYear();
				}
		});
		$(".tindakan_item select").on('change',function() {
			$menu = $(this).parent().parent();
			$menu.find('.jml').keyup();
		});
		$(".jml").on("keyup",function() {
			$parent = $(this).parent().parent()
			$super_parent = $parent.parent().parent().parent();
			jml =  $super_parent.find('.jml').val();
			total_price = parseInt(jml * $super_parent.find('select').val().split(';')[1]).formatMoney(0,',','.');
			$super_parent.find('.total_price').text(total_price);
			
			var total = 0;
			$(".total_price").each(function() {
				total += $(this).text().replace(/\./g,'') *1;
			});
			$(".total_sum").text((total + 9900).formatMoney(0,',','.'));
		});
		//add first menu
		$menu = $(".tindakan_item_master").clone().removeClass("tindakan_item_master").addClass("tindakan_item").show();
		$menu.insertAfter($(".tindakan center"));
		$menu.find(".jml").keyup();
		$(".tindakan center").remove();
	});
</script>
{% endblock %}