<?php

$option_name = 'wcmlim';

// Add license check like in original file
if (get_option('wcmlim_license') == '' || get_option('wcmlim_license') == 'invalid') {
  ?>
  <script>
    window.location.href = "?page=multi-location-inventory-management";
  </script>
  <?php
}
$wcmlim_allow_only_backend = get_option('wcmlim_allow_only_backend');
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>WooCommerce Multi-Locations Inventory Management Settings</title>
  <link rel="stylesheet" href="<?php echo plugin_dir_url(dirname(__FILE__)) . 'css/wcmlim-settings.css'; ?>" />

  <link rel="stylesheet" href="<?php echo plugin_dir_url(dirname(__FILE__)) . 'css/wcmlim-settings.css'; ?>" />
  
  <!-- Add these lines to load jQuery UI -->
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

</head>

<body>
  <div class="wrap">

  <!-- Header Section -->
  <div class="wcmlim-header-section">
    <div class="wcmlim-title">
      <h1>MULTILOCA</h1>      
    </div>
    <div class="wcmlim-header-buttons">
      <a href="https://techspawn.com/connect-with-techspawn/" target="_blank" class="button wcmlim-contact-btn">Get Support</a>
      <a href="https://techspawn.com/docs/woocommerce-multi-locations-inventory-management/" target="_blank" class="button wcmlim-docs-btn">Documentation</a>
    </div>
    </div>

    <style>
    .wcmlim-header-section {
      padding: 20px;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .wcmlim-header-section h1 {
      font-size: 24px;
      color: #333;
      margin: 0;
    }
    
    .wcmlim-header-buttons {
      display: flex;
      gap: 10px;
    }
    
    .wcmlim-contact-btn {
      border: none !important;
      background-color: #2271b1 !important;
      color: white !important;
    }
    
    .wcmlim-docs-btn {
      background-color: #f0f0f1 !important;
      color: #2271b1 !important;
      border: 1px solid #2271b1 !important;
    }
    
    /* OpenPOS Dynamic Pricing conditional visibility */
    .openpos-dynamic-pricing {
      display: none;
    }

    /* Universal Tooltip Styles for WCMLIM Settings */
    .wcmlim-info-tooltip {
      position: relative;
      display: inline-block;
    }
    
    .wcmlim-enhanced-tooltiptext {
      visibility: hidden;
      width: 280px;
      background: #ffffff;
      color: #333;
      border-radius: 6px;
      padding: 0;
      position: absolute;
      z-index: 9999;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
      box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.1);
      border: 1px solid #e0e0e0;
    }
    
    .wcmlim-enhanced-tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -6px;
      border-width: 6px;
      border-style: solid;
      border-color: #ffffff transparent transparent transparent;
    }
    
    .wcmlim-tooltip-header {
      padding: 12px 16px 8px;
      font-size: 14px;
      font-weight: 600;
      color: #0a3d62;
    }
    
    .wcmlim-tooltip-content {
      padding: 8px 16px 12px;
      font-size: 13px;
      line-height: 1.4;
      color: #555;
    }
    
    .wcmlim-tooltip-footer {
      padding: 12px 16px;
      text-align: right;
    }
    
    .wcmlim-tooltip-link {
      background: #007cba;
      color: #ffffff !important;
      text-decoration: none !important;
      font-size: 12px;
      font-weight: 500;
      padding: 3px 6px;
      border-radius: 4px;
      display: inline-block;
      transition: background-color 0.2s;
    }
    
    .wcmlim-tooltip-link:hover {
      background: #005a87 !important;
      color: #ffffff !important;
      text-decoration: none !important;
    }
    
    .wcmlim-info-tooltip:hover .wcmlim-enhanced-tooltiptext {
      visibility: visible;
      opacity: 1;
    }
    </style>

    <!-- Loading Overlay -->
    <div id="loading-overlay" class="loading-overlay hidden">
      <div class="loader-new-setting"></div>
    </div>

    <!-- Tab Navigation -->
    <div class="tabs">
      <div class="tab active" data-tab="location">Location</div>
      <div class="tab" data-tab="general">General</div>
      <div class="tab" data-tab="shop">Shop Page</div>
      <div class="tab" data-tab="payment">Shipping and Payment Method</div>
      <div class="tab" data-tab="fulfillment">Order Fulfillment</div>
      <div class="tab" data-tab="notices">Notice Messages</div>
      <div class="tab" data-tab="shortcodes">Shortcodes & Documentation</div>
      <div class="tab" data-tab="header-shortcodes">Header Shortcodes</div>
    </div>

    <!--  Tab Content Sections  -->
    <div class="tab-content-container">

      <!-- ======================================== Location Content ============================================================= -->
      <div id="location-content" class="tab-content">
        
        <form id="location-form" class="settings-form">
          <!-- Form will be populated here -->
          
          <h2 class="header-title"><?php esc_html_e('Location Settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure location selection options for your store.', 'wcmlim'); ?></span>

          <!-- Autodetect User Location With Browser -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_distance_calculator_by_coordinates"
                  id="<?php echo $option_name; ?>_distance_calculator_by_coordinates" <?php checked(get_option($option_name . '_distance_calculator_by_coordinates'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php echo esc_html__( 'Autodetect User Location With Browser', 'wcmlim' ); ?></h3>
              <p><?php echo esc_html__( 'Enable this feature to automatically detect the users current location using browser.', 'wcmlim' ); ?></p>
            </div>
          </div>

           <!-- Autodetect User Location With Cloudfare -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_distance_calculator_by_cloudfare"
                  id="<?php echo $option_name; ?>_distance_calculator_by_cloudfare" <?php checked(get_option($option_name . '_distance_calculator_by_cloudfare'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Autodetect User Location With Cloudfare', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this feature to automatically detect the user\'s current location using Cloudfare.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Autodetect User Location With Maxmind -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_autodetect_location_by_maxmind"
                  id="<?php echo $option_name; ?>_enable_autodetect_location_by_maxmind" <?php checked(get_option($option_name . '_enable_autodetect_location_by_maxmind'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Autodetect User Location With Maxmind', 'wcmlim'); ?></h3>
              <p>
                <?php esc_html_e('Use the MaxMind for accurate location detection, suitable for users requiring enhanced location precision. To setup maxmind please click below', 'wcmlim'); ?>
                <br> <a href='#'><?php esc_html_e('Setup Maxmind', 'wcmlim'); ?></a>
              </p>
            </div>
          </div>

          <!-- Autodetect User Location With Google -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_autodetect_location"
                  id="<?php echo $option_name; ?>_enable_autodetect_location" <?php checked(get_option($option_name . '_enable_autodetect_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Autodetect User Location With Google', 'wcmlim'); ?></h3>
              <p><?php echo sprintf(
                esc_html__('Input your Google API key to activate location services using Google Maps. To obtain an API key, please generate one by following this %s', 'wcmlim'),
                '<b><a href="https://developers.google.com/maps/documentation/distance-matrix/get-api-key" target="_blank">' . esc_html__('Link', 'wcmlim') . '</a></b>'
              ); ?><br><b><?php esc_html_e('Note:-', 'wcmlim'); ?></b> <?php esc_html_e('you will need to enable the Places API, Distance Matrix API, Geocoding API, and Maps JavaScript API to use this service.', 'wcmlim'); ?></p>
              <div class="api-key-container" style="margin-top: 10px;">
                <div class="api-input-group" style="display: flex; position: relative;">
                  <input type="password" name="<?php echo $option_name; ?>_google_api_key"
                    id="<?php echo $option_name; ?>_google_api_key" class="regular-text"
                    value="<?php echo esc_attr(get_option($option_name . '_google_api_key', '')); ?>"
                    placeholder="<?php esc_attr_e('Enter Google API Key', 'wcmlim'); ?>">
                  <button type="button" class="button toggle-password google_api_show_btn" style="margin-left: 5px;">
                    <?php esc_html_e('Show', 'wcmlim'); ?>
                  </button>
                </div>
                <button type="button" class="button validate-api-key wcmlimvalidateGMAPI" style="margin-top: 10px;">
                  <?php esc_html_e('Validate API Key', 'wcmlim'); ?>
                </button>
              </div>

            </div>
          </div>

          <!-- Autodetect User Location With IPinfo -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_autodetect_location_with_ipinfo"
                  id="<?php echo $option_name; ?>_enable_autodetect_location_with_ipinfo" <?php checked(get_option($option_name . '_enable_autodetect_location_with_ipinfo'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1; display: flex; align-items: flex-start;">
              <div>
                <h3 class="option-title"><?php esc_html_e('Autodetect User Location With IPinfo', 'wcmlim'); ?></h3>
                <p><?php esc_html_e('Enable this feature to automatically detect the user\'s current location using IPinfo.', 'wcmlim'); ?></p>

                <div class="api-key-container" style="margin-top: 15px;">
                  <div class="api-input-group" style="display: flex; position: relative;">
                    <input type="password" name="<?php echo $option_name; ?>_ipinfo_api_token"
                      id="<?php echo $option_name; ?>_ipinfo_api_token" class="regular-text"
                      value="<?php echo esc_attr(get_option($option_name . '_ipinfo_api_token', '')); ?>"
                      placeholder="<?php esc_attr_e('Enter IPinfo API Token', 'wcmlim'); ?>">
                    <button type="button" class="button toggle-password ipinfo_api_show_btn" style="margin-left: 5px;">
                      <?php esc_html_e('Show', 'wcmlim'); ?>
                    </button>
                  </div>
                  <button type="button" class="button validate-api-key wcmlimvalidateIPINFO" style="margin-top: 10px;">
                    <?php esc_html_e('Validate API Token', 'wcmlim'); ?>
                  </button>
                </div>
              </div>

              <!-- Vertical line separator -->
              <div style="width: 1px; background-color: #b1b1b1; margin: 0 20px; align-self: stretch;"></div>

              <div>
                <p>
                  <b><?php esc_html_e('Setup Instructions:', 'wcmlim'); ?></b><br>
                  <?php echo sprintf(
                    esc_html__('1. &nbsp; Go to IPinfo.io%s in your browser', 'wcmlim'),
                    '<a href=\'https://ipinfo.io/products/ip-geolocation-api\' target=\'_blank\'> (' . esc_html__('Setup IPinfo', 'wcmlim') . ') </a>'
                  ); ?><br>
                  <?php esc_html_e('2. &nbsp; Sign up or log in', 'wcmlim'); ?><br>
                  <?php esc_html_e('3. &nbsp; Go to your IPinfo Dashboard', 'wcmlim'); ?><br>
                  <?php esc_html_e('4. &nbsp; Find the API Token in API Token section', 'wcmlim'); ?><br>
                  <?php esc_html_e('5. &nbsp; Copy that API token', 'wcmlim'); ?><br>
                  <?php esc_html_e('6. &nbsp; Paste it in the \'Enter Your IPinfo API Token\' field and validate it to ensure whether it is working', 'wcmlim'); ?><br>
                </p>
              </div>
            </div>
          </div>

          <!-- Restrict to One Location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_clear_cart"
                  id="<?php echo $option_name; ?>_clear_cart" <?php checked(get_option($option_name . '_clear_cart'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Restrict to One Location', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Activate this option if you wish to restrict users to order only from one location. Only the products of same location can be ordered.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Nearby location finder Search box -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_geo_location"
                  id="<?php echo $option_name; ?>_geo_location" <?php checked(get_option($option_name . '_geo_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Nearby location finder Search box', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('To enable features associated with Google Maps, such as location discovery and distance calculation.', 'wcmlim'); ?><br>
                <b><?php esc_html_e('Note:', 'wcmlim'); ?></b> <?php esc_html_e('you will need to implement the Google Maps API and obtain an API key for authentication.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Turn Off Auto-Suggestions in Nearby Location Finder Search Box -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_suggestion_off"
                  id="<?php echo $option_name; ?>_suggestion_off" <?php checked(get_option($option_name . '_suggestion_off'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Turn Off Auto-Suggestions in Nearby Location Finder Search Box', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting to turn off Google API auto-suggested addresses.', 'wcmlim'); ?><br>
                <b><?php esc_html_e('Note :', 'wcmlim'); ?></b> <?php esc_html_e('To use this feature, the Nearby Location Finder search box setting must be enabled.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Enable Users To Manage Address -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_user_address_management"
                  id="<?php echo $option_name; ?>_enable_user_address_management" <?php checked(get_option($option_name . '_enable_user_address_management'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Enable Users To Manage Address', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext" style="width: 320px;">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <p style="margin-bottom: 10px;"><?php esc_html_e('Users can save multiple addresses with custom labels (Home, Office, etc.). When an address is selected, the system automatically assigns the nearest location based on coordinates.', 'wcmlim'); ?></p>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Display Options:', 'wcmlim'); ?></p>
                      <p style="margin-bottom: 6px;"><strong><?php esc_html_e('Shortcode:', 'wcmlim'); ?></strong> <code>[wcmlim_address_selector]</code></p>
                      <p style="margin-left: 10px; margin-bottom: 8px; font-size: 12px;"><?php esc_html_e('Add this shortcode to any page, post, or header template to display the address selector.', 'wcmlim'); ?></p>
                      
                      <p style="margin-bottom: 6px;"><strong><?php esc_html_e('Widget:', 'wcmlim'); ?></strong> <?php esc_html_e('WCMLIM Address Selector', 'wcmlim'); ?></p>
                      <p style="margin-left: 10px; margin-bottom: 10px; font-size: 12px;"><?php esc_html_e('Go to Appearance → Widgets and add "WCMLIM Address Selector" widget to your header or any widget area.', 'wcmlim'); ?></p>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;"><?php esc_html_e('Requirements:', 'wcmlim'); ?></p>
                      <p style="margin-left: 10px; font-size: 12px;"><?php esc_html_e('For this functionality to work all locations should have values for latitude & longitude to calculate users distance from respective location.', 'wcmlim'); ?></p>
                    </div>
                  </div>
                </span>
              </h3>
              <p><?php esc_html_e('Allow logged-in users to save and manage multiple addresses. The nearest available location will be automatically assigned to the user based on their selected address.', 'wcmlim'); ?><br>
                <b><?php esc_html_e('Note:', 'wcmlim'); ?></b> <?php esc_html_e('Google Maps API key is required for this feature to work properly.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Google Maps API Key for Address Management -->
        <div class="setting-row wcmlim-address-api-key-row" style="display: <?php echo get_option($option_name . '_enable_user_address_management') === 'on' ? 'flex' : 'none'; ?>; align-items: center; gap: 20px;">
            <!-- Column 1: Empty space for alignment -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Google Maps API Key for Address Management', 'wcmlim'); ?></h3>
              <?php
              $google_maps_api_key = get_option($option_name . '_google_maps_api_key_address');
              ?>
              <div class="api-key-container" style="margin-top: 10px;">
                <div class="api-input-group" style="display: flex; position: relative;">
                  <input type="password" 
                    id="<?php echo esc_attr($option_name . '_google_maps_api_key_address'); ?>"
                    name="<?php echo esc_attr($option_name . '_google_maps_api_key_address'); ?>"
                    value="<?php echo esc_attr($google_maps_api_key); ?>"
                    placeholder="<?php esc_attr_e('Enter your Google Maps API Key', 'wcmlim'); ?>"
                    class="regular-text">
                  <button type="button" class="button toggle-password address_api_show_btn" style="margin-left: 5px;">
                    <?php esc_html_e('Show', 'wcmlim'); ?>
                  </button>
                </div>
              </div>
              <p><?php esc_html_e('Enter your Google Maps API key to enable address management and nearest location detection.', 'wcmlim'); ?><br>
                <b><?php esc_html_e('Note:', 'wcmlim'); ?></b> <?php echo sprintf(
                  esc_html__('This is required when "Enable Users To Manage Address" is turned on. %s', 'wcmlim'),
                  '<a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank" style="color: #2271b1;">' . esc_html__('Get API Key', 'wcmlim') . '</a>'
                ); ?>
              </p>
            </div>
          </div>

        <!-- Hide location dropdown/list on product page -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_hide_show_location_dropdown"
                  id="<?php echo $option_name; ?>_hide_show_location_dropdown" <?php checked(get_option($option_name . '_hide_show_location_dropdown'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Hide location dropdown list on product page', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Simplify the user interface by removing the location dropdown if its unnecessary for your customers.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Hide Locations From Frontend -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">

            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Hide Locations From Frontend', 'wcmlim'); ?></h3>
              <?php
              $excludedLocations = get_option($this->option_name . '_exclude_locations_from_frontend');
              $restrictGuest = get_option('wcmlim_enable_restrict_guestuser_location');
              $selectedGuestLoc = get_option('wcmlim_restrict_guest_user_location');
                            
              // Determine if the selected guest location should be hidden
              $hideSelectedGuestLoc = ($restrictGuest === 'on');
                            
              ?>
              <select multiple="multiple" class="multiselect" name="wcmlim_exclude_locations_from_frontend"
                id="wcmlim_exclude_locations_from_frontend" data-placeholder="<?php esc_attr_e('Select Some Locations', 'wcmlim'); ?>">
                <?php
                $args = ['taxonomy' => 'locations', 'hide_empty' => false, 'parent' => 0];
                $all_locations = get_terms($args);
                            
                foreach ((array) $all_locations as $location) {
                  // Check if the current location is the selected guest location and if it should be hidden
                  if ($hideSelectedGuestLoc && $location->term_id == $selectedGuestLoc) {
                    continue;
                  }
                  ?>
                  <option value="<?php echo esc_attr($location->term_id); ?>" <?php if (!empty($excludedLocations) && in_array($location->term_id, $excludedLocations)) {
                       echo 'selected="selected"';
                     } ?>>
                    <?php echo esc_html($location->name); ?>
                  </option>
                <?php } ?>
              </select>
              <p><?php esc_html_e('Select specific locations to exclude from showing your customers.', 'wcmlim'); ?></p>
            </div>
          </div>


        <!-- Hide Locations from Dropdown/List if they are Out Of Stock -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_hide_out_of_stock_location"
                  id="<?php echo $option_name; ?>_hide_out_of_stock_location" <?php checked(get_option($option_name . '_hide_out_of_stock_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Hide Locations from Dropdown/List if they are Out Of Stock', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('It hides locations with an out of stock status from the dropdown on the front-end.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Restore location stock value -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">

            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Restore location stock value', 'wcmlim'); ?></h3>
              <p style="display: flex;">
                <?php
                  $restore_location_stock_for_failed = get_option($this->option_name . '_restore_location_stock_for_failed');
                  $restore_location_stock_for_refund = get_option($this->option_name . '_restore_location_stock_for_refund');
                ?>
              <label style="margin-right: 10px;" for="switch">
                <input type="checkbox" name="<?php esc_attr_e($this->option_name . '_restore_location_stock_for_failed') ?>"
                  id="order_status_failed" <?php echo ($restore_location_stock_for_failed == 'on') ? 'checked="checked"' : ''; ?> />
                <?php esc_html_e('On Order Status Failed', 'wcmlim'); ?>
              </label>
              <label style="margin-right: 10px;" for="switch">
                <input type="checkbox" name="<?php esc_attr_e($this->option_name . '_restore_location_stock_for_refund') ?>"
                  id="order_status_refund" <?php echo ($restore_location_stock_for_refund == 'on') ? 'checked="checked"' : ''; ?> />
                <?php esc_html_e('On Order Status Refund', 'wcmlim'); ?>
              </label>
              </p>
            </div>
          </div>

        <!-- Set Location Cookie Time -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">

            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Set Location Cookie Time', 'wcmlim'); ?></h3>

              <?php
              $locationCookieTime = get_option($this->option_name . '_set_location_cookie_time');
              if ($locationCookieTime == '') {
                update_option($this->option_name . '_set_location_cookie_time', '30');
              }
              $locationCookieTime = get_option($this->option_name . '_set_location_cookie_time');
              ?>
              <input type="number" min="0" id="<?php esc_attr_e($this->option_name . '_set_location_cookie_time') ?>"
                name="<?php esc_attr_e($this->option_name . '_set_location_cookie_time') ?>"
                value="<?php echo $locationCookieTime; ?>">
              <br>
              
              <p><?php esc_html_e('The default cookie duration is set to 30 days. If you wish to change the default cookie duration, you can do so by adjusting the settings in your web browser.', 'wcmlim'); ?><br>
              <b><?php esc_html_e('Note :', 'wcmlim'); ?></b> <?php esc_html_e('The value you enter will be interpreted as the new cookie duration in days.', 'wcmlim'); ?></p>
            </div>
          </div>


          <!-- Set Default Location for a Specific Product -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_default_location"
                  id="<?php echo $option_name; ?>_enable_default_location" <?php checked(get_option($option_name . '_enable_default_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Set Default Location for a Specific Product', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting to set a default location for a specific product via the Edit Product page. This location will be preselected on the single product page.', 'wcmlim'); ?></p>
            </div>
          </div>

        <!-- Set Specific location For Users -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_userspecific_location"
                  id="<?php echo $option_name; ?>_enable_userspecific_location" <?php checked(get_option($option_name . '_enable_userspecific_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Set Specific location For Users', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting to set a default location for a specific user. This setting can be done in the edit location screen of the locations OR from the edit user screen of the available users.', 'wcmlim'); ?></p>
            </div>
          </div>

                  <!-- Set Specific Location For Guest users -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_restrict_guestuser_location"
                  id="<?php echo $option_name; ?>_enable_restrict_guestuser_location" <?php checked(get_option($option_name . '_enable_restrict_guestuser_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Set Specific Location For Guest users', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Assign a specific location to the guest user and limiting his access to only the specific location.', 'wcmlim'); ?></p>
            </div>

            <!-- Vertical line separator -->
            <div style="width: 1px; background-color: #b1b1b1; align-self: stretch;"></div>

            <?php
             $wcmlim_restrict_guest_user_location = get_option($this->option_name . '_restrict_guest_user_location');
            ?>
            <select name="wcmlim_restrict_guest_user_location" id="wcmlim_restrict_guest_user_location"
              data-placeholder="<?php esc_attr_e('Select Some Locations', 'wcmlim'); ?>">
              <option value="-1"><?php esc_html_e('Select Location', 'wcmlim'); ?></option>
              <?php $args = ['taxonomy' => 'locations', 'hide_empty' => false, 'parent' => 0];
              $all_locations = get_terms($args);
              foreach ((array) $all_locations as $location) { ?>
                <option value="<?php esc_html_e($location->term_id); ?>" <?php if (!empty($wcmlim_restrict_guest_user_location)) {
                    if ($location->term_id == $wcmlim_restrict_guest_user_location) {
                      echo "selected='selected'";
                    }
                  } ?>>
                  <?php esc_html_e($location->name); ?>
                </option>
              <?php } ?>
            </select>
          </div>

        <hr>
        <h2 class="header-title"><?php esc_html_e('Location Group', 'wcmlim'); ?></h2>
        <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

        <!-- Enable location group -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_location_group"
                  id="<?php echo $option_name; ?>_enable_location_group" <?php checked(get_option($option_name . '_enable_location_group'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Enable location group', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting so that you can create location groups and assign specific user role called \'Location Regional Managers\' to them. Location groups means adding more than one location into a group and making it more specific.', 'wcmlim'); ?><br>
              <b><?php esc_html_e('Note :', 'wcmlim'); ?></b> <?php esc_html_e('After activating this setting, you\'ll see a \'Manage Group\' section in the left sidebar of your WordPress account, where you can easily create location groups.', 'wcmlim'); ?></p>
            </div>
          </div>

                <!-- Hide Location Group From FrontEnd -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Hide Location Group From FrontEnd', 'wcmlim'); ?></h3>
              <?php
               $excludedLocationGroup = get_option($this->option_name . '_exclude_locations_group_frontend');
                ?>
                <select multiple="multiple" class="multiselect" name="wcmlim_exclude_locations_group_frontend"
                  id="wcmlim_exclude_locations_group_frontend" data-placeholder="<?php esc_attr_e('Select Location Groups', 'wcmlim'); ?>">
                  <?php
                  $args = ['taxonomy' => 'location_group', 'hide_empty' => false, 'parent' => 0];
                  $all_locationgroup = get_terms($args);
                  foreach ((array) $all_locationgroup as $location) {
                    ?>
                    <option value="<?php esc_html_e($location->term_id); ?>" <?php if (!empty($excludedLocationGroup)) {
                        if (in_array($location->term_id, $excludedLocationGroup)) {
                          echo "selected='selected'";
                        }
                      }
                      ?>>
                      <?php esc_html_e($location->name); ?>
                    </option>
                  <?php } ?>
                </select>
              <p><?php esc_html_e('Select specific location group to exclude from showing your customer.', 'wcmlim'); ?></p>
            </div>
          </div>

      <!-- Set users as a Location Shop /Location Regional manager -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
        <!-- Column 1: Toggle -->
        <div class="toggle-switch-container" style="flex: 0 0 auto;">
          <label class="toggle-switch">
            <input type="checkbox" name="<?php echo $option_name; ?>_assign_location_shop_manager"
          id="<?php echo $option_name; ?>_assign_location_shop_manager" <?php checked(get_option($option_name . '_assign_location_shop_manager'), 'on'); ?>>
            <span class="toggle-slider"></span>
          </label>
        </div>
        <!-- Column 2: Heading and Description -->
        <div class="setting-description" style="flex: 1;">
          <h3 class="option-title">
            <?php esc_html_e('Set users as a Location Shop /Location Regional manager', 'wcmlim'); ?>
            <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
            <circle cx="12" cy="12" r="10" fill="#2271b1"/>
            <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <div class="wcmlim-enhanced-tooltiptext">
            <div class="wcmlim-tooltip-header">
              <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
            </div>
            <div class="wcmlim-tooltip-content">
              <?php esc_html_e('Assign location shop manager and regional manager to specific location.', 'wcmlim'); ?>
            </div>
            <div class="wcmlim-tooltip-footer">
              <div style="text-align: left;">
                <small style="color: #666; font-size: 11px; display: block;"><?php esc_html_e('Here is the Documentation link you can refer', 'wcmlim'); ?></small>
                <a href="https://techspawn.com/docs/woocommerce-multi-locations-inventory-management/location-shop-manager/" target="_blank" style="color: #2271b1; text-decoration: underline; font-size: 11px; display: block; margin-top: 4px;"><?php esc_html_e('learn more', 'wcmlim'); ?></a>
              </div>
            </div>
            </div>
            </span>
            </h3>
            <p><?php esc_html_e('Turn on this setting to activate the user roles as Location Shop Manager and Location Regional Manager features.', 'wcmlim'); ?><br>
            <b><?php esc_html_e('Note :', 'wcmlim'); ?></b> <?php esc_html_e('To use the Location Regional Manager feature, the Location Group setting must be enabled.', 'wcmlim'); ?></p>
            </div>
          </div>

        <hr>
        <h2 class="header-title"><?php esc_html_e('Location Sorting Priority', 'wcmlim'); ?></h2>
        <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

              <!-- Filter Location By Radius -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_filter_by_proximity"
                  id="<?php echo $option_name; ?>_enable_filter_by_proximity" <?php checked(get_option($option_name . '_enable_filter_by_proximity'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Filter Location By Radius', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('If this option is enabled, the locations listed will be filtered out depending upon radius set by you and users current location.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Enable Sorting By Proximity -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 10px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_sorting_by_proximity"
                  id="<?php echo $option_name; ?>_enable_sorting_by_proximity" <?php checked(get_option($option_name . '_enable_sorting_by_proximity'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->             
            <div class="setting-description" >
              <h3 class="option-title"><?php esc_html_e('Enable Sorting By Proximity', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('When enabled, locations will be automatically sorted by their proximity to the user, with the closest location appearing first.', 'wcmlim'); ?><br><br>
              <b><?php esc_html_e('Note :', 'wcmlim'); ?></b> <?php esc_html_e('Once this setting is enabled, please remember to activate one of the following options: [Autodetect User Location With Google, Autodetect User Location With Maxmind, Autodetect User Location With Browser or Autodetect User Location With IPinfo].', 'wcmlim'); ?></p>

              </div>

          </div>

                    <!-- Enable Sorting By Proximity -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 10px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
              </label>
            </div>
            <div class="setting-description" >
              <h3 class="option-title"><?php esc_html_e('Location Priority Order', 'wcmlim'); ?></h3>
                <p><?php esc_html_e('You can manually arrange locations by dragging and dropping them in the order you want them to appear. This custom order determines how your location list is displayed in dropdowns and other areas throughout your store.', 'wcmlim'); ?></p>

              <?php 
                  // Retrieve saved order if exists.
                  // Fetch the saved order from the options table.
              $saved_order = get_option($this->option_name . '_location_priority_order');
                              
              // Check if the saved order is a string (it might be a serialized string or a JSON string).
              if (is_string($saved_order)) {
                  // If it's JSON, decode it into an array.
                  $saved_order = json_decode($saved_order, true);
              
                  // If it's serialized, unserialize it.
                  if (json_last_error() !== JSON_ERROR_NONE) {
                      // If JSON decoding fails, try to unserialize.
                      $saved_order = maybe_unserialize($saved_order);
                  }
              }
            
              // Fetch all locations from the custom taxonomy 'locations'.
              $locations = get_terms(array(
                'taxonomy'   => 'locations',
                'hide_empty' => false,
              ));
            
              // If a saved order exists, re-order the terms accordingly.
              if ($saved_order) {
                $ordered_locations = array();
                // Get terms based on saved order.
                foreach ($saved_order as $term_id) {
                  $term = get_term($term_id, 'locations');
                  if (!is_wp_error($term)) {
                    $ordered_locations[] = $term;
                  }
                }
                // Append any terms not yet saved.
                foreach ($locations as $term) {
                  if (!in_array($term->term_id, $saved_order)) {
                    $ordered_locations[] = $term;
                  }
                }
              } else {
                $ordered_locations = $locations;
              }
              ?>
              <ul id="sortable_locations">
              <?php
              foreach ($ordered_locations as $term):
                if ($term) {
                  ?>
                    <li class="ui-state-default" data-term-id="<?php echo esc_attr($term->term_id); ?>">
                    <span class="dashicons dashicons-menu" style="margin-right: 5px; font-size:medium; color:#a1a1a1;"></span>
                    <?php echo esc_html($term->name); ?>
                    </li>
                <?php
                }
              endforeach;
              ?>
              </ul>
              <input type="hidden" id="<?php esc_attr_e($this->option_name . '_location_priority_order'); ?>"
                     name="<?php esc_attr_e($this->option_name . '_location_priority_order'); ?>"
                     value="<?php echo esc_attr(json_encode($saved_order ? $saved_order : wp_list_pluck($ordered_locations, 'term_id'))); ?>">

              <style>
                #sortable_locations { list-style-type: none; margin: 0; padding: 0; width: 100%; }
                #sortable_locations li {
                  margin: 0 3px 3px 3px;
                  padding: 0.5em;
                  padding-left: 1.5em;
                  font-size: 1em;
                  height: 1.5em;
                  cursor: move;
                  background: #f9f9f9;
                  border: 1px solid #ddd;
                }
                #sortable_locations li:hover { background: #eee; }
              </style>

            </div>
          </div>

        <hr>
        <h2 class="header-title"><?php esc_html_e('Location Threshold Settings', 'wcmlim'); ?></h2>
        <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

        <!-- Enable Location Thresholds -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_location_thresholds"
                  id="<?php echo $option_name; ?>_enable_location_thresholds" <?php checked(get_option($option_name . '_enable_location_thresholds'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Enable Location Thresholds', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Once the setting is enabled you can see the threshold text appearing on behalf of stock status.', 'wcmlim'); ?></p>

              <?php
              // Get the saved options
            $thresholds = get_option($this->option_name . '_location_thresholds', []);

             $thresholds = maybe_unserialize(get_option('wcmlim_location_thresholds'));
                     
            ?>
            <table class="form-table">
                <thead>
                    <tr>
                        <th><?php esc_html_e('Min Stock', 'wcmlim'); ?></th>
                        <th><?php esc_html_e('Max Stock', 'wcmlim'); ?></th>
                        <th><?php esc_html_e('Stock Display Note', 'wcmlim'); ?></th>
                        <th><?php esc_html_e('Actions', 'wcmlim'); ?></th>
                    </tr>
                </thead>
                <tbody id="wcmlim_location_threshold_table">
                    <?php
                    // Loop through existing rows and display them
                    if (!empty($thresholds)) {
                        foreach ($thresholds as $index => $row) {
                            ?>
                            <tr style="margin-top: 20px;">
                                <td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds[' . $index . '][min]'); ?>" value="<?php echo esc_attr($row['min']); ?>"></td>
                                <td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds[' . $index . '][max]'); ?>" value="<?php echo esc_attr($row['max']); ?>"></td>
                                <td><input type="text" name="<?php echo esc_attr($this->option_name . '_location_thresholds[' . $index . '][text]'); ?>" value="<?php echo esc_attr($row['text']); ?>"></td>
                                <td><button type="button" class="remove_row_button"><?php esc_html_e('Remove', 'wcmlim'); ?></button></td>
                            </tr>
                            <?php
                        }
                    } else {
                        // Empty row by default
                        ?>
                        <tr style="margin-top: 20px;">
                            <td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds[0][min]'); ?>" value="1"></td>
                            <td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds[0][max]'); ?>" value="10"></td>
                            <td><input type="text" name="<?php echo esc_attr($this->option_name . '_location_thresholds[0][text]'); ?>" value=""></td>
                            <td><button type="button" class="remove_row_button"><?php esc_html_e('Remove', 'wcmlim'); ?></button></td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
            </table>
            <button type="button" class="add_row_button"><?php esc_html_e('Add Row', 'wcmlim'); ?></button>
                  
            <script type="text/javascript">
                (function($){
                    // Add row
                    $('.add_row_button').on('click', function() {
                        var lastRow = $('#wcmlim_location_threshold_table tr:last');
                        var lastMin = lastRow.find('input[name$="[max]"]').val();
                        var newMin = parseInt(lastMin) + 1;
                    
                        var newRow = '<tr style="margin-top: 20px;">' +
                            '<td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds'); ?>[' + newMin + '][min]" value="' + newMin + '"></td>' +
                            '<td><input type="number" name="<?php echo esc_attr($this->option_name . '_location_thresholds'); ?>[' + newMin + '][max]" value=""></td>' +
                            '<td><input type="text" name="<?php echo esc_attr($this->option_name . '_location_thresholds'); ?>[' + newMin + '][text]" value=""></td>' +
                            '<td><button type="button" class="remove_row_button"><?php esc_html_e('Remove', 'wcmlim'); ?></button></td>' +
                            '</tr>';
                    
                        $('#wcmlim_location_threshold_table').append(newRow);
                    });
                  
                    // Remove row
                    $(document).on('click', '.remove_row_button', function() {
                        $(this).closest('tr').remove();
                    });
                })(jQuery);
            </script>
            </div>
          </div>

          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>
      </div>
      <!-- Location Content Ends -->

      <!-- ======================================== General Content ============================================================= -->
      <div id="general-content" class="tab-content hidden">
        
        <form id="general-form" class="settings-form">
          <!-- Form will be populated here -->
          
          <h2 class="header-title"><?php esc_html_e('Checkout Settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure global settings for multi-location inventory management.', 'wcmlim'); ?></span>

        <!-- Auto-Populate Shipping and Billing Addresses -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_auto_billing_address"
                  id="<?php echo $option_name; ?>_auto_billing_address" <?php checked(get_option($option_name . '_auto_billing_address'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Auto-Populate Shipping and Billing Addresses', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Automatically fill in customer addresses based on their detected location for a faster checkout process.', 'wcmlim'); ?></p>
            </div>
          </div>

          <hr>
          <h2 class="header-title"><?php esc_html_e('Compatible Plugins', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

          <!-- OpenPOS Compatibility -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_pos_compatiblity"
                  id="<?php echo $option_name; ?>_pos_compatiblity" <?php checked(get_option($option_name . '_pos_compatiblity'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('OpenPOS Compatibility', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-footer">
                      <div style="text-align: left;">
                        <small style="color: #666; font-size: 11px; display: block;"><?php esc_html_e('Here is the Documentation link you can refer', 'wcmlim'); ?></small>
                        <a href="https://techspawn.com/docs/woocommerce-multi-locations-inventory-management/compatibility-of-plugin/openpos-compatibility/" target="_blank" style="color: #2271b1; text-decoration: underline; font-size: 11px; display: block; margin-top: 4px;"><?php esc_html_e('learn more', 'wcmlim'); ?></a>
                      </div>
                    </div>
                  </div>
                </span>
              </h3>
              <p><?php echo sprintf(
                esc_html__('Enable this setting to make MULTILOCA plugin compatible with OPENPOS plugin, %s', 'wcmlim'),
                '<b><a href="https://codecanyon.net/item/openpos-a-complete-pos-plugins-for-woocomerce/22613341?gclid=CjwKCAjwnPOEBhA0EiwA609ReX_5ziLI5kGOsT0iLMBTlyEQc4oCmx7fF01-XPUd4ivhaxdqfqhYOhoCqwsQAvD_BwE" target="_blank">' . esc_html__('please visit the OpenPOS Plugin', 'wcmlim') . '</a></b>'
              ); ?></p>
            </div>
          </div>

          <!-- OpenPOS Dynamic Pricing -->
        <div class="setting-row openpos-dynamic-pricing" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_pos_dynamic_pricing"
                  id="<?php echo $option_name; ?>_pos_dynamic_pricing" <?php checked(get_option($option_name . '_pos_dynamic_pricing'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('OpenPOS Dynamic Pricing', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting to sync MultiLoca Location wise pricing to OpenPOS outlet pricing', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- WooCommerce Point of Sale Compatibility -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_wc_pos_compatiblity"
                  id="<?php echo $option_name; ?>_wc_pos_compatiblity" <?php checked(get_option($option_name . '_wc_pos_compatiblity'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('WooCommerce Point of Sale Compatibility', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-footer">
                      <div style="text-align: left;">
                        <small style="color: #666; font-size: 11px; display: block;"><?php esc_html_e('Here is the Documentation link you can refer', 'wcmlim'); ?></small>
                        <a href="https://techspawn.com/docs/woocommerce-multi-locations-inventory-management/compatibility-of-plugin/point-of-sale-for-woocommerce-compatibility/" target="_blank" style="color: #2271b1; text-decoration: underline; font-size: 11px; display: block; margin-top: 4px;"><?php esc_html_e('learn more', 'wcmlim'); ?></a>
                      </div>
                    </div>
                  </div>
                </span>
              </h3>
              <p><?php esc_html_e('Enable this setting to make MULTILOCA plugin compatible with WooCommerce Point Of Sale Systems.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- CTX Feed Manager Integration -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_ctx_feed"
                  id="<?php echo $option_name; ?>_enable_ctx_feed" <?php checked(get_option($option_name . '_enable_ctx_feed'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title">CTX Feed Manager Integration
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext">
                    <div class="wcmlim-tooltip-header">
                      <strong>How it works?</strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <p style="margin-bottom: 10px;">Integrates with CTX Feed Manager (WebAppick Product Feed) to include location-specific data in your Google Shopping feeds.</p>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;">Features:</p>
                      <ul style="margin-left: 15px; font-size: 12px; margin-bottom: 10px;">
                        <li>Location-based pricing in feeds</li>
                        <li>Per-location stock availability</li>
                        <li>Store code for local inventory ads</li>
                      </ul>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;">Feed URLs:</p>
                      <p style="font-size: 11px; margin-bottom: 5px;"><strong>Google Feed:</strong> <code><?php echo esc_url(home_url('/wcmlim-feed/')); ?></code></p>
                      <p style="font-size: 11px;"><strong>Local Inventory:</strong> <code><?php echo esc_url(home_url('/wcmlim-feed/local_inventory/')); ?></code></p>
                    </div>
                    <div class="wcmlim-tooltip-footer">
                      <div style="text-align: left;">
                        <small style="color: #666; font-size: 11px; display: block;">Requires CTX Feed Manager plugin for full integration</small>
                      </div>
                    </div>
                  </div>
                </span>
              </h3>
              <p>Enable this setting to integrate with CTX Feed Manager and generate Google-compatible product feeds with location data including store code, price, and availability per location.</p>
            </div>
          </div>

          <!-- Feed URLs Display (shown when CTX Feed is enabled) -->
          <div class="setting-row wcmlim-ctx-feed-urls" style="display: <?php echo get_option($option_name . '_enable_ctx_feed') === 'on' ? 'flex' : 'none'; ?>; align-items: flex-start; gap: 20px; margin-left: 70px;">
            <div class="setting-description" style="flex: 1;">
              <h4 style="margin: 0 0 10px 0; font-size: 13px;">Feed URLs</h4>
              <div style="background: #f9f9f9; padding: 15px; border-radius: 4px; border: 1px solid #ddd;">
                <p style="margin: 0 0 10px 0;">
                  <strong>Google Shopping Feed:</strong><br>
                  <code style="background: #fff; padding: 5px 10px; display: inline-block; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; word-break: break-all;"><?php echo esc_url(home_url('/wcmlim-feed/')); ?></code>
                  <button type="button" class="button button-small wcmlim-copy-url" data-url="<?php echo esc_url(home_url('/wcmlim-feed/')); ?>" style="margin-left: 5px;">Copy</button>
                </p>
                <p style="margin: 0;">
                  <strong>Local Inventory Feed:</strong><br>
                  <code style="background: #fff; padding: 5px 10px; display: inline-block; margin-top: 5px; border: 1px solid #ddd; border-radius: 3px; word-break: break-all;"><?php echo esc_url(home_url('/wcmlim-feed/local_inventory/')); ?></code>
                  <button type="button" class="button button-small wcmlim-copy-url" data-url="<?php echo esc_url(home_url('/wcmlim-feed/local_inventory/')); ?>" style="margin-left: 5px;">Copy</button>
                </p>
              </div>
              <p style="margin-top: 10px; color: #666; font-size: 12px;"><strong>Note:</strong> After enabling this feature, please save the settings and then visit <a href="<?php echo admin_url('options-permalink.php'); ?>">Permalinks Settings</a> to flush rewrite rules.</p>
            </div>
          </div>


          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>
      </div>
      <!-- General Content Ends -->

      <!-- ======================================== Shop Page Content =============================================================== -->
      <div id="shop-content" class="tab-content hidden">
        
        <form id="shop-form" class="settings-form">
          <!-- Form will be populated here -->
          
          <h2 class="header-title"><?php esc_html_e('Shop Page Settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure how locations appear on your shop page and product listings.', 'wcmlim'); ?></span>
          
          <!-- Locations name and stock -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_location_onshop"
                  id="<?php echo $option_name; ?>_enable_location_onshop" <?php checked(get_option($option_name . '_enable_location_onshop'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Locations name and stock', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this to Show location names and available stock for the selected location on the Shop page.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Variable Setting -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_location_onshop_variable"
                  id="<?php echo $option_name; ?>_enable_location_onshop_variable" <?php checked(get_option($option_name . '_enable_location_onshop_variable'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Variable Setting', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this to show locations name and available stock for default variations at selected location.', 'wcmlim'); ?></p>
            </div>
          </div>
          
          <!-- Location price -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_location_price_onshop"
                  id="<?php echo $option_name; ?>_enable_location_price_onshop" <?php checked(get_option($option_name . '_enable_location_price_onshop'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Location price', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this to Show location price for the selected location on the Shop page.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Display Only In-Stock Items for Selected Location	 -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_hide_outofstock_products"
                  id="<?php echo $option_name; ?>_hide_outofstock_products" <?php checked(get_option($option_name . '_hide_outofstock_products'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Display Only In-Stock Items for Selected Location', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext" style="width: 320px;">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <?php esc_html_e('This setting is effective exclusively on the Shop page when the Location shortcode is implemented. Use the following shortcodes for location functionality:', 'wcmlim'); ?><br>
                      <br>
                      <?php esc_html_e('Location Popup:', 'wcmlim'); ?> <code>[wcmlim_locations_popup]</code><br>
                      <?php esc_html_e('Location Dropdown:', 'wcmlim'); ?> <code>[wcmlim_locations_switch]</code>
                    </div>
                  </div>
                </span>
              </h3>
              <p><?php esc_html_e('Enable this setting to show only the products which are in-stock at the selected location and hide out-of-stock products on the Shop page.', 'wcmlim'); ?></p>
            </div>
          </div>

          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>
      </div>
      <!-- Shop Page Content Ends -->

      <!-- ======================================== Shipping and Payment Methods Content =============================================================== -->
      <div id="payment-content" class="tab-content hidden">
        
        <form id="payment-form" class="settings-form">
          <!-- Form will be populated here -->
          
          <h2 class="header-title"><?php esc_html_e('Shipping and Payment Method Settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure location-specific shipping and payment methods.', 'wcmlim'); ?></span>

          <!-- Assign Shipping Zones to each location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_shipping_zones"
                  id="<?php echo $option_name; ?>_enable_shipping_zones" <?php checked(get_option($option_name . '_enable_shipping_zones'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Assign Shipping Zones to each location', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Once you\'ve enabled this feature, you\'ll be able to assign a shipping zone to each and every individual location. You can set this directly from the location edit screen once the feature is active.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Assign Shipping Methods to each location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_shipping_methods"
                  id="<?php echo $option_name; ?>_enable_shipping_methods" <?php checked(get_option($option_name . '_enable_shipping_methods'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Assign Shipping Methods to each location', 'wcmlim'); ?></h3>
              <p><?php echo sprintf(
                esc_html__('To enable the ability to assign specific shipping methods to individual locations, you can set the shipping methods directly within the location edit screen after enabling this feature. %s', 'wcmlim'),
                '<br><b>' . esc_html__('Note :', 'wcmlim') . '</b> ' . esc_html__('You must have Shipping zones to each location Settings enabled for this functionality to work.', 'wcmlim')
              ); ?></p>
            </div>
          </div>

          <!-- Split order Packages by location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_enable_split_packages"
                  id="<?php echo $option_name; ?>_enable_split_packages" <?php checked(get_option($option_name . '_enable_split_packages'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Split order Packages by location', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this setting to divide the order package by locations on the Cart page.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- Assign Payment methods to each location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_assign_payment_methods_to_locations"
                  id="<?php echo $option_name; ?>_assign_payment_methods_to_locations" <?php checked(get_option($option_name . '_assign_payment_methods_to_locations'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Assign Payment methods to each location', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Once you\'ve enabled this feature, you\'ll be able to assign a payment methods to each and every individual location. You can do this directly from the location edit screen once this feature is active.', 'wcmlim'); ?></p>
            </div>
          </div>

          <!-- WC Tax To Each Location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_allow_tax_to_locations"
                  id="<?php echo $option_name; ?>_allow_tax_to_locations" <?php checked(get_option($option_name . '_allow_tax_to_locations'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('WC Tax To Each Location', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Activating this option will enable the ability to set WooCommerce (WC) tax rates based on specific locations.', 'wcmlim'); ?></p>
            </div>
          </div>

          <hr>
          <h2 class="header-title"><?php esc_html_e('Local Pickup Plugin', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

          <!-- Local Pickup Location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_allow_local_pickup"
                  id="<?php echo $option_name; ?>_allow_local_pickup" <?php checked(get_option($option_name . '_allow_local_pickup'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Local Pickup Location', 'wcmlim'); ?></h3>
              <p>
                <?php echo sprintf(
                  esc_html__('Enabling this option will display Local Pickup Address details on the frontend. If Backend Mode is activated, it will provide a dropdown list of locations when the Pickup Location Shipping Method is selected%s', 'wcmlim'),
                  '<br><a target="_blank" href="https://codecanyon.net/item/local-pickup-for-woocommerce/34768481?s_rank=1"> ' . esc_html__('Click Here', 'wcmlim') . '</a> <b>' . esc_html__('To Download the Local Pickup for WooCommerce – Pickup Location, Date & Time Slots', 'wcmlim') . '</b> ' . esc_html__('plugin by clicking here.', 'wcmlim')
                ); ?>
              </p>
            </div>
          </div>

          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>
      </div>
      <!-- Payment Methods Content Ends -->

      <!-- ======================================== Order Fulfillment Content =============================================================== -->
      <div id="fulfillment-content" class="tab-content hidden">
        
      <form id="fulfillment-form" class="settings-form">
        <!-- Form will be populated here -->
          
          <h2 class="header-title"><?php esc_html_e('Order Fulfillment Settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure how orders are processed and fulfilled from your locations.', 'wcmlim'); ?></span>

          <!-- Allow to Work plugin from Backend Only -->
            <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
              <!-- Column 1: Toggle -->
              <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_allow_only_backend"
                   id="<?php echo $option_name; ?>_allow_only_backend" 
                   <?php checked(get_option($option_name . '_allow_only_backend'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
              </div>
                    
              <!-- Column 2: Heading and Description -->
              <div class="setting-description" style="width: 40%;">
              <h3 class="option-title"><?php esc_html_e('Allow to Work plugin from Backend Only', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enabling this option will deactivate the front-end location selection feature. Instead, you\'ll have the ability to manage orders directly from the backend. For instance, users can place orders without manually choosing a location. However, you can still assign a location to an order from the backend, and this will also update the stock associated with the selected location.', 'wcmlim'); ?></p>
              </div>
                    
              <!-- Vertical line separator -->
              <div style="width: 1px; background-color: #b1b1b1; margin: 0 20px; align-self: stretch;"></div>
                    
              <!-- Column 3: Select + Tooltip -->
              <div style="width: 50%;">
              <p>
                <p style="color: #0a3d62; font-weight: bold;"><?php esc_html_e('Order Fulfilment Rules :', 'wcmlim'); ?></p>
                <?php 

                // Check if Distance Rate Shipping For Woocommerce plugin is active
                if (!function_exists('is_plugin_active')) {
                include_once(ABSPATH . 'wp-admin/includes/plugin.php');
                }
                $is_distance_rate_shipping_active = is_plugin_active('distance-rate-shipping-for-woocommerce/drsw-wc-shipping.php');
                          
                $fulfilment_rule = get_option("wcmlim_order_fulfilment_rules");
                if ($fulfilment_rule == "nearby_instock") {
                  $fulfilment_rule = "clcsadd";
                }
                ?>
                <select name="<?php echo esc_attr($this->option_name . '_order_fulfilment_rules'); ?>"
                    id="<?php echo esc_attr($this->option_name . '_order_fulfilment_rules'); ?>">
                <option value="default" <?php echo $is_distance_rate_shipping_active ? 'disabled' : ''; ?>><?php _e('Please select rule', 'wcmlim'); ?></option>
                <option value="maxinvloc" <?php selected($fulfilment_rule, 'maxinvloc'); ?> <?php echo $is_distance_rate_shipping_active ? 'disabled' : ''; ?>>
                  <?php _e('Location with most inventory in stock', 'wcmlim'); ?>
                </option>
                <option value="clcsadd" <?php selected($fulfilment_rule, 'clcsadd'); ?>>
                  <?php _e('Closest location to Customers shipping address', 'wcmlim'); ?>
                </option>
                <option value="locappriority" <?php selected($fulfilment_rule, 'locappriority'); ?> <?php echo $is_distance_rate_shipping_active ? 'disabled' : ''; ?>>
                  <?php _e('Location as per priority in stock', 'wcmlim'); ?>
                </option>
                <option value="shipping_loc" <?php selected($fulfilment_rule, 'shipping_loc'); ?> <?php echo $is_distance_rate_shipping_active ? 'disabled' : ''; ?>>
                  <?php _e('Location as per Shipping Zones', 'wcmlim'); ?>
                </option>
                </select>
                <!-- Tooltip Icon with enhanced styling -->
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <?php echo sprintf(
                        esc_html__('Enable the %s setting above to activate these rules.', 'wcmlim'),
                        '<b>\'' . esc_html__('Allow to Work plugin from Backend Only', 'wcmlim') . '\'</b>'
                      ); ?>
                    </div>
                  </div>
                </span>
                
              </p>
                
              <script type="text/javascript">
                jQuery(document).ready(function($) {
                // Rule descriptions
                const ruleDescriptions = {
                'default': '<?php echo esc_js(__('When adding an order manually, you can pick the location from a dropdown list under each item in the order details screen.', 'wcmlim')); ?>',
                'maxinvloc': '<?php echo esc_js(__('The system automatically chooses the location with the most inventory (stock).', 'wcmlim')); ?>',
                'clcsadd': '<?php echo esc_js(__('The system picks the location closest to the customer shipping address, even if the order was made from another location and you can set the priority for each location in the "Location priority" field on the Edit Location screen.', 'wcmlim')); ?>',
                'locappriority': '<?php echo esc_js(__('Set a priority for each location in the Edit Location screen, and the system will select the location based on that priority in the order details screen.', 'wcmlim')); ?>',
                'shipping_loc': '<?php echo esc_js(__('The system will choose the location which matches the zone of customer shipping address. (Note: First, you need to enable Shipping Zones and Shipping Methods for each location setting in the Shipping and Payment Method tab of the Plugin setting. Then, assign the respective Shipping Zones and Shipping Methods to each location.)', 'wcmlim')); ?>'
                };

                // Check if distance rate shipping is active
                const isDistanceRateShippingActive = <?php echo $is_distance_rate_shipping_active ? 'true' : 'false'; ?>;

                // Add CSS for animation
                $('head').append(`
                <style>
                @keyframes textReveal {
                  0% {
                  clip-path: inset(0 100% 0 0);
                  opacity: 0.7;
                  }
                  100% {
                  clip-path: inset(0 0 0 0);
                  opacity: 1;
                  }
                }
                #rule-description {
                  position: relative;
                  overflow: hidden;
                  padding-left: 12px;
                }
                #rule-description-text {
                  display: block;
                  transform-origin: left;
                }
                #rule-description-text.animated {
                  animation: textReveal 0.6s ease-out forwards;
                }
                </style>
                `);

                function updateRuleDescription() {
                const selectedRule = $('#<?php echo esc_js($this->option_name); ?>_order_fulfilment_rules').val();
                const $ruleDescription = $('#rule-description');
                
                // Set new content
                $ruleDescription.html('<b>Current rule description :</b><br><span id="rule-description-text">' + 
                  (ruleDescriptions[selectedRule] || ruleDescriptions['default']) + '</span>');
                
                // Remove and re-add animation class to trigger it again
                $('#rule-description-text').removeClass('animated');
                setTimeout(function() {
                  $('#rule-description-text').addClass('animated');
                }, 10);
                }

                // Function to toggle select box based on checkbox state
                function toggleSelectBox() {
                const isChecked = $('#<?php echo esc_js($option_name); ?>_allow_only_backend').is(':checked');
                const selectBox = $('#<?php echo esc_js($this->option_name); ?>_order_fulfilment_rules');
                
                if (isChecked) {
                  selectBox.prop('disabled', false);
                  // If distance rate shipping is active, set to clcsadd
                  if (isDistanceRateShippingActive) {
                    selectBox.val('clcsadd');
                  }
                } else {
                  selectBox.prop('disabled', true);
                  selectBox.val('default');
                }
                updateRuleDescription();
                }

                // Initialize on page load
                toggleSelectBox();
                
                // Listen for toggle changes
                $('#<?php echo esc_js($option_name); ?>_allow_only_backend').on('change', toggleSelectBox);

                $('#<?php echo esc_js($this->option_name); ?>_order_fulfilment_rules').on('change', updateRuleDescription);
                });
              </script>

              <div id="rule-description" style="margin-top: 10px; padding: 8px; background-color: #f9f9f9; border-left: 4px solid #2271b1;"></div>
              </div>
            </div>

          <!-- Display Location Stock -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_backend_display_stock"
                  id="<?php echo $option_name; ?>_backend_display_stock" <?php checked(get_option($option_name . '_backend_display_stock'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Display Location Stock', 'wcmlim'); ?></h3>
              <p><?php esc_html_e('Enable this option to show location wise stock on product single page', 'wcmlim'); ?></p>
            </div>
          </div>
`
          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>`
      </div>
      <!-- Order Fulfillment Content Ends -->

      <!-- ======================================== Notice Messages Content =============================================================== -->
      <div id="notices-content" class="tab-content hidden">
        
        <form id="notices-form" class="settings-form">
          <!-- Form will be populated here -->
 
          <h2 class="header-title"><?php esc_html_e('Updated notice messages for users', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Configure customer-facing notices and messages about location inventory.', 'wcmlim'); ?></span>

            <!-- Location Validation -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Location Validation', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $loc_valid = get_option($this->option_name . '_select_loc_val');
                  if ($loc_valid == false) {
                    update_option($this->option_name . '_select_loc_val', 'Please select location.');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_select_loc_val'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_select_loc_val'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_select_loc_val'); ?>"
                    value="<?php esc_attr_e($loc_valid); ?>"><?php esc_attr_e($loc_valid); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('User must select one location to proceed with the product purchase.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <!-- Location Stock Unavailable -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title">Location Stock Unavailable</h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $pinstock_valid = get_option($this->option_name . '_prod_instock_valid');
                  if ($pinstock_valid == false) {
                    update_option($this->option_name . '_prod_instock_valid', 'You can’t add more items than are available in stock .');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_prod_instock_valid'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_prod_instock_valid'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_prod_instock_valid'); ?>"
                    value="<?php esc_attr_e($pinstock_valid); ?>"><?php esc_attr_e($pinstock_valid); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> While updating product quantity and do not have more items to add on cart. </p>
                </div>
              </div>
            </div>

            <!-- Validating for PickUp Address -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Validating for PickUp Address', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $pickup_valid = get_option($this->option_name . '_pickup_valid');
                  if ($pickup_valid == false) {
                    update_option($this->option_name . '_pickup_valid', "Pickup at store not available");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_pickup_valid'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_pickup_valid'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_pickup_valid'); ?>"
                    value="<?php esc_attr_e($pickup_valid); ?>"><?php esc_attr_e($pickup_valid); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('This message appears if the pickup at store option is unavailable or the service is not enabled for the user .', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <hr>
            <h2 class="header-title"><?php esc_html_e('Limit 1 Location Feature', 'wcmlim'); ?></h2>
            <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

                        <!-- Add product with two different location -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Add product with two different location', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $diff_loc_valid = get_option($this->option_name . '_two_diff_loc_addtocart');
                  if ($diff_loc_valid == false) {
                    update_option($this->option_name . '_two_diff_loc_addtocart', "Products from two different locations cannot be added .");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_two_diff_loc_addtocart'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_two_diff_loc_addtocart'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_two_diff_loc_addtocart'); ?>"
                    value="<?php esc_attr_e($diff_loc_valid); ?>"><?php esc_attr_e($diff_loc_valid); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('Limit 1 location feature, if product added with two different location on cart', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <!-- Validation Message -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Validation Message', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $val_cart_message = get_option($this->option_name . '_valid_cart_message');
                  if ($val_cart_message == false) {
                    update_option($this->option_name . '_valid_cart_message', "You can order from only one location!");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_valid_cart_message'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_valid_cart_message'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_valid_cart_message'); ?>"
                    value="<?php esc_attr_e($val_cart_message); ?>"><?php esc_attr_e($val_cart_message); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('On clear cart validation, message text for user.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <!-- Validation Button Text -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Validation Button Text', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $btn_cartclear = get_option($this->option_name . '_btn_cartclear');
                  if ($btn_cartclear == false) {
                    update_option($this->option_name . '_btn_cartclear', 'Yes, clear cart!');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_btn_cartclear'); ?>"></label>
                  <input type="text" name="<?php esc_attr_e($this->option_name . '_btn_cartclear'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_btn_cartclear'); ?>" value="<?php esc_attr_e($btn_cartclear); ?>">
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('On clear cart validation, Button Text.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

                        <!-- Popup Heading -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Popup Heading', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $popup_head = get_option($this->option_name . '_cart_popup_heading');
                  if ($popup_head == false) {
                    update_option($this->option_name . '_cart_popup_heading', 'Updated Cart!');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_cart_popup_heading'); ?>"></label>
                  <input type="text" name="<?php esc_attr_e($this->option_name . '_cart_popup_heading'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_cart_popup_heading'); ?>" value="<?php esc_attr_e($popup_head); ?>">
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('The text displayed in the popup header after clearing the cart.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <!-- Popup Message -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Popup Message', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                    $popup_message = get_option($this->option_name . '_cart_popup_message');
                    if ($popup_message == false) {
                      update_option($this->option_name . '_cart_popup_message', "Your cart has been cleared, re-add from new location !");
                    }
                    ?>
                    <label for="<?php esc_attr_e($this->option_name . '_cart_popup_message'); ?>"></label>
                    <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_cart_popup_message'); ?>"
                      id="<?php esc_attr_e($this->option_name . '_cart_popup_message'); ?>"
                      value="<?php esc_attr_e($popup_message); ?>"><?php esc_attr_e($popup_message); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('After clearing cart popup detail text message', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <hr>
            <h2 class="header-title"><?php esc_html_e('Restrict to one location', 'wcmlim'); ?></h2>
            <span><?php esc_html_e('Please add your custom heading here for the setting accordingly.', 'wcmlim'); ?></span>

            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Message on popup when all products are available in the changed location', 'wcmlim'); ?></h3>
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $purchase_popuphead = get_option($this->option_name . '_purchase_change_location_text');
                  if ($purchase_popuphead == false) {
                    update_option($this->option_name . '_purchase_change_location_text', 'Change Cart Location?');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_purchase_change_location_text'); ?>"></label>
                  <input type="text" name="<?php esc_attr_e($this->option_name . '_purchase_change_location_text'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_purchase_change_location_text'); ?>" value="<?php esc_attr_e($purchase_popuphead); ?>">
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('The text displayed in the popup header while changing the location.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Message on popup when all products are not available in the changed location', 'wcmlim'); ?></h3>
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $purchase_popup_head = get_option($this->option_name . '_purchase_change_location_notavailtext');
                  if ($purchase_popup_head == false) {
                    update_option($this->option_name . '_purchase_change_location_notavailtext', 'Products Not Available!');
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_purchase_change_location_notavailtext'); ?>"></label>
                  <input type="text" name="<?php esc_attr_e($this->option_name . '_purchase_change_location_notavailtext'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_purchase_change_location_notavailtext'); ?>" value="<?php esc_attr_e($purchase_popup_head); ?>">
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('The text displayed in the popup header while changing the location and the products are not available.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>


            <hr>
            <h2 class="header-title"><?php esc_html_e('For Product Variation', 'wcmlim'); ?></h2>
            <span><?php esc_html_e('Please change the setting accordingly.', 'wcmlim'); ?></span>

                        <!-- No Matching Variations -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('No Matching Variations', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $var_message2 = get_option($this->option_name . '_var_message2');
                  if ($var_message2 == false) {
                    update_option($this->option_name . '_var_message2', "Sorry, no products match your selection. Please choose a different combination .");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_var_message2'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_var_message2'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_var_message2'); ?>"
                    value="<?php esc_attr_e($var_message2); ?>"><?php esc_attr_e($var_message2); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('The text displayed when no products match the selected variations.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

                        <!-- Make Variations Selection -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Make Variations Selection', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $var_message3 = get_option($this->option_name . '_var_message3');
                  if ($var_message3 == false) {
                    update_option($this->option_name . '_var_message3', "Please select product options before adding this item to your cart .");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_var_message3'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_var_message3'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_var_message3'); ?>"
                    value="<?php esc_attr_e($var_message3); ?>"><?php esc_attr_e($var_message3); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('Text displayed if variation options are not selected and the customer tries to add the product to the cart.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>

            <!-- Product Variations Unavailable	 -->
            <div class="setting-row" style="display: flex; flex-direction: column; gap: 15px; padding: 5px 16px;">
              <div class="setting-description" style="width: 100%;">
                <h3 class="option-title"><?php esc_html_e('Product Variations Unavailable', 'wcmlim'); ?></h3>
                
                <!-- Custom notice message input -->
                <div class="custom-notice-input" style="margin-top: 15px;">
                  <?php
                  $var_message4 = get_option($this->option_name . '_var_message4');
                  if ($var_message4 == false) {
                    update_option($this->option_name . '_var_message4', "Sorry, this product is unavailable. Please select a different combination.");
                  }
                  ?>
                  <label for="<?php esc_attr_e($this->option_name . '_var_message4'); ?>"></label>
                  <textarea rows="2" cols="50" name="<?php esc_attr_e($this->option_name . '_var_message4'); ?>"
                    id="<?php esc_attr_e($this->option_name . '_var_message4'); ?>"
                    value="<?php esc_attr_e($var_message4); ?>"><?php esc_attr_e($var_message4); ?></textarea>
                  <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('The text displayed when the selected product variation is unavailable for purchase.', 'wcmlim'); ?> </p>
                </div>
              </div>
            </div>


          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>
      </div>
      <!-- Notice Messages Content Ends -->

      <!-- ======================================== Shortcodes Documentation Content =============================================================== -->
      <div id="shortcodes-content" class="tab-content hidden">

        <form id="shortcode-and-doc-form" class="settings-form">
          <!-- Form will be populated here -->
 
          <h2 class="header-title"><?php esc_html_e('Control settings', 'wcmlim'); ?></h2>
          <span><?php esc_html_e('Please change the settings accordingly.', 'wcmlim'); ?></span>

               <!-- Enable Location finder Map & List View feature -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_view_location_finder_and_list_view"
                  id="<?php echo $option_name; ?>_view_location_finder_and_list_view" <?php checked(get_option($option_name . '_view_location_finder_and_list_view'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Enable Location finder Map & List View feature', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext" style="width: 320px;">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('Steps to Use the Location Finder Feature :', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <!-- <strong>Steps to Use the Location Finder Feature:</strong><br> -->
                      <?php echo sprintf(
                        esc_html__('1. Enable the Location Finder Map & List View feature.%1$s2. Add the shortcode %2$s or %3$s to your desired page.%4$s3. Save changes.', 'wcmlim'),
                        '<br>',
                        '<code>[wcmlim_location_finder]</code>',
                        '<code>[wcmlim_location_finder_list_view]</code>',
                        '<br>'
                      ); ?>
                    </div>
                  </div>
                </span>
              </h3>
              <p> <?php echo sprintf(
                esc_html__('Enable this option for the Location Finder Map and the Location List View feature.%1$sNote : you will need to implement the Google Maps API and obtain an API key for authentication.', 'wcmlim'),
                '<br><b>',
                '</b>'
              ); ?></p>
            </div>
          </div>

        <!-- Show Location Distance -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Show Location Distance', 'wcmlim'); ?></h3>
              <p>
                <b><?php esc_html_e('Note :', 'wcmlim'); ?> </b><?php esc_html_e('Turn on Show Next Closest in stock Location setting from General first', 'wcmlim'); ?>
              </p>
              <p style="display: flex;">
                <?php
              $locationDistance = get_option($this->option_name . '_show_location_distance');
              ?>
              <label style="margin-right: 10px" for="wcmlim_show_location_distance_miles">
                <input type="radio" name="<?php esc_attr_e($this->option_name . '_show_location_distance') ?>"
                  id="wcmlim_show_location_distance_miles" value="miles" <?php echo ($locationDistance == 'miles') ? 'checked="checked"' : ''; ?> />
                <?php echo __('Miles', 'wcmlim'); ?>
              </label>

              <label style="margin-right: 10px" for="wcmlim_show_location_distance_kms">
                <input type="radio" name="<?php esc_attr_e($this->option_name . '_show_location_distance') ?>"
                  id="wcmlim_show_location_distance_kms" value="kms" <?php echo ($locationDistance == 'kms') ? 'checked="checked"' : ''; ?> />
                <?php echo __('Kilometers', 'wcmlim'); ?>
              </label>
              </p>
            </div>
          </div>

                  <!-- What you want to show in popup -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">

            </div>
            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('What you want to show in popup', 'wcmlim'); ?>
                <span class="wcmlim-info-tooltip" style="margin-left: 10px;">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;">
                    <circle cx="12" cy="12" r="10" fill="#2271b1"/>
                    <path d="M12 16v-4M12 8h.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                  <div class="wcmlim-enhanced-tooltiptext">
                    <div class="wcmlim-tooltip-header">
                      <strong><?php esc_html_e('How it works?', 'wcmlim'); ?></strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <?php esc_html_e('This setting will show the selected view content in the location popup.', 'wcmlim'); ?>
                    </div>
                  </div>
                </span>
              </h3>
              <p>
                <b><?php esc_html_e('Note :', 'wcmlim'); ?> </b><?php esc_html_e('Please Select either list view or dropdown', 'wcmlim'); ?>
              </p>
              <p  style="display: flex;">
              <?php
              $locationInPopup = get_option($this->option_name . '_show_in_popup');
              $inline_location = get_option($this->option_name . '_listing_inline_location');

              ?>
              <label style="margin-right: 10px" for="wcmlim_show_in_popup_input">
              <input type="checkbox" name="<?php esc_attr_e($this->option_name . '_show_in_popup[]') ?>"
                id="wcmlim_show_in_popup_select" value="location_dropdown_in_popup" <?php echo (!empty($locationInPopup) && is_array($locationInPopup) && in_array('location_dropdown_in_popup', $locationInPopup)) ? 'checked="checked"' : ''; ?> />


              <?php echo __('Location dropdown', 'wcmlim'); ?>
              </label>

              <label style="margin-right: 10px" for="wcmlim_show_in_popup_input">
                <input type="checkbox" name="<?php esc_attr_e($this->option_name . '_listing_inline_location') ?>"
                  id="wcmlim_show_in_popup_select_inline" value="on" <?php echo (!empty($inline_location) && ($inline_location == "on")) ? 'checked="checked"' : ''; ?> />
                <?php echo __('Location List View', 'wcmlim'); ?>
              </label>
              </p>
            </div>
          </div>

           <!-- Force visitors to select location -->
          <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
              <label class="toggle-switch">
                <input type="checkbox" name="<?php echo $option_name; ?>_force_to_select_location"
                  id="<?php echo $option_name; ?>_force_to_select_location" <?php checked(get_option($option_name . '_force_to_select_location'), 'on'); ?>>
                <span class="toggle-slider"></span>
              </label>
            </div>

            <!-- Column 2: Heading and Description -->
            <div class="setting-description" style="flex: 1;">
              <h3 class="option-title"><?php esc_html_e('Force visitors to select location', 'wcmlim'); ?>
              </h3>
              <p class="description" style="margin-top: 8px; color: #000000;"> <?php esc_html_e('If you enable this we force visitors to select location first', 'wcmlim'); ?></p>
            </div>
          </div>

                    <!-- Label -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
          </div>
          <!-- Column 2: Heading and Description -->
          <div class="setting-description" style="flex: 1;">
            <h3 class="option-title"><?php esc_html_e('Label', 'wcmlim'); ?></h3>
            <?php
            $h2_text = get_option($this->option_name . '_txt_inline_location');
            if ($h2_text == false) {
              update_option($this->option_name . '_txt_inline_location', 'Location: ');
            }
            ?>
            <label for="<?php esc_attr_e($this->option_name . '_txt_inline_location'); ?>"></label>
            <input type="text" name="<?php esc_attr_e($this->option_name . '_txt_inline_location'); ?>"
              id="<?php esc_attr_e($this->option_name . '_txt_inline_location'); ?>" value="<?php esc_attr_e($h2_text); ?>"
              maxlength="40">
            <p><?php esc_html_e('Enter text to display on linear view as a title.', 'wcmlim'); ?></p>
          </div>
        </div>


                    <!-- Pop up icon position	 -->
        <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
            <!-- Column 1: Toggle -->
            <div class="toggle-switch-container" style="flex: 0 0 auto;">
        </div>
        <!-- Column 2: Heading and Description -->
        <div class="setting-description" style="flex: 1;">
          <h3 class="option-title"><?php esc_html_e('Pop up icon position', 'wcmlim'); ?></h3>
          <?php
           $popupPosition = get_option($this->option_name . '_popup_icon_position');
          ?>
          <select name="wcmlim_popup_icon_position" id="wcmlim_popup_position">
            <option value="default"><?php _e('Select', 'wcmlim'); ?></option>
            <option value="left" <?php if ($popupPosition == 'left') {
              echo "selected='selected'";
            } ?>>
              <?php _e('Left', 'wcmlim'); ?>
            </option>
            <option value="right" <?php if ($popupPosition == 'right') {
              echo "selected='selected'";
            } ?>>
              <?php _e('Right', 'wcmlim'); ?>
            </option>
            <option value="top" <?php if ($popupPosition == 'top') {
              echo "selected='selected'";
            } ?>><?php _e('Top', 'wcmlim'); ?>
            </option>
            <option value="bottom" <?php if ($popupPosition == 'bottom') {
              echo "selected='selected'";
            } ?>>
              <?php _e('Bottom', 'wcmlim'); ?>
            </option>
          </select>
          <p><?php esc_html_e('Position for pop up icon.', 'wcmlim'); ?></p>
        </div>
        </div>

        <hr>
        <h2 class="header-title"><?php esc_html_e('Shortcodes', 'wcmlim'); ?></h2>
        <span><?php esc_html_e('Reference guide for available shortcodes and how to use them in your store.', 'wcmlim'); ?></span>

        <div class="shortcode-instruction-block" style="width: 98%;">
          <div class="setting-row" style="padding: 5px 16px">
            <h3><?php esc_html_e('Location Popup', 'wcmlim'); ?> </h3>
            <?php echo sprintf(
              esc_html__('To display Location Popup %1$s - use%2$s or insert as PHP code into your theme files: %3$s', 'wcmlim'),
              '<br />',
              '<code>[wcmlim_locations_popup]</code>',
              '<code> &lt;?php echo do_shortcode(\'[wcmlim_locations_popup]\'); ?&gt;</code>'
            ); ?>
          </div>
          <hr>

          <div class="setting-row" style="padding: 5px 16px">
            <h3><?php esc_html_e('Location Switch', 'wcmlim'); ?></h3>
            <?php echo sprintf(
              esc_html__('To display Locations Dropdown on your website %1$s - use%2$s shortcode.%3$sYou can put it anywhere into page content using editor just by copy-paste, %4$s or insert as PHP code into your theme files: %5$s', 'wcmlim'),
              '<br />',
              '<code>[wcmlim_locations_switch]</code>',
              '<br>',
              '<br>',
              '<code>&lt;?php echo do_shortcode(\'[wcmlim_locations_switch]\'); ?&gt;</code>.'
            ); ?>
          </div> 
          
        
          <h3><?php esc_html_e('Other Shortcode details', 'wcmlim'); ?> </h3>
          <hr>

          <div class="setting-row" style="padding: 5px 16px">
          <h3><?php esc_html_e('WooCommerce Locationwise Products', 'wcmlim'); ?></h3>
          <?php echo sprintf(
            esc_html__('Use this %1$s shortcode is one of our most robust shortcodes, you can use the WooCommerce shortcode to showcase products by location %2$s - use %3$s or insert as PHP code into your theme files: %4$s Make sure you are passing location id. Eg. %5$s', 'wcmlim'),
            '<code>[products]</code>',
            '<br />',
            '<code>[products limit="8" location_id="30" columns="4" orderby="id" order="ASC"]</code>',
            '<code>&lt;?php echo do_shortcode(\'[products limit="8" location_id="30" columns="4" orderby="id" order="ASC"]\');?&gt;</code>',
            '<strong>location_id = 1</strong>'
          ); ?>
                    </div>
          <hr>

          <div class="setting-row" style="padding: 5px 16px">
          <h3><?php esc_html_e('Related Product Shortcode:', 'wcmlim'); ?></h3>
          <?php echo sprintf(
            esc_html__('The WooCommerce %1$s to hide products that are out of stock in the related product section. Simply go to Product Edit and add this shortcode to the product description. %2$s', 'wcmlim'),
            '<code>[wcmlim_related_products_shortcode]</code>',
            '<code>&lt;?php echo do_shortcode(\'[wcmlim_related_products_shortcode]\');?&gt;</code>'
          ); ?>
         
                    </div>
          <hr>

          <div class="setting-row" style="padding: 5px 16px">
          <h3><?php esc_html_e('Location Finder Map', 'wcmlim'); ?></h3>
          <?php echo sprintf(
            esc_html__('To display Location finder on map %1$s - use%2$s or insert as PHP code into your theme files: %3$s %4$s %5$s - to display this map, navigate to the %6$s and enable the %7$s feature.', 'wcmlim'),
            '<br />',
            '<code>[wcmlim_location_finder]</code>',
            '<code> &lt;?php echo do_shortcode(\'[wcmlim_location_finder]\');?&gt;</code>',
            '<a href="admin.php?page=wcmlim-map-settings">' . esc_html__('click here to see more option', 'wcmlim') . '</a>',
            '<br>',
            '<code>' . esc_html__('General Settings tab', 'wcmlim') . '</code>',
            '<code>"' . esc_html__('Enable Location Finder Map & List View', 'wcmlim') . '"</code>'
          ); ?>
          
                    </div>
          <hr>

          <div class="setting-row" style="padding: 5px 16px">
          <h3><?php esc_html_e('Location Finder List', 'wcmlim'); ?></h3>
          <?php echo sprintf(
            esc_html__('To display Location finder List View %1$s - use%2$s or insert as PHP code into your theme files: %3$s %4$s - to display this map, navigate to the %5$s and enable the %6$s feature.', 'wcmlim'),
            '<br />',
            '<code>[wcmlim_location_finder_list_view]</code>',
            '<code> &lt;?php echo do_shortcode(\'[wcmlim_location_finder_list_view]\'); ?&gt;</code>',
            '<br>',
            '<code>' . esc_html__('General Settings tab', 'wcmlim') . '</code>',
            '<code>"' . esc_html__('Enable Location Finder Map & List View', 'wcmlim') . '"</code>'
          ); ?>
          </div>
          <hr>
          <div class="setting-row" style="padding: 5px 16px">
          <h3><?php esc_html_e('Location Info', 'wcmlim'); ?></h3>
          <?php echo sprintf(
            esc_html__('To display Location info %1$s - use%2$s or insert as PHP code into your theme files: %3$s Make sure you are passing location id. Eg. %4$s', 'wcmlim'),
            '<br />',
            '<code>[wcmlim_location_info id=1]</code>',
            '<code> &lt;?php echo do_shortcode(\'[wcmlim_location_info id=1]\'); ?&gt;</code>',
            '<strong>id = 1</strong>'
          ); ?>
          </div>
              </div>
        <hr>
        <div class="documentation-section setting-row">
          <h3 class="option-title"><?php esc_html_e('Documentation', 'wcmlim'); ?></h3>
          <p><?php echo sprintf(
            esc_html__('For detailed documentation and more examples, please visit our %1$s.', 'wcmlim'),
            '<a href="https://techspawn.com/docs/woocommerce-multi-locations-inventory-management/general/" target="_blank">' . esc_html__('online documentation', 'wcmlim') . '</a>'
          ); ?></p>
        </div>


          <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
        </form>

      </div>

      <div id="header-shortcodes-content" class="tab-content hidden">
        <h2 class="header-title"><?php esc_html_e('Shortcode for Header Location Switch', 'wcmlim'); ?></h2>
        <span><?php esc_html_e('Use this shortcode to display a location switch in your header or other areas.', 'wcmlim'); ?></span>
        <div class="shortcode-instruction-block" style="width: 98%;">
            <div class="setting-row" style="padding: 5px 16px">
            <h3><?php esc_html_e('Store Locator View', 'wcmlim'); ?></h3>
            <?php echo sprintf(
              esc_html__('To display Store Locator View, use %1$s or insert as PHP code into your theme files: %2$s To display this shortcode, navigate to the %3$s and select %4$s.', 'wcmlim'),
              '<code>[wcmlim_locations_storeview]</code>',
              '<code>&lt;?php echo do_shortcode(\'[wcmlim_locations_storeview]\'); ?&gt;</code>',
              '<strong>Header Shortcodes Tab</strong>',
              '<strong>Popup</strong>'
            ); ?>
          </div>
          </div>
            <form id="header-shortcodes-form"  class="settings-form">
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <!-- Column 1: Select -->
                   <div class="toggle-switch-container" style="flex: 0 0 auto;">
                   
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <?php 
                    $shortcode_view = get_option("wcmlim_header_shortcode_view");
                    ?>
                      <select name="<?php echo esc_attr($this->option_name . '_header_shortcode_view'); ?>">
                        <option value="drawer" <?php selected($shortcode_view, 'drawer'); ?>><?php esc_html_e('Drawer', 'wcmlim'); ?></option>
                        <option value="popup" <?php selected($shortcode_view, 'popup'); ?>><?php esc_html_e('Popup', 'wcmlim'); ?></option>
                      </select>
                    <h3 class="option-title"><?php esc_html_e('Select the view for the shortcode.', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <!-- Column 1: Toggle -->
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_street_in_shortcode"
                        id="<?php echo $option_name; ?>_show_street_in_shortcode" <?php checked(get_option($option_name . '_show_street_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable street address to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_route_in_shortcode"
                        id="<?php echo $option_name; ?>_show_route_in_shortcode" <?php checked(get_option($option_name . '_show_route_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable route address to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_city_in_shortcode"
                        id="<?php echo $option_name; ?>_show_city_in_shortcode" <?php checked(get_option($option_name . '_show_city_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable city to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_state_in_shortcode"
                        id="<?php echo $option_name; ?>_show_state_in_shortcode" <?php checked(get_option($option_name . '_show_state_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable state address to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_postcode_in_shortcode"
                        id="<?php echo $option_name; ?>_show_postcode_in_shortcode" <?php checked(get_option($option_name . '_show_postcode_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable postcode to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <div class="setting-row" style="display: flex; align-items: center; gap: 20px;">
                  <div class="toggle-switch-container" style="flex: 0 0 auto;">
                    <label class="toggle-switch">
                      <input type="checkbox" name="<?php echo $option_name; ?>_show_country_in_shortcode"
                        id="<?php echo $option_name; ?>_show_country_in_shortcode" <?php checked(get_option($option_name . '_show_country_in_shortcode'), 'on'); ?>>
                      <span class="toggle-slider"></span>
                    </label>
                  </div>
                  <div class="setting-description" style="flex: 1;">
                    <h3 class="option-title"><?php esc_html_e('Enable country to be seen in the shortcode', 'wcmlim'); ?></h3>
                  </div>
                </div>
                <button type="submit" class="button button-primary"><?php esc_html_e('Save Changes', 'wcmlim'); ?></button>
                </div>
            </form>
         

      </div>
      <!-- Shortcodes Documentation Content Ends -->
    </div>
    <!-- Tab Content Sections Ends -->
  </div>

  <script>
    jQuery(document).ready(function ($) {

      // Enable/disable guest user location selector based on toggle state
      function updateGuestLocationDropdown() {
        const isEnabled = $('#<?php echo $option_name; ?>_enable_restrict_guestuser_location').is(':checked');
        
        // Make the dropdown non-editable but still visible when disabled
        $('#wcmlim_restrict_guest_user_location').prop('disabled', !isEnabled);
        
        // Apply subtle styling to indicate disabled state without hiding
        if (!isEnabled) {
          $('#wcmlim_restrict_guest_user_location').css({
            'background-color': '#f0f0f1', 
            'cursor': 'not-allowed',
            'opacity': '0.8'
          });
        } else {
          $('#wcmlim_restrict_guest_user_location').css({
            'background-color': '', 
            'cursor': '',
            'opacity': '1'
          });
        }
      }      

      // Run on page load
      updateGuestLocationDropdown();

      // Run whenever the toggle changes
      $('#<?php echo $option_name; ?>_enable_restrict_guestuser_location').on('change', function() {
        updateGuestLocationDropdown();
      });

      // Toggle Google Maps API Key field visibility based on address management toggle
      function updateAddressApiKeyVisibility() {
        const isEnabled = $('#<?php echo $option_name; ?>_enable_user_address_management').is(':checked');
        
        if (isEnabled) {
          $('.wcmlim-address-api-key-row').css('display', 'flex');
        } else {
          $('.wcmlim-address-api-key-row').css('display', 'none');
        }
      }

      // Run on page load
      updateAddressApiKeyVisibility();

      // Run whenever the toggle changes
      $('#<?php echo $option_name; ?>_enable_user_address_management').on('change', function() {
        updateAddressApiKeyVisibility();
      });

            // Make the list sortable using jQuery UI.
            $('#sortable_locations').sortable({
              update: function(event, ui) {
                var order = [];
                $('#sortable_locations li').each(function(){
                  order.push($(this).data('term-id'));
                });
                $('#<?php echo esc_js($this->option_name . '_location_priority_order'); ?>').val(JSON.stringify(order));
              }
            });

            // Create a warning message div and hide it initially
            $('<div id="sorting-warning" style="color: #d63638; margin: 10px 0; display: none;"><strong>Note:</strong> To enable manual location sorting, please disable both <strong>Filter Location By Radius</strong> and <strong>Enable Sorting By Proximity</strong> options first.</div>')
              .insertBefore('#sortable_locations');

            // Handle proximity filter checkbox
            $('#<?php echo esc_js($option_name); ?>_enable_filter_by_proximity').on('change', function() {
              if ($(this).is(':checked')) {
                // Uncheck the sorting by proximity option
                $('#<?php echo esc_js($option_name); ?>_enable_sorting_by_proximity').prop('checked', false);
                
                // Disable sortable
                $('#sortable_locations').sortable('disable');
                $('#sortable_locations').css('opacity', '0.5');
                $('#sorting-warning').show();
              } else {
                // If both options are unchecked, re-enable sortable
                if (!$('#<?php echo esc_js($option_name); ?>_enable_sorting_by_proximity').is(':checked')) {
                  $('#sortable_locations').sortable('enable');
                  $('#sortable_locations').css('opacity', '1');
                  $('#sorting-warning').hide();
                }
              }
            });

            // Handle sorting by proximity checkbox
            $('#<?php echo esc_js($option_name); ?>_enable_sorting_by_proximity').on('change', function() {
              if ($(this).is(':checked')) {
                // Uncheck the filter by proximity option
                $('#<?php echo esc_js($option_name); ?>_enable_filter_by_proximity').prop('checked', false);
                
                // Disable sortable
                $('#sortable_locations').sortable('disable');
                $('#sortable_locations').css('opacity', '0.5');
                $('#sorting-warning').show();
              } else {
                // If both options are unchecked, re-enable sortable
                if (!$('#<?php echo esc_js($option_name); ?>_enable_filter_by_proximity').is(':checked')) {
                  $('#sortable_locations').sortable('enable');
                  $('#sortable_locations').css('opacity', '1');
                  $('#sorting-warning').hide();
                }
              }
            });

            // Initial check on page load
            if ($('#<?php echo esc_js($option_name); ?>_enable_sorting_by_proximity').is(':checked') || 
                $('#<?php echo esc_js($option_name); ?>_enable_filter_by_proximity').is(':checked')) {
              $('#sortable_locations').sortable('disable');
              $('#sortable_locations').css('opacity', '0.5');
              $('#sorting-warning').show();
            } else {
              $('#sortable_locations').sortable('enable');
              $('#sortable_locations').css('opacity', '1');
              $('#sorting-warning').hide();
            }

      // Make the location checkboxes work like radio buttons
      // Let only one checkbox be selected at a time
      const dropdownCheckbox = $('input[name="<?php esc_attr_e($this->option_name . "_show_in_popup[]") ?>"]');
      const listViewCheckbox = $('input[name="<?php esc_attr_e($this->option_name . "_listing_inline_location") ?>"]');

      // Add event listener to dropdown checkbox
      dropdownCheckbox.on('change', function() {
        if ($(this).is(':checked')) {
          // If dropdown is checked, uncheck the list view
          listViewCheckbox.prop('checked', false);
        }
      });

      // Add event listener to list view checkbox
      listViewCheckbox.on('change', function() {
        if ($(this).is(':checked')) {
          // If list view is checked, uncheck the dropdown
          dropdownCheckbox.prop('checked', false);
        }
      });

      // Fix duplicate ID issue
      $(document).ready(function() {
        // Give the second checkbox a unique ID
        listViewCheckbox.attr('id', 'wcmlim_show_in_popup_input');
      });

      // Initialize - show the default tab based on backend mode
      const backendOnlyMode = <?php echo $wcmlim_allow_only_backend == "on" ? 'true' : 'false'; ?>;
      const initialTab = backendOnlyMode ? 'fulfillment' : 'location';

      // Set the initial active tab
      $('.tab').removeClass('active'); // Clear any active tabs first
      $('.tab[data-tab="' + initialTab + '"]').addClass('active');
      $('.tab-content').addClass('hidden'); // Hide all content first
      $('#' + initialTab + '-content').removeClass('hidden');
      
      // Apply disabled state to tabs when backend only mode is on
      if (backendOnlyMode) {
        $('.tab[data-tab="general"], .tab[data-tab="shop"]').addClass('disabled-tab');
        
        // Disable all form inputs in the disabled tabs
        $('#general-content input, #general-content select, #general-content textarea, #shop-content input, #shop-content select, #shop-content textarea').prop('disabled', true);
        
        // Add CSS for disabled tabs and inputs
        $('head').append(`
          <style>
        .disabled-tab {
          opacity: 0.6;
          cursor: not-allowed !important;
          position: relative;
        }
        .error-message {
          color: #d63638;
          background-color: #fff;
          border-left: 4px solid #d63638;
          padding: 10px 15px;
          margin: 20px 0;
          animation: fadeIn 0.3s ease-in-out;
          display: none;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          
          position: relative;
          z-index: 100;
        }
        #general-content, #shop-content {
          position: relative;
        }
        #general-content::after, #shop-content::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.4);
          z-index: 5;
          display: block;
        }
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-10px); }
          to { opacity: 1; transform: translateY(0); }
        }
          </style>
        `);
        
        // Create error message element
        if (!$('#backend-mode-error').length) {
          $('#general-content, #shop-content').prepend(
        '<div id="backend-mode-error" class="error-message" style="z-index:10;">' +
        'This setting cannot be used with Backend Only mode. To use this setting, please disable the ' +
        '\'Allow to Work plugin from Backend Only\' from the Order Fulfillment section' +
        '</div>'
          );
        }
        
        // Handle clicks on disabled tabs
        $('.disabled-tab').on('click', function(e) {
          e.stopPropagation();
          const targetTab = $(this).data('tab');
          
          // Show error message in the respective content area
          $('.error-message').hide();
          $('#' + targetTab + '-content .error-message').fadeIn();
          
          // Don't switch tabs, stay on current tab
          return false;
        });
      }

      // Tab switching (modified to respect disabled state)
      $('.tab').on('click', function(e) {
        if ($(this).hasClass('disabled-tab')) {
          return; // Handled by the disabled-tab click handler above
        }
        
        const selectedTab = $(this).data('tab');

        // Don't do anything if this tab is already active
        if ($(this).hasClass('active')) {
          return;
        }

        // Update active tab
        $('.tab').removeClass('active');
        $(this).addClass('active');
        
        // Hide any error messages
        $('.error-message').hide();

        // Fade out current content
        $('.tab-content').addClass('fade-out');

        // After a short delay, switch content and fade in
        setTimeout(function() {
          $('.tab-content').addClass('hidden');
          $('#' + selectedTab + '-content').removeClass('hidden');

          // Force reflow
          $('#' + selectedTab + '-content')[0].offsetHeight;

          // Remove fade out class
          $('.tab-content').removeClass('fade-out');
        }, 300);
      });

      // Tab switching
      $('.tab').on('click', function () {
        const selectedTab = $(this).data('tab');

        // Don't do anything if this tab is already active
        if ($(this).hasClass('active')) {
          return;
        }

        // Update active tab
        $('.tab').removeClass('active');
        $(this).addClass('active');

        // Fade out current content
        $('.tab-content').addClass('fade-out');

        // After a short delay, switch content and fade in
        setTimeout(function () {
          $('.tab-content').addClass('hidden');
          $('#' + selectedTab + '-content').removeClass('hidden');

          // Force reflow
          $('#' + selectedTab + '-content')[0].offsetHeight;

          // Remove fade out class
          $('.tab-content').removeClass('fade-out');
        }, 300);
      });

      // Form submission handlers
      
      $('.settings-form').on('submit', function (e) {
        e.preventDefault();

        // Determine which form was submitted
        const formId = $(this).attr('id');
        let operation = '';

        switch (formId) {
          case 'location-form':
            operation = 'save_location_settings';
            break;
          case 'general-form':
            operation = 'save_general_settings';
            break;
          case 'shop-form':
            operation = 'save_shop_page_settings';
            break;
          case 'payment-form':
            operation = 'save_payment_method_settings';
            break;
          case 'fulfillment-form':
            operation = 'save_order_fulfillment_settings';
            
            break;
          case 'notices-form':
            operation = 'save_notice_messages_settings';
            break;
          case 'shortcode-and-doc-form':
            operation = 'save_shortcodes_and_documentation_settings';
            break;
          case 'header-shortcodes-form':
            operation = 'save_header_shortcodes_form_settings';
            break;
        }

        if (!operation) {
          return; // Nothing to do for documentation tab
        }
        // Show loader
        $('#loading-overlay').removeClass('hidden');
        
        // Create an array to hold all form fields, including unchecked checkboxes
        let allFormFields = {};
        
        // Get all form inputs, including checkboxes regardless of checked state
        $(this).find('input, select, textarea').each(function() {
            const name = $(this).attr('name');
            
            // Skip if no name attribute
            if (!name) return;
            
            // For checkboxes, explicitly include their on/off state
            if ($(this).attr('type') === 'checkbox') {
          allFormFields[name] = $(this).prop('checked') ? 'on' : '';
          // Special handling for wcmlim_show_in_popup[] checkbox array
          if (name === 'wcmlim_show_in_popup[]') {
            // Initialize the array if it doesn't exist
            if (!allFormFields['wcmlim_show_in_popup']) {
              allFormFields['wcmlim_show_in_popup'] = [];
            }
            
            // If checkbox is checked, add its value to the array
            if ($(this).prop('checked')) {
              allFormFields['wcmlim_show_in_popup'].push($(this).val());
            }
          } else {
            // For all other checkboxes
            allFormFields[name] = $(this).prop('checked') ? ($(this).attr('value') !== undefined ? $(this).val() : 'on') : '';
          }
            } 
            // For radio buttons, only include if checked
            else if ($(this).attr('type') === 'radio') {
          if ($(this).prop('checked')) {
              allFormFields[name] = $(this).val();
          }
            }
            // For all other inputs
            else {
              // For regular inputs, exclude any with wcmlim_location_thresholds in the name
              if (!name.includes('wcmlim_location_thresholds')) {
                allFormFields[name] = $(this).val();
              }
          // allFormFields[name] = $(this).val();
            }
        });

        // Handle location thresholds table separately
        if ($('#wcmlim_location_threshold_table').length) {
          const thresholds = [];
          
          // Loop through each row in the table
          $('#wcmlim_location_threshold_table tr').each(function(index) {
            const minInput = $(this).find('input[name*="[min]"]');
            const maxInput = $(this).find('input[name*="[max]"]');
            const textInput = $(this).find('input[name*="[text]"]');
            
            if (minInput.length && maxInput.length && textInput.length) {
              thresholds.push({
                min: minInput.val(),
                max: maxInput.val(),
                text: textInput.val()
              });
            }
          });
          
          // Add the thresholds to allFormFields
          allFormFields['wcmlim_location_thresholds'] = thresholds;
        }
        
        // Handle multi-selects and array inputs separately (names ending with [])
        const serializedArray = $(this).serializeArray();
        serializedArray.forEach(function(item) {
            if (item.name.endsWith('[]')) {
          // For array inputs, gather all values with the same name
          const baseName = item.name;
          if (!allFormFields[baseName]) {
              allFormFields[baseName] = [];
          }
          if (Array.isArray(allFormFields[baseName])) {
              allFormFields[baseName].push(item.value);
          }
            }
        });

        // AJAX call
        $.ajax({
          url: ajaxurl,
          type: 'POST',
          data: {
            action: 'wcmlim_settings_operations',
            settings: JSON.stringify(allFormFields),
            operation: operation,
            security: '<?php echo wp_create_nonce('wcmlim_settings_nonce'); ?>'
          },
          success: function (response) {
              alertify.success('Setting Saved!');

            let settingsStr = response['settings'];
            let settings;
          
            if (typeof settingsStr === 'string') {
              try {
                // Try JSON parse first
                settings = JSON.parse(settingsStr);
              } catch (e) {
                // If JSON parse fails, try parsing as query string
                settings = {};
                settingsStr.split('&').forEach(pair => {
                  const [key, value] = pair.split('=');
                  // decodeURIComponent handles URL encoded characters
                  settings[decodeURIComponent(key)] = decodeURIComponent(value || '');
                });
              }
            } else {
              settings = response['settings'];
            }
            
            // Check if page reload is required (when location group setting changes)
            if (response['reload_required'] === true) {
              // Reload the page after a short delay to allow user to see success message
              setTimeout(function() {
                location.reload();
              }, 1000);
            }
          },

          error: function (error) {
              alertify.error('Error message');
          },
          complete: function () {
            // Hide loader
            $('#loading-overlay').addClass('hidden');
          }
        });
      });
    });
  </script>
</body>

</html>