{% 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" style="max-width:1000px;min-width:600px">
		<span class="close">&times;</span>
		<h2 id="modal-title">Penjualan Baru</h2>
		<br/>
		<form method="post">
			<input type="hidden" id="id_transaksi" name="id_transaksi" 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:150px"></td>
					<td style="width:100px">Nomor</td>
					<td><input class="form-control" type="text" name="nomor" id="nomor" value="{{no_transaksi}}" style="max-width:150px"></td>
				</tr>
			</table>
			<br>
			<table cellpadding="5" cellspacing="0" border="0" class="card mb-4">
				<thead>
					<tr>
						<th style="width:50px"></th>
						<th style="width:400px;text-align:center">Obat</th>
						<th style="width:80px;text-align:center">Jumlah</th>
						<th style="width:100px;text-align:right">Harga</th>
						<th style="width:80px;text-align:center">Diskon</th>
						<th style="width:80px"></th>
						<th style="width:100px;text-align:right">Sub Total</th>
					</tr>
				</thead>
				<tbody id="table-data">
					
				</tbody>
				<thead>
					<tr>
						<td style="width:50px"></td>
						<td colspan=6><div class="plus btn btn-success"><i class="fas fa-plus"></i>&nbsp;&nbsp;Tambah</div></td>
					</tr>
				</thead>
			</table>
			<div class="row">
				<div class="col-lg-6">
					<table cellpadding="5" cellspacing="0" border="0">
						<tr>
							<td style="width:150px">
								Total
							</td>
							<td style="width:150px">
								<label class="form-control total" style="text-align:right"></label>
							</td>
							<td></td>
						</tr>
						<tr>
							<td>Diskon</td>
							<td><input class="form-control diskon2" type="text" name="diskon2" value="" style="text-align:right"></td>
							<td align="left">
								<select class="tipeDiskon2" name="tipeDiskon2" value="">
									<option value=2>Rp</option>
									<option value=1>%</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>Total Akhir</td>
							<td>
								<label class="form-control total2" type="text" style="text-align:right"></label>
								<input class="form-control nominal" type="text" name="total2" value="" style="display:none">
							</td>
							<td></td>
						</tr>
					</table>
				</div>
				<div class="col-lg-6">
					<table cellpadding="5" cellspacing="0" border="0">
						<tr>
							<td style="width:150px">
								Dibayar
							</td>
							<td style="width:150px">
								<input class="form-control bayar" type="text" name="bayar" value="" style="text-align:right">
							</td>
						</tr>
						<tr>
							<td>Cara Bayar</td>
							<td>
								<select class="jenisPembayaran" name="jenisPembayaran" value="">
									<option value=3>Cash</option>
									<option value=5>Transfer Mandiri</option>
									<option value=6>Transfer BCA</option>
									<option value=46>QRIS</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>Kembali</td>
							<td><label class="form-control kembali" type="text" style="text-align:right"></td>
						</tr>
					</table>
				</div>
			</div>
			<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>
<table style="display:none">
	<tr class="obat-master">
		<td style="width:50px">
			<div class="minus btn btn-danger" style="display:none"><i class="fas fa-minus"></i></div>
		</td>
		<td style="width:400px">
			<select class="listObat" name="listObat[]" style="width:100%">
				{% for o in obat %}
				<option harga="{{o.harga}}" value="{{o.id_obat}};{{o.harga}}">{{ o.nama | safe}} [{{o.jumlah}}]</option>
				{% endfor %}
			</select>
		</td>
		<td style="width:80px"><input class="jumlah" type="text" name="jumlah[]" value="1" style="width:100%;text-align:center"></input></td>
		<td style="width:100px"><label class="subTotal" type="text" style="margin:0px;width:100%;text-align:right"></label></td>
		<td style="width:80px">
			<input class="diskon" type="text" name="diskon[]" value="" style="width:100%;text-align:center"></input>
		</td>
		<td style="width:80px">
			<select class="tipeDiskon" name="tipeDiskon[]" value="">
				<option value=2>Rp</option>
				<option value=1>%</option>
			</select>
		</td>
		<td style="width:100px"><label class="subTotal2" type="text" style="margin:0px;width:100%;text-align:right"></label></td>
	</tr>
</table>

<h2>Penjualan Obat</h2>
<br>
<table>
	<tr>
		<td style="width:80px">Tanggal</td>
		<td><input class="form-control" type="text" id="date_picker" value="{{tgl_picker}}" style="width:150px"></td>
	</tr>
	<tr>
		<td style="width:80px;height:50px">Total</td>
		<td>: Rp {{ total | currency }}</td>
	</tr>
</table>
<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="{% nav apotek_obat_penjualan %}?tgl={{tgl_picker}}&xls=y" class="btn btn-success linkxls"><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="dataTable2" width="100%" cellspacing="0">
					<thead>
						<tr>
							<th>Tanggal</th>
							<th>Faktur</th>
							<th>Obat</th>
							<th>Diskon</th>
							<th>Total</th>
							<th>Pembayaran</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.tgl}} {{row.jam}}</td>
							<td>{{row.no_transaksi}}</td>
							<td>
								{% for row2 in row.obat %}
								<p>{{row2.nama}} [{{row2.jumlah}}x{{row2.harga}}{%if row2.diskon > 0%} - disc. {{row2.diskon}}{%if row2.tipe_diskon == 1%}%{%endif%}{%endif%}]</p>
								{% endfor %}
							</td>
							<td style="text-align:right">{{row.diskon | currency}}{%if row.tipe_diskon == 1%}%{%endif%}</td>
							<td style="text-align:right">{{row.total | currency}}</td>
							<td style="text-align:right">{{row.jenisPembayaran}}</td>
							<td>
								<!-- <button class="btn btn-default text-info btnUbah" id_transaksi="{{row.id}}"><i class="far fa-edit"></i></button> -->
								<button class="btn btn-default text-secondary btnPrint" id_transaksi="{{row.id}}"><i class="fas fa-print"></i></button>
								<button class="btn btn-default text-danger btnDelete" id_transaksi="{{row.id}}"><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" src="{% nav public %}js/glDatePicker.min.js"></script>
