<div>          
<%=GetCurrencyCombo("", "")%>
            </div>
            
<%

AddScript "ScriptCurrencyCombo"



' (SS,20/6/17) ACurrencyCurrencyCode used because this special combo control removes the one from the select form field
Sub ShowCurrencyComboHeader_old(ACurrentCurrencyCode)
%>   
<input type="hidden" id="CurrencyCode" name="CurrencyCode" value="<%=ACurrentCurrencyCode%>" />
<select id="ddCurrencyCode">
<%    
End Sub

' (SS,19/6/17) currency ACurrencyName is in the format GBP - British Pound 
Sub ShowCurrencyComboItem(ACurrencyCode, ACurrencyName, AIsSelected)
  Dim LCurrencyNameNoCode, LSelected
  LCurrencyNameNoCode = Trim(Mid(ACurrencyName, 7))
%>
<option value="<%=ACurrencyCode%>" data-imagesrc="/common/flags/currency/32/<%=LCase(ACurrencyCode)%>.png" data-description="<%=LCurrencyNameNoCode%>" <%=Iif(AIsSelected, " selected=""selected""", "")%>><%=ACurrencyCode%></option>
<%
End Sub

Sub ShowCurrencyComboFooter_old
%>
</select>
<%
End Sub

Sub ShowCurrencyComboHeader_old(ACurrentCurrencyCode)
%>
<input type="hidden" id="CurrencyCode" name="CurrencyCode" value="<%=ACurrentCurrencyCode%>" />

<div id="currencySelector" class="currency-selector" data-selected="<%=ACurrentCurrencyCode%>">
  <button type="button"
          class="currency-selected"
          aria-haspopup="listbox"
          aria-expanded="false">
    <span class="currency-selected-text"></span>
    <span class="currency-selected-flag"></span>
    <i class="fa-solid fa-caret-down currency-caret" aria-hidden="true"></i>
  </button>

  <div class="currency-options" role="listbox">
<%
End Sub

Sub ScriptCurrencyCombo_old
' see http://designwithpc.com/Plugins/ddSlick
%>
<script>
$('#ddCurrencyCode').ddslick({  
    imagePosition: "right",
    background: "white",
    width: "220px",
    onSelected: function(data){
      itp_dd_select_currency(data.selectedData.value);        
    }
});

// for selecting currency from this special control
function itp_dd_select_currency(ACurrencyCode)
{
  //alert(ACurrencyCode)
 // alert(document.getElementById('CurrencyCode').value);

  // if currency changed then select it
  if (ACurrencyCode != document.getElementById('CurrencyCode').value) {
    itp_currency(ACurrencyCode)
  }
}
</script>
<%
End Sub


Sub ShowCurrencyComboHeader(ACurrentCurrencyCode)
%>
<input type="hidden" id="CurrencyCode" name="CurrencyCode" value="<%=ACurrentCurrencyCode%>" />

<div id="currencySelector" class="currency-selector" data-selected="<%=ACurrentCurrencyCode%>">
  <button type="button"
          class="currency-selected"
          aria-haspopup="listbox"
          aria-expanded="false">
    <span class="currency-selected-text"></span>
    <span class="currency-selected-flag"></span>
    <i class="fa-solid fa-caret-down currency-caret" aria-hidden="true"></i>
  </button>

  <div class="currency-options" role="listbox">
<%
End Sub

Sub ShowCurrencyComboItem(ACurrencyCode, ACurrencyName, AIsSelected)
  Dim LCurrencyNameNoCode, LSelectedClass
  LCurrencyNameNoCode = Trim(Mid(ACurrencyName, 7))

  If AIsSelected Then
    LSelectedClass = " selected"
  Else
    LSelectedClass = ""
  End If
%>
    <button type="button"
            class="currency-option<%=LSelectedClass%>"
            data-value="<%=ACurrencyCode%>"
            data-name="<%=LCurrencyNameNoCode%>"
            data-flag-class="currency-flag-<%=LCase(ACurrencyCode)%>"
            role="option"
            aria-selected="<%=LCase(CStr(AIsSelected))%>">
      <span>
        <span class="currency-code"><%=ACurrencyCode%></span>
        <span class="currency-name"><%=LCurrencyNameNoCode%></span>
      </span>
      <span class="currency-flag currency-flag-<%=LCase(ACurrencyCode)%>" aria-hidden="true"></span>
    </button>
<%
End Sub

Sub ShowCurrencyComboFooter
%>
  </div>
</div>
<%
End Sub

Sub ScriptCurrencyCombo
%>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const selector = document.getElementById("currencySelector");
  if (!selector) return;

  const hiddenInput = document.getElementById("CurrencyCode");
  const selectedButton = selector.querySelector(".currency-selected");
  const selectedText = selector.querySelector(".currency-selected-text");
  const selectedFlag = selector.querySelector(".currency-selected-flag");
  const options = selector.querySelectorAll(".currency-option");

  function setSelected(option, changeCurrency) {
    const code = option.dataset.value;
    const name = option.dataset.name;
    const flagClass = option.dataset.flagClass;

    selectedText.innerHTML =
      '<span class="currency-code">' + code + '</span>' +
      '<span class="currency-name">' + name + '</span>';

    selectedFlag.innerHTML =
      '<span class="currency-flag ' + flagClass + '" aria-hidden="true"></span>';      

    options.forEach(function (opt) {
      const isSelected = opt === option;
      opt.classList.toggle("selected", isSelected);
      opt.setAttribute("aria-selected", isSelected ? "true" : "false");
    });

    selector.classList.remove("open");
    selectedButton.setAttribute("aria-expanded", "false");

    if (changeCurrency && hiddenInput && code !== hiddenInput.value) {
      itp_currency(code);
    }
  }

  const initialOption =
    selector.querySelector('.currency-option[data-value="' + selector.dataset.selected + '"]') ||
    selector.querySelector(".currency-option");

  if (initialOption) {
    setSelected(initialOption, false);
  }

  selectedButton.addEventListener("click", function (event) {
    event.stopPropagation();

    const isOpen = selector.classList.toggle("open");
    selectedButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
  });

  options.forEach(function (option) {
    option.addEventListener("click", function () {
      setSelected(option, true);
    });
  });

  document.addEventListener("click", function () {
    selector.classList.remove("open");
    selectedButton.setAttribute("aria-expanded", "false");
  });

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
      selector.classList.remove("open");
      selectedButton.setAttribute("aria-expanded", "false");
    }
  });
});
</script>
<%
End Sub


%>