jQuery(document).ready(function() {
  const popover = new ownersManualsPopoverSetup();
  popover.init();
  popover.reAddAllPopover();
});

class ownersManualsPopoverSetup {
  constructor() {
    this.highlifeCollection = {
      "grandee": { "link": "/shop/highlife/grandee", "title": "Grandee<sup>®</sup>" },
      "envoy": { "link": "/shop/highlife/envoy", "title": "Envoy<sup>®</sup>" },
      "aria": { "link": "/shop/highlife/aria", "title": "Aria<sup>®</sup>" },
      "vanguard": { "link": "/shop/highlife/vanguard", "title": "Vanguard<sup>®</sup>" },
      "sovereign": { "link": "/shop/highlife/sovereign", "title": "Sovereign<sup>®</sup>" },
      "prodigy": { "link": "/shop/highlife/prodigy", "title": "Prodigy<sup>®</sup>" },
      "jetsetter-lx": { "link": "/shop/highlife/jetsetter-lx", "title": "Jetsetter<sup>®</sup> LX" },
      "jetsetter": { "link": "/shop/highlife/jetsetter", "title": "Jetsetter<sup>®</sup>" },
    };

    this.limelightCollection = {
      "prism": { "link": "/shop/limelight/prism", "title": "Prism<sup>™</sup>" },
      "pulse": { "link": "/shop/limelight/pulse", "title": "Pulse<sup>®</sup>" },
      "flash": { "link": "/shop/limelight/flash", "title": "Flash<sup>™</sup>" },
      "flair": { "link": "/shop/limelight/flair", "title": "Flair<sup>®</sup>" },
      "beam": { "link": "/shop/limelight/beam", "title": "Beam<sup>™</sup>" }
    };

    this.hotspotCollection = {
      "rhythm": { "link": "/shop/hot-spot/rhythm", "title": "Rhythm<sup>®</sup>" },
      "relay": { "link": "/shop/hot-spot/relay", "title": "Relay<sup>®</sup>" },
      "pace": { "link": "/shop/hot-spot/pace", "title": "Pace<sup>™</sup>" },
      "stride": { "link": "/shop/hot-spot/stride", "title": "Stride<sup>®</sup>" },
      "sx": { "link": "/shop/hot-spot/sx", "title": "SX" },
      "tx": { "link": "/shop/hot-spot/tx", "title": "TX" }
    };

    this.highlifeCoverColorsList = [
      
	  	  {
        "name": "<b>Black</b> <br />Pairs with Brushed Nickel or Blackwood",
        "image": "/map/class/big/17455730143747.jpg"
      },
	  	  
	   	  {
        "name": "<b>Gray</b> <br />Pairs with Charcoal",
        "image": "/map/class/big/17455730304376.jpg"
      },
	  	  
	   	  {
        "name": "<b>Shadow</b> <br />Pairs with Linen",
        "image": "/map/class/big/174557304324457.jpg"
      },
	  	  
	   	  {
        "name": "<b>Storm</b> <br />Pairs with Java",
        "image": "/map/class/big/17455730594958.jpg"
      }
	  	  
	  
      
	  
    ];

    this.limelightCoverColorsList = [
      {
        "name": "<b>Black</b> <br />Pairs with all",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-black.jpg"
      },
      {
        "name": "<b>Storm</b> <br />Pairs with all",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-storm.jpg"
      }
    ];
    this.hotspotCoverColorsList = [
      {
        "name": "<b>Black</b> <br />Pairs with Havana",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-black.jpg"
      },
      {
        "name": "<b>Gray</b> <br />Pairs with Storm",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-gray.jpg"
      },
      {
        "name": "<b>Chestnut</b> <br />Pairs with Almond",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-chestnut.jpg"
      }
    ];
    this.coldPlungeCoverColorsList = [
      {
        "name": "<b>Gray</b> <br />Pairs with Ash",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-gray.jpg"
      },
      {
        "name": "<b>Storm</b> <br />Pairs with Mocha",
        "image": "/wp-content/uploads/2025/02/hot-spring-hot-tub-cover-color-swatch-storm.jpg"
      }
    ];

    this.highlifeProducts = '';
    this.limelightProducts = '';
    this.hotspotProducts = '';

    this.highlifeCoverColors = '';
    this.limelightCoverColors = '';
    this.coldPlungeCoverColors = '';
  }

  init() {
    this.generateProductLists();
    jQuery(document).on('reAddAllPopover', this.reAddAllPopover.bind(this));
  }

