@extends('panel.layouts.app')
@section('page-title')
<title>{{ LaraCore::setting('html_prefix') }} {{ (LaraCore::setting('html_prefix') != '') ? '|' : '' }} Branch Dashboard </title>
@stop
@section('custom-style')
<link rel="stylesheet" href="{{ laracore_assets('plugins/morris/morris.css') }}">
@stop
@section('content')
<div class="content-wrapper">
	<div class="row">
		<div class="col-md-1"></div>
		<div class="col-md-10">
			<section class="content-header">
				<h1 style="width: 50%; float: left; margin: 0px 0px 15px 0">{{$today}}</h1>
				<h1 style="width: 50%; float: right; margin: 0px 0px 15px 0 ;text-align: right;">{{$branchName}}</h1>
			</section>
			<section class="content">
				<div class="row">
					<div class="col-lg-3 col-xs-6">
						<div class="small-box bg-green">
							<div class="inner">
								<h3 class="counter-font-size"><i class="fa fa-inr"></i> {{number_format($total_booking)}}</h3>
								<p>{{$currentMonth}}</p>
							</div>
							<div class="icon">
								<i class="fa fa-inr"></i>
							</div>
							<a href="javascript:;" class="small-box-footer">Total Bookings </a>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="small-box bg-yellow">
							<div class="inner">
								<h3 class="counter-font-size"><i class="fa fa-inr"></i> {{number_format($bill_amount)}} / {{number_format($total_account_booking)}}</h3>

								<p>Bill amount / Total amount</p>
							</div>
							<div class="icon">
								<i class="fa fa-inr"></i>
							</div>
							<a href="javascript:;" class="small-box-footer">Bills Pending</a>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="small-box bg-aqua">
							<div class="inner">
								<h3 class="counter-font-size">{{$current_client}}</h3>
								<p>{{$current_month}} New Clients</p>
							</div>
							<div class="icon">
								<i class="fa fa-user"></i>
							</div>
							<a href="javascript:;" class="small-box-footer">Clients</a>
						</div>
					</div>
					<div class="col-lg-3 col-xs-6">
						<div class="small-box bg-red">
							<div class="inner">
								<h3 class="counter-font-size">{{$current_receiver}}</h3>
								<p>{{$current_month}} New Receivers</p>
							</div>
							<div class="icon">
								<i class="fa fa-user"></i>
							</div>
							<a href="javascript:;" class="small-box-footer">Receivers</i></a>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-6">
						<div class="box box-default">
							<div class="box-header with-border">
								<i class="fa fa-bar-chart-o"></i>
								<h3 class="box-title">Parcels by Courier ({{$current_month}})</h3>
								<div class="box-tools pull-right">
									<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
								</div>
							</div>
							<div class="box-body chart-responsive">
								<div class="chart" id="sales-chart" style="height: 300px; position: relative;"></div>
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div class="box box-default">
							<div class="box-header with-border">
								<i class="fa fa-bar-chart-o"></i>
								<h3 class="box-title">Parcels by Type ({{$current_month}})</h3>
								<div class="box-tools pull-right">
									<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
								</div>
							</div>
							<div class="box-body chart-responsive">
								<div class="chart" id="parcel-types" style="height: 300px; position: relative;"></div>
							</div>
						</div>
					</div>

					
				</div>

				<div class="row">
					<div class="col-md-6">
						<div class="box box-default">
							<div class="box-header with-border">
								<i class="fa fa-bar-chart-o"></i>
								<h3 class="box-title">Business by Client ({{$current_month}})</h3>
								<div class="box-tools pull-right">
									<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
								</div>
							</div>
							<div class="box-body">
								<div id="bar-chart" style="height: 300px;"></div>
							</div>	
						</div>
					</div>

					<div class="col-md-6">
						<div class="box box-default">
							<div class="box-header with-border">
								<i class="fa fa-bar-chart-o"></i>
								<h3 class="box-title">Monthly Business</h3>
								<div class="box-tools pull-right">
									<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
									<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
								</div>
							</div>
							<div class="box-body">
								<div class="chart">
									<canvas id="lineChart" style="height:250px"></canvas>
								</div>
							</div>
						</div>
					</div>
				</div>
				
			</section>	
		</div>
		<div class="col-md-1"></div>
	</div>
</div>
@stop
@section('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="{{ laracore_assets('plugins/morris/morris.min.js') }}"></script>

<script src="{{ laracore_assets('plugins/flot/jquery.flot.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.resize.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.pie.min.js') }}"></script>
<script src="{{ laracore_assets('plugins/flot/jquery.flot.categories.min.js') }}"></script>

<script src="{{ laracore_assets('plugins/chartjs/Chart.min.js') }}"></script>
<script>
	$(function () {
		var carrier_data = '{!! json_encode(@$carrier_parcels) !!}';
		var carrier_color = '{!! json_encode(@$color_arr) !!}';
		var packagetype = '{!! json_encode(@$packagetype_counter) !!}';
		var client_parcel_info = '{!! json_encode(@$client_parcel_info) !!}';
		var month_data = '{!! json_encode(@$month_arr) !!}';
		var month_amount_data = '{!! json_encode(@$month_amount_arr) !!}';
		
		var donut = new Morris.Donut({
			element: 'sales-chart',
			resize: true,
			colors: JSON.parse(carrier_color),
			data: JSON.parse(carrier_data),
			hideHover: 'auto'
		});

		var donut = new Morris.Donut({
			element: 'parcel-types',
			resize: true,
			colors: ["#3c8dbc", "#f56954", "#00a65a", "#f39c12"],
			data: JSON.parse(packagetype),
			hideHover: 'auto'
		});

		var bar_data = {
			data: JSON.parse(client_parcel_info),
			color: "#f39c12"
		};
		$.plot("#bar-chart", [bar_data], {
			grid: {
				borderWidth: 1,
				borderColor: "#f3f3f3",
				tickColor: "#f3f3f3"
			},
			series: {
				bars: {
					show: true,
					barWidth: 0.5,
					align: "center"
				}
			},
			xaxis: {
				mode: "categories",
				tickLength: 0
			}
		});


		var areaChartData = {
			labels: JSON.parse(month_data),
			datasets: [
			{
				label: "Digital Goods",
				fillColor: "rgba(60,141,188,0.9)",
				strokeColor: "rgba(60,141,188,0.8)",
				pointColor: "#3b8bba",
				pointStrokeColor: "rgba(60,141,188,1)",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(60,141,188,1)",
				data: JSON.parse(month_amount_data)
			}
			]
		};

		var areaChartOptions = {
			showScale: true,
			scaleShowGridLines: false,
			scaleGridLineColor: "rgba(0,0,0,.05)",
			scaleGridLineWidth: 1,
			scaleShowHorizontalLines: true,
			scaleShowVerticalLines: true,
			bezierCurve: true,
			bezierCurveTension: 0.3,
			pointDot: false,
			pointDotRadius: 4,
			pointDotStrokeWidth: 1,
			pointHitDetectionRadius: 20,
			datasetStroke: true,
			datasetStrokeWidth: 2,
			datasetFill: true,
			legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
			maintainAspectRatio: true,
			responsive: true
		};

		var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
		var lineChart = new Chart(lineChartCanvas);
		var lineChartOptions = areaChartOptions;
		lineChartOptions.datasetFill = false;
		lineChart.Line(areaChartData, lineChartOptions);

	});
</script>
@stop