{% 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">Detail penjualan</h2>
		<br/>
		
		<br/>
	</div>
</div>

<h2>Data Penjualan</h2>
<br>
<form  class="card shadow mb-4">
	<div class="card-header py-3">
		<span class="text">Filter Pencarian</span>
	</div>
	<div class="card-body">
		<div class="row">
			<div class="col-xl-4 col-md-6 col-sm-12 mb-4">
				<table>
					<tr>
						<td style="width:60px">Dari</td>
						<td><input class="form-control" type="text" id="tgl_awal" name="tgl_awal" value="{{awal}}"></td>
					</tr>
				</table>
			</div>
			<div class="col-xl-4 col-md-6 col-sm-12 mb-4">
				<table>
					<tr>
						<td style="width:60px">Sampai</td>
						<td><input class="form-control" type="text" id="tgl_akhir" name="tgl_akhir" value="{{akhir}}"></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<button class="btn btn-secondary">
					<span class="text">Lihat</span>
				</button>
			</div>
		</div>
	</div>
</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">
					<span class="text totalPenjualan">Total Penjualan : Rp {{total | currency}}</span>
				</div>
				<div class="col" style="display:flex;justify-content:end">
					<a href="{% nav apotek_obat_datapenjualan %}?tgl_awal={{awal}}&tgl_akhir={{akhir}}&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>Harga</th>
							<th>Jumlah</th>
							<th>Diskon</th>
							<th>Total</th>
						</tr>
					</thead>
					<tbody>
						{% for d in data %}
						<tr>
							<td>{{d.tgl}}</td>
							<td>{{d.no_transaksi}}</td>
							<td>{{d.nama}}</td>
							<td style="text-align:right">{{d.harga | currency}}</td>
							<td>{{d.jumlah}}</td>
							<td style="text-align:right">
							{% if d.tipe_diskon == 1 %}
								{{d.diskon}}%
							{% else %}
								{{d.diskon | currency}}
							{% endif %}
							</td>
							<td class="total" style="text-align:right">{{d.total | currency}}</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("mPenjualan","smDataPenjualan");
		$("#tgl_awal,#tgl_akhir").datepicker({
			format: "DD-MM-YYYY"
		});
		$('#dataTable2').DataTable( {
			fixedHeader: true,
			"columns": [
				{ "width": "80px" },
				{ "width": "80px" },
				null,
				{ "width": "50px" },
				{ "width": "50px" },
				{ "width": "50px" },
				{ "width": "70px" }
			]
		});
		$(".btnBatal").on("click",function() {
			$("#infoModal").hide();
		});
	});
	function refreshEvent() {
		
	}
</script>
{% endblock %}