{extends file="$layouts_admin"}
{block name="content"}
<div class="row">
<div class="col-md-12">
<div class="card border" id="t_options">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"><a class="nav-link" href="{$_url}reports/invoices"><i class="fal fa-th"></i> {$_L['Invoices']}</a></li>
<li class="nav-item"><a class="nav-link active" href="{$_url}reports/invoices_summary"><i class="fal fa-chart-bar"></i> {$_L['Summary']}</a></li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div id="details" class="tab-pane fade show active ib-tab-box">
<h3>{$_L['Invoices']} - {$_L['Paid']} [ {$_L['Last 12 Months']} ]</h3>
<div class="row">
<div class="col-md-9">
<div class="container_sales_chart" id="container_sales_chart" style="min-height: 450px;"></div>
</div>
<div class="col-md-3">
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"> <div>
<h5 class="display-4 d-block l-h-n m-0 fw-500">
{$total_invoice}
<small class="m-0 l-h-n">{$_L['Total Invoice']}</small>
</h5>
<i class="fal fa-list position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
{if $all_data}
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"> <div>
<h5 class="display-4 d-block l-h-n m-0 fw-500">
{$total_invoice_items}
<small class="m-0 l-h-n">{$_L['Sales Count']}</small>
</h5>
<i class="fal fa-list position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
{/if}
<div class="p-3 bg-info-200 rounded overflow-hidden position-relative text-white mb-g"> <div>
<h5 class="display-4 d-block l-h-n m-0 fw-500">
{formatCurrency($total_invoice_amount,$config['home_currency'])}
<small class="m-0 l-h-n">{$_L['Total Amount']}</small>
</h5>
<i class="fal fa-list position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4" style="font-size: 6rem;"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/block}
{block name="script"}
<script>
jQuery(document).ready(function() {
var options = {
series: [{
name: '{$_L['Amount']}',
data: [
{foreach $m['data'] as $d}
{$d},
{/foreach}
],
}],
chart: {
height: 400,
type: 'bar',
{if !empty($config['admin_dark_theme'])}
foreColor: '#fff',
{/if}
},
plotOptions: {
bar: {
dataLabels: {
position: 'top', // top, center, bottom
},
}
},
dataLabels: {
offsetY: -20,
style: {
fontSize: '12px',
{if !empty($config['admin_dark_theme'])}
colors: ["#fff"],
{else}
colors: ["#304758"],
{/if}
}
},
xaxis: {
categories: [
{foreach $m['display'] as $m}
'{$m}',
{/foreach}
],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true,
}
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: false,
}
},
title: {
text: '{$_L['Invoice']}',
floating: true,
offsetY: 330,
align: 'center',
style: {
{if !empty($config['admin_dark_theme'])}
color: '#fff',
{else}
color: '#0e1726'
{/if}
}
}
};
var chart = new ApexCharts(document.querySelector("#container_sales_chart"), options);
chart.render();
});
</script>
{/block}
