{% 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 Satuan</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_satuan" name="id_satuan" value=""/>
			<table cellpadding="5" cellspacing="0" border="0">
				<tr>
					<td style="max-width:150px">Nama Satuan</td>
					<td><input class="form-control" type="text" name="nama" id="nama" value="" style="max-width:200px"></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:200px"></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>Satuan 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 Satuan</th>
							<th>Kode</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.nama}}</td>
							<td>{{row.kode}}</td>
							<td>
								<button class="btn btn-default text-info btnUbah" id_satuan="{{row.id}}"><i class="far fa-edit"></i></button>
								<a onclick="return confirm('Apakah Anda Yakin Ingin Menghapus Data Ini ?');" class="btn btn-default text-danger" href="{% nav apotek_obat_remsatuan %}/{{ row.id }}"><i class="far fa-trash-alt"></i></a>
							</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","smSatuanObat");
		$('.btnTambah').on("click", function(){
			$("#id_satuan").val("");
			$('#infoModal').show();
			$('#modal-title').html('Tambah Satuan');
			$('#kode').val('');
			$('#nama').val('');
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		refreshEvent();
	});
	function refreshEvent() {
		$('.btnUbah').on("click", function(){
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			
			var id_satuan = $(this).attr('id_satuan');
			$("#id_satuan").val(id_satuan);
			$.ajax({
				type: "GET",
				url: "{% nav apotek_obat_getsatuan %}?id="+id_satuan,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#nama').val(data.nama);
					$('#kode').val(data.kode);
					$('#modal-title').html('Edit Satuan');
					$('.imodal-content').show();
				}
			});
		});
	}
</script>
{% endblock %}