{% 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">Pembayaran 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">No. Faktur</td>
					<td><input class="form-control" type="text" name="no_transaksi" id="no_transaksi" value="" style="max-width:250px"></td>
				</tr>
				<tr>
					<td style="width:150px">Pemasok</td>
					<td>
						<select class="select-search" type="text" name="id_pemasok" id="id_pemasok" value="">
							{% for p in pemasok %}
							<option value="{{ p.id }}">{{ p.nama }}</option>
							{% endfor %}
						</select>
					</td>
				</tr>
			</table>
			<br>
			<div class="container_table card mb-4"></div>
			<br>
			<table cellpadding="5" cellspacing="0" border="0" style="width:100%">
				<tr>
					<td style="width:150px">Total Tagihan</td>
					<td><input class="form-control" type="text" name="nominal" id="nominal" value="" style="max-width:250px"></td>
				</tr>
			</table>
			<table cellpadding="5" cellspacing="0" border="0">
				<thead>
					<tr>
						<th style="width:50px"></th>
						<th style="width:200px">Tanggal</th>
						<th style="width:200px">Faktur</th>
						<th style="width:200px">Bayar</th>
					</tr>
				</thead>
				<tbody id="table-data">
					<tr class="pembayaran-master">
						<td>
							<div class="plus btn btn-success"><i class="fas fa-plus"></i></div>
							<div class="minus btn btn-danger" style="display:none"><i class="fas fa-minus"></i></div>
							<input type="hidden" class="idt" name="idt[]" value=""/>
						</td>
						<td><input class="form-control tgl" type="text" name="tgl[]" value="{{tgl}}"></input></td>
						<td><input class="form-control faktur" type="text" name="faktur[]" value=""></input></td>
						<td><input class="form-control bayar" type="text" name="bayar[]" value=""></input></td>
					</tr>
				</tbody>
			</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>Pembayaran Pemasok</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>Tanggal</th>
							<th>Nomor</th>
							<th>Pemasok</th>
							<th>Tagihan</th>
							<th>Dibayar</th>
							<th>Kurang</th>
							<th>Control</th>
						</tr>
					</thead>
					<tbody>
						{% for row in data %}
						<tr>
							<td>{{row.tgl}}</td>
							<td>{{row.no_transaksi}}</td>
							<td>{{row.pemasok}}</td>
							<td>{{row.nominal}}</td>
							<td>{{row.bayar}}</td>
							<td>{{row.kurang}}</td>
							<td>
								<button class="btn btn-default text-info btnUbah" id_transaksi="{{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_rempembayaran %}/{{ 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" src="{% nav public %}js/glDatePicker.min.js"></script>
<script>
	$(document).ready(function () {
		menuSelected("mInventory","smPembayaranPemasok");
		$(".tgl").datepicker({
			format: "DD-MM-YYYY"
		});
		$('.select-search').select2();
		$('.btnTambah').on("click", function(){
			$(".clone").each(function() {
				$(this).remove();
			});
			$('#modal-title').html('Tambah Pembayaran Baru');
			$("#id_transaksi").val('');
			$("#no_transaksi").val('');
			$(".jenis").val('baru');
			$(".tgl").val('{{tgl}}');
			$('#id_pemasok').trigger('change');
			$('#nominal').val('');
			$('.bayar').val('');
			$('#infoModal').show();
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
		$("#id_pemasok").on("change",function() {
			$('.container_table').load("{% nav apotek_obat_loadlistmasuk %}?id="+$(this).val()+"&idt="+$('#id_transaksi').val());
			$('#nominal').val(0);
		});
		$('#table-data').on('click', '.plus', function() {
			var $clone = $(this).closest('.pembayaran-master').clone();
			$clone.find('.plus').hide();
			$clone.find('.minus').show();
			$clone.find('.idt').val('');
			$clone.find('.tgl').datepicker({
				format: "DD-MM-YYYY"
			});;
			$clone.find('.bayar').val('');
			$clone.addClass('clone');
			$('#table-data').append($clone);
		});
		$(".minus").on("click",function() {
			$(this).parent().parent().remove();
			<!-- hitungTotal(); -->
		});
	});
	function refreshEvent() {
		$('.btnUbah').on("click", function(){
			$(".clone").each(function() {
				$(this).remove();
			});
			$('.imodal-content').hide();
			$('#infoModal').show();
			$('#modal-title').html('Sedang memproses...');
			
			var id_transaksi = $(this).attr('id_transaksi');
			$("#id_transaksi").val(id_transaksi);
			$.ajax({
				type: "GET",
				url: "{% nav apotek_obat_getpembayaran %}?id="+id_transaksi,
				dataType: "json",
				async: true,
				cache: false,
				timeout:50000,
				success: function(data){
					$('.idt').val(id_transaksi);
					$('.tgl').val(data.tgl);
					$('.no_transaksi').val(data.no_transaksi);
					$('.faktur').val(data.no_transaksi);
					$('#nominal').val(data.nominal);
					$('.bayar').val(data.bayar);
					$.each(data.cicilan,function(k,d){
						var $clone = $('.pembayaran-master').clone();
						$clone.find('.plus').hide();
						$clone.find('.minus').show();
						$clone.find('.idt').val(d.id);
						$clone.find('.tgl').val(d.tgl);
						$clone.find('.faktur').show();
						$clone.find('.faktur').val(d.no_transaksi);
						$clone.find('.bayar').val(d.bayar);
						$clone.addClass('clone');
						$clone.removeClass('pembayaran-master');
						$('#table-data').append($clone);
					})
					$('.tgl').datepicker({
						format: "DD-MM-YYYY"
					});;
					$('#no_transaksi').val(data.no_transaksi);
					$('#id_pemasok').val(data.id_sumber).trigger('change');
					$('#nominal').val(data.nominal);
					$('#modal-title').html('Update Pembayaran');
					$('.imodal-content').show();
				}
			});
		});
	}
</script>
{% endblock %}