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

// Get current active tab from the URL query parameter, default to 'main_options'
// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Only used to control tab UI, not for processing sensitive input.
  $active_tab = isset( $_GET[ 'tab' ]) ? sanitize_key($_GET[ 'tab']) : 'main_options';
?>
<div class="wrap" id="doosearchas-search-settings" data-active-tab="<?php echo esc_attr($active_tab); ?>">
    <h1><?php echo esc_html(get_admin_page_title()) ; ?></h1>
    <h2 class="nav-tab-wrapper">
      <a href="?page=doosearchas_search_menu_slug&tab=main_options" class="nav-tab <?php echo $active_tab == 'main_options' ? 'nav-tab-active' : ''; ?>"> <?php esc_html_e('Main Options','doosearch-ajax-search-for-woo'); ?> </a>
      <a href="?page=doosearchas_search_menu_slug&tab=style_options" class="nav-tab <?php echo $active_tab == 'style_options' ? 'nav-tab-active' : ''; ?>"> <?php esc_html_e('Search Bar','doosearch-ajax-search-for-woo'); ?> </a>
      <a href="?page=doosearchas_search_menu_slug&tab=upgrade_options" 
        class="nav-tab <?php echo $active_tab == 'upgrade_options' ? 'nav-tab-active' : ''; ?>" 
        style="color: #0b470b;">
        <?php esc_html_e('Upgrade to','doosearch-ajax-search-for-woo'); ?>
        <span style="background: #9b5c8f;vertical-align: middle; padding:4px; color: #fff; font-style: normal;  margin: 0 0 0 3px; font-size: 10px; text-transform: uppercase; letter-spacing: 0;  border-radius: 4px;">pro</span>
      </a>
      <a href="?page=doosearchas_search_menu_slug&tab=filter_options" class="nav-tab <?php echo $active_tab == 'filter_options' ? 'nav-tab-active' : ''; ?>"> <?php esc_html_e('Filter Options','doosearch-ajax-search-for-woo'); ?> </a>
      <a href="?page=doosearchas_search_menu_slug&tab=product_options" class="nav-tab <?php echo $active_tab == 'product_options' ? 'nav-tab-active' : ''; ?>"> <?php esc_html_e('Product UI','doosearch-ajax-search-for-woo'); ?> </a>
      <a href="?page=doosearchas_search_menu_slug&tab=additional_options" class="nav-tab <?php echo $active_tab == 'additional_options' ? 'nav-tab-active' : ''; ?>"> <?php esc_html_e('Additional Options','doosearch-ajax-search-for-woo'); ?> </a>
    </h2>
    <form action="options.php" method="post">
        <?php
        if( $active_tab == 'main_options'){
          settings_fields('doosearchas_search_main_group');
          do_settings_sections('doosearchas_search_main_page');
        }elseif($active_tab == 'style_options'){
          settings_fields('doosearchas_search_style_group');
          do_settings_sections('doosearchas_search_style_page');
        }elseif($active_tab == 'upgrade_options'){
          settings_fields('doosearchas_search_upgrade_group');
          do_settings_sections('doosearchas_search_upgrade_page');
        }elseif($active_tab == 'filter_options'){
          settings_fields('doosearchas_search_filter_group');
          do_settings_sections('doosearchas_search_filter_page');
        }elseif($active_tab == 'product_options'){
          settings_fields('doosearchas_search_product_group');
          do_settings_sections('doosearchas_search_product_page');
        }else{
          settings_fields('doosearchas_search_additional_group');
          do_settings_sections('doosearchas_search_additional_page');
        }

        // Output submit button for the form
        submit_button(esc_html__('Save Settings','doosearch-ajax-search-for-woo'));
        ?>
    </form>
</div>