{% 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 Masuk</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_masuk" name="id_masuk" value=""/>
			<table cellpadding="5" cellspacing="0" border="0" style="width:100%">
				<tr>
					<td style="width:150px">Tanggal</td>
					<td><input class="form-control" type="text" name="tgl" id="tgl" value="{{tgl}}" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Nama Obat</td>
					<td>
						<select class="select-search" type="text" name="id_obat" id="id_obat" value="" style="width:500px">
							{% for o in obat %}
							<option value="{{o.id}}" kecil="{{o.kecil}}">{{o.nama}}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="width:150px">Pemasok</td>
					<td>
						<select class="select-search" type="text" name="id_pemasok" id="id_pemasok" value="" style="width:250px">
							<option value="0">-- tidak ada --</option>
							{% for p in pemasok %}
							<option value="{{ p.id }}">{{ p.nama }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="width:150px">Jumlah</td>
					<td><input class="form-control satuan" type="text" name="jumlah" id="jumlah" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Harga Beli</td>
					<td><input class="form-control perSatuan" type="text" name="harga_beli" id="harga_beli" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Harga Jual</td>
					<td><input class="form-control perSatuan" type="text" name="harga_jual" id="harga_jual" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Expired Date</td>
					<td><input class="form-control" type="text" name="exp" id="exp" value="{{tgl}}" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Keterangan</td>
					<td><textarea class="form-control" type="text" name="keterangan" id="keterangan" 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>Obat Masuk</h2>
<br>
<form style="padding-left:10px">
	<select id="bulan" class="select-month" name="bulan" tabindex="-1">
		<option value="00" >--semua--</option>
		<option value="01" >Januari</option>
		<option value="02" >Februari</option>
		<option value="03" >Maret</option>
		<option value="04" >April</option>
		<option value="05" >Mei</option>
		<option value="06" >Juni</option>
		<option value="07" >Juli</option>
		<option value="08" >Agustus</option>
		<option value="09" >September</option>
		<option value="10" >Oktober</option>
		<option value="11" >Nopember</option>
		<option value="12" >Desember</option>
	</select>
	<select id="tahun" name="tahun" tabindex="-1">
		{% for t in listTahun %}
		<option value="{{t.tahun}}">{{t.tahun}}</option>
		{% endfor %}
	</select>
	<button class="btn btn-secondary">
		<span class="text">Lihat</span>
	</button>
</form>
<br>
<div>
	<div class="card shadow mb-4">
		<div class="card-header py-3">
			<div class="row">
				<div class="col" style="display:flex;align-items:center">
					<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="col" style="display:flex;justify-content:end">
					<a href="" class="linkxls btn btn-success"><i class="fas fa-file-excel"></i></a>
				</div>
			</div>
		</div>
		<div class="card-body">
			<div class="table-responsive">
				<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
					<thead>
						<tr>
							<th>Tanggal</th>
							<th>Rincian</th>
							<th>Pemasok</th>
							<th>Jumlah</th>
							<th>Harga Beli</th>
							<th>Harga Jual</th>
							<th>ED</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.tgl}}</td>
							<td>
								<b>Nama Obat :</b> {{row.obat.0.nama}}<br>
								<b>Kategori :</b> {{row.obat.0.kategori}}<br>
								<b>Satuan Kecil :</b> {{row.obat.0.kecil}}<br>
							</td>
							<td>{{row.pemasok}}</td>
							<td>{{row.jumlah}}</td>
							<td>{{row.harga_beli}}</td>
							<td>{{row.harga_jual}}</td>
							<td>{{row.exp}}</td>
							<td>
								<button class="btn btn-default text-info btnUbah" id_masuk="{{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_remmasuk %}/{{ 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>
	$(document).ready(function () {
		menuSelected("mInventory","smObatMasuk");
		$("#tgl, #exp").datepicker({
			format: "DD-MM-YYYY"
		});
		$('.select-search').select2();
		$("#id_obat")[0].selectedIndex = 0;
		$('.btnTambah').on("click", function(){
			$('#modal-title').html('Tambah Obat Masuk');
			$("#id_masuk").val('');
			$("#tgl").val('{{tgl}}');
			$('#id_pemasok').val(0);
			$('#jumlah').val('');
			$('#harga_beli').val('');
			$('#harga_jual').val('');
			$("#exp").val('{{tgl}}');
			$('#keterangan').val('');
			$('#id_obat').trigger('change');
			$('#infoModal').show();
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		$("#id_obat").on("change",function() {
			var s = $('option:selected', this).attr('kecil');
			$('.satuan').attr('placeholder', s);
			$('.perSatuan').attr('placeholder', 'per '+s);
		});
		var m = "{{time}}";
		const arr = m.split("-");
		$('#bulan').val(arr[1]);
		$('#tahun').val(arr[0]);
		$('.linkxls').attr('href','{% nav apotek_obat_masuk %}?bulan='+arr[1]+'&tahun='+arr[0]+'&xls=y');
	});
	function refreshEvent() {
		$('.btnUbah').on("click", function(){
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			
			var id_masuk = $(this).attr('id_masuk');
			$("#id_masuk").val(id_masuk);
			$.ajax({
				type: "GET",
				url: "{% nav apotek_obat_getmasuk %}?id="+id_masuk,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#id_masuk').val(data.id);
					$('#tgl').val(data.tgl);
					$('#id_obat').val(data.id_obat).trigger('change');
					$('#id_pemasok').val(data.id_pemasok).trigger('change');
					$('#jumlah').val(data.jumlah);
					$('#harga_beli').val(data.harga_beli);
					$('#harga_jual').val(data.harga_jual);
					$('#exp').val(data.exp);
					$('#keterangan').val(data.keterangan);
					$('#modal-title').html('Edit Obat');
					$('.imodal-content').show();
				}
			});
		});
	}
</script>
{% endblock %}