<div class="content-wrapper">
	<section class="content-header">
		<h1 class="module-highlight"><?php echo $this->lang->line('dashboard'); ?></h1>
	</section>
	<section class="content no-padding" style="margin-top:10px;">
		<div class="row">
			<div class="col-xs-12">
				<div class="col-xs-12 col-lg-8">
					<div class="row">
						<div class="col-xs-12 no-padding">
							<div class="col-xs-12 col-sm-4">
								<div class="info-box bg-dashboard-1">
									<span class="info-box-icon"><i class="ion ion-cash"></i></span>
									<div class="info-box-content">
										<h1 class="info-box-text"><?php echo $this->lang->line('CashInfo'); ?></h1>
										<span id="info-1" data-end="<?php echo $dashboard['cash']; ?>" class="number" class="info-box-number number">RM 0.00</span>
										<div class="progress hidden">
											<div class="progress-bar" style="width: 30%"></div>
										</div>
										<span class="progress-description"></span>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-4">
								<div class="info-box bg-dashboard-2">
									<span class="info-box-icon"><i class="ion ion-arrow-graph-up-right"></i></span>
									<div class="info-box-content">
										<h1 class="info-box-text"><?php echo $this->lang->line('PNLInfo'); ?></h1>
										<span id="info-2" data-end="<?php echo $dashboard['profit']; ?>" class="number" class="info-box-number number">RM 0.00</span>
										<div class="progress hidden">
											<div class="progress-bar" style="width: 30%"></div>
										</div>
										<span class="progress-description"></span>
									</div>
								</div>
							</div>
							<div class="col-xs-12 col-sm-4">
								<div class="info-box bg-dashboard-3">
									<span class="info-box-icon"><i class="ion ion-ios-calculator"></i></span>
									<div class="info-box-content">
										<h1 class="info-box-text"><?php echo $this->lang->line('BalanceLoanInfo'); ?></h1>
										<span id="info-3" data-end="<?php echo $dashboard['loanBalance']; ?>" class="number" class="info-box-number number">RM 0.00</span>
										<div class="progress hidden">
											<div class="progress-bar" style="width: 30%"></div>
										</div>
										<span class="progress-description"></span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xs-12 connectedSortable ui-sortable">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><?php echo $this->lang->line('SalesModule'); ?></h3>
									<div class="box-tools pull-right">
										<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
										<div class="btn-group">
											<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
											<ul class="dropdown-menu" role="menu">
												<li><a href="<?php echo base_url(); ?>dashboard/expenses"><?php echo $this->lang->line('ViewSalesDashboard'); ?></a></li>
												<li class="divider"></li>
												<li><a href="#"><?php echo $this->lang->line('Print'); ?></a></li>
												<li><a href="#"><?php echo $this->lang->line('DownloadAsPDF'); ?></a></li>
												<li><a href="#"><?php echo $this->lang->line('DownloadAsExcel'); ?></a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="box-body">
									<div class="row">
										<div class="col-xs-12 col-sm-6 col-md-3">
											<div class="small-box bg-dashboard-1">
												<div class="inner">
													<h4 id="sales-1" data-end="<?php echo $sales['Today']; ?>" class="number">RM 0.00</h4>
													<p><?php echo date('d/m/Y'); ?></p>
												</div>
												<div class="icon">
													<i class="ion ion-stats-bars"></i>
												</div>
												<a href="#" class="small-box-footer hidden"><?php echo $this->lang->line('MoreInfo'); ?> <i class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-3">
											<div class="small-box bg-dashboard-2">
												<div class="inner">
													<h4 id="sales-2" data-end="<?php echo $sales['ThisWeek']; ?>" class="number">RM 0.00</h4>
													<p><?php echo date('d', strtotime('previous monday')).'-'.date('d/m/Y', strtotime('next sunday')); ?></p>
												</div>
												<div class="icon">
													<i class="ion ion-stats-bars"></i>
												</div>
												<a href="#" class="small-box-footer hidden"><?php echo $this->lang->line('MoreInfo'); ?> <i class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-3">
											<div class="small-box bg-dashboard-3">
												<div class="inner">
													<h4 id="sales-3" data-end="<?php echo $sales['ThisMonth']; ?>" class="number">RM 0.00</h4>
													<p><?php echo date('F'); ?></p>
												</div>
												<div class="icon">
													<i class="ion ion-stats-bars"></i>
												</div>
												<a href="#" class="small-box-footer hidden"><?php echo $this->lang->line('MoreInfo'); ?> <i class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
										<div class="col-xs-12 col-sm-6 col-md-3">
											<div class="small-box bg-dashboard-4">
												<div class="inner">
													<h4 id="sales-4" data-end="<?php echo $sales['ThisYear']; ?>" class="number">RM 0.00</h4>
													<p><?php echo date('Y'); ?></p>
												</div>
												<div class="icon">
													<i class="ion ion-stats-bars"></i>
												</div>
												<a href="#" class="small-box-footer hidden"><?php echo $this->lang->line('MoreInfo'); ?> <i class="fa fa-arrow-circle-right"></i></a>
											</div>
										</div>
							        </div>
									<div class="row loader">
										<div class="col-lg-12">
											<img src="<?php echo base_url(); ?>img/loader.gif" alt="Loading.." />
											<span class="loader-information">Preparing graph...</span>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-2 hidden-xs">
											<h5 class="text-center ct-legend-title hidden"><?php echo $this->lang->line('Legends'); ?></h5>
											<ul class="ct-legend"></ul>
										</div>
										<div class="col-xs-12 col-sm-10">
											<div class="row">
												<div class="col-xs-12">
													<h4 class="text-center sales-monthly-distribution-title hidden"><?php echo $this->lang->line('MonthlySalesDistribution'); ?></h4>
													<div class="sales-monthly-distribution"></div>
												</div>
											</div>
											<div class="row">
												<div class="col-xs-12">
													<h4 class="text-center sales-performance-title hidden"><?php echo $this->lang->line('SalesPerformance'); ?></h4>
													<div class="sales-performance"></div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-xs-12">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><?php echo $this->lang->line('ExpensesModule'); ?></h3>
									<div class="box-tools pull-right">
										<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
										<div class="btn-group">
											<button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></button>
											<ul class="dropdown-menu" role="menu">
												<li><a href="<?php echo base_url(); ?>dashboard/expenses"><?php echo $this->lang->line('ViewExpensesDashboard'); ?></a></li>
												<li class="divider"></li>
												<li><a href="#"><?php echo $this->lang->line('Print'); ?></a></li>
												<li><a href="#"><?php echo $this->lang->line('DownloadAsPDF'); ?></a></li>
												<li><a href="#"><?php echo $this->lang->line('DownloadAsExcel'); ?></a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="box-body">
									<div class="row">
										<div class="col-xs-12 col-md-6">
										</div>
										<div class="col-xs-12 col-md-6">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-lg-4">
					<div class="row">
						<div class="col-xs-12">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><?php echo $this->lang->line('BankAccountModule'); ?></h3>
									<div class="box-tools pull-right">
										<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									</div>
								</div>
								<div class="box-body">
									<ul class="bank-listing">
									<?php if ($bankBalance) foreach ($bankBalance as $row) {
										echo '<li>'.$row->acctName.'&emsp;<span id="info-'.rand().'" data-end="'.$row->balance.'" class="pull-right number"></span></li>';
									}
									?>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-xs-12">
							<div class="box box-primary">
								<div class="box-header with-border">
									<h3 class="box-title"><?php echo $this->lang->line('ActivityModule'); ?></h3>
									<div class="box-tools pull-right">
										<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									</div>
								</div>
								<div class="box-body">
									<ul class="bank-listing">
									<?php if ($activities) foreach ($activities as $row) {
										echo '<li>'.$row->url.'&emsp;<span id="info-'.rand().'" class="pull-right">'.$row->createdTS.'</span></li>';
									}
									?>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</div>
