@extends('callcenter.layout.default')

@section('content')

<div class="m-grid__item m-grid__item--fluid m-wrapper">
	<!-- BEGIN: Subheader -->
	<div class="m-subheader ">
		<div class="d-flex align-items-center">
			<div class="mr-auto">
				<h3 class="m-subheader__title ">
					Call Center Dashboard
				</h3>
			</div>
		</div>
	</div>
	<!-- END: Subheader -->
	<div class="m-content dashboard-widget">
		<!--Begin::Section-->
		<div class="row">
			<div class="col-lg-6 col-md-6">
				<!--begin::Portlet-->
				<div class="m-portlet m-portlet--tab" id="circle-chart-content">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon m--hide">
									<i class="la la-gear"></i>
								</span>
								<h3 class="m-portlet__head-text">
									Delivery Orders
								</h3>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div id="m_flotchart" style="height: 300px;"></div>
					</div>
				</div>
				<div class="content-btn">
					<button type="button" class="btn btn-primary" onclick="downloadPdf( 'circle-chart-content' )">Download</button>
				</div>
				<!--end::Portlet-->
			</div>
			<div class="col-lg-6 col-md-6">
				<!--begin::Portlet-->
				<div class="m-portlet m-portlet--tab" id="bar-chart-content">
					<div class="m-portlet__head">
						<div class="m-portlet__head-caption">
							<div class="m-portlet__head-title">
								<span class="m-portlet__head-icon m--hide">
									<i class="la la-gear"></i>
								</span>
								<h3 class="m-portlet__head-text">
									Delivery Orders Hourly
								</h3>
							</div>
						</div>
					</div>
					<div class="m-portlet__body">
						<div id="m_flotcharts_6" style="height: 300px;"></div>
					</div>
				</div>
				<div class="content-btn">
					<button type="button" class="btn btn-primary" onclick="downloadPdf( 'bar-chart-content' )">Download</button>
				</div>
				<!--end::Portlet-->
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="m-portlet m--bg-danger m-portlet--skin-dark">
					<div class="m-portlet__body">
						<div class="table-responsive">
							<table class="table pinkTable" id="dataTable" width="100%">
								<tbody id="branch-dynamic-data">
																		<tr>
										<td><strong>Total Order(s) - {{ $TotalOrders }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delivery Order(s) - {{ $TotalDelivered }}</strong></td>
									</tr>
									<tr>
										<td><strong>Takeaway Order(s) - {{ $TotalTakeAway }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delay in Kitchen (>15) - {{ $DelayInKitchen }}</strong></td>
									</tr>
									<tr>
										<td><strong>Delay in Delivery(>25) - {{ $delay }}</strong></td>
									</tr>
									<tr>
										<td><strong>Not Received in Restaurant(s) - {{ $NotReceivedInRestaurant }}</strong></td>
									</tr>
									<tr>
										<td><strong>Total Cancelled - {{ $TotalCancelled }}</strong></td>
									</tr>
									<tr>
										<td><strong>Orders in Kitchen - {{ $TotalInKitchen }}</strong></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="m-portlet">
					<div class="m-portlet__body">
						<div class="table-responsive">
							<!--begin: Datatable -->
							<table class="table table-hover dashboardTable" id="html_table" width="100%">
								<thead>
									<tr>
										<th title="Field #1">
											Restaurant Name
										</th>
										<th title="Field #2">
											Total Orders
										</th>
										<th title="Field #3">
											Delivery
										</th>
										<th title="Field #4">
											Takeaway
										</th>
										<th title="Field #5">
											Not Received in Restaurant
										</th>
										<th title="Field #6">
											Delay in Kitchen
										</th>
										<th title="Field #7">
											Delay in Delivery
										</th>
										<th title="Field #8">
											Cancelled
										</th>
										<th title="Field #9">
											Order(s) in Kitchen
										</th>
										<th title="Field #10">
											Order(s) in Delivery
										</th>
									</tr>
								</thead>
																	<tr>
										<td colspan="10" style="text-align: center; ">No Record Found</td>
									</tr>
															</table>
							<!--end: Datatable -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{ URL::to('callcenter/callcenter-orders') }}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info() }}</h3>
												<a href="{{ URL::to('callcenter/callcenter-orders') }}">
													<h4 class="text-muted">Total No of orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-shopping-cart float-right fs-50 m--font-info"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=4')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_delivered' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=4')}}">
													<h4 class="text-muted">Total no of delivered orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa  fa-plane float-right fs-50 m--font-danger"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=5')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_cancel' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=5')}}">
													<h4 class="text-muted">Total no of cancel orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-taxi float-right fs-50 m--font-warning"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="col-xl-6 col-md-6">
				<div class="m-portlet">
					<a href="{{URL::to('callcenter/callcenter-orders?order_status=8')}}" class="d-block">
						<div class="m-portlet__body">
							<div class="card card-custom">
								<div class="card-content">
									<div class="card-body p-0">
										<div class="media d-flex">
											<div class="media-body text-left">
												<h3>{{ get_call_center_order_info( 'total_delay' ) }}</h3>
												<a href="{{URL::to('callcenter/callcenter-orders?order_status=8')}}">
													<h4 class="text-muted">Total no of delay orders</h4>
												</a>
											</div>
											<div class="align-self-center">
												<i class="fa fa-shopping-basket float-right fs-50 m--font-primary"></i>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
		</div>
		<!--End::Section-->
	</div>
