<!-- Kee Subscriptions pricing -->
[%extra_options id:'[@SKU@]'%]
  [%PARAM *select_option%]
  [%if [@name@] eq 'Auto-delivery' or [@name@] eq 'Auto Delivery' or [@name@] eq 'Auto-Delivery'%]
  <div class="auto-delivery col my-3 px-0">
    <div class="auto-delivery-wrapper card card-body">
      <div class="row">
        <div class="col-md-4 col-sm-5 col-8">
          <h3><i class="fa fa-undo fa-flip-vertical pr-1"></i><strong> Auto Delivery</strong></h3>
          <span class="d-sm-none ad-save badge badge-success mobile-save">Save <span class="ad-save-pre">up to </span>$<span class="ad-discount"></span> every time</span>
        </div>
        <div class="col-md-5 col-4 d-sm-block d-none desktop-save">
          <span class="ad-save badge badge-success">Save <span class="ad-save-pre">up to </span>$<span class="ad-discount"></span> every time</span>
        </div>
        <div class="col-4 col-sm-3 text-right as-low-wrapper" style="display:none;">
          <span class="as-low">As low as:<br /></span>
          <span class="ad-price h1" id="sub-box-price"></span>
        </div>
      </div>
      <p class="ad-select-sect">
        <label for="aproductextra[@count@]">Frequency:</label>
          <select name="extra[@count@]" class="form-control ad-select" id="productextra[@count@]" rel="[@SKU@]">
            [@choices@]
          </select>
      </p>
      <div class="ad-about">

        <a role="button" data-toggle="collapse" href="#ad-explain" aria-expanded="false" aria-controls="ad-explain-heading" class="collapsed">
          <span class="fa-stack" style="color:#989898;">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-info fa-stack-1x fa-inverse"></i>
          </span>
          <span style="text-decoration: underline; color:#989898;">How auto delivery works.</span>
        </a>

        <div id="ad-explain" class="panel-collapse collapse p-3" role="tabpanel" aria-labelledby="ad-explain-heading">
          [%content_zone id:'Keesubscriptions-How'%]
           [%param if_empty%]
                <p>Select the frequency and your items will be delivered to you as often as you prefer.</p>
                <p>Auto Delivery isn't a contract, you are free to cancel anytime.</p>
           [%/param%]
          [%end content_zone%]
        </div>

      </div>
    </div>
  </div>
  <span id="keesubscriptions-data"
    data-rrp="[%trim%][%if [@retail@]%][@retail@][%else%][@store_price@][%/if%][%/trim%]"
    data-storeprice="[%trim%][@store_price@][%/trim%]"
    data-productprice="[%trim%][%if [@inpromo@]%][@promo_price@][%else%][@store_price@][%/if%][%/trim%]"
    />
  [%/if%]
  [%END PARAM%]
  [%PARAM *choices%]
    <option type="text" class="form-control" value="[@option_id@]" data-price="[@price@]">
      [%nohtml%][@text@][%end nohtml%]
    </option>
  [%END PARAM%]
[%END extra_options%]

