{*
 * Price Display Toggle Template
 *
 * Module: B2bpayments
 * Author: Panariga
 *
 * Provides a select element to switch between showing VPC, MPC, or both prices.
 * Saves the user's preference in localStorage.
*}
<div class="price-display-switcher">
  <div id="price-display-switcher" class="payments-selection">
    <select id="priceDisplayToggle" name="price_display_preference" class="custom-select">
      {* Default option, selected if nothing is stored or if 'both' is stored *}
      <option value="both">{l s='Show VPC & MPC' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
      <option value="vpc">{l s='Show VPC only (B2B)' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
      <option value="mpc">{l s='Show MPC only (B2C)' d='Modules.B2bpayments.ShopBreadcrumb'}</option>
    </select>
  </div>
</div>

{literal}
  <script>
    document.addEventListener('DOMContentLoaded', function() {

      const priceToggleSelect = document.getElementById('priceDisplayToggle');
      const storageKey = 'priceDisplayPreference'; // Key for localStorage

      // --- Core Functions ---

      // Function to apply visibility based on preference
      function applyPriceVisibility(preference) {
        const vpcElements = document.querySelectorAll('.vpcrender');
        const mpcElements = document.querySelectorAll('.mpcrender');

        switch (preference) {
          case 'vpc':
            // Show VPC, Hide MPC
            vpcElements.forEach(el => el.style.display = ''); 
            mpcElements.forEach(el => el.style.display = 'none');
            break;
          case 'mpc':
            // Hide VPC, Show MPC
            vpcElements.forEach(el => el.style.display = 'none');
            mpcElements.forEach(el => el.style.display = ''); 
            break;
          case 'both':
          default:
            // Show Both
            vpcElements.forEach(el => el.style.display = ''); 
            mpcElements.forEach(el => el.style.display = ''); 
            break;
        }
      }

      // Function to save preference to localStorage
      function savePreference(preference) {
        try {
          localStorage.setItem(storageKey, preference);
        } catch (e) {
          console.error('Failed to save preference to localStorage:', e);
        }
      }

      // Function to load preference from localStorage
      function loadPreference() {
        try {
          return localStorage.getItem(storageKey);
        } catch (e) {
          return null; 
        }
      }

      // --- Initialization Logic ---

      function initSwitcher() {
        if (!priceToggleSelect) return;

        // 1. Load saved preference or use default
        const savedPreference = loadPreference();
        const currentPreference = (savedPreference && ['both', 'vpc', 'mpc'].includes(savedPreference)) 
                                  ? savedPreference 
                                  : (priceToggleSelect.value || 'both');

        // 2. Sync Select Element and Apply
        priceToggleSelect.value = currentPreference;
        applyPriceVisibility(currentPreference);
      }

      // --- Event Listeners ---

      if (priceToggleSelect) {
        // Initial Load
        initSwitcher();

        // User changes the select dropdown
        priceToggleSelect.addEventListener('change', function(event) {
          const selectedPreference = event.target.value;
          applyPriceVisibility(selectedPreference);
          savePreference(selectedPreference);
        });
      }

      // Hook into PrestaShop Events

      // 1. Product Page: Attribute update (e.g. Size S -> Size L)
      prestashop.on('updatedProduct', function(updatedData) {
        if(priceToggleSelect) {
            applyPriceVisibility(priceToggleSelect.value);
        }
      });

      // 2. Category/List Page: AJAX Pagination, Sorting, Filter update
      prestashop.on('updateProductList', function(data) {
        if(priceToggleSelect) {
            // Re-apply the current value of the select box to the newly injected DOM elements
            applyPriceVisibility(priceToggleSelect.value);
        }
      });

    });
  </script>
{/literal}