<script>
	$(document).ready(function () {
		menuSelected("mPenjualan","smPenjualanObat");
		$("#tgl").datepicker({
			format: "DD-MM-YYYY"
		});
		$("#date_picker").datepicker({
			format: "DD-MM-YYYY"
		}).on('changeDate', function(){
			location.href = "{% nav apotek_obat_penjualan %}?tgl="+$(this).datepicker('getAsText');
		});
		$('#dataTable2').DataTable( {
			fixedHeader: true,
			"columns": [
				{ "width": "80px" },
				{ "width": "60px" },
				null,
				null,
				null,
				null,
				{ "width": "70px" }
			]
		});
		$('.btnTambah').on("click", function(){
			$(".clone").each(function() {
				$(this).remove();
			});
			$('#modal-title').html('Tambah Pembayaran Baru');
			$("#id_transaksi").val('');
			$("#no_transaksi").val('{{no_transaksi}}');
			$(".bayar").val('');
			$(".kembali").text('');
			$("#tgl").val('{{tgl}}');
			$('.diskon2').val('');
			$('.tipeDiskon2').val(2);
			$('.jenisPembayaran').val(3);
			$('#infoModal').show();
			tambahObat();
			hitungTotal();
		});
		$(".btnSimpan").on("click",function() {
			
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		$(".plus").on("click",function() {
			tambahObat();
		});
		$(".minus").on("click",function() {
			$(this).parent().parent().remove();
			hitungTotal();
		});
		$(".listObat").on("select2:close",function() {
			$parent = $(this).parent().parent();
			$parent.find('.jumlah').keyup().focus().select();
		});
		$(".diskon").on("keyup",function() {
			$parent = $(this).parent().parent();
			$parent.find('.jumlah').keyup();
		});
		$(".tipeDiskon").on("change",function() {
			$parent = $(this).parent().parent();
			$parent.find('.jumlah').keyup();
		});
		$(".diskon2").on("keyup",function() {
			hitungTotal();
		});
		$(".bayar").on("keyup",function() {
			kembali = $(this).val().replace(/[^,\d]/g, '')*1 - $(".nominal").val();
			$(".kembali").text(kembali.formatMoney(0,',','.'));
			currency($(this).get(0));
		});
		$(".tipeDiskon2").on("change",function() {
			hitungTotal();
		});
		$(".jumlah").on("keyup",function() {
			$parent = $(this).parent().parent();
			jml =  $(this).val();
			total = jml * $parent.find('select').val().split(';')[1];
			formatTotal = parseInt(total).formatMoney(0,',','.');
			$parent.find('.subTotal').text(formatTotal);
			if ($parent.find('.tipeDiskon').val() == 1) {
				total2 = total - total*$parent.find('.diskon').val()/100;
			} else {
				total2 = total - $parent.find('.diskon').val();
			}
			formatTotal2 = parseInt(total2).formatMoney(0,',','.');
			$parent.find('.subTotal2').text(formatTotal2);
			hitungTotal();
		});
		$('#dataTable2').on( 'draw.dt', function () {
			refreshEvent();
		});
	});
	function refreshEvent() {
		$('.btnPrint').on('click',function() {
			$('#print').load("{% nav apotek_obat_strukpenjualan %}?idt="+$(this).attr('id_transaksi'),function(){window.print()});
			<!-- window.open("{% nav apotek_obat_strukpenjualan %}?idt="+$(this).attr('id_transaksi'),"struk"); -->
		});
		$('.btnDelete').on('click',function() {
			if (confirm('Hapus data ini?')) {
				$.ajax({
					type: "GET",
					url: "{% nav apotek_obat_rempenjualan %}?id="+$(this).attr('id_transaksi'),
					dataType: "json",
					success: function (data) {
						alert(data);
						location.reload();
					}
				});
			}			
		});
	}
	function hitungTotal() {
		var total = 0;
		var total2 = 0;
		$('.subTotal2').each(function() {
			total += $(this).text().replace(/[^,\d]/g, '')*1;
		});
		$('.total').text(total.formatMoney(0,',','.'));
		if ($('.tipeDiskon2').val() == 1) {
			total2 = total - total*$('.diskon2').val()/100;
		} else {
			total2 = total - $('.diskon2').val();
		}
		$('.nominal').val(total2);
		$('.total2').text(total2.formatMoney(0,',','.'));
	}
	function tambahObat(data) {
		if (!data) {
			var d = {
				id_obat: '{{obat.0.id_obat}};{{obat.0.harga}}',
				jumlah: 1,
				diskon: '',
				tipe_diskon: 2
			};
		} else {
			var d = data;
			d['id_obat'] = data['id_obat'] + data['harga']
		}
		var c = $('.listObat').length;
		$clone = $('.obat-master').clone(true);
		$clone.removeClass('obat-master').addClass('clone');
		if (c > 1) {
			$clone.find('.minus').show();
		}
		$clone.find('.jumlah').val(d['jumlah']);
		$clone.find('.diskon').val(d['diskon']);
		$clone.find('.tipeDiskon').val(d['tipe_diskon']);
		$clone.find('.listObat').addClass('obat'+c);
		$clone.find('.listObat').val(d['id_obat']);
		$clone.find('.jumlah').keyup();
		$('#table-data').append($clone);
		$('.obat'+c).select2();
	}
	function currency(angka){
		var number_string = angka.value.replace(/[^,\d]/g, '').toString(),
		split   		= number_string.split(','),
		sisa     		= split[0].length % 3,
		rupiah     		= split[0].substr(0, sisa),
		ribuan     		= split[0].substr(sisa).match(/\d{3}/gi);

		if(ribuan){
			separator = sisa ? '.' : '';
			rupiah += separator + ribuan.join('.');
		}
		if(split[1] != undefined){
			if(split[1].length > 2){
				split[1] = '0.'+split[1];
				split[1] = parseFloat(split[1]).toFixed(2);
				split[1] = split[1].toString().substr(2);
			}
		}

		rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
		angka.value = rupiah;
	}
</script>
{% endblock %}