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

<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>

</head>

<body>
		<!-- ====================side panel=============== -->
	 
		<!-- side panel open button -->
		<!-- <button class="btn btn-outline-primary bg-white text-primary rounded-circle position-absolute shadow mt-3 ms-3" id="elex-multi-vendor-for-woocommerce-side-panel-open-btn"><i class="fa-solid fa-bars"></i></button> -->

		<!-- ====================end of side panel=============== -->


		<!-- ======================main content============ -->
		<div class="elex-multi-vendor-for-woocommerce-main ps-2  " style="">
			<!-- ===========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>
				<div class="fs-5 fw-semi-bold mb-2 m-0 ">Dashboard</div>
			</div>

			<div class="d-flex flex-wrap gap-3 ps-2 pe-4 py-2 elex-multi-vendor-for-woocommerce-front-dashboard-main">
				<!-- left side of dashboard -->
				<div class="col-12">
				<form action="" id="apply_filter_vendor_dashboard_form">

					<div class="fs-5 fw-bold fw-semi-bold mb-1">Date Filter</div>
					<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="vendor-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  id="apply_filter_vendor_dashboard_btn" type="button" class="btn elex-multi-vendor-for-woocommerce-bg-light-blue btn-primary w-100">Apply</button>
						</div>
					</div>
				</form>

				</div>
				<div class="elex-multi-vendor-for-woocommerce-front-dashboard-left" >

					<!-- total sales , commission, refunded, earnings dashboard sec -->
					<div class="border border-primary rounded-3 mb-3 elex-multi-vendor-for-woocommerce-dashboard-sales">
						<div class="row text-center">

							<div class="col-6 ">
								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Total Product 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="" data-bs-original-title="Total product sales do not include the shipping cost and any other applicable tax amount." aria-label="Total product sales do not include the shipping cost and any other applicable tax amount."></i></div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center" id="vendor_total_vendor_sales" ></div>
								</div>

								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Total Product Refunded Amount:</div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center" id="vendor_total_refund_amount" ></div>
								</div>
								
								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Total Shipping Cost:</div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center"  id="vendor_total_shipping_cost"  ></div>
								</div>
							</div>


							<div class="col-6 ">
								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Total Admin's Commission:</div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center" id="vendor_total_commission" ></div>
								</div>

								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Your Total Earnings:</div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center" id="vendor_total_earning_after_refund"></div>
								</div>
								
								<div class="elex_mv_dashboard_box">
									<div class="fs_s fw-semi-bold mb-2" >Total Shipping Refunded:</div>
									<div class="fs-3 fw-semi-bold mb-2 flex-fill d-flex justify-content-center align-items-center" id="vendor_total_shipping_refunded_cost" ></div>
								</div>
							</div>

					
						</div>

					</div>

					<!-- Order Details dashboard sec -->
					<div class="border border-primary rounded-3 mb-3 p-2">
						<div class="fs-6 fw-semi-bold mb-1">Order Details</div>
						<div class="row ">
							<div class="col-md-5 col-sm-6 d-flex align-items-center">
								<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">
											<div class="fs_s fw-semi-bold my-1">Total Orders</div>
											<div class="fs-3 fw-semi-bold my-1" id="vendor_total_orders"></div>
										</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">
										<div class="fs_s fw-semi-bold mb-1">On-hold</div>
									</div>
									<div class="col-5" id="vendor_total_on_hold_orders"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Completed</div>
									</div>
									<div class="col-5" id="vendor_total_completed_orders"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Cancelled</div>
									</div>
									<div class="col-5" id="vendor_total_cancelled_orders"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Pending</div>
									</div>
									<div class="col-5" id="vendor_total_pending_orders"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Processing</div>
									</div>
									<div class="col-5" id="vendor_total_processing_orders"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Refunded</div>
									</div>
									<div class="col-5" id="vendor_total_refunded_orders"><b></b></div>
								</div>


							</div>
						</div>

					</div>

					<!-- Products Details dashboard sec -->
					<div class="border border-primary rounded-3 mb-3 p-2">
						<div class="fs-6 fw-semi-bold mb-1">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>
						</div>
						<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">
												<div class="fs_s fw-semi-bold my-1" >Total Products</div>
												<div class="fs-3 fw-semi-bold my-1" id="vendor_total_products"></div>
											</div>
										</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">
										<div class="fs_s fw-semi-bold mb-1">Approved</div>
									</div>
									<div class="col-5" id="vendor_total_approved_products"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Pending</div>
									</div>
									<div class="col-5" id="vendor_total_pending_products"><b></b></div>
								</div>

								<div class="row">
									<div class="col-7">
										<div class="fs_s fw-semi-bold mb-1">Rejected</div>
									</div>
									<div class="col-5" id="vendor_total_rejected_products"><b></b></div>
								</div>

							</div>
						</div>

					</div>


				</div>

				<!-- Right side of dashboard -->
				<div class="d-flex flex-column elex-multi-vendor-for-woocommerce-front-dashboard-right" >
					<div class="border border-primary rounded-3 mb-3 p-2" style="height:50%">
						<div class="row">
							<div class="col-8">
								<div class="fs-5 fw-semi-bold mb-1">Sales Last 7 days</div>
							</div>
							<div class="col-4">
								<div class="input-group input-group-sm mb-3">

									<select class="form-select elex_simple_select" name="elex_mv_sales_chart_product" id="elex_mv_sales_chart_product" data-attr-store-id="<?php echo esc_attr( $store_id ); ?>">
									<option value="">All</option>
									<?php foreach ( $products as $product ) { ?>
										<option value="<?php echo esc_attr( $product->ID ); ?>"><?php echo esc_attr( $product->post_title ); ?></option>
										<?php } ?>
									</select>
							  
								</div>

							</div>
						</div>
						<!-- chart from chart.js -->
						<div class="chartBox" style="min-height: 400px;height:calc(100% - 60px)">
							<canvas id="myChart"></canvas>
						</div>
					</div>


					<div class="border border-primary rounded-3 mb-3 p-2"  style="height:50%">
						<div class="row justify-content-between align-content-center">
							<div class="col-6">
								<div class="fs-5 fw-semi-bold mb-1">Top Countries</div>
							</div>
							<div class="col-6 col-md-4">
								<select name="" id="elex_mv_country_days_data" class="form-select elex_simple_select" data-attr-store-id="<?php echo esc_attr( $store_id ); ?>">
									<option value="-7 days">Last 7 Days</option>
									<option value="-29 days">Last 30 Days</option>
									<option value="-1 year">Last 1 Year</option>
								</select>
							</div>
						</div>
						<div id="chartdiv" style="width:100%; min-height: 400px;height:calc(100% - 60px)"></div>
					</div>
				</div>
			</div>
		</div>

	
</body>

</html>

