<?php if ( ! defined( 'ABSPATH' ) ) {
exit;} ?>
<div class="elex-multi-vendor-for-woocommerce-wrap elex-order-details-page 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="toast p-3 position-fixed top-0 start-50 translate-middle-x bg-white mt-3"
			id="elex_mv_refund_item_toast" style="min-width: 450px; z-index:999999999;">
			<div class="toast-header border-0 border-bottom p-0 pb-2">
				<strong class="mx-auto">
					<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 20 22" class="me-2">
						<g id="Icon_feather-trash-2" data-name="Icon feather-trash-2" transform="translate(-3.5 -2)">
							<path id="Path_648" data-name="Path 648" d="M4.5,9h18" transform="translate(0 -2)"
								fill="none" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round"
								stroke-width="2" />
							<path id="Path_649" data-name="Path 649"
								d="M21.5,7V21a2,2,0,0,1-2,2H9.5a2,2,0,0,1-2-2V7m3,0V5a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2V7"
								transform="translate(-1 0)" fill="none" stroke="#dc3545" stroke-linecap="round"
								stroke-linejoin="round" stroke-width="2" />
							<path id="Path_650" data-name="Path 650" d="M15,16.5v6" transform="translate(-3.5 -4.5)"
								fill="none" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round"
								stroke-width="2" />
							<path id="Path_651" data-name="Path 651" d="M21,16.5v6" transform="translate(-5.5 -4.5)"
								fill="none" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round"
								stroke-width="2" />
						</g>
					</svg>
					Confirm Refund</strong>
				<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
			</div>
			<div class="toast-body p-0">
				<p class="my-2">Are you sure, you want to refund?</p>

				<div class="d-flex gap-3 justify-content-center ">
					<button class="btn px-4 btn-outline-secondary" data-bs-dismiss="toast">Cancel</button>
					<button class="btn px-4 btn-primary" data-bs-dismiss="toast" id="elex_mv_refund_item_toast_confirm">
						Confirm
					</button>
				</div>
			</div>
		</div>

		<div class="toast p-2 position-fixed top-0 start-50 translate-middle-x bg-white"
			id="elex_mv_refund_successful_toast" style="z-index:999999999;">
			<div class="toast-header border-0 ">
				<strong class="me-auto ">
					<svg xmlns="http://www.w3.org/2000/svg" width="22.415" height="22.026" viewBox="0 0 22.415 22.026"
						class="me-2 elex_mv_refund_successful_toast_svg">
						<g id="Icon_feather-check-circle" data-name="Icon feather-check-circle"
							transform="translate(-1.998 -1.979)">
							<path id="Path_646" data-name="Path 646" d="M23,12.076V13a10,10,0,1,1-5.93-9.139"
								fill="none" stroke="#28a745" stroke-linecap="round" stroke-linejoin="round"
								stroke-width="2" />
							<path id="Path_647" data-name="Path 647" d="M26.5,6l-10,10.009-3-3"
								transform="translate(-3.5 -1.003)" fill="none" stroke="#28a745" stroke-linecap="round"
								stroke-linejoin="round" stroke-width="2" />
						</g>
					</svg>
					<span id="elex_mv_refund_successful_toast_msg"> Refunded Successfully </span>
				</strong>
				<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
			</div>
		</div>


		<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 ">Order Details</div>
		</div>
		<div class="mb-3">
			<a href="<?php echo esc_url( remove_query_arg( 'order_id' ) ); ?>"
				class="btn btn-sm btn-outline-primary rounded-pill"><i class="fa-solid fa-chevron-left"></i>
				Back</a>
		</div>

		<!-- oreder-details box -->
		<div class="card mb-3">
			<div class="card-header d-flex justify-content-between">
				<div class="fs-5 fw-semi-bold mb-0">Order Details</div>
				<button class="btn btn-sm" id="elex-multi-vendor-for-woocommerce-order-dertail-expand-collapse-btn" data-bs-toggle="collapse"
					data-bs-target=".order-details-colpse" aria-expanded="true"
					aria-controls="order-details-colpse">Expand</button>
			</div>
			<div class="card-body">
				<div class="row mb-3">
					<div class="col-md-7">
						<div class="fs-5 fw-semi-bold mb-1"> <?php echo esc_attr( 'Order #' . $order->get_id() ); ?>
						</div>
						<small><?php echo wp_kses_post( 'Dated: ' . gmdate( 'd-m-Y', strtotime( $order->get_date_created() ) ) ); ?></small>
					</div>
					<div class="col-md-5">
						<div class="fs-5 fw-semi-bold mb-1"> Payment Status</div>
						<small><?php echo esc_attr( $order->get_payment_method_title() ); ?></small>
					</div>

				</div>


				<div class="order-details-colpse collapse">
					<div class="fs-5 fw-semi-bold mb-1"><b>Customer Details</b></div>
					<div class="border p-3 mb-3 rounded-3">
						<div class=" row ">
							<div class="col-md-7 ">
								<div class="fs-5  mb-1 fw-bold ">Personal Information</div>
								<div class="fs-6 mb-2 "><b>Full name:
									</b><?php echo esc_attr( $order->get_billing_first_name() . ' ' . $order->get_billing_last_name() ); ?></div>
								<div class="fs-6 mb-2 "><b>Phone number:
									</b><?php echo esc_attr( $order->get_billing_phone() ); ?></div>
								<div class="fs-6 mb-2 "><b>Email Id:
									</b><?php echo esc_attr( $order->get_billing_email() ); ?></div>
							</div>
							<div class="col-md-5 ">
								<div class="fs-5  mb-1 fw-bold ">Shipping Address</div>
								<div class="fs-6 mb-2 "><b>Address:
									</b><?php echo esc_attr( $order->get_shipping_address_1() ); ?></div>
								<div class="fs-6 mb-2 "><b>Country:
									</b><?php echo esc_attr( $order->get_shipping_country() ); ?></div>
								<div class="fs-6 mb-2 "><b>Postcode / Zip:
									</b><?php echo esc_attr( $order->get_shipping_postcode() ); ?></div>
								<div class="fs-6 mb-2 "><b>City:
									</b><?php echo esc_attr( $order->get_shipping_city() ); ?></div>
								<div class="fs-6 mb-2 "><b>State / County:
									</b><?php echo esc_attr( $order->get_shipping_state() ); ?></div>
							</div>
						</div>
					</div>

					<div class="fs-6 fw-semi-bold mb-1"><b>Items</b></div>
					<div class="border p-3 mb-3 rounded-3">
						<?php 
						foreach ( $order->get_items() as $item_id => $item ) { 
							$item_product_men = $item->get_product();
							$product_id       = ! empty( $item->get_variation_id() ) ? $item->get_variation_id() : $item->get_product_id();
							if ( ! $item_product_men->meta_exists( 'elex_mv_store_id' ) ) {
								continue;
							}
							$image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $product_id ), 'full' ); 
							?>
						<div class="d-flex border-bottom  py-2 justify-content-between ">
							<div>
								<div class="d-flex gap-2 ">
									<div class="d-flex gap-3 align-items-center">
									<?php
									if ( $image_url ) {
										?>
										<img src="<?php echo esc_url( $image_url[0] ); ?>" width="100"; height="90"; alt="" />
										<?php
									}
									?>
										
									</div>
									<div>
										<div class="fs-6 fw-bold mb-2 "><?php echo esc_attr( $item->get_name() ); ?>
										</div>
										<small>Quantity: <?php echo esc_attr( $item->get_quantity() ); ?></small>
									</div>
								</div>
							</div>
							<div class="d-flex gap-3">
								<div class="text-end">
									<div class="fs-6 fw-bold mb-1 ">Price:</div>
									<div class="fs-6 fw-semi-bold mb-1">
										<?php echo wp_kses_post( wc_price( $item->get_total() ) ); ?></div>
									<?php 
									$refunded_item_price = $order->get_total_refunded_for_item( $item_id );
									if ( $refunded_item_price ) {
										?>
									<div class="text-danger">
										<small>
											<svg xmlns="http://www.w3.org/2000/svg" height="12px" fill="#dc3545"
												viewBox="0 0 512 512">
												<path
													d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" />
											</svg>
										<?php echo '-' . wp_kses_post( wc_price( $refunded_item_price ) ); ?></small>
									</div>
									<?php } ?>

								</div>
								<div class="">
									<?php 
										$order_taxes = $order->get_taxes(); 
										$tax_data    = wc_tax_enabled() ? $item->get_taxes() : false;
									if ( $tax_data ) {
										foreach ( $order_taxes as $tax_item ) {
											$tax_item_id    = $tax_item->get_rate_id();
											$tax_item_total = isset( $tax_data['total'][ $tax_item_id ] ) ? $tax_data['total'][ $tax_item_id ] : '';
											if ( ! empty( $tax_item_total ) ) {

												?>
									<div class="fs-6 fw-bold mb-1 ">Tax:</div>

									<div class="fs-6 fw-semi-bold mb-1">
										<?php echo wp_kses_post( wc_price( $tax_item_total ) ); ?></div>
									<?php 
									$refunded_item_tax_price = $order->get_tax_refunded_for_item( $item_id, $tax_item_id );
												if ( $refunded_item_tax_price ) {
													?>
									<div class="text-danger">
										<small>
											<svg xmlns="http://www.w3.org/2000/svg" height="12px" fill="#dc3545"
												viewBox="0 0 512 512">
												<path
													d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" />
											</svg>
											<?php echo '-' . wp_kses_post( wc_price( $refunded_item_tax_price ) ); ?></small>
									</div>
									<?php 
												} 
											} 
										}
									} 
									?>
								</div>
							</div>
						</div>
						<?php } ?>

						<?php foreach ( $order->get_items( 'shipping' ) as $item_id => $item ) { ?>
						<div class="d-flex border-bottom  py-2 justify-content-between ">
							<div>
								<div class="d-flex gap-2 ">
									<!-- <img src="../images/default.jpg " alt=" " width="100px "> -->


									<div>

										<div class="fs-6 fw-bold mb-2 "><?php echo esc_attr( $item->get_name() ); ?>
										</div>
										<?php
											/**
											* Filter hook to modify hidden order item meta keys.
											*
											* Developers can use this filter to modify the list of order item meta keys that should be considered hidden.
											* Hidden order item meta keys are typically not displayed or shown to users in the order details.
											*
											* @since 1.0.0
											*
											* @param array $hidden_order_itemmeta An array of order item meta keys considered hidden.
											* Default keys include various internal meta data like quantity, tax class,
											* product ID, variation ID, subtotal, total, tax, method ID, cost,
											* reduced stock, and restock refunded items.
											* @return array Modified array of hidden order item meta keys.
											*/
										$hidden_order_itemmeta = apply_filters(
											'elex_mv_hidden_order_itemmeta',
											array(
												'_qty',
												'_tax_class',
												'_product_id',
												'_variation_id',
												'_line_subtotal',
												'_line_subtotal_tax',
												'_line_total',
												'_line_tax',
												'method_id',
												'cost',
												'_reduced_stock',
												'_restock_refunded_items',
											)
										);
										$meta_data             = $item->get_all_formatted_meta_data( '' );
										if ( $meta_data ) :
											?>
										<table cellspacing="0" class="elex_mv_display_meta_shipping">
											<?php
											foreach ( $meta_data as $meta_id => $meta ) :
												if ( in_array( $meta->key, $hidden_order_itemmeta, true ) ) {
													continue;
												}
												?>
											<tr>
												<th><?php echo wp_kses_post( $meta->display_key ); ?>:</th>
												<td><?php echo wp_kses_post( force_balance_tags( $meta->display_value ) ); ?>
												</td>
											</tr>
											<?php endforeach; ?>
										</table>
										<?php endif; ?>
									</div>

								</div>
							</div>
							<div class="d-flex gap-3">
								<div class="text-end ">
									<div class="fs-6 fw-bold mb-1 ">Price:</div>
									<div class="fs-6 fw-semi-bold mb-1">
										<?php echo wp_kses_post( wc_price( esc_html( $item->get_total() ) ) ); ?></div>
									<?php 
											$refunded_item_price = $order->get_total_refunded_for_item( $item_id , 'shipping' );
									if ( $refunded_item_price ) {
										?>
									<div class="text-danger">
										<small>
											<svg xmlns="http://www.w3.org/2000/svg" height="12px" fill="#dc3545"
												viewBox="0 0 512 512">
												<path
													d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" />
											</svg>
										<?php echo '-' . wp_kses_post( wc_price( $refunded_item_price ) ); ?></small>
									</div>
									<?php
									} 
									?>

								</div>
								<div class="">
									<?php 
										
									$order_taxes = $order->get_taxes(); 
									$tax_data    = wc_tax_enabled() ? $item->get_taxes() : false;

									if ( $tax_data ) {
										foreach ( $order_taxes as $tax_item ) {
											$tax_item_id    = $tax_item->get_rate_id();
											$tax_item_total = isset( $tax_data['total'][ $tax_item_id ] ) ? $tax_data['total'][ $tax_item_id ] : '';
											if ( ! empty( $tax_item_total ) ) {

												?>
									<div class="fs-6 fw-bold mb-1 ">Tax:</div>

									<div class="fs-6 fw-semi-bold mb-1">
										<?php echo wp_kses_post( wc_price( $tax_item_total ) ); ?></div>
									<?php 
												$refunded_item_tax_price = $order->get_tax_refunded_for_item( $item_id, $tax_item_id , 'shipping' );
												if ( $refunded_item_tax_price ) {
													?>
									<div class="text-danger">
										<small>
											<svg xmlns="http://www.w3.org/2000/svg" height="12px" fill="#dc3545"
												viewBox="0 0 512 512">
												<path
													d="M48.5 224H40c-13.3 0-24-10.7-24-24V72c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2L98.6 96.6c87.6-86.5 228.7-86.2 315.8 1c87.5 87.5 87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3c-62.2-62.2-162.7-62.5-225.3-1L185 183c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8H48.5z" />
											</svg>
											<?php echo '-' . wp_kses_post( wc_price( $refunded_item_tax_price ) ); ?></small>
									</div>
									<?php
												} 
												?>

									<?php 
											} 
										}
									} 
									?>
								</div>


							</div>
						</div>
						<?php
						} 
						$vendor_item_total  = 0;
						$vendor_tax_total   = 0;
						$vendor_item_count  = 0;
						$vendor_order_total = 0;

						foreach ( $order->get_items() as $item_id => $item ) {

							$item_product_men = $item->get_product();
							if ( ! $item_product_men->meta_exists( 'elex_mv_store_id' ) ) {
								continue;
							}

							$vendor_item_total += (float) $item->get_total();
							$vendor_tax_total  += (float) $item->get_total_tax();
							$vendor_item_count += (int) $item->get_quantity();
							$vendor_order_total = $vendor_item_total + $vendor_tax_total + $order->get_shipping_total();


						}
						?>
						<!-- total items and price -->
						<div class="d-flex py-2 justify-content-between ">
							<div><b>Total Item(s): </b><?php echo esc_attr( $vendor_item_count ); ?></div>
							<div>
								<div class="border-bottom border-secondary py-2 ">
									<div class="d-flex justify-content-between gap-2 mb-3 ">
										<div>Item Total:</div>
										<b><?php echo wp_kses_post( wc_price( $vendor_item_total ) ); ?></b>
									</div>
									<div class="d-flex justify-content-between gap-2 mb-3 ">
										<div>Tax:</div>
										<b><?php echo wp_kses_post( wc_price( $vendor_tax_total ) ); ?></b>
									</div>
									<div class="d-flex justify-content-between gap-2 mb-3 ">
										<div>Shipping Cost:</div>
										<b><?php echo wp_kses_post( wc_price( $order->get_shipping_total() ) ); ?></b>
									</div>
								</div>
								<div class="fs-6 fw-semi-bold mb-1 text-end "><b>Order Total:
										<?php echo wp_kses_post( wc_price( $vendor_order_total ) ); ?></b></div>

								<div
									class="elex-multi-vendor-for-woocommerce-refunt-payment-div <?php echo esc_attr( $order->get_total_refunded() ? '' : 'd-none' ); ?>">
									<div class="d-flex text-danger justify-content-end gap-2 mb-2 ">
										<div>Refunded:</div>
										<div class="fw-bold elex-multi-vendor-for-woocommerce-order-details-price-width">
											<?php echo '-' . wp_kses_post( wc_price( $order->get_total_refunded() ) ); ?>
										</div>
									</div>
									<div class="d-flex justify-content-end gap-2 mb-2 ">
										<div class="fw-bold">Net Payment:</div>
										<div class="fw-bold elex-multi-vendor-for-woocommerce-order-details-price-width">
											<?php echo wp_kses_post( wc_price( $order->get_total() - $order->get_total_refunded() ) ); ?>
										</div>
									</div>
								</div>
							</div>
						</div>
						<?php 
							$allow_refund = (string) $site_settings->get( 'allow_vendor_to_initiate_refund' ) === 'on';
							$remaining    = wc_format_decimal(
								$order->get_total() - $order->get_total_refunded(),
								wc_get_price_decimals()
							);
						
							if ( $allow_refund && $remaining > 0 ) { 
					
								?>
						<div class="pt-3 border-top d-flex gap-3 ">
							<div class="elex-multi-vendor-for-woocommerce-add-coupon-refund-btn">
								<button class="btn btn-outline-primary elex-multi-vendor-for-woocommerce-order-detail-refund-btn">Refund</button>
							</div>

							<div class="ms-auto elex-multi-vendor-for-woocommerce-refund-warning d-none">
								<div class="text-muted fw-normal">
									<i class="fa-solid fa-triangle-exclamation"></i>
									This order is no longer editable.
								</div>
							</div>
						</div>
							<?php } ?>
					</div>
				</div>

			</div>
		</div>





	</div>
	
	<div class="row justify-content-end w-100 bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup "
		id="elex-multi-vendor-for-woocommerce-order-detail-refund">
		<div class="col-lg-6  bg-white h-100 ms-auto overflow-auto">
			<div class="py-2 px-4 text-center position-relative">
				<div class="fs-5 mt-4 fw-bold">Order Refund</div>
				<button
					class="mt-4 btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-detail-refund-close-btn">
					<i class="fa-solid fa-xmark"></i>
				</button>
			</div>
			<form action="" id="elex_mv_vendor_order_refund_form">
				<?php wp_nonce_field( 'elex_mv_refund_line_items_action', 'elex_mv_refund_line_items_nonce' ); ?>
				<input type="hidden" class="form-control" name="order_id"
					value="<?php echo esc_html( $order->get_id() ); ?>">
				<div class="px-md-5 px-2 py-3">
					<table class="table w-100">
						<tbody>
							<?php 
							/**
							* Retrieves line items from an order in WooCommerce.
							*
							* @param WC_Order $order The WooCommerce order object.
							* @return array Array of line items included in the order.
							* @since 1.0.0
							*/
							$line_items = $order->get_items( apply_filters( 'elex_mv_admin_order_item_types', 'line_item' ) );

							foreach ( $line_items as $item_id => $item_popup ) { 
								$item_product = $item_popup->get_product(); 
								if ( ! $item_product->meta_exists( 'elex_mv_store_id' ) ) {
									continue;
								}
								?>
							<tr>
								<th style="width:10%; min-width:200px;">
								<?php echo esc_html( $item_popup->get_name() ); ?></th>
								<td style="width:10%; min-width:120px;">
									<div>Quantity:</div>
									<input type="number" min=0
										max=<?php echo esc_attr( $item_popup->get_quantity() ); ?>
										class="form-control refund_line_item_quantity"
										name="refund_line_item_quantity[<?php echo esc_html( $item_id ); ?>]"
										data-order_id="<?php echo esc_html( $item_id ); ?>">
								</td>
								<td>
									<div>Price:</div>
									<input type="text" class="form-control refund_line_item_price"
										name="refund_line_item_price[<?php echo esc_html( $item_id ); ?>]"
										data-order_id="<?php echo esc_html( $item_id ); ?>">
									<input type="hidden" name="line_item_value[<?php echo esc_html( $item_id ); ?>]"
										class=" form-control line_item_value"
										data-order_id="<?php echo esc_html( $item_id ); ?>"
										value="<?php echo esc_html( $item_product->get_price() ); ?>">
								</td>
								<td>
								<?php 
								$order_taxes = $order->get_taxes(); 
								$tax_data    = wc_tax_enabled() ? $item_popup->get_taxes() : false;

								if ( $tax_data ) {
									foreach ( $order_taxes as $tax_item ) {
										$tax_item_id    = $tax_item->get_rate_id();
										$tax_item_total = isset( $tax_data['total'][ $tax_item_id ] ) ? $tax_data['total'][ $tax_item_id ] : '';
										if ( ! empty( $tax_item_total ) ) { 
											?>
									<div>Tax:</div>
									<input type="hidden" name="line_item_tax[<?php echo esc_html( $item_id ); ?>]"
										class="form-control line_item_tax"
										data-order_id="<?php echo esc_html( $item_id ); ?>"
										value="<?php echo esc_html( $tax_item_total / $item_popup->get_quantity() ); ?>">

									<input type="text"
										name="refund_line_item_tax[<?php echo esc_html( $item_id ); ?>][<?php echo esc_html( $tax_item_id ); ?>]"
										class="form-control refund_line_item_tax"
										data-order_id="<?php echo esc_html( $item_id ); ?>"
										data-tax_item_id="<?php echo esc_html( $tax_item_id ); ?>">
									<?php
										}
										$tax_item_subtotal = isset( $tax_data['subtotal'][ $tax_item_id ] ) ? $tax_data['subtotal'][ $tax_item_id ] : '';
									}
								} 
								?>
								</td>
							</tr>
							<?php } ?>
						</tbody>
					</table>

					<table class="table w-100">
						<tbody>
							<?php 
							$line_items_shipping = $order->get_items( 'shipping' );
							foreach ( $line_items_shipping as $item_ship_id => $item_ship_popup ) { 
								?>
							<tr>
								<th style="width:10%; min-width:200px;">
								<?php echo esc_html( $item_ship_popup->get_name() ? $item_ship_popup->get_name() : __( 'Shipping', 'elex-multi-vendor-for-woocommerce' ) ); ?>
								</th>
								<td style="width:10%; min-width:120px;">
								</td>
								<td>
									<div>Price:</div>
									<input type="text" class="form-control refund_line_item_price"
										name="refund_line_item_price[<?php echo esc_html( $item_ship_id ); ?>]"
										data-order_id="<?php echo esc_html( $item_ship_id ); ?>">

								</td>
								<td>

								<?php 
								$order_taxes = $order->get_taxes(); 
								$tax_data    = wc_tax_enabled() ? $item_ship_popup->get_taxes() : false;

								if ( $tax_data ) {
									foreach ( $order_taxes as $tax_item ) {
										$tax_item_id    = $tax_item->get_rate_id();
										$tax_item_total = isset( $tax_data['total'][ $tax_item_id ] ) ? $tax_data['total'][ $tax_item_id ] : '';
										if ( ! empty( $tax_item_total ) ) {
											?>
									<div>Tax:</div>

									<input type="text"
										name="refund_line_item_tax[<?php echo esc_html( $item_ship_id ); ?>][<?php echo esc_html( $tax_item_id ); ?>]"
										class="form-control refund_line_item_tax"
										data-order_id="<?php echo esc_html( $item_ship_id ); ?>"
										data-tax_item_id="<?php echo esc_html( $tax_item_id ); ?>">

										<?php
										}
										$tax_item_subtotal = isset( $tax_data['subtotal'][ $tax_item_id ] ) ? $tax_data['subtotal'][ $tax_item_id ] : '';
									}
								} 
								?>
								</td>
							</tr>
							<?php } ?>
						</tbody>
					</table>


					<div class="py-2">
						<div class="form-check mb-3">
							<input class="form-check-input" type="checkbox" value="true"
								id="elex-multi-vendor-for-woocommerce-restock-refund" name="restock_items">
							<label class="form-check-label" for="elex-multi-vendor-for-woocommerce-restock-refund">
								Restock Refund Items
							</label>
						</div>

						<div class="row mb-3">
							<div class="col-md-6">Already Refunded Amount:</div>
							<div class="col-md-6"><?php echo esc_html( $order->get_total_refunded() ); ?></div>
						</div>

						<div class="row mb-3">
							<div class="col-md-6">Total Available to Refund:</div>
							<div class="col-md-6">
							<?php echo esc_html( $order->get_total() - $order->get_total_refunded() ); ?></div>
						</div>

						<div class="row mb-3 align-items-center">
							<div class="col-md-6">Refund Amount:</div>
							<div class="col-md-6"><input readonly type="text" class="form-control"
									name="total_refund_amount" class="total_refund_amount"></div>
						</div>

						<div class="row mb-3 align-items-center">
							<div class="col-md-6">Reason to Refund (optional):</div>
							<div class="col-md-6"><input type="text" class="form-control" name="reason_to_refund"></div>
						</div>
					</div>
					<div class="d-flex w-100 flex-wrap gap-2">
						<button class="btn btn-primary flex-fill elex-multi-vendor-for-woocommerce-refund-process-btn" type="button">Refund
							Manually</button>
						<?php
							$payment_gateway = wc_get_payment_gateway_by_order( $order );

							$refund_amount = '<span class="elex-multi-vendor-for-woocommerce-order-refund-amount">' . wc_price( 0, array( 'currency' => $order->get_currency() ) ) . '</span>';
							$gateway_name  = false !== $payment_gateway ? ( ! empty( $payment_gateway->method_title ) ? $payment_gateway->method_title : $payment_gateway->get_title() ) : __( 'Payment gateway', 'elex-multi-vendor-for-woocommerce' );

						if ( false !== $payment_gateway && $payment_gateway->can_refund_order( $order ) ) {
							/* translators: refund amount, gateway name */
							echo '<button type="button" class="btn btn-primary flex-fill elex-multi-vendor-for-woocommerce-do-api-refund">' . sprintf( esc_html__( 'Refund %1$s via %2$s', 'elex-multi-vendor-for-woocommerce' ), wp_kses_post( $refund_amount ), esc_html( $gateway_name ) ) . '</button>';
						}
						?>
					</div>
				</div>
			</form>

		</div>
	</div>
	<!-- =========================popup=================== -->
	<!-- Move to another Package -->
	<div class="row justify-content-end w-100 bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup "
		id="elex-multi-vendor-for-woocommerce-order-detail-move-package">
		<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 fw-semi-bold mb-1">Move to Another Package</div>
				<button
					class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-detail-move-package-close-btn">
					<i class="fa-solid fa-xmark"></i>
				</button>
			</div>
			<div class="px-md-5 px-2 py-3">
				<div class="form-group mb-3">
					<label>Status</label>
					<input type="text" class="form-control">
				</div>

				<div class=" mb-3">
					<label for="">Quantity to Move</label>
					<div class="input-group">
						<input type="text" class="form-control">
						<span class="input-group-text px-5 bg-info bg-opacity-10">/5</span>
					</div>
					<small class="text-secondary">To move whole item, enter the whole quantity</small>
				</div>

				<div class="form-group mb-3">
					<label>Move to</label>
					<select name="" id="" class="form-select">
						<option value="package2">Package 2</option>
						<option value="new package">Create a New Package</option>
					</select>
				</div>
				<button class="btn btn-primary w-100">Move</button>
			</div>
		</div>
	</div>
	<!-- add package -->
	<div class="row justify-content-end w-100 bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup "
		id="elex-multi-vendor-for-woocommerce-order-detail-add-package">
		<div class="col-lg-9  bg-white h-100 ms-auto overflow-auto">
			<div class="py-2 px-4 text-center position-relative">
				<div class="fs-5 fw-semi-bold mb-1">Add Package</div>
					<button
						class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-order-detail-add-package-close-btn">
						<i class="fa-solid fa-xmark"></i>
					</button>
			</div>
			<div class="px-md-5 px-2 py-3">

				<div class="row">
					<div class="col-xl-4 col-lg-6 mb-3">
						<div class="form-group mb-3">
							<label>Carrier</label>
							<select name="" id="" class="form-select">
								<option value="usps">USPS</option>
								<option value="fedex">Fedex</option>
								<option value="ups">UPS</option>
								<option value="dhl">DHL</option>
							</select>
						</div>

					</div>
					<div class="col-xl-4 col-lg-6 mb-3">
						<div class="form-group mb-3">
							<label>Account Name</label>
							<select name="" id="" class="form-select">
								<option value="">Account Name 1</option>
								<option value="">Account Name 2</option>
								<option value="">Account Name 3</option>
							</select>
						</div>

					</div>
					<div class="col-xl-4 col-lg-6 mb-3">
						<div class="form-group mb-3">
							<label>Preferred Service</label>
							<select name="" id="" class="form-select">
								<option value="prioity_mail">Priority Mail($2 USD)</option>
								<option value="first_class_package">First Class Package ($5 USD)</option>
								<option value="first_class_mail">First Class Mail($7 USD)</option>
							</select>
						</div>
					</div>
					<div class="col-xl-4 col-lg-6 mb-3">
						<div class=" form-group">
							<label for="">Box name</label>
							<select name="" id="" class="form-select">
								<option value="">Box Name</option>
								<option value="">Custom Box</option>
							</select>
						</div>
					</div>
					<div class="col-xl-2 col-lg-6 mb-3">
						<div class=" form-group">
							<label for="">Box Weight</label>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="col-xl-2 col-lg-6 mb-3">
						<div class=" form-group">
							<label for="">Box Length</label>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="col-xl-2 col-lg-6 mb-3">
						<div class=" form-group">
							<label for="">Box Width</label>
							<input type="text" class="form-control">
						</div>
					</div>
					<div class="col-xl-2 col-lg-6 mb-3">
						<div class=" form-group">
							<label for="">Box Height</label>
							<input type="text" class="form-control">
						</div>
					</div>
				</div>

				<div class="elex-multi-vendor-for-woocommerce-drop mb-3">
					<button class="btn elex-multi-vendor-for-woocommerce-drop-btn px-0 fw-bold">
						Show additional info <i class="fa-solid fa-chevron-down ms-2"></i>
					</button>
					<div class="elex-multi-vendor-for-woocommerce-drop-content">
						<div class="row">
							<div class="col-md-4 mb-3">
								<div class="form-group">
									<label>Duty Payment</label>
									<input type="text" class="form-control">
								</div>
							</div>
							<div class="col-md-4 mb-3">
								<div class="form-group">
									<label>Shipment Content</label>
									<input type="text" class="form-control">
								</div>
							</div>
							<div class="col-md-4 mb-3">
								<div class="form-group">
									<label>Shipper Comments</label>
									<input type="text" class="form-control">
								</div>
							</div>
						</div>
						<div class="d-flex flex-column align-items-start">
							<div class="d-flex gap-3">
								<div class="fs-6 fw-semi-bold mb-1">Include Insurance:</div>
								<label class="elex-enable-disable-switch">
									<input type="checkbox" checked>
									<div class="switch round"></div>
								</label>
							</div>

							<div class="form-group">
								<label for="">Insurance Amount</label>
								<input type="text" class="form-control">
							</div>
						</div>
					</div>
				</div>

				<div class="mb-3 d-flex gap-2  flex-lg-row flex-column ">
					<div class="" style="width: 48%;">
						<div class="fs-6 mb-1 fw-bold">Item(s) in the Order</div>
						<div class="bg-light p-2 rounded-3 h-100 d-flex flex-column align-items-arouund">
							<div class="elex-multi-vendor-for-woocommerce-drop mb-3">
								<button
									class="w-100 btn elex-multi-vendor-for-woocommerce-drop-btn px-0 fw-bold  d-flex justify-content-between align-items-center">
									Package 1 <i class="fa-solid fa-chevron-down ms-2"></i>
								</button>
								<div class="elex-multi-vendor-for-woocommerce-drop-content">
									<div
										class="mb-3 border-bottom border-secondary d-flex gap-2  justify-content-between align-items-center">
										<div class="mb-3">
											<div class="fs-6  mb-1 fw-bold">Item 1</div>
											<small class="text-secondary">Total Quantity: <span>5</span></small>
										</div>
										<div class="d-flex gap-2  align-items-center mb-3">
											<small class="text-nowrap mb-0">Quantity to Add:</small>
											<input type="text" class="form-control" width="150px">
											<button class="btn btn-primary">Add</button>
										</div>

									</div>

									<div class="mb-3 border-bottom border-secondary d-flex gap-2  justify-content-between align-items-center">
										<div class="mb-3">
											<div class="fs-6 mb-1 fw-bold">Item 1</div>
											<small class="text-secondary">Total Quantity: <span>5</span></small>
										</div>
										<div class="d-flex gap-2  align-items-center mb-3">
											<small class="text-nowrap mb-0">Quantity to Add:</small>
											<input type="text" class="form-control" width="150px">
											<button class="btn btn-primary">Add</button>
										</div>

									</div>
								</div>
							</div>
							<div class="elex-multi-vendor-for-woocommerce-drop mb-3">
								<button
									class="w-100 btn elex-multi-vendor-for-woocommerce-drop-btn px-0 fw-bold  d-flex justify-content-between align-items-center">
									Package 2 <i class="fa-solid fa-chevron-down ms-2"></i>
								</button>
								<div class="elex-multi-vendor-for-woocommerce-drop-content">
									<div
										class="mb-3 border-bottom border-secondary d-flex gap-2  justify-content-between align-items-center">
										<div class="mb-3">
											<div class="fs-6 mb-1 fw-bold">Item 1</div>
											<small class="text-secondary">Total Quantity: <span>5</span></small>
										</div>
										<div class="d-flex gap-2  align-items-center mb-3">
											<small class="text-nowrap mb-0">Quantity to Add:</small>
											<input type="text" class="form-control" width="150px">
											<button class="btn btn-sm btn-primary">Add</button>
										</div>

									</div>
									<div
										class="mb-3 border-bottom border-secondary d-flex gap-2  justify-content-between align-items-center">
										<div class="mb-3">
											<div class="fs-6 mb-1 fw-bold">Item 1</div>
											<small class="text-secondary">Total Quantity: <span>5</span></small>
										</div>
										<div class="d-flex gap-2  align-items-center mb-3">
											<small class="text-nowrap mb-0">Quantity to Add:</small>
											<input type="text" class="form-control" width="150px">
											<button class="btn btn-sm btn-primary">Add</button>
										</div>

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

					</div>
					<div class="align-self-center">
						<svg xmlns="http://www.w3.org/2000/svg" width="27.15" height="28.331"
							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>
					</div>
					<div style="width: 48%;">
						<div class="fs-6 mb-1 fw-bold">Additional Item(s) in this package</div>
						<div class="bg-light p-2 h-100 ">
							<div
								class="mb-3 border-bottom border-secondary d-flex gap-2  justify-content-between align-items-center">
								<div class="mb-3">
									<div class="fs-6 mb-1 fw-bold">Item 1</div>
									<small class="text-secondary">Total Quantity: <span>5</span></small>
								</div>
								<div class="d-flex gap-2  align-items-center mb-3">
									<button class="btn btn-sm btn-primary">Remove</button>
								</div>

							</div>

							<div class="d-flex h-100 d-none">
								<div class="text-center">
									<div class="fs-6 fw-semi-bold mb-1">Empty List!</div>
									<div class="fs-6  mb-1">To add Item(s) in the new package, Enter the quantity &
										click on add corresponding to each item present in the list on your left side.
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="text-start mt-5">
					<button class="btn btn-primary px-5">Add Package</button>
				</div>
			</div>
		</div>
	</div>
</div>
