<?php
/**
 * Product description step 3 interesting facts 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-3 <?php echo ! empty( $interesting_facts ) ? 'valid' : ''; ?>" data-step="3">
    <h3><?php esc_html_e( 'Tell us some interesting facts about your product', 'storeagent-ai-for-woocommerce' ); ?></h3>
    <div class="saai-product-description-form-step-content">
        <p class="saai-product-description-form-step-description"><?php esc_html_e( 'It works best with 3-6 but you can give up to 10. We’ll try and incorporate them into the copy.', 'storeagent-ai-for-woocommerce' ); ?></p>

        <div class="saai-product-description-interesting-facts-container saai-add-remove-field-container" data-name="interesting_facts">
            <label for="saai-product-description-form-field-interesting-facts"><?php esc_html_e( 'Tell me an interesting fact:', 'storeagent-ai-for-woocommerce' ); ?></label>
            <?php if ( ! empty( $interesting_facts ) ) : ?>
                <?php foreach ( $interesting_facts as $interesting_fact ) : ?>
                    <div class="saai-product-description-form-field saai-add-remove-field">
                        <input type="text" name="interesting_facts[]" value="<?php echo esc_attr( $interesting_fact ); ?>" />
                        <button type="button" class="button saai-add-field-button"><span class="dashicons dashicons-plus"></span></button>
                        <button type="button" class="button saai-remove-field-button"><span class="dashicons dashicons-minus"></span></button>
                    </div>
                <?php endforeach; ?>
            <?php else : ?>
                <div class="saai-product-description-form-field saai-add-remove-field">
                    <input type="text" name="interesting_facts[]" />
                    <button type="button" class="button saai-add-field-button"><span class="dashicons dashicons-plus"></span></button>
                    <button type="button" class="button saai-remove-field-button"><span class="dashicons dashicons-minus"></span></button>
                </div>
            <?php endif; ?>
        </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>
