<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
 * Provides the public-facing view for the 'Try On' button and AR modal.
 *
 * This file is responsible for rendering the HTML that users will interact with.
 *
 * @link       https://trynbuy.edubrazeal.com/
 * @since      1.0.0
 *
 * @package    Ai_Try_N_Buy
 * @subpackage Ai_Try_N_Buy/public/views
 */
?>

<div class="aitnb-ar-container">
	<div class="aitnb-ar-overlay"></div>
	<div class="aitnb-ar-modal">
		<div class="aitnb-ar-header">
			<h3><?php esc_html_e( 'Virtual Try On', 'virtual-ai-fit-and-style-assistant' ); ?></h3>
			<button type="button" class="aitnb-close-btn">&times;</button>
		</div>
		<div class="aitnb-ar-body">
			<div class="aitnb-ar-scene-placeholder">
			</div>
			<div class="aitnb-loader">
				<p><?php esc_html_e( 'Initializing camera...', 'virtual-ai-fit-and-style-assistant' ); ?></p>
			</div>
			<div class="aitnb-position-controls">
				<div class="aitnb-controls-group">
					<button type="button" class="aitnb-control-btn" data-action="position-up">&uarr;</button>
					<button type="button" class="aitnb-control-btn" data-action="position-down">&darr;</button>
				</div>
				<div class="aitnb-controls-group">
					<button type="button" class="aitnb-control-btn" data-action="scale-up">+</button>
					<button type="button" class="aitnb-control-btn" data-action="scale-down">-</button>
				</div>
			</div>
		</div>
		<div class="aitnb-ar-footer">
			<p class="aitnb-instructions">
				<?php esc_html_e( 'Look directly at the camera in a well-lit area for best results.', 'virtual-ai-fit-and-style-assistant' ); ?>
			</p>
		</div>
	</div>
</div>

<div class="aitnb-mv-container">
	<div class="aitnb-ar-overlay"></div>
	<div class="aitnb-ar-modal">
		<div class="aitnb-ar-header">
			<h3><?php esc_html_e( 'View in Your Space', 'virtual-ai-fit-and-style-assistant' ); ?></h3>
			<button type="button" class="aitnb-mv-close-btn aitnb-close-btn">&times;</button>
		</div>
		<div class="aitnb-ar-body">
			<model-viewer
				class="aitnb-model-viewer-tag"
				ar
				ar-modes="webxr scene-viewer quick-look"
				camera-controls
				shadow-intensity="1"
				alt="A 3D model of the product"
			>
			</model-viewer>
		</div>
		<div class="aitnb-ar-footer">
			<p class="aitnb-instructions">
				<?php esc_html_e( 'Drag to rotate the model. On a mobile device, tap the AR icon to place it in your room.', 'virtual-ai-fit-and-style-assistant' ); ?>
			</p>
		</div>
	</div>
</div>