<script type="text/javascript">
var objGraph = new Object();
$(function() {
	$('.number').each(function() {
		var counter = new CountUp($(this).attr('id'), 0, $(this).attr('data-end'), 2, 2, {
			useEasing: true,
			useGrouping: true,
			separator: ',',
			decimal: '.',
			prefix: 'RM',
			suffix: ''
		});
		counter.start();
	});

	setTimeout(function () {
		fnGetRequest();
	}, 1500);

	var requests = [
		{
			action: 'do_get_graphs',
			sub_action: 'do_get_labels',
			graph: 'sales_monthly_distribution',
			url: '<?php echo base_url(); ?>dashboard/fnGetLegends',
			data: {
				type: 'M'
			}
		},
		{
			action: 'do_get_graphs',
			sub_action: 'do_get_series',
			graph: 'sales_monthly_distribution',
			url: '<?php echo base_url(); ?>dashboard/fnGetSeries',
			data: {
				type: 'sales_monthly_distribution',
				year: '<?php echo date('Y'); ?>'
			}
		},
		{
			action: 'do_get_graphs',
			sub_action: 'do_get_series',
			graph: 'sales_monthly_distribution',
			url: '<?php echo base_url(); ?>dashboard/fnGetSeries',
			data: {
				type: 'sales_monthly_distribution',
				year: '<?php echo date('Y') - 1; ?>'
			}
		},
		{
			action: 'do_graphs',
			graph: 'sales_monthly_distribution'
		},
		{
			action: 'do_get_graphs',
			sub_action: 'do_get_labels',
			graph: 'sales_performance',
			url: '<?php echo base_url(); ?>dashboard/fnGetLegends',
			data: {
				type: 'years'
			}
		},
		{
			action: 'do_get_graphs',
			sub_action: 'do_get_series',
			graph: 'sales_performance',
			url: '<?php echo base_url(); ?>dashboard/fnGetSeries',
			data: {
				type: 'sales_performance'
			}
		},
		{
			action: 'do_graphs',
			graph: 'sales_performance'
		},
		{
			action: 'do_get_legends',
			url: '<?php echo base_url(); ?>dashboard/fnGetLegends',
			data: {
				type: 'Y'
			}
		}
	], current = 0;

	function fnGetRequest() {
		if (current < requests.length) {
			if (typeof requests[current].url != 'undefined') {
				$.ajax({
					url: requests[current].url,
					method: 'POST',
					dataType: 'json',
					data: requests[current].data,
					success: function(json) {
						if ($.trim(json.status) == 'success') {
							if (requests[current].action == 'do_get_legends') {
								$('.ct-legend-title').removeClass('hidden');
								$.each(json.message, function(index, value) {
									$('.ct-legend').append('<li class="ct-series-' + index + '" data-target="' + index + '">' + value + '</li>');
								});
								$('.ct-legend > li').on('click', function() {
									$(this).toggleClass('inactive');
									fnFilterData($(this).attr('data-target'), $(this).hasClass('inactive'));
								});
								fnSetLoaderMessage('Preparing legends...');
							} else if (requests[current].action == 'do_get_graphs') {
								if (requests[current].graph == 'sales_monthly_distribution' || requests[current].graph == 'sales_performance') {
									fnSetGraph(requests[current].graph);
									if (requests[current].sub_action == 'do_get_labels') {
										objGraph.labels = json.message;
										fnSetLoaderMessage('Generating graph labels...');
									} else if (requests[current].sub_action == 'do_get_series') {
										if (typeof objGraph.series == 'undefined') {
											var series = [];
											series.push(json.message);
											objGraph.series = series;
										} else {
											objGraph.series.push(json.message);
										}
										fnSetLoaderMessage('Generating graph series...');
									}
								}
							}
						}

						current++;
						setTimeout(function () {
							fnGetRequest();
						}, 1000);
					}
				});
			} else {
				if (requests[current].action == 'do_graphs') {
					fnSetLoaderMessage('Plotting graph...');
					if (requests[current].graph == 'sales_monthly_distribution') {
						$('.sales-monthly-distribution-title').removeClass('hidden');
						var options = {
							height: '220px',
							fullWidth: true,
							seriesBarDistance: 15,
							chartPadding: {
								top: 20,
								right: 20,
								bottom: 0,
								left: 10
							},
							axisX: {
								showGrid: false,
								labelInterpolationFnc: function(value) { return value; }
							},
							axisY: {
								offset: 45,
								type: Chartist.AutoScaleAxis,
								onlyInteger: true
							},
							plugins: [
								Chartist.plugins.ctAxisTitle({
									axisX: {},
									axisY: {
										axisTitle: 'Sales (RM)',
										axisClass: 'ct-axis-title',
										offset: {
											x: 0,
											y: 10
										},
										textAnchor: 'middle',
										flipTitle: true
									}
								}),
								Chartist.plugins.tooltip({
									currency: 'RM'
								})
							]
						};

						var responsiveOptions = [
							['screen and (max-width: 360px)', {
								height: '180px',
								seriesBarDistance: 7,
								axisX: {
									labelInterpolationFnc: function(value) {
										return value.slice(0, 1);
									}
								}
							}],
							['screen and (min-width: 361px) and (max-width: 767px)', {
								height: '200px',
								seriesBarDistance: 10,
								axisX: {
									labelInterpolationFnc: function(value) {
										return value.slice(0, 3);
									}
								}
							}]
						];

						new Chartist.Bar('.sales-monthly-distribution', {
							labels: objGraph.labels,
							series: objGraph.series
						}, options, responsiveOptions);
					} else if (requests[current].graph == 'sales_performance') {
						$('.sales-performance-title').removeClass('hidden');
						var options = {
							height: '220px',
							fullWidth: false,
							lineSmooth: false,
							showPoint: false,
							chartPadding: {
								top: 20,
								right: 20,
								bottom: 0,
								left: 10
							},
							axisX: {
								showGrid: true
							},
							axisY: {
								showGrid: false,
								offset: 45,
								type: Chartist.AutoScaleAxis,
								onlyInteger: true
							},
							plugins: [
								Chartist.plugins.ctAxisTitle({
									axisX: {},
									axisY: {
										axisTitle: 'Sales (RM)',
										axisClass: 'ct-axis-title',
										offset: {
											x: 0,
											y: 10
										},
										textAnchor: 'middle',
										flipTitle: true
									}
								})
							]
						};

						var responsiveOptions = [
							['screen and (max-width: 360px)', {
								height: '180px',
								axisX: {
									labelInterpolationFnc: function(value) {
										return value.slice(0, 1);
									}
								}
							}],
							['screen and (min-width: 361px) and (max-width: 767px)', {
								height: '200px',
								axisX: {
									labelInterpolationFnc: function(value) {
										return value.slice(0, 3);
									}
								}
							}]
						];

						new Chartist.Line('.sales-performance', {
							labels: objGraph.labels,
							series: objGraph.series
						}, options, responsiveOptions)
						.on('draw', function(context) {
							if(context.type === 'line') {
								context.element.attr({
									style: 'stroke: hsl(' + Math.floor(Chartist.getMultiValue(context.value) / max * 100) + ', 50%, 50%);'
								});
							}
						});
					}
				}

				current++;
				setTimeout(function () {
					fnGetRequest();
				}, 800);
			}
		} else {
			$('.loader').addClass('hidden');
		}
	}
});
function fnSetGraph(graph) {
	if (typeof objGraph.name == 'undefined') {
		objGraph.name = graph;
	} else if (objGraph.name != graph) {
		objGraph = new Object();
		objGraph.name = graph;
	}
}
function fnSetLoaderMessage(message) {
	$('.loader-information').html(message);
}
function fnFilterData(series, show) {
	$('.loader').removeClass('hidden');
	fnSetLoaderMessage('Plotting graph...')
}
</script>
