{% load humanize %}
<!--begin::List widget 26-->
<div class="card card-flush dashbord-card n-card" style="display:none;">
	<!--begin::Header-->
	<div class="card-header">
		<!--begin::Title-->
		<h3 class="card-title text-gray-800 fw-bold">Invoices</h3>
		<!--end::Title-->
		<!--begin::Toolbar-->
		<div class="card-toolbar">
			<!--begin::Menu-->
			<button class="btn btn-icon btn-color-gray-400 btn-active-color-primary justify-content-end" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-overflow="true">{% getIcon 'dots-square' 'fs-1 text-gray-400 me-n1' %}</button>
			<!--begin::Menu 2-->
			<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semibold w-200px" data-kt-menu="true">
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<div class="menu-content fs-6 text-dark fw-bold px-3 py-4">Quick Actions</div>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu separator-->
				<div class="separator mb-3 opacity-75"></div>
				<!--end::Menu separator-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Ticket</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Customer</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">
					<!--begin::Menu item-->
					<a href="#" class="menu-link px-3">
						<span class="menu-title">New Group</span>
						<span class="menu-arrow"></span>
					</a>
					<!--end::Menu item-->
					<!--begin::Menu sub-->
					<div class="menu-sub menu-sub-dropdown w-175px py-4">
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Admin Group</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Staff Group</a>
						</div>
						<!--end::Menu item-->
						<!--begin::Menu item-->
						<div class="menu-item px-3">
							<a href="#" class="menu-link px-3">Member Group</a>
						</div>
						<!--end::Menu item-->
					</div>
					<!--end::Menu sub-->
				</div>
				<!--end::Menu item-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<a href="#" class="menu-link px-3">New Contact</a>
				</div>
				<!--end::Menu item-->
				<!--begin::Menu separator-->
				<div class="separator mt-3 opacity-75"></div>
				<!--end::Menu separator-->
				<!--begin::Menu item-->
				<div class="menu-item px-3">
					<div class="menu-content px-3 py-3">
						<a class="btn btn-primary btn-sm px-4" href="#">Generate Reports</a>
					</div>
				</div>
				<!--end::Menu item-->
			</div>
			<!--end::Menu 2-->
			<!--end::Menu-->
		</div>
		<!--end::Toolbar-->
	</div>
	<!--end::Header-->
	<!--begin::Body-->
	<div class="card-body pt-5">
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Section-->
			<a href="#" class="text-primary fw-semibold fs-6 me-2">Total Invoiced Amount for the {% now "F Y" %}</a>
			<!--end::Section-->
			<!--begin::Action-->
			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">${{invoiceAmountMonth}}</button>
		
			<!--end::Action-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-3"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Section-->
			<a href="#" class="text-primary fw-semibold fs-6 me-2">Paid Invoices</a>
			<!--end::Section-->
			<!--begin::Action-->
			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">${{ total_paid }}</button>
			<!--end::Action-->
		</div>
		<!--end::Item-->
		<!--begin::Separator-->
		<div class="separator separator-dashed my-3"></div>
		<!--end::Separator-->
		<!--begin::Item-->
		<div class="d-flex flex-stack">
			<!--begin::Section-->
			<a href="#" class="text-primary fw-semibold fs-6 me-2">Total Outstanding</a>
			<!--end::Section-->
			<!--begin::Action-->
			<button type="button" class="btn btn-icon btn-sm h-auto btn-color-gray-400 btn-active-color-primary justify-content-end">${{ total_amount_due }}</button>
			<!--end::Action-->
		</div>
		<!--end::Item-->
	</div>
	<!--end::Body-->
</div>
<!--end::LIst widget 26-->
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 mb-3 mb-xl-3 h-md-100">
<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end mb-xl-1 dashboard-card" style="background-color:#003c83;">
	<div class="card-header pt-5">
		<div class="card-title d-flex flex-column">
			<span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2 mt-3">${{ invoiceAmountMonth|floatformat:2|intcomma}}</span>
			<span class="text-white opacity-75 pt-2 fw-semibold fs-6 mb-10">Total Invoiced Amount for {% now "M Y" %}</span>
			<div class="table-responsive cust-table mt-2 prod-table">
			    
			</div>
            
		</div>
	</div>

</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 mb-3 mb-xl-3 h-md-100">
<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end  mb-xl-1 dashboard-card" style="background-color: #008d2a;">
	<div class="card-header pt-5">
		<div class="card-title d-flex flex-column">
			<span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2 mt-3">${{  total_paid|floatformat:2|intcomma }}</span>
			<span class="text-white opacity-75 pt-2 fw-semibold fs-6 mb-10">Paid Invoices (Jan {% now "Y" %} to Dec {% now "Y" %})</span>
			<div class="table-responsive cust-table mt-2 prod-table">
			    
			</div>
            
		</div>
	</div>

</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 mb-3 mb-xl-3 h-md-100">
<div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end mb-xl-1 dashboard-card" style="background-color: #d50000;">
	<div class="card-header pt-5">
		<div class="card-title d-flex flex-column">
			<span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2 mt-3">${{ total_amount_due|floatformat:2|intcomma }}</span>
			<span class="text-white opacity-75 pt-2 fw-semibold fs-6 mb-10">Total Outstanding (All Time)</span>
			<div class="table-responsive cust-table mt-2 prod-table">
			    
			</div>
            
		</div>
	</div>

</div>
</div>