<?php
/**
 * Product description step 8 size options template.
 *
 * @package SAAI
 */

if ( ! defined( 'ABSPATH' ) ) {
    die( 'You are not allowed to call this page directly.' );
}

?>

<div class="saai-product-description-form-step saai-product-description-form-step-8 <?php echo ! empty( $size_options ) ? 'valid' : ''; ?>" data-step="8">
    <h3><?php esc_html_e( 'Size Options', 'storeagent-ai-for-woocommerce' ); ?></h3>
    <div class="saai-product-description-form-step-content">
        <div class="saai-optional-step-switch-form-field">
            <label for="saai-product-description-form-field-size-options-label"><?php esc_html_e( 'Does your product have sizes?', 'storeagent-ai-for-woocommerce' ); ?></label>
            <div class="saai-switch-container saai-optional-step-switch">
                <span class="saai-switch-label"><?php esc_html_e( 'No', 'storeagent-ai-for-woocommerce' ); ?></span>
                <label class="saai-switch">
                    <input type="checkbox" id="saai-product-description-form-field-size-options" value="yes" <?php checked( ! empty( $size_options ), true ); ?> />
                    <span class="saai-switch-slider"></span>
                </label>
                <span class="saai-switch-label"><?php esc_html_e( 'Yes', 'storeagent-ai-for-woocommerce' ); ?></span>
            </div>
        </div>

        <div class="saai-product-description-size-options-container">
            <label for="saai-product-description-form-field-size-options"><?php esc_html_e( 'Size options:', 'storeagent-ai-for-woocommerce' ); ?></label>
            <div class="saai-product-description-form-field">
                <select name="sizes[]" multiple="multiple" style="width: 100%;">
                    <?php if ( ! empty( $sizes ) ) : ?>
                        <?php foreach ( $sizes as $size ) : ?>
                            <option value="<?php echo esc_attr( $size ); ?>" selected><?php echo esc_html( $size ); ?></option>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </select>
            </div>
        </div>

        <div class="saai-product-description-step-actions-field">
            <button type="button" class="button previous-step-button">
                <?php esc_html_e( 'Back', 'storeagent-ai-for-woocommerce' ); ?>
            </button>
            <button type="button" class="button-primary next-step-button">
                <?php esc_html_e( 'Next', 'storeagent-ai-for-woocommerce' ); ?>
            </button>
        </div>
    </div>
</div>
