@extends('restaurant.pos.layout.master')
<style>
	.summary-icon {
		max-width: 80px;
	}
	.favourite-item img {
		aspect-ratio: 16 / 9;
	}
</style>

@section('content')
    <div class="wrapper mb-4">
		<form action="{{ route('restaurant.dashboard') }}" method="GET">
			<div class="d-flex flex-wrap align-items-center justify-content-between border border-secondary px-3 py-1 mb-4">
				<div class="d-flex align-items-center me-3">
					<label for="range_picker"> <i class="bi bi-calendar2-week lh-1 fs-4"></i></label>
					<input type="text" name="range_picker" id="range_picker" class="form-control form-control-sm ms-2">
				</div>
				<div class="d-flex">
					<button class="btn btn-sm btn-secondary me-2">
						Filter
						<i class="bi bi-plus"></i>
					</button>
	
					<div class="dropdown">
						<a class="btn btn-sm btn-dark dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
							<i class="bi bi-three-dots-vertical"></i>
						</a>
					  
						<ul class="dropdown-menu dropdown-menu-start">
						  <li><a class="dropdown-item" href="#">Action</a></li>
						  <li><a class="dropdown-item" href="#">Another action</a></li>
						  <li><a class="dropdown-item" href="#">Something else here</a></li>
						</ul>
					</div>
				</div>
			</div>
		</form>

		<div class="row g-3 mb-4">
			<div class="col-lg-3 col-md-4 col-6">
				<div class="summary-card d-flex align-items-center h-100 justify-content-between px-4 py-2 border border-dark" style="background-color: #ffe0cd">
					<div>
						<p class="fs-5 lh-1 mb-2">Total Sale</p>
						<h2 class="summary-value">{{ $result->tot_sales }}</h2>
					</div>
					<img src="{{ asset('restaurant/assets/images/icons/report.png') }}" class="summary-icon" >
				</div>
			</div>
			<div class="col-lg-3 col-md-4 col-6">
				<div class="summary-card d-flex align-items-center h-100 justify-content-between px-4 py-2 border border-dark" style="background-color: #c8eaff">
					<div>
						<p class="fs-5 lh-1 mb-2">Total Customer</p>
						<h2 class="summary-value">{{ $result->tot_cus }}</h2>
					</div>
					<img src="{{ asset('restaurant/assets/images/icons/satisfaction.png') }}" class="summary-icon" >
				</div>
			</div>
			{{-- <div class="col-lg-3 col-md-4 col-6">
				<div class="summary-card d-flex align-items-center h-100 justify-content-between px-4 py-2 border border-dark" style="background-color: #fff8d3">
					<div>
						<p class="fs-5 lh-1 mb-2">Table Served</p>
						<h2 class="summary-value">15</h2>
					</div>
					<img src="{{ asset('restaurant/assets/images/icons/restaurant.png') }}" class="summary-icon" >
				</div>
			</div> --}}
			<div class="col-lg-3 col-md-4 col-6">
				<div class="summary-card d-flex align-items-center h-100 justify-content-between px-4 py-2 border border-dark" style="background-color: #ebd6ff">
					<div>
						<p class="fs-5 lh-1 mb-2">Net Profit</p>
						<h2 class="summary-value">{{ $result->tot_sales - ($result->tot_sales*10)/100 }}</h2>
					</div>
					<img src="{{ asset('restaurant/assets/images/icons/income.png') }}" class="summary-icon" >
				</div>
			</div>
		</div>

		<div class="row g-3 mb-4">
			{{-- <div class="col-lg-4 col-md-6">
				<div class="card h-100 rounded-0">
					<div class="card-header rounded-0 icon-triangle lt">
						<h4>Quick Menu</h4>
					</div>
					<div class="card-body">
						<div class="row g-3">
							<div class="col-6">
								<a href="#" class="quick-menu w-100 d-block border border-dark">
									<div class="quick-menu-img p-4 text-center">
										<div class="icon border border-dark rounded-circle bg-light">
											<i class="bi bi-layout-sidebar display-5"></i>
										</div>
									</div>
									<div class="text-center bg-dark text-white px-2">Point of Sales</div>
								</a>
							</div>
							<div class="col-6">
								<a href="#" class="quick-menu w-100 d-block border border-dark">
									<div class="quick-menu-img p-4 text-center">
										<div class="icon border border-dark rounded-circle bg-light">
											<i class="bi bi-layout-sidebar display-5"></i>
										</div>
									</div>
									<div class="text-center bg-dark text-white px-2">Point of Sales</div>
								</a>
							</div>
							<div class="col-6">
								<a href="#" class="quick-menu w-100 d-block border border-dark">
									<div class="quick-menu-img p-4 text-center">
										<div class="icon border border-dark rounded-circle bg-light">
											<i class="bi bi-layout-sidebar display-5"></i>
										</div>
									</div>
									<div class="text-center bg-dark text-white px-2">Point of Sales</div>
								</a>
							</div>
							<div class="col-6">
								<a href="#" class="quick-menu w-100 d-block border border-dark">
									<div class="quick-menu-img p-4 text-center">
										<div class="icon border border-dark rounded-circle bg-light">
											<i class="bi bi-layout-sidebar display-5"></i>
										</div>
									</div>
									<div class="text-center bg-dark text-white px-2">Point of Sales</div>
								</a>
							</div>
							<div class="col-6">
								<a href="#" class="quick-menu w-100 d-block border border-dark">
									<div class="quick-menu-img p-4 text-center">
										<div class="icon border border-dark rounded-circle bg-light">
											<i class="bi bi-layout-sidebar display-5"></i>
										</div>
									</div>
									<div class="text-center bg-dark text-white px-2">Point of Sales</div>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div> --}}

			<div class="col-lg-4 col-md-6">
				<div class="card h-100 rounded-0">
					<div class="card-header rounded-0 icon-triangle lt d-flex justify-content-between align-items-center">
						<h4>Favourite Product</h4>
						<a href="#">View All</a>
					</div>
					<div class="card-body">
						<ul class="list-group list-group-flush">
							@foreach ($topProducts as $item)
								<li class="list-group-item px-0 py-2 favourite-item">
									<div class="row g-0">
										<div class="col-3">
											<img src="{{ asset("storage/$item->image") }}" class="img-fluid">
										</div>
										<div class="col-6">
											<h6 class="fs-5 mb-1">{{ $item->name_eng }}</h6>
											<small class="badge text-bg-warning">{{ $item->cat_name }}</small>
										</div>
										<div class="col-3">
											<p class="fs-5 fw-bold">৳{{ $item->total }}</p>
											<small>Sale</small>
										</div>
									</div>
								</li>
							@endforeach
						</ul>
					</div>
				</div>
			</div>

			<div class="col-lg-4 col-md-6">
				<div class="card h-100 rounded-0">
					<div class="card-header rounded-0 icon-triangle lt d-flex justify-content-between align-items-center">
						<h4>Customer Growth</h4>
						<a href="#">View Details</a>
					</div>
					<div class="card-body">
						<div id="chart">

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


@section('custom_js')
	<script src="{{ asset('v2/assets/js/apexchart.min.js') }}"></script>

    <script>
		$(document).ready(function() {
			flatpickr('#range_picker', {
				mode: "range",
				dateFormat: "d-m-Y"
			});
		})
		var options = {
			series: [
				{data: [44, 55, 41, 64, 22, 43, 21]},
				{data: [53, 32, 33, 52, 13, 44, 32]},
				// {data: [68, 37, 25, 105, 26, 48, 75]},
			],
			chart: {
				type: 'bar',
				height: 430
			},
			plotOptions: {
				bar: {
					// horizontal: true,
					dataLabels: {
					position: 'top',
					},
				}
			},
			dataLabels: {
				enabled: true,
				offsetX: -6,
				style: {
					fontSize: '12px',
					colors: ['#fff']
				}
			},
			stroke: {
				show: true,
				width: 1,
				colors: ['#fff']
			},
			tooltip: {
				shared: true,
				intersect: false
			},
			xaxis: {
				categories: ['Sat', 'Sun', 'Mon', 'Tues', 'Wed', 'Thu', 'Fri'],
			},
        };

        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
	</script>
@endsection

@endsection