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

	 
	$search_term = $search_key;
?>
	<div class="elex-multi-vendor-for-woocommerce-wrap elex-multi-vendor-for-woocommerce-wrap-front overflow-hidden d-flex flex-fill">
		<!-- =====================main-content================== -->
		<div class="elex-multi-vendor-for-woocommerce-main p-2 ">
			<!-- ===========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 m-0 ">Orders</div>
			</div>

			<!-- main content top link and search -->
			<div class="row justify-content-between ">
				<div class="col-xl-6 col-lg-7 col-md-8">
					<div class="row">
						<?php if ( get_post_meta( $store_id, 'elex_mv_vendor_to_change_order_status', true ) ) { ?>
						<div class="col-lg-7 mb-3">
							<div class="form-group d-flex gap-2 h-100">
								<select name="status" class="form-select elex_mv_bulk_status">
									<option value="">Bulk Actions</option>
									<option value="on-hold">Change Status to On-hold</option>
									<option value="processing">Change Status to Processing</option>
									<option value="completed">Change Status to Completed</option>
									<option value="refunded">Change Status to Refunded</option>
								</select>
								<button class="btn btn-primary px-4 elex_mv_order_bulk_action">Apply</button>
							</div>
						</div>
						<?php } ?>
						<div class="col-lg-5 mb-3">
							<div class="input-group h-100 border border-1 rounded-3">
								<input value="<?php echo esc_html( $search_term ); ?>" type="text" placeholder="Search Orders" class="form-control border-0 p-2 elex_mv_search_order_data">
								<?php
								if ( $search_term ) {
									?>
																<button class="input-group-text  bg-transparent border-0" id = "elex_mv_search_order_cross" ><svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="16" height="16" style="stroke-width:1;stroke:#000"><path d="M23.707.293h0a1,1,0,0,0-1.414,0L12,10.586,1.707.293a1,1,0,0,0-1.414,0h0a1,1,0,0,0,0,1.414L10.586,12,.293,22.293a1,1,0,0,0,0,1.414h0a1,1,0,0,0,1.414,0L12,13.414,22.293,23.707a1,1,0,0,0,1.414,0h0a1,1,0,0,0,0-1.414L13.414,12,23.707,1.707A1,1,0,0,0,23.707.293Z"/></svg></button>

								<?php
								}
								?>

								<button class="input-group-text elex_mv_search_order border-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
							</div>
						</div>
					</div>

				</div>




			</div>


			<!-- main content top 2nd link section -->
			<div class="row ">
				<div class="col-lg-7 col-md-8 overflow-auto mb-2 elex-multi-vendor-for-woocommerce-product-filters">
					<div class="d-flex gap-2 flex-wrap p-md-0 px-2 py-4 elex-table-links-btn">
						<div class="fs-5 fw-semi-bold d-md-none mb-2 text-center">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 22 20">
								<path id="Icon_feather-filter" data-name="Icon feather-filter" d="M22.2,2.517H2.2l8,10v6l4,2v-8Z" transform="translate(-1.197 -1.517)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
								</svg> Filter Options
						</div>
						<a href="<?php echo esc_url( add_query_arg( array( 'status' => 'all' ) ) ); ?>" class="btn border border-secondary bg-secondary bg-opacity-25 text-secondary elex-multi-vendor-for-woocommerce-all-vendors text-nowrap  
											<?php 
											if ( empty( $GET_status ) || 'all' === $GET_status ) {
					echo 'active'; } 
											?>
						" >All</a>
						<a href="<?php echo esc_url( add_query_arg( array( 'status' => 'wc-on-hold' ) ) ); ?>" class="btn border border-secondary bg-secondary bg-opacity-25 text-secondary elex-multi-vendor-for-woocommerce-all-vendors text-nowrap  
											<?php 
											if ( 'wc-on-hold' === $GET_status ) {
					echo 'active'; } 
											?>
						" >On-hold</a>
						<a href="<?php echo esc_url( add_query_arg( array( 'status' => 'wc-processing' ) ) ); ?>" class="btn border border-secondary bg-secondary bg-opacity-25 text-secondary elex-multi-vendor-for-woocommerce-all-vendors text-nowrap  
											<?php 
											if ( 'wc-processing' === $GET_status ) {
					echo 'active'; } 
											?>
						" >Processing</a>
						<a href="<?php echo esc_url( add_query_arg( array( 'status' => 'wc-completed' ) ) ); ?>" class="btn border border-secondary bg-secondary bg-opacity-25 text-secondary elex-multi-vendor-for-woocommerce-all-vendors text-nowrap  
											<?php 
											if ( 'wc-completed' === $GET_status ) {
					echo 'active'; } 
											?>
						" >Completed</a>
						<a href="<?php echo esc_url( add_query_arg( array( 'status' => 'wc-refunded' ) ) ); ?>" class="btn border border-secondary bg-secondary bg-opacity-25 text-secondary elex-multi-vendor-for-woocommerce-all-vendors text-nowrap  
											<?php 
											if ( 'wc-refunded' === $GET_status ) {
					echo 'active'; } 
											?>
						" >Refunded</a>


					</div>
				</div>
				
				<div class=" ms-auto col-lg-5 col-md-4  mb-3">

					<div class="d-flex flex-wrap gap-2 nav-fill justify-content-end">
					<!-- <a href="#" class="text-decoration-underline btn fs-6 text-info" id="clear-filter-for-vendor-order-btn" >clear filters</a> -->

					<?php if ( get_post_meta( $store_id, 'elex_mv_vendor_to_change_order_status', true ) ) { ?>
						<button class="btn btn-outline-primary elex-multi-vendor-for-woocommerce-order-filter-open-btn text-nowrap d-md-none w-100">
						<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
							<path id="Icon_feather-filter" data-name="Icon feather-filter" d="M22.2,2.517H2.2l8,10v6l4,2v-8Z" transform="translate(-1.197 -1.517)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
						</svg>filter</button>

						<button class=" btn btn-outline-primary elex-multi-vendor-for-woocommerce-order-add-filter-open-btn text-nowrap" data-attr-filter="<?php echo esc_attr( ! empty( get_query_var( 'status' ) ) ? get_query_var( 'status' ) : 'all' ); ?>">
						<svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" viewBox="0 0 22 20">
							<path id="Icon_feather-filter" data-name="Icon feather-filter" d="M22.2,2.517H2.2l8,10v6l4,2v-8Z" transform="translate(-1.197 -1.517)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
						</svg>
							Advance Filter
						</button>
					<?php } ?>
						<button class="btn btn-outline-primary elex-multi-vendor-for-woocommerce-order-add-export-open-btn text-nowrap" data-attr-filter="<?php echo esc_attr( ! empty( get_query_var( 'status' ) ) ? get_query_var( 'status' ) : 'all' ); ?>" >Export</button>
					</div>
				</div>
			
			</div>

			<div class="d-flex flex-column align-items-between table-responsive">
				<!-- order list table -->
				<table class="table table-borderless align-middle text-dark elex-multi-vendor-for-woocommerce-table">
					<thead class="table-secondary rounded-2">
						<tr class="">
							<th scope="col" width="30px" class="align-top"><input type="checkbox" class="form-check-input"></th>
							<th scope="col">Order Details</th>
							<th scope="col">Order By</th>
							<th scope="col">Items</th>
							<th scope="col">Total</th>
							<th scope="col">Admin Commission</th>
							<th scope="col">Actions</th>
						</tr>
					</thead>
					<tbody>
						<?php 
						foreach ( $orders as $order_data ) { 
							
					
							?>
						<tr class="shadow-sm rounded-3">
							<th class="align-top"><input type="checkbox" id="<?php echo esc_attr( $order_data->get_id() ); ?>" class="form-check-input elex_mv_order_check"></th>

							<td>
								<div class="fs-6  mb-0"><a href="<?php echo esc_attr( add_query_arg( array( 'order_id' => $order_data->get_id() ) ) ); ?>" class="elex_mv_order_page_detail" data-attr-order-id= "<?php echo esc_attr( $order_data->get_id() ); ?>" >#<?php echo esc_attr( $order_data->get_id() ); ?></a></div>
								<div class="fs-6 mb-1 "><small><?php echo esc_attr( $order_data->get_date_created()->date( 'd-m-Y' ) ); ?></small></div>
								<?php if ( 'on-hold' === $order_data->get_status() ) { ?>
								<div class="fs-6  ps-3 ms-2 position-relative text-warning mb-2">
									On-hold
									<span class="position-absolute top-50 start-0 translate-middle p-2 bg-warning  rounded-circle"></span>
								</div>
								<?php 
								} 
								if ( 'processing' === $order_data->get_status() ) {
									?>
								<div class="fs-6 ps-3 ms-2 position-relative text-info mb-2 ">
									Processing
									<span class="position-absolute top-50 start-0 translate-middle p-2 bg-info  rounded-circle"></span>
								</div>
								<?php 
								} 
								if ( 'completed' === $order_data->get_status() ) {
									?>
								<div class="fs-6 ps-3 ms-2 position-relative text-success mb-2 ">
									Completed
									<span class="position-absolute top-50 start-0 translate-middle p-2 bg-success  rounded-circle"></span>
								</div>   
								<?php 
								} 
								if ( 'refunded' === $order_data->get_status() ) {
									?>
								<div class="fs-6 ps-3 ms-2 position-relative text-danger mb-2 ">
									Refunded
									<span class="position-absolute top-50 start-0 translate-middle p-2 bg-danger  rounded-circle"></span>
								</div>
								<?php } ?>
							</td>
							<td>
								<div class="fs-6 mb-1 fw-semi-bold"><?php echo esc_attr( $order_data->get_billing_first_name() ); ?></div>
							</td>
							<td>
								<div class="fs-6 mb-1 fw-semi-bold"><?php echo esc_attr( $order_data->get_item_count() ); ?></div>
							</td>
							<td>
								<div class="fs-6 mb-1 fw-semi-bold">
								<?php 
								$total_refunded = $order_data->get_total_refunded();
								if ( $total_refunded ) {
									$formatted_total = '<del aria-hidden="true">' . wp_strip_all_tags( $order_data->get_total() ) . '</del> <ins>' . wc_price( $order_data->get_total() - $total_refunded, array( 'currency' => $order_data->get_currency() ) ) . '</ins>';
									echo wp_kses_post( $formatted_total );
								} else {
									echo esc_attr( $order_data->get_total() ); 

								}

								?>
								</div>
							</td>
							<td>
								<div class="fs-6 mb-1 fw-semi-bold">
								<?php
								
								$admin_earned          = $order_data->get_meta( 'elex_mv_admin_earning', true );
								$refund_amount         = $order_data->get_meta( 'elex_mv_admin_commission_refund_amount_products', true );
								$order_currency        = $order_data->get_currency();
								$order_currency_symbol = get_woocommerce_currency_symbol( $order_currency );

								if ( $refund_amount ) {
									printf( '<del>%s</del> ', wp_kses_post( wc_price( $admin_earned ) ) );
				
									echo ' <span class="tips" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-outline-primary"
									data-bs-placement="bottom" title=" ' . esc_attr( sprintf( /* translators: %s: refunded amount */ __( 'Refunded Amount %s', 'elex-multi-vendor-for-woocommerce' ), $order_currency_symbol . esc_html( $refund_amount ) ) ) . ' "><ins >' . wp_kses_post( wc_price( (float) $admin_earned - (float) $refund_amount ) ) . '</ins></span>';
				
								} else {
									printf( '<p>%s</p>', wp_kses_post( wc_price( $admin_earned ) ) );
				
								}

								?>
								</div>
							</td>
							<?php if ( get_post_meta( $store_id, 'elex_mv_vendor_to_change_order_status', true ) ) { ?>
							<td>
								<button class="btn text-primary d-flex gap-2 align-items-center elex-multi-vendor-for-woocommerce-order-change-status-open-btn" data-attr-id="<?php echo esc_attr( $order_data->get_id() ); ?>" data-attr-status="<?php echo esc_attr( $order_data->get_status() ); ?>">
								<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 27.15 28.331">
									<g id="change_icon" data-name="change icon" transform="translate(-1696.625 -158.207)">
										<path id="Path_40" data-name="Path 40" d="M1697.246,132.25h14.43" transform="translate(5.275 31.93)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-width="3"/>
										<path id="Path_41" data-name="Path 41" d="M1697.656,132.75H1711" transform="translate(5.473 47.443)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-width="3"/>
										<path id="Path_42" data-name="Path 42" d="M1710.319,163.325l3.391,3.789-3.391,4.713" transform="translate(8.565 -3)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
										<path id="Path_43" data-name="Path 43" d="M1713.71,163.325l-3.391,3.789,3.391,4.713" transform="translate(-12.194 12.617)" fill="none" stroke="#3f5980" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
									</g>
								</svg>Change Status</button>
							</td> 
							<?php } ?>  
						</tr>
						<?php } ?>
					</tbody>
				</table>


			<!-- pagination -->
			<!-- previous & Next -->
			<div class="position-sticky  bottom-0 left-0">
				<div class="w-100 d-flex justify-content-center gap-3 ">
					<?php
				// Previous page
					if ( $current_page > 1 ) {
						echo '<a href="' . esc_url( add_query_arg( array( 'page_order' => $current_page - 1 ) ) ) . '" class="btn"><i class="fa-solid fa-chevron-left me-1"></i>Previous</a>';
					}
				// Next page
				
					if ( $current_page < $total_order_per_page ) {

						echo '<a href="' . esc_url( add_query_arg( array( 'page_order' => $current_page + 1 ) ) ) . '"  class="btn ">Next<i class="fa-solid fa-chevron-right ms-1"></i></a>';
					}
					?>
				</div>
			</div>

				
			</div>


		</div>




		<!-- popup -->


		<!-- advance filter -->
		<div class="bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup row justify-content-end w-100" id="elex-multi-vendor-for-woocommerce-order-add-filter">
			<div class="col-lg-6 col-md-9 bg-white h-100 ms-auto overflow-auto">
				<div class="py-2 px-4 text-center position-relative">
					<div class="fs-5 mb-1 fw-semi-bold">Advance Filter</div>
					<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-add-filter-close-btn">
						<i class="fa-solid fa-xmark"></i>
					</button>
				</div>
			  
				<form method='GET' id="elex_mv_order_filter_data"  >
				<input type="hidden" name="action" value="elex_mv_filter_data"></input>
				<input type="hidden" name="menu_tab" value="orders"></input>
				<?php wp_nonce_field( 'mv_nonce', 'nonce', false ); ?>
				<div class="px-md-5 px-2 py-3">
					<div class="form-group mb-3">
						<label>Status</label>
						<select name="status" id="elex_mv_filter_status" class="form-select elex_mv_current_status">
							<option value="all">All</option>
							<option value="wc-processing">Processing</option>
							<option value="wc-on-hold">On-hold</option> 
							<option value="wc-completed">Completed</option>
							<option value="wc-refunded">Refunded</option>   
						</select>
					</div>

					<div class="d-flex gap-3 mb-4">
						<div class="form-group w-50">
							<label for="">From</label>
							<input type="date" name="from_date" class="form-control">
						</div>
						<div class="form-group w-50">
							<label for="">To</label>
							<input type="date" name="to_date" class="form-control">
						</div>
					</div>

					<button class="btn btn-primary w-100 elex_mv_order_filter" id="elex_mv_order_filter">Apply Filters</button>
				</div>
				</form>



			</div>
		</div>


		<!-- Export -->
		<div class="bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup row justify-content-end w-100" id="elex-multi-vendor-for-woocommerce-order-add-export">
			<div class="col-lg-6 col-md-9 bg-white h-100 ms-auto overflow-auto">
				<div class="py-2 px-4 text-center position-relative">
					<div class="fs-5 mb-1 fw-semi-bold">Export</div>
					<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-add-export-close-btn">
						<i class="fa-solid fa-xmark"></i>
					</button>
				</div>
			  
				<div class="px-md-5 px-2 py-3">
				<form id="elex-multi-vendor-for-woocommerce-vendor-order-export-form" action="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>" method="post">
				<input type="hidden" name="action" value="elex_mv_vendor_order_export"></input>
				<input type="hidden" name="vendor_id" class="elex_mv_order_vendor_id" value="<?php echo esc_attr( $store_id ); ?>"></input>
				<?php wp_nonce_field( 'mv_nonce', 'nonce' ); ?>
					<div class="form-group mb-3">
						<label>Status</label>
						<select name="elex_mv_order_status" id="elex_mv_order_status" class="form-select elex_mv_current_status">
							<option value="all">All</option>
							<option value="wc-processing">Processing</option>
							<option value="wc-on-hold">On-hold</option>
							<option value="wc-completed">Completed</option>
							<option value="wc-refunded">Refunded</option>                   
						</select>
					</div>

					<div class="form-group mb-3">
						<label>Type</label>
						<select name="file_format" id="" class="form-select elex_mv_current_status">
							<option value="csv">CSV</option>
						</select>
					</div>

					<div class="d-flex gap-3 mb-4">
						<div class="form-group w-50">
							<label for="">From</label>
							<input name="from_date" type="date" class="form-control">
						</div>
						<div class="form-group w-50">
							<label for="">To</label>
							<input name="to_date" type="date" class="form-control">
						</div>
					</div>

					<button class="btn btn-primary w-100">Export</button>
					</form>
				</div>
		   

			</div>
		</div>


		<!-- Change Status -->
		<div class="bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup row justify-content-end w-100" id="elex-multi-vendor-for-woocommerce-order-change-status">
			<div class="col-lg-6 col-md-9 bg-white h-100 ms-auto overflow-auto">
				<div class="py-2 px-4 text-center position-relative mt-5">
					<div class="fs-5 mb-1 fw-semi-bold">Change Status</div>
					<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-change-status-close-btn">
						<i class="fa-solid fa-xmark"></i>
					</button>
				</div>
				<div class="px-md-5 px-2 py-3">
				<form id="elex-multi-vendor-for-woocommerce-change-status-form" method="post">
				<input type="hidden" name="action" value="elex_mv_change_status"></input>
				<input type="hidden" name="order_id" class="elex_change_status_order_id" value=""></input>
				<?php wp_nonce_field( 'mv_nonce', 'nonce' ); ?>
					
					<div class="form-group mb-3">
						<label>Status</label>
						<select name="status" id="" class="form-select elex_mv_current_status">
							<option >Select</option>
							<option value="processing">Processing</option>
							<option value="on-hold">On-hold</option>
							<option value="completed">Completed</option>
							<option value="refunded">Refunded</option>
						</select>
					</div>
					<button class="btn btn-primary w-100">Save Changes</button>
					</form>
				</div>
			</div>
		</div>


	</div>


