<?php if ( ! defined( 'ABSPATH' ) ) {
exit;} ?>
<!-- <div class="p-2 elex-multi-vendor-for-woocommerce-wrap-front flex-fill overflow-auto"> -->

<div class="elex-multi-vendor-for-woocommerce-main p-2 flex-1 d-flex flex-column" >
	<!-- ===========side panel open button========= -->
	<div class="d-flex gap-4 mb-3 align-items-center elex-multi-vendor-for-woocommerce-side-panel-open-div flex-1 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 ">Reviews</div>
	</div>

	<!-- your overall score -->
	<div class="d-flex mb-3 flex-1">
		<div class="elex-multi-vendor-for-woocommerce-overall-review border border-2 rounded-3 p-2">
			<div class="d-flex flex-wrap gap-4 justify-content-between">
				<div class="elex-multi-vendor-for-woocommerce-your-review">
					<div class="fs-4 fw-semi-bold mb-1"><?php echo esc_html_e( 'Your Overall Scoreout of 5', 'elex-multi-vendor-for-woocommerce' ); ?></div>

					<div class="position-relative">
						<fieldset class="rate fs-3" disabled>
							<?php
							$n = 6;
							if ( 0 === $avg_review ) {
								$n = 5;
							}
							$avg = floor( $avg_review );
							$dec = (float) $avg_review - $avg;
							$max = ceil( $avg_review );
							for ( $i = 1; $i <= $n; $i++ ) :
								if ( $i <= $avg ) {
									echo '<label title="star " class="active"></label>';
								} elseif ( $dec >= 0.5 && $i <= $max ) {
									echo '<label title="star " class="half active"></label>';
								} else {

									echo '<label title="star " ></label>';
								}

							endfor;
							?>
						</fieldset>
						<?php /* translators: %s: average */ ?>
						<div class="fs-6 fw-semi-bold mb-1">(<?php printf( esc_html( _n( '%s out of 5', '%s out of 5', $avg_review, 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $avg_review ) ); ?>)</div>

					</div>
				</div>


				<div class=" elex-multi-vendor-for-woocommerce-rate-guide">
					<div class="fs-6 d-flex gap-3 align-items-center ">
						<div class="d-flex gap-1">
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
						</div>
						<?php /* translators: %s: number of reviews */ ?>
						<div>(<?php printf( esc_html( _n( '%s review', '%s reviews', $rating_count['5_star'], 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $rating_count['5_star'] ) ); ?>)</div>

					</div>

					<div class="fs-6 d-flex gap-3 align-items-center">
						<div class="d-flex gap-1">
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
						</div>
						<?php /* translators: %s: number of reviews */ ?>
						<div>(<?php printf( esc_html( _n( '%s review', '%s reviews', $rating_count['4_star'], 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $rating_count['4_star'] ) ); ?>)</div>

					</div>


					<div class="fs-6 d-flex gap-3 align-items-center">
						<div class="d-flex gap-1">
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
						</div>
						<?php /* translators: %s: number of reviews */ ?>
						<div>(<?php printf( esc_html( _n( '%s review', '%s reviews', $rating_count['3_star'], 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $rating_count['3_star'] ) ); ?>)</div>

					</div>


					<div class="fs-6 d-flex gap-3 align-items-center">
						<div class="d-flex gap-1">
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
						</div>
						<?php /* translators: %s: number of reviews */ ?>
						<div>(<?php printf( esc_html( _n( '%s review', '%s reviews', $rating_count['2_star'], 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $rating_count['2_star'] ) ); ?>)</div>

					</div>

					<div class="fs-6 d-flex gap-3 align-items-center">
						<div class="d-flex gap-1">
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-active"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
							<i class="fa-solid fa-star elex-multi-vendor-for-woocommerce-rate-inactive"></i>
						</div>
						<?php /* translators: %s: number of reviews */ ?>
						<div>(<?php printf( esc_html( _n( '%s review', '%s reviews', $rating_count['1_star'], 'elex-multi-vendor-for-woocommerce' ) ), esc_html( $rating_count['1_star'] ) ); ?>)</div>

					</div>


				</div>

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


	<!-- review list -->
	<div class="overflow-auto">
		<?php
		if ( $reviews ) {
			foreach ( $reviews as $review ) :
				$user = wp_get_current_user();


				?>

				<div class=" border border-2 rounded-3 p-2  mb-2">
					<div class="row">
						<div class="col-lg-1 col-md-2 col-2">
							<div class="ratio ratio-1x1 rounded-circle overflow-hidden">
								<img src="<?php echo esc_url( $review['image'] ); ?>" alt="">
							</div>
						</div>

						<div class="col-lg-2 col-md-3 col-3">
							<div class="fs-6 fw-semi-bold mb-1"><?php echo esc_html( $review['author_name'] ); ?></div>
							<?php if ( 'review' === $review['comment_type'] ) { ?>
								<fieldset class="rate " disabled>

									<?php
									for ( $i = 1; $i <= 5; $i++ ) :
										if ( $review['rating'] >= $i ) {
											echo '<label title="star " class="active"></label>';
										} else {
											echo '<label title="star "></label>';
										}
									endfor;
									?>
								</fieldset>

							<?php
							}

							$timestamp = strtotime( $review['date'] ); //Changing comment time to timestamp
							$date      = gmdate( 'F d, Y', $timestamp );
							?>
							<div class="xs"><?php echo esc_html( $date ); ?></div>
						</div>




						<div class="col">
							<div class="d-flex  gap-2 align-items-center">
								<div class="text-secondary xs"><?php echo esc_html( $review['product_name'] ); ?></div>
								<svg xmlns="http://www.w3.org/2000/svg" width="1.5" height="20" viewBox="0 0 2 25.587">
									<path id="carrier_seperator" data-name="carrier seperator" d="M2565.89-576v23.587" transform="translate(-2564.89 577)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="2" />
								</svg>
								<div class="xs">
									<?php

									if ( $review['verified_owner'] ) {
										echo '<i class="fa-regular fa-circle-check text-success "></i> ';
										echo esc_html__( 'Verified Owner', 'elex-multi-vendor-for-woocommerce' );
									} else {
										echo '<i class="fa-regular fa-circle-xmark text-danger"></i> ';
										echo esc_html__( 'Unverified Owner', 'elex-multi-vendor-for-woocommerce' );
									}
									?>
								</div>
								<?php

								if ( empty( $review['comment_approved'] ) ) {

									?>
									<svg xmlns="http://www.w3.org/2000/svg" width="1.5" height="20" viewBox="0 0 2 25.587">
										<path id="carrier_seperator" data-name="carrier seperator" d="M2565.89-576v23.587" transform="translate(-2564.89 577)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="2" />
									</svg>


									<button class="btn btn-sm text-success xs elex-multi-vendor-for-woocommerce-review-admin-approve-btn " data-comment-id="<?php echo esc_attr( $review['comment_id'] ); ?>" data-comment-post-id="<?php echo esc_attr( $review['comment_post_ID'] ); ?>">
										<svg xmlns="http://www.w3.org/2000/svg" width="13" height="12" viewBox="0 0 18.945 17.2">
											<g id="Approve" transform="translate(1.414 1.414)">
												<path id="Icon_feather-check" data-name="Icon feather-check" d="M18.784,4,7.7,15.08,2.667,10.044" transform="translate(-2.667 -0.295)" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
												<path id="Icon_feather-check-2" data-name="Icon feather-check" d="M13.444,4l-7.41,7.41L2.667,8.042" transform="translate(-1.156 -4)" fill="none" stroke="green" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
											</g>
										</svg>

										<?php echo esc_html__( 'Approve', 'elex-multi-vendor-for-woocommerce' ); ?>
									</button>
								<?php
								}
								if ( ! empty( $review['comment_approved'] ) ) :

									?>
									<svg xmlns="http://www.w3.org/2000/svg" width="1.5" height="20" viewBox="0 0 2 25.587">
										<path id="carrier_seperator" data-name="carrier seperator" d="M2565.89-576v23.587" transform="translate(-2564.89 577)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="2" />
									</svg>

									<button class="btn btn-sm text-info xs elex-multi-vendor-for-woocommerce-review-admin-reply-open-btn" data-comment-id="<?php echo esc_attr( $review['comment_id'] ); ?>" data-comment-post-id="<?php echo esc_attr( $review['comment_post_ID'] ); ?>">
										<i class="fa-solid fa-rotate-left"></i>
										<?php echo esc_html__( 'Reply', 'elex-multi-vendor-for-woocommerce' ); ?>
									</button>
								<?php
								endif;
							
								if ( ! empty( $review['author_name'] ) && (int) $review['user_id'] === (int) $user->ID ) {
									?>
									<svg xmlns="http://www.w3.org/2000/svg" width="1.5" height="20" viewBox="0 0 2 25.587">
										<path id="carrier_seperator" data-name="carrier seperator" d="M2565.89-576v23.587" transform="translate(-2564.89 577)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="2" />
									</svg>

									<button class="btn btn-sm text-info xs elex-multi-vendor-for-woocommerce-review-admin-edit-open-btn" data-reply-id="<?php echo esc_attr( $review['comment_id'] ); ?>" data-reply-content="<?php echo esc_attr( $review['content'] ); ?>">
										<i class="fa-regular fa-pen-to-square"></i>
										<?php echo esc_html__( 'Edit', 'elex-multi-vendor-for-woocommerce' ); ?>
									</button>

									<svg xmlns="http://www.w3.org/2000/svg" width="1.5" height="20" viewBox="0 0 2 25.587">
										<path id="carrier_seperator" data-name="carrier seperator" d="M2565.89-576v23.587" transform="translate(-2564.89 577)" fill="none" stroke="#707070" stroke-linecap="round" stroke-width="2" />
									</svg>

									<button class="btn btn-sm text-danger xs elex-multi-vendor-for-woocommerce-review-admin-delete-btn" data-reply-id="<?php echo esc_attr( $review['comment_id'] ); ?>">
										<i class="fa-regular fa-trash-can"></i>
										<?php echo esc_html__( 'Delete', 'elex-multi-vendor-for-woocommerce' ); ?>
									</button>
								<?php } ?>

							</div>
							<div>
								<?php /* translators: %s: author name */ printf( esc_html__( 'In Reply to %s', 'elex-multi-vendor-for-woocommerce' ), esc_html( $review['author_name'] ) ); ?>
							</div>
							<div>
								<?php echo esc_html( $review['content'] ); ?>
							</div>
						</div>


					</div>
				</div>


		<?php
			endforeach;
		}

		?>
	</div>
	<!-- pagination -->
	<!-- previous & Next -->
	<div class="position-relative  flex-1">
		<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_review' => $current_page - 1 ) ) ) . '" class="btn"><i class="fa-solid fa-chevron-left me-1"></i>Previous</a>';
			}
			// Next page

			if ( $current_page < $num_pages ) {

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


<!-- replay popup -->
<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-review-admin-reply">
	<div class="col-lg-6 col-md-9 bg-white h-100 ms-auto overflow-auto">
		<div class="mt-5 px-4 text-center position-relative">
			<div class="fs-5 fw-semi-bold mb-1"><?php echo esc_html_e( 'Reply', 'elex-multi-vendor-for-woocommerce' ); ?></div>

			<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-review-admin-reply-close-btn">
				<i class="fa-solid fa-xmark"></i>
			</button>
		</div>
		<div class="px-md-4 px-2 py-3">
			<form id="elex-multi-vendor-for-woocommerce-review-reply-form">
				<?php wp_nonce_field( 'elex_mv_review_reply', 'elex-nonce' ); ?>
				<input type="hidden" id="comment-id-for-reply" name="comment_id" value="">
				<input type="hidden" id="comment-post-id-for-reply" name="comment_post_id" value="">

				<div class="mb-3">
					<label for=""><?php echo esc_html_e( 'Description', 'elex-multi-vendor-for-woocommerce' ); ?></label>
					<textarea class="form-control review-reply" placeholder="" id="floatingTextarea2" name="comment_reply" style="height: 200px"></textarea>
				</div>

				<button class="btn btn-primary w-100 elex-multi-vendor-for-woocommerce-review-reply-form-send-btn"><?php echo esc_html_e( 'Send', 'elex-multi-vendor-for-woocommerce' ); ?></button>
			</form>

		</div>



	</div>
</div>


<!-- edit popup -->
<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-review-admin-edit">
	<div class="col-lg-6 col-md-9 bg-white h-100 ms-auto overflow-auto">
		<div class="mt-5 px-4 text-center position-relative">
			<div class="fs-5 fw-semi-bold mb-1"><?php echo esc_html_e( 'Edit', 'elex-multi-vendor-for-woocommerce' ); ?></div>

			<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-review-admin-edit-close-btn">
				<i class="fa-solid fa-xmark"></i>
			</button>
		</div>
		<div class="px-md-4 px-2 py-3">
			<form id="elex-multi-vendor-for-woocommerce-review-edit-form">
				<?php wp_nonce_field( 'elex_mv_review_edit', 'elex-nonce' ); ?>
				<input type="hidden" id="comment-id-for-edit" name="reply_id" value="">
				<div class="mb-3">
					<label for=""><?php echo esc_html_e( 'Description', 'elex-multi-vendor-for-woocommerce' ); ?></label>
					<textarea class="form-control review-edit" placeholder="" id="floatingTextarea4" name="comment_edit" style="height: 200px"></textarea>
				</div>

				<button class="btn btn-primary w-100 elex-multi-vendor-for-woocommerce-review-edit-form-send-btn"><?php echo esc_html_e( 'Send', 'elex-multi-vendor-for-woocommerce' ); ?></button>
			</form>

		</div>



	</div>
</div>

<div class="toast p-2 position-fixed top-0 start-50 translate-middle-x bg-white" id="comment_success_toast" style="z-index: 999999">
	<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">
				<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 class="innertext"></span>
		</strong>
	</div>

</div>

<div class="toast p-2 position-fixed top-0 start-50 translate-middle-x bg-white" id="comment_error_toast" style="z-index: 999999">
	<div class="toast-header border-0 ">
		<strong class="me-auto">
			<svg height="22" width="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
				<path fill="#dc3545" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z" />
			</svg>


			<span class="innertext_incorrect"></span>
		</strong>
	</div>

</div>

<div class="toast p-3 position-fixed top-0 start-50 translate-middle-x bg-white mt-3" id="delete_toast" style="min-width: 450px;">
	<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="16" height="18" 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>
			<?php echo esc_html_e( 'Confirm Delete', 'elex-multi-vendor-for-woocommerce' ); ?></strong>
		<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
	</div>
	<div class="toast-body p-0">
		<div class="my-2">
			<div class="fs-6 fw-semi-bold mb-1"><?php echo esc_html_e( 'Are you sure,you want to delete the comment?', 'elex-multi-vendor-for-woocommerce' ); ?></div>
		</div>


		<div class="d-flex gap-3 justify-content-center ">
			<button class="btn px-4 btn-outline-secondary" data-bs-dismiss="toast"><?php echo esc_html_e( 'Cancel', 'elex-multi-vendor-for-woocommerce' ); ?></button>
			<button class="btn px-4 btn-primary" id="confirm-delete">
				<?php echo esc_html_e( 'Confirm', 'elex-multi-vendor-for-woocommerce' ); ?>
			</button>
		</div>
	</div>

</div>
<!-- </div> -->
