@extends('layouts.base')
@section('content')
<div class="panel-header bg-primary-gradient">
	<div class="page-inner py-5">
		<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
			<div>
				<h2 class="text-white pb-2 fw-bold">Dashboard</h2>
				<h5 class="text-white op-7 mb-2">Premium Bootstrap 4 Admin Dashboard</h5>
			</div>
			<div class="ml-md-auto py-2 py-md-0">
				<a href="#" class="btn btn-white btn-border btn-round mr-2">Manage</a>
				<a href="#" class="btn btn-primary btn-round">Add Customer</a>
			</div>
		</div>
	</div>
</div>
<div class="page-inner">
	<div class="page-header">
		<h4 class="page-title">Dashboard</h4>
		<ul class="breadcrumbs">
			<li class="nav-home">
				<a>
					<i class="fas fa-home"></i>
				</a>
			</li>
			<li class="separator">
				<i class="flaticon-right-arrow"></i>
			</li>
			<li class="nav-item">
				<a>Home</a>
			</li>
		</ul>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<div class="card-title">Orders Status </div>
				</div>
				<div class="card-body">
					 <div class="row">
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body ">
									<div class="row">
										<div class="col-5">
											<div class="icon-big text-center">
												<i class="fas fa-box-open text-warning"></i>
											</div>
										</div>
										<div class="col-7 col-stats">
											<div class="numbers">
												<p class="card-category">Pending</p>
												<h4 class="card-title"></h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body">
									<div class="row">
										<div class="col-5">
											<div class="icon-big text-center">
												<i class="flaticon-coins text-primary"></i>
											</div>
										</div>
										<div class="col-7 col-stats">
											<div class="numbers">
												<p class="card-category">Ready</p>
												<h4 class="card-title"></h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body ">
									<div class="row">
										<div class="col-5">
											<div class="icon-big text-center">
												<i class="flaticon-chart-pie text-success"></i>
											</div>
										</div>
										<div class="col-7 col-stats">
											<div class="numbers">
												<p class="card-category">Delivered</p>
												<h4 class="card-title"></h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="col-sm-6 col-md-3">
							<div class="card card-stats card-round">
								<div class="card-body">
									<div class="row">
										<div class="col-5">
											<div class="icon-big text-center">
												<i class="flaticon-error text-danger"></i>
											</div>
										</div>
										<div class="col-7 col-stats">
											<div class="numbers">
												<p class="card-category">Cancelled</p>
												<h4 class="card-title"></h4>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Today's Order Details</h4>
				</div>
				<div class="card-body">
					<div class="table-responsive">
						<table id="tblData" class="display table table-striped table-hover" >
							<thead>
								<tr>
									<th style="width:10px;">#</th>
									<th>Date</th>
									<th>Created Outlet</th>
									<th>Order Taker</th>
									<th>Customer</th>
									<th>Mobile</th>
									<th>Venue Time</th>
									<th>Venue</th>
									<th>Amount</th>
									<th>Order No</th>
									<th>KOT</th>
									<th>Status</th>
								</tr>
							</thead>
							<tbody>
								
								
							</tbody>
							<tfoot>
								{{-- <tr class="bg-eeeeee">
									<th class="text-center" colspan="6">Total</th>
									<th class="text-right">{{number_format($total_amount,2)}}</th>
									<th colspan="3">&nbsp;</th>
								</tr> --}}
							</tfoot>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
@endsection
@section('custom_scripts')
<script type="text/javascript" src="{{asset('js/datatables.min.js')}}"> </script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#tblData').DataTable({
			paging: true,
			lengthChange: true,
			searching: true,
			ordering: true,
			info: true,
			autoWidth: false,
			responsive: false,

			columnDefs: [
				{ width: "5%", targets: 0 },
				{ orderable: false, searchable: false, targets: [] },
				{ className: "text-md-right", targets: [] },
				{ bVisible: false, aTargets: [] }
			]
	
		});
	});
</script>
@endsection