{% extends 'template.html' %}
{% block title %}Tambah Pembelian Obat{% endblock %}
{% block subcontent %}
	{% if session.flash.error != "" %}
		{{ session.flash.error | safe }}
	{% endif %}

	<h2>List Pembelian > Pembelian Baru</h2>
	<form method="post">
		<table cellpadding="5" cellspacing="0" border="0">
			<tr>
				<td>Nama Obat</td>
				<td>
					<select name="id_obat">
						{% for o in obat %}
						<option value="{{o.id}}">{{o.nama}}</option>
						{% endfor %}
					</select>
				</td>
			</tr>
			<tr>
				<td>Golongan</td>
				<td>
					<select name="jenis">
						<option value="u">Umum</option>
						<option value="s">Subsidi</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>Tgl Beli</td>
				<td><input type="text" name="tgl_beli" id="date_picker1" value="{{tgl}}"></td>
			</tr>
			<tr>
				<td>PBF</td>
				<td><input type="text" name="pbf" value=""/></td>
			</tr>
			<tr>
				<td>Batch</td>
				<td><input type="text" name="batch" value=""/></td>
			</tr>
			<tr>
				<td>Harga Beli</td>
				<td><input type="text" name="harga_beli" value=""/> (per pcs/tab)</td>
			</tr>
			<tr>
				<td>Exp Date</td>
				<td><input type="text" id="date_picker2" name="exp" value="{{tgl}}"></td>
			</tr>
			<tr>
				<td>Jml Masuk</td>
				<td><input type="text" name="masuk" value=""/>(per pcs/tab)</td>
			</tr>
			<tr>
				<td>Jml Keluar</td>
				<td><input type="text" name="keluar" value=""/></td>
			</tr>
			<tr>
				<td>Keterangan</td>
				<td><textarea name="keterangan" style="width:300px;height:100px"></textarea></td>
			</tr>
		</table>
		<br/><input type="submit" class="btn btn-success" value="Simpan" /> <a class="btn btn-danger" href="{% nav apotik_stock %}">Batal</a>
	</form>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#date_picker1").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					if (newDate.getDate() < 10) {
						tgl = "0" + newDate.getDate();
					} else {
						tgl = newDate.getDate();
					}
					var month= ["01","02","03","04","05","06","07","08","09","10","11","12"];
					target.val
					(
						tgl  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
				}
		});
		$("#date_picker2").glDatePicker({
			cssName: "android",
			selectedDate:new Date("{{tgl_js}}"),
			startDate: new Date("{{tgl_js}}"),
		    allowOld: true,
			onChange: function(target, newDate)
				{
					if (newDate.getDate() < 10) {
						tgl = "0" + newDate.getDate();
					} else {
						tgl = newDate.getDate();
					}
					var month= ["01","02","03","04","05","06","07","08","09","10","11","12"];
					target.val
					(
						tgl  + "-" +
						month[newDate.getMonth()] + "-" +
						newDate.getFullYear() 
					);
				}
		});
	});
</script>
{% endblock %}