<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
/**
 * Provides the public-facing view for the 'Find My Size' button and modal.
 *
 * This file is responsible for rendering the HTML for the AI Fit Recommender.
 *
 * @link       https://trynbuy.edubrazeal.com/
 * @since      1.0.0
 *
 * @package    Ai_Try_N_Buy
 * @subpackage Ai_Try_N_Buy/public/views
 */
?>

<div class="aitnb-fit-modal-container aitnb-fit-recommender-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( 'AI Size Assistant', 'virtual-ai-fit-and-style-assistant' ); ?></h3>
            <button type="button" class="aitnb-fit-modal-close-btn aitnb-fit-close-btn">&times;</button>
        </div>
        <div class="aitnb-fit-modal-body">
            <p><?php esc_html_e( 'Answer a few questions to get a personalized size recommendation from our AI.', 'virtual-ai-fit-and-style-assistant' ); ?></p>
            <div class="aitnb-fit-modal-form aitnb-fit-recommender-form">
                
                <div class="aitnb-form-field-component">
                    <label for="aitnb-height" class="aitnb-component-label"><?php esc_html_e( 'Height (cm)', 'virtual-ai-fit-and-style-assistant' ); ?></label>
                    <div class="aitnb-input-wrapper">
                        <input type="number" id="aitnb-height" name="user_data[height]" class="aitnb-component-input aitnb-height" placeholder="e.g., 175" required>
                    </div>
                </div>

                <div class="aitnb-form-field-component">
                    <label for="aitnb-weight" class="aitnb-component-label"><?php esc_html_e( 'Weight (kg)', 'virtual-ai-fit-and-style-assistant' ); ?></label>
                    <div class="aitnb-input-wrapper">
                        <input type="number" id="aitnb-weight" name="user_data[weight]" class="aitnb-component-input aitnb-weight" placeholder="e.g., 70" required>
                    </div>
                </div>

                <div class="aitnb-form-field-component">
                    <label for="aitnb-fit-preference" class="aitnb-component-label"><?php esc_html_e( 'How do you like the fit?', 'virtual-ai-fit-and-style-assistant' ); ?></label>
                    <div class="aitnb-select-wrapper">
                        <select id="aitnb-fit-preference" name="user_data[fit_preference]" class="aitnb-component-select aitnb-fit-preference" required>
                            <option value="slim"><?php esc_html_e( 'Slim Fit', 'virtual-ai-fit-and-style-assistant' ); ?></option>
                            <option value="regular" selected><?php esc_html_e( 'Regular Fit', 'virtual-ai-fit-and-style-assistant' ); ?></option>
                            <option value="loose"><?php esc_html_e( 'Loose Fit', 'virtual-ai-fit-and-style-assistant' ); ?></option>
                        </select>
                    </div>
                </div>

                <button type="button" class="aitnb-fit-modal-button aitnb-get-recommendation-btn"><?php esc_html_e( 'Get Recommendation', 'virtual-ai-fit-and-style-assistant' ); ?></button>
            </div>
        </div>
        <div class="aitnb-fit-modal-footer">
            <div class="aitnb-fit-modal-result aitnb-fit-recommender-result">
                
            </div>
        </div>
    </div>
</div>