  generateProductLists() {
    this.highlifeProducts = this.generateList(this.highlifeCollection);
    this.limelightProducts = this.generateList(this.limelightCollection);
    this.hotspotProducts = this.generateList(this.hotspotCollection);

    this.highlifeCoverColors = this.generateCoverColorList(this.highlifeCoverColorsList);
    this.limelightCoverColors = this.generateCoverColorList(this.limelightCoverColorsList);
    this.hotspotCoverColors = this.generateCoverColorList(this.hotspotCoverColorsList);
    this.coldPlungeCoverColors = this.generateCoverColorList(this.coldPlungeCoverColorsList);
  }

  generateList(collection) {
    let products = '';
    for (let model in collection) {
      const modelData = collection[model];
      products += `
      <li>
      <span>${modelData.title}</span>
      </li>
      `;
    }
    return products;
  }

  generateCoverColorList(collection) {
    let products = '';
    for (let model in collection) {
      const modelData = collection[model];
      products += `
      <li data-cabinet="Coastal Gray" class="d-flex mb-2">
      <img decoding="async" data-no-lazy="1" src="${modelData.image}" class="rounded-square">
      <span>${modelData.name}</span>
      </li>
      `;
    }
    return products;
  }

  initializeTippy() {
    tippy('html .owners-manuals-re-links .collections-info', {
      content: '',
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '330px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click',
      hideOnClick: true,
      onShown: (instance) => this.onOwnersManualsPopoverShown(instance),
    });
  }

  onOwnersManualsPopoverShown(instance) {
      const triggerElement = instance.reference;
      const dataAttrValue = triggerElement.getAttribute('data-collection');
      let content = `
        <div id="popover-pop" class="owners-manuals-collections" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close">
              <i class="fa-solid fa-xmark"></i>
            </span>
            <div class="popover-bottom text-left">
              <div class="collections-name">
                <p>The models in this Collection are:</p>`;
                if (dataAttrValue === 'highlife') {
                  content += `<ul>${this.highlifeProducts}</ul><p>(NXT models are also included)</p>`;
                } else if (dataAttrValue === 'limelight') {
                  content += `<ul>${this.limelightProducts}</ul>`;
                } else if (dataAttrValue === 'hotspot') {
                  content += `<ul>${this.hotspotProducts}</ul>`;
                }
                content += `
              </div>
            </div>
          </div>
        </div>
      `;
      instance.setContent(content);
      jQuery(instance.popper).find('.close-thik').click(function() {
        instance.hide(0);
      });
    }