</div>

@endsection
@section('js')

<script type="text/javascript">
	var FlotchartsDemo = function() {

		var demo6 = function() {
			// bar chart:
			var data = GenerateSeries(0);

			function GenerateSeries(added) {

				var j = 0
				var new_data = [];
				var branch_statictics = ``;
				$.each(JSON.parse(branch_statictics), function(key, value) {
					new_data.push([key, value]);
					j++;
				});

				return new_data;
			}

			var options = {
				series: {
					bars: {
						show: true
					}
				},
				bars: {
					barWidth: 0.8,
					lineWidth: 0, // in pixels
					shadowSize: 0,
					align: 'left',
					fill: 1,
					fillColor: null
				},

				grid: {
					tickColor: "#eee",
					borderColor: "#eee",
					borderWidth: 1
				}
			};

			$.plot($("#m_flotcharts_6"), [{
				data: data,
				color: '#cc0000',
				lines: {
					lineWidth: 1,
				},
				shadowSize: 0
			}], options);
		}

		var demo8 = function() {

			var branch_statictics = ``;
			var i = 0
			var colors = ["#00695c", "#CC0000", "#9933CC", "#3F729B", "#5d4037", "#007E33", "#0d47a1", "#FF8800", "#c2185b"]
			var new_data = [];
			$.each(JSON.parse(branch_statictics), function(key, value) {
				new_data[i] = {
					label: key + ' - ' + value,
					data: value,
					color: colors[i]
				};
				i++;
			});

			$.plot($("#m_flotchart"), new_data, {
				series: {
					pie: {
						show: true,
						label: {
							innerRadius: 0.5,
							show: true,
							radius: 1,
							formatter: function(label, series) {
								return '<div style="font-size:8pt;text-align:center;padding:2px;color:black;font-weight:bold;">' + Math.round(series.percent) + '%</div>';
							},
							background: {
								opacity: 0.0
							}
						}
					}
				}
			});
		}
		return {
			// public functions
			init: function() {
				demo6();
				demo8();
			}
		};
	}();

	jQuery(document).ready(function() {
		FlotchartsDemo.init();
	});

	function downloadPdf(div_id) {

		html2canvas(document.getElementById(div_id), {

			onrendered: function(canvas) {

				var imgData = canvas.toDataURL('image/png');

				var doc = new jsPDF('p', 'mm', 'a4');

				doc.addImage(imgData, 'PNG', 10, 10);

				doc.save('dashboard.pdf');
			}
		});
	}
</script>

@endsection