{% extends '../template.html' %}
{% block subcontent %}

<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
	<h1 class="h3 mb-4 text-gray-800">Dashboard</h1>
</div>

<!-- Content Row -->
<div class="row">

	<!-- Earnings (Monthly) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="{% nav apotek_obat_obat %}" class="btn card border-left-primary shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-tablets fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
							Jenis Obat</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">{{ data.jumlahObat }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Earnings (Monthly) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="#" class="btn card border-left-success shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
							Penjualan Bulan Ini</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ data.penjualanBulan | currency }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Earnings (Daily) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="{% nav apotek_obat_penjualan %}" class="btn card border-left-success shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
							Penjualan Hari Ini</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ data.penjualanHari | currency }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Pending Requests Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="{% nav apotek_obat_stock %}" class="btn card border-left-warning shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-comments fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
							Stock Menipis</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">{{ data.stockMenipis }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>
	
	<!-- Earnings (Monthly) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="{% nav apotek_obat_pembayaran %}" class="btn card border-left-primary shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-calendar fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
							Hutang Belanja</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ data.hutangBelanja | currency }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Earnings (Monthly) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="#" class="btn card border-left-success shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-hourglass fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
							Hampir Expired</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">0</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Earnings (Monthly) Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="#" class="btn card border-left-success shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-receipt fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
							Belanja bulan ini</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">Rp {{ data.belanjaBulan | currency }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>

	<!-- Pending Requests Card Example -->
	<div class="col-xl-3 col-md-6 mb-4">
		<a href="{% nav apotek_obat_stock %}" class="btn card border-left-warning shadow h-100 py-2">
			<div class="card-body">
				<div class="row no-gutters align-items-center">
					<div class="col-auto">
						<i class="fas fa-times fa-2x text-gray-300"></i>
					</div>
					<div class="col mr-2">
						<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
							Stock Habis</div>
						<div class="h5 mb-0 font-weight-bold text-gray-800">{{ data.stockHabis }}</div>
					</div>
				</div>
			</div>
		</a>
	</div>
</div>
{% endblock %}
{% block script %}
<script type="text/javascript" src="{% nav public %}js/glDatePicker.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		menuSelected("mHome");
	});
	function refreshEvent() {
		
	}
</script>
{% endblock %}