  helpMeChoosePopover(formId, currentPage){
    tippy('.salt-system-info', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                <p class="small">All of our hot tubs come Salt System ready. Our Smart Monitoring System works with the Salt System to regularly test your water and indicate when adjustments are needed for pH, chlorine, and salt levels, helping you maintain clean, balanced spa water.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
  }

  coverColorCollection(formId, currentPage){
    tippy('.cover-color-popup', {
      content: ``,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown: (instance) => this.oncoverColorPopoverShown(instance),
    });
  }

  oncoverColorPopoverShown(instance) {
      const triggerElement = instance.reference;
      const dataAttrValue = triggerElement.getAttribute('data-collection');
      let content = `
        <div id="popover-pop" data-template="true">
          <div class="popover-container cover-color-popup-content">
            <h4>Cover Colors</h4>
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left color-selector-picker">
              <div class="row">
                <div class="col">
                <p class="small">Our cover colors were strategically selected to complement the cabinets.</p>
                <ul class="list-inline d-flex flex-column">`;
                    if (dataAttrValue === 'highlife') {
                      content += `${this.highlifeCoverColors}`;
                    } else if (dataAttrValue === 'limelight') {
                      content += `${this.limelightCoverColors}`;
                    } else if (dataAttrValue === 'hot-spot') {
                      content += `${this.hotspotCoverColors}`;
                    } else if (dataAttrValue === 'cold-plunge') {
                      content += `${this.coldPlungeCoverColors}`;
                    }
                    content += `
                    </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      `;
      instance.setContent(content);
      jQuery(instance.popper).find('.close-thik').click(function() {
        instance.hide(0);
      });
    }

  initializeHelpMeChooseForm() {
    const $this = this;
    jQuery( document ).on( 'gform_page_loaded', function( event, formId, currentPage ) {
      if (formId == 28) {
        $this.helpMeChoosePopover(formId = 28, currentPage);
      }
    });
  }

  addAllPopover(){
    let price_info_content = '<p class="small">FreshWater<sup>®</sup> IQ combines our salt water and in-line smart monitoring systems to tell you what it needs to maintain clean, natural-feeling water.</p>';
    let document_lang = document.getElementsByTagName('html')[0].getAttribute('lang');
    if ( document_lang == 'fr-ca' ) {
      price_info_content = `<p class="small">FreshWater<sup>®</sup> IQ combine notre système d'eau salée et du système de surveillance intelligent en ligne pour vous indiquer ce dont vous avez besoin pour maintenir une eau propre et naturelle.</p>`
    } else if ( document_lang == 'es-us' ) {
      price_info_content = `<p class="small">FreshWater<sup>®</sup> IQ combina nuestros sistemas de agua salada y monitoreo inteligente integrado para decirle qué necesita para mantener agua limpia y con sensación natural.</p>`
    }

    tippy('html .filters__group--salt-water .price-info', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                  ${price_info_content}
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '330px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });

    tippy('.cost-widget:not(.header .cost-widget)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-header text-center">
              <h3>Pricing Guide</h3>
            </div>
            <div class="popover-top">

              <div class="popover-row">
                <div class="popover-item popover-item-cost-widget">
                  <span class="cost-widget-popover" aria-expanded="false">
                    <span class="cost active-cost-part">$</span>
                    <span class="cost passive-cost-part">$$$</span>
                  </span>
                </div>
                <div class="popover-item popover-item-cost">
                  <div class="popover-cost">Up to $9,999</div>
                </div>
              </div>

              <div class="popover-row">
                <div class="popover-item popover-item-cost-widget">
                  <span class="cost-widget-popover" aria-expanded="false">
                    <span class="cost active-cost-part">$$</span>
                    <span class="cost passive-cost-part">$$</span>
                  </span>
                </div>
                <div class="popover-item popover-item-cost">
                  <div class="popover-cost">$10,000 - $14,999</div>
                </div>
              </div>

              <div class="popover-row">
                <div class="popover-item popover-item-cost-widget">
                  <span class="cost-widget-popover" aria-expanded="false">
                    <span class="cost active-cost-part">$$$</span>
                    <span class="cost passive-cost-part">$</span>
                  </span>
                </div>
                <div class="popover-item popover-item-cost">
                  <div class="popover-cost">$15,000 - $18,999</div>
                </div>
              </div>

              <div class="popover-row">
                <div class="popover-item popover-item-cost-widget">
                  <span class="cost-widget-popover" aria-expanded="false">
                    <span class="cost active-cost-part">$$$$</span>
                  </span>
                </div>
                <div class="popover-item popover-item-cost">
                  <div class="popover-cost">$19,000 and up</div>
                </div>
              </div>


            </div>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                  <p>Dealers have sole discretion to set actual prices, which will vary based on options, accessories, installation costs, destination charges, finance charges, taxes and other local factors. Talk to your <a href="/hot-tub-dealers">local dealer</a> for your local price and to take advantage of ongoing promotions and offers.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,

      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
    // MSRP
    tippy('html:lang(en-US) .af_final_price__sup:not(.header .af_final_price__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                <p class="small">Price Terms <br/></p>                <p class="small">Prices shown represent the Manufacturer’s Suggested Retail Price (MSRP) for base model hot tubs, swim spas, and cold plunges. Optional features including water treatment systems, access steps, cover lifters, custom accessories, and delivery/installation services incur additional charges. Costs do not include sales tax, destination fees, installation labor, financing interest, supply chain surcharges (due to raw material fluctuations), dealer-specific add-ons, or local regulatory fees. Participating dealers independently determine final pricing, which may vary based on location, promotions, or custom configurations.</p>                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
    tippy('html:lang(fr-ca) .af_final_price__sup:not(.header .af_final_price__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                <p class="small">Les prix ne sont valables que pour les États-Unis.<br/> </p>
                <p class="small">1. Les prix indiqués sont des prix de détail suggérés par le fabricant pour les modèles de base. Les revendeurs ont toute discrétion pour fixer les prix réels, qui varieront en fonction des options, des accessoires, des coûts d'installation, des frais de destination, des frais de financement, des taxes et d'autres facteurs locaux. Adressez-vous à votre revendeur local pour connaître votre prix local et profiter des promotions et des offres en cours.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
    tippy('html:lang(es-us) .af_final_price__sup:not(.header .af_final_price__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                <p class="small">Precios solo para EE. UU.<br/> </p>
                <p class="small">1. Los precios indicados son los precios de venta al público recomendados por el fabricante para los modelos básicos. Los distribuidores establecen los precios reales de los spas a su discreción, lo que puede variar en función de las opciones, accesorios, gastos de instalación, cargos de destino, cargos de financiamiento, impuestos y otros factores locales. Hable con su distribuidor local para conocer el precio local y para aprovechar las promociones y ofertas en curso.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '395px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });

    tippy('html:lang(en-US) .af_price_per_month__sup:not(.header .af_price_per_month__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                  <p class="small">Financing is for U.S. only.</p>                  <p class="small">Special rate of 9.90% APR with 24 equal monthly payments.</p>                  <p class="small show-msrp-price" style="display: none;"></p>
                  <p class="small"><span class="show-month-price"></span>/mo<br/>
                  Total payments of <span class="show-final-price"></span></p>
                  <p class="small">The VIRPOLSPAS Financing Program is provided by Synchrony Bank, an Equal Housing Lender. Special terms apply to qualifying purchases of hot tubs, swim spas, and cold plunges with approved credit. The special terms Annual Percentage Rate (APR) of 9.90% will apply to qualifying purchases, requiring 24 monthly payments calculated as 1/24th of the purchase price plus applicable interest or alternatively, if monthly interest is 0.825% . The advertised terms are an estimate based on timely payments, no existing account balances, and no additional charges; actual payments may vary due to account activity, rounding, or changes in terms. The special terms APR applies until all qualifying purchases are paid in full. This information is accurate as of 06/13/2025 and is subject to change. Financing is available at VIRPOLSPAS and participating retailers. Monthly payments are based on purchase price excluding taxes and require credit approval. Other account activity may affect payment amounts.</p>                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '550px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        let poper = jQuery(instance.popper);
        let contentPrice = jQuery(instance.popper).find('.popover-container .show-final-price');
        let final_price = jQuery(poper[0]._tippy.reference).data('final-price');
        contentPrice.text(final_price);

        //Added for the msrp price attribute
        let msrp_price = jQuery(poper[0]._tippy.reference).data('msrp');
        if ( msrp_price ) {
          jQuery(instance.popper).find('.popover-container .show-msrp-price').text(msrp_price).show();
        }

        let content = jQuery(instance.popper).find('.popover-container .show-month-price');
        let month_price = jQuery(poper[0]._tippy.reference).data('price-per-month');
        content.text(month_price);

        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
    tippy('html:lang(fr-ca) .af_price_per_month__sup:not(.header .af_price_per_month__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                  <p class="small">Le financement présenté est valable uniquement pour les États-Unis.</p>
                  <p class="small">Taux spécial de 6,90 % avec 75 mensualités égales selon approbation.</p>
                  <p class="small show-msrp-price" style="display: none;"></p>
                  <p class="small"><span class="show-month-price"></span>/mois pendant 75 mois<br/>
                  Paiement total de <span class="show-final-price"></span></p>
                  <p class="small">La carte de crédit Wells Fargo Outdoor Solutions est émise par Wells Fargo Bank, N.A., un prêteur équitable. Des conditions particulières s'appliquent aux achats admissibles effectués avec un crédit approuvé. Le TAEG de 6,90 % des conditions particulières s'appliquera à l'achat admissible, et 75 mensualités équivalentes à 1,65 % du solde initial des conditions spéciales seront exigés. Les conditions annoncées sont une estimation qui suppose que les mensualités sont effectuées à la date d'échéance, qu'aucun autre solde n'est ou ne sera porté sur le compte et qu'aucun frais supplémentaire n'est ou ne sera ajouté au compte. Étant donné que l'activité réelle de votre compte peut être différente des hypothèses utilisées, ou en raison des arrondis, le nombre de paiements ou le montant du paiement final peut être différent des conditions annoncées. Le TAEG des conditions particulières continuera à s'appliquer jusqu'à ce que tous les achats éligibles soient payés en totalité. Le TAEG pour les achats s'applique à certains frais, tels que les frais de retard de paiement ou si vous utilisez la carte pour d'autres transactions. Pour les nouveaux comptes, le TAEG pour les achats est de 28,99 %. Si des intérêts vous sont facturés au cours d'un cycle de facturation, le montant minimum des intérêts sera de 1,00 $. Ces informations sont exactes au 01/01/2025 et sont susceptibles d'être modifiées. Pour les informations actuelles, appelez-nous au 1-800-431-5921. L'offre expire le 31/12/2025. Le financement n'est disponible qu'auprès des revendeurs participants. Les mensualités sont basées sur le prix d'achat seul, à l'exclusion des taxes. Les achats à crédit sont soumis à l'approbation du crédit. D'autres transactions peuvent avoir une incidence sur la mensualité.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '550px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        let poper = jQuery(instance.popper);
        let contentPrice = jQuery(instance.popper).find('.popover-container .show-final-price');
        let final_price = jQuery(poper[0]._tippy.reference).data('final-price');
        contentPrice.text(final_price);

        //Added for the msrp price attribute
        let msrp_price = jQuery(poper[0]._tippy.reference).data('msrp');
        if ( msrp_price ) {
          jQuery(instance.popper).find('.popover-container .show-msrp-price').text(msrp_price).show();
        }

        let content = jQuery(instance.popper).find('.popover-container .show-month-price');
        let month_price = jQuery(poper[0]._tippy.reference).data('price-per-month');
        content.text(month_price);

        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
    tippy('html:lang(es-us) .af_price_per_month__sup:not(.header .af_price_per_month__sup)', {
      content: `
        <div id="popover-pop" data-template="true">
          <div class="popover-container">
            <span class="close-thik desktop-dealer-panel__close"><i class="fa-solid fa-xmark"></i></span>
            <div class="popover-bottom text-left">
              <div class="row">
                <div class="col">
                  <p class="small">Financiamiento disponible solo en EE. UU.</p>
                  <p class="small">Tasa especial de interés anual (TAE) del 6.90 % con 75 mensualidades iguales.</p>
                  <p class="small show-msrp-price" style="display: none;"></p>
                  <p class="small"><span class="show-month-price"></span>/mes durante 75 meses<br/>
                  Pago total <span class="show-final-price"></span></p>
                  <p class="small">La tarjeta de crédito Wells Fargo Outdoor Solutions es emitida por Wells Fargo Bank, N.A., un Prestamista de Vivienda Igualitaria. Se aplican condiciones especiales a las compras válidas y que se carguen con crédito aprobado. Se aplicarán las condiciones especiales de TAE del 6.90 % a la compra válida y se exigirán 75 pagos mensuales equivalentes al 1.65 % del saldo original de las condiciones especiales.  Las condiciones publicadas son una aproximación suponiendo que los pagos mensuales exigidos se realicen en la fecha de vencimiento del pago, que no existen ni existirán otros saldos en la cuenta y que no se añaden ni añadirán otros cargos a la cuenta. Debido a que la actividad real en su cuenta podría ser distinta a las suposiciones utilizadas, o por cuestiones de redondeo, la cantidad de pagos o el monto del pago final podría ser distinto de las condiciones publicadas. Las condiciones especiales de TAE seguirán en vigor hasta que todas las compras válidas se hayan pagado en su totalidad. La TAE para Compras se aplicará a ciertos cargos, tales como cargos por demora en el pago o si utiliza la tarjeta para otras transacciones. Para cuentas nuevas, la TAE para Compras es de 28.99 %. Si se le cobran intereses en algún ciclo de facturación, el cargo mínimo por intereses será de $1.00. Esta información es vigente a partir del 1 de enero de 2025 y está sujeta a cambios. Para obtener información actualizada, llámenos al 1-800-431-5921. La promoción vence el 31 de diciembre de 2025. Financiamiento disponible solo en distribuidores participantes. El pago mensual se basa únicamente en el precio de compra y no incluye impuestos. Compras a crédito sujetas a la aprobación crediticia. Otras transacciones pueden afectar el pago mensual.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      `,
      placement: 'bottom',
      allowHTML: true,
      arrow: false,
      maxWidth: '550px',
      animation: 'fade',
      duration: [250, 100],
      delay: 150,
      interactive: true,
      appendTo: document.body,
      theme: 'light',
      trigger: 'mouseenter click', // 'click', 'manual'
      hideOnClick: true,
      onShown(instance) {
        let poper = jQuery(instance.popper);
        let contentPrice = jQuery(instance.popper).find('.popover-container .show-final-price');
        let final_price = jQuery(poper[0]._tippy.reference).data('final-price');
        contentPrice.text(final_price);

        //Added for the msrp price attribute
        let msrp_price = jQuery(poper[0]._tippy.reference).data('msrp');
        if ( msrp_price ) {
          jQuery(instance.popper).find('.popover-container .show-msrp-price').text(msrp_price).show();
        }

        let content = jQuery(instance.popper).find('.popover-container .show-month-price');
        let month_price = jQuery(poper[0]._tippy.reference).data('price-per-month');
        content.text(month_price);

        jQuery(instance.popper).find('.close-thik').click(function(){
          instance.hide(0);
        });
      },
    });
  }

  reAddAllPopover() {
    console.log('tippy-popover.js initiated');
    [...document.querySelectorAll('*')].forEach(node => {
      if (node._tippy) {
        node._tippy.destroy();
      }
    });
    this.addAllPopover();
    this.initializeTippy();
    this.initializeHelpMeChooseForm();
    this.coverColorCollection();
  }
}