{% 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 Keluar</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_keluar" name="id_keluar" value=""/>
			<table cellpadding="5" cellspacing="0" border="0" style="width:100%">
				<tr>
					<td style="width:150px;position:absolute">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">Stock Obat</td>
					<td>
						<select class="select-search" type="text" name="id_obat" id="id_obat" value="" style="width:500px">
							{% for o in obat %}
							{% if o.jumlah > 0 %}
							<option value="{{o.id_obat}}">{{o.nama}} [{{o.jumlah}}]</option>
							{% endif %}
							{% endfor %}
						</select>
					</td>
				</tr>
				<tr>
					<td style="width:150px">Alasan</td>
					<td>
						<select type="text" name="sumber" id="sumber" value="" style="max-width:250px">
							<option value="expired">Expired</option>
							<option value="rusak">Rusak</option>
							<option value="retur">Retur</option>
							<option value="hilang">Hilang</option>
						</select>
					</td>
				</tr>
				<tr>
					<td style="width:150px">Jumlah</td>
					<td><input class="form-control" type="text" name="jumlah" id="jumlah" value="" 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 Keluar</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>Nama</th>
							<th>Alasan</th>
							<th>Jumlah</th>
							<th>Keterangan</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.tgl}}</td>
							<td>{{row.nama}}</td>
							<td>{{row.sumber}}</td>
							<td>{{row.jumlah}}</td>
							<td>{{row.keterangan}}</td>
							<td>
								{% if row.sumber != 'transaksi' %}
								<button class="btn btn-default text-info btnUbah" id_keluar="{{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_remkeluar %}/{{ row.id }}"><i class="far fa-trash-alt"></i></a>
								{% endif %}
							</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","smObatKeluar");
		$("#tgl").datepicker({
			format: "DD-MM-YYYY"
		});
		$('.select-search').select2();
		$('.btnTambah').on("click", function(){
			$('#modal-title').html('Tambah Obat Keluar');
			$("#id_keluar").val('');
			$("#tgl").val('{{tgl}}');
			<!-- $("#id_obat").val(1); -->
			$('#sumber').val("expired");
			$('#jumlah').val('');
			$('#keterangan').val('');
			$('#infoModal').show();
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		var m = "{{time}}";
		const arr = m.split("-");
		$('#bulan').val(arr[1]);
		$('#tahun').val(arr[0]);
		$('.linkxls').attr('href','{% nav apotek_obat_keluar %}?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_keluar = $(this).attr('id_keluar');
			$("#id_keluar").val(id_keluar);
			$.ajax({
				type: "GET",
				url: "{% nav apotek_obat_getkeluar %}?id="+id_keluar,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('#id_keluar').val(data.id);
					$('#tgl').val(data.tgl);
					$('#id_obat').val(data.id_obat).trigger('change');
					$('#jumlah').val(data.jumlah);
					$('#sumber').val(data.sumber);
					$('#keterangan').val(data.keterangan);
					$('#modal-title').html('Edit Obat');
					$('.imodal-content').show();
				}
			});
		});
	}
</script>
{% endblock %}