@extends('layouts.app')
@section('title', 'Stellar | Flood Certificate')
@section('content')

<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<div class="page-title-box">
				<div class="float-right">
					<ol class="breadcrumb">
						<li class="avatar-title rounded text-center  bg-soft-warning " style="cursor:pointer" onclick="getdashboard('Yesterday')">
							<span class="pl-1 pr-1"><strong>({{date('Y-m-d', strtotime('-1 day'))}}) </strong></span><br/>
							<span class="pl-1 pr-1">Yesterday</span>
						</li>
						<li class="avatar-title rounded text-center bg-soft-pink active" style="cursor:pointer" onclick="getdashboard('Today')">
							<span class="pl-1 pr-1"><strong> ({{date('Y-m-d')}}) </strong></span><br/>
							<span class="pl-1 pr-1 "> Today </span>
						</li>
						<!--li class="breadcrumb-item " style="cursor:pointer" onclick="getdashboard('MTD')"> MTD </li-->
						<li class="avatar-title rounded text-center  bg-soft-warning " style="cursor:pointer;" onclick="getdashboard('overall')">
							<br/><span class="pl-1 pr-1 pt-2"><strong> All </strong></span>
						</li>
					</ol>
				</div>
				<h4 class="page-title">Dashboard</h4>
			</div>
		</div>
	</div>
	<div class="row justify-content-center">
		<div class="col-md-6 col-lg-3">
			<div class="card report-card dashboard_open">
				<div class="card-body pl-4 pr-4 pb-2 pt-2">
					<div class="row d-flex justify-content-center">
						<div class="col-4 align-self-center">
							<img src="assets/images/Open.svg">  
							<!--div class="report-main-icon bg-light-alt">
								<i data-feather="users" class="align-self-center icon-dual-pink icon-md"></i>  
							</div-->
						</div>
						<div class="col-8 text-right">
							<p class="text-white mb-1 font-weight-semibold font-13">Open</p>
							<h3 class="my-2 text-white">174</h3>
							<p class="mb-0 text-truncate"><span class="text-white"><i class="mdi mdi-trending-up"></i>
							37.9%</span> </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card report-card dashboard_inprogress">
				<div class="card-body pl-4 pr-4 pb-2 pt-2">
					<div class="row d-flex justify-content-center">                                                
						<div class="col-4 align-self-center">
							<img src="assets/images/Inprogress.svg">
							<!--div class="report-main-icon bg-light-alt">
								<i data-feather="clock" class="align-self-center icon-dual-secondary icon-md"></i>  
							</div-->
						</div> 
						<div class="col-8 text-right">
							<p class="text-white mb-1 font-weight-semibold font-13">InProgress</p>
							<h3 class="my-2 text-white">196</h3>
							<p class="mb-0 text-truncate"><span class="text-white"><i class="mdi mdi-trending-up"></i>
							42.7%</span> </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card report-card dashboard_clarification">
				<div class="card-body pl-4 pr-4 pb-2 pt-2">
					<div class="row d-flex justify-content-center">                                                
						<div class="col-4 align-self-center">
							<img src="assets/images/Clarification.svg">
							<!--div class="report-main-icon bg-light-alt">
								<i data-feather="pie-chart" class="align-self-center icon-dual-purple icon-md"></i>  
							</div-->
						</div> 
						<div class="col-8 text-right">
							<p class="text-white mb-1 font-weight-semibold font-13">Clarification</p>
							<h3 class="my-2 text-white">0</h3>
							<p class="mb-0 text-truncate"><span class="text-white"><i class="mdi mdi-trending-up"></i>
							0%</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-6 col-lg-3">
			<div class="card report-card dashboard_completed">
				<div class="card-body pl-4 pr-4 pb-2 pt-2">
					<div class="row d-flex justify-content-center">
						<div class="col-4 align-self-center">
							<img src="assets/images/Completed.svg">
							<!--div class="report-main-icon bg-light-alt">
								<i data-feather="briefcase" class="align-self-center icon-dual-warning icon-md"></i>  
							</div-->
						</div> 
						<div class="col-8 text-right">  
							<p class="text-white mb-1 font-weight-semibold font-13">Completed</p>                                         
							<h3 class="my-2 text-white">89</h3>
							<p class="mb-0 text-truncate"><span class="text-white"><i class="mdi mdi-trending-up"></i>
							19.3%</span> </p>
						</div>
					</div>
				</div>
			</div>
		</div>                     
	</div>
	<div class="row">
		<div class="col-lg-8">                                                        
			<div class="card placeorders_top_border">
				<div class="card-body">  
					<h4 class="header-title mt-0">Order Overview</h4>
					<div class="">
						<div class="text-danger"><em> Graph shows last 5days</em></div>
						<div id="dashboard1" class="apex-charts"></div>
					</div>  
				</div>
				<div class="card-body bg-light-alt chart-report-card">
					<div class="row d-flex justify-content-between">
						<div class="col-lg-4">
							<div class="media">
								<div class="report-main-icon bg-card mr-2">
									<i data-feather="users" class="align-self-center icon-dual-2"></i>  
								</div>                                                                 
								<div class="media-body align-self-center text-truncate">
									<h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">459 
										<span class="text-success  font-12 font-weight-normal"><i class="mdi mdi-arrow-up mr-1"></i>100% </span>
									</h4> 
									<p class="text-dark font-weight-semibold mb-0 font-14">Total Orders</p>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<div class="media">
								<div class="report-main-icon bg-card mr-2">
									<i data-feather="eye" class="align-self-center icon-dual-2"></i>  
								</div>                                     
								<div class="media-body align-self-center text-truncate">
									<h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">394 <span class="text-success  font-12 font-weight-normal"><i class="mdi mdi-arrow-up mr-1"></i>
										85.8%
										</span>
									</h4> 
									<p class="text-dark font-weight-semibold mb-0 font-14"> Automated </p>
								</div>
							</div>
						</div>
						
						<div class="col-lg-4">
							<div class="media">
								<div class="report-main-icon bg-card mr-2">
									<i data-feather="list" class="align-self-center icon-dual-2"></i>  
								</div>                                     
								<div class="media-body align-self-center text-truncate">
									<h4 class="mt-0 mb-0 font-weight-semibold text-dark font-24">65
										<span class="text-success  font-12 font-weight-normal"><i class="mdi mdi-arrow-up mr-1"></i>
										14.16%</span>
									</h4> 
									<p class="text-dark font-weight-semibold mb-0 font-14"> Manual </p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>                
		</div>
		<div class="col-lg-4">                            
			<div class="card blue_top_border">
				<div class="card-body">
					<h4 class="header-title mt-0"> Order Aging </h4>
					<div class="table-responsive mt-2">
						<br/><div id="dashboard_donut" class="apex-charts"></div>						
						<table class="table mb-0">
							<thead class="thead-light">
								<tr>
									<th>Orders</th>
									<th>Count</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row"><i class="mdi mdi-circle text-primary mr-1"></i> < 4 hrs </th>
									<td>128</td>
								</tr>
								<tr>
									<th scope="row"><i class="mdi mdi-circle text-warning mr-1"></i> 4 - 8 hrs  </th>
									<td>259</td>                                     
								</tr>
								<tr>
									<th scope="row"><i class="mdi mdi-circle text-secondary mr-1"></i> > 8 hrs </th>
									<td>72</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	
	$(document).ready(function(){
		//Device-widget
		  var options = {
			chart: {
				height: 200,
				type: 'donut',
			}, 
			plotOptions: {
			  pie: {
				donut: {
				  size: '80%'
				}
			  }
			},
			dataLabels: {
			  enabled: false,
			},

			stroke: {
			  show: true,
			  width: 2,
			  colors: ['transparent']
			},
			series: [1280,459,279],
			legend: {
				show: false,
				position: 'bottom',
				horizontalAlign: 'center',
				verticalAlign: 'middle',
				floating: false,
				fontSize: '14px',
				offsetX: 0,
				offsetY: 5
			},
				
		    labels: [ "<4hrs", ">4hrs && <=8hrs", ">8 hrs"],
			colors: ["#506ee4", "#fda354", "#41cbd8"],
		   
			responsive: [{
				breakpoint: 600,
				options: {
				  plotOptions: {
					  donut: {
						customScale: 0.2
					  }
					},        
					chart: {
						height: 240
					},
					legend: {
						show: false
					},
				}
			}],
			tooltip: {
			  y: {
				  formatter: function (val) {
					  return   val
				  }
			  }
			}
		  }
	  var chart = new ApexCharts(
		document.querySelector("#dashboard_donut"),
		options
	  );
		  
	chart.render();
	
	var options = {
		chart: {
			height: 295,
			type: 'bar',
			toolbar: {
				show: false
			}
		},
		plotOptions: {
			bar: {
				horizontal: false,
				endingShape: 'rounded',
				columnWidth: '30%',
			},
		},
		dataLabels: {
			enabled: false
		},
		stroke: {
			show: true,
			width: 2,
			colors: ['transparent']
		},
		series: [{
			name: 'Automated',
			data: [202,349,257,240,109]
		}, {
			name: 'Manual',
			data: [31,128,108,67,14]
		},],
		xaxis: {
			categories: ['{{ date('Y-m-d') }}','{{ date('Y-m-d', strtotime('-1 day')) }}','{{ date('Y-m-d', strtotime('-2 day')) }}','{{ date('Y-m-d', strtotime('-3 day')) }}','{{ date('Y-m-d', strtotime('-4 day')) }}'],
			axisBorder: {
			  show: true,
			  color: '#bec7e0',
			},  
			axisTicks: {
			  show: true,
			  color: '#bec7e0',
			},    
		},
		legend: {
		  offsetY: 6,
		},
		yaxis: {
			title: {
				text: 'Count',
			},
		},
		fill: {
			opacity: 1

		},
		// legend: {
		//     floating: true
		// },
		grid: {
			row: {
				colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
				opacity: 0.2,           
			},
			strokeDashArray: 4,
		},
		tooltip: {
			y: {
				formatter: function (val) {
					return "" + val + ""
				}
			}
		}
	}
	var chart = new ApexCharts(
		document.querySelector("#dashboard1"),
		options
	);
	chart.render();
});
function Ajax(Type, URL, URLData)
{
	var Responses = "";
	$.ajax(
	{
		type: Type,
		async: false,
		cache: false,
		url: URL,
		data: URLData,
		dataType: 'html',
		success:function(result, Response, jqXHR)
		{
			Responses = result;
		}
	});
	return Responses;
}
$(document).ready(function() {
	$('#datatableorders').DataTable({
		"order": []
	});
});
</script>
@endsection