<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
 * Provides the public-facing view for the AI Style Assistant section.
 *
 * @link       https://trynbuy.edubrazeal.com/
 * @since      1.0.0
 *
 * @package    Ai_Try_N_Buy
 * @subpackage Ai_Try_N_Buy/public/views
 */
?>

<section class="aitnb-style-assistant-section">
    <div class="aitnb-style-assistant-header">
        <h2><?php esc_html_e( 'Complete The Look', 'virtual-ai-fit-and-style-assistant' ); ?></h2>
        <button type="button" class="button aitnb-hidden aitnb-add-all-to-cart-btn">
			<?php esc_html_e( 'Add All to Cart', 'virtual-ai-fit-and-style-assistant' ); ?>
		</button>
    </div>

    <div class="aitnb-recommendations-container">
        <div class="aitnb-style-loader">
            <p><?php esc_html_e( 'Finding complementary styles...', 'virtual-ai-fit-and-style-assistant' ); ?></p>
        </div>
    </div>

    <div class="aitnb-hidden aitnb-product-card-template">
        <div class="aitnb-product-card">
            <a href="#">
                <div class="aitnb-card-image">
                    <img src="" alt="">
                </div>
                <div class="aitnb-card-content">
                    <h4 class="aitnb-card-title"></h4>
                    <span class="aitnb-card-price"></span>
                </div>
            </a>
        </div>
    </div>
</section>

<div class="aitnb-fit-modal-container aitnb-variation-modal">
    <div class="aitnb-fit-modal-overlay"></div>
    <div class="aitnb-fit-modal-content">
        <div class="aitnb-fit-modal-header">
            <h3><?php esc_html_e( 'Please Choose Options', 'virtual-ai-fit-and-style-assistant' ); ?></h3>
            <button type="button" class="aitnb-fit-modal-close-btn">&times;</button>
        </div>
        <div class="aitnb-fit-modal-body aitnb-variation-modal-body">
            </div>
        <div class="aitnb-fit-modal-footer">
			<button type="button" class="aitnb-fit-modal-button aitnb-confirm-variations-btn"><?php esc_html_e( 'Confirm & Add to Cart', 'virtual-ai-fit-and-style-assistant' ); ?></button>
        </div>
    </div>
</div>

<div class="aitnb-hidden aitnb-variation-product-template">
	<div class="aitnb-variation-product-item" data-product-id="">
		<button type="button" class="aitnb-remove-variation-item">&times;</button>
		<div class="aitnb-variation-product-info">
			<img src="" alt="" class="aitnb-variation-product-image">
			<h4 class="aitnb-variation-product-title"></h4>
		</div>
		<div class="aitnb-variation-selectors">
			</div>
		<p class="aitnb-variation-product-price"></p>
	</div>
</div>
