<?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">Location Settings</h2>
          <span>Configure location selection options for your store.</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">Autodetect User Location With Browser</h3>
              <p>Enable this feature to automatically detect the user's current location using browser.</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">Autodetect User Location With Cloudfare</h3>
              <p>Enable this feature to automatically detect the user's current location using Cloudfare.</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">Autodetect User Location With Maxmind</h3>
              <p>
                Use the MaxMind for accurate location detection, suitable for users requiring enhanced location
                precision. To setup maxmind please click below
                <br> <a href='#'>Setup Maxmind</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">Autodetect User Location With Google</h3>
              <p>Input your Google API key to activate location services using Google Maps. To obtain an API key, please generate one by following this  <b><a href="https://developers.google.com/maps/documentation/distance-matrix/get-api-key" target="_blank"> Link</a></b><br><b>Note:-</b> you will need to enable the Places API, Distance Matrix API, Geocoding API, and Maps JavaScript API to use this service.</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="Enter Google API Key">
                  <button type="button" class="button toggle-password google_api_show_btn" style="margin-left: 5px;">
                    Show
                  </button>
                </div>
                <button type="button" class="button validate-api-key wcmlimvalidateGMAPI" style="margin-top: 10px;">
                  Validate API Key
                </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">Autodetect User Location With IPinfo</h3>
                <p>Enable this feature to automatically detect the user's current location using IPinfo.</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="Enter IPinfo API Token">
                    <button type="button" class="button toggle-password ipinfo_api_show_btn" style="margin-left: 5px;">
                      Show
                    </button>
                  </div>
                  <button type="button" class="button validate-api-key wcmlimvalidateIPINFO" style="margin-top: 10px;">
                    Validate API Token
                  </button>
                </div>
              </div>

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

              <div>
                <p>
                  <b>Setup Instructions:</b><br>
                  1. &nbsp; Go to IPinfo.io<a href='https://ipinfo.io/products/ip-geolocation-api' target='_blank'> (
                    Setup IPinfo ) </a> in your browser <br>
                  2. &nbsp; Sign up or log in <br>
                  3. &nbsp; Go to your IPinfo Dashboard <br>
                  4. &nbsp; Find the API Token in API Token section <br>
                  5. &nbsp; Copy that API token <br>
                  6. &nbsp; Paste it in the 'Enter Your IPinfo API Token' field and validate it to ensure whether it is
                  working <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">Restrict to One Location</h3>
              <p>Activate this option if you wish to restrict users to order only from one location. Only the products
                of same location can be ordered.</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">Nearby location finder Search box</h3>
              <p>To enable features associated with Google Maps, such as location discovery and distance calculation.<br>
                <b>Note:</b> you will need to implement the Google Maps API and obtain an API key for authentication.</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">Turn Off Auto-Suggestions in Nearby Location Finder Search Box</h3>
              <p>Enable this setting to turn off Google API auto-suggested addresses.<br>
                <b>Note :</b> To use this feature, the Nearby Location Finder search box setting must be enabled.</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">Enable Users To Manage Address
                <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>How it works?</strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <p style="margin-bottom: 10px;">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.</p>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;">Display Options:</p>
                      <p style="margin-bottom: 6px;"><strong>Shortcode:</strong> <code>[wcmlim_address_selector]</code></p>
                      <p style="margin-left: 10px; margin-bottom: 8px; font-size: 12px;">Add this shortcode to any page, post, or header template to display the address selector.</p>
                      
                      <p style="margin-bottom: 6px;"><strong>Widget:</strong> WCMLIM Address Selector</p>
                      <p style="margin-left: 10px; margin-bottom: 10px; font-size: 12px;">Go to Appearance → Widgets and add "WCMLIM Address Selector" widget to your header or any widget area.</p>
                      
                      <p style="margin-bottom: 8px; font-weight: 600;">Requirements:</p>
                      <p style="margin-left: 10px; font-size: 12px;">For this functionality to work all locations should have values for latitude & longitude to calculate users distance from respective location.</p>
                    </div>
                  </div>
                </span>
              </h3>
              <p>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.<br>
                <b>Note:</b> Google Maps API key is required for this feature to work properly.</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">Google Maps API Key for Address Management</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="Enter your Google Maps API Key"
                    class="regular-text">
                  <button type="button" class="button toggle-password address_api_show_btn" style="margin-left: 5px;">
                    Show
                  </button>
                </div>
              </div>
              <p>Enter your Google Maps API key to enable address management and nearest location detection.<br>
                <b>Note:</b> This is required when "Enable Users To Manage Address" is turned on. 
                <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank" style="color: #2271b1;">Get API Key</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">Hide location dropdown/list on product page</h3>
              <p>Simplify the user interface by removing the location dropdown if it’s unnecessary for your customers.</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">Hide Locations From Frontend</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="Select Some Locations">
                <?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>Select specific locations to exclude from showing your customers.</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">Hide Locations from Dropdown/List if they are Out Of Stock</h3>
              <p>It hides locations with an out of stock status from the dropdown on the front-end.</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">Restore location stock value</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 _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 _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">Set Location Cookie Time</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>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.<br>
              <b>Note : </b>The value you enter will be interpreted as the new cookie duration in days.</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">Set Default Location for a Specific Product</h3>
              <p>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. </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">Set Specific location For Users</h3>
              <p>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.</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">Set Specific Location For Guest users</h3>
              <p>Assign a specific location to the guest user and limiting his access to only the specific location.</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="Select Some Locations">
              <option value="-1"><?php echo __('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">Location Group</h2>
        <span>Please change the setting accordingly.</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">Enable location group</h3>
              <p>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.<br>
              <b>Note :</b> 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. </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">Hide Location Group From FrontEnd</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="Select Location Groups">
                  <?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>Select specific location group to exclude from showing your customer.</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">
            Set users as a Location Shop /Location Regional manager
            <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">
              Assign location shop manager and regional manager to specific location.
            </div>
            <div class="wcmlim-tooltip-footer">
              <div style="text-align: left;">
                <small style="color: #666; font-size: 11px; display: block;">Here is the Documentation link you can refer</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;">learn more</a>
              </div>
            </div>
            </div>
            </span>
            </h3>
            <p>Turn on this setting to activate the user roles as Location Shop Manager and Location Regional Manager features.<br>
            <b>Note :</b> To use the Location Regional Manager feature, the Location Group setting must be enabled. </p>
            </div>
          </div>

        <hr>
        <h2 class="header-title">Location Sorting Priority</h2>
        <span>Please change the setting accordingly.</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">Filter Location By Radius</h3>
              <p>If this option is enabled, the locations listed will be filtered out depending upon radius set by you and users current location.</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">Enable Sorting By Proximity</h3>
              <p>When enabled, locations will be automatically sorted by their proximity to the user, with the closest location appearing first. <br><br>
              <b>Note :</b> Once this setting is enabled, please remember to activate one of the following options:
              [<strong>Autodetect User Location With Google</strong> , <strong>Autodetect User Location With Maxmind</strong> , <strong>Autodetect User Location With Browser</strong> or <strong>Autodetect User Location With IPinfo</strong> ]. </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">Location Priority Order</h3>
                <p>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.</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">Location Threshold Settings</h2>
        <span>Please change the setting accordingly.</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">Enable Location Thresholds</h3>
              <p>Once the setting is enabled you can see the threshold text appearing on behalf of stock status.</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 _e('Min Stock', 'wcmlim'); ?></th>
                        <th><?php _e('Max Stock', 'wcmlim'); ?></th>
                        <th><?php _e('Stock Display Note', 'wcmlim'); ?></th>
                        <th><?php _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 _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 _e('Remove', 'wcmlim'); ?></button></td>
                        </tr>
                        <?php
                    }
                    ?>
                </tbody>
            </table>
            <button type="button" class="add_row_button"><?php _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 _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">Save Changes</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">Checkout Settings</h2>
          <span>Configure global settings for multi-location inventory management.</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">Auto-Populate Shipping and Billing Addresses</h3>
              <p>Automatically fill in customer addresses based on their detected location for a faster checkout process.</p>
            </div>
          </div>

          <hr>
          <h2 class="header-title">Compatible Plugins</h2>
          <span>Please change the setting accordingly.</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">OpenPOS Compatibility
                <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-footer">
                      <div style="text-align: left;">
                        <small style="color: #666; font-size: 11px; display: block;">Here is the Documentation link you can refer</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;">learn more</a>
                      </div>
                    </div>
                  </div>
                </span>
              </h3>
              <p>Enable this setting to make MULTILOCA plugin comapatible with OPENPOS plugin, <b><a href="https://codecanyon.net/item/openpos-a-complete-pos-plugins-for-woocomerce/22613341?gclid=CjwKCAjwnPOEBhA0EiwA609ReX_5ziLI5kGOsT0iLMBTlyEQc4oCmx7fF01-XPUd4ivhaxdqfqhYOhoCqwsQAvD_BwE" target="_blank">please visit the OpenPOS Plugin</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">OpenPOS Dynamic Pricing</h3>
              <p>Enable this setting To sync MultiLoca Location wise pricing to OpenPOS outlet pricing</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">WooCommerce Point of Sale Compatibility
                <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-footer">
                      <div style="text-align: left;">
                        <small style="color: #666; font-size: 11px; display: block;">Here is the Documentation link you can refer</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;">learn more</a>
                      </div>
                    </div>
                  </div>
                </span>
              </h3>
              <p>Enable this setting to make MULTILOCA plugin compatible with Wocommerce Point Of Sale Systems.</p>
            </div>
          </div>

          <script type="text/javascript">
            jQuery(document).ready(function($) {
              // Function to toggle OpenPOS Dynamic Pricing visibility
              function toggleOpenPOSDynamicPricing() {
                var openposCompatibility = $('#<?php echo $option_name; ?>_pos_compatiblity');
                var dynamicPricingSetting = $('.openpos-dynamic-pricing');
                
                if (openposCompatibility.is(':checked')) {
                  dynamicPricingSetting.show();
                } else {
                  dynamicPricingSetting.hide();
                }
              }
              
              // Check initial state on page load
              toggleOpenPOSDynamicPricing();
              
              // Listen for changes to OpenPOS Compatibility setting
              $('#<?php echo $option_name; ?>_pos_compatiblity').change(function() {
                toggleOpenPOSDynamicPricing();
              });
            });
          </script>

          <button type="submit" class="button button-primary">Save Changes</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">Shop Page Settings</h2>
          <span>Configure how locations appear on your shop page and product listings.</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">Locations name and stock</h3>
              <p>Enable this to Show location names and available stock for the selected location on the Shop page.</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">Variable Setting</h3>
              <p>Enable this to show locations name and available stock for default variations at selected location.</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">Location price</h3>
              <p>Enable this to Show location price for the selected location on the Shop page.</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">Display Only In-Stock Items for Selected Location
                <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>How it works?</strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      This setting is effective exclusively on the Shop page when the Location shortcode is implemented. Use the following shortcodes for location functionality:<br>
                      <br>
                      Location Popup: <code>[wcmlim_locations_popup]</code><br>
                      Location Dropdown: <code>[wcmlim_locations_switch]</code>
                    </div>
                  </div>
                </span>
              </h3>
              <p>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.</p>
            </div>
          </div>

          <button type="submit" class="button button-primary">Save Changes</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">Shipping and Payment Method Settings</h2>
          <span>Configure location-specific shipping and payment methods.</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">Assign Shipping Zones to each location</h3>
              <p>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.</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">Assign Shipping Methods to each location</h3>
              <p>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. <br>
            <b>Note : </b>You must have Shipping zones to each location Settings enabled for this functionality to work.</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">Split order Packages by location</h3>
              <p>Enable this setting to divide the order package by locations on the Cart page.</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">Assign Payment methods to each location</h3>
              <p>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.</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">WC Tax To Each Location</h3>
              <p>Activating this option will enable the ability to set WooCommerce (WC) tax rates based on specific locations.</p>
            </div>
          </div>

          <hr>
          <h2 class="header-title">Local Pickup Plugin</h2>
          <span>Please change the setting accordingly.</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">Local Pickup Location</h3>
              <p>
                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<br>
                <a target="_blank" href="https://codecanyon.net/item/local-pickup-for-woocommerce/34768481?s_rank=1"> Click Here</a> <b>To Download the Local Pickup for WooCommerce – Pickup Location, Date & Time Slots</b> plugin by clicking here.
              </p>
            </div>
          </div>

          <button type="submit" class="button button-primary">Save Changes</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">Order Fulfillment Settings</h2>
          <span>Configure how orders are processed and fulfilled from your locations.</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">Allow to Work plugin from Backend Only</h3>
              <p>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.</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;">Order Fulfilment Rules :</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>How it works?</strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      Enable the <b>'Allow to Work plugin from Backend Only'</b> setting above to activate these rules.
                    </div>
                  </div>
                </span>
                
              </p>
                
              <script type="text/javascript">
                jQuery(document).ready(function($) {
                // Rule descriptions
                const ruleDescriptions = {
                'default': 'When adding an order manually, you can pick the location from a dropdown list under each item in the order details screen.',
                'maxinvloc': 'The system automatically chooses the location with the most inventory (stock).',
                'clcsadd': '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.',
                'locappriority': '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.',
                'shipping_loc': '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.)'
                };

                // 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">Display Location Stock</h3>
              <p>Enable this option to show location wise stock on product single page</p>
            </div>
          </div>
`
          <button type="submit" class="button button-primary">Save Changes</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">Updated notice messages for users</h2>
          <span>Configure customer-facing notices and messages about location inventory.</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">Location Validation</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;"> User must select one location to proceed with the product purchase. </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 don’t 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">Validating for PickUp Address</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;"> This message appears if the pickup at store option is unavailable or the service is not enabled for the user . </p>
                </div>
              </div>
            </div>

            <hr>
            <h2 class="header-title">Limit 1 Location Feature</h2>
            <span>Please change the setting accordingly.</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">Add product with two different location</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;"> Limit 1 location feature, if product added with two different location on cart </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">Validation Message</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;"> On clear cart validation, message text for user. </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">Validation Button Text</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;"> On clear cart validation, Button Text. </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">Popup Heading</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;"> The text displayed in the popup header after clearing the cart. </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">Popup Message</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;"> After clearing cart popup detail text message </p>
                </div>
              </div>
            </div>

            <hr>
            <h2 class="header-title">Restrict to one location</h2>
            <span>Please add your custom heading here for the setting accordingly.</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">Message on popup when all products are available in the changed location</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;"> The text displayed in the popup header while changing the location. </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">Message on popup when all products are not available in the changed location</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;"> The text displayed in the popup header while changing the location and the products are not available. </p>
                </div>
              </div>
            </div>


            <hr>
            <h2 class="header-title">For Product Variation</h2>
            <span>Please change the setting accordingly.</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">No Matching Variations</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;"> The text displayed when no products match the selected variations . </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">Make Variations Selection</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;"> Text displayed if variation options are not selected and the customer tries to add the product to the cart . </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">Product Variations Unavailable	</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;"> The text displayed when the selected product variation is unavailable for purchase . </p>
                </div>
              </div>
            </div>


          <button type="submit" class="button button-primary">Save Changes</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">Control settings </h2>
          <span>Please change the settings accordingly.</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">Enable Location finder Map & List View feature
                <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>Steps to Use the Location Finder Feature : </strong>
                    </div>
                    <div class="wcmlim-tooltip-content">
                      <!-- <strong>Steps to Use the Location Finder Feature:</strong><br> -->
                      1. Enable the Location Finder Map & List View feature.<br>
                      2. Add the shortcode <code>[wcmlim_location_finder]</code> or <code>[wcmlim_location_finder_list_view]</code> to your desired page.<br>
                      3. Save changes.
                    </div>
                  </div>
                </span>
              </h3>
              <p> Enable this option for the Location Finder Map and the Location List View feature. 
              <br><b>Note : </b>you will need to implement the Google Maps API and obtain an API key for authentication.</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">Show Location Distance</h3>
              <p>
                <b>Note : </b>Turn on Show Next Closest in stock Location setting from General first
              </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">What you want to show in popup
                <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">
                      This setting will show the selected view content in the location popup.
                    </div>
                  </div>
                </span>
              </h3>
              <p>
                <b>Note : </b>Please Select either list view or dropdown
              </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">Force visitors to select location
              </h3>
              <p class="description" style="margin-top: 8px; color: #000000;"> If you enable this we force visitors to select location first</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">Label</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>Enter text to display on linear view as a title.</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">Pop up icon position	</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>Position for pop up icon.</p>
        </div>
        </div>

        <hr>
        <h2 class="header-title">Shortcodes</h2>
        <span>Reference guide for available shortcodes and how to use them in your store.</span>

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

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

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

          <div class="setting-row" style="padding: 5px 16px">
          <h3>Related Product Shortcode:</h3>
          The WooCommerce <code>[wcmlim_related_products_shortcode]</code> 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.
          <code>
             &lt;?php echo do_shortcode('[wcmlim_related_products_shortcode]');?&gt;
          </code>
         
                    </div>
          <hr>

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

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


          <button type="submit" class="button button-primary">Save Changes</button>
        </form>

      </div>

      <div id="header-shortcodes-content" class="tab-content hidden">
        <h2 class="header-title">Shortcode for Header Location Switch</h2>
        <span>Use this shortcode to display the location switcher in the header of your website.</span>
        <div class="shortcode-instruction-block" style="width: 98%;">
            <div class="setting-row" style="padding: 5px 16px">
            <h3>Store Locator Popup View</h3>
            To display store locations  <br /> - use<code>[wcmlim_locations_storeview]</code> shortcode.<br>You can put it anywhere into page content using editor just by copy-paste, <br> or insert as PHP code into your theme files: <code>&lt;?php echo do_shortcode('[wcmlim_locations_storeview]'); ?&gt;</code>.
          </div>
            <hr>
            <div class="setting-row" style="padding: 5px 16px">
              <h3>Store Locator Drawer View</h3>
            To display store locations <br /> - use<code>[wcmlim_locations_storeview]</code> shortcode.<br>You can put it anywhere into page content using editor just by copy-paste, <br> or insert as PHP code into your theme files: <code>&lt;?php echo do_shortcode('[wcmlim_locations_storeview]'); ?&gt;</code>.
          </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'); ?>>Drawer</option>
                        <option value="popup" <?php selected($shortcode_view, 'popup'); ?>>Popup</option>
                      </select>
                    <h3 class="option-title">Select the view for the shortcode.</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">Enable street address to be seen in the shortcode</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">Enable route address to be seen in the shortcode</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">Enable city to be seen in the shortcode</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">Enable state address to be seen in the shortcode</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">Enable postcode to be seen in the shortcode</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">Enable country to be seen in the shortcode</h3>
                  </div>
                </div>
                <button type="submit" class="button button-primary">Save Changes</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>