<script type="text/javascript" language="javascript">
(function(){

  var settings = {
    autoSelect: false
  };

  // Don't initialize twice
  if (typeof window.keesubscriptions_reload !== 'undefined'){
    return;
  }

  // Don't initialise if we're not needed
  if ( !document.querySelector('#keesubscriptions-data') ) {
    return;
  }

  var selectedIndex = false;

  function _on_change_option() {
    var adSelect = document.querySelector('.ad-select');

    // Store the selectedIndex
    selectedIndex = adSelect.selectedIndex;
    var dataEl = document.getElementById('keesubscriptions-data');

    var adDiscount = document.querySelectorAll(".ad-discount");

    // Set the savings to the currently selected item
    for (i = 0; i < adSelect.options.length; i++) {
      if(i > 0 && i === Number(adSelect.options[adSelect.selectedIndex].value)){
        adDiscount.forEach((el)=>{
          el.innerHTML = adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', '');
        });
      }
    }
  }

  function _init_template() {
    var dataEl = document.getElementById('keesubscriptions-data');

    if (!dataEl || dataEl.getAttribute('data-init')) {
      return;
    }

    dataEl.setAttribute('data-init', true);

    //In Neto product dashboard - Default option must be "don't select auto delivery"(wording can be different) and autoSavings must have negative numbers
    var rrp          = parseFloat(dataEl.getAttribute('data-rrp'));
    var storePrice   = parseFloat(dataEl.getAttribute('data-storeprice'));
    var currentPrice = parseFloat(dataEl.getAttribute('data-productprice'));
    var adSelect     = document.querySelector('.ad-select');

    var choices = Array.prototype.map.call(adSelect.options, (function (node) {
        return parseFloat(node.getAttribute('data-price') * -1)||0;
    }));

    var maxDiscount = Math.max.apply(Math, choices);
    var adPrice     = (currentPrice - maxDiscount).toFixed(2);
    var rrpSave     = Math.round(((1 - storePrice/rrp)) * 100);

    // Set the prices in the box
    var adPriceEl = document.querySelector(".ad-price");
    if ( adPriceEl ) {
      adPriceEl.innerHTML = '$'+adPrice;
    }

    // Set the discounts in the select dropdown
    var foundMax = false;

    for (i = 0; i < choices.length; i++) {
      if(i > 0 && choices[i] > 0){
        var discountPercent = Number((choices[i]/currentPrice * 100).toFixed(2));
        adSelect.options[i].innerHTML += ' (save ' + discountPercent + '%)';
      }

      if (selectedIndex !== false && selectedIndex == i) {
        adSelect.options[i].selected = true;
      }

      // Select the option with the largest discount by default
      if(settings.autoSelect && maxDiscount> 0 && choices[i] === maxDiscount && !foundMax){

        if ( selectedIndex === false ) { // Only if we don't have a cached selection
          adSelect.options[i].selected = true;
        }

        foundMax = true;
      }
    }

    // Hide savings if there are no savings
    var adSave = document.querySelectorAll(".ad-save");
    if(maxDiscount === 0){
      for (i = 0; i < adSave.length; i++) {
        adSave[i].style.display = 'none';
      }

      // Select the first option if we have no cached value
      if ( settings.autoSelect && selectedIndex === false ) {
        adSelect.options[1].selected = true;
      }

    }

    // Show the largest discount where applicable
    var adDiscount = document.querySelectorAll(".ad-discount");
    for (i = 0; i < adDiscount.length; i++) {
      adDiscount[i].innerHTML = maxDiscount;
    }

    // Updates the price in the subscription box
    document.addEventListener("DOMContentLoaded", function(event) {
      $('#productextra0').on('change', function(){
        var dataEl = document.getElementById('keesubscriptions-data');
        var adSelect = document.querySelector('.ad-select');
        var price = parseFloat(dataEl.getAttribute('data-productprice'));

        if($('#productextra0').val() != 0) {
          var discount = parseFloat(adSelect.options[adSelect.selectedIndex].getAttribute('data-price').replace('-', ''));
          var dPrice = price - discount;
          // Set the prices in the box
          var adPriceEl = document.querySelector(".ad-price");
          adPriceEl.innerHTML = '$'+dPrice.toFixed(2);
          $('.as-low-wrapper').show(500);
          $('.ad-save-pre').hide();
        } else {
          $('.as-low-wrapper').hide();
          $('.ad-save-pre').show();
          adDiscount.forEach((el) => {
              el.innerHTML = maxDiscount;
          });
        }
      });
    });

    // Init listeners

    // Update the discount with the currently selected option
    adSelect.addEventListener('change', _on_change_option.bind(this));

  }

  window.keesubscriptions_reload = _init_template;

  _init_template();
  
  // Reload whenever buying options is reloaded
  (new MutationObserver(_init_template)).observe(document.getElementById('_jstl__buying_options_r'), { attributes: false, childList: true, subtree: true });

  document.addEventListener('click', function (event) {

    if (!event.target.matches('.addtocart')) {
      return;
    }

    var autodeliveryMsg = document.querySelector('.auto-delivery-msg');

    if (autodeliveryMsg === null ) {

      autodeliveryMsg = document.createElement('div');
      autodeliveryMsg.classList.add('npopup-body', 'auto-delivery-msg', 'p-3');

      var npopupDiv = document.querySelector('.npopup');
      npopupDiv.appendChild(autodeliveryMsg);
    }

    var adSelect = document.querySelector('.ad-select');

    if(adSelect.options[adSelect.selectedIndex].value !== "0" && autodeliveryMsg.innerHTML === ''){
      autodeliveryMsg.innerHTML = 'Please note: you have selected an auto delivery subscription for this item, to review please <a href="/_mycart">click here</a>.';
    }
    if(adSelect.options[adSelect.selectedIndex].value === "0"){
      autodeliveryMsg.innerHTML = '';
    }

  }, false);
})();
</script>
<!-- END of Kee Subscriptions -->