<?php
// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound
/**
 * Review Details Modal Template
 *
 * @package Ugcify
 */

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

<div id="ugcify-review-details-modal" class="ugcify-review-modal-overlay" style="display: none;" aria-hidden="true" role="dialog" aria-modal="true">
	<div class="ugcify-review-modal ugcify-review-details-modal">
		<div class="ugcify-review-modal-content">
			<button class="ugcify-review-modal-close" type="button" aria-label="<?php esc_attr_e( 'Close', 'ugcify' ); ?>">
				<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none">
					<path d="M16.8889 5.83511L14.4316 3.37778L10.1334 7.676L5.83514 3.37778L3.37781 5.83511L7.67603 10.1333L3.37781 14.4316L5.83514 16.8889L10.1334 12.5907L14.4316 16.8889L16.8889 14.4316L12.5907 10.1333L16.8889 5.83511Z" fill="#E56829"/>
				</svg>
			</button>

			<div class="ugcify-review-details-body">
				<!-- Loading State -->
				<div class="ugcify-review-details-loading">
					<div class="ugcify-spinner"></div>
				</div>

				<!-- Content Wrapper: single review shown in modal (semantic article when filled by JS) -->
				<article class="ugcify-review-details-content-wrapper" style="display:none;" aria-label="<?php esc_attr_e( 'Review details', 'ugcify' ); ?>">
					<!-- Left Column: Media Gallery (hidden for text-only reviews) -->
					<div class="ugcify-review-media-column">
						<div class="ugcify-review-details-main-media ugcify-media-carousel">
							<button class="ugcify-review-details-carousel-nav ugcify-review-details-carousel-nav-prev ugcify-carousel-arrow ugcify-carousel-prev" type="button" aria-label="<?php esc_attr_e( 'Previous attachment', 'ugcify' ); ?>">
								<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M7 13L1 7L7 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</button>
							<div class="ugcify-review-details-main-media-track ugcify-carousel-main">
								<!-- Main image/video slides will be injected here -->
							</div>
							<button class="ugcify-review-details-carousel-nav ugcify-review-details-carousel-nav-next ugcify-carousel-arrow ugcify-carousel-next" type="button" aria-label="<?php esc_attr_e( 'Next attachment', 'ugcify' ); ?>">
								<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M1 13L7 7L1 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</button>
						</div>
						<div class="ugcify-review-details-thumbs ugcify-carousel-thumbnails">
							<!-- Thumbnails will be injected here -->
						</div>
					</div>

					<!-- Right Column: Review Info -->
					<div class="ugcify-review-info-column">
						<div class="ugcify-review-author-section">
							<div class="ugcify-author-avatar">
								<!-- Avatar will be injected -->
							</div>
							<div class="ugcify-author-details">
								<div class="ugcify-author-name-row">
									<span class="ugcify-author-name"></span>
									<span class="ugcify-verified-badge" style="display:none;">
										<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
											<circle cx="8" cy="8" r="8" fill="#27AE60"/>
											<path d="M5 8L7 10L11 6" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
									</span>
									<span class="ugcify-influencer-badge" style="display:none;">
										<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
											<g transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
												<path d="M 44.759 63.847 L 56.954 90 l 9.909 -9.079 l 13.325 -1.755 L 68.323 53.721 c -9.609 -0.082 -17.439 3.046 -23.082 10.126" fill="rgb(237,99,98)"/>
												<path d="M 45.241 63.847 L 33.046 90 l -9.909 -9.079 L 9.812 79.166 l 11.865 -25.445 C 33.52 52.826 41.539 56.026 45.241 63.847 z" fill="rgb(233,84,84)"/>
												<path d="M 45 63.847 c 17.631 0 31.923 -14.293 31.923 -31.923 S 62.631 0 45 0 C 34.483 21.782 33.645 43.104 45 63.847 z" fill="rgb(255,204,91)"/>
												<path d="M 45 63.847 c -17.631 0 -31.923 -14.293 -31.923 -31.923 S 27.369 0 45 0 v 63.814" fill="rgb(253,188,75)"/>
												<path d="M 38.778 54.411 c -0.092 0 -0.186 -0.013 -0.279 -0.039 C 26.122 50.786 18.967 37.8 22.552 25.422 c 0.153 -0.531 0.707 -0.836 1.239 -0.682 c 0.53 0.153 0.836 0.708 0.682 1.239 c -3.277 11.318 3.264 23.193 14.583 26.471 c 0.53 0.154 0.836 0.709 0.682 1.239 C 39.611 54.127 39.211 54.411 38.778 54.411 z" fill="rgb(236,153,34)"/>
												<path d="M 66.487 39.146 c -0.092 0 -0.186 -0.013 -0.278 -0.04 c -0.53 -0.154 -0.836 -0.708 -0.683 -1.239 c 1.589 -5.483 0.946 -11.256 -1.808 -16.256 c -2.755 -5 -7.291 -8.628 -12.774 -10.216 c -0.53 -0.153 -0.836 -0.708 -0.683 -1.239 c 0.154 -0.53 0.708 -0.835 1.239 -0.682 c 5.996 1.736 10.957 5.704 13.969 11.172 c 3.013 5.468 3.715 11.781 1.979 17.777 C 67.321 38.862 66.922 39.146 66.487 39.146 z" fill="rgb(236,153,34)"/>
												<path d="M 37.058 47.693 c -0.225 0 -0.449 -0.075 -0.633 -0.227 c -0.374 -0.306 -0.476 -0.836 -0.241 -1.259 l 6.723 -12.121 l -5.127 -2.93 c -0.283 -0.162 -0.47 -0.451 -0.5 -0.776 c -0.03 -0.325 0.1 -0.644 0.348 -0.854 l 14.177 -12.04 c 0.359 -0.304 0.878 -0.317 1.253 -0.034 c 0.374 0.285 0.499 0.791 0.302 1.217 l -5.036 10.86 l 5.096 2.766 c 0.289 0.157 0.482 0.447 0.517 0.775 c 0.034 0.328 -0.095 0.651 -0.346 0.865 L 37.706 47.455 C 37.52 47.613 37.289 47.693 37.058 47.693 z" fill="rgb(236,153,34)"/>
											</g>
										</svg>
									</span>
								</div>
								<span class="ugcify-review-date"></span>
							</div>
						</div>

						<div class="ugcify-review-rating-section">
							<div class="ugcify-review-stars"></div>
							<span class="ugcify-rating-count"></span>
						</div>

						<div class="ugcify-review-text-and-product-section">
							<div class="ugcify-review-text-content">
								<!-- Review text content -->
							</div>

							<!-- About Product Section -->
							<div class="ugcify-review-product-section">
								<h4 class="ugcify-product-section-title"><?php esc_html_e( 'About Product', 'ugcify' ); ?></h4>
								<div class="ugcify-product-card">
									<div class="ugcify-product-thumbnail">
										<!-- Product image -->
									</div>
									<div class="ugcify-product-info">
										<a href="#" class="ugcify-product-title"></a>
										<div class="ugcify-product-price">
											<span class="ugcify-price-label"><?php esc_html_e( 'Price:', 'ugcify' ); ?></span>
											<span class="ugcify-price-current"></span>
											<span class="ugcify-price-original"></span>
										</div>
										<div class="ugcify-product-variations" style="display:none;"></div>
										<div class="ugcify-product-actions">
											<div class="ugcify-qty-selector">
												<button type="button" class="ugcify-qty-btn ugcify-qty-minus" aria-label="<?php esc_attr_e( 'Decrease quantity', 'ugcify' ); ?>">-</button>
												<input
													type="number"
													class="ugcify-qty-input"
													value="1"
													min="1"
													inputmode="numeric"
													aria-label="<?php esc_attr_e( 'Quantity', 'ugcify' ); ?>"
												/>
												<button type="button" class="ugcify-qty-btn ugcify-qty-plus" aria-label="<?php esc_attr_e( 'Increase quantity', 'ugcify' ); ?>">+</button>
											</div>
											<button type="button" class="ugcify-add-to-cart-btn"><?php esc_html_e( 'Add To Cart', 'ugcify' ); ?></button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</article>

				<!-- Footer Navigation -->
				<div class="ugcify-review-modal-footer" style="display:none;">
					<button class="ugcify-nav-btn ugcify-nav-prev" type="button">
						<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M6 1L1 6L6 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M1 6H15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						<?php esc_html_e( 'Previous Review', 'ugcify' ); ?>
					</button>
					<button class="ugcify-nav-btn ugcify-nav-next" type="button">
						<?php esc_html_e( 'Next Review', 'ugcify' ); ?>
						<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M10 1L15 6L10 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
							<path d="M15 6H1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
