<?php if ( ! defined( 'ABSPATH' ) ) {
exit;} ?>


	<div class="elex-multi-vendor-for-woocommerce-wrap elex-multi-vendor-for-woocommerce-wrap-admin overflow-hidden d-flex">
		
		

		<!-- ======================main content============ -->
		<div class="elex-multi-vendor-for-woocommerce-main ps-2 bg-white " >
		<img class="w-100 mb-2" src="<?php echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'images/top-banner.png' ); ?>" alt="">

			<!-- ===========side panel open button========= -->
			<div class="d-flex mb-3 gap-4 align-items-center elex-multi-vendor-for-woocommerce-side-panel-open-div d-md-none">
				<!-- side panel open button -->
				<button class=" btn p-1 shadow-none fs-5   bg-white text-primary position-relative " id="elex-multi-vendor-for-woocommerce-side-panel-open-btn"><svg height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg></button>
				<h5 class="m-0 ">Dashboard</h5>
			</div>

			<div class="row pe-4 py-2">

			<div class="col-12">
					<form action="" id="apply_filter_admin_dashboard_form">

					<h5 class="fw-bold">Data Filter</h5>
					<div class="row">
						<div class="col-lg-4 col-md-6 mb-3">
							<div class="d-flex align-items-center gap-3">
								<label class="text-nowrap">From Date</label>
								<input type="date" id="admin-dashboard-from-date" name="from" max="<?php echo esc_attr( gmdate( 'Y-m-d' ) ); ?>" class="form-control">
							</div>
						</div>
						<div class="col-lg-4 col-md-6 mb-3">
							<div class="d-flex align-items-center gap-3">
								<label class="text-nowrap">To Date</label>
								<input type="date" name="to" value="<?php echo esc_attr( gmdate( 'Y-m-d' ) ); ?>" max="<?php echo esc_attr( gmdate( 'Y-m-d' ) ); ?>"  class="form-control">
							</div>
						</div>
						<div class="col-lg-2 mb-3">
							<button class="btn elex-multi-vendor-for-woocommerce-bg-light-blue btn-primary w-100 h-100" id="apply_filter_admin_dashboard_btn" type="button">Apply</button>
						</div>
					</div>

					</form>
					
				</div>
				<div class="col-lg-12">
					<div class="border border-primary rounded-3 mb-3 p-4">
						<div class="d-flex gap-3 justify-content-between align-items-center">
					
							<div class="flex-fill border-2 border-end border-secondary d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Total Sales <i
												class="fa-regular fa-circle-question elex-multi-vendor-for-woocommerce-dashboard-net-sales" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-outline-primary"
												data-bs-placement="bottom"
												title="Net sales include the product price, shipping costs, and any applicable tax amounts"></i>
									</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-net-sales" ></h4>
									</div>
								</div>
							</div>

						

							<div class="flex-fill border-2 border-end border-secondary d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Total Orders</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-order-placed"  ></h4>
									</div>
								</div>
							</div>


							<div class="flex-fill border-2 border-end border-secondary d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Commission Earned</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-commission-earned"  ></h4>
									</div>
								</div>
							</div>
						

							<div class="flex-fill border-2 border-end border-secondary d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Total Refund</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-vendor-refund"  ></h4>
									</div>
								</div>
							</div>

							<div class="flex-fill border-2 border-end border-secondary d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Vendors</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-vendor-count"  ></h4>
									</div>
								</div>
							</div>
						
							<div class="flex-fill d-flex justify-content-center">
								<div>
									<h6 class="mb-4">Products
										<i class="fa-regular fa-circle-question elex-multi-vendor-for-woocommerce-dashboard-net-sales" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-outline-primary" data-bs-placement="bottom" title="" data-bs-original-title="Rejected products are excluded from the total product count." aria-label="Rejected products are excluded from the total product count."></i>
									</h6>
									<div class="d-flex gap-3 justify-content-center">
										<h4 id="admin-dashboard-product-count"  ></h4>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- left side of dashboard -->
				<div class="col-lg-5 d-flex flex-column gap-3 mb-3">

					

					<!-- Order Details dashboard sec -->
					<div class="border border-primary rounded-3  p-2">
						<h6>Order Details</h6>
						<div class="row ">
							<div class="col-md-5 col-sm-6 ">
								<div class="ratio ratio-1x1 border border-5 border-primary rounded-circle box-shadow-inset">
									<div class="d-flex align-items-center justify-content-center">
										<div class="text-center">
											<h6>Total Orders</h6>
											<h3 id="admin-dashboard-total-orders-section"></h3>
										</div>
									</div>
								</div>

							</div>
							<div class="col-md-7 col-sm-6 d-flex flex-column gap-1 justify-content-between">

								<div class="row">
									<div class="col-7">
										<h6>On-hold</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-on-hold"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Completed</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-completed"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Cancelled</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-cancelled" ><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Pending</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-pending" ><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Processing</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-processing" ><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Refunded</h6>
									</div>
									<div class="col-5" id="admin-dashboard-total-orders-refunded" ><b></b></div>
								</div>
							</div>
						</div>

					</div>

					<!-- Products Details dashboard sec -->
					<div class="border border-primary rounded-3  p-2">
						<h6>Product Details
							<i class="fa-regular fa-circle-question elex-multi-vendor-for-woocommerce-dashboard-net-sales" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-outline-primary" data-bs-placement="bottom" title="" data-bs-original-title="Rejected products are excluded from the total product count." aria-label="Rejected products are excluded from the total product count."></i>
						</h6>
						<div class="row ">
							<div class="col-md-5 col-sm-6">
								<div class="w-75 mx-auto">
									<div class="ratio ratio-1x1 border border-5 border-primary rounded-circle box-shadow-inset">
										<div class="d-flex align-items-center justify-content-center">
											<div class="text-center">
												<h6>Total Products</h6>
												<h3 id="admin-dashboard-total-product-count"></h3>
											</div>
										</div>
									</div>
								</div>


							</div>
							<div class="col-md-7 col-sm-6 d-flex flex-column gap-1 justify-content-between mb-3">





								<div class="row">
									<div class="col-7">
										<h6>Approved</h6>
									</div>
									<div class="col-5" id="admin-dashboard-product-status-publish"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Pending</h6>
									</div>
									<div class="col-5" id="admin-dashboard-product-status-pending" ><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Rejected</h6>
									</div>
									<div class="col-5" id="admin-dashboard-product-status-rejected" ><b></b></div>
								</div>

							</div>
						</div>

					</div>

					<!--Top Vendor -->
					<div class="border border-primary rounded-3  p-2">
						<h6>Top Vendor</h6>
						<div class="row ">
							<div class="col-md-4 col-sm-6">
								<div class="w-75 mx-auto">
									<div class="ratio ratio-1x1  border-primary rounded-circle shadow-sm overflow-hidden">
										<img id="top_vendor_image" src="<?php echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'assets/images/default-store-icon.svg' ); ?>" alt="">
									</div>
								</div>


							</div>
							<div class="col-md-8 col-sm-6 d-flex flex-column gap-1 justify-content-between">





								<div class="row">
									<div class="col-7">
										<h6 class="mb-0" id="admin-dashboard-top-vendor-name"></h6>
										<div class="text-secondary" id="admin-dashboard-top-vendor-email"><small></small></div>
									</div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Total Sale</h6>
									</div>
									<div class="col-5" id="admin-dashboard-top-vendor-sales" ><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Commission Earned</h6>
									</div>
									<div class="col-5" id="admin-dashboard-top-vendor-commission" ><b></b></div>
								</div>

							</div>
						</div>

					</div>


					<!--Most Sold Product -->
					<div class="border border-primary rounded-3  p-2">
						<h6>Most Sold Product</h6>
						<div class="row ">
							<div class="col-md-4 col-sm-6">
								<div class="w-75 mx-auto">
									<div id="most_sold_product_image" class="ratio ratio-1x1  border-primary rounded-circle shadow-sm overflow-hidden">
										<img src="<?php echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'assets/images/default-store-icon.svg' ); ?>" alt="">
									</div>
								</div>


							</div>
							<div class="col-md-8 col-sm-6 d-flex flex-column gap-1 justify-content-center">
								<div class="row">
									<div class="col-7">
										<h6 class="mb-0" id="admin-dashboard-top-sold-product-name" ></h6>
										<div  id="admin-dashboard-top-sold-product-author"  ><small> </small></div>
									</div>
								</div>

								<div class="row">
									<div class="col-7">
										<h6>Units Sold:</h6>
									</div>
									<div class="col-5" id="admin-dashboard-top-sold-product-unit-sold"><b></b></div>
								</div>

								

							</div>
						</div>

					</div>


				</div>

				<!-- Right side of dashboard -->
				<div class="col-lg-7 d-flex flex-column gap-3 mb-3">
					<div class="border border-primary rounded-3  p-2 d-flex w-100 align-items-end " style="min-height: 200px;height:50%">
						<!-- chart from chart.js -->
						<div class="chartBox" style="width:100%;" >
							<canvas id="adminChart"></canvas>
						</div>
					</div>

				  
					<div class="border border-primary rounded-3  p-2 " style="min-height: 200px;height:50%">
					<div class="row justify-content-between align-content-center">
							<div class="col-6">
								<h5>Top Countries</h5>
							</div>
						</div>
						<div id="chartmap" style="width:100%; height:calc(100% - 40px);"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

