{% extends '../template.html' %}
{% block style %}
<link href="{% nav public %}css/infomodal.css" rel="stylesheet">
{% endblock %}
{% block subcontent %}

<!-- iModal -->
<div id="infoModal" class="imodal">
  <!-- iModal content -->
	<div class="imodal-content">
		<span class="close">&times;</span>
		<h2 id="modal-title">Tambah Obat</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_obat" name="id_obat" value=""/>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td style="max-width:150px">Nama Obat</td>
					<td><input class="form-control" type="text" name="nama" id="nama" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="max-width:150px">Kode</td>
					<td><input class="form-control" type="text" name="kode" id="kode" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="max-width:150px">Kategori</td>
					<td>
						<select class="form-control" type="text" name="id_kategori" id="id_kategori" value="" style="max-width:250px">
							{% for k in kategori %}
							<option value="{{ k.id }}">{{ k.nama }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="max-width:150px">Generic</td>
					<td>
						<select class="form-control" type="text" name="id_generic" id="id_generic" value="" style="max-width:250px">
							{% for g in generic %}
							<option value="{{ g.id }}">{{ g.nama }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="max-width:150px">Satuan Kecil</td>
					<td>
						<select class="form-control" type="text" name="id_satuan_kecil" id="id_satuan_kecil" value="" style="max-width:250px">
							{% for sk in satuan %}
							<option value="{{ sk.id }}">{{ sk.kode }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="max-width:150px">Satuan Besar</td>
					<td>
						<select class="form-control" type="text" name="id_satuan_besar" id="id_satuan_besar" value="" style="max-width:250px">
							{% for sb in satuan %}
							<option value="{{ sb.id }}">{{ sb.kode }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="max-width:150px">Konversi</td>
					<td><input class="form-control" type="text" name="konversi" id="konversi" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="max-width:150px">Keterangan</td>
					<td><textarea class="form-control" type="text" name="keterangan" id="keterangan" value="" style="max-width:250px"></textarea></td>
				</tr>
				<tr>
					<td style="max-width:150px">Kandungan</td>
					<td><textarea class="form-control" type="text" name="kandungan" id="kandungan" value="" style="max-width:250px"></textarea></td>
				</tr>
				<tr>
					<td style="max-width:150px">Khasiat</td>
					<td><textarea class="form-control" type="text" name="khasiat" id="khasiat" value="" style="max-width:250px"></textarea></td>
				</tr>
			</table>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td><span class="txtError" style="color:red"></span></td>
				</tr>
			</table>
			<br/><input type="submit" class="btn btn-success btnSimpan" value="Simpan"/> <span class="btn btn-danger btnBatal">Batal</span>
		</form>
		<br/>
	</div>
</div>

<h2>Data Obat</h2>
<br/>
<div>
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<button class="btn btn-primary btn-icon-split btnTambah">
				<span class="icon text-white-50">
					<i class="fas fa-plus"></i>
				</span>
				<span class="text">Tambah</span>
			</button>
		</div>
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
					<thead>
						<tr>
							<th>Nama Obat</th>
							<th>Kategori</th>
							<th>Generic</th>
							<th>Satuan Kecil</th>
							<th>Satuan Besar</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.nama}}</td>
							<td>{{row.kategori}}</td>
							<td>{{row.generic}}</td>
							<td>{{row.kecil}}</td>
							<td>{{row.besar}}</td>
							<td>
								<button class="btn btn-default text-info btnUbah" id_obat="{{row.id}}"><i class="far fa-edit"></i></button>
								<button onclick="cekUsed({{row.id}})" class="btn btn-default text-danger"><i class="far fa-trash-alt"></i></button>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>
	</div>
	</br></br>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/infomodal.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mData","smDataObat");
		$('.btnTambah').on("click", function(){
			$("#id_obat").val("");
			$('#infoModal').show();
			$('#modal-title').html('Tambah Obat');
			$('#nama').val('');
			$('#kode').val('');
			$('#konversi').val('');
			$('#keterangan').val('');
			$('#kandungan').val('');
			$('#khasiat').val('');
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		
	});
	function refreshEvent() {
		$('.btnUbah').on("click", function(){
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			
			var id_obat = $(this).attr('id_obat');
			$("#id_obat").val(id_obat);
			$.ajax({
				type: "GET",
				url: "{% nav apotek_obat_getobat %}?id="+id_obat,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#nama').val(data.nama);
					$('#kode').val(data.kode);
					$('#id_kategori').val(data.id_kategori);
					$('#id_generic').val(data.id_generic);
					$('#id_satuan_kecil').val(data.id_satuan_kecil);
					$('#id_satuan_besar').val(data.id_satuan_besar);
					$('#keterangan').val(data.keterangan);
					$('#kandungan').val(data.kandungan);
					$('#khasiat').val(data.khasiat);
					$('#konversi').val(data.konversi);
					$('#modal-title').html('Edit Obat');
					$('.imodal-content').show();
				}
			});
		});
	}
	function cekUsed(id) {
		$.ajax({
			type: "GET",
			url: "{% nav apotek_obat_getused %}?id="+id,
			dataType: "json",
			async: true,
			cache: false,
			timeout:50000,
			success: function(data){
				if (data > 0) {
					alert("Obat ini tidak bisa dihapus karena sudah terdata di obat masuk/keluar");
				} else {
					if (confirm("Apakah anda yakin ingin menghapus Obat ini?")) {
						location.href = "{% nav apotek_obat_remobat %}/"+id;
					}
				}
			}
		});
	}
</script>
{% endblock %}