<?php
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

$settings_group = $settings_group ?? (defined('SAPSFWC_SETTINGS_GROUP') ? SAPSFWC_SETTINGS_GROUP : '');
$menu_slug      = $menu_slug ?? (defined('SAPSFWC_MENU_SLUG'));
?>

<div class="wrap">

    <h1><?php esc_html_e('Simple AJAX Product Search For WooCommerce Settings', 'simple-ajax-product-search-for-woocommerce'); ?></h1>

    <?php $this->renderUpgradeNoticeBox(); ?>

    <div class="features-wrap">
        <h2><?php esc_html_e('How to Display the Simple AJAX Product Search Toggle', 'simple-ajax-product-search-for-woocommerce'); ?></h2>
        <p><?php esc_html_e('You can display the product search toggle button in multiple ways:', 'simple-ajax-product-search-for-woocommerce'); ?></p>

        <div>
            <p><strong><?php esc_html_e('Shortcode:', 'simple-ajax-product-search-for-woocommerce'); ?></strong></p>
            <p>
                <?php
                printf(
                /* translators: shortcode example */
                    esc_html__('Place the shortcode %s anywhere on your site to display the toggle button.', 'simple-ajax-product-search-for-woocommerce'),
                    '<code>[sapsfwc_button]</code>'
                );
                ?>
            </p>
            <p>
                <?php
                printf(
                /* translators: shortcode label example */
                    esc_html__('You can optionally include a label like this: %s', 'simple-ajax-product-search-for-woocommerce'),
                    '<code>[sapsfwc_button label="Search Products"]</code>'
                );
                ?>
            </p>
            <p><em><?php esc_html_e('Note: The button will inherit your theme’s default styling.', 'simple-ajax-product-search-for-woocommerce'); ?></em></p>
        </div>

        <div class="feature-item">
            <p><strong><?php esc_html_e('Menu Item:', 'simple-ajax-product-search-for-woocommerce'); ?></strong></p>
            <p><?php esc_html_e('In Appearance → Menus, use the "Simple AJAX Product Search Toggle" metabox to insert a custom menu item that triggers the search overlay.', 'simple-ajax-product-search-for-woocommerce'); ?></p>
        </div>

        <div class="feature-item">
            <p><strong><?php esc_html_e('Gutenberg Block:', 'simple-ajax-product-search-for-woocommerce'); ?></strong></p>
            <p><?php esc_html_e('If you\'re using the Gutenberg block editor, insert the "Simple AJAX Product Search Toggle" block to place the search button directly within your page layout.', 'simple-ajax-product-search-for-woocommerce'); ?></p>
        </div>
    </div>

    <form method="post" action="options.php">
        <?php
        settings_fields(SAPSFWC_SETTINGS_GROUP);
        do_settings_sections(SAPSFWC_MENU_SLUG);
        submit_button();
        ?>
        <input type="submit"
               id="sapsfwc-reset-button"
               name="sapsfwc_reset"
               class="button button-secondary"
               data-confirm="<?php echo esc_attr__('Are you sure you want to reset all settings to their default values? This action cannot be undone.', 'simple-ajax-product-search-for-woocommerce'); ?>"
               value="<?php esc_attr_e('Reset to Defaults', 'simple-ajax-product-search-for-woocommerce'); ?>">
    </form>

    <?php $this->renderUpgradeNoticeBox(); ?>

</div>
