
<!-- ============================= SAME for both Regular and Multi Pages for a client -> can copy paste ================================ -->


<!-- 
  Apr 17, 2026:
    v9.2.0 - ADR-0003: Temporary remediation core (v9.1 + ADR-0003)
    - Points to v2 backend contract (checkout_v2, get_status_v2)
    - Implements fresh-UUID retry, in-flight duplicate UX, duplicate+approved recovery
    - Anti-drift: Only ADR-0003-required changes. No opportunistic modifications.
    - Sacred v9/v9.1 cores remain untouched.

  Apr 14th, 2026
    v9.1 - Transition from v9.0 to v9.1, adding BIN lookup
    - added BIN (Bank Identification Number) lookup implementation

  Feb 7th, 2026
    v9.0 - Transition from v8.1 to v9.0, adding Authorize.net Accept Hosted
    - added Authorize.net Accept Hosted payment form to bring the checkout page to SAQ-A compliance level

  Jan 5th, 2026
    v8.1.9 - Added Check Account Type ('Checking' or 'Savings')
    - replaced $showCheckAccountType with $showCheckFormat
    - added UI (heading and radio buttons to select 'checking' or 'savings' account type), enabled via $showCheckAccountType
    - on the back-end the update is now also sending the checkFormat and the check number (neither of which were being sent before this update)

  Dec 22, 2025:
    v8.1.8
    - [backend] added code for Tip 'Message displayed on sales receipt', 'Message displayed on statement' not being populated
    - [frontend] added support for tipReferenceNo, tipMessageDisplayedOnSalesReceipt, and tipMessageDisplayedOnStatement to mirror what we currently have for base and surcharge.

  Oct 6, 2025:
    v8.1.7.1 - fixing some mobile UI issues
    - fixed the UI issue where 'locate by account' was going off the page, requiring a side scroll
    - fixed the UI issue where billing first name and billing last name were getting squished
      - now they'll each be on their own line < 480px

  Oct 5, 2025:
    v8.1.7 - Recurring Billing
    - updated interface #1 (savePaymentDetails) to give it very specific functionality. $scheduleFequency and $enableSchedule now have no affect
    - added new icons for all sections (we're using font-awesome icons now, not images)
    - added new recurring/membership/subscription section
    - enabled use of sandbox for testing - big time saver and actually the correct way to test APIs
    - added a recurring debug menu - this proved MEGA useful during coding and debugging
    - added two new functions to handle interfaces #2 (PHP recurring variables) and #3 (recurring variables set via URL Params)
      - handleRecurringPreset()
      - handleRecurringUrlParams()
    - added todayOverride which is VITAL for testing recurring payments

  Aug 5, 2025:
    v8.1.6
    - separated customer lookup/de-duplication into it's OWN section called Customer Account/Profile
      - made the customer name lookup MUCH more user friendly and straighforward by giving it very clear success and error messages
    - changed the mechanism by which lookup is triggered, from blur to a deliberate click - this is a better UX for the user
    - updated customer HTML generation to use `` vs the old style
    - several other minor tweaks/enhancements to the customer name lookup
    - added a new custom section: $customSectionAboveCustomerProfile
    - added error cases for the customerID lookup logic - to handle invalid values such as (-1, 0, words, etc)
    - updated all 'autoFill' logic to replace $("[name='UMbilllname']").blur(); with a click to the 'lookup my account' button

    v8.1.5
    - added the lookupByID feature, and updated the lookupByName logic to work with the lookupById (when it's enabled)

  July 9, 2025:
    v8.1.4
    - re-enabled debit card payment option
      - cleaned up code to remove some old commented out code
      - separated out the card iframe into it's own container so it can be shared by CC and Debit (since PayJS doesn't allow multiple instances of those fields)
      - credit-ctr now only contains the processingFeeCtr
      - emptied-out debit-ctr (all it had before were the fields, but we're not sharing these with the CC fields).
      - added code to handle selecting debit as the initial payment method - will need to test
      - removed all the commented out cc, debit and ach validation code what was inside allGood()
      - updated the debit code within calcAmount to make it consistent with cc and echeck.  The logic is exactly the same as before
      - setting UMcustom6 to 'credit card | ach/check | debit | apple pay' so that I have an easy way in ePay to differentiate between credit card and debit purchases

  Apr 8, 2025:
    v8.1.3
    - solved the java.lang.string = "" issue 
      - it was being caused by the customer selection HEADER (which should NOT be clickable), setting the customerId = undefined
        when it was being clicked.  And somehow, customers were clicking this accidentally 
    - we can now pass in ?dontSelectCustomer=true and it won't automatically select the customer
      (which passing in testing=local does because it calls autoFillAndAutoCheck)
      -> so in autoFillAndAutoCheck, I now look for this variable and if it's there i don't select the customer
      -> makes testing regarding customer selection stuff easier

  Apr 2, 2025:
    v8.1.2
    - added function to inform Ops of big ticket decline (txn >= 20k)
    - added function to inform me if an error/exception occurs
    - updated send_email to take in an optional recipients array param - allowing me to specify recipients for each send_email call
    - I did NOT add automated tests for these - will do later.  I just manually tested both functions

  Apr 1, 2025:
    v8.1.1 
    - added $customValidationLogic php block so that we can insert custom validation logic
    - added $customSectionAfterOrderSummary, so I can add custom HTML after the 'Order Summary' section

  Feb 18, 2025 update:
    Added COMPREHENSIVE tiered surcharging, with full automated tests.
    
  Oct 23, 2024 update:
    Disabling debit card payments option for now, until upgraded to epay-server-side
    the code that was commented out is annotated with [disabling-debit]

  Oct 24, 2024 update:
    Apple pay disabled until it's upgraded to epay-server-side
    the code that was commented out is annotated with [disabling-apple-pay]

  Feb 10, 2023 update: This template includes all the updates, as part of Re-arch Update 1, handling EdgeCase 2
 -->

<!-- This is to prevent PHP 8.4 from displaying warnings about undefined variables, which are breaking your JavaScript -->

<!----------------------------- STAGE 1 (PHP) Code ------------------------------------>

<noscript>
  <div style="text-align:center; color:#fff; background:#d65b2a; padding-top:10px; padding-bottom:10px">
    Your browser does not support Javascript or Javascript is Disabled.  
    <br>Please enable Javascript or use a mobile device to complete your transaction.
  </div>
</noscript>

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>

  <meta charset="utf-8">
  <meta http-equiv="Content-Language" content="en-us">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
  <!-- <link rel="shortcut icon" type="image/x-icon" href="https://freedommerchants.com/images/client/favicon.ico" /> -->
  <!-- <link rel="Shortcut Icon" href="https://freedommerchants.com/images/client/favicon.ico" type="image/x-icon" /> -->

  <!-- Sentry -->
   
    <script src="https://js.sentry-cdn.com/b0c331db92177dfc5a394d71e5bf6c86.min.js" crossorigin="anonymous"></script>  
  
  <!-- CSS Libraries -->
   
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />  
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster.bundle.min.css" />
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster-sideTip-borderless.min.css" />
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster-sideTip-light.min.css" />
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster-sideTip-noir.min.css" />
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster-sideTip-punk.min.css" />
    <link rel="stylesheet" type="text/css" href="https://freedommerchants.com/includes/toolTipster/css/tooltipster-sideTip-shadow.min.css" />
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>  
    
  <!-- JS Libraries -->
   
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
          integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://freedommerchants.com/includes/toolTipster/js/tooltipster.bundle.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="https://freedommerchants.com/javascript/jquery.maskedinput.min.js"></script>
    <script src="https://freedommerchants.com/javascript/jquery.creditCardValidator.js"></script>
    <script src="https://freedommerchants.com/javascript/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bowser/1.9.4/bowser.min.js"></script>

    <!-- ePay server side related -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js" integrity="sha512-UNM1njAgOFUa74Z0bADwAq8gbTcqZC8Ej4xPSzpnh0l6KMevwvkBvbldF9uR++qKeJ+MOZHRjV1HZjoRvjDfNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Added for Apple Pay -->
    <!-- don't load the v1 pay.js if we're using sandbox mode - because it gets in the way. -->
          <script src="https://www.usaepay.com/js/v1/pay.js"></script>
        <script src="https://freedommerchants.com/javascript/sha256.js"></script>
    
  <style>#siteContent{display: none;}</style>
  <style id="spc"></style>

  <script>
    // ====================================================================================================
    //                                          STAGE 2
    //                                     (before DOM is ready)
    // ====================================================================================================
    
    // ================================== Variable definitions - START ==================================

    // Constants and Global Variables
    const EMAIL_REGEX = new RegExp(/^[A-Za-z0-9_!#$%&'*+\/=?`{|}~^.-]+@[A-Za-z0-9.-]*(\.\w{2,9})+$/, "");

    // Regular variables
    var TRACE = true;
    var pageName = "nmetc.php";
    var qbclient = "national-medical-education-training-center-inc";

    var epoch = Date.now().toString();
    var traceHash = `${pageName}_${epoch}`;
    console.log('traceHash:' + traceHash);

    // for testing recurring functionality, we need to be able to set a 'today' date
    // otherwise the cypress tests will only work today but fail afterwards.
     
      var todayOverride = null;
        

    // Cypress Variables
     
      var stubGetInvoiceAmount = false;
    
     
      var stubCustomerLookup = false;
    
     
      var stubActivateCp = false;
        
    
    var appKey = "fmc-main";

    // apple pay - in ePay, right under the source key (called API key in console 2), there is Public API key, this is that Public API Key
    var applePayPublicKey = "";

    var cleanAmount;
    var getParameterByName;
    var getParameterByNames;
    var getParamAnyCase
    var gpbn;
    
    var gRawApprovedUrl;
    var gRawAmount;
    var gRawFee;  
    var gTipAmount = 0;
    var gOriginalInvoiceAmount;

    var defaultCountry = "us";
        
    // ----------------------- SURCHARGE ------------------------
    var gApplyProcessingFee = true; // the MASTER surcharge toggle, overrides everything relating to surcharing

    // defaults to false if not specified or set to false
    var useFeeTable = false; // this toggle overrides ccProcessFee
    var processingFeeTable = {}; 
    
    var gCcFeePercentage = 3;

    var useAchFeeTable = false; // this toggle overrides ccProcessFee 
    var achProcessingFeeTable = {}; 
    $useAchFeeTable = "true";
    
    var gECheckFee = 0;
    var eCheckPercOrFlat = "perc"; // "perc" or "flat"
    // ----------------------- SURCHARGE ------------------------

    var allowPartialPayments = true;

    var gAllowTipping = false;

    // Turn on/off terms of conditions
    var showTermsCheckBox = false;
    var termsDefaultChecked = false;

    // var showPrivacyPolicyCheckbox = false;
     
        var showPrivacyPolicyCheckbox = false;
    
    // var privacyPolicyDefaultChecked = false;
     
        var privacyPolicyDefaultChecked = false;
        

    // Turn on/off I authorize text
    var showIAuthorizeTxt = true;

    var showCC = true;
    var showEcheck = true;

     
        var showDebit = false;
    
    var ccsAllowed = ["visa","mastercard","discover","amex"];

    var showCurrencyLabel = false;
    var currencyLabel = "(USD$)"; 

    var defaultPayType = "check";  // "credit" or "check" or "debit"

    // MIGRATION NOTE: When applying debit defaultPayType support to multi-page or QBD pages,
    // see: docs/saved-plans/DEBIT_DEFAULT_PAYTYPE_MIGRATION_GUIDE.md

    // Resolves the default payment type to an available one.
    // If defaultPayType is set to a payment method that isn't available on the page,
    // falls back to the first available method (priority: credit > debit > check).
    // Defined at top-level scope so it's accessible from all $(function) blocks.
    function resolveDefaultPayType(requestedType) {
      var available = {
        "credit": showCC,
        "debit": showDebit,
        "check": showEcheck
      };

      if (available[requestedType]) {
        return requestedType;
      }

      console.log("defaultPayType '" + requestedType + "' is not available on this page, falling back...");
      if (showCC) return "credit";
      if (showDebit) return "debit";
      if (showEcheck) return "check";

      console.warn("No payment types available on this page");
      return requestedType;
    }

    var sendSurchargingToCreditCardFees = false;

    // --------------------------- QBO Variables - START ----------------------------- 
    var fmClearingAccountId = "1150040009"; // FM Clearing Account
    
    // Base
    var baseItemId = ""; // Basic Sales OR n/a for invoice payments becuase it's defined in Invoice
    var baseItemDesc = "";
    var baseItemClassId = ""; 

    // Surcharge
    var surchargeItemId = "89"; // Creditcard Surcharge SERVICE
    var surchargeItemDesc = "";
    var surchargeItemClassId = ""; 

    // ======================================== Jun 8, 2022 ===================================

     
        var baseReferenceNo = "";
    
     
        var baseMessageDisplayedOnSalesReceipt = "";
    
     
        var baseMessageDisplayedOnStatement = "";
    
    var invoiceFieldLabel = "";
     
        invoiceFieldLabel = "Payment For";
        // ======================================== Jun 8, 2022 ===================================


    // Tip
    var tipItemId = ""; // Additional Tip SERVICE
    var tipItemDesc = "";

    // all variables below can be strings, a [variable], or a combination of both.  
    // variables can be: [invoice] and [authcode] // test test
    var surchargeReferenceNo = ""; 
    var surchargeMessageDisplayedOnSalesReceipt = "";
    var surchargeMessageDisplayedOnStatement = "";

    // Added Dec 15 as part of TIP messaging update
    var tipReferenceNo = ""; 
    var tipMessageDisplayedOnSalesReceipt = "";
    var tipMessageDisplayedOnStatement = "";
    // ============================= NEW - Feb 2020 ================================

    // feature 9 - max msg feature
    maxCc = 30000;
    maxAch = 35000;

    var showFmcOffer = "yes";

    var privacyPolicyTextToAgree;

     
        var usingCustomRefNum = false;
        var customRefNumField = ""; 


    // New - added May 17, 2023
     
        var enableSchedule = false;

    
    var gSelectedPaymentMethod;

    var gShouldHaveRecurringSchedule = false;

    // NEW: Auth.net specific global variables
    // var gCurrentAuthnetIframeType = null; // null | "card" | "ach"
    var gCurrentAuthnetPaymentMethod = null; // null | "credit" | "debit" | "check"
    window.authnetRevertingPaymentMethod = false; // Flag to prevent infinite loops during error recovery
    window.authnetSwitchingPaymentMethod = false; // Flag to distinguish payment method switches from truth field changes

    // BIN Lookup - Global State Variables (Card Type Detection)
    // Declared here at global scope so they're available even when loadEPayIframe=false
    let lastLookedUpCardNumber = null;  // Stores truncated PAN: "448233xxxxxx5480"
    let lastLookedUpBIN = null;         // Stores 6-digit BIN: "448233"
    let binLookupPerformed = false;     // Flag: has lookup been performed?
    let binLookupDetectedType = null;   // Stores: "credit", "debit", or "prepaid"
    let binLookupAutoSwitchOccurred = false; // Flag: did auto-switch happen?
    let binLookupFailureConfirmed = false;  // Flag: user confirmed payment method after BIN lookup failure

    // ------------------------- Customer ID Lookup - START ---------------------
     
      var allowCustomerIdLookup = false;
    
    
    var customerSelectionMethod = null;
    // ------------------------- Customer ID Lookup - END ---------------------


    // ------------------------- Edge Case Variables -----------------------
    var edgecase;
    var casenum;

    // generating a globaly unique ID, to UNIQUELY identify this specific checkout page load/session
    // To generate a unique session ID for each checkout page session in a way that ensures uniqueness, even across thousands of simultaneous users, 
    // => the industry standard approach typically involves using UUIDs (Universally Unique Identifiers)
    // Even if two users load the checkout page at the exact same millisecond, the chance of generating the same UUID is astronomically low.
    // [exec-stage1]
    let sessionId = uuid.v4(); window.sessionId = sessionId;
    window.sessionId = sessionId;    console.log("Session ID:", sessionId);

    // - detect testing params and set hostUrl, wsHostUrl and Testing label appropriately
    var hostUrl = "https://fmc-prod.herokuapp.com";
    var wsHostUrl = "wss://fmc-prod.herokuapp.com";

    var send_email;
    var browserAndOsInfo = "";

    var pageMode = "openAmount";

    // new - July 20, 2022
    var gInvoiceExchangeRate = 1;
    // new - July 20, 2022

    let edgeCaseStr;
    let caseStr;

    var autoFill;
    var autoSelectCustomer;
    var autoCheckTermsCheckbox;

    companyName = "National Medical Education & Training Center";
    serviceDescription = "EMT and Paramedic Programs and Training";
    descIsEditable = "false";

    var tab = "<span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>";
    var halfTab = "<span>&nbsp;</span><span>&nbsp;</span>";
    var dot = `<span class="dot">&middot;</span>`;
    // ================================== Variable definitions - END ==================================


    // ================================== Utility Functions - START =================================
    function formatNum(val){return val.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");}

    function empty(val)
    {
      if(val == null || val == "" || val.trim() == "")
      {
        return true;
      }
      else
      {
        return false;
      }
    }

    // removes $ , and other illegal characters 
    // thereby allowing the user to enter $1,234.56, or $1234.56, or 1234.56, or even $12,34.56
    cleanAmount = function(amt)
    {
      var val = amt;
      val = val.replace(/,/g, '');
      val = val.replace('$', '');
      val = val.replace('-', '');
      val = val.replace(/[:/?#@!&()*+,=_~]/, '');
      return val;
    }

    getParameterByName = function(name) 
    {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    gpbn = function(name) 
    {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

    // allows getting parameter values from multiple aliases
    getParameterByNames = function(name1, name2)
    {
      if(name1 != "")
      {
        var name1Value = getParameterByName(name1);
        if(name1Value == "")
        {
           var name2Value = getParameterByName(name2); 
           return name2Value;
        }
        else
        {
          return name1Value;
        }
      }
    }

    // getParameterByNamesAnyCase("custid", "customerid")
    // would allow passing in custId, custID, CustID, CUSTID, customerId, CustomerID, etc
    getParameterByNamesAnyCase = function(...names) {
      const urlParams = new URLSearchParams(window.location.search);
      
      for (let name of names) {
        // Check exact case first
        if (urlParams.has(name)) {
          return urlParams.get(name);
        }
        
        // Then check case-insensitive
        for (let [key, value] of urlParams.entries()) {
          if (key.toLowerCase() === name.toLowerCase()) {
            return value;
          }
        }
      }
      
      return "";
    }

    // IS case-sensitive
    // we want case-insensitive
    getParamAnyCase_v1 = (...keys) => {
      for (let key of keys) {
        const value = new URLSearchParams(window.location.search).get(key);
        if (value !== null) return value;
      }
      return null;
    };

    // is case-sensitive
    // returns null if not found instead of "" (which getParameterByNamesAnyCase does)
    // this is better because we're not confusing "" with a param that is "", eg &someParam=""
    getParamAnyCase = (...keys) => {
      // Parse once
      const params = new URLSearchParams(window.location.search);

      // Build a case-insensitive map
      const map = {};
      for (const [k, v] of params.entries()) {
        map[k.toLowerCase()] = v;
      }

      // Search for the first key that exists (case-insensitive)
      for (const key of keys) {
        const value = map[key.toLowerCase()];
        if (value !== undefined) return value;
      }

      return null;
    };


    capitalize = function(string) 
    {
      return string.charAt(0).toUpperCase() + string.slice(1);
    }

    makeInvoiceSixDigits = function(invoice)
    {
      if(invoice.length < 6)
      {
        sixMinusLen = 6 - invoice.length;
        newInvoiceNum = "";
        for(var i=1; i<= sixMinusLen; i++)
        {
          newInvoiceNum += "0";    
        }
        newInvoiceNum += invoice;
      }
      return newInvoiceNum.toString();
    }

    pad = function(str, max) 
    {
      str = str.toString();
      return str.length < max ? pad("0" + str, max) : str;
    }

    function titleCase(str)
    {
      return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
    }

    function replaceAll(find, replace, str) 
    {
      return str.replace(new RegExp(find, 'g'), replace);
    }

    // useful function to pause JS execution
    function sleep(milliseconds) 
    {
      var start = new Date().getTime();
      for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds){
          break;
        }
      }
    }

    function errorMsg(err)
    {
      var message = '';
      message += '<b>Page URL:</b><br><br>';
      message += window.location.toString();
      message += '<br><br>';
      message += 'error details - name: ' + err.name + ' message: ' + err.message;    
      return message;
    }

    // ----------- Functions to help draw attention to elements - START -----------
    // will 'blink' an element (default is 3 times, and 200ms each)
    // usage: blinkElement("#elem");
    blinkElement = function(selector, times = 3, speed = 200) {
      const $el = $(selector);
      let count = 0;

      function blink() {
        if (count >= times) return;
        $el.fadeOut(speed).fadeIn(speed, function () {
          count++;
          blink();
        });
      }

      blink();
    }

    // will 'highlight' an element by temporarily making the backgorund yellow
    // usage: highlightElement("#elem");
    highlightElement = function(selector, duration = 1000) {
      const $el = $(selector);
      $el.addClass('highlight');

      setTimeout(() => {
        $el.removeClass('highlight');
      }, duration);
    }

    // will 'pulse = enlarge and retract' an element twice
    // usage: pulseElementTwice("#elem");
    pulseElementTwice = function(selector) {
      const $el = $(selector);
      $el.addClass('pulse-twice');

      // Duration: 0.6s × 2 = 1.2s
      setTimeout(() => $el.removeClass('pulse-twice'), 1300);
    }
    // ----------- Functions to help draw attention to elements - END -----------

    // Display the values for UMaddcustomer, UMschedule, UMbillingamount, UMstart, UMnext, UMshowrecurringreceipt in a neat way
    function showRecurringInfo() 
    {
      let umAddCustomer = $("[name='UMaddcustomer']").val();
      let umSchedule = $("[name='UMschedule']").val();  
      let umBillAmount = $("[name='UMbillamount']").val();
      let umNumLeft = $("[name='UMnumleft']").val();  
      let umStart = $("[name='UMstart']").val();  
      let umRecurringReceipt = $("[name='UMrecurringreceipt']").val();  
      
      console.log("================= RECURRING INFO ===============");
      console.log("UMaddcustomer:", umAddCustomer);
      console.log("UMschedule:", umSchedule);
      console.log("UMbillamount:", umBillAmount);
      console.log("UMnumleft:", umNumLeft);
      console.log("UMstart:", umStart);
      console.log("UMrecurringreceipt:", umRecurringReceipt);
      console.log("=================================================");

      $(".umaddcustomerVal").text(umAddCustomer);
      $(".umscheduleVal").text(umSchedule);
      $(".umbillamountVal").text(umBillAmount);
      $(".umnumleftVal").text(umNumLeft);
      $(".umstartVal").text(umStart);
      $(".umrecurringreceiptVal").text(umRecurringReceipt);
      $(".gShouldHaveRecurringScheduleVal").text(gShouldHaveRecurringSchedule);
    }

    // tiered surcharging - start
    // NEW - determines what processing fee value (and whether it's % or $) amount to apply to transaction
    // Reads the processingFeeTable variable defined above
    getProcessingFee = function(amount)
    {
      let processingFee;
      let ccPercOrFlat;

      for(key in processingFeeTable)
      {
        keySplits = key.split("-");
        startingAmount = parseFloat(keySplits[0].trim());
        endingAmount = parseFloat(keySplits[1].trim());

        if(amount >= startingAmount && amount <= endingAmount)
        {
          processingFee = processingFeeTable[key];
          if(processingFee.indexOf("%") != -1)
          {
            ccPercOrFlat = "perc";
            processingFee = processingFee.replace("%", "");
          }
          else if(processingFee.indexOf("$") != -1)
          {
            ccPercOrFlat = "flat";
            processingFee = processingFee.replace("$", "");
          }

          processingFee = parseFloat(processingFee);
        }
      }
      console.log(processingFee, ccPercOrFlat);
      return [processingFee, ccPercOrFlat];
    };

    getAchProcessingFee = function(amount)
    {
      let achProcessingFee;
      let achPercOrFlat;

      for(key in achProcessingFeeTable)
      {
        keySplits = key.split("-");
        startingAmount = parseFloat(keySplits[0].trim());
        endingAmount = parseFloat(keySplits[1].trim());

        if(amount >= startingAmount && amount <= endingAmount)
        {
          achProcessingFee = achProcessingFeeTable[key];
          if(achProcessingFee.indexOf("%") != -1)
          {
            achPercOrFlat = "perc";
            achProcessingFee = achProcessingFee.replace("%", "");
          }
          else if(achProcessingFee.indexOf("$") != -1)
          {
            achPercOrFlat = "flat";
            achProcessingFee = achProcessingFee.replace("$", "");
          }

          achProcessingFee = parseFloat(achProcessingFee);
        }
      }
      console.log(achProcessingFee, achPercOrFlat);
      return [achProcessingFee, achPercOrFlat];
    };
    // tiered surcharging - end

    // utility function to display formdata as a JSON object
    // Function to convert URL parameters to JSON
    // not being used currently
    function urlParamsToJSON(paramsString) {
        var paramsArray = paramsString.split('&');
        var result = {};

        paramsArray.forEach(function(param) {
            var keyValue = param.split('=');
            var key = decodeURIComponent(keyValue[0]);
            var value = decodeURIComponent(keyValue[1] || '');

            // Handle special cases, like JSON-encoded values
            if (value.startsWith('%7B') && value.endsWith('%7D')) {
                value = JSON.parse(decodeURIComponent(value));
            }

            result[key] = value;
        });

        return result;
    }

    // Get the (epay) form data as a a JS object
    function getFormDataAsObject(form) 
    {
      var formDataArray = $(form).serializeArray(); // Get serialized data as an array
      var formDataObject = {}; // Create an empty object

      // Loop through the array and assign key-value pairs to the object
      $.each(formDataArray, function(i, field) {
        formDataObject[field.name] = field.value;
      });

      return formDataObject;
    }
    // ================================== Utility Functions - END =================================

    // ================================== Helper Functions (All Gateways) - START ===================
    // Helper: instead of using $("").val(someValue), use this to explicitly trigger change event
    // This is used by both ePay and Auth.net flows
    function setTruthField(name, value) {
      const $el = $(`[name='${name}']`);
      const prev = $el.val();

      if (String(prev) !== String(value)) {
        $el.val(value);
        // Trigger change event so listeners can detect the change
        $el.trigger("change");
      }
    }

    // Helper: Set customerFound and customerId state variables
    // Used by customer lookup functionality in both ePay and Auth.net flows
    // Note: This is defined globally but relies on customerFound/customerId vars
    // that are defined later in the customer lookup section
    var customerFound = false;
    var customerId = undefined;
    function setCustomerFoundAndId(custFound, custId) {
      customerFound = custFound; // boolean
      customerId = custId; // integer
      $("#customerFound").val(customerFound);
      $("#customerId").val(customerId);
      console.log(`customerFound: ${customerFound}; customerId: ${customerId}`);
    }
    // ================================== Helper Functions (All Gateways) - END =====================

    // ---------------------------------- NON-Utility functions - START ------------------------------
    function getBillingFirstLastRefNum(firstName, lastName, fullName)
    {
      var customRefNum;

      if(fullName.length >= 21)
      {
        var shortenedFullName = `${firstName[0]} ${lastName}`;
        if(shortenedFullName.length >= 21)
        {
          var cutOffName = `${firstName[0]} ${lastName.substr(0, 15)}...`;
          customRefNum = cutOffName;
        }
        else
        {
          customRefNum = shortenedFullName;  
        }
      } 
      else
      {
        customRefNum = fullName;
      }

      console.log(customRefNum);
      return customRefNum;
    }
    // ======================================= STAGE 2 Ends ============================================


    // =================================================================================================
    //                                           STAGE 3 
    //                                    After the dom is ready 
    //                                         (#dom.ready)
    // =================================================================================================
    $(function()
    {
      // ----------------------------- VARIABLE ASSIGNMENTS ---------------------------------

      // check for the todayOverride parameter in the URL
      // and assign it to todayOverride, if it has a valid value.
      const params = new URLSearchParams(window.location.search);
      if (params.has("todayOverride")) 
      {
        const raw = params.get("todayOverride");
        
        // ✅ SAFELY PARSE AS LOCAL TIME
        const parsed = parseDateAsLocal(raw);
        
        if (!isNaN(parsed)) {
          todayOverride = parsed;
        }
      }

      const testingCases = {
        "ec2": {
          "case1": "Trace 1 fails | 2A, 2B, 3 succeed",
          "case2": "Trace 1, 3 fail | 2A, 2B succeed",
          "case3": "Trace 1, 2B, 3 fail | 2A succeeds",
          "case4": "Trace 1, 2B fail | 2A, 3 succeed",
          "case5": "Trace 1, 2A, 3 fail | 2B succeeds",
          "case6": "Trace 1, 2A fail | 2B, 3 succeed",
          "case7": "Trace 1, 2A, 2B fail | 3 succeeds",
        },
        "general": {
          "case1": "Trace 2A, 2B, 3 failed | 1 succeeded",
          "case2": "Trace 2B, 3 failed | 1, 2A succeeded",
          "case3": "Trace 3 failed | 1, 2A, 2B succeeded",
          "case4": "All (1, 2A, 2B, 3) succeeded",
          "case5": "Trace 2B failed | 1, 2A, 3 succeeded",
          "case6": "Trace 2A, 3 failed | 1, 2B succeeded",
          "case7": "Trace 2A failed | 1, 2B, 3 succeeded",
          "case8": "Trace 2A, 2B failed | 1, 3 succeeded",
        }
      }

      // new - Feb 9, 2023
      edgecase = gpbn("edgecase");
      casenum = gpbn("case");

      $("[name='UMcustom15']").val(traceHash);
      $("[data-cy='qb-company'").val(qbclient);

      console.log("setting desc and company name..");

      // Sanitize description input - whitelist safe characters only
      // Allows: letters, numbers, spaces, and common punctuation
      // Strips: < > " \ and other potentially dangerous characters
      function sanitizeDescription(input) {
        if (!input) return '';
        // Remove any HTML tags first
        var stripped = input.replace(/<[^>]*>/g, '');
        // Whitelist: alphanumeric, spaces, and safe punctuation
        // Allowed: . , - ' ( ) / # & : ; $ @ ! ? + = _
        var sanitized = stripped.replace(/[^a-zA-Z0-9\s.,\-'()\/#&:;$@!?+=_]/g, '');
        // Collapse multiple spaces
        sanitized = sanitized.replace(/\s+/g, ' ').trim();
        // Limit length to 200 characters
        return sanitized.substring(0, 200);
      }

      // Function to update UMdescription from either static or editable description
      function updateUMdescription() {
        var desc = descIsEditable === 'true'
          ? sanitizeDescription($("[name='editableDescription']").val())
          : serviceDescription;
        setTruthField("UMdescription", companyName + " - " + desc);
      }

      // Set description text or populate input based on editable setting
      if (descIsEditable === 'true') {
        $("[name='editableDescription']").val(serviceDescription);
      } else {
        $(".desc").text(serviceDescription);
      }

      $(".companyName").text(companyName);
      $("title").text(companyName);
      $("[name='UMcustid']").val("");
      updateUMdescription();

      // Listen for changes to editable description
      if (descIsEditable === 'true') {
        $("[name='editableDescription']").on('input change', function() {
          updateUMdescription();
        });
        // On blur, show the sanitized value so user sees what will actually be submitted
        $("[name='editableDescription']").on('blur', function() {
          var $input = $(this);
          var sanitized = sanitizeDescription($input.val());
          $input.val(sanitized);
          updateUMdescription();
        });
      }
      // ---- assigning the value of pageMode to a hidden text field so we can access / assert it's value in Cypress
      $("#pageMode").val(pageMode);

      gRawApprovedUrl = $("[name='rawApprovedUrl']").val();
      rawDeclinedUrl = $("[name='UMredirDeclined']").val();

      $("#testCase").val(gpbn("testCase"));
      $("#testingFlow").val(gpbn("testingFlow"));
      // ------------------------------ Variable Assignment - end ---------------------------------------------------


      // ----------------------------- FUNCTION DEFINITIONS -----------------------------------
      // defining inside document.ready because it uses the jQuery ajax function.
      send_email = function(subject, message, recipients = [{'email': 'varun@freedommerchants.com'}])
      {
        $.ajax(
         {
          type: "POST", url: "https://mandrillapp.com/api/1.0/messages/send.json",
          data: {
            'key': 'gyOWWNu3JEvLDmJi2BhkGQ',
            'message': {
              'from_email': 'cperrors@freedommerchants.com',
              'to': recipients,
              'autotext': 'true',
              'subject': subject,
              'html': message
            }
          }
         }).done(function(response) {
           console.log(response); 
         });
      };

      detectBrowser = function()
      {
        try 
        {
          var browserName = bowser.name;
          var browserVersion = bowser.version;
          var osName = bowser.osname;
          var osVersion = bowser.osversion;
          browserAndOsInfo = "Browser: " + browserName + ", version: " + browserVersion + "; OS: " + osName + ", version: " + osVersion;

          // store it in an ePay custom variable
          $("[name='UMcustom3']").val(browserAndOsInfo);

          // redirect IE users to the browser not supported page
          if(browserName == "Internet Explorer")
          {
            window.location = "https://freedommerchants.com/browserNotSupported.html";
          }
        }
        catch (err)
        {
          // works perfectly!  
          var subject = "error trying to run bowser code";
          console.log(subject); 
          var message = errorMsg(err);
          // send_email(subject, message); 
        }
  
      }

      // [great-for-testing] auto-fill the form fields
      autoFill = function()
      {
        // wait a bit for the DOM to load
        pageLoadInterval = setInterval(function()
        {
          if($("#fName").is(":visible"))
          {
            clearInterval(pageLoadInterval);  

            // ------------------ Enter billing info fields --------------------
            $("[name='UMbillfname']").val("Varun");
            $("[name='UMbilllname']").val("Aggarwal");
            
            if(getParameterByName("doingInvoicePayments") != "true")
            {
              // $("[name='UMbilllname']").blur();
              $("#customerNameLookupBtn").click();
              setTimeout(function() {
                $(".customerData li.item").first().click();  
              }, 1050)
            }

            $("[name='UMbillphone']").val("(917) 684-6444");
            $("[name='UMemail']").val("varun@freedommerchants.com");
            $("[name='UMbillstreet']").val("11 Bala Ave apt #123");
            $("[name='UMbillcity']").val("Bala-Cynwyd");
            $("[name='UMbillstate']").val("PA");
            $("[name='UMbillzip']").val("19004");
            $("[name='UMbillcompany']").val("FMC");
            
            // $("#ccNumber").val("1234123412341234");
            // $("#ccExpir").val("11/29");
            // $("#ccCvv").val("123");

            // ------------------ Amount --------------------
            if(getParameterByName("autoFillAmount") != "false")
            {
              // enter amount
              // generates a random decimal number between 2.00 and 27.99
              var randomAmount = parseInt(Math.floor(Math.random() * 26) + 2) + parseFloat(Math.random().toFixed(2));
              $("#amountField").val(randomAmount.toFixed(2));
              $("#amountField").keyup();  
            }
            
            // ------------------ Tip --------------------
            if(gAllowTipping)
            {
              if(getParameterByName("autoFillTip") != "false")
              {
                // randomly tip between 5 and 20%
                var randomTipAmount = (parseFloat(parseInt(Math.floor(Math.random() * 15) + 5)/100).toFixed(2) * randomAmount).toFixed(2) ;
                $("#tipAmount").val(randomTipAmount);
                $("#tipAmount").keyup();
              }
            }

            if(getParameterByName("selectCheck") == "true")
            {
              $(".checkPaymentType").click();
            }
            else
            {
              if(getParameterByName("autoFillCheck") == "true")
              {
                // $("[name='UMrouting']").val("123456789");
                // $("[name='UMaccount']").val("1234567890");
                // $("[name='accountNumConfirm']").val("1234567890");
                $("#testingFlow").val("ach"); 
              }
              else 
              {
                // Enter Credit details
                $(".ccPaymentType").click();
                // if(getParameterByName("autoFillCredit") != "false")
                if(getParameterByName("autoFillCredit") == "true")
                {
                  // $("#ccNumber").val("1111222233334444");
                  // $("#ccExpir").val("01/25");
                  // $("#ccCvv").val("123");

                  // setting testingFlow to true bypasses the credit card validation code (that ePay runs)
                  // this is equivalent the above code where we were filling out the cc details, so the validation passed
                  $("#testingFlow").val("true"); 
                }    
              }

              // Enter Debit details
              if(getParameterByName("autoFillDebit") == "true")
              {
                $(".debitPaymentType").click();

                if(getParameterByName("autoFillDebit") == "true")
                {
                  // $("#ccNumber").val("1111222233334444");
                  // $("#ccExpir").val("01/25");
                  // $("#ccCvv").val("123");

                  // setting testingFlow to true bypasses the credit card validation code (that ePay runs)
                  // this is equivalent the above code where we were filling out the cc details, so the validation passed
                  $("#testingFlow").val("true"); 
                }    
              }  
            }

            if(getParameterByName("autoCheck") != "false")
            {
              // check surcharge checkbox if visible
              if($(".jsIAgree").is(":visible"))
              {
                $(".jsIAgree").prop("checked", "true");
              }
              // check any checkboxes
              $("[class^='jsIAgree']").prop("checked", true);  
            }            
          }
        }, 1); 
      }

      // [great-for-testing] waits for the customer search to finish and then selects the first customer
      autoSelectCustomer = async () => 
      {
        return new Promise((resolve) => 
        {
          let customerIntCounter = 0;
          let customerIsVisible = setInterval(() => 
          {
            customerIntCounter += 100;
            if(customerIntCounter < 3000)
            {
              console.log("waiting for customer to show up..");
              if($(".customerData li.item").length == 1)
              {
                console.log('customer is here');
                $(".customerData li.item:first").click();

                clearInterval(customerIsVisible);
                resolve('Customer selected');  
              }
            }
            else if(customerIntCounter === 3000)
            {
              clearInterval(customerIsVisible);
              resolve("Customer didn't appear even after waiting for 3s");
            }
            
          }, 100);
        });
      }

      // [great-for-testing] checkmarks the terms and conditions checkbox
      const autoCheckTermsCheckbox = () => {
        $(".terms").click();
      }

      // [great-for-testing] AutoFill: Billing Info, Amount, Tip, and Checkmark any checkboxes
      function autoFillAndAutoCheck() 
      {
        pageLoadInterval = setInterval(function()
        {
          if($("#fName").is(":visible"))
          {
            clearInterval(pageLoadInterval);  

            // enter billing info fields  

            if(getParameterByName("leaveNameUnfilled") === "true") {

            }
            else {
              $("[name='UMbillfname']").val("Varun");
              $("[name='UMbilllname']").val("Aggarwal");
              $("#customerNameLookupBtn").click();
            }

            // passing dontSelectCustomer=true in the URL
            // doesn't auto click the customer
            // which is good for customer selection testing
            if(getParameterByName("dontSelectCustomer") === "true")
            {

            }
            else {
              // we're waiting just over 1s before clicking because the back-end rails API endpoint has been configured to 
              // sleep for 1s before returning a result, to simulate a real API call UX
              setTimeout(function() {
                $(".customerData li.item").first().click();  
              }, 1050)
            }

            $("[name='UMbillphone']").val("(917) 684-6444");
            $("[name='UMemail']").val("varun@freedommerchants.com");
            $("[name='UMbillstreet']").val("11 Bala Ave apt #123");
            $("[name='UMbillcity']").val("Bala-Cynwyd");
            $("[name='UMbillstate']").val("PA");
            $("[name='UMbillzip']").val("19004");
            $("[name='UMbillcompany']").val("FMC");

            if(getParameterByName("testing") == "staging")
            {
              if(getParameterByName("autofill") != "false")
              {
                // enter amount
                // generates a random decimal number between 1.00 and 3.99
                var randomAmount = parseInt(Math.floor(Math.random() * 2) + 1) + parseFloat(Math.random().toFixed(2));
                $("#amountField").val(randomAmount.toFixed(2));
                $("#amountField").keyup();
              }

              if(gAllowTipping)
              {
                if(getParameterByName("autoFillTip") != "false")
                {
                  // randomly tip between 5 and 15%
                  var randomAmount = parseInt(Math.floor(Math.random() * 2) + 1) + parseFloat(Math.random().toFixed(2));
                  var randomTipAmount = (parseFloat(parseInt(Math.floor(Math.random() * 10) + 5)/100).toFixed(2) * randomAmount).toFixed(2) ;
                  $("#tipAmount").val(randomTipAmount);
                  $("#tipAmount").keyup();
                }
              }
            }
            else
            {
              // only do this if we're not testing invoice payments
              let qbInvoice = getParameterByNames("qbinvoice", "qbi");
              let invoicenum = getParameterByNames("invoicenum", "inum");
              if(qbInvoice === "" || invoicenum === "")
              {
                // only generate a random amount if we're not passing in an amount
                // via ?amt=
                if(getParameterByName("amt") === "")
                {
                  if(getParameterByName("autofill") != "false")
                  {
                    // enter amount
                    // generates a random decimal number between 2.00 and 27.99
                    var randomAmount = parseInt(Math.floor(Math.random() * 26) + 2) + parseFloat(Math.random().toFixed(2));
                    $("#amountField").val(randomAmount.toFixed(2));
                    $("#amountField").keyup();
                  }
                }
              }

              if(gAllowTipping)
              {
                if(getParameterByName("autoFillTip") != "false")
                {
                  // randomly tip between 5 and 20%
                  var randomAmount = parseInt(Math.floor(Math.random() * 2) + 1) + parseFloat(Math.random().toFixed(2));
                  var randomTipAmount = (parseFloat(parseInt(Math.floor(Math.random() * 15) + 5)/100).toFixed(2) * randomAmount).toFixed(2) ;
                  $("#tipAmount").val(randomTipAmount);
                  $("#tipAmount").keyup();
                }
              }
            }

            // enter cc details — respect the current payment method selection
            // (Previously always clicked credit, overriding debit/check selection)
            if(gSelectedPaymentMethod === "credit")
            {
              $(".ccPaymentType").click();
            }
            else if(gSelectedPaymentMethod === "debit")
            {
              $(".debitPaymentType:visible").click();
            }
            else if(gSelectedPaymentMethod === "check")
            {
              $(".checkPaymentType:visible").click();
            }
            
            // check surcharge checkbox if visible
            if($(".jsIAgree").is(":visible"))
            {
              $(".jsIAgree").prop("checked", "true");
            }
          }
        }, 100);

        // check any checkboxes
        $("[class^='jsIAgree']").prop("checked", true);  
      }

      async function safariAutoFill()
      {
        autoFill();
        await autoSelectCustomer();
        autoCheckTermsCheckbox();

        // click the apple pay payment option 
        $(".applePayPaymentType:visible").click();
      }

      // sets hostUrl and wsHostUrl based on gpbn("testing") value (and even based on if the URL has 'ngrok' in it)
      initTestValues = function()
      {
        // [exec-stage3]
        // Local testing WITHOUT QBO integration (for testing non-QBO pages)
        // This must come BEFORE the QBO sandbox override to prevent qbclient from being changed
        if(getParameterByName("testing") == "local-no-qbo")
        {
          hostUrl = "http://localhost:3000";
          wsHostUrl = "ws://localhost:3000";
          $(".testingLbl").html(`Local No-QBO (make sure server is running)
            <br><i>app</i>: <b>${hostUrl}</b>
            <br><i>qbclient</i>: <b>${qbclient}</b> (blank = no QBO integration)`);
          $(".testingLbl").show();

          // Set for Cypress testing
          $("[data-cy='host-url'").val(hostUrl);

          return; // Early return to skip QBO sandbox override below
        }

        // [exec-stage3]
        // we use the same QBO sandbox account for both local and staging testing
        if(getParameterByName("testing") == "true" || getParameterByName("testing") == "local"
         || getParameterByName("testing") == "staging" || getParameterByName("testing") == "cypress"
         || window.location.host.includes("ngrok")
         )
        {
          qbclient = "fmc-sandbox-us-2";

          fmClearingAccountId = "95";
          // fmClearingAccountId = "";
          
          baseItemId = "19";
          // baseItemId = "";
          baseItemDesc = "";

          // Surcharge
          surchargeItemId = "22"; 
          // surchargeItemId = ""; 
          surchargeItemDesc = "";
          
          // Tip
          tipItemId = ""; 
          tipItemDesc = "";
        }

        // [exec-stage3]
        // Setting the Testing Label
        if(getParameterByName("testing") == "true" || getParameterByName("testing") == "local" || window.location.host.includes("localhost") )
        {
          hostUrl = "http://localhost:3000";
          wsHostUrl = "ws://localhost:3000";
          $(".testingLbl").html(`Local (make sure server is running)
            <br><i>app</i>: <b>${hostUrl}</b>
            <br><i>qbclient</i>: <b>${qbclient}</b>`);
          $(".testingLbl").show();
        }
        else if(window.location.host.includes("ngrok-free.app")) 
        {
          let railsAppNgrockUrl = "";
          if(railsAppNgrockUrl === "" || railsAppNgrockUrl === undefined || railsAppNgrockUrl === null)
          {
            alert("error: we're testing on ngrok but $railsAppNgrockUrl isn't set");  
          }
          
          let url = railsAppNgrockUrl; // "https://48171b99asdfadsfd7f4.ngrok.app";
          let withoutHttps = url.replace("https://", "");
          // https://48171b99d7f4.ngrok.app
          hostUrl = `https://${withoutHttps}`;
          wsHostUrl = `wss://${withoutHttps}`;

          $(".testingLbl").html(`Local NgRok
            <br><i>app</i>: <b>${hostUrl}</b>
            <br><i>qbclient</i>: <b>${qbclient}</b>`);
          $(".testingLbl").show();
        }
        else if(getParameterByName("testing") == "staging") 
        {
          hostUrl = "https://fmc-staging.herokuapp.com";
          wsHostUrl = "wss://fmc-staging.herokuapp.com";
          $(".testingLbl").html(`Staging
            <br><i>app</i>: <b>${hostUrl}</b>
            <br><i>qbclient</i>: <b>${qbclient}</b>`);
          $(".testingLbl").show();
        }
        else if(getParameterByName("testing") == "cypress") 
        {
          hostUrl = "http://localhost:3000";
          wsHostUrl = "ws://localhost:3000";
          $(".testingLbl").html(`Local [Cypress] (Make sure the Rails server is running)
            <br><i>app</i>: <b>${hostUrl}</b>
            <br><i>qbclient</i>: <b>${qbclient}</b>`);
          $(".testingLbl").show();
        }  

        // for cypress testing
        $("[data-cy='host-url'").val(hostUrl);    


        // Show all the Layer 0123 Submit Buttons
        if(getParameterByName("testing") == "true" || getParameterByName("testing") == "local" || getParameterByName("testing") == "staging")
        {
          // -----------------------------------------------------------------------------------------------------------
          //                        AutoFill: Billing Info, Amount, Tip, and Checkmark any checkboxes
          // -----------------------------------------------------------------------------------------------------------
          autoFillAndAutoCheck();

          // ------------------------------------------------------------------------------------------------------------------------------
          //                               Add the test SUBMIT and DECLINE buttons (and their event handlers)
          // ------------------------------------------------------------------------------------------------------------------------------
          
          $(".testButtonsCtr").show();
          
          // Layer0 - Form Submission
          $("body").on("click", ".simulateRailsBackendOffline", function()
          {
            $("#testCase").val("simulate-rails-backend-offline");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          // Layer0 - Form Submission
          $("body").on("click", ".simulateRailsBackendOfflineForTwoRetries", function()
          {
            $("#testCase").val("simulate-rails-backend-offline-for-two-retries");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          $("body").on("click", ".openWsConnection", function()
          {
            // $("#testCase").val("simulate-rails-backend-offline");
            // $("#testingFlow").val(gSelectedPaymentMethod);
            // $("form").submit();
            connectToWebSocket();
          });

          $("body").on("click", ".simulateWsDisconnection", function()
          {
            // $("#testCase").val("simulate-rails-backend-offline");
            // $("#testingFlow").val(gSelectedPaymentMethod);
            // $("form").submit();
            //**cb
            // POST all the FORM data to /checkout
            $.ajax(
            {
              url: `${hostUrl}/epay/simulate_ws_disconnection?uuid=${sessionId}`, 
              type: 'GET',                        
              data: null,
              success: function(response) {
                if(response.result == "success") { }
                else 
                {
                  console.log(response);
                }
              },
              error: function(xhr, status, error) {
                console.log('Error:', error);     
              }
            });
          });


          // Layer1 - /epay/checkout
          $("body").on("click", ".simulateValidationFailBtn", function()
          {
            $("#testCase").val("simulate-validation-fail");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          $("body").on("click", ".simulateExceptionBtn", function()
          {
            $("#testCase").val("simulate-exception");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          // Layer2 - Epay Job
          $("body").on("click", ".simulateEpayJobExceptionBtn", function()
          {
            $("#testCase").val("eppj_error_in_job");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          // Layer3 - QboIntent.do_epay
          $("body").on("click", ".simulateApprovedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-approved");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateRealApprovedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-real-approved-txn");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateSlightDelayApprovedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-slight-delay-approved");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateLongDelayApprovedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-long-delay-approved");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateSlightDelayDeclinedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-slight-delay-declined");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateLongDelayDeclinedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-long-delay-declined");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateWsConnectionBreaksLongDelayDeclinedBtn", function()
          {
            // checkoutTestSubCase = 'ws-connection-gets-broken';
            $("#testSubCase").val("ws-connection-gets-broken");
            $("#testCase").val("do-epay-simulate-long-delay-declined");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateDeclinedBtn", function()
          {
            $("#testCase").val("do-epay-simulate-declined");
            $("#testingFlow").val(gSelectedPaymentMethod);  
            $("form").submit();
          });

          $("body").on("click", ".simulateDoEpayExceptionBtn", function()
          {
            $("#testCase").val("do-epay-simulate-exception");
            $("#testingFlow").val(gSelectedPaymentMethod);
            $("form").submit();
          });

          // ==================== Full Flow Test Buttons ====================

          // Process Payment with Credit Card (Full Flow: Tokenization → BIN Lookup → Validation → Submit)
          $("body").on("click", ".testFullFlowCredit", async function()
          {
            console.log("\n=== FULL FLOW TEST: Credit Card ===");
            console.log("Selected payment type:", gSelectedPaymentMethod);

            // Mock the PayJS getPaymentKey function to return credit card data
            creditCardClient.getPaymentKey = async function(paymentCard) {
              console.log("🎭 Mock getPaymentKey called - returning CREDIT card data");
              return {
                key: "mock_full_flow_credit_" + Date.now(),
                creditcard: {
                  number: "311338xxxxxx1234",  // Amex BIN (credit)
                  cardtype: "Amex"
                }
              };
            };

            // Set test case flag to simulate declined (so page stays and we can see logs)
            // NOTE: Do NOT set $("#testingFlow") - it would bypass tokenization and BIN lookup!
            $("#testCase").val("do-epay-simulate-declined");

            // Trigger submit button - let normal flow continue
            // Flow: Validation → Tokenization (mocked) → BIN lookup → Validation check → Submit (if valid) → Shows declined message
              console.log("🚀 Triggering submit button - running full normal flow...");
              $(".submitBtn").trigger("click");
          });

          // Process Payment with Debit Card (Full Flow: Tokenization → BIN Lookup → Validation → Submit)
          $("body").on("click", ".testFullFlowDebit", async function()
          {
            console.log("\n=== FULL FLOW TEST: Debit Card ===");
            console.log("Selected payment type:", gSelectedPaymentMethod);

            // Mock the PayJS getPaymentKey function to return debit card data
            creditCardClient.getPaymentKey = async function(paymentCard) {
              console.log("🎭 Mock getPaymentKey called - returning DEBIT card data");
              return {
                key: "mock_full_flow_debit_" + Date.now(),
                creditcard: {
                  number: "485427xxxxxx5678",  // Visa BIN (debit)
                  cardtype: "Visa"
                }
              };
            };

            // Set test case flag to simulate declined (so page stays and we can see logs)
            // NOTE: Do NOT set $("#testingFlow") - it would bypass tokenization and BIN lookup!
            $("#testCase").val("do-epay-simulate-declined");

            // Trigger submit button - let normal flow continue
            // Flow: Validation → Tokenization (mocked) → BIN lookup → Validation check → Submit (if valid) → Shows declined message
              console.log("🚀 Triggering submit button - running full normal flow...");
              $(".submitBtn").trigger("click");
          });

          // Process Payment with ACH/eCheck (Full Flow: NO BIN Lookup)
          $("body").on("click", ".testFullFlowACH", async function()
          {
            console.log("\n=== FULL FLOW TEST: ACH/eCheck ===");
            console.log("Selected payment type:", gSelectedPaymentMethod);
            console.log("✓ ACH flow does NOT involve BIN lookup (no card type detection needed)");

            // Mock the check getPaymentKey function to return ACH data
            // Note: 'client' is the USAePay client object used for check tokenization
            client.getPaymentKey = async function(paymentCheck) {
              console.log("🎭 Mock getPaymentKey (check) called - returning ACH payment key");
              return Promise.resolve({
                key: "mock_full_flow_ach_" + Date.now(),
                // ACH doesn't return creditcard object - just key
              });
            };

            // Set test case flag to simulate declined (so page stays and we can see logs)
            $("#testCase").val("do-epay-simulate-declined");

            // Trigger submit button - let normal flow continue
            // Flow: Validation → Tokenization (mocked) → Submit (NO BIN lookup for ACH)
              console.log("🚀 Triggering submit button - running ACH flow (no BIN lookup should occur)...");
              $(".submitBtn").trigger("click");
          });

          // ==================== BIN Lookup Test Buttons (Production UX) ====================

          // Test Credit Card (Mock - returns CREDIT)
          $("body").on("click", ".testBinLookupCredit", async function()
          {
            console.log("\n=== TEST: Credit Card ===");

            // Generate mock payment key packet (Layer 1 mock)
            let mockTokenResult = {
              result: "success",
              key: "mock_key_credit_123",
              number: "311338xxxxxx1234",  // Amex BIN that returns "credit"
              cardtype: "Amex"
            };

            // Extract BIN
            let bin = extractBinFromTokenization(mockTokenResult.number);
            console.log("Mock BIN:", bin);

            // Perform BIN lookup (will hit real API unless backend has testing mode)
            let binLookup = await performBinLookupWithRetry(bin);
            console.log("API response:", binLookup);

            // Store for validation
            binLookupPerformed = true;
            binLookupDetectedType = binLookup.result === "success" ? binLookup.card_type : null;
            lastLookedUpCardNumber = mockTokenResult.number;
            lastLookedUpBIN = bin;

            // Display result (production UX)
            await handleBinLookupResult(binLookup);
          });

          // Test Debit Card (Mock - returns DEBIT)
          $("body").on("click", ".testBinLookupDebit", async function()
          {
            console.log("\n=== TEST: Debit Card ===");

            let mockTokenResult = {
              result: "success",
              key: "mock_key_debit_456",
              number: "485427xxxxxx5678",  // Visa BIN that returns "debit"
              cardtype: "Visa"
            };

            let bin = extractBinFromTokenization(mockTokenResult.number);
            console.log("Mock BIN:", bin);

            let binLookup = await performBinLookupWithRetry(bin);
            console.log("API response:", binLookup);

            binLookupPerformed = true;
            binLookupDetectedType = binLookup.result === "success" ? binLookup.card_type : null;
            lastLookedUpCardNumber = mockTokenResult.number;
            lastLookedUpBIN = bin;

            await handleBinLookupResult(binLookup);
          });

          // Test Prepaid Card (Mock prepaid response)
          $("body").on("click", ".testBinLookupPrepaid", async function()
          {
            console.log("\n=== TEST: Prepaid Card ===");

            let mockTokenResult = {
              result: "success",
              key: "mock_key_prepaid_789",
              number: "999999xxxxxx9999",  // Mock prepaid BIN
              cardtype: "Visa"
            };

            let bin = "999999";  // Mock prepaid BIN

            // Create mock prepaid response directly (no backend call)
            let binLookup = {
              result: "success",
              card_type: "prepaid",
              brand: "visa"
            };

            binLookupPerformed = true;
            binLookupDetectedType = binLookup.card_type;
            lastLookedUpCardNumber = mockTokenResult.number;
            lastLookedUpBIN = bin;

            await handleBinLookupResult(binLookup);
          });

          // Test Mismatch (Debit card, Credit selected)
          $("body").on("click", ".testBinLookupMismatch", async function()
          {
            console.log("\n=== TEST: Mismatch (Debit card, Credit selected) ===");

            // Force credit selection
            let originalSelection = gSelectedPaymentMethod;
            gSelectedPaymentMethod = "credit";

            let mockTokenResult = {
              result: "success",
              key: "mock_key_mismatch_999",
              number: "485427xxxxxx1111",  // Debit BIN
              cardtype: "Visa"
            };

            let bin = extractBinFromTokenization(mockTokenResult.number);
            let binLookup = await performBinLookupWithRetry(bin);

            binLookupPerformed = true;
            binLookupDetectedType = binLookup.result === "success" ? binLookup.card_type : null;
            lastLookedUpCardNumber = mockTokenResult.number;
            lastLookedUpBIN = bin;

            await handleBinLookupResult(binLookup);

            // Note: Don't restore original selection - let user see auto-switch effect
          });
        }

        else if(getParameterByName("testing") == "cypress") 
        {
          if(getParameterByName("autofill") == "true")
          {
            autoFill();
          }
        }   

        // detect safariAutoFill parameter (used for apple pay testing)
        if(getParameterByName("safariautofill") == "true" || getParameterByName("safariAutoFill") == "true")
        {
          safariAutoFill();
        }
      }
      // end initTestValues()

      // Show/Hide currency label
      initCurrencyLabelDisplay = function()
      {
        if(showCurrencyLabel && currencyLabel != "")
        {
          $(".currencyLabel").text(currencyLabel);
          $(".currencyLabel").show();
          $(".currencyAgreementCtr").show();
        }
        else
        { 
          $(".currencyAgreementCtr").hide();
        }  
      }

      // Show which CCs are allowed
      initCcsAllowDisplay = function() 
      {
        if(ccsAllowed.length < 4)
        {
          joinStr = [];
          
          ccsAllowed.forEach(function(element) 
          {
            joinStr.push(capitalize(element)); 
            $(".cardPic[card='" + element + "']").show();
          });
          
          $(".ccsAllowed").html("<i>(<b>" + joinStr.join("/") + "</b> Only)</i>");  
        }
        else
        {
          ccsAllowed.forEach(function(element) 
          {
            $(".cardPic[card='" + element + "']").show();
          });    
        }
      }
      
      // Set masks for specific fields
      setMasksForFields = function()
      {
        try
        {
                      $(".phone-mask").mask("(999) 999-9999", {placeholder: " ", autoclear: false});
          
          $(".cc-mask").mask("9999-9999-9999-9999", {placeholder: " ", autoclear: false});
          $(".debit-mask").mask("9999-9999-9999-9999", {placeholder: " ", autoclear: false});
          // $(".exp-mask").mask("99/99", {placeholder: " ", autoclear: false});
          $(".exp-mask").mask("9999", {placeholder: " ", autoclear: false});
          $(".cvv-mask").mask("9999", {placeholder: " ", autoclear: false});  

          // set the zip/postal code masking based on whether country is CA or USA (default)
                      $(".zip-mask").mask("99999", {placeholder: " ", autoclear: false});  
                  }
        catch (err)
        {
          console.log('there was an error applying masks to fields');
        }  
      }

      logTrace1 = function()
      {
        // perfectly error logged
        // Log Trace 1
        if(TRACE)
        {
          try
          { 
            // if we're testing edgecase 2, make trace 1 fail
            if(edgecase != "" && edgecase == "2")
            {
              null.toLowerCase();  
            }

            // ============================ TRACE START ============================
            var logPostData = "";
            var logClientData = `&client=${qbclient}`;
            var logSequenceData = "&sequence=PageLoad (1/3)";
            var sequencenumData = "&sequencenum=1";
            var logFullUrlData = `&fullUrl=${encodeURIComponent(window.location.href)}`;
            var srData = `&sr=${getParameterByName("sr")}`;
            var traceHashData = `&traceHash=${traceHash}`;
            logPostData += logClientData + logSequenceData + sequencenumData + srData + traceHashData + logFullUrlData;

            $.ajax(
            { 
              url: `${hostUrl}/public/log_cp_params_v2`, type: "GET", data: logPostData, dataType: "jsonp",
              success: function(data, status, xhr)
              {
                if(data.result == "success")
                {
                  console.log("Trace 1 logged.");
                }
                else
                {
                  console.log(`Error Logging Trace1 (in ajax success) - ${xhr.status}, ${status}, ${errorThrown}.  Sending Email.`);
                  // works perfectly!
                  var subject = "CP Error (re-arch) - Error logging Trace 1";
                  var message = '<b>Error in Trace1 (inside ajax success)</b><br>';
                  message += `data: ${data}<br><br>`;
                  message += '<b>Page URL:</b><br><br>';
                  message += window.location.toString();
                  message += '<br><br>';
                  message += `<b>TraceHash:</b> ${traceHash}`;
                  message += '<br><br>';
                  message += `error details - xhr.status: ${xhr.status}, status: ${status}, errorThrown: ${errorThrown}`;
                  message += browserAndOsInfo;
                  send_email(subject, message);  
                }
              },
              error: function(xhr, status, errorThrown)
              {
                if(xhr.status != 200)
                {
                  console.log(`Error Logging Trace1 (in ajax error) - ${xhr.status}, ${status}, ${errorThrown}.  Sending Email.`);
                  // works perfectly!
                  var subject = "CP Error (re-arch) - Error logging Trace 1";
                  var message = '<b>Error in Trace1 (inside ajax error)</b>';
                  message += '<br><br>';
                  message += `<b>Page URL: </b>${window.location.toString()}`;
                  message += '<br><br>';
                  message += `<b>TraceHash:</b> ${traceHash}`;
                  message += '<br><br>';
                  message += browserAndOsInfo;
                  message += '<br><br>';
                  message += `Status: ${xhr.status}`;
                  message += `<br>StatusText: ${xhr.statusText}`;
                  message += `<br>ErrorThrown: ${errorThrown}`;
                  send_email(subject, message);  
                }
              }   
            });
            // ============================ TRACE END ============================  
          }
          catch (err)
          {
            // Works perfectly
            var subject = "CP Error (re-arch) - Error logging Trace 1";
            var message = '<b>Error in Trace1 BEFORE ajax call (in catch block)</b> <br><br>';
            message += `Page URL: ${window.location.toString()} <br><br>`;
            message += `<b>TraceHash:</b> ${traceHash} <br><br>`;
            message += `${browserAndOsInfo} <br><br>`;
            message += `<b>Error message:</b> ${err}`;
            send_email(subject, message);  
          }
        }
      }

      /* Apple Pay Automated Tests - need to create a custom suite because Cypress doesn't support webkit fully enough where Apple pay displays
        and therefore we cannot write cypress tests to test apple pay stuff.
      
        Test cases:
        - Apple pay should only be active if BOTH $apiKey and $applePayPublicKey are set and not ""
          -> this one i've tested manually since it's easy.

        - Provided that is the case

          apple pay displays
          - The apple pay payment option should be visible - Done
          - the apple pay submit button should not be visible - Done

          selecting apple pay works
          - it hides cc-ctr and check-ctr - Done
          - it hides the regular submit button - Done
          - it shows the apple pay submit button - Done

          clicking apple pay submit works
          - it doesn't submit form if required fields are not filled out - Done
          - it DOES submit the form if all the required fields are filled in 
            - left for now since it throws an error, and intercepting console.error isnt working
            -> DO MANUALLY, as Final Q/A check
      */
      runApplePayTests = function()
      {
        if(getParameterByName("runApplePayTests") == "true")
        {
          // ----------------------------- HELPER FUNCTIONS ---------------------------------

          const waitFor = (seconds) => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve('Promise resolved after 1 second');
              }, seconds*1000);
            });
          };

          const start = (txt) => {
            console.log(`\n%cTEST: ${txt}%c`, "color: blue;", "");
          }

          const pass = (txt) => {
            console.log(`  > %c${txt}: PASS%c`, "color: green;", "");
          }

          const fail = (txt) => {
            console.log(`  > %c${txt}: FAIL%c`, "color: red;", "");
          }

          const verdict = (testDesc, anyAssertionFailed) => {
            if(!anyAssertionFailed)
            {
              console.log(`%c  ==> ${testDesc}: PASSED%c`, "color: green; font-weight:bold", "");
            }
            else {
              console.log(`%c  ==> ${testDesc}: FAILED%c`, "color: red; font-weight:bold", "");
            }
          }

          const subInfo = (txt) => {
            console.log(`\n  %c${txt}%c`, "color: #222; font-style:italic", "");
          }


          // ----------------------------- TEST SPECS ---------------------------------
          // 1 - Apple Pay payment option is visible
          const test1 = async (testDesc) => 
          {
            let anyAssertionFailed = false;
            start(testDesc);

            // 1 - Apple Pay payment option is visible
            if($(".applePayPaymentType").length == 2)
            {
              pass("Apple Pay payment option exists?");
            }
            else 
            {
              fail("Apple Pay payment option exists?");
              anyAssertionFailed = true;
            }

            if($(".applePayPaymentType:visible").length == 1)
            {
              pass("Apple Pay payment option is visible?");
            }
            else 
            {
              fail("Apple Pay payment option is visible?");
              anyAssertionFailed = true;
            }

            verdict(testDesc, anyAssertionFailed);
          }

          // 2 - The apple pay submit button should exist but not be visible
          const test2 = async (testDesc) => 
          {
            let anyAssertionFailed = false;
            start(testDesc);

            if($(".applePaySubmitBtn").length == 1)
            {
              pass("Apple Pay Submit Button exists?");
            }
            else {
              fail("Apple Pay Submit Button exists?");
              anyAssertionFailed = true;
            }

            if($(".applePaySubmitBtn:visible").length == 0)
            {
              pass("Apple Pay Submit Button should NOT be visible?");
            }
            else {
              fail("Apple Pay Submit Button should NOT be visible?");
              anyAssertionFailed = true;
            }

            verdict(testDesc, anyAssertionFailed);
          }

          // 3 - selecting apple pay works
          //   - it hides cc-ctr and check-ctr
          //   - it hides the regular submit button
          //   - it shows the apple pay submit button
          const test3 = async (testDesc) => 
          {
            let anyAssertionFailed = false;
            start(testDesc);


            // check that CC is selected, initially
            subInfo("Initially");
            if($(".ccPaymentType.paymentType-selected:visible").length == 1)
            {
              pass("CC selected");
            }
            else {
              fail("CC selected");
              anyAssertionFailed = true;
            }

            // and that credit-ctr is visible
            // subInfo("and credit-ctr is visible");
            if($(".credit-ctr:visible").length == 1)
            {
              pass("credit-ctr visible"); 
            }
            else {
              fail("credit-ctr visible"); 
              anyAssertionFailed = true;
            }

            // the regular submit button should be visible
            // subInfo("regular submit button should be visible");
            if($(".regularSubmitBtn:visible").length == 1)
            {
              pass("Regular submitBtn should be visible");
            }
            else {
              fail("Regular submitBtn should be visible");
              anyAssertionFailed = true;
            }

            // click the apple pay payment option 
            subInfo("Click the Apple Pay payment option");
            $(".applePayPaymentType:visible").click();
            await waitFor(1);

            // the apple pay submit button should be visible
            // subInfo("the apple pay submit button should be visible");
            if($(".applePaySubmitBtn:visible").length == 1)
            {
              pass("Apple Pay Submit Button should be visible?");
            }
            else {
              fail("Apple Pay Submit Button should be visible?");
              anyAssertionFailed = true;
            }

            // the credit-ctr should NOT be visible 
            // subInfo("the credit-ctr should NOT be visible");
            if($(".credit-ctr:visible").length == 0)
            {
              pass("Credit-ctr should NOT be visible");
            }
            else {
              fail("Credit-ctr should NOT be visible");
              anyAssertionFailed = true;
            }


            subInfo("Click the ACH/Check payment option");
            // clicking check should make the check-ctr visible and select the check payment option
            // click the check payment option 
            $(".checkPaymentType:visible").click();
            await waitFor(1);

            if($(".check-ctr:visible").length == 1)
            {
              pass("Check-ctr should be visible");
            }
            else {
              fail("Check-ctr should be visible");
              anyAssertionFailed = true;
            }

            // the regular submit button should be visible
            if($(".regularSubmitBtn:visible").length == 1)
            {
              pass("Regular submitBtn should be visible");
            }
            else {
              fail("Regular submitBtn should be visible");
              anyAssertionFailed = true;
            }

            // the apple pay submit button should NOT be visible   
            if($(".applePaySubmitBtn:visible").length == 0)
            {
              pass("Apple Pay Submit Button should NOT be visible?");
            }
            else {
              fail("Apple Pay Submit Button should NOT be visible?");
              anyAssertionFailed = true;
            }       


            verdict(testDesc, anyAssertionFailed);
          }


          // 4 - clicking submit should NOT work if all required fields are not filled in
          const test4 = async (testDesc) => 
          {
            let anyAssertionFailed = false;
            start(testDesc);


            // click the apple pay payment option 
            subInfo("Click the Apple Pay payment option");
            $(".applePayPaymentType:visible").click();
            await waitFor(1);


            // click the apple pay payment option 
            subInfo("Click the Apple Pay Submit button");
            $(".applePaySubmitBtn:visible").click();
            await waitFor(1);

            // check that CC is selected, initially
            
            if($(".submissionErrors:visible").length == 1)
            {
              pass("shows Submission errors");
            }
            else {
              fail("shows Submission errors");
              anyAssertionFailed = true;
            }

            if($(".submissionErrors:visible").text() == "Please fill in the required fields")
            {
              pass("Show error 'Please fill in the required fields'");
            }
            else {
              fail("Show error 'Please fill in the required fields'");
              anyAssertionFailed = true;
            }


            verdict(testDesc, anyAssertionFailed);
          }


          // 5 - processing payment with all fields filled in DOES submit
          // not able to test this because apple pay needs to be initiated by the user
          // and while I though intercepting the console.error would be a good solution, it's not
          // so leave this for now
          // const test5 = async (testDesc) => 
          // {
          //   let anyAssertionFailed = false;
          //   start(testDesc);


          //   autoFill();
          //   await autoSelectCustomer();

          //   // click the apple pay payment option 
          //   subInfo("Click the Customer");
          //   $(".customerData li.item:first").click();
          //   await waitFor(1);

          //   // click the apple pay payment option 
          //   subInfo("Click the Apple Pay payment option");
          //   $(".applePayPaymentType:visible").click();
          //   await waitFor(1);

          //   autoCheck();

          //   // click the apple pay payment option 
          //   subInfo("Click the Apple Pay Submit button");
          //   $(".applePaySubmitBtn:visible").click();
          //   await waitFor(1);

          //   // // check that CC is selected, initially
            
          //   // if($(".submissionErrors:visible").length == 1)
          //   // {
          //   //   pass("shows Submission errors");
          //   // }
          //   // else {
          //   //   fail("shows Submission errors");
          //   //   anyAssertionFailed = true;
          //   // }

          //   // if($(".submissionErrors:visible").text() == "Please fill in the required fields")
          //   // {
          //   //   pass("Show error 'Please fill in the required fields'");
          //   // }
          //   // else {
          //   //   fail("Show error 'Please fill in the required fields'");
          //   //   anyAssertionFailed = true;
          //   // }


          //   verdict(testDesc, anyAssertionFailed);
          // }

          const runTests = async () => 
          {
            await console.log("\n\n======= STARTING Apple Pay Automated Tests =======");
            
            await waitFor(5);
            await test1("Apple Pay payment option is visible");
            
            await waitFor(1);
            await test2("The apple pay submit button should exist but not be visible");
            
            await waitFor(1);
            await test3("Selecting apple pay works");
            
            await waitFor(1);
            await test4("Clicking submit should NOT work if all required fields are not filled in");
            
            await waitFor(1);
            // await test5("Processing payment with all fields filled in DOES submit");

            await console.log("\n -- Apple Pay Automated Tests Complete --");
          };

          runTests();
        }  
      }

      // given 'credit' or 'check', selects the payment option
      function selectPaymentOption(val)
      {
        console.log('selecting payment method', val);
        if(val == "credit"){$(".ccPaymentType").click()};
        if(val == "check"){$(".checkPaymentType").click()};
      }
      
      /* Initially set the payment method chosen
        the logics are copied over from:
        - $(".ccPaymentType").on("click"
        - $(".checkPaymentType").on("click"
        except, i'm not calling the calcAmount
        basically I needed a function that would set the payment type without calling calcAmount
        why because the payment method needs to be set to use calcAmount
        BUT for the ?amt= case, the amount is set AFTER we set the payment method
        so if we call calcAmount in the initial payment method setting code, the amount wouldn't be set yet
        so it won't work.
        At the same time we DO need to call calcAmount each time the payment method changes, so i'm keeping the 
        event handlers
      */
      var setInitialPaymentMethod = function(payType)
      {
        console.log("---- Payment Method set to ", payType);
        if(payType === "credit")
        {
          gSelectedPaymentMethod = "credit";  

          $(".card-fields-ctr").show();
          $(".credit-ctr").show();

          $(".check-ctr").hide();
          $(".debit-ctr").hide();

          // apple pay
          $(".applePay-ctr").hide();
          $(".applePaySubmitBtn").hide();
          $(".regularSubmitBtn").show();

          $("[name='UMcommand']").val("cc:sale");

          $(".paymentType").removeClass("paymentType-selected");
          $(".ccPaymentType").addClass("paymentType-selected"); 

          $("[name='UMcustom6']").val("credit card");           
        }
        else if(payType === "check")
        {
          gSelectedPaymentMethod = "check";  

          $(".card-fields-ctr").hide();
          $(".credit-ctr").hide();
          $(".debit-ctr").hide();
          $(".check-ctr").show();

          // apple pay
          $(".applePay-ctr").hide();
          $(".applePaySubmitBtn").hide();
          $(".regularSubmitBtn").show();
            
          $("[name='UMcommand']").val("check:sale");

          $(".paymentType").removeClass("paymentType-selected");
          $(".checkPaymentType").addClass("paymentType-selected");

          $("[name='UMcustom6']").val("ach/check");
        }
        // new enabling-debit
        else if(payType === "debit")
        {
          gSelectedPaymentMethod = "debit";  

          $(".card-fields-ctr").show();   // ← Show the shared card fields
          $(".credit-ctr").hide();
          $(".check-ctr").hide();
          $(".debit-ctr").show();

          // apple pay
          $(".applePay-ctr").hide();
          $(".applePaySubmitBtn").hide();
          $(".regularSubmitBtn").show();
            
          $("[name='UMcommand']").val("cc:sale");

          $(".paymentType").removeClass("paymentType-selected");
          $(".debitPaymentType").addClass("paymentType-selected");

          $("[name='UMcustom6']").val("debit");
        }
      }

      // Populates what the testing label displays
      function showTestingInfo() 
      {
        if(edgecase != "" && edgecase != undefined) 
        {
          if(edgecase == "2") {
            edgeCaseStr = "ec2";
          }
          else {
           edgeCaseStr = edgecase; 
          }

          if(casenum == "") {
            caseStr = "case1";
          }
          else {
            caseStr = `case${casenum}`;  
          }

          let testingInfo = testingCases[edgeCaseStr][caseStr];
          $(".testingInfo").text(testingInfo);
          $(".testingInfo").show();
        }
      }

      initSurchargeCheckBoxDisplay = function()
      {
        // [exec-stage3]
        // INITIALLY Show/Hide the processing fee checkboxes based on whether $applyProcessFee is set to "true" or "false"
        // [jan27-consider]
        if(gApplyProcessingFee)
        {
          // if we're using the fee table, hide the checkboxes since they'll be conditionally shown (based on amount)
          if(useFeeTable)
          {
            $(".processingFeeCtr").hide();   
            $(".processingFeeCtrApplePay").hide(); // apple pay  
          }
          // if we'r enot using the fee table, then show the checkboxes if the fee is non-zero, otherwise don't show them
          else 
          {
            if(gCcFeePercentage != 0)
            {
              $(".processingFeeCtr").show();  
              $(".processingFeeCtrApplePay").show(); // apple pay   
            }
            else 
            {
              $(".processingFeeCtr").hide();   
              $(".processingFeeCtrApplePay").hide(); // apple pay     
            }
          }

          if(useAchFeeTable)
          {
            $(".eCheckProcessingFeeCtr").hide();
          }
          // if we'r enot using the fee table, then show the checkboxes if the fee is non-zero, otherwise don't show them
          else 
          {
            if(gECheckFee != 0)
            {
              $(".eCheckProcessingFeeCtr").show();
            }
            else 
            {
              $(".eCheckProcessingFeeCtr").hide();
            }
          }
        }
        // and if applyProcessFee = "false", then don't show the checkboxes for Credit or Check/ACH
        // CONFIRMED - applyProcessFee is the MAIN toggle that control whether ANY processing fee is applied or not.
        else
        {
          $(".processingFeeCtr").hide();  
          $(".processingFeeCtrApplePay").hide(); // apple pay 
          $(".eCheckProcessingFeeCtr").hide();
        }
      }

      // handle ?debug=true
      processDebugParam = function()
      {
        debug = getParameterByName("debug");
        if(debug == "true")
        {
          $("[name='UMbillfname']").val("Varun");
          $("[name='UMbilllname']").val("Aggarwal");
          $("[name='UMbillphone']").val("9176846443");
          $("[name='UMemail']").val("varun@freedommerchants.com");
          $("[name='UMbillstreet']").val("123 Front St");
          $("[name='UMbillcity']").val("New York");
          $("[name='UMbillstate']").val("NY");
          $("[name='UMbillzip']").val("10013");
        }  
      }

      // handle ?inum= | ?invoicenum=
      processInumParam = function()
      {
        // set invoice number or show invoice text field
        invoice = getParameterByNames("invoicenum", "inum");
        // if inum is NOT passed
        // remove the second check because "0abc" parseFloats to 0
        // meany any invoice number beginning with a 0 will be ignored..
        // if(invoice == "" || parseFloat(invoice) == 0)
        if(invoice === "")
        {
          $("#invoiceField").show();
          $(".invoice").hide();
        }
        // if inum IS passed
        else
        {
          $("#invoiceField").hide(); 
          invoice = pad(invoice, 6);
          $(".invoice").text(invoice);
          // $("input[name='UMinvoice']").val(invoice);
          setTruthField("UMinvoice", invoice);
          $(".invoice").show();
        }  
      }
      
      // handle ?desc=
      processDescParam = function()
      {
        desc = getParameterByName("desc");
        if(desc == "")
        {
          desc = getParameterByName("description");
          if(desc == "")
          {
            // do nothing..there is a default description
          }
          else
          {
            $(".desc").text(desc);
            // $("[name='UMdescription']").val(desc);
            setTruthField("UMdescription", desc)
          }
        }
        else
        {
          $(".desc").text(desc);
          // $("[name='UMdescription']").val(desc);
          setTruthField("UMdescription", desc)
        }
      }

      invoice_amount_result = function(data)
      {
        $(".loading").hide();

        if(allowPartialPayments)
        {
          if(data["result"] == "success")
          {
            // new - July 20, 2022
            gInvoiceExchangeRate = data["exchange_rate"];
            // new - July 20, 2022

            $(".amountErrors").text("");
            balance = parseFloat(data["balance"]).toFixed(2);

            if(balance > 0)
            {
              gOriginalInvoiceAmount = parseFloat(data["amount"]);
              $(".totalAmt").text("$" + gOriginalInvoiceAmount.toFixed(2));
              $(".balance").text("$" + balance);

              $(".invoiceAmountWidget").show();
              
              // $("input[name='UMamount']").val(balance);  
              setTruthField("UMamount", balance);  

              // ======================================= PROCESSING FEE CODE 1/3 - END ==================================== -->
              $("#amountField").val(balance);
              calcAmount();
              // =============================================== PROCESSING FEE CODE 1/3 - END ================================ -->

              // Fix 8
              var invoiceCustomerId = data["invoice_customer_id"]["value"];
              customerFound = true;
              customerId = invoiceCustomerId

              $("#customerFound").val(customerFound);
              $("#customerId").val(customerId);
            }
            //
            else
            {
              $(".amountErrors").html("Looks like this invoice has already been paid. <br><br>Balance: $" + balance);
              // $("input[name='UMamount']").val(balance);  
              setTruthField("UMamount", balance);  
            }
          }
          // Result = Error
          else
          {
            $(".amountErrors").text("Error: " + data.msg + ". Please check that the invoice number you have provided matches the QuickBooks Invoice you received.");
          }
        }
        else
        {
          if(data["result"] == "success")
          {
            // new - July 20, 2022
            gInvoiceExchangeRate = data["exchange_rate"];
            // new - July 20, 2022

            $(".amountErrors").text("");
            balance = parseFloat(data["balance"]).toFixed(2);

            if(balance > 0)
            {
              gOriginalInvoiceAmount = parseFloat(data["amount"]);
              var amt = parseFloat(data["balance"]);
              $(".amt").text("$" + parseFloat(amt).toFixed(2));
              
              // $("input[name='UMamount']").val( parseFloat(amt).toFixed(2) );
              setTruthField("UMamount", parseFloat(amt).toFixed(2));  

              $(".amt").show();
              $("#amountField").val(amt);
              $("#amountField").hide(); 
              calcAmount();

              // Fix 8
              var invoiceCustomerId = data["invoice_customer_id"]["value"];
              customerFound = true;
              customerId = invoiceCustomerId

              $("#customerFound").val(customerFound);
              $("#customerId").val(customerId);
            }
            //
            else
            {
              $(".amountErrors").html("Looks like this invoice has already been paid. <br><br>Balance: $" + balance);
              // $("input[name='UMamount']").val(balance);  
              setTruthField("UMamount", balance);  
            }
          }
          else
          {
            $(".amountErrors").text("Error: " + data.msg + ". Please check that the invoice number you have provided matches the QuickBooks Invoice you received.");
          }
        }
      }

      determinePageMode = function() 
      {
        console.log("checking for page mode (?amt= | ?qbi=true&inum=)");
        amt = getParameterByName("amt");
        amt = cleanAmount(amt); // removes , $ - any any other invalid characters

        // ?amt= was specified AND it's a positive/valid number
        if(amt != "" && parseFloat(amt) > 0)
        {
          console.log("?amt= detected.  setting pageMode to 'specifiedAmount'..");
          pageMode = "specifiedAmount";
        }
        // check to see if it's an invoice payment
        else 
        {
          invoice = getParameterByNames("invoicenum", "inum");
          qbinvoice = getParameterByNames("qbinvoice", "qbi");
          if(qbinvoice === "true" && invoice != "")
          {
            pageMode = "invoicePayment";
          }
          else 
          {
            if(qbinvoice === "true" && invoice === "")
            {
              pageMode = "error-missing-invoice-number";
            }
            // invoice provided but qbi=true not provided
            else if(invoice != "" && qbinvoice == "")
            {
              pageMode = "error-missing-qbinvoice-parameter";
            }  
          }
        }
        $("#pageMode").val(pageMode);
      }

      // --------- Helper Functions - START ------------
      // Note: setCustomerFoundAndId is now defined globally (outside document ready)
      // so it's available immediately when the script loads

      resetNameLookup = function() 
      {
        // reset the customer Name lookup to it's initial state
        $(".customerData").empty(); 
        $(".customerLoading").hide(); 
        
        $(".customerErrors").text("");
        $(".customerErrors").hide();

        $(".customerSuccess").html("");
        $(".customerSuccess").hide();


        // reset the state variables
        // customerFound = false;
        // customerId = undefined;
        // $("#customerFound").val(customerFound);
        // $("#customerId").val(customerId);
        setCustomerFoundAndId(false, undefined)

        // reset main variable that represents whether a customer has been chosen or not
        customerSelectionMethod = null;

          
        // refinment-2
        $("#fName").prop("readonly", false);
        $("#lName").prop("readonly", false);
        
        $("#customerNameLookupBtn").attr("disabled", false);
        console.log('showing button...');
        $("#customerNameLookupBtn").show();

        $(".customerPreSelectionSuccess").hide();

        // Use setTruthField to trigger change events (for Auth.net invalidation)
        setTruthField("UMbillfname", "");
        setTruthField("UMbilllname", "");
        $("input[name='UMname']").val(`${$("#fName").val()} ${$("#lName").val()}`);

        // highlightElement('.customerIdLookupSection');
        // pulseElementTwice('.customerIdLookupSection');
      }

      $("body").on("click", "#resetNameLookup", function() 
      {
        resetNameLookup();
      });

      $("body").on("click", "#resetNameLookupAndTryIdLookup", function() 
      {
        resetNameLookup();
      });

      // ======================= Customer ID Lookup Feature JS - START =======================
        
      // ======================= Customer ID Lookup Feature JS - END =======================

      // New helper function to handle automatic customer lookup from URL
      function autoLookupCustomerFromUrl() {
        // Get customer ID from URL with case-insensitive parameter names
        let customerId = getParameterByNamesAnyCase("custid", "customerid");
        
        if (customerId && customerId.trim() !== "") {
          console.log("Customer ID found in URL:", customerId, "- triggering auto-lookup");
          
          // Pre-fill the customer ID field if it exists
          if ($("#customerIdInput").length) {
            $("#customerIdInput").val(customerId.trim());
          }
          
          // Automatically trigger the lookup
          lookupCustomerById(customerId.trim());
        }
      }

      processPageMode = function() 
      {
        if(pageMode === "openAmount")
        {
          $("#amountField").show();
          $(".amt").hide();

          // Check for customer ID in URL parameters for auto-lookup
          autoLookupCustomerFromUrl()
        }
        else if(pageMode === "specifiedAmount")
        {
          $("#amountField").hide(); 
          $("#amountField").val(amt);

          $(".amt").text("$" + parseFloat(amt).toFixed(2));
          $(".amt").show();
          
          console.log("\n\n----- amountField.val()", $("#amountField").val(), amt);
          calcAmount();

          // Check for customer ID in URL parameters for auto-lookup
          autoLookupCustomerFromUrl();
        }
        else if(pageMode === "invoicePayment")
        {
          // in invoice payment mode, the customer name lookup button should NOT be visible
          // later on, i'll add logic to actually auto-fill the first and last name from the invoice and disable them.
          $("#customerNameLookupBtn").hide();

          $("#amountField").hide();
          $(".loading").show();
          postData = "invoice=" + invoice;
          qb_url = `${hostUrl}/quickbooks/get_invoice_amount?callback=invoice_amount_result&client=${qbclient}`;
          
          if(qbclient != "")
          {
            if(stubGetInvoiceAmount) {
              let getInvoiceAmountTestCase = getParameterByName("getInvoiceAmountTestCase")

              if(getInvoiceAmountTestCase === "invalid-invoice-num")
              {
                invoice_amount_result({
                    "result": "error",
                    "msg": "no invoices found with the invoice number INV-0026asdasd provided",
                    "amount": 0
                })
              }
              else if(getInvoiceAmountTestCase === "valid-but-zero-balance")
              {
                invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"0.0","balance":"0.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              else if(getInvoiceAmountTestCase === "6-dollar-balance")
              {
                invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"6.0","balance":"6.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              else if(getInvoiceAmountTestCase === "11-dollar-balance")
              {
                invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"11.0","balance":"11.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});    
              }
              else if(getInvoiceAmountTestCase === "22-dollar-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"22.0","balance":"22.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              else if(getInvoiceAmountTestCase === "100-dollar-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"100.0","balance":"80.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // these are to test that the tier of the surcharge being applied is based on the ORIGINAL invoice amount, NOT the balance
              // all these cases should result in a 4% surcharge despite the balance amount being:
              // 4% tier
              else if(getInvoiceAmountTestCase === "100-original-80-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"100.0","balance":"80.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // 3% tier
              else if(getInvoiceAmountTestCase === "100-original-15-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"100.0","balance":"15.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // 2% tier
              else if(getInvoiceAmountTestCase === "100-original-8-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"100.0","balance":"8.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // 1% tier
              else if(getInvoiceAmountTestCase === "100-original-4-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"100.0","balance":"4.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              else if(getInvoiceAmountTestCase === "7-original-2-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"7.00","balance":"2.00","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              else if(getInvoiceAmountTestCase === "21-original-17-balance")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"21.00","balance":"17.00","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // tipping test
              else if(getInvoiceAmountTestCase === "18-original")
              {
               invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"18","balance":"18","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              }
              // else if(getInvoiceAmountTestCase.includes("-original-") && getInvoiceAmountTestCase.includes("-balance"))
              // {
              //   const match = getInvoiceAmountTestCase.match(/(\d+)-original-(\d+)-balance/);

              //   if (match) {
              //       const original = parseInt(match[1], 10);
              //       const balance = parseInt(match[2], 10);
              //       invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":original,"balance":balance,"exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});   
              //   } else {
              //       console.log("No match found");
              //   }
              // }
              else 
              {
                invoice_amount_result({"result":"success","msg":"found invoice, returning amount","amount":"10.0","balance":"10.0","exchange_rate":"1.0","currency":"USD","invoice_customer_id":{"value":"60","name":"Varun Aggarwal","type":null},"message_on_invoice":"Thank you for your business and have a great day!"});  
              }
            }
            else {
              $.ajax(
              {
                url: qb_url, 
                type: "GET", 
                jsonp: "invoice_amount_result", 
                data: postData, 
                dataType: "jsonp", 
                success: function(data, status, xhr){},
                error: function(xhr, status, errorThrown)
                {
                  //@@@
                  if(xhr.status != 200)
                  {
                    $(".amountErrors").text("Error retrieving invoice.  Please make sure you are connected to the internet, and try again");
                  }
                }, 
                timeout: 5000 // sets timeout to 5 seconds
              });    
            }
          }
        }
        else if(pageMode === "error-missing-invoice-number")
        {
          // show an error in place of the amount field
          $(".amountErrors").text("Error: invoice Number not provided");  
          $("#amountField").hide();
        }
        else if(pageMode === "error-missing-qbinvoice-parameter")
        {
          // show an error in place of the amount field
          $(".amountErrors").text("Error: invalid URL, missing qbinvoice/qbi paramater");  
          $("#amountField").hide(); 
        }
      }

      handleNonQboCustomers = function() {
        // alert('nonqbo');
        console.log('\n\n================ qbclient is', qbclient);
        if(qbclient === "")
        {
          // in invoice payment mode, the customer name lookup button should NOT be visible
          // later on, i'll add logic to actually auto-fill the first and last name from the invoice and disable them.
          $("#customerNameLookupBtn").hide();  
          console.log('hiding name lookup button');
        }
      }

      // ===================== RECURRING BILLING via URL Params ===================
      // -------------------- HELPER Functions ---------------------
      // Oct 2 before fixing to avoid UTC interrepatation of time
      function normalizeUmstart_v5(schedule, umstart, todayOverride = null) {
        if (!umstart || umstart.toLowerCase().trim() !== "next") return umstart;

        // const today = todayOverride instanceof Date ? todayOverride : new Date();
        const today = todayOverride ? (todayOverride instanceof Date ? todayOverride : new Date(todayOverride)) : new Date();

        let nextDate = new Date(today);

        switch (schedule.toLowerCase().trim()) {
          case "weekly":
            nextDate.setDate(today.getDate() + 7);
            break;
          case "biweekly":
            nextDate.setDate(today.getDate() + 14);
            break;
          case "monthly":
            nextDate.setMonth(today.getMonth() + 1);
            break;
          case "bimonthly":
            nextDate.setMonth(today.getMonth() + 2);
            break;
          case "quarterly":
            nextDate.setMonth(today.getMonth() + 3);
            break;
          case "biannually":
            nextDate.setMonth(today.getMonth() + 6);
            break;
          case "annually":
            nextDate.setFullYear(today.getFullYear() + 1);
            break;
          default:
            nextDate.setMonth(today.getMonth() + 1); // fallback
        }

        // return nextDate.toISOString().split("T")[0]; // format as YYYY-MM-DD
        // ✅ Use local-formatting instead of UTC ISO
        return formatDateLocal(nextDate);
      }

      function normalizeUmstart(schedule, umstart, todayOverride = null) 
      {
        // Return as-is if umstart is not "next"
        if (!umstart || umstart.toLowerCase().trim() !== "next") return umstart;

        // 🧠 Use local parsing to avoid UTC offset bugs
        let today;
        if (todayOverride) {
          if (todayOverride instanceof Date) {
            // Already a Date object
            today = todayOverride;
          } else {
            // Parse string as local date to avoid UTC issues
            today = parseDateAsLocal(todayOverride);
          }
        } else {
          // Default to system's current local date/time
          today = new Date();
        }

        // Clone the base date before modifying
        let nextDate = new Date(today);

        // 🔁 Calculate next date based on schedule
        switch (schedule.toLowerCase().trim()) {
          case "weekly":
            nextDate.setDate(today.getDate() + 7);
            break;
          case "biweekly":
            nextDate.setDate(today.getDate() + 14);
            break;
          case "monthly":
            nextDate.setMonth(today.getMonth() + 1);
            break;
          case "bimonthly":
            nextDate.setMonth(today.getMonth() + 2);
            break;
          case "quarterly":
            nextDate.setMonth(today.getMonth() + 3);
            break;
          case "biannually":
            nextDate.setMonth(today.getMonth() + 6);
            break;
          case "annually":
            nextDate.setFullYear(today.getFullYear() + 1);
            break;
          default:
            nextDate.setMonth(today.getMonth() + 1); // Default fallback
        }

        // 📆 Return as "YYYY-MM-DD" in local time
        return formatDateLocal(nextDate);
      }


      // used during generation of a human-friendly description of recurring schedule
      function formatStartDate(start) {
        if (!start || start.toLowerCase() === "next") return "next";

        // ✅ Safely parse YYYY-MM-DD string in local time
        const match = start.match(/^(\d{4})-(\d{2})-(\d{2})$/);
        if (!match) return start;

        const [_, year, month, day] = match.map(Number);
        const localDate = new Date(year, month - 1, day); // month is 0-based

        if (isNaN(localDate)) return start;

        return localDate.toLocaleDateString("en-US", {
          month: "short",
          day: "numeric",
          year: "numeric"
        });
      }


      function formatDateLocal(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      }

      function parseDateAsLocal(dateStr) {
        const [year, month, day] = dateStr.split('-').map(Number);
        return new Date(year, month - 1, day);  // Month is 0-based
      }

      // Human-readable frequency text
      function humanFrequency(freq) {
        const mapping = {
          daily: "Daily billing",
          weekly: "Weekly billing",
          biweekly: "Bi-weekly billing",
          monthly: "Monthly billing",
          bimonthly: "Bi-monthly billing",
          quarterly: "<b>Quarterly</b> billing",
          biannually: "Bi-annual billing",
          annually: "Annual billing"
        };

        const key = freq ? freq.toLowerCase() : "";
        return mapping[key] || `Recurring billing (${key})`;
      }

      // Generates a human-friendly description of a recurring schedule
      function generateRecurringScheduleDescription({ recurringAmount, frequency, numleft, startDate }) {
        const amountStr = `$${parseFloat(recurringAmount).toFixed(2)}`;

        // Normalize the UMstart value, especially if it's "next"
        const normalizedStart = normalizeUmstart(frequency, startDate, todayOverride);

        // Format the normalized start date (e.g., "Oct 9, 2025")
        const formattedStart = formatStartDate(normalizedStart);

        const freqText = humanFrequency(frequency);
        const normalizedNumLeft = (numleft || "").toString().trim();

        if (normalizedNumLeft === "" || normalizedNumLeft === "-1" || normalizedNumLeft === "*") {
          return `${freqText} of <b>${amountStr}</b> starting <b>${formattedStart}</b> (until cancelled)`;
        } else {
          return `${freqText} for <b>${normalizedNumLeft}</b> payments of <b>${amountStr}</b> starting <b>${formattedStart}</b>`;
        }
      }

      // Simple utility function to allow setting a input's value based on it's name
      const setInputValue = (name, value) => {
        const el = document.querySelector(`[name='${name}']`);
        if (el) el.value = value;
      };

      function resolveToday(todayOverride) {
        if (todayOverride) {
          return todayOverride instanceof Date ? todayOverride : parseDateAsLocal(todayOverride);
        }
        return new Date();
      }
      /*
        This is one of the CORE functions that makes everything work correctly
        our Interface supports 4 kinds of options for UMstart:
        - "next" - the next date based on frequency (now + week/biweek/month/bimonth/quarter/biannual/annual)
        - "first", "middle", "last" - (the 1st, 15th and last day of the next month)
        - integers 1-31 - Represent 1st to 31st of the following months - super easy way for a merchant to specify EXACT start date
        - specific date in yyyy-mm-dd format
        
        Given the start value and frequency this function:
        - validates the input, and returns errors if any
        - normalizes, i.e. converts input to yyyy-mm-dd dates as needed
        - caps dates to no later than 28th of a month (as required by ePay for monthly type schedules)
          -> and decides whether to show or hide the 'note', informing the user that the start date is different (capped) than the one they'd expect.
      */
      function validateStartDateInput(rawStart, frequency, todayOverride = null)
      {
        const errors = [];

        // handles both strings "2025-08-30" and Date objects - new Date("2025-08-30") automatically
        // const today = todayOverride instanceof Date ? todayOverride : new Date();
        // const today = todayOverride ? (todayOverride instanceof Date ? todayOverride : new Date(todayOverride)) : new Date();

        // corrected code
        // let today;
        // if (todayOverride) {
        //   today = todayOverride instanceof Date ? todayOverride : parseDateAsLocal(todayOverride);
        // } else {
        //   today = new Date();
        // }
        // updated to use utility function
        let today = resolveToday(todayOverride);

        const startLower = rawStart?.toString().trim().toLowerCase();

        // 1. Default to 'next' if nothing provided or explicitly 'next'
        if (!startLower || startLower === "next") {
          const freq = frequency?.toLowerCase();

          // handles both strings "2025-08-30" and Date objects - new Date("2025-08-30") automatically
          // const today = todayOverride instanceof Date ? todayOverride : new Date();
          // const today = todayOverride ? (todayOverride instanceof Date ? todayOverride : new Date(todayOverride)) : new Date();
          // corrected code
          // let today;
          // if (todayOverride) {
          //   today = todayOverride instanceof Date ? todayOverride : parseDateAsLocal(todayOverride);
          // } else {
          //   today = new Date();
          // }
          // updated to use utility function
          let today = resolveToday(todayOverride);

          // ✅ For weekly and biweekly, just return 'next'
          if (["weekly", "biweekly"].includes(freq)) {
            return {
              normalized: "next",   // Let the backend handle it
              showNote: false,
              errors: []
            };
          }

          // ✅ For monthly-style schedules, calculate next date and cap to 28 if needed
          let nextDate = new Date(today);

          switch (freq) {
            case "monthly":
              nextDate.setMonth(today.getMonth() + 1);
              break;
            case "bimonthly":
              nextDate.setMonth(today.getMonth() + 2);
              break;
            case "quarterly":
              nextDate.setMonth(today.getMonth() + 3);
              break;
            case "biannually":
              nextDate.setMonth(today.getMonth() + 6);
              break;
            case "annually":
              nextDate.setFullYear(today.getFullYear() + 1);
              break;
            default:
              // Fallback to monthly behavior
              nextDate.setMonth(today.getMonth() + 1);
              break;
          }

          // ✅ Cap the day to 28 if necessary
          const originalDay = nextDate.getDate();
          if (originalDay > 28) {
            nextDate.setDate(28);
            return {
              // normalized: nextDate.toISOString().slice(0, 10),
              normalized: formatDateLocal(nextDate),
              showNote: true, // Show note: capped to 28
              errors: []
            };
          }

          // ✅ No capping needed, safe to return
          return {
            // normalized: nextDate.toISOString().slice(0, 10),
            normalized: formatDateLocal(nextDate),
            showNote: false,
            errors: []
          };
        }


        // 2. Special keywords
        // ✅ What This Fixes & Handles
        // "first" → Always returns 1st of next month, no capping ever needed.
        // "middle" → Returns 15th of next month, also safe across all frequencies.
        // "last":
        //  - Returns the last day of next month.
        //  - For monthly-style frequencies, caps it to 28 and shows a warning note.
        //  - For weekly/biweekly, passes last day as-is (29/30/31 allowed).
        if (["first", "middle", "last"].includes(startLower)) {
          const year = today.getFullYear();
          const nextMonth = today.getMonth() + 1; // next month (0-indexed + 1)

          let day;
          let showNote = false;

          switch (startLower) {
            case "first":
              day = 1;
              break;

            case "middle":
              day = 15;
              break;

            case "last":
              const lastDay = new Date(year, nextMonth + 1, 0).getDate(); // last day of next month
              day = lastDay;

              // ❗ Always cap to 28 if it's a monthly-style frequency
              if (["monthly", "bimonthly", "quarterly", "biannually", "annually"].includes(frequency?.toLowerCase())) {
                if (day > 28) {
                  day = 28;
                  showNote = true;
                }
              }
              break;
          }

          // Create adjusted date
          const adjusted = new Date(year, nextMonth, day);

          return {
            // normalized: adjusted.toISOString().slice(0, 10),
            normalized: formatDateLocal(adjusted),
            showNote,
            errors: []
          };
        }


        // 3. Integer day of next month
        // ----------------------------------------
        // 🎯 Summary:
        // - Handles inputs like "15" or "31" as desired start date.
        // - For weekly/biweekly: any valid calendar date is allowed (no forced capping to 28).
        // - For monthly-style schedules: even if date is valid (e.g. 30th), we force-cap to 28 to avoid invalid ePay setups.
        // - Last day of the next month is respected for max day clamping.
        // ----------------------------------------
        const asInt = parseInt(startLower, 10);
        if (!isNaN(asInt)) 
        {
          if (asInt >= 1 && asInt <= 31) 
          {
            const year = today.getFullYear();
            const nextMonth = today.getMonth() + 1; // next month (0-indexed)

            // Get last day of next month
            const lastDayOfNextMonth = new Date(year, nextMonth + 1, 0).getDate();
            const clampedDay = Math.min(asInt, lastDayOfNextMonth);

            const rawDate = new Date(year, nextMonth, clampedDay);
            
            // old code, not needed
            // const normalized = rawDate.toISOString().slice(0, 10); // wrong - uses UTC conversion
            // const normalized = formatDateLocal(rawDate); // right - but still, the variable isn't needed

            const freq = frequency?.toLowerCase();
            const isMonthlyStyle = ["monthly", "bimonthly", "quarterly", "biannually", "annually"].includes(freq);
            const needsCapping = isMonthlyStyle && asInt > 28;

            const finalDay = isMonthlyStyle ? Math.min(clampedDay, 28) : clampedDay;
            const adjusted = new Date(year, nextMonth, finalDay);

            return {
              // normalized: adjusted.toISOString().slice(0, 10),
              normalized: formatDateLocal(adjusted),
              showNote: needsCapping,
              errors: []
            };
          }
        }


        // 4. Date format yyyy-mm-dd
        // ✅ Summary of Logic (for Section 4)
        // Accepts and parses ISO-formatted dates like "2025-10-29".
        // Rejects:
        //  - Invalid dates (e.g., 2025-02-30)
        //  - Dates in the past
        // For weekly/biweekly, accepts any valid date (1–31) and returns as-is.
        // For monthly-style schedules, caps any day > 28 to the 28th to avoid backend issues.
        // Returns showNote = true if the original day was capped.
        const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        if (dateRegex.test(startLower)) {
          // const parsed = new Date(startLower);
          const parsed = parseDateAsLocal(startLower);

          if (isNaN(parsed.getTime())) {
            errors.push("Invalid date format");
          } else if (parsed < today) {
            errors.push("Start date cannot be in the past");
          } else if (formatDateLocal(parsed) !== startLower) {
            errors.push("Malformed or non-existent calendar date");
          } else {
            // If valid date, process based on schedule
            const originalDay = parsed.getDate();
            const year = parsed.getFullYear();
            const month = parsed.getMonth(); // 0-indexed

            let finalDate = parsed;
            let showNote = false;

            // Cap day only for monthly-style frequencies
            if (
              ["monthly", "bimonthly", "quarterly", "biannually", "annually"].includes(frequency?.toLowerCase()) &&
              originalDay > 28
            ) {
              finalDate = new Date(year, month, 28);
              showNote = true;
            }

            return {
              // normalized: finalDate.toISOString().slice(0, 10),
              normalized: formatDateLocal(finalDate),
              showNote,
              errors: []
            };
          }

          return { normalized: "", showNote: false, errors };
        }

        // 5. Catch-all for completely invalid input
        return {
          normalized: "next",
          showNote: false,
          errors: ["Invalid value for start date"]
        };
      }


      // sets the HTML content for the recurring schedule
      // can be a description of a schedule
      // or an error, in case of invalid values and therefore an invalid schedule
      const displayRecurringInfo = (message, isError = false) => {
        const el = document.getElementById("recurring-info");
        if (!el) return;
        el.innerHTML = message;
        el.style.color = isError ? "red" : "green";
        el.style.display = "block";

        const el2 = document.getElementById("recurring-info2");
        if (!el2) return;
        el2.innerHTML = message;
        el2.style.color = isError ? "red" : "green";
        el2.style.display = "block";
      };
      // -------------------- HELPER Functions ---------------------
      

      // handle Interface #1 - $savePaymentDetails
      handleSavePaymentDetails = function() 
      {
        console.log("--- inside handleSavePaymentDetails");
        // let savePaymentDetails = $("#savePaymentDetails").val();

        // console.log("--- Save Payment Details 'change' fired");
        if($("#savePaymentDetails").is(":checked"))
        {
          $("[name='UMaddcustomer']").val("yes");  
          $("[name='UMcustom4']").val("Yes");    
          showRecurringInfo();
        }
        else
        {
          $("[name='UMaddcustomer']").val("no");  
          $("[name='UMcustom4']").val("No");  
          showRecurringInfo();
        }
      }

      // Interface #2 - Pre-set via $php variables
      handleRecurringPreset = function() 
      {
        console.log("--- inside handleRecurringPreset()");
        // if $umAddCustomer is set to 'yes'
        // if all variables are valid 
        // -> recurring billing active
        // -> show the membership section

        // if any variables are invalid
        // -> recurring billing not active - back to their default values
        // -> show the membership secion with errors
          
          console.log("\n -- $umAddCustomer not set or set to 'no'.  Setting UM variables to default")

          // if interface #1 is present, let it take presedence because $umAddCustomer is 'no'
          
          // If interface #1 isn't present, then proceed as normal below

          // set all values to default
          let umAddCustomer = "no";
          let recurringReceipt = "yes";

          let schedule = "disabled";
          let billAmount = 0;
          let numLeft = 0;
          let start = "next";

          setInputValue("UMaddcustomer", umAddCustomer); 
          setInputValue("UMrecurringreceipt", recurringReceipt); 
          
          setInputValue("UMschedule", schedule); 
          setInputValue("UMbillamount", billAmount); 
          setInputValue("UMnumleft", numLeft); 
          setInputValue("UMstart", start); 

          // don't show membership
          $("#subscription-section").hide();

          showRecurringInfo();
              } 

      // Interface #3 - URL Parameters 
      handleRecurringUrlParams = function() 
      {
        console.log("--- inside handleRecurringUrlParams()");
        // const validSchedules = ["daily", "weekly", "biweekly", "monthly", "bimonthly", "quarterly", "biannually", "annually"];
        const validSchedules = ["weekly", "biweekly", "monthly", "bimonthly", "quarterly", "biannually", "annually"];  // removing 'daily' for now

        // ------------- utility functions ----------------
        const formatCurrency = (num) => {
          return `$${parseFloat(num).toFixed(2)}`;
        };
        // -------------------------------------------------

        // These variables will hold the values.
        let recurringReceipt;
        let schedule;
        let billAmount;
        let numLeft = ""; // default to an invalid value;
        let start;

        let errors = [];

        // if the ?recurring doesn't exist or doesn't have the value 'true', then don't activate this interface
        let recurring = getParameterByName("recurring");
        if(recurring != "true") return;
        
        console.log("-- recurring param found and set to 'true', continuing with interface 3");
        // ============= overriding interfaces #1 (Save Payment Details), and #2 $php variables =================
        // 1. Explicitly set UMaddCustomer because interface #1 [handleSavePaymentInfo()] may set it to 'no'
        setInputValue("UMaddcustomer", "yes");

        // 2. Hide #savePaymentDetails
        $("#savePaymentDetailsSection").hide();

        // ========================= Read and validate each variable ============================
        
        // ---------------------- UMschedule -----------------------------
        const rawSchedule = getParamAnyCase("recurringSchedule", "recurringFrequency", "rschedule", "rfrequency");
        schedule = rawSchedule?.trim().toLowerCase();
        if (!schedule) {
          errors.push("Missing recurringSchedule");
          // defults to 'disabled'
        }
        else if(!validSchedules.includes(schedule))
        {
          errors.push("Invalid recurringSchedule"); 
          // defults to 'disabled'
        }
        else {
          setInputValue("UMschedule", schedule);
        }

        // ---------------------- UMnumleft -----------------------------
        // [To Do] - I should validate a MAX value based on frequency
        // for eg, if frequency is monthly and numleft=1000, that's 83 years
        // we should have a cap on it.
        // valid values are: * and > 0
        // everything else is invalid
        const rawNumLeft = getParamAnyCase("numRecurringPayments", "numRPayments", "numPayments", "rnum");
        const cleanedNumLeft = rawNumLeft ? rawNumLeft.trim() : "";
        if (!cleanedNumLeft) {
          errors.push("Missing number of payments");
          numLeft = 0;
        } else if (
          cleanedNumLeft !== "*" &&
          (!/^\d+$/.test(cleanedNumLeft) || parseInt(cleanedNumLeft, 10) <= 0)
        ) {
          errors.push(`Invalid number of payments: "${cleanedNumLeft}"`);
          numLeft = 0;
        } else {
          numLeft = cleanedNumLeft;
        }
        setInputValue("UMnumleft", numLeft);

        // ---------------------- UMbillamount -----------------------------
        // [to do] - should have an upper limit - will do later
        // valid valus are: > 0
        // everything else is invalid
        const rawAmount = getParamAnyCase("recurringAmount", "rAmount", "recurringAmt", "rAmt");
        let amount = rawAmount?.trim();
        if (!amount) 
        {
          errors.push("Missing recurringAmount");
          billAmount = 0;
          setInputValue("UMbillamount", billAmount);
        }
        else if(isNaN(amount) || parseFloat(amount) <= 0) 
        {
          errors.push("Invalid recurringAmount");
          billAmount = 0;
          setInputValue("UMbillamount", billAmount);
        }
        else {
          billAmount = amount;
          setInputValue("UMbillamount", parseFloat(billAmount).toFixed(2));
        }

        // ---------------------- UMstart -----------------------------
        // will document this later, but it allows TREMENDOUS Flexibility!
        const rawStart = getParamAnyCase("startDate", "recurringStart", "rStart");
        const { normalized: umStart, errors: startErrors, showNote } = validateStartDateInput(rawStart, schedule, todayOverride);

        // Update note visibility
        if (showNote) {
          $("#recurring-note").show();
        } else {
          $("#recurring-note").hide();
        }

        if (startErrors.length > 0) {
          errors.push(...startErrors);
          // default to 'next' - but invalid value will prevent the schedule from being created => good!
          start = "next";
        } else {
          start = umStart;
        } 
        setInputValue("UMstart", start);       

        // ---------------------- UMrecurringreceipt -----------------------------
        // if it's anything other than 'no', set it to 'yes'
        const rawShowRecurringReceipt = getParamAnyCase("showRecurringReceipt");
        if (rawShowRecurringReceipt === null) {
          // param not present → default to "yes"
          recurringReceipt = "yes";
        } else if (rawShowRecurringReceipt.toLowerCase() === "no") {
          // param explicitly "no" → set "no"
          recurringReceipt = "no";
        } else {
          // any other value (including "yes") → fallback to "yes"
          recurringReceipt = "yes";
        }

        setInputValue("UMrecurringreceipt", recurringReceipt);

        // ================= PROCESS THE VARIABLES ====================
        if(errors.length === 0) 
        {
          // Create a Billing Schedule
          gShouldHaveRecurringSchedule = true;

          // Save the Customer and Payment Method
          setInputValue("UMaddcustomer", "yes");
          setInputValue("UMrecurringreceipt", "yes");

          // Generate a human-readable description
          const summary = generateRecurringScheduleDescription(
          {
            recurringAmount: billAmount,
            frequency: schedule,
            numleft: numLeft,
            startDate: start
          });
          
          // Set the description
          displayRecurringInfo(`✅ ${summary}`);
        } 
        else 
        {
          // There were errors, so DON'T create a Billing Schedule
          gShouldHaveRecurringSchedule = false;
          
          // Good default value for UMschedule in case of errors
          setInputValue("UMschedule", "disabled");

          // we still DO want to save the customer to DB because recurring billing WAS intented, it just had some invalid values
          // -> This allows the merchant to easily create a billing schedule manually, without having to import the customer to DB and then manually add a payment method
          setInputValue("UMaddcustomer", "yes"); 

          // Set the description (error in this case)
          displayRecurringInfo(`❌ Recurring Billing Disabled: ${errors.join(", ")}`, true);
        }

        // display the membership / recurring billing section with a messages like:
        // - for all valid UM values, and therefore a valid recurring schedule: ✅ Monthly billing for 12 payments of $4.00 starting Oct 24, 2025
        // - for invalid values: ❌ Recurring Billing Disabled: Invalid recurringSchedule
        $("#subscription-section").show();

        // Show Recurring info in the console and the recurring dev UI
        showRecurringInfo();
      }
      // ------------------------------- Function Definitions - end ------------------------------------
      

      // JAN12 ------------------------------------ ALL the code above is common and NOT specific to gateway


      // ==============================================================================================   
      //                                          EVENT HANDLERS 
      // ==============================================================================================   
      
      // -------------------------------------- Payment Method Selection ------------------------------

      // gateway-specific
      $(".ccPaymentType").on("click", function()
      {
        gSelectedPaymentMethod = "credit";

        $(".card-fields-ctr").show();   // ← New line
        $(".credit-ctr").show();

        $(".check-ctr").hide();
        $(".debit-ctr").hide();

        // apple pay
        $(".applePay-ctr").hide();
        $(".applePaySubmitBtn").hide();
        $(".regularSubmitBtn").show();

        $("[name='UMcommand']").val("cc:sale");

        $(".paymentType").removeClass("paymentType-selected");
        $(".ccPaymentType").addClass("paymentType-selected");

        $("[name='UMcustom6']").val("credit card");

        // Set flag before calcAmount() to prevent invalidation during payment method switch
        window.authnetSwitchingPaymentMethod = true;

        calcAmount();

        // Check if we need to reload the iframe
        if (gCurrentAuthnetPaymentMethod !== null && !window.authnetRevertingPaymentMethod && "credit" !== gCurrentAuthnetPaymentMethod) {
          console.log('[AuthNet] Payment method switched to credit - reloading iframe');
          reloadAuthnetIframe("credit", gCurrentAuthnetPaymentMethod);
        }

        // Clear flag after payment method switch completes
        window.authnetSwitchingPaymentMethod = false;

        // ===== NEW: Re-evaluate BIN lookup match =====
        if (binLookupPerformed) {
          reEvaluateBinLookupMatch();
        }
        // =============================================

        // Clear any previous validation errors when payment type is switched
        // Only clear if currently visible (had an error from previous submit)
        if ($(".submissionErrors").is(":visible")) {
          $(".submissionErrors").html("");
          $(".submissionErrors").hide();
        }
      });

      // gateway-specific
      $(".checkPaymentType").on("click", function()
      {
        gSelectedPaymentMethod = "check";

        $(".card-fields-ctr").hide();
        $(".credit-ctr").hide();

        $(".debit-ctr").hide();
        $(".check-ctr").show();

        // apple pay
        $(".applePay-ctr").hide();
        $(".applePaySubmitBtn").hide();
        $(".regularSubmitBtn").show();

        $("[name='UMcommand']").val("check:sale");

        $(".paymentType").removeClass("paymentType-selected");
        $(".checkPaymentType").addClass("paymentType-selected");

        $("[name='UMcustom6']").val("ach/check");

        // Set flag before calcAmount() to prevent invalidation during payment method switch
        window.authnetSwitchingPaymentMethod = true;

        calcAmount();

        // Check if we need to reload the iframe
        if (gCurrentAuthnetPaymentMethod !== null && !window.authnetRevertingPaymentMethod && "check" !== gCurrentAuthnetPaymentMethod)
        {
          console.log('[AuthNet] Payment method switched to check - reloading iframe');
          reloadAuthnetIframe("check", gCurrentAuthnetPaymentMethod);
        }

        // Clear flag after payment method switch completes
        window.authnetSwitchingPaymentMethod = false;

        // ===== NEW: Clear BIN lookup state when switching to ACH =====
        if (binLookupPerformed) {
          console.log("Switched to ACH - clearing BIN lookup state");
          clearBinLookupState();
        }
        // ==============================================================

        // Clear any previous validation errors when payment type is switched
        // Only clear if currently visible (had an error from previous submit)
        if ($(".submissionErrors").is(":visible")) {
          $(".submissionErrors").html("");
          $(".submissionErrors").hide();
        }
      });

      // gateway-specific
      $(".debitPaymentType").on("click", function()
      {
        gSelectedPaymentMethod = "debit";

        $(".card-fields-ctr").show();   // ← Show the shared card fields
        $(".credit-ctr").hide();
        $(".check-ctr").hide();
        $(".debit-ctr").show();

        // apple pay
        $(".applePay-ctr").hide();
        $(".applePaySubmitBtn").hide();
        $(".regularSubmitBtn").show();

        $("[name='UMcommand']").val("cc:sale");

        $(".paymentType").removeClass("paymentType-selected");
        $(".debitPaymentType").addClass("paymentType-selected");

        $("[name='UMcustom6']").val("debit");

        // Set flag before calcAmount() to prevent invalidation during payment method switch
        window.authnetSwitchingPaymentMethod = true;

        calcAmount();

        // Check if we need to reload the iframe
        if (gCurrentAuthnetPaymentMethod !== null && !window.authnetRevertingPaymentMethod && "debit" !== gCurrentAuthnetPaymentMethod)
        {
          console.log('[AuthNet] Payment method switched to debit - reloading iframe');
          reloadAuthnetIframe("debit", gCurrentAuthnetPaymentMethod);
        }

        // Clear flag after payment method switch completes
        window.authnetSwitchingPaymentMethod = false;

        // ===== NEW: Re-evaluate BIN lookup match =====
        if (binLookupPerformed) {
          reEvaluateBinLookupMatch();
        }
        // =============================================

        // Clear any previous validation errors when payment type is switched
        // Only clear if currently visible (had an error from previous submit)
        if ($(".submissionErrors").is(":visible")) {
          $(".submissionErrors").html("");
          $(".submissionErrors").hide();
        }
      });

      // gateway-specific
      $(".applePayPaymentType").on("click", function()
      {
        gSelectedPaymentMethod = "applePay";  

        $(".card-fields-ctr").hide();
        $(".credit-ctr").hide();

        $(".check-ctr").hide();
        $(".debit-ctr").hide();
        $(".applePay-ctr").show();

        $(".applePaySubmitBtn").show();
        $(".regularSubmitBtn").hide();

        $("[name='UMcommand']").val("applePay");

        $(".paymentType").removeClass("paymentType-selected");
        $(".applePayPaymentType").addClass("paymentType-selected");

        $("[name='UMcustom6']").val("apple pay");

        calcAmount();  

        // Tag MouseFlow recording with "Apple Pay"
        try {
          _mfq.push(["tag", "ApplePay"]);  
        }
        catch(error) {
          console.log(error);
        }
      });
      // ----------------------------------------------------------------------------------------------


      $("#invoiceField").on("blur", function()
      {
        num = $(this).val();
        paddedNum = pad(num, 6);

        $(this).val(paddedNum);
        // $("input[name='UMinvoice']").val(paddedNum);
        setTruthField("UMinvoice", paddedNum);
      });

      $("#invoiceField").on("keyup", function()
      {
        let thisVal = $(this).val();
        // $("input[name='UMinvoice']").val($(this).val()); 
        setTruthField("UMinvoice", thisVal);
      });

      // add a error field for all the fields marked as 'reqd'
      $(".reqd").each(function()
      {
        $(this).parents(".fieldCtr").append('<div class="error">Required</div>');
        existingLblTxt = $(this).parent().siblings(".lbl").text();
        $(this).parent().siblings(".lbl").html(existingLblTxt + " <sup>*</sup>");
      });

      // remove the 'required' error when any reqd field is focused on
      $(".reqd").on("focus", function()
      {
        $(this).parent().siblings(".error").hide();
      }); 

      // v1.8.3 - commenting these out, will remove them all together in the next release
      // $("#ccNumber").on("focus", function()
      // {
      //   $(".creditCardNumError").hide();
      // }); 

      // $("#ccExpir").on("focus", function()
      // {
      //   $(".creditCardExpirError").hide();
      // }); 

      // $("#debitNumber").on("focus", function()
      // {
      //   $(".debitCardNumError").hide();
      // }); 

      // $("#debitExpir").on("focus", function()
      // {
      //   $(".debitCardExpirError").hide();
      // }); 

      // gateway-specific
      // Save Payment Details event handler
      $("#savePaymentDetails").on("change", function() 
      {
        console.log("--- Save Payment Details 'change' fired");
        if($(this).is(":checked"))
        {
          $("[name='UMaddcustomer']").val("yes");  
          $("[name='UMcustom4']").val("Yes");    

          // commenting this out Sep 27, 2025 as part of actual recurring billing schedule coding
          // because up till now, recurring billing wasn't implemented
          // so this is having no affect - i.e. it's not actually creating a recurring billing schedule in ePay
          // will enable/code it fresh later, as needed                
          // if(enableSchedule) 
          // {
          //   $("[name='UMschedule']").val(scheduleFrequency);  
          //   $("[name='UMnumleft']").val("*");  
          //   $("[name='UMstart']").val("next");  
          //   $("[name='UMrecurringreceipt']").val("yes");  
          //   // $("[name='UMbillamount']").val(); // will be set in updateUrls (so we have the LATEST amount entered) 
          // }

          showRecurringInfo();
        }
        else
        {
          $("[name='UMaddcustomer']").val("no");  
          $("[name='UMcustom4']").val("No");  

          // commenting this out Sep 27, 2025 as part of actual recurring billing schedule coding
          // because up till now, recurring billing wasn't implemented
          // so this is having no affect - i.e. it's not actually creating a recurring billing schedule in ePay
          // will enable/code it fresh later, as needed
          // if(enableSchedule) 
          // {
          //   $("[name='UMschedule']").val("disabled");  
          //   $("[name='UMnumleft']").val("0");  
          //   $("[name='UMstart']").val("");  
          //   $("[name='UMrecurringreceipt']").val("no");  
          //   $("[name='UMbillamount']").val(0);
          // }

          showRecurringInfo();
        }
      });


      // ================================ EVENT HANDLERS - End =============================================   


      // ------------------------------------ CODE EXECUTION ----------------------------------------
      // this is where we start calling functions that are defined above.
      // before this point, no functions should be called
      // otherwise we'll have this unorganized execution order  
      runApplePayTests()
      initTestValues();
      detectBrowser();

      initCurrencyLabelDisplay();
      initCcsAllowDisplay();
      setMasksForFields();
          
      initSurchargeCheckBoxDisplay();

      // [exec-stage3]
      // Resolve defaultPayType to an available payment method before using it.
      // Handles: debit-only pages, misconfigured defaultPayType, etc.
      defaultPayType = resolveDefaultPayType(defaultPayType);

      // calling this BEFORE processing ?amt=
      // because if it's provided, we call calcAmount, which needs a payment method to be selected
      // selectPaymentOption(defaultPayType);
      setInitialPaymentMethod(defaultPayType);

      processDebugParam();
      showTestingInfo();

      determinePageMode();
      processPageMode();
      handleNonQboCustomers();

      processInumParam();
      processDescParam();

      // Recurring Billing Interfaces
      handleSavePaymentDetails(); // Interface #1 - $savePaymentDetails = "true"  
      handleRecurringPreset();    // interface #2 - preset recurring PHP variables ($umAddCustomer = "yes", etc)
      handleRecurringUrlParams(); // interface #3 - URL parameters
      showRecurringInfo();

      logTrace1();

      // --------------------------------------------------------------------------------------------
    });

    // investigate-- in what order does any async document ready run
    $(async function()
    {
      function activateCp()
      {
        let activateCpProm = new Promise(function(resolve, reject)
        {
          activate_result = function(data)
          {
            if(data.result == "success")
            {
              console.log("Page Activated.");
              $("#spc").append(data.text); 
              // $("#siteContent").show(); // this moved to gsk because we only want to show the page when both activation and gsk succeed
              resolve("success");
            }
          }

           
            var activationUrl = `${hostUrl}/public/activate_cp?&user=${getParameterByName("user")}`;
          
          console.log(activationUrl);

          let postData = "";

          // for testing via cypress
          if(gpbn("testCase") != "" && gpbn("testCase") == "activation_failed")
          {
            postData += `&test_case=activation_failed`;
          }

          if(stubActivateCp)
          {
            activate_result({"result":"success","msg":"page activated","text":"[class~=recurring-custom],#site{display:none;}#noJS{font-weight:bold;}#noJS{color:#fff;}#noJS{background:#c52d2d;}#noJS{width:100%;}#noJS{padding-left:.9375pc;}#noJS{padding-bottom:.9375pc;}#noJS a{color:#eee;}#noJS{padding-right:.9375pc;}#noJS a{text-decoration:underline;}#noJS{padding-top:.9375pc;}#noJS{text-align:center;}#noJS{font-size:12pt;}#payment-opts{}#numLeft,#startDate{display:inline;}@media (max-width: 768px){#numLeft{margin-top:.625pc;}#numLeft{margin-left:-6pt;}#numLeft{width:104%;}#startDate{margin-top:3.75pt;}}body{background-attachment:fixed;}[class~=ui-datepicker],[class~=error],[class~=submissionErrors]{display:none;}[class~=ui-datepicker]{padding-left:.1em;}[class~=ui-datepicker] table{border-collapse:collapse;}[class~=ui-datepicker]{padding-bottom:0pt;}[class~=ui-datepicker]{padding-right:.1em;}[class~=ui-datepicker]{padding-top:.1em;}[class~=ui-datepicker]{width:14em;}body{background-image:url(\"https://i.imgur.com/gsg4x3w.jpg\");}[class~=lbl],[class~=sub-heading]{font-weight:bold;}[class~=lbl]{font-size:.145833333in;}sup{color:red;}[class~=lbl]{margin-bottom:.25pc;}h1{color:#fff;}[class~=ui-datepicker] table{font-size:.125in;}h4,h5{color:#000;}[class~=lbl]{margin-top:.104166667in;}[class~=submissionErrors],[class~=error]{color:#d50707;}[class~=ui-datepicker] table,input[type='text'],[class~=txtField],select{width:100%;}[class~=heading],[class~=submissionErrors]{text-align:center;}input[type='text'],select{border-radius:5px;}input[type='text'],select{border-left-width:.75pt;}[class~=submissionErrors]{font-size:12pt;}[class~=heading]{background:transparent;}[class~=ui-datepicker] table{margin-left:0pt;}[class~=ui-datepicker] table{margin-bottom:.4em;}select,input[type='text']{border-bottom-width:.75pt;}[class~=ui-datepicker] table{margin-right:0pt;}[class~=heading]{border-top-width:0;}input[type='text'],select{border-right-width:.75pt;}[class~=heading]{border-top-style:none;}[class~=heading]{border-top-color:currentColor;}[class~=ui-datepicker] table{margin-top:0in;}[class~=heading]{border-image:none;}[class~=sub-heading]{background:#ccc;}[class~=sub-heading],select{padding-left:.052083333in;}select,[class~=sub-heading]{padding-bottom:.052083333in;}select,input[type='text'],[class~=txtField]{border-top-width:.75pt;}select,[class~=sub-heading]{padding-right:.052083333in;}select,[class~=sub-heading]{padding-top:.052083333in;}[class~=fieldsCtr]{background:#fff;}[class~=txtField],input[type='text'],select{border-left-style:solid;}[class~=fieldsCtr]{padding-left:15pt;}[class~=fieldsCtr]{padding-bottom:15pt;}[class~=fieldsCtr]{padding-right:15pt;}select,[class~=txtField],input[type='text']{border-bottom-style:solid;}[class~=fieldsCtr]{padding-top:10px;}[class~=txtField],input[type='text'],select{border-right-style:solid;}[class~=fieldsCtr]{border-radius:0in;}[class~=fieldsCtr]{border-radius:18.75pt;}[class~=fieldsCtr]{margin-bottom:30px;}input[type='text'],select,[class~=txtField]{border-top-style:solid;}select,[class~=txtField],input[type='text']{border-left-color:#ccc;}[class~=fieldsCtr]{margin-top:2.5pc;}[class~=fieldsCtr]{margin-top:60px;}[class~=fieldsCtr]{box-shadow:0pt .75pt .3125pc 0in rgba(0,0,0,.1);}[class~=txtField],select,input[type='text']{border-bottom-color:#ccc;}[class~=fieldsCtr]{box-shadow:0 .3125pc .104166667in #222;}[class~=txtField],select,input[type='text']{border-right-color:#ccc;}[class~=rs1]{padding-left:.020833333in;}[class~=rs1]{padding-bottom:.020833333in;}[class~=rs1]{padding-right:.020833333in;}[class~=rs1]{padding-top:.020833333in;}[class~=txtField],select{border-top-color:#ccc;}.button,[class~=txtField]{border-radius:5px;}[class~=txtField]{border-left-width:.75pt;}select{border-image:none;}[class~=txtField]{border-bottom-width:.75pt;}[class~=txtField]{border-right-width:.75pt;}input[type='text'],select,[class~=txtField]{font-size:14px;}[class~=txtField]{border-image:none;}[class~=txtField],input[type='text']{padding-left:.052083333in;}[class~=txtField],input[type='text']{padding-bottom:.052083333in;}input[type='text'],[class~=txtField]{padding-right:.052083333in;}[class~=txtField],input[type='text']{padding-top:.052083333in;}.button{background:#eee;}.button,input[type='text']{border-top-color:#ccc;}.button{border-left-width:.010416667in;}.button{border-bottom-width:.010416667in;}.button{border-right-width:.010416667in;}.button{border-top-width:.010416667in;}.button{border-left-style:solid;}input[type='text']{border-image:none;}.button{border-bottom-style:solid;}.button{border-right-style:solid;}.button{border-top-style:solid;}.button{border-left-color:#ccc;}.button{border-bottom-color:#ccc;}.button{border-right-color:#ccc;}.button{border-image:none;}.button{padding-left:.5pc;}.button{padding-bottom:.041666667in;}.button{padding-right:.5pc;}.button{padding-top:.041666667in;}[class~=submitBtn]{display:block;}[class~=submitBtn]{text-align:center;}[class~=submitBtn]{margin-left:auto;}[class~=submitBtn]{margin-right:auto;}@media (max-width: 480px){h1{font-size:1.875pc;}[class~=button],[class~=rs1]{margin-top:.052083333in;}[class~=formCtr]{padding-left:0;}[class~=formCtr]{padding-right:0;}[class~=txtField]{width:100%;}.sub-heading{text-align:center;}[class~=img],[class~=sub-heading-txt]{display:block;}[class~=img]{margin-left:auto;}[class~=img]{margin-right:auto;}[class~=img]{max-width:100% !important;}h4{font-size:12pt;}}.footer{padding-top:.3125pc;}.footer{padding-bottom:5px;}form{margin-bottom:0 !important;}.help-icon{display:none;}.centered-logo{display:block;}.centered-logo{margin-left:auto;}.centered-logo{margin-right:auto;}.centered-logo{max-width:100%;}[class~=page-heading]{color:#477eb4;}[class~=page-heading]{font-family:Georgia;}[class~=page-heading]{font-size:3.5625pc;}[class~=page-heading]{margin-bottom:0;}[class~=page-heading],[class~=page-sub-heading]{text-align:center;}[class~=page-sub-heading]{color:#bbb;}[class~=page-sub-heading]{font-family:Tahoma;}[class~=page-sub-heading]{font-size:1.8125pc;}[class~=page-sub-heading]{margin-top:-6px;}[class~=page-sub-heading]{margin-left:-76px;}@media (max-width: 960px){[class~=page-sub-heading]{font-family:\"Ubuntu\",sans-serif;}}@media (max-width: 480px){[class~=page-heading]{font-size:28.5pt;}[class~=page-sub-heading]{font-size:20px;}[class~=page-sub-heading]{margin-top:0pc;}[class~=page-sub-heading]{margin-left:0pc;}[class~=page-sub-heading]{text-align:center;}[class~=page-sub-heading]{font-family:\"Ubuntu\",sans-serif;}}[class~=h-line]{border-bottom-width:.020833333in;}[class~=h-line]{border-bottom-style:solid;}[class~=h-line]{border-bottom-color:#ef884c;}h3{font-size:20px;}[class~=h-line]{border-image:none;}[class~=h-line]{margin-bottom:.625pc;}[class~=h-line-2]{border-bottom-width:.75pt;}[class~=h-line-2]{border-bottom-style:solid;}[class~=h-line-2]{border-bottom-color:#ddd;}[class~=h-line-2]{border-image:none;}[class~=h-line-2]{margin-bottom:40px;}[class~=radioBtnCtr]{padding-left:.625pc;}[class~=radioBtnCtr]{padding-bottom:.3125pc;}[class~=radioBtnCtr]{padding-right:.625pc;}[class~=radioBtnCtr]{padding-top:.3125pc;}[class~=radioBtnCtr]{background:#eee;}[class~=radioBtnCtr]{border-radius:5px;}[class~=radioBtnCtr]{margin-left:.1875pc;}[class~=radioBtnCtr]{margin-bottom:.1875pc;}[class~=radioBtnCtr]{margin-right:.1875pc;}[class~=radioBtnCtr]{margin-top:.1875pc;}[class~=radioBtnCtr]{cursor:pointer;}h3{margin-top:37.5pt;}[class~=radioBtnCtr-selected]{background:#c5f4b1;}.icon{margin-right:5px;}.icon{width:15pt;}h3:first-child{margin-top:.208333333in;}@media (max-width: 768px){[class~=amount-opts]{margin-bottom:7.5pt;}}[class~=radioCtr]{padding-left:6pt;}[class~=radioCtr]{padding-bottom:6pt;}ul[class~=paymentTypesList] li{padding-left:.625pc;}[class~=radioCtr]{padding-right:6pt;}[class~=radioCtr]{padding-top:6pt;}[class~=radioCtr]{background:#ddd;}[class~=radioCtr],ul[class~=paymentTypesList] li{border-radius:.052083333in;}[class~=radioCtr]{margin-bottom:4.5pt;}ul[class~=paymentTypesList] li{padding-bottom:3.75pt;}ul[class~=paymentTypesList] li{padding-right:.625pc;}[class~=radioCtr],ul[class~=paymentTypesList] li{cursor:pointer;}[class~=selected-radio-ctr]{background:#c5f4b1;}ul[class~=paymentTypesList] li{padding-top:3.75pt;}ul[class~=paymentTypesList] li{background:#eee;}ul[class~=paymentTypesList] li{margin-left:.1875pc;}[class~=amountRadio]{display:inline;}[class~=jsStuff]{display:none;}[class~=paymentType-selected]{background:#c5f4b1 !important;}[class~=credit-ctr]{display:block;}[class~=check-ctr],[class~=credit-ctr]{margin-bottom:.3125pc;}[class~=check-ctr]{display:none;}[class~=submitBtn]{font-weight:bold;}[class~=submitBtn]{background:-webkit-linear-gradient(top,#0bf,#008bff);}[class~=submitBtn]{background:-o-linear-gradient(bottom,#0bf,#008bff);}[class~=submitBtn]{background:-moz-linear-gradient(bottom,#0bf,#008bff);}ul[class~=paymentTypesList] li{margin-bottom:.1875pc;}[class~=submitBtn]{background:linear-gradient(to bottom,#0bf,#008bff);}[class~=submitBtn]{border-radius:20px;}[class~=submitBtn]{border-radius:1.9375pc;}[class~=submitBtn]{font-size:.145833333in;}ul[class~=paymentTypesList] li{margin-right:.1875pc;}[class~=submitBtn]{font-size:12pt;}[class~=submitBtn]{padding-left:1.625pc;}[class~=submitBtn]{padding-bottom:9.75pt;}[class~=submitBtn]{padding-right:1.625pc;}[class~=submitBtn]{padding-top:9.75pt;}ul[class~=paymentTypesList] li{margin-top:.1875pc;}ul[class~=paymentTypesList] li{display:inline-block;}ul[class~=paymentTypesList]{list-style-type:none;}[class~=submitBtn]{border-left-width:.75pt;}[class~=submitBtn]{border-bottom-width:.75pt;}[class~=submitBtn]{border-right-width:.75pt;}[class~=submitBtn]{border-top-width:.75pt;}[class~=submitBtn]{border-left-style:solid;}[class~=submitBtn]{border-bottom-style:solid;}[class~=submitBtn]{border-right-style:solid;}[class~=submitBtn]{border-top-style:solid;}[class~=submitBtn]{border-left-color:#bbb;}[class~=submitBtn]{border-bottom-color:#bbb;}[class~=submitBtn]{border-right-color:#bbb;}[class~=submitBtn]{border-top-color:#bbb;}[class~=submitBtn]{border-image:none;}[class~=submitBtn]{box-shadow:1px .75pt 1.5pt #ccc;}[class~=submitBtn]{transition:background-color .5s ease;}ul[class~=paymentTypesList]{padding-left:.104166667in;}ul[class~=paymentTypesList]{margin-top:5px;}@media (max-width: 480px){.submitBtn{font-weight:bold;}.submitBtn{background:-webkit-linear-gradient(top,#0bf,#008bff);}.submitBtn{background:-o-linear-gradient(bottom,#0bf,#008bff);}.submitBtn{background:-moz-linear-gradient(bottom,#0bf,#008bff);}.submitBtn{background:linear-gradient(to bottom,#0bf,#008bff);}.submitBtn{border-radius:.208333333in;}.submitBtn{border-radius:23.25pt;}.submitBtn{font-size:.875pc;}.submitBtn{font-size:9.75pt;}.submitBtn{padding-left:10px;}.submitBtn{padding-bottom:3.75pt;}.submitBtn{padding-right:10px;}.submitBtn{padding-top:3.75pt;}.submitBtn{border-left-width:.010416667in;}.submitBtn{border-bottom-width:.010416667in;}.submitBtn{border-right-width:.010416667in;}.submitBtn{border-top-width:.010416667in;}.submitBtn{border-left-style:solid;}.submitBtn{border-bottom-style:solid;}.submitBtn{border-right-style:solid;}.submitBtn{border-top-style:solid;}.submitBtn{border-left-color:#bbb;}.submitBtn{border-bottom-color:#bbb;}.submitBtn{border-right-color:#bbb;}.submitBtn{border-top-color:#bbb;}.submitBtn{border-image:none;}.submitBtn{box-shadow:.75pt .0625pc 2px #ccc;}.submitBtn{transition:background-color .5s ease;}}[class~=ccType]{height:21pt;}[class~=submitBtn]:hover,[class~=ccType]{border-left-width:.010416667in;}[class~=ccType]{display:none;}ul#trustList{list-style-type:none;}[class~=submitBtn]:hover,[class~=ccType]{border-bottom-width:.010416667in;}[class~=submitBtn]:hover,[class~=ccType]{border-right-width:.010416667in;}ul#trustList li{display:inline-block;}[class~=ccType],[class~=submitBtn]:hover{border-top-width:.010416667in;}ul#trustList li{padding-left:7.5pt;}[class~=ccType],[class~=submitBtn]:hover{border-left-style:solid;}[class~=submitBtn]:hover,[class~=ccType]{border-bottom-style:solid;}[class~=submitBtn]:hover,[class~=ccType]{border-right-style:solid;}[class~=submitBtn]:hover,[class~=ccType]{border-top-style:solid;}[class~=submitBtn]:hover{border-left-color:#ccc;}ul#trustList li{padding-bottom:7.5pt;}[class~=submitBtn]:hover{border-bottom-color:#ccc;}[class~=ccType]{border-left-color:#eee;}[class~=submitBtn]:hover{border-right-color:#ccc;}ul#trustList li{padding-right:7.5pt;}[class~=submitBtn]:hover{border-top-color:#ccc;}ul#trustList li{padding-top:7.5pt;}[class~=ccType]{border-bottom-color:#eee;}[class~=submitBtn]:hover{border-image:none;}[class~=ccType]{border-right-color:#eee;}[class~=ccType]{border-top-color:#eee;}[class~=ccType]{border-image:none;}ul#trustList{text-align:center;}[class~=submitBtn]:hover{background:-webkit-linear-gradient(top,#0bf,#005aff);}[class~=ccType]{border-radius:4.5pt;}[class~=submitBtn]:hover{background:-o-linear-gradient(bottom,#0bf,#005aff);}[class~=submitBtn]:hover{background:-moz-linear-gradient(bottom,#0bf,#005aff);}[class~=submitBtn]:hover{background:linear-gradient(to bottom,#0bf,#005aff);}ul#trustList{padding-left:0 !important;}@media (max-width: 768px){ul#trustList{padding-left:0px !important;}}[class~=footer]{text-align:right;}[class~=hide]{visibility:hidden;}[class~=submitBtn],.img{margin-bottom:7.5pt;}[class~=submitBtn]{margin-top:.208333333in;}"});
          }
          else 
          {
            $.ajax(
            {
              url: activationUrl,
              type: "GET", 
              jsonpCallback: 'activate_result',
              data: postData, 
              dataType: "jsonp", 
              success: function(data, status, xhr)
              {
                console.log("success", data);  
              },
              error: function(xhr, status, errorThrown)
              {
                console.log(`Error Activating Page - ${xhr.status}, ${status}, ${errorThrown}.`);

                if(xhr.status != 200)
                {
                  console.log(`Sending Email.`);
                  
                  // works perfectly!
                  var subject = "CP Error (re-arch) - Error Activating Page";
                  var message = '<b>Error trying to activate page</b><br>';
                  message += '<b>Page URL:</b> ';
                  message += window.location.toString();
                  message += '<br><br>';
                  message += `<b>TraceHash:</b> ${traceHash}`;
                  message += '<br><br>';
                  message += browserAndOsInfo;
                  message += '<br><br>';
                  message += 'error details - xhr.status: ' + xhr.status + ', status: ' + status + ', errorThrown: ' + errorThrown;
                  send_email(subject, message); 
                }

                resolve("error");
              }  
            });   
          }
        }); 
        
        return activateCpProm; 
      }
      
      // [exec-stage2]
      console.log("activateCP..");
      let activateCpRes = await activateCp();
      if(activateCpRes === "success")
      {
        $("#siteContent").show();
      }
      else 
      {
        // show an error message to the user
        $("#preErrors").html("An error (Error Code: AC-1) occurred while loading the checkout page.  We have been notified. <br>Please refresh the page to try again.  Thanks!");
        $("#preSiteContent").show();
      }      
    });
  </script>

  <!-- <h1 style="margin-bottom: 100px"><-?php echo $funText; ?>;</h1> -->

  <!-- tip description -->
   
    <input type="hidden" id="tipItemDesc" data-cy="tip-item-desc" />
    
  <style id='pg'>
      
      .homeBtn
      {
        position: fixed; top: 0; right: 0; background: rgba(0,0,0,0.5); padding: 5px 10px; 
        border-radius: 0 0 0 3px; font-size: 16px; z-index: 1;
      }
    
    .homeBtn a{color: #fff;}

    h2{
      font-size: 20px;
      margin-top: 45px;
    }

    h2:first-child{
      margin-top: 18px;
    }

    
    .heading
    {
      background: #fff;
      text-align: center;

      //background: transparent;
      //border-top: 10px solid #000000;
      //border-bottom: 2px solid #000000;
      //box-shadow: 0 0 3px #888;
  
      display: block;
  
      padding-top: 10px;
      padding-bottom: 10px;
  
      //position: fixed;
      //width: 100%;
      z-index: 0;
      //background: transparent url("https://dynamic.websimages.com/s/themes/classy/v1.27/images/noise.png") repeat center top;
    }

    .fieldsCtr
    {
      background: rgba(255, 255, 255, 1.0);
      padding: 20px;
      border-radius: 20px;
      padding-top: 10px;
      margin-top: 60px;
      margin-bottom: 50px;
      box-shadow: 0px 1px 3px #999;
      //box-shadow: 0 0 5px #eee;
      //border: 1px solid #ddd;
      //border: 10px solid #F64713;
      //border: 4px solid #141414;
  
      //background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.09) 0%, rgba(0, 0, 0, 0) 100px);
    }

    .h-line
    {
      border-bottom: 3px solid #1F1E17;
      margin-bottom: 5px;
    }
    
    .h-line-2
    {
      border-bottom: 1px solid #ddd;
      margin-bottom: 40px;
    }
  
    body
    {
      font-family: "Ubuntu", sans-serif;
      background: #fff;
      //background-image: url("https://freedommerchants.com/images/client/nmetcbg2.jpeg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center center;
      background-size: cover;
    }
  
    .centered-logo
    {
      display: block;
      margin-right: auto;
      margin-left: auto;
      max-width: 100%;
      padding: 0px;
      height: 190px;
    }
  
    .submitBtn
    {
      background: #111;
      //color: #111;
      //background: -webkit-linear-gradient(top, rgb(0, 187, 255) , rgb(0, 139, 255));
      //background: -o-linear-gradient(bottom, rgb(0, 187, 255), rgb(0, 139, 255));
      //background: -moz-linear-gradient(bottom, rgb(0, 187, 255), rgb(0, 139, 255));
      //background: linear-gradient(to bottom, rgb(0, 187, 255) , rgb(0, 139, 255));
      box-shadow: 1px 1px 2px #ccc;
      font-weight: bold;      
      font-size: 16px;
      padding: 13px 26px;
      border: 1px solid transparent;
      border-radius: 31px;
      transition: background-color 0.5s ease;
      
    }
  
    @media (max-width: 480px)
    {
      .submitBtn
      {
        //background: -webkit-linear-gradient(top, rgb(0, 187, 255) , rgb(0, 139, 255));
        //background: -o-linear-gradient(bottom, rgb(0, 187, 255), rgb(0, 139, 255));
        //background: -moz-linear-gradient(bottom, rgb(0, 187, 255), rgb(0, 139, 255));
        //background: linear-gradient(to bottom, rgb(0, 187, 255) , rgb(0, 139, 255));
        box-shadow: 1px 1px 2px #ccc;
        font-weight: bold;      
        font-size: 14px;
        padding: 13px 26px;
        border-radius: 31px;
        border: 1px solid #bbb;
        transition: background-color 0.5s ease;
      }
    }
    
    .submitBtn:hover
    {
      background: #666;
      //color: #111;
      //background: -webkit-linear-gradient(top, rgb(0, 187, 255) , #005AFF);
      //background: -o-linear-gradient(bottom, rgb(0, 187, 255), #005AFF);
      //background: -moz-linear-gradient(bottom, rgb(0, 187, 255), #005AFF);
      //background: linear-gradient(to bottom, rgb(0, 187, 255) , #005AFF);
      border: 1px solid transparent;
    }
    /*.submitBtn
    {
      width: 230px;
      cursor: pointer;
    }*/

    .railsErrors{
      text-align: center;
      display: none;
    }
    
    .lbl{
      font-weight: 400;
    }

    h1{
      color: #333;
    }

    sup{
      color: #af0000;
    }

    .zip-mask {
      text-transform: uppercase;
    }

    /* styling the readonly field to LOOK/simulate like a disabled field */
    input[readonly] {
      background-color: #f8f9fa; /* A light grey, similar to disabled fields */
      cursor: not-allowed;
    }

    /* this removes the outline when a read-only field is focused on - to completely simulate a disabled field look */
    input[readonly]:focus {
      outline: none;
      box-shadow: none; /* This removes any box-shadow effects on focus, often used by Bootstrap */
    }
  </style>

  <!-- ADD NEW STYLES HERE -->
  
  <!-- CSS for the 'draw-attention-to-an-element' effects -->
  <style>
    
    @keyframes pulse {
      0%   { transform: scale(1); }
      50%  { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    .pulse-twice {
      animation: pulse 0.6s ease-in-out 2;
    }

    .highlight {
      background-color: #ffff99 !important; /* light yellow */
      transition: background-color 0.5s ease;
    }
  </style>

  <style>
    #resetNameLookup, #resetNameLookupAndTryIdLookup, .resetIdLookup, .resetIdLookupWithHighlight {
      cursor: pointer;
      color: #0073ff;
    }
  </style>

  <style>
    .currencyLabel{
      display: none;
      font-weight: bold;
    }
  </style>

  <script type="text/javascript">
    $(function()
    {
      prepareFormData = function()
      {
        let formData = {};

        formData["name"] = titleCase($("[name='UMbillfname']").val()) + " " + titleCase($("[name='UMbilllname']").val());
        formData["description"] = $("[name='UMdescription']").val();
        formData["email"] = $("[name='UMemail']").val();
        
        if($("[name='UMcommand']").val() == "check:sale")
        {
                      paymentMethod = "Check";
                  }
        else
        {
          paymentMethod = "Credit Card";
        }

        // max transaction size code part 1/2 START
        formData["amount"] = $("[name='UMamount']").val();
        formData["maxTransactionSize"] = $("[name='maxTransactionSize']").val();
        formData["companyName"] = $("[name='companyName']").val();
        // max transaction size code part 2/2 END

        formData["pageName"] = $("[name='pageName']").val();
        formData["cardType"] = $("[name='cardType']").val();

        // QB INVOICE

        // June 8 update - getting invoicenum from #invoiceField instead of by reading parameters because
        // we want to send data entered manually into the invoice # field to the approved page (eg, work order #, receipt #, etc)
        // currentVal = currentVal.replace("status=", "invoicenum=" + getParameterByNames("invoicenum", "inum") + "&status=");
        if(getParameterByNames("invoicenum", "inum") != "")
        {
          formData["invoicenum"] = getParameterByNames("invoicenum", "inum");
        }
        else
        {
          formData["invoicenum"] = $("#invoiceField").val();
        }

        qbinvoice = getParameterByNames("qbinvoice", "qbi");
        if(qbinvoice == "true") {
          formData["qbInvoice"] = true;
        }

        // QB SALES RECEIPT
        salesReceipt = getParameterByName("sr");
        if(salesReceipt == "true") {
          formData["sr"] = true;
        }

        formData["paymentMethod"] = paymentMethod;

        // TRACE HASH
        formData["traceHash"] = traceHash;
        formData["ep"] = epoch;
        
        // Adding applyProcessingFee, rawAmount, rawFee
        // jan27-to-check - what is currently being sent?
        formData.applyProcessingFee = gApplyProcessingFee;
        formData.rawAmount = gRawAmount;
        formData.rawFee = gRawFee;

        formData.allowTipping = gAllowTipping;
        formData.tip = gTipAmount;


        // Integrating Deposit - Sep 6, 2024
        // Update: Sep 6, 2024 - Integrating the etc-deposit-5.2_core template into etc-5.2_core
        // the CORE/MAIN/ONLY-REAL difference between a 'deposit' page and a 'regular' page is passing depositPayment=true to the approved page
        // and now this action is controlled via the $unappliedPayment
         
          // passing this variable creates a deposit payment (i.e. payment NOT linked-with/towards an invoice), a.k.a an unapplied payment
          formData.depositPayment = true;
        
        $("[name='UMcustom17']").val(gTipAmount);
        $("[name='UMcustom18']").val(gRawFee);
        $("[name='UMcustom19']").val(gRawAmount);

        // =============================== QBO CUSTOMER SELECTION 2/3 - START ================================
        if (!customerFound && customerId == 0) {
          formData.suffix = $("[name='suffix']").val();
          formData.customerFound = customerFound;
          formData.customerId = customerId;
        } else if (customerFound && customerId != 0) {
          formData.customerFound = customerFound;
          formData.customerId = customerId;
        }

        formData.phone = $("[name='UMbillphone']").val();
        formData.street = $("[name='UMbillstreet']").val();
        formData.state = $("[name='UMbillstate']").val();
        formData.zip = $("[name='UMbillzip']").val();
        formData.city = $("[name='UMbillcity']").val();
        formData.company = $("[name='UMbillcompany']").val();
        // ================================= QBO CUSTOMER SELECTION 2/3 - END =========================================

        // Adding QB Client and appKey
        formData.qbclient = qbclient;
        formData.appKey = appKey;

        // Feb 2020 Update - Surcharging to credit card fees
        formData.stcc = sendSurchargingToCreditCardFees;

        // Base fields
        formData.bii = baseItemId;
        formData.bici = baseItemClassId;
        formData.bid = baseItemDesc;
        formData.bdtai = fmClearingAccountId;
        formData.brn = baseReferenceNo;
        formData.bmdosr = baseMessageDisplayedOnSalesReceipt;
        formData.bmdos = baseMessageDisplayedOnStatement;

        // If invoiceFieldLabel is set, add it
                    formData.invLbl = invoiceFieldLabel;
        
        // Surcharge fields
        formData.sii = surchargeItemId;
        formData.sici = surchargeItemClassId;
        formData.sid = surchargeItemDesc;
        formData.sdtai = fmClearingAccountId;
        formData.srn = surchargeReferenceNo;
        formData.smdosr = surchargeMessageDisplayedOnSalesReceipt;
        formData.smdos = surchargeMessageDisplayedOnStatement;

        // Tip fields
        formData.tii = tipItemId;
        formData.tid = tipItemDesc;
        formData.tdtai = fmClearingAccountId;
        // New - added Dec 15, 2025 as part of filling in Messaged displayed on Sales Receipt and Statement
        formData.trn = tipReferenceNo;
        formData.tmdosr = tipMessageDisplayedOnSalesReceipt;
        formData.tmdos = tipMessageDisplayedOnStatement;

        // Feb 2020 update - Offer
        formData.sfo = showFmcOffer;


        // Check if "testing" parameter exists
        if (getParameterByName("testing") != "") {
            formData.testing = getParameterByName("testing");

            // If not staging, generate a test AuthCode
            if (getParameterByName("testing") != "staging") {
                var now = new Date();  
                var secondsSinceEpoch = Math.round(now.getTime() / 1000);
                formData.UMauthCode = `testing-${secondsSinceEpoch}`;
            }
        }

        // Check if using custom reference number and customRefNumField is not empty
        if (usingCustomRefNum && customRefNumField != "") {
            if (customRefNumField == "billingFirstLast") {
                var firstName = titleCase($("[name='UMbillfname']").val());
                var lastName = titleCase($("[name='UMbilllname']").val());
                var fullName = `${firstName} ${lastName}`;
                
                var customRefNum = getBillingFirstLastRefNum(firstName, lastName, fullName);
                formData.customRefNum = customRefNum;
            }
        }

        // Add xeRate from July 20, 2022 update
        formData.xeRate = gInvoiceExchangeRate;

        // Feb 8, 2023 update - Add edgecase and case number if edgecase is 2 or general and casenum exists
        if ((edgecase == "2" || edgecase == "general") && casenum != "") {
            formData.edgecase = edgecase;
            formData.case = casenum;
        }
        // end approvedv7.html/prepareData();

         
          formData.page = "approvedv8";
        
        formData.client = qbclient;

        return formData;
      }  

      prepareIntentions = function(formData)
      {
        // ============================ prepareIntents =================================
        let doingSalesReceipt = false;
        let doingInvoicePayment = false;
        // let sr = getParameterByName("sr");

        var intentions = [];

        // ---- Action 1 / Main action ----
        // - Create Sales Receipt or Invoice Payment or a Deposit Payment
        if(formData.sr == true)
        {
            intentions.push("csr");
            doingSalesReceipt = true;          
        }
        else if(formData.qbInvoice == true)
        {
            intentions.push("cip");
            doingInvoicePayment = true;
        }
        else
        {
          if(formData.depositPayment == true)
          {
            intentions.push("dep");
            // we're not actually creating a sales receipt, but this variable controls
            // what parameters are sent to the back-end inside createBasePostData
            doingSalesReceipt = true;           
          }
          else
          {
            intentions.push("csr");
            doingSalesReceipt = true;          
          }
        }

        // ---- Action 2 / Surcharge ----
        if(formData.applyProcessingFee == true)
        {
          // added Dec 14, 2022
          // only add 'surcharge' to intentions if rawFee is > 0, i.e. user paid by CC (or by ACH and ach had surcharge on)
          if(parseFloat(formData.rawFee) > 0)
          {
            intentions.push("sur");  
          }
        }
        
        // ---- Action 3 / Tip ----
        if(formData.allowTipping == true)
        {
          if(parseFloat(formData.tip) > 0)
          {
            intentions.push("tip");
          }
        }  

        return {intents: intentions.join(","), doingSr: doingSalesReceipt};
      }
    });
  </script>

   
    <!-- As per JEMSU Instructions - START -->
    <!-- Facebook Pixel Code -->
    <script>
      // if(gpbn("live") == "" || gpbn("live") != "false")
      // {
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '174514373221526');
        fbq('track', 'PageView');  
      // }
      
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=174514373221526&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    <!-- As per JEMSU Instructions - END -->

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-64829785-1"></script>
    <script>
      // if(gpbn("live") == "" || gpbn("live") != "false")
      // {
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-64829785-1');
      // }
    </script>  
  </head>

<div id="preSiteContent" data-cy="pre-site-content">
  <style>
    #preSiteContent {
      background: #fff;
      padding-block: 20px;
      display: none;
    }

    #preErrors {
      text-align: center;
      color:#d50707;
    }
  </style>
  <div class="" id="preErrors">Some error occurred</div>
</div>

<div id="siteContent" data-cy="site-content">
<body>
  <!-- Authnet Localhost Warning -->
  <div id="authnet-localhost-warning" style="display: none;">
    <div class="authnet-localhost-warning">
      <div style="max-width: 900px; margin: 0 auto; padding: 20px;">
        <h3 style="margin-top: 0; color: #721c24;">⚠️ Authnet Localhost Warning</h3>
        <p><strong>You are testing an Authnet flow with a localhost URL.</strong></p>
        <p>For Authnet to work properly, you must use an ngrok URL. Otherwise, the payment will hang on "Processing..."</p>

        <div style="margin-top: 15px;">
          <p><strong>Required setup:</strong></p>
          <ol style="margin: 5px 0; padding-left: 20px;">
            <li>Start ngrok: <code style="background: #fff; padding: 2px 6px; border-radius: 3px;">ngrok http 8888</code></li>
            <li>Copy the generated ngrok URL (e.g., https://abc123.ngrok.app)</li>
            <li>Update .env file: <code style="background: #fff; padding: 2px 6px; border-radius: 3px;">AUTHNET_IFRAME_BASE_URL=https://abc123.ngrok.app</code></li>
            <li>Restart the Rails web server</li>
          </ol>
        </div>

        <p style="margin-bottom: 0; margin-top: 15px;">
          <strong>Then visit the checkout page using the ngrok URL, not localhost.</strong>
        </p>
      </div>
    </div>
  </div>

  <style>
  .authnet-localhost-warning {
    background-color: #f8d7da;
    border: 2px solid #f5c6cb;
    border-left: 5px solid #dc3545;
    color: #721c24;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 9999;
  }

  .authnet-localhost-warning code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
  }

  .authnet-localhost-warning ol {
    line-height: 1.8;
  }
  </style>

  <script>
  (function() {
    // Check if we should show the Authnet localhost warning
    var isLocalhost = window.location.host.includes('localhost');
    var isAuthnet = 'usaepay' === 'authnet';

    if (isLocalhost && isAuthnet) {
      document.getElementById('authnet-localhost-warning').style.display = 'block';
    }
  })();
  </script>

  <!-- Configuration Error Warning -->
  
  <div class="overlay">

<style>
  .testingInfo, .testingLbl {
    position: fixed; 
    top: 10px; 
    left: 10px; 
    padding: 10px 15px; 
    z-index: 1000; 
    display: none;
    box-shadow: 0 0 5px #444;
  }

  .recurringInfo {
    position: fixed; 
    top: 100px; 
    left: 10px; 
    padding: 10px 15px; 
    z-index: 1000; 
    display: block;
    box-shadow: 0 0 5px #444;

    h3 {
      margin-block: 5px;
      font-size: 18px;
    }

    .recurringVal {
      font-weight: bold;
    }

    td {
      margin: 10px;
      border: 1px solid #31708f;
      padding: 10px;
    }
  }
</style>

<div class="testingInfo alert alert-info">
  display edge case and case here
</div>

<div class="testingLbl alert alert-info">
  display edge case and case here
</div>

<!-- gateway-specific - right now only valid for ePay -->

<nav class="homeBtn" role="navigation">
  <a href="https://nmetc.com/">Home</a>
</nav>

<!-- Cypress JS Variable value holders - Begin -->
<!-- 
  since we can't access JS variables from inside Cypress, these hidden text fields will be assigned the values of JS variables, 
  so we can access and assert JS variable values in our Cypress tests. 
-->
<input type="hidden" id="pageMode" />
<input type="hidden" id="customerFound" />
<input type="hidden" id="customerId" />
<!-- JS Variable value holders - End -->

<input type="hidden" data-cy="host-url"/>
<input type="hidden" data-cy="qb-company"/>

<!-- <form name="epayform" action="[UMformURL]" method="POST" onSubmit="document.epayform.submitbutton.value='Please Wait... Processing';" autocomplete="off"> -->
<!-- <form name="epayform" action="https://www.usaepay.com/gate.php" method="POST" autocomplete="on"> -->
<form id="epayForm" name="epayform" method="POST" autocomplete="on">
<!-- <input type="hidden" name="UMsubmit" value="1"> -->
<!-- <input type="hidden" name="UMkey" value=""> -->
<!-- apple pay -->

<!-- // gateway-specific -->
<!-- conditionally assign $assignedMerchantKey based on gateway + testing environment -->

<!-- // gateway-specific -->
<!-- <h1 style="text-align: right">national-medical-education-training-center-2336</h1> -->
<input type="hidden" id="creditAndCheckMerchantKey" name="creditAndCheckMerchantKey" value="national-medical-education-training-center-2336">
<input type="hidden" id="applePayMerchantKey" name="applePayMerchantKey" value="">
<input type="hidden" id="merchantKey" name="merchantKey" value="national-medical-education-training-center-2336">
<!-- ------------------------------ -->

<input type="hidden" id="testCase" />
<input type="hidden" id="testSubCase" />
<input type="hidden" id="testingFlow" />

<!-- <input type="hidden" name="UMhash" value="[UMhash]"> -->
<input type="hidden" name="UMcommand" value="">
<input type="hidden" name="UMtax" value="[UMtax]">
<!-- <input type="hidden" name="UMcustid" value="[UMcustid]"> -->

<!-- // gateway-specific -->
  <input type="hidden" name="UMcustreceipt" value="yes">
 

<input type="hidden" name="UMdescription" value="">
<!-- <input type="hidden" name="UMechofields" value="[UMechofields]"> -->
<!-- <input type="hidden" name="UMformString" value="[UMformString]"> -->


<!-- ===================== RECURRING BILLING ============================= -->
<!-- 
  The 6 Core UM variables that control recurring billing schedules.
  All interfaces, regardless of their UI/UX, all ultimately set values for these 6 UM variables
  and these 6 core UM variables are the ONLY variables that control recurring billing schedules.
-->
  
  <input type="hidden" name="UMaddcustomer" value="no">

  
  <input type="hidden" name="UMbillamount" value="0">

    
  <input type="hidden" name="UMschedule" value="disabled">

  
  <input type="hidden" name="UMnumleft" value="0">

  
  <input type="hidden" name="UMstart" value="next">

  
  <input type="hidden" name="UMrecurringreceipt" value="yes">

<!-- max transaction size code part 1/2 START -->
<input type="hidden" name="maxTransactionSize" value="35000">
<input type="hidden" name="companyName" value="National Medical Education & Training Center">
<input type="hidden" name="cardType" value="">
<!-- max transaction size code part 1/2 END -->

<input type="hidden" name="pageName" value="nmetc.php.html">
<input type="hidden" name="cardType" value="">

<!-- storing approved page URL right before submitting, in case arrival on approve page doesn't happen or doesn't register or whatever -->
<input type="hidden" name="UMcomments" value="">

<!-- stores browser and OS information via the bowser library -->
<input type="hidden" name="UMcustom3" value="">

<!-- stores the payment method 'credit card | ach/check | debit' -->
<input type="hidden" name="UMcustom6" value="">

<!-- new (re-arch) stores the trace hash so I can search ePay transactions by the tracehash -->
<input type="hidden" name="UMcustom15" />

<!-- stores the value for tip, surcharge and base amount -->
<input type="hidden" name="UMcustom17" value="">
<input type="hidden" name="UMcustom18" value="">
<input type="hidden" name="UMcustom19" value="">

<input type="hidden" name="UMtax" value="0.01">
<input type="hidden" name="UMponum" value="">


<header class="container-fluid heading" role="banner">
      <img src="https://freedommerchants.com/images/client/nmetclogo2.png" class="centered-logo" alt="logo" />
    <h1 class="sr-only">National Medical Education & Training Center</h1>  
</header>

<div class="container formCtr">
  <!-- <img src="https://i.imgur.com/3RtT25G.png" class="" style="display: block; margin-left: auto; margin-right: auto; max-width: 100%" /> -->
<div class="col-xs-0 col-sm-1 col-md-1 col-lg-2"></div>
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-8">


  <!-- // gateway-specific -->
  <!-- the whole websocket stuff is only valid for epay since the checkout happens at server-side -->
  <!-- these are added purely so I can assert the values of the JS variables in cypress tests -->
  <input type="hidden" id="gSocketConnection" data-cy="gSocketConnection" />
  <input type="hidden" id="gSocketState" data-cy="gSocketState" /> 
  <input type="hidden" id="checkoutState" data-cy="checkoutState" style="position: fixed; top: 105px; left: 10px; width: 200px; "/> 
  <input type="hidden" id="wsNumRetries" data-cy="wsNumRetries" /> 
  <input type="hidden" id="checkoutTimer" data-cy="checkoutTimer" /> 
  <input type="hidden" id="checkoutContractVersion" data-cy="checkoutContractVersion" value="v2" />

  <!-- Oct 10, 2024 - Adding WebSockets to the checkout flow -->
  <script>
    // ----------------------------------------------------------------------
    //                             VARIABLES
    // ----------------------------------------------------------------------
    var gSocket;

    const checkoutStates = {
      notStarted: "CHECKOUT_NOT_STARTED",
      processing: "CHECKOUT_PROCESSING",
      complete: "CHECKOUT_COMPLETE"
    }
    
    const wsConnectionStates = {
      notConnected: "WS_NOT_CONNECTED",
      attemptingConnection: "WS_ATTEMPTING_CONNECTION",
      connected: "WS_CONNECTED",
      closedReceivedResponse: "WS_CLOSED_RECEIVED_RESPONSE"
    }

    const internetStates = {
      connected: "INTERNET_CONNECTED",
      disConnected: "INTERNET_DIS_CONNECTED"
    }

    let checkoutState;
    let wsConnectionState;
    let wsNumRetries;
    let checkoutTimer;

    // initializes all the variables
    // i'm doing this in a function so I can call this to reset the state of all variables
    function initCheckout() {
      checkoutState = checkoutStates.notStarted;
      document.getElementById('checkoutState').value = checkoutState;

      wsConnectionState = wsConnectionStates.notConnected;
      document.getElementById('gSocketState').value = wsConnectionState;
      document.getElementById('gSocketConnection').value = wsConnectionState;

      wsNumRetries = 0;
      document.getElementById('wsNumRetries').value = wsNumRetries;

      checkoutTimer = 0;
      document.getElementById('checkoutTimer').value = checkoutTimer;
    }

    // [exec-stage2]
    initCheckout();

    const resetCheckoutState = () => initCheckout();

    let internetState;
    
    let checkoutTimerInterval;
    let checkoutPollingInterval;
    let simPollCount = 0; // Frontend-only counter for lifecycle simulation progression
    let hasScrolledToProcessingThisAttempt = false; // Scroll policy: auto-scroll only once for "taking longer" per attempt
    let hasScrolledToTerminalOutcomeThisAttempt = false; // Scroll policy: auto-scroll only once for terminal non-approved outcome
    
    // let checkoutTestSubCase = "";
    // -------------------------------------------------------------------------

    // show the 'Sorry, this is taking longer than usual.  Thank you for your patience'
    takingLongerThanUsual = function() {
      $("#info-result").show();

      // Scroll policy: auto-scroll only on first processing status per attempt
      if (!hasScrolledToProcessingThisAttempt) {
        hasScrolledToProcessingThisAttempt = true;
        document.getElementById('info-result').scrollIntoView({
          behavior: 'smooth', 
          block: 'start'      
        });
      }
    }

    // make AJAX call to get the checkout status
    const checkPaymentStatus = () =>
    {
      console.log("Getting Checkout Status..");
      $.ajax(
      {
        url: `${hostUrl}/get_status_v2`, 
        type: 'GET',                        
        data: {
          uuid: sessionId,
          sim_scenario: (function() {
            let currentScenario = (typeof gCheckoutData !== 'undefined' && gCheckoutData.sim_scenario) ? gCheckoutData.sim_scenario : $("#sim_scenario").val();
            // Lifecycle simulation: after 3 polls (~6s), progress non-terminal scenarios to approved for demo clarity
            if (currentScenario === 'in_flight_duplicate' || currentScenario === 'processing_unknown') {
              simPollCount++;
              if (simPollCount >= 3) {
                console.log("[SIM LIFECYCLE] Progressing '" + currentScenario + "' → 'duplicate_approved' after " + simPollCount + " polls");
                return 'duplicate_approved';
              }
            }
            return currentScenario;
          })(),
          sim_delay_ms: (typeof gCheckoutData !== 'undefined' && gCheckoutData.sim_delay_ms) ? gCheckoutData.sim_delay_ms : $("#sim_delay_ms").val(),
          testing: gpbn("testing"),
          live: gpbn("live")
        },
        success: function(response) 
        {
          // ADR-0003: v2 envelope handling for status polling
          if(response.status == "accepted" || response.status == "in_flight" || response.status == "processing_unknown")
          {
            // Non-terminal: still processing, keep polling
            takingLongerThanUsual();
          }
          else if(response.status == "approved")
          {
            // Terminal: payment approved
            clearInterval(checkoutPollingInterval);
            clearInterval(checkoutTimerInterval);
            resetCheckoutState();
            clearInfoBlock();
            handlePaymentResult({result: "approved", authcode: response.prior_result || "approved", amount: gCheckoutData.qbo_data.amount});
          }
          else if(response.status == "retry_required")
          {
            // Terminal: payment failed, retry with fresh UUID
            clearInterval(checkoutPollingInterval);
            clearInterval(checkoutTimerInterval);
            resetCheckoutState();
            clearInfoBlock();
            showRetryRequiredBlock(response.msg);
            resetSubmitBtnUI();
            // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid, old UUID must not be reused
            sessionId = uuid.v4(); window.sessionId = sessionId;
            $("#uuid").val(sessionId);
            console.log("[ADR-0003] retry_required: Fresh UUID generated:", sessionId);
            // Clear stale retry simulation state so next attempt is clean
            $("#sim_scenario").val("");
            $("#sim_delay_ms").val("");
            $("#sim-armed-indicator").hide();
            simPollCount = 0;
            hasScrolledToProcessingThisAttempt = false;
            hasScrolledToTerminalOutcomeThisAttempt = false;
          }
          else if(response.status == "enqueue_failed")
          {
            // Terminal: enqueue failed, UUID not consumed
            clearInterval(checkoutPollingInterval);
            clearInterval(checkoutTimerInterval);
            resetCheckoutState();
            clearInfoBlock();
            showRetryRequiredBlock(response.msg || "Oops, something went wrong — we couldn't process your payment. Please try again.");
            resetSubmitBtnUI();
            // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid for retry
            sessionId = uuid.v4(); window.sessionId = sessionId;
            $("#uuid").val(sessionId);
            console.log("[ADR-0003] enqueue_failed: Fresh UUID generated:", sessionId);
            $("#sim_scenario").val("");
            $("#sim_delay_ms").val("");
            $("#sim-armed-indicator").hide();
            simPollCount = 0;
            hasScrolledToProcessingThisAttempt = false;
            hasScrolledToTerminalOutcomeThisAttempt = false;
          }
          else if(response.status == "not_found")
          {
            // Terminal: UUID not found
            clearInterval(checkoutPollingInterval);
            clearInterval(checkoutTimerInterval);
            resetCheckoutState();
            clearInfoBlock();
            showRetryRequiredBlock(response.msg || "This payment session is no longer active. Please try again.");
            resetSubmitBtnUI();
            // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid for retry
            sessionId = uuid.v4(); window.sessionId = sessionId;
            $("#uuid").val(sessionId);
            console.log("[ADR-0003] not_found: Fresh UUID generated:", sessionId);
            $("#sim_scenario").val("");
            $("#sim_delay_ms").val("");
            $("#sim-armed-indicator").hide();
            simPollCount = 0;
            hasScrolledToProcessingThisAttempt = false;
            hasScrolledToTerminalOutcomeThisAttempt = false;
          }
          else
          {
            // Unknown status — keep polling (treat as non-terminal)
            takingLongerThanUsual();
          }
        },
        error: function(xhr, status, error) {
          // console.log('Error:', error);     
          // showErrorBlock(error);  
        }
      });
    }

    //
    const startPollingForStatus = () => 
    {
      console.log("Polling for checkout status every 2 seconds...");
      checkoutPollingInterval = setInterval(function() {
        checkPaymentStatus();
      }, 2000);
    }

    // Starts the checkout timer
    // if response hasn't arrived for 3s -> 'checkout is taking longer than usual...'
    // if response hasn't arrived for 6s -> close WS and switch to polling
    const startCheckoutTimer = () => {
      console.log("Staring checkout timer...");

      // start the payment processing timer
      checkoutTimerInterval = setInterval(function() 
      {
        checkoutTimer += 1;  
        console.log(`> ${checkoutTimer}s elapsed`);

        // if we reach 3 seconds without a response
        // show a nice 'sorry, it's taking longer than usual..'
        if(checkoutTimer === 3)
        {
          console.log("Checkout is taking longer than usual...")
          takingLongerThanUsual();
        }

        // if we reach 6 seconds without a response
        // then it means that something may be broken (WS connection broke, etc)
        // so start polling for status every 2seconds
        if(checkoutTimer === 6)
        {
          console.log("Haven't got a response in 6 seconds");
          
          console.log("> closing WebSocket connection..");
          closeWebSocketConnection();

          console.log("> stopping checkout timer..");
          resetCheckoutTimer();

          console.log("> starting Polling for status..");
          startPollingForStatus();
        }

        // if 13 seconds have passed and we still don't have a response
        if(checkoutTimer === 13) {
          // maybe show another info message 'still processing...'

          // but more importantly, we now want to check the result
        }
      }, 1000)
    }


    // ======================== RESET Functions =========================
    // Resets all state variables to their initial values
    // This will be called in case we get a 'decline' or 'error' response
    
    const resetCheckoutTimer = () => {
      clearInterval(checkoutTimerInterval);
      checkoutTimer = 0;
      console.log("checkout timer stopped.");
    }
    // ===========================================================================


    // ---------------------------------------------------------------------------
    //                            WEB SOCKET CONNECTION
    // ---------------------------------------------------------------------------
    const closeWebSocketConnection = () => {
      gSocket.close(1000, "WS Connection closed.");
      wsConnectionState = wsConnectionStates.closedReceivedResponse;
      document.getElementById('gSocketState').value = wsConnectionState;  
    }

    // [PRIVATE] - i.e. not directly called/used
    // Handle Rails ActionCable's 'Handshake' 
    // (i.e. welcome message, subscription confirmed)
    handleWsHandshake = (data) => {
      if(data.type === "welcome")
      {
        // console.log(data);
        console.log("[WS] Welcomed by WebSocket server.");
        return 'welcomed_by_server';
      }
      else if(data.type === "confirm_subscription")
      {
        // console.log(data);
        let channel = JSON.parse(data.identifier).channel;
        console.log(`[WS] Subscription to ${channel} Confirmed.`);
        
        // gSocketConnection = CONNECTED;
        // document.getElementById('gSocketConnection').value = gSocketConnection;
        wsConnectionState = wsConnectionStates.connected;
        document.getElementById('gSocketConnection').value = wsConnectionState;

        return 'subscription_confirmed';
      }
      else 
      {
        // console.log(data);
        console.log("Recieved a message from the WebSocket server");
        return 'received_generic_mesage';
      }
    }

    // Subscribes to the Payment Processing Channel
    wsInitiated = function(event)
    {
      // 1) Log to console that we're connected to the Rails WebSocket Server
      console.log("\n============================================================================");
      let env;
      if(wsHostUrl.includes("fmc-prod")) { env = "fmc-prod" }
      else if(wsHostUrl.includes("fmc-staging")) { env = "fmc-staging" }
      else if(wsHostUrl.includes("localhost")) { env = "local" }
      console.log(`[WS] Connected to the ${env} rails WebSocket server`);

      // 2) Subscribe to the Payment Processing Channel
      let msg = {
        command: 'subscribe',
        identifier: JSON.stringify({
          uuid: sessionId,
          channel: 'PaymentProcessingChannel'
        })
      }
      gSocket.send(JSON.stringify(msg));  
    }

    // [MAIN FUNCTION]
    // 1) Initiates the Checkout -- by calling checkout(), after the handshake
    // 2) Handles the Result ------ by calling handlePaymentResult(message)
    wsReceivedMessage = function(event)
    {
      let data = JSON.parse(event.data);  

      // Custom broadcases (i.e. broadcasts that we initiate [not automatic broadcasts])
      // these have a structure of {identifier: something, message: our_custom_message}
      // so if the message key exists, we know it's our own custom message
      if(data.message)
      {
        if(data.type == "ping") { return; } // the websocket server sends a ping every 3 seconds, ignore them
        
        // --------------------------------------------------------------
        // Process the custom broadcast we received
        // --------------------------------------------------------------
        // 1) Log the message we received
        let message = data.message;
        console.log(`[WS] Received broadcast..`);
        console.log(message);

        // 2) Close the WS connection and Update the WS connection state
        closeWebSocketConnection();

        // 3) Update the checkout state and reset the timer
        checkoutState = checkoutStates.complete;
        document.querySelector("#checkoutState").value = checkoutState;
        resetCheckoutTimer();
        
        // 4) Handle the result/message
        handlePaymentResult(message);
        // --------------------------------------------------------------
      }
      // the default broadcasts have a hash structure of 
      // {type: 'something'} or {identifier: something, type: 'something'}
      else 
      {
        if(handleWsHandshake(data) === "subscription_confirmed")
        {
          // Now that the WebSocket connection has been established,
          // Make the HTTP POST Request to /checkout
          checkout(gCheckoutData);
        }
      }
    }

    // [NOT USING]
    // if the WebSocket connection breaks, we do nothing
    // the paymentTimer will notice that we haven't received a response in 6s
    // and will close the WS connection and switch to polling.
    // later maaaybe i'll log it to sentry.
    socketOnClose = function(event) 
    {
      // primarily for logging
      switch(event.code) {
        case 1000:
          console.log("Normal closure.");
          break;
        case 1001:
          console.log("Client or server is going away (e.g., client navigated away).");
          break;
        case 1006:
          console.log("Abnormal closure - likely due to network issues or server-side problem.");
          break;
        case 1009:
          console.log("Message too big.");
          break;
        case 1011:
          console.log("Internal server error.");
          break;
        default:
          console.log("Unknown reason for closure.");
      }

      //%%%%
      // abnormal closure or couldn't open connection
      if(event.code === 1006)
      {
        // if we had an abnormal close while attempting connection, then go into exponential back-off to retry 3 times.
        if(wsConnectionState === wsConnectionStates.attemptingConnection)
        {
          wsNumRetries += 1;
          console.log(`WS connection retry #${wsNumRetries}`);
          if(wsNumRetries <= 3)
          {
            let wsRetrySecondsRemaining = 2 ** wsNumRetries;
            
            // update alert
            if(wsNumRetries === 1)
            {
              $("#wsWarning").text(`Couldn't connect to the server.  Re-trying (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
            }
            else if(wsNumRetries === 2)
            {
              $("#wsWarning").html(`<b>Still</b> couldn't connect to the server.  Re-trying (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
            }
            else if(wsNumRetries === 3)
            {
              $("#wsWarning").html(`Couldn't connect to the server.  <b>Final re-try</b> (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
            }
            $("#wsWarning").show();
            document.getElementById('wsWarning').scrollIntoView({behavior: 'smooth', block: 'start'});

            let wsRetryInterval = setInterval(function() 
            {
              wsRetrySecondsRemaining -= 1;
              if(wsRetrySecondsRemaining >= 0)
              {
                if(wsNumRetries === 1)
                {
                  $("#wsWarning").text(`Couldn't connect to the server.  Re-trying (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
                }
                else if(wsNumRetries === 2)
                {
                  $("#wsWarning").html(`<b>Still</b> couldn't connect to the server.  Re-trying (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
                }
                else if(wsNumRetries === 3)
                {
                  $("#wsWarning").html(`Couldn't connect to the server.  <b>Final re-try</b> (#${wsNumRetries}) in ${wsRetrySecondsRemaining}s...`)  
                }
                
                $("#wsWarning").show();
              }
              else {
                $("#wsWarning").hide();
                clearInterval(wsRetryInterval);
                // re-attempt WS connection
                openWebSocket();
              }
            }, 1000);
          }
          else {
            // alert("sorry there was an error trying to connect to the server.  please wait a few mins and try again..");
            // show 'sorry there was an error, please wait a few mins and try again'
            $("#wsError").show().delay(5000).fadeOut();
            document.getElementById('wsError').scrollIntoView({behavior: 'smooth', block: 'start'});

            // reset all states (UI and variables)
            resetCheckoutState();
            resetSubmissionUI();
            resetSubmitBtnUI();

            // Send an email informing me right away
            const subject = "CP Error (ESS) - Error establishing WebSocket connection";
            let message = '<b>Error in establishing WebSocket Connection (even after 3 attempts)</b><br>';
            message += '<br><br>';
            message += '<b>Page URL:</b> ';
            message += window.location.toString();
            message += '<br><br>';
            message += `<b>UUID:</b> ${sessionId}`;
            message += '<br><br>';
            message += browserAndOsInfo;
            send_email(subject, message);
          }
        }
      }
    }
    
    // [NOT USING]
    // useless because the event doesn't actually contain any error info
    socketOnError = function(event) 
    {
      console.log("WebSocket error observed: ", event.message);
    } 

    // 1) Initiates the WebSocket connection
    // Action Cable has a web socket server running at ws://localhost:3000/cable
    openWebSocket = function() 
    {
      wsConnectionState = wsConnectionStates.attemptingConnection;
      
      let socket_url = `${wsHostUrl}/cable`;

      if($("#testCase").val() === "simulate-rails-backend-offline")
      {
        socket_url = 'ws://localhost:3005/cable';
      }
      else if($("#testCase").val() === "simulate-rails-backend-offline-for-two-retries")
      {
        // for the first 2 retries, simulate backend offline
        // for the 3rd retry, let it succeed
        if(wsNumRetries < 2)
        {
          socket_url = 'ws://localhost:3005/cable';  
        }
      }
      
      gSocket = new WebSocket(socket_url);
      gSocket.onopen = function(event) { wsInitiated(event); }
      gSocket.onmessage = function(event) { wsReceivedMessage(event); }
      
      // we aren't doing anything with these
      gSocket.onclose = function(event) { socketOnClose(event); }
      gSocket.onerror = function(event) { socketOnError(event); }
    }
    // --------------------------------------------------------------------------
  </script>


<input type="hidden" name="use_sandbox" id="useSandbox" value="false">
<input type="hidden" id="uuid">
<input type="hidden" id="sim_scenario" name="sim_scenario" value="">
<input type="hidden" id="sim_delay_ms" name="sim_delay_ms" value="">
<input type="hidden" id="cpData">
<input type="hidden" id="qboData">

<!--------------------- CHECKOUT-RELATED CODE (Stage2 and Stage3) - Start ----------------------------->
<script type="text/javascript">
  var submitForm;
  var allGood;
  var gCheckoutData; // the object that holds all the checkout page data

  submitProcessing = function()
  {
    if(gSelectedPaymentMethod === "applePay")
    {
      $(".applePaySubmitBtn").attr("disabled", true);
      $(".applePaySubmitBtn img").hide();
      // $(".applePaySubmitBtn h5").text("Please Wait...Processing");  
      $(".applePaySubmitBtn h5").show();
    }
    else 
    {
      // $(".submitBtn").addAttr("disabled");
      $(".submitBtn").attr("disabled", true);
      $(".submitBtn").text("Please Wait...Processing");  
    }
    
  }

  resetSubmitBtnUI = function() 
  {
    if(gSelectedPaymentMethod === "applePay")
    {
      $(".applePaySubmitBtn").removeAttr("disabled");
      $(".applePaySubmitBtn img").show();
      // $(".applePaySubmitBtn").text("");  
      $(".applePaySubmitBtn h5").hide();
    }
    else 
    {
      $(".submitBtn").removeAttr("disabled");
      $(".submitBtn").text("Process Payment");  
    }
  }

  showGenericError = function(msg) 
  {
    $(".genericErrors").text(msg);
    $(".genericErrors").show();
  }

    clearGenericError = function(msg) 
    {
      $(".genericErrors").text("");
      $(".genericErrors").hide();
    }

  scrollToSubmissionStatus = function()
  {
    const submissionStatusEl = document.querySelector('.submissionErrors') || document.querySelector('.submitBtnCtr') || document.querySelector('.submitBtn');
    if(submissionStatusEl)
    {
      submissionStatusEl.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  }

  showErrorBlock = function(msg)
  {
    $("#error-reason").text(msg);
    $("#error-result").show();

    // Scroll policy: auto-scroll once for terminal non-approved outcome
    if (!hasScrolledToTerminalOutcomeThisAttempt) {
      hasScrolledToTerminalOutcomeThisAttempt = true;
      document.getElementById('error-result').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  }

  clearErrorBlock = function()
  {
    $("#error-reason").text("");
    $("#error-result").hide(); 
  }

  clearInfoBlock = function()
  {
    // $("#error-reason").text("");
    $("#info-result").hide(); 
  }

  showDeclineBlock = function(msg)
  {
    $("#decline-reason").text(msg);
    $("#decline-result").show();

    // Scroll policy: auto-scroll once for terminal non-approved outcome
    if (!hasScrolledToTerminalOutcomeThisAttempt) {
      hasScrolledToTerminalOutcomeThisAttempt = true;
      document.getElementById('decline-result').scrollIntoView({
        behavior: 'smooth', 
        block: 'start'      
      });
    }
  }
  
  clearDeclineBlock = function()
  {
    $("#decline-reason").text("");
    $("#decline-result").hide(); 
  }

  // ADR-0003: In-flight duplicate POST UX (Decision 2)
  showInFlightBlock = function()
  {
    $("#in-flight-reason").html(
      "<strong>Payment already in progress. Please wait.</strong><br>" +
      "Do not refresh the page or click back while we finish processing."
    );
    $("#in-flight-result").show();

    // In-flight is non-terminal. Do not mark terminal scroll here; the first
    // processing-status scroll is handled by takingLongerThanUsual().
  }

  clearInFlightBlock = function()
  {
    $("#in-flight-reason").html("");
    $("#in-flight-result").hide();
  }

  // ADR-0003: Retry-required UX (Decision 1)
  showRetryRequiredBlock = function(msg)
  {
    $("#retry-reason").text(msg);
    $("#retry-result").show();

    // Scroll policy: auto-scroll once for terminal non-approved outcome
    if (!hasScrolledToTerminalOutcomeThisAttempt) {
      hasScrolledToTerminalOutcomeThisAttempt = true;
      document.getElementById('retry-result').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
    }
  }

  clearRetryRequiredBlock = function()
  {
    $("#retry-reason").text("");
    $("#retry-result").hide();
  }

  // ADR-0003 Decision 1: Try Again creates fresh UUID, resets attempt-level state
  $(document).on("click", ".tryAgainBtn", function() {
    console.log("[ADR-0003] Try Again clicked — generating fresh UUID and resetting state");
    
    // 1. Generate fresh UUID
    sessionId = uuid.v4(); window.sessionId = sessionId;
    console.log("[ADR-0003] New session ID:", sessionId);
    
    // 2. Reset attempt-level state
    resetSubmissionUI();
    resetSubmitBtnUI();
    
    // 3. Reset checkout state (WebSocket, timers, polling)
    resetCheckoutState();
    
    // 4. Reset tokenization artifacts
    // The hosted payment fields manage their own state — we do NOT force-clear them
    // But we do clear our local tokenization tracking
    if(typeof gCheckoutData !== 'undefined') {
      delete gCheckoutData.UMcardToken;
      delete gCheckoutData.cardType;
    }
    
    // 5. ADR-0001 compliance for v9.2: Reset BIN lookup state on fresh attempt
          // BIN lookup state reset (v9.2 only — but safe to call in v9a too, it's a no-op if BIN lookup isn't active)
      if(typeof binLookupFailureConfirmed !== 'undefined') {
        binLookupFailureConfirmed = false;
        console.log("[ADR-0003] BIN lookup failure state reset for fresh attempt");
      }
        
    // 6. Re-open WebSocket connection for the new UUID
    // (The WS subscription uses sessionId, so the new UUID gets its own channel)
    openWebSocket();
    
    // 7. Clear simulation params on Try Again
    $("#sim_scenario").val("");
    $("#sim_delay_ms").val("");
    $("#sim-armed-indicator").hide();
    simPollCount = 0; // Reset lifecycle sim poll counter on fresh attempt
    hasScrolledToProcessingThisAttempt = false;
    hasScrolledToTerminalOutcomeThisAttempt = false;
  });

  resetSubmissionUI = function()
  {
    clearGenericError();
    clearErrorBlock();
    clearInfoBlock();
    clearDeclineBlock();
    clearInFlightBlock();
    clearRetryRequiredBlock();
    $(".submissionErrors").hide();
    $(".customerSelectionError").remove(); // customer-id-lookup
    
    // Only call if function exists
    if (typeof clearCreditCardError === 'function') {
      clearCreditCardError();
    }

    $(".phoneErrors").hide();
    simPollCount = 0; // Reset lifecycle sim poll counter
    hasScrolledToProcessingThisAttempt = false;
    hasScrolledToTerminalOutcomeThisAttempt = false;
  }


  // Added Apr 2, 2025
  // Sends an email to ops@fmc.com informing them of a big amount txn (>= $20k) getting declined
  // with all the relevant customer, merchant, and amount info
  // -> so they can reach out quickly and recover/retain the customer before they use a different payment company.
  informOpsOfBigTicketDecline = function(totalAmount, wsMessage) 
  {
    let customerName = gCheckoutData.qbo_data.name;        // 'Varun Aggarwal'
    let customerEmail = gCheckoutData.qbo_data.email;      // 'varun@freedommerchants.com'
    let customerPhone = gCheckoutData.qbo_data.phone;      // '(917) 684-6444'
    let merchantName = gCheckoutData.qbo_data.companyName; // 'The Company Inc.'
    let baseAmount = gCheckoutData.qbo_data.rawAmount;     // '6.17'
    let surchargeAmount = gCheckoutData.qbo_data.rawFee;   // '0.19'
    let tipAmount = gCheckoutData.qbo_data.tip;            // 0
    let errorCode = wsMessage.error_code;                    // '64000'

    let formattedTotalAmount = formatNum(totalAmount.toFixed(2));

    let recipients = [{'email': 'varun@freedommerchants.com'}, {'email': 'ops@freedommerchants.com'}, {'email': 'ben@freedommerchants.com'}]
    // let recipients = [{'email': 'varun@freedommerchants.com'}]
    
    let emailMessage = `Ops Team, <br><br>`;

    emailMessage += `A <b>$${formattedTotalAmount}</b> transaction declined for Merchant <b>${merchantName}</b> with ePay error code <b>${errorCode}</b>.`;

    // Page Info
    emailMessage += '<br><br>';
    emailMessage += `<b>Page URL:</b> ${window.location.toString()}`;
    
    // Customer
    emailMessage += '<br><br>';
    emailMessage += '<u>Customer</u>';
    emailMessage += '<br>';
    emailMessage += `<b>Name:</b> ${customerName} <br>`;
    emailMessage += `<b>Email:</b> ${customerEmail} <br>`;
    emailMessage += `<b>Phone:</b> ${customerPhone} <br>`;

    // Merchant
    emailMessage += '<br>';
    emailMessage += `<b>Merchant:</b> ${merchantName} <br>`;

    // Amount breakdown
    emailMessage += '<br>';
    emailMessage += `<b>Base Amount:</b> $${baseAmount} <br>`;
    emailMessage += `<b>Surcharge:</b> $${surchargeAmount} <br>`;
    emailMessage += `<b>Tip:</b> $${tipAmount} <br>`;
    emailMessage += `<b>Total Amount:</b> $${formattedTotalAmount} <br>`;

    // Trace, UUID, Browser
    emailMessage += '<br>';
    emailMessage += `<b>TraceHash:</b> ${traceHash} <br>`;
    emailMessage += `<b>UUID:</b> ${sessionId} <br>`;
    emailMessage += `<b>User Agent:</b> ${browserAndOsInfo} <br>`;

    emailMessage += '<br>';
    emailMessage += 'This is an automated email sent by etc-8.1_core.php';
    emailMessage += '<br>';
    emailMessage += `Recipients ${recipients.map((x) => x.email).join(", ")}`;
    
    send_email(`[IMP] Big Ticket Decline ($${formattedTotalAmount}, ${merchantName})`, emailMessage, recipients);          
  }

  // Added Apr 2, 2025
  // I'll get an email if an exception/errors happens during transaction processing
  // these errors aren't logged anywhere in the backend
  // so for now, so I get informed early about any issues, i'm coding it to just inform me via email.
  informDevTeam = function(wsMessage) 
  {
    let customerName = gCheckoutData.qbo_data.name;        // 'Varun Aggarwal'
    let customerEmail = gCheckoutData.qbo_data.email;      // 'varun@freedommerchants.com'
    let customerPhone = gCheckoutData.qbo_data.phone;      // '(917) 684-6444'
    let merchantName = gCheckoutData.qbo_data.companyName; // 'The Company Inc.'
    let baseAmount = gCheckoutData.qbo_data.rawAmount;     // '6.17'
    let surchargeAmount = gCheckoutData.qbo_data.rawFee;   // '0.19'
    let tipAmount = gCheckoutData.qbo_data.tip;            // 0
    let totalAmount = parseFloat(gCheckoutData.qbo_data.amount)
    let errorMessage = wsMessage.msg;                      // undefined local variable or method `doepayexception' for #<Class:0x000000010d594878>

    let formattedTotalAmount = formatNum(totalAmount.toFixed(2));
    let emailMessage = `Dev Team, <br><br>`;

    emailMessage += `An exception/error happened while processing the transaction: ${errorMessage}.`;

    // Page Info
    emailMessage += '<br><br>';
    emailMessage += `<b>Page URL:</b> ${window.location.toString()}`;
    
    // Customer
    emailMessage += '<br><br>';
    emailMessage += '<u>Customer</u>';
    emailMessage += '<br>';
    emailMessage += `<b>Name:</b> ${customerName} <br>`;
    emailMessage += `<b>Email:</b> ${customerEmail} <br>`;
    emailMessage += `<b>Phone:</b> ${customerPhone} <br>`;

    // Merchant
    emailMessage += '<br>';
    emailMessage += `<b>Merchant:</b> ${merchantName} <br>`;

    // Amount breakdown
    emailMessage += '<br>';
    emailMessage += `<b>Base Amount:</b> $${baseAmount} <br>`;
    emailMessage += `<b>Surcharge:</b> $${surchargeAmount} <br>`;
    emailMessage += `<b>Tip:</b> $${tipAmount} <br>`;
    emailMessage += `<b>Total Amount:</b> $${formattedTotalAmount} <br>`;

    // Trace, UUID, Browser
    emailMessage += '<br>';
    emailMessage += `<b>TraceHash:</b> ${traceHash} <br>`;
    emailMessage += `<b>UUID:</b> ${sessionId} <br>`;
    emailMessage += `<b>User Agent:</b> ${browserAndOsInfo} <br>`;

    emailMessage += '<br>';
    emailMessage += 'This is an automated email sent by etc-8.1_core.php';

    // let recipients = [{'email': 'varun@freedommerchants.com'}, {'email': 'ops@freedommerchants.com'}]
    let recipients = [{'email': 'varun@freedommerchants.com'}]
    
    send_email(`[IMP] Exception in CP ($${formattedTotalAmount}, ${merchantName})`, emailMessage, recipients);          
  }


      handlePaymentResult = function(message)
    {
      const paymentResult = message.result;
      clearInterval(checkoutPollingInterval);
      clearInterval(checkoutTimerInterval);
      resetCheckoutState();
      clearInfoBlock();

      if(paymentResult === "approved")
      {
        // Clear transient processing/retry/error panels before redirect so browser
        // Back restores a coherent terminal page state, not stale in-flight UI.
        clearInFlightBlock();
        clearInfoBlock();
        clearRetryRequiredBlock();
        clearErrorBlock();
        clearDeclineBlock();

        let title = "National Medical Education & Training Center";
        let authcode = message.authcode;
        let amount = message.amount;
        let sfo = "yes";
        
        approvedPageHost = gpbn("testing") === "local" ? "http://localhost:8888/testing" : "https://freedommerchants.com"

        let approvedPageUrl;

         
          approvedPageUrl = `${approvedPageHost}/approvedv8.html?title=${title}&authcode=${authcode}&amount=${amount}&sfo=${sfo}`;  
        
        window.location = approvedPageUrl;
      }
      else if(paymentResult === "declined")
      {
        // message is: {result: 'declined', epay_res: 'Error', msg: 'Error: Unable to process transaction (64000)', error_code: '64000', refnum: 'sim-decline-123'}
        let wsMessage = message;
        showDeclineBlock(wsMessage.msg);
        
        // inform the Ops team if a big ticket txn gets declined
        // manually tested, NOT auto-tested
        let totalAmount = parseFloat(gCheckoutData.qbo_data.amount)
        if(totalAmount >= 20000)
        {
          informOpsOfBigTicketDecline(totalAmount, wsMessage);
        }

        // DECLINE-RECOVERY: Auto-generate fresh UUID so the next Process Payment
        // click sends a new UUID instead of the stale one that already got declined.
        // Without this, the backend sees a duplicate UUID and returns retry_required,
        // trapping the user.
        sessionId = uuid.v4(); window.sessionId = sessionId;
        $("#uuid").val(sessionId);
        console.log("[DECLINE-RECOVERY] Fresh UUID generated after decline:", sessionId);

        // Reset attempt-level state for a clean new submit
        resetCheckoutState();
        if(typeof gCheckoutData !== 'undefined') { delete gCheckoutData.UMcardToken; delete gCheckoutData.cardType; }
        if(typeof binLookupFailureConfirmed !== 'undefined') { binLookupFailureConfirmed = false; }
        hasScrolledToProcessingThisAttempt = false;
        hasScrolledToTerminalOutcomeThisAttempt = false;
        // Do NOT open WebSocket here — it will be opened on next Process Payment click.
        // Do NOT clear #testCase — let test simulation params persist for decline→approved testing.
      }
      else if(paymentResult === "error")
      {
        let wsMessage = message;
        showErrorBlock(wsMessage.msg);

        // manually tested, NOT auto-tested
        informDevTeam(wsMessage); // inform me if the an exception/errors occurs while processing the transaction.
      }
      resetSubmitBtnUI();
    }
    

  $(function()
  {
    // gateway-agnostic
    // Validate all the form data
    allGood = function() 
    {
      console.log(">>>> Inside allGood <<<");

      validationErrors = 0;
      $(".reqd").each(function()
      {
        if($(this).is(":visible"))
        {
          if($(this).val() == "")
          {
            $(this).parent().siblings(".error").show();
            validationErrors += 1;
          }
          // added Mar 22 - now people can't just enter '  ' in the address fields and game the system
          else 
          {
            if($(this).val().trim() == "")
            {
              $(this).parent().siblings(".error").show();
              validationErrors += 1;   
            }
          }  
        }
      });

      // the user may have clicked back after a declind transaction, so by running the keyup event.  We'll re-populate UMname correctly
      $("#fName").keyup();

      // <!-- ============================ PARTIAL INVOICE PAYMENT PART 3/3 - START ================================ -->
      // Added Mar 12 - in response to Vanessa's invoice # 2018 issue - when user pressed back after a decline
      // the correct amount wasn't being set
      // Jan 30, 2026 - Added allowPartialPayments guard to prevent validation errors when partial payments disabled
      if(allowPartialPayments)
      {
        if($(".amountOpts[optName='other']").prop("checked") && $(".otherAmount").val() != "")
        {
          $(".otherAmount").blur();
        }

        if($(".amountOpts[optName='other']").prop("checked") && $(".otherAmount").val() == "")
        {
          $(".amountErrors").text("Please enter an amount");
          validationErrors += 1;
        }

        if($(".amountErrors").text().trim() != '')
        {
          validationErrors += 1;
        }
      }
      // <!-- ============================== PARTIAL INVOICE PAYMENT PART 3/3 - END ================================ -->


      // ================================== QBO CUSTOMER SELECTION 3/3 - START =======================================
       
        if(customerEntriesFound && !customerSelected)
        {
          $(".customerErrors").text("Please select a customer from the list above");
          $(".customerErrors").show();
        }

        if($(".customerErrors").text().trim() != '')
        {
          validationErrors += 1;
        }  
            
      // ====================================== QBO CUSTOMER SELECTION 3/3 - END ======================================

      // v8.1.1 - We can now add custom validation logic (JS code) in it's own file and it'll be inserted here
      
      if(validationErrors > 0)
      {
        $(".submissionErrors").show();
        // Scroll policy: validation failures scroll to centralized submission/status area
        scrollToSubmissionStatus();
        return false;
      }

      // Email field
      if($("[name='UMemail']").is(":visible"))
      {
        let emailAddress = $("[name='UMemail']").val();
        if(emailAddress != "") 
        {
          emailAddress = emailAddress.trim();
          $("[name='UMemail']").val(emailAddress);

          if(emailAddress.match(EMAIL_REGEX) == null) 
          {
            $(".emailErrors").text("Invalid email format");
            $(".emailErrors").show();

            $(".submissionErrors").show();
            // Scroll policy: validation failures scroll to centralized submission/status area
            scrollToSubmissionStatus();
            return false;
          }
        }  
      }
      
      // Phone field
      // here we have the country code dropdown + the entered phone field
      if(defaultCountry === 'other')
      {
        if($("#enteredPhoneNumber").is(":visible"))
        {
          let phoneNum = $("#enteredPhoneNumber").val();
          if(phoneNum != "")
          {
            phoneNum = phoneNum.replace(/[()-\s]/g, "");
            phoneNum = phoneNum.trim();

            // research showed that phone numbers (excluding country code) around the world vary in length from 5-12 digits
            if(phoneNum.length < 5 || phoneNum.length > 12) 
            {
              $(".phoneErrors").text("Must be between 5-12 digits.");
              $(".phoneErrors").show();
              $(".submissionErrors").show();
              // Scroll policy: validation failures scroll to centralized submission/status area
              scrollToSubmissionStatus();
              return false;
            }
          }
        }  
      }
      // for 'us', 'ca', and 'us/ca' the phone field remains the same
      else 
      {
        if($("[name='UMbillphone']").is(":visible"))
        {
          let phoneNum = $("[name='UMbillphone']").val();
          if(phoneNum != "")
          {
            phoneNum = phoneNum.replace(/[()-\s]/g, "");
            phoneNum = phoneNum.trim();

            if(phoneNum.length != 10) 
            {
              $(".phoneErrors").text("Must be 10 digits.");
              $(".phoneErrors").show();
              $(".submissionErrors").show();
              // Scroll policy: validation failures scroll to centralized submission/status area
              scrollToSubmissionStatus();
              return false;
            }
          }
        }  
      }

      // Card Number
      // *** we used to manually validated the card fields (CC, Debit, and ACH) here but now ePay's CC fields (within the iFrame) do auto validation ****

      invoice = $("[name='UMinvoice']").val();
      // removed the parseFloat(invoice)check because "0abc" parseFloats to 0
      if(invoice === "")
      {
        // $("[name='UMinvoice']").val("123456");
        setTruthField("UMinvoice", "123456");
      }

      // Amount
      // added amount field validation as part of auth.net integration
      // not sure why I didn't have this for epay too
      // but I guess when I run the full testing suite, if they all pass, then good
      // let umAmount = $("[name='UMamount']").val();

      // // Check if empty
      // $(".amountErrors").text("");
      // $(".amountErrors").hide();

      // if (umAmount === '' || umAmount === null || umAmount === undefined) {
      //   // $("[name='UMamount']").addClass("invalidField");
      //   // allGoodBoolean = false;
      //   // numberOfInvalidFields++;
      //   $(".amountErrors").text("Amount is invalid.");
      //   $(".amountErrors").show();
      //   $(".submissionErrors").show();
      //   return false;
      // }
      // Check if valid number and greater than 0
      
      // let amountNum = parseFloat(umAmount);
      
      // if (isNaN(amountNum) || amountNum <= 0) {
      //   // $("[name='UMamount']").addClass("invalidField");
      //   // allGoodBoolean = false;
      //   // numberOfInvalidFields++;
      //   $(".amountErrors").text("Amount is invalid.");
      //   $(".amountErrors").show();
      //   $(".submissionErrors").show();
      //   return false;
      // }

      
      // Credit card processing fee checkbox
      if($(".jsIAgree").is(":visible"))
      {
        if(!$(".jsIAgree").prop("checked"))
        {
          alert("Please check '" + textToAgree + "' to continue.");
          return false;
        }  
      }

      // ACH processing fee checkbox
      if($(".jsIAgreeCheck").is(":visible"))
      {
        if(!$(".jsIAgreeCheck").prop("checked"))
        {
          alert("Please check '" + textToAgreeCheck + "' to continue.");
          return false;
        }  
      }

      // Apple Pay processing fee checkbox
      if($(".jsIAgreeApplePay").is(":visible"))
      {
        if(!$(".jsIAgreeApplePay").prop("checked"))
        {
          alert("Please check '" + textToAgreeApplePay + "' to continue.");
          return false;
        }  
      }

      // Currency checkbox
      if($(".jsIAgreeCurrency").is(":visible"))
      {
        if(!$(".jsIAgreeCurrency").prop("checked"))
        {
          alert("Please check '" + textToAgreeCurrency + "' to continue.");
          return false;
        }  
      }

      // Terms of Serivce checkbox
      if($(".terms").is(":visible"))
      {
        if(!$(".terms").prop("checked"))
        {
          alert("Please check '" + termsTextToAgree + "' to continue.");
          return false;
        }  
      }

      if($(".privacyPolicy").is(":visible"))
      {
        if(!$(".privacyPolicy").prop("checked"))
        {
          alert("Please check '" + privacyPolicyTextToAgree + "' to continue.");
          return false;
        }  
      }

      // ---- Custom Submit JS goes here ----
            // ---- Custom Submit JS goes here ----

      // ===================================== Sep 29, 2020 - decline > back fix - FIX 3 ====================================
      // the amount fix before this update was working only for ?amt=, not for open amount or when paying 'other amount' (partial payment) 
      // for invoice payments.
      
      // open amount
      if($("#amountField").is(":visible"))
      {
        $("#amountField").keyup();
      }
      // could be ?amt or invoice payment
      else
      {
        // doing invoice payment
        if($(".otherAmount").is(":visible"))
        {
          // paying 'other amount', not the whole balance
          if($("[name='paymentAmount'][optname='other']").prop("checked"))
          {
            $(".otherAmount").keyup();
          }
        }
      }
      // ===================================== Sep 29, 2020 - decline > back fix - FIX 3 ====================================


      // feature 9 
      // ====================================== Displaying Max Credit and ACH Message ========================================
      $(".maxMsg").hide();
      maxMsgErrors = false;
      if(allowPartialPayments)
      {
        var maxMsg = "";

        var payMethod = $("[name='UMcommand']").val();
        if(payMethod == "cc:sale"){payMethod = "credit";}
        else if(payMethod == "check:sale"){payMethod = "check";}

        var umAmount = parseFloat($("[name='UMamount']").val());

        // both Credit and ACH visible
        if(showCC && showEcheck)
        {
          console.log("case A");

          if(payMethod == "check")
          {
            if(umAmount > maxAch)
            {
              maxMsg = "We're sorry, but maximum allowed by Echeck/ACH is $" + maxAch + ".  ";

              // amount is greater than both maxAch and maxCC
              if(umAmount > maxCc)
              {
                // if the remaining (after paying maxAch) is smaller than maxCc
                if( (umAmount - maxAch) <= maxCc )
                {
                  maxMsg += "<br>Please pay the remaining $" + (umAmount - maxAch).toFixed(2) + " via credit card.";  
                }
                // if the remaining (after paying maxAch) is still larger than maxCc;
                else
                {
                  maxMsg += "<br>Please pay $" + maxCc + " of the remaining $" + (umAmount - maxAch).toFixed(2) + " via credit card, and the rest ($" + (umAmount - maxAch - maxCc).toFixed(2) + ") via check.";   
                }  
              }
              // amount is greater than maxAch, but smaller than maxCc
              else
              {
                maxMsg += "<br>Please use credit card instead to make the full payment ($" + umAmount + "), or to pay the remaining $" + (umAmount - maxAch).toFixed(2);  
              }

              maxMsgErrors = true;
            }
          }
          else if(payMethod == "credit")
          {
            if(umAmount > maxCc)
            {
              maxMsg = "We're sorry, but maximum allowed by credit card is $" + maxCc + ".  ";

              // amount is greater than both maxAch and maxCC
              if(umAmount > maxAch)
              {
                // if the remaining (after paying maxCc) is smaller than maxCc
                if( (umAmount - maxCc) <= maxAch )
                {
                  maxMsg += "<br>Please pay the remaining $" + (umAmount - maxCc).toFixed(2) + " via Echeck/ACH.";  
                }
                // if the remaining (after paying maxCc) is still larger than maxAch;
                else
                {
                  maxMsg += "<br>Please pay $" + maxAch + " of the remaining $" + (umAmount - maxCc).toFixed(2) + " via Echeck/ACH, and the rest ($" + (umAmount - maxAch - maxCc).toFixed(2) + ") via check.";   
                }  
              }
              // amount is greater than maxCc, but smaller than maxAch
              else
              {
                // maxMsg += "Please use Echeck/ACH instead to complete the payment.";  
                maxMsg += "<br>Please use Echeck/ACH instead to make the full payment ($" + umAmount + "), or to pay the remaining $" + (umAmount - maxCc).toFixed(2);  
              }

              maxMsgErrors = true;
            }
          }
        }
        
        // only Credit card visible
        else if(showCC && !showEcheck)
        {
          console.log("case B"); 

          if(umAmount > maxCc)
          {
            maxMsg = "We're sorry, but maximum allowed by credit card is $" + maxCc + ".  ";
            maxMsg += "Please pay the remaining $" + (umAmount - maxCc).toFixed(2) + " via check.";

            maxMsgErrors = true;
          }
        }
        
        // only eCheck visible
        else if(!showCC && showEcheck)
        {
          console.log("case C");

          if(umAmount > maxAch)
          {
            maxMsg = "We're sorry, but maximum allowed by Echeck/ACH is $" + maxAch + ".  ";
            maxMsg += "Please pay the remaining $" + (umAmount - maxAch).toFixed(2) + " via check.";

            maxMsgErrors = true;
          } 
        }

        if(maxMsgErrors)
        {
          $(".maxMsg").html(maxMsg);
          $(".maxMsg").show();
          return false;  
        }
      }
      // ====================================== Displaying Max Credit and ACH Message ========================================

      // NOTE: BIN lookup validation has been REMOVED from allGood() and moved to handleBinLookupResult()
      // Reason: allGood() runs before tokenization, so it would check against OLD BIN lookup data
      // even if user entered a NEW card. Validation must happen AFTER fresh tokenization + BIN lookup.

      return true;
    }


    // ePay specific
          checkout = function(checkoutData)
      {
        // POST all the FORM data to /checkout
        $.ajax(
        {
          url: `${hostUrl}/checkout_v2`,
          type: 'POST',                        
          data: checkoutData,
          success: function(response) 
          {
            // ADR-0003: v2 envelope handling
            // Branch on result (coarse class), then status (exact branch)
            if(response.result == "success" && response.status == "accepted")
            { 
              // Set checkout state to 'PROCESSING'
              checkoutState = checkoutStates.processing;
              document.querySelector("#checkoutState").value = checkoutState;

              // Start the timer
              startCheckoutTimer();

              // simulate WS connection breaking 2s after we call checkout
              if($("#testSubCase").val() === 'ws-connection-gets-broken')
              {
                setTimeout(function() {
                  gSocket.close();
                  console.log("WebSocket connection got broken..");
                }, 2000)
              }
            }
            else if(response.result == "duplicate" && response.status == "in_flight")
            {
              // ADR-0003 Decision 2: In-flight duplicate POST
              // Show in-flight UX, no retry allowed
              showInFlightBlock();
              // Start the timer — we're waiting for the in-flight payment to complete
              startCheckoutTimer();
            }
            else if(response.result == "duplicate" && response.status == "processing_unknown")
            {
              // ADR-0003: UUID was accepted but final outcome unknown
              // Show "taking longer" message and start polling
              takingLongerThanUsual();
              startCheckoutTimer();
            }
            else if(response.result == "duplicate" && response.status == "approved")
            {
              // ADR-0003 Decision 9: Duplicate + approved recovery
              // Recover user into approved/success flow, NOT error UX
              handlePaymentResult({result: "approved", authcode: response.prior_result || "approved", amount: gCheckoutData.qbo_data.amount});
            }
            else if(response.result == "duplicate" && response.status == "retry_required")
            {
              // ADR-0003 Decision 1: Terminal retry with fresh UUID
              showRetryRequiredBlock(response.msg);
              resetSubmitBtnUI();
              // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid, old UUID must not be reused
              sessionId = uuid.v4(); window.sessionId = sessionId;
              $("#uuid").val(sessionId);
              console.log("[ADR-0003] retry_required: Fresh UUID generated:", sessionId);
              // Clear stale retry simulation state so next attempt is clean
              $("#sim_scenario").val("");
              $("#sim_delay_ms").val("");
              $("#sim-armed-indicator").hide();
              simPollCount = 0;
              hasScrolledToProcessingThisAttempt = false;
              hasScrolledToTerminalOutcomeThisAttempt = false;
            }
            else if(response.result == "error" && response.status == "enqueue_failed")
            {
              // ADR-0003 Decision 3: Enqueue failed, UUID not consumed
              showRetryRequiredBlock(response.msg || "Oops, something went wrong — we couldn't process your payment. Please try again.");
              resetSubmitBtnUI();
              // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid for retry
              sessionId = uuid.v4(); window.sessionId = sessionId;
              $("#uuid").val(sessionId);
              console.log("[ADR-0003] enqueue_failed: Fresh UUID generated:", sessionId);
              $("#sim_scenario").val("");
              $("#sim_delay_ms").val("");
              $("#sim-armed-indicator").hide();
              simPollCount = 0;
              hasScrolledToProcessingThisAttempt = false;
              hasScrolledToTerminalOutcomeThisAttempt = false;
            }
            else if(response.result == "error" && response.status == "not_found")
            {
              // ADR-0003: UUID not found, start fresh
              showRetryRequiredBlock(response.msg || "This payment session is no longer active. Please try again.");
              resetSubmitBtnUI();
              // ADR-0003: Auto-regenerate UUID — backend requires_new_uuid for retry
              sessionId = uuid.v4(); window.sessionId = sessionId;
              $("#uuid").val(sessionId);
              console.log("[ADR-0003] not_found: Fresh UUID generated:", sessionId);
              $("#sim_scenario").val("");
              $("#sim_delay_ms").val("");
              $("#sim-armed-indicator").hide();
              simPollCount = 0;
              hasScrolledToProcessingThisAttempt = false;
              hasScrolledToTerminalOutcomeThisAttempt = false;
            }
            else if(response.result == "error" && response.status == "validation_error")
            {
              // Validation error from v2 endpoint
              showGenericError(response.msg);
              resetSubmitBtnUI();
            }
            else if(response.result == "error")
            {
              // Generic error fallback
              console.log(response);
              let errorMsg = response.msg;
              showErrorBlock(errorMsg);
              resetSubmitBtnUI();
            }
            else
            {
              // Unrecognized response — treat as non-terminal (wait, do not retry)
              console.log("Unrecognized v2 response:", response);
              takingLongerThanUsual();
              startCheckoutTimer();
            }
            // Auto-clear simulation params after response
            $("#sim_scenario").val("");
            $("#sim_delay_ms").val("");
            $("#sim-armed-indicator").hide();
          },
          error: function(xhr, status, error) {
            // console.log('Error:', error);     
            // showErrorBlock(error);  
          }
        });
      }

      // Form submission step 3/3
      $("form").submit(async function(e) 
      {
        e.preventDefault();

        resetSubmissionUI();

                  if (eval($("#a").text()) != $("#b").val()) 
          {
            alert("The answer you entered to the skill testing question is incorrect");
            return false;
          }
                
        console.log("\n===== inside .submit() ======");
        console.log("> Running validation...");
        
        if (window._adrResubmitBypassValidation) {
          window._adrResubmitBypassValidation = false;
          console.log("[ADR-0003 RESUBMIT] Bypassing allGood() validation for simulation replay");
        } else {
          if(!allGood())
          {
            return false;
          }
        }

        console.log("=> Validation Succeeded...");

        // commenting out for now so I can click it over and over again
        // $(".submitBtn").attr("disabled", "disabled"); // disable the submit button so user can't initiate multip requests
        
        // $(".submitBtn").text("Validating Payment Info...");
        // $(".submitBtn").text("Processing Payment...");
        //!!!!!

        console.log("> Tokeizing Payment Info...");

        if($("#testingFlow").val() == "true")
        {
          handleCreditCardPaymentKey("bypass-epay-cc");
          // $("#testCase").val(gpbn("testCase"));
        }
        else if($("#testingFlow").val() == "cc" || $("#testingFlow").val() == "credit" || $("#testingFlow").val() == "debit") {
          handleCreditCardPaymentKey("bypass-epay-cc");
        }
        else if($("#testingFlow").val() == "check" || $("#testingFlow").val() == "ach") {
          handleCheckPaymentKey("bypass-epay-check-ach");
        }
        else 
        {
          if(gSelectedPaymentMethod == "credit")
          {
            // set the merchantKey input field to the credit and check/ach merchant key,
            let creditAndCheckMerchantKey = $("#creditAndCheckMerchantKey").val();
            $("#merchantKey").val(creditAndCheckMerchantKey);

            // Freeze inputs during BIN lookup processing
            freezePaymentInputs();

            let tokenizeResult = await tokenizeCreditCardData();
            if(tokenizeResult.result == "success")
            {
              // BIN lookup happens inside tokenizeCreditCardData()
              // After it completes, handleBinLookupResult() will have been called
              // Now check if we should proceed or stop

              // PROTECTED BEHAVIOR: If auto-switch occurred, STOP and require user to click again.
              // This second-click requirement is correct behavior — the user must see and confirm
              // the updated payment method/amount before payment proceeds. Do not remove.
              if (binLookupAutoSwitchOccurred) {
                console.log("Auto-switch occurred, stopping payment flow - user must click 'Process Payment' again");
                unfreezePaymentInputs();
                resetSubmitBtnUI();
                // Reset flag for next submission
                binLookupAutoSwitchOccurred = false;
                return false;
              }

              // ADR-0001: If BIN lookup failed, permanently block card payment
              // No confirm-and-proceed path - user must use ACH/check or try again later
              if (binLookupFailureConfirmed) {
                console.log("❌ BIN lookup failed — card payment is permanently blocked for this transaction");
                console.log("   User must switch to ACH/check or try again later");
                unfreezePaymentInputs();
                resetSubmitBtnUI();
                return false; // Don't reset flag — card payment remains blocked
              }

              // If mismatch was detected and user needs to take action, stop here
              if (binLookupPerformed && binLookupDetectedType) {
                const effectiveDetectedType = (binLookupDetectedType === "prepaid") ? "debit" : binLookupDetectedType;

                console.log("🔍 Validation Check:", {
                  binLookupPerformed: binLookupPerformed,
                  binLookupDetectedType: binLookupDetectedType,
                  effectiveDetectedType: effectiveDetectedType,
                  gSelectedPaymentMethod: gSelectedPaymentMethod,
                  mismatch: (gSelectedPaymentMethod !== effectiveDetectedType)
                });

                if (gSelectedPaymentMethod !== effectiveDetectedType) {
                  // Mismatch - don't proceed with payment
                  console.log("❌ MISMATCH DETECTED - BLOCKING PAYMENT");
                  console.log(`   Selected: ${gSelectedPaymentMethod}, Detected: ${effectiveDetectedType}`);

                  // Only show submission error if there's NO inline BIN lookup message already visible
                  // (inline message from reEvaluateBinLookupMatch is shown when user switches payment types)
                  if (!$('#binLookupResult').is(':visible')) {
                    // Show error message to user explaining the mismatch
                    let feePercentage = gCcFeePercentage;
                    let errorMsg = "";

                    if (gSelectedPaymentMethod === "credit" && effectiveDetectedType === "debit") {
                      // CRITICAL: Cannot surcharge debit cards
                      errorMsg = `
                        <div style="color: #991b1b; font-weight: bold; margin-bottom: 10px;">
                          ⚠️ Payment type mismatch detected
                        </div>
                        <div style="margin-bottom: 8px;">
                          You have selected <strong>Credit Card</strong> as payment method, but the card you entered is a <strong>Debit Card</strong>.
                        </div>
                        <div>
                          Please either:
                          <ul style="margin: 8px 0 0 20px;">
                            <li>Select <strong>Debit Card</strong> as the payment method and click <strong>Process Payment</strong>, OR</li>
                            <li>Clear the card field and enter a <strong>Credit Card</strong></li>
                          </ul>
                          <div style="margin-top: 10px; font-style: italic;">If you enter a different card, please double-check your billing address before continuing.</div>
                        </div>
                      `;
                    } else if (gSelectedPaymentMethod === "debit" && effectiveDetectedType === "credit") {
                      errorMsg = `
                        <div style="color: #991b1b; font-weight: bold; margin-bottom: 10px;">
                          ⚠️ Payment type mismatch detected
                        </div>
                        <div style="margin-bottom: 8px;">
                          You have selected <strong>Debit Card</strong> as payment method, but the card you entered is a <strong>Credit Card</strong>.
                        </div>
                        <div>
                          Please either:
                          <ul style="margin: 8px 0 0 20px;">
                            <li>Select <strong>Credit Card</strong> as the payment method (a ${feePercentage}% processing fee will apply) and click <strong>Process Payment</strong>, OR</li>
                            <li>Clear the card field and enter a <strong>Debit Card</strong></li>
                          </ul>
                          <div style="margin-top: 10px; font-style: italic;">If you enter a different card, please double-check your billing address before continuing.</div>
                        </div>
                      `;
                    }

                    $(".submissionErrors").html(errorMsg);
                    $(".submissionErrors").show();

                    // Scroll to inline message (which is closer to the card field) rather than submission error
                    $('#binLookupResult')[0]?.scrollIntoView({behavior: 'smooth', block: 'center'});
                  } else {
                    // Inline message already visible, just scroll to it
                    $('#binLookupResult')[0]?.scrollIntoView({behavior: 'smooth', block: 'center'});
                  }

                  unfreezePaymentInputs();
                  resetSubmitBtnUI();
                  return false;
                }

                console.log("✅ Match confirmed - proceeding with payment");
              }

              // Match or no BIN lookup performed - proceed with payment
              unfreezePaymentInputs();
              handleCreditCardPaymentKey(tokenizeResult.key);
            }
            else
            {
              // show an error
              unfreezePaymentInputs();
              $(".submissionErrors").show();
              handleCreditCardError(tokenizeResult.message);
              resetSubmitBtnUI();
              return false;
            }
          }
          // new - enabling-debit - this is the EXACT same code as for credit - it's separate right now, but i'll probably combine them
          // after ensuring I don't need to pass in anything specific to the backend for debit payments
          else if(gSelectedPaymentMethod == "debit")
          {
              // Use the same tokenization as credit cards since they share the same fields
              let creditAndCheckMerchantKey = $("#creditAndCheckMerchantKey").val();
              $("#merchantKey").val(creditAndCheckMerchantKey);

              // Freeze inputs during BIN lookup processing
              freezePaymentInputs();

              let tokenizeResult = await tokenizeCreditCardData();
              if(tokenizeResult.result == "success")
              {
                  // BIN lookup happens inside tokenizeCreditCardData()
                  // After it completes, handleBinLookupResult() will have been called
                  // Now check if we should proceed or stop

                  // PROTECTED BEHAVIOR: If auto-switch occurred, STOP and require user to click again.
                  // This second-click requirement is correct behavior — the user must see and confirm
                  // the updated payment method/amount before payment proceeds. Do not remove.
                  if (binLookupAutoSwitchOccurred) {
                    console.log("Auto-switch occurred, stopping payment flow - user must click 'Process Payment' again");
                    unfreezePaymentInputs();
                    resetSubmitBtnUI();
                    // Reset flag for next submission
                    binLookupAutoSwitchOccurred = false;
                    return false;
                  }

                  // ADR-0001: If BIN lookup failed, permanently block card payment
                  // No confirm-and-proceed path - user must use ACH/check or try again later
                  if (binLookupFailureConfirmed) {
                    console.log("❌ BIN lookup failed — card payment is permanently blocked for this transaction");
                    console.log("   User must switch to ACH/check or try again later");
                    unfreezePaymentInputs();
                    resetSubmitBtnUI();
                    return false; // Don't reset flag — card payment remains blocked
                  }

                  // If mismatch was detected and user needs to take action, stop here
                  if (binLookupPerformed && binLookupDetectedType) {
                    const effectiveDetectedType = (binLookupDetectedType === "prepaid") ? "debit" : binLookupDetectedType;

                    console.log("🔍 Validation Check:", {
                      binLookupPerformed: binLookupPerformed,
                      binLookupDetectedType: binLookupDetectedType,
                      effectiveDetectedType: effectiveDetectedType,
                      gSelectedPaymentMethod: gSelectedPaymentMethod,
                      mismatch: (gSelectedPaymentMethod !== effectiveDetectedType)
                    });

                    if (gSelectedPaymentMethod !== effectiveDetectedType) {
                      // Mismatch - don't proceed with payment
                      console.log("❌ MISMATCH DETECTED - BLOCKING PAYMENT");
                      console.log(`   Selected: ${gSelectedPaymentMethod}, Detected: ${effectiveDetectedType}`);

                      // Only show submission error if there's NO inline BIN lookup message already visible
                      // (inline message from reEvaluateBinLookupMatch is shown when user switches payment types)
                      if (!$('#binLookupResult').is(':visible')) {
                        // Show error message to user explaining the mismatch
                        let feePercentage = gCcFeePercentage;
                        let errorMsg = "";

                        if (gSelectedPaymentMethod === "credit" && effectiveDetectedType === "debit") {
                          // CRITICAL: Cannot surcharge debit cards
                          errorMsg = `
                            <div style="color: #991b1b; font-weight: bold; margin-bottom: 10px;">
                              ⚠️ Payment type mismatch detected
                            </div>
                            <div style="margin-bottom: 8px;">
                              You have selected <strong>Credit Card</strong> as payment method, but the card you entered is a <strong>Debit Card</strong>.
                            </div>
                            <div>
                              Please either:
                              <ul style="margin: 8px 0 0 20px;">
                                <li>Select <strong>Debit Card</strong> as the payment method and click <strong>Process Payment</strong>, OR</li>
                                <li>Clear the card field and enter a <strong>Credit Card</strong></li>
                              </ul>
                            <div style="margin-top: 10px; font-style: italic;">If you enter a different card, please double-check your billing address before continuing.</div>
                            </div>
                          `;
                        } else if (gSelectedPaymentMethod === "debit" && effectiveDetectedType === "credit") {
                          errorMsg = `
                            <div style="color: #991b1b; font-weight: bold; margin-bottom: 10px;">
                              ⚠️ Payment type mismatch detected
                            </div>
                            <div style="margin-bottom: 8px;">
                              You have selected <strong>Debit Card</strong> as payment method, but the card you entered is a <strong>Credit Card</strong>.
                            </div>
                            <div>
                              Please either:
                              <ul style="margin: 8px 0 0 20px;">
                                <li>Select <strong>Credit Card</strong> as the payment method (a ${feePercentage}% processing fee will apply) and click <strong>Process Payment</strong>, OR</li>
                                <li>Clear the card field and enter a <strong>Debit Card</strong></li>
                              </ul>
                            <div style="margin-top: 10px; font-style: italic;">If you enter a different card, please double-check your billing address before continuing.</div>
                            </div>
                          `;
                        }

                        $(".submissionErrors").html(errorMsg);
                        $(".submissionErrors").show();

                        // Scroll to inline message (which is closer to the card field) rather than submission error
                        $('#binLookupResult')[0]?.scrollIntoView({behavior: 'smooth', block: 'center'});
                      } else {
                        // Inline message already visible, just scroll to it
                        $('#binLookupResult')[0]?.scrollIntoView({behavior: 'smooth', block: 'center'});
                      }

                      unfreezePaymentInputs();
                      resetSubmitBtnUI();
                      return false;
                    }

                    console.log("✅ Match confirmed - proceeding with payment");
                  }

                  // Match or no BIN lookup performed - proceed with payment
                  unfreezePaymentInputs();
                  handleCreditCardPaymentKey(tokenizeResult.key);
              }
              else
              {
                  unfreezePaymentInputs();
                  $(".submissionErrors").show();
                  handleCreditCardError(tokenizeResult.message);
                  resetSubmitBtnUI();
                  return false;
              }
          }
          // [re-enable-apple-pay]
          else if(gSelectedPaymentMethod === "applePay")
          {
            // set the merchantKey input field to the apple pay merchant key, 
            let applePayMerchantKey = $("#applePayMerchantKey").val();
            $("#merchantKey").val(applePayMerchantKey);

            // On the Apple Pay authorization popup (where user authorizes using Touch or Face ID
            // show the correct values for the Customer Name, Company Name, and Amount
            applePayConfig["paymentRequest"]["total"]["amount"] = $("[name='UMamount']").val();
            applePayConfig["paymentRequest"]["billingContact"]["givenName"] = $("[name='UMbillfname']").val();
            applePayConfig["paymentRequest"]["billingContact"]["familyName"] = $("[name='UMbilllname']").val();
            applePayConfig["paymentRequest"]["billingContact"]["phoneNumber"] = $("[name='UMbillphone']").val();
            applePayConfig["paymentRequest"]["billingContact"]["emailAddress"] = $("[name='UMemail']").val();
            applePayConfig["paymentRequest"]["billingContact"]["postalCode"] = $("[name='UMbillzip']").val();
              
            let tokenizeResult = await tokenizeApplePayData();
            if(tokenizeResult.result == "success")
            {
              // alert("apple pay tokenization succeeded.");
              // console.log("CREDIT payment key is", tokenizeResult.key);
              // return false;
              console.log('the payment keys is:', tokenizeResult.key);

              // inserts the payment key into the form so it's included in the epay_data
              handleCreditCardPaymentKey(tokenizeResult.key); 
            }
            else
            {
              // show an error
              $(".submissionErrors").show();
              handleCreditCardError(tokenizeResult.message);
              resetSubmitBtnUI();
              return false;
            }  
          }  
          else if(gSelectedPaymentMethod == "check")
          {
            // set the merchantKey input field to the credit and check/ach merchant key, 
            let creditAndCheckMerchantKey = $("#creditAndCheckMerchantKey").val();
            $("#merchantKey").val(creditAndCheckMerchantKey);

            // try
            // {
              let tokenizeResult = await tokenizeCheckData();
              console.log("tokenizeResult:", tokenizeResult);
              if(tokenizeResult.result == "success")
              {
                // console.log('----tokenized successfully.');
                // console.log("CHECK payment key is", tokenizeResult.key);
                // return false;
                handleCheckPaymentKey(tokenizeResult.key);
              }
              else
              {
                // console.log('----error tokenizing');
                // show an error
                $(".submissionErrors").show();
                handleCheckError(tokenizeResult.message);
                resetSubmitBtnUI();
                return false;
              }  
            // }
            // catch (err)
            // {
            //   console.log(`caught error ${err}`);
            // }
          }  
        }
        
        // return false; // for now while I resolve ACH tokenization

        console.log("=> Tokenizing Succeeded...");

        submitProcessing(); // commenting out for now...while getting ACH validation working.

        console.log("> Preparing Form data...");

        // $(".submitBtn").text("Preparing Form data...");

        try {
          // ---------------------------------------------------------------------------------------------
          //                          GATHER/MASSAGE THE WHOLE CHECKOUT PAGE'S DATA
          // ---------------------------------------------------------------------------------------------
          let cpData = {};

          // ============================================================================
          // CONSTRUCT CHECKOUT DATA OBJECT
          // ============================================================================
          // IMPORTANT: This object is named "qbo_data" for historical reasons (carried
          // over from ePay flow), but it contains UNIVERSAL checkout data for ALL pages,
          // not just QBO-enabled pages.
          //
          // Fields sent for ALL checkouts (QBO and non-QBO):
          //   - name, amount, rawAmount, rawFee, tip (needed by backend for CpTxn, Auth.net)
          //
          // Fields that can be blank for non-QBO pages:
          //   - client (QBO company key - blank for non-QBO pages)
          //   - intents (QBO actions - blank for non-QBO pages)
          //   - arrival_id (QBO link - blank for non-QBO pages)
          //
          // The backend validates universal fields for ALL requests, and only validates
          // QBO-specific fields when client is present.
          // ============================================================================

          // 1/2 - PREPARE THE 'QBO' DATA (and attach it to the the cpData)
          // ===========================================================
          // previously we attached all this data to the approved URL and in the approved page, prepared this data to send to do_qbo

          // IMPORTANT: Call calcAmount() to ensure gTipAmount, gRawAmount, gRawFee are up-to-date
          // This is critical for Cypress tests where .clear() doesn't trigger keyup/change events
          calcAmount();

          // ADDITIONAL FIX: Directly check tip field value to handle Cypress .clear() edge case
          // If tip field is empty/zero, ensure gTipAmount is 0 (don't rely solely on calcAmount)
          if(gAllowTipping) {
            let currentTipValue = $("#tipAmount").val();
            if(!currentTipValue || currentTipValue === "" || parseFloat(currentTipValue) === 0) {
              gTipAmount = 0;
            }
          }

          let qboData = prepareFormData(); // converted/equivalent from ApprovedV7.html
          let intentsData = prepareIntentions(qboData); // converted/equivalent from ApprovedV7.html
          qboData.intents = intentsData.intents;
          qboData.doingSr = intentsData.doingSr;

          let arrivalId = Date.now().toString();
          qboData.arrival_id = arrivalId;

          cpData.qbo_data = qboData;
          $("#qboData").val(JSON.stringify(qboData)); // storing this so I can convert this string back to JSON in cypress and inspect it's value

          // 2/2 - PREPARE THE EPAY DATA (and attach it to the the cpData)
          // ===========================================================
          // ePay form data
          // updateUrls();

          // ------- This is last minute / final checks and form data updates before submitting form - was in updateUrls() ---------
          // update: May 17 - auto-pay we're assigning UMbillamount here so we set it to the LATEST amount.
          // update Aug 5: not sure about this logic...will reconsider..
          if($("#savePaymentDetails").prop("checked"))
          {
            // commenting this out Sep 27, 2025 as part of actual recurring billing schedule coding
            // because up till now, recurring billing wasn't implemented
            // so this is having no affect - i.e. it's not actually creating a recurring billing schedule in ePay
            // will enable/code it fresh later, as needed
            // if(enableSchedule)
            // {
            //   let finalAmt = $("[name='UMamount']").val();
            //   $("[name='UMbillamount']").val(finalAmt); 
            // }
          }

          // set UMponum (Purchase Order number) to the invoice # 
          var umInvoice = $("[name='UMinvoice']").val();
          $("[name='UMponum']").val(umInvoice);

          // we only need to do this step if the default country is other and there is a dropdown and a different field where user enters the phone number
                    // ------- This is last minute / final checks and form data updates before submitting form - was in updateUrls() ---------

          // Get the ePay form data as a JS object and Attach it to the overall cpData;
          var formElement = document.forms['epayform']; // Get the form element by name
          var ePayFormData = getFormDataAsObject(formElement); // Get the form data as an object
          // console.log(ePayFormData);
          cpData.epay_data = ePayFormData;

          cpData.uuid = sessionId; // send the sessionId/UUID 
          cpData.test_case = $("#testCase").val();
          cpData.single_or_multi = "single";
          cpData.should_have_recurring_schedule = gShouldHaveRecurringSchedule;
          cpData.use_sandbox = $("#useSandbox").val();
          cpData.sim_scenario = $("#sim_scenario").val();
          cpData.sim_delay_ms = $("#sim_delay_ms").val();
          cpData.testing = gpbn("testing");
          cpData.live = gpbn("live");

          gCheckoutData = cpData;
          $("#cpData").val(JSON.stringify(cpData)); // storing this so I can convert this string back to JSON in cypress and inspect it's value
          $("#uuid").val(sessionId); // storing this so I can convert this string back to JSON in cypress and inspect it's value
        } 
        catch (error) {
          // error preparing form data
          console.log(error);
          console.log(`Sending an error email`);
                    
          // Send an email informing me right away
          var subject = "CP Error (ESS) - Error in preparing form data";
          var message = '<b>Error in preparing form data</b><br>';
          message += '<b>Page URL:</b> ';
          message += window.location.toString();
          message += '<br><br>';
          message += `<b>UUID:</b> ${sessionId}`;
          message += '<br><br>';
          message += browserAndOsInfo;
          message += '<br><br>';
          message += `error: ${error}`
          send_email(subject, message); 

          showErrorBlock(error);
          resetSubmitBtnUI();
          return false;
        }

        console.log(gCheckoutData);
        console.log("=> Form Data Prepared Successfully");

        console.log("> Submitting to /checkout");

        // during cypress testing, we don't want to submit the form
        // will optimize later
        if(gpbn("testing") == "cypress")
        {
          return false;
        }

        // instead of calling checkout() directly (i.e. making the AJAX POST call to /checkout)
        // we want to first establish a WebSocket connection, and only when that connection is established
        // do we want to make the AJAX call.
        // why? because the /checkout controller action enqueues the ePayProcessPaymentJob which actually does the work of processing the payment
        // and THAT job needs to be able to reach back to the checkout page (which is what WebSockets is for) to relay the result.
        openWebSocket();

        // // Mar 12, until I get a sandbox account from USAePay and can use test credit cards
        // // i'm going just return false to cancel form submission.
        // if(gpbn("live") !== "" && gpbn("live") == "false") {
        //   return false;
        // }
      });

      // Form submission step 1/3
      $(".submitBtn").on("click", function()
      {
        $("form").submit();
      });    
      });
</script>
<!--------------------- CHECKOUT-RELATED CODE (Stage2 and Stage3) - End ----------------------------->

<!-- // Some recurring payment related code -->
<script type="text/javascript">
  $(function()
  {
    // $("#payment-opts").on("change", function()
    // {
    //   if($(this).val() != "disabled")
    //   {
    //     $(".recurring-custom").show();
    //   }
    //   else
    //   {
    //     $(".recurring-custom").hide();  
    //   }

    //   $("input[name='UMschedule']").val($(this).val());
    // });

    // [exec-stage3]
    try 
    {
      $( "#startDate" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "yy/mm/dd"
      });
    }
    catch (err)
    {
      var subject = "Error applying datepicker";
      console.log(subject);
      var message = '';
      message += '<b>Page URL:</b><br><br>';
      message += window.location.toString();
      message += '<br><br>';
      message += 'error details - name: ' + err.name + ' message: ' + err.message;
      // send_email(subject, message); 
    }  

    $("#startDate").on("change", function()
    {
      cleanDate = replaceAll("/", "", $(this).val());
      $("#startDateVal").val(cleanDate);
    });

    // $("input[name='UMschedule']").val($("#payment-opts option:selected").val());
  });
</script>

<style>
  .headingIcon {
    margin-right: 5px;
  }

  .recurring-info {
    font-size: 16px;
  }
</style>

<main class="row fieldsCtr" role="main">
  <div class="col-xs-12 col-sm-12">

        
    <!-- will move it to a more appropriate spot later, this is just so I don't have to keep scrolling -->
    <!-- <div id="recurring-info2" style="display:none; margin-top: 10px;"></div> -->

    <section data-cy="customer-profile-section">
      <h2>
        <!-- <span>
          <img src="https://freedommerchants.com/images/fmc/cardholderIcon.png" class="icon" alt="cardholder icon" />
        </span> -->
        <i class="fa fa-user headingIcon" aria-hidden="true"></i>
                  Customer Name
              </h2>

      <div class="h-line"></div>

      <!--======================= Customer ID Lookup Feature - START =======================-->
            <!--======================= Customer ** ID ** Lookup Feature - END =======================-->

      <!-- CUSTOMER ** NAME ** LOOKUP -->
      <style>
        @media (max-width: 480px) 
        {
          .billing-name-row {
            flex-direction: column !important;
            gap: 5px !important;
          }

          .billing-name-row .fieldCtr,
          .billing-name-row > div {
            width: 100% !important;
          }

          .billing-name-row .fieldCtr,
          .billing-name-row > div:last-child {
            margin-bottom: 0 !important;
          }

          .spacerElem {
            display: none;
          }
        }
      </style>

      <div class="row rs1">
        <!-- First Name, Last Name and Lookup buttons -->
        <div class="col-sm-12 billing-name-row" style="display:flex; gap: 10px">
          <div class="fieldCtr">
            <div class="lbl" id="billingFirstName">
                              Billing First Name
                          </div>
            <div><input type="text" name="UMbillfname" size="25" value="" id="fName" class="reqd" aria-labelledby="billingFirstName"></div>
          </div>
          <div class="fieldCtr">
            <div class="lbl" id="billingLastName">
                              Billing Last Name
                          </div>
            <div><input type="text" name="UMbilllname" size="25" value="" id="lName" class="reqd" aria-labelledby="billingLastName"></div>
          </div>
          <div class="">
            <div class="lbl spacerElem">
              <span>&nbsp;</span>
            </div>
            <div><div class="btn btn-primary" id="customerNameLookupBtn" data-cy="customer-name-lookup-btn">Find My Account</div></div>
          </div>
        </div>

        <input type="hidden" name="UMname" value="[UMname]">

        <script type="text/javascript">
          $(function()
          {
            $("#fName").on("keyup", function(){$("input[name='UMname']").val($("#fName").val() + " " + $("#lName").val());});
            $("#lName").on("keyup", function(){$("input[name='UMname']").val($("#fName").val() + " " + $("#lName").val());});
          });
        </script>

        <!-- =================================== QBO CUSTOMER SELECTION 1/3 - START =========================================== -->  
        <div class="col-sm-12">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

          <!-- ALL Name Lookup related JS -->
          <script>
            // ------------------------ Variables - START --------------------------
            // var prevFName;
            // var prevLName;
            
            // the MAIN customer selection varaibles
            var customerFound = false;
            var customerId = undefined;

            var existingCustomerNames = []; // not sure

            // used in allGood (validation) function
            var customerEntriesFound = false;
            var customerSelected = false;

            // SAMPLE JSON Response from the Back-end
            // var obj = {result: "success", msg: "found customers", customers: [
            //   {id: "130", displayName: "John M Smith", company: "company 2", firstName: "John", lastName: "Smith"},
            //   {id: "129", displayName: "John Smith", company: "Company 1", firstName: "John", lastName: "Smith"},
            //   {id: "132", displayName: "John Smith fmc-1000", company: "Company 3", firstName: "John", lastName: "Smith"}
            // ]};
            // ------------------------ Variables - END --------------------------

            $(function()
            {
              boldGreen = function(html) {greenBold(html)};
              greenBold = function(html) {
                return `
                  <span style="color: green; font-size: 15px;">${html}</span>
                `;
              }

              boldRed = function(html) {redBold(html)}
              redBold = function(html) {
                return `
                  <b><span style="color: rgb(152, 36, 36); font-size: 15px;">${html}</span></b>
                `;
              }

              hideNameLookupButton = function() {
                $("#customerNameLookupBtn").hide();
              }

              disableNameLookupButton = function() {
                $("#customerNameLookupBtn").attr("disabled", true);
              }

              disableNameFields = function()
              {
                $("#fName").prop("readonly", true);
                $("#lName").prop("readonly", true);
              }

              setNameLookupSuccessMessage = function(msg) {
                $(".customerSuccess").html(msg).show();
              }

              showCustomerNameError = function(message) {
                $(".customerErrors").html(message).show();
              }
              // --------- Helper Functions - END ------------


              // ------------ Initialize - START ----------------
              // [exec-stage3]
              setCustomerFoundAndId(false, undefined);
              // $("#customerFound").val(customerFound);
              // $("#customerId").val(customerId);
              // ------------ Initialize - END ----------------
              

              // --------- MAIN Functions - START ------------
              // MAIN Function - Makes call to the backend
              lookupByName = function() 
              {
                firstNameData = "first_name=" + $("#fName").val();
                lastNameData = "&last_name=" + $("#lName").val();
                clientData = "&client=" + qbclient; 
                postData = firstNameData + lastNameData + clientData;

                qb_url = `${hostUrl}/quickbooks/customer_lookup?callback=nameLookupResult`;
                    
                if(qbclient != "")
                {
                  if(stubCustomerLookup) 
                  {
                    console.log("Ran STUBBED customer lookup!");
                    $(".customerLoading").show();
                    $(".customerData").empty();

                    if( $("#fName").val() == "not" && $("#lName").val() == "found" )
                    {
                      setTimeout(() => {
                        $(".customerLoading").hide();
                        nameLookupResult({"result": "success", "msg": "Couldn't find customer using any means", "customers": [] });  
                      }, 1000);
                    }
                    else
                    {
                      setTimeout(() => {
                        $(".customerLoading").hide();
                        nameLookupResult({"result":"success","msg":"found customers","customers":[{"id":"60","displayName":"Varun Aggarwal","company":null,"firstName":"Varun","lastName":"Aggarwal","suffix":null,"email":"varun@freedommerchants.com","masked_email":"v***n@freedommerchants.com"}]});  
                      }, 1000);
                    }
                  }
                  else 
                  {
                    $(".customerLoading").show();
                    $(".customerData").empty();

                    $.ajax(
                    {
                      url: qb_url, type: "GET", data: postData, dataType: "jsonp", 
                      success: function(data, status, xhr)
                      {
                        if(data.result === "success")
                        {
                          nameLookupResult(data);  
                        }
                        else 
                        {
                           
                            showCustomerNameError(`
                              ${redBold(`🛑 Error: ${data.msg}.`)}
                              <br> 💡 You can wait a bit and try again, or if you continue to get errors,
                              <br> 💡 Please take a screenshot and email our <a href="mailto:support@freedommerchants.com">Support team</a>.
                            `);
                           
                        }
                      },
                      error: function(xhr, status, errorThrown)
                      {
                        console.log("AJAX ERROR:");
                        console.log("Status:", status);
                        console.log("Error thrown:", errorThrown);
                        console.log("XHR:", xhr);

                         
                          showCustomerNameError(`
                            ${redBold("🛑 An unknown error occurred.")}
                            <br> 💡 You can wait a bit and try again, or if you continue to get errors,
                            <br> 💡 Please take a screenshot and email our <a href="mailto:support@freedommerchants.com">Support team</a>.
                          `);
                           
                      }, 
                      complete: function() {
                        $(".customerLoading").hide(); 
                        $("#customerNameLookupBtn").attr("disabled", false);
                      },
                      timeout: 5000 // sets timeout to 5 seconds
                    });  
                  }

                }  
              }

              // Handle the API Result
              nameLookupResult = function(data)
              {
                console.log(data);

                hideNameLookupButton();

                customerEntriesFound = false;
                customerSelected = false;
                customerData = data.customers;

                // LOGIC: if no customers found, we'll create a new one.  If one customer is found, show user that option so they can
                // either select the exisitng one, or select 'no, I don't see my name in the list above'
                if(customerData.length >= 1)
                {
                  customerEntriesFound = true;

                  // ----------------- HTML construction and addition - START -------------
                  // Construct the HTML
                  customerHtml = "<ul>";

                  // Construct and add the Header
                  liHeaderHtml = `
                    <li class='header'>
                      We found ${customerData.length} ${customerData.length === 1 ? 'customer': 'customers'} in our records that matches your name.  <br> Please <b>SELECT</b> if this is you <br>OR click <b>'My name is not listed above, I am a New Customer'</b>
                    </li>
                  `;
                  customerHtml += liHeaderHtml;

                  // Construct and add HTML for each customer
                  for(i=0; i<customerData.length; i++)
                  {
                    custId = customerData[i]["id"];
                    customerName = customerData[i]["displayName"];
                    customerCompany = customerData[i]["company"];
                    // customerEmail = customerData[i]["email"];
                    customerEmail = customerData[i]["masked_email"];
                    customerPhone = customerData[i]["phone"];
                    customerAddress = customerData[i]["address"];
                    customerSuffix = customerData[i]["suffix"];

                    if(customerCompany == undefined){customerCompany = "N/A";}
                    if(customerEmail == undefined){customerEmail = "";}
                    if(customerPhone == undefined){customerPhone = "";}
                    if(customerAddress == undefined){customerAddress = "";}
                    if(customerSuffix == undefined){customerSuffix = "";}

                    existingCustomerNames.push(customerName.toLowerCase()); 

                    if(customerSuffix != "" && customerName.indexOf("fmc-") != -1)
                    {
                      // console.log('customer name with suffix: ' + customerName);
                      customerName = customerName.replace(customerSuffix, "");
                      customerName = customerName.trim();
                      // console.log('customer has suffix');
                      // console.log('customer name without suffix: ' + customerName);
                    }

                    // liItemHtml = `
                    //   <li class="item" customerId="${custId}">
                    //     ${titleCase(customerName)}
                    //     ${customerCompany ? `<span class="company">(${customerCompany})</span>` : ""}
                    //     <div class="extraInfo">
                    //       ${customerCompany ? customerCompany : ""}
                    //       ${customerEmail ? `${dot} ${customerEmail}` : ""}
                    //       ${customerPhone && customerPhone !== "undefined" ? `${dot} ${customerPhone}` : ""}
                    //       ${customerAddress ? `${dot} ${customerAddress}` : ""}
                    //     </div>
                    //     <i class="fa fa-check"></i>
                    //   </li>
                    // `;

                    liItemHtml = `
                      <li class="item" customerId="${custId}" style="display: flex; gap: 10px">
                        <div>
                          <input type="radio" name="chosenCustomer">
                        </div>
                        <div>
                          ${titleCase(customerName)}
                          ${customerCompany ? `<span class="company">(${customerCompany})</span>` : ""}
                          <div class="extraInfo">
                            ${customerCompany ? customerCompany : ""}
                            ${customerEmail ? `${dot} ${customerEmail}` : ""}
                            ${customerPhone && customerPhone !== "undefined" ? `${dot} ${customerPhone}` : ""}
                            ${customerAddress ? `${dot} ${customerAddress}` : ""}
                          </div>
                          <i class="fa fa-check"></i>
                        </div>
                      </li>
                    `;

                    customerHtml += liItemHtml;
                  }

                  // Construct and add the Footer
                  liFooterHtml = `
                    <li class='liFooter' style="display:flex; gap:10px;">
                      <div>
                        <input type="radio" name="chosenCustomer" />
                      </div>
                      <div>
                        My name is not listed above, I'm a New Customer.</span>
                        <i class='fa fa-check'></i>
                      </div>
                    </li>
                  `;
                  customerHtml += liFooterHtml;
                  customerHtml += "</ul>";
                  $(".customerData").append(customerHtml);  
                  // ---------------- HTML construction and addition - DONE --------------

                  // refining-ui
                  setNameLookupSuccessMessage(`
                    💡 If you entered the name incorrectly, or want to try locating your account using a different name,
                    <br> ${tab} you can <a id="resetNameLookup" data-cy='reset-name-lookup-link'>re-try account lookup.</a>
                  `);

                  disableNameFields();
                }
                // Customer NOT found using Name
                else
                {
                  // customerFound = false;
                  // customerId = 0;
                  // $("#customerFound").val(customerFound);
                  // $("#customerId").val(customerId);

                  setCustomerFoundAndId(false, 0);
                  hideNameLookupButton();
                  disableNameFields();

                  // refining customer selection
                   
                    setNameLookupSuccessMessage(`
                      ${greenBold("✅ <b>Looks like you don't have an existing customer profile, so a new one will be created.</b>")}
                      <br> 💡 If you entered the name incorrectly, or want to try locating your account using a different name,
                      <br> ${tab} you can <a id="resetNameLookup" data-cy='reset-name-lookup-link'>re-try account lookup.</a>
                    `);
                  
                  customerSelectionMethod = "NAME";

                                  }
              }

              // Main trigger
              // $("#fName, #lName").on("blur", function()
              // [function logic can be simplified and made cleaner]
              $("#customerNameLookupBtn").on("click", function()
              {
                if(customerSelectionMethod === "ID") return;
                if(pageMode === "invoicePayment") return;

                fName = $("#fName").val();
                lName = $("#lName").val();

                // Added Mar 22, 2023 - It removes all leading and tailing spaces and ensures the search goes through correctly and works regardless.
                if(fName != "") {
                  fName = fName.trim();
                  $("#fName").val(fName);
                  fName = fName.toLowerCase();
                }

                if(lName != "") {
                  lName = lName.trim();
                  $("#lName").val(lName);
                  lName = lName.toLowerCase();
                }
                // set UMname
                $("input[name='UMname']").val(`${$("#fName").val()} ${$("#lName").val()}`);

                // if(fName != "" && lName != "" && (fName != prevFName || lName != prevLName) )
                if(fName != "" && lName != "")
                {
                    
                    
                  disableNameLookupButton();
                  $(".customerErrors").hide();
                  $(".customerSuccess").hide();
                  $(".customerSelectionError").remove(); // remove the customer selection error div

                  // reset the customerFound and customerId variables
                  setCustomerFoundAndId(false, undefined);

                  // prevFName = fName;
                  // prevLName = lName;

                  lookupByName();
                }
              });

              // When a Customer or Footer is selected
              $(".customerData").on("click", "li", function()
              {
                // don't do anything if the header is clicked, the header shouldn't be clickable
                if($(this).hasClass("header")) { return }

                // Unselect everything, then select THIS customer
                $(".customerData li").removeClass("selected");
                $(".customerData li .fa").hide();
                $(this).addClass("selected");
                $(this).find(".fa").show();

                // Hide any customer errors because now we've selected something (a customer or the footer)
                $(".customerErrors").text("");
                $(".customerErrors").hide();

                // if an existing CUSTOMER is selected
                if(!$(this).hasClass("liFooter"))
                {
                  // check the radio button
                  $(this).find("[type='radio']").prop("checked", true);

                   
                    // refining customer selection
                    setNameLookupSuccessMessage(`
                      ${greenBold('✅ <b>Great! The transaction will be linked to your account.</b>')}
                      <br> 💡 If you entered the name incorrectly, or want to try locating your account using a different name,
                      <br> ${tab} you can <a id="resetNameLookup" data-cy='reset-name-lookup-link'>re-try account lookup.</a>             
                    `);
                     
                  
                  customerFound = true;
                  customerId = $(".customerData li.selected").attr("customerId"); 
                  setCustomerFoundAndId(customerFound, customerId);

                  customerSelectionMethod = "NAME";
                }
                // if 'my name is not listed here' is selected
                else
                {
                  // create a name using first and last name, and a created suffix fmc-1
                  // then make sure it's not in the list already
                  // then set suffix field and pass to approved page.
                  // console.log("selected liFooter");
                  
                  // check the radio button
                  $(this).find("[type='radio']").prop("checked", true);

                  let iterator = 1;
                  // suffix = fmc-" + iterator.toString();
                  suffix = `fmc-${iterator.toString()}`;
                  newCustomerName = `${$("#fName").val().toLowerCase()} ${$("#lName").val().toLowerCase()} ${suffix}`;
                  
                  // keep looping until we have a customer name that doesn't exist
                  while($.inArray(newCustomerName, existingCustomerNames) != -1)
                  {
                    //console.log('iterating');
                    iterator += 1;
                    suffix = "fmc-" + iterator;
                    newCustomerName = $("#fName").val().toLowerCase() + " " + $("#lName").val().toLowerCase() + " " + suffix;
                  }

                  $("[name='suffix']").val(suffix);
                  console.log("new customer name: " + newCustomerName);

                   
                    setNameLookupSuccessMessage(`
                      ${greenBold('✅ <b>Great! A new customer profile will be created and the transaction will be linked to it.</b>')}
                      <br> 💡 If you entered the name incorrectly, or want to try locating your account using a different name,
                      <br> ${tab} you can <a id="resetNameLookup" data-cy='reset-name-lookup-link'>re-try account lookup.</a>
                    `);
                     

                  // customerFound = false;
                  // customerId = 0;
                  // $("#customerFound").val(customerFound);
                  // $("#customerId").val(customerId);
                  setCustomerFoundAndId(false, 0);

                  customerSelectionMethod = "NAME";
                }

                customerSelected = true;
              });
              // --------- MAIN Functions - END ------------
            });
          </script>

          <!-- ALL Name Lookup related CSS -->
          <style>
            input[type='text']:disabled {
              cursor: not-allowed;
            }
            .customerData ul{
              margin: 0;
              padding: 0;
              list-style-type: none;
              border: 1px solid #eee;
              border-radius: 5px;
              margin-top: 10px;
              box-shadow: 0 2px 2px #ddd;
            }

            .customerData ul li{
              padding: 10px;
              font-size: 14px;
              font-weight: bold;
              border-bottom: 1px solid #eee;
              cursor: pointer;
              position: relative;
            }

            /* Added Apr 8, 2025 - to fix the java.lang.string "" issue */
            /* make the header cursor default to indicate that it's NOT clickable */
            .customerData ul li.header {
              cursor: default; /* or 'auto' */
            }

            .customerData li:hover{
              /*color: #fff;*/
              /*background: #1a789c;*/
              /* background: #fafafa; */
              background:rgb(228, 240, 248);
            }

            .customerData li.selected{
              /*color: #fff;*/
              /*background: #1a789c;*/
              /*background: #f3f3f3;*/
              background: #e7ecf5;
            }

            .customerData ul li:first-child{
              border-radius: 5px 5px 0 0 ;
            }

            .customerData ul li:last-child{
              border-bottom: 0;
              border-radius: 0 0 5px 5px;
            }

            .customerData ul li .company{
              font-size: 12px;
              font-weight: normal;
              color: #999;
              display: none;
            }

            .customerData li.header{
              background: #1a789c;
              color: #fff;
              font-weight: normal;
              font-size: 14px;
            }

            .item .fa, .liFooter .fa{
              /*float: right;*/
              position: absolute;
              right: 10px;
              top: 10px;
              display: none;
            }

            .customerData li.liFooter{
              color: #bd2a2a;
              font-weight: normal;
              font-size: 14px;
            }

            .customerData li.liFooter.selected{
              background: #f7e4e3;
            }

            .customerData li.liFooter .fa{
              color: #bd2a2a;
            }

            .customerLoading
            {
              margin-top: 10px;
              display: none;
            }

            .customerSuccess {
              display: none;
            }

            .customerData li .extraInfo{
              font-size: 11px;
              font-weight: normal;
              margin-top: 2px;
              color: #888;
              font-style: italic;
            }

            .customerData li .dot{
              margin-left: 3px;
              margin-right: 3px;
            }

            .customerErrors
            {
              color: #d50707;
              font-size: 14px;
              margin-top: 10px;
              margin-bottom: 10px;
              display: none;
            }

            .customerSelectionError
            {
              color: #d50707;
              font-size: 15px;
              margin-top: 5px;
              text-align: center;
            }
          </style>

          <!-- ALL Name Lookup related HTML -->
          <div class="row rs1">
            <input type="hidden" name="suffix" style="width: 100px" placeholder="new customer's name" />

            <div class="col-sm-12 customerLoading" data-cy="customer-name-loading">
              <img src="https://freedommerchants.com/images/fmc/fmcajaxloader.gif" alt="loading indicator icon" />
            </div>

            <div class="col-sm-12 customerData">
              <!-- <ul>
                <li class='header'>
                  We found 2 customers with the same name.  Please select one
                </li>
                <li class="item" customerId="1">
                  John M Smith <span class='company'>(company 1)</span>
                  <div class='extraInfo'>
                    company 1 <span class='dot'>&middot;</span> 123-456-7890 <span class='dot'>&middot;</span> invoice_amount_result@world.com <span class='dot'>&middot;</span> 123 main st, New York, NY, 10016</div>
                  <i class="fa fa-check" ></i>
                </li>
                <li class="item" customerId="2">
                  John Smith <span class='company'>(company 2)</span>
                  <div class='extraInfo'>123-456-7890 <span class='dot'>&middot;</span> invoice_amount_result@world.com <span class='dot'>&middot;</span> 123 main st, New York, NY, 10016</div>
                  <i class="fa fa-check" ></i>
                </li>
                <li class="liFooter">
                  My name is not listed above.</span>
                  <i class="fa fa-check" ></i>
                </li>
              </ul>  -->
            </div>

            <div class="col-sm-12 customerErrors" data-cy="customer-errors">
              <!-- Any name lookup error messages will be appended here -->
            </div>

            <div class="col-sm-12 customerSuccess" style="margin-block: 10px;" data-cy="customer-name-success">
              <!-- The name lookup success messages will be appended here -->
            </div> 
          </div><!-- end row -->
        </div><!-- end col12 -->
        <!-- ======================================= QBO CUSTOMER SELECTION 1/3 - END ============================================== -->
      </div>
    </section>
    <!-- customer-profile-section  -->

    <p>&nbsp;</p>

    
    <section data-cy="cardholder-billing-info-section">
      <h2>
        <!-- <span>
          <img src="https://freedommerchants.com/images/fmc/cardholderIcon.png" class="icon" alt="cardholder icon" />
        </span> -->
        <i class="fa fa-id-card-o headingIcon" aria-hidden="true"></i>
        <!-- 123123 -->
         
          Billing Information              </h2>

      
      <div class="h-line"></div>

      <div class="row rs1">
        <div class="col-sm-5 fieldCtr">
          <div class="lbl" id="email">
                          Email
                      </div>
          <div>
                          <input type="email" name="UMemail" size="25" value="" class="txtField reqd" aria-labelledby="email">
                        <div class="emailErrors">Invalid email format</div>
          </div>
        </div>

        <style>
          .emailErrors, .phoneErrors {
            color: #d50707;
            display: none;
          }
        </style>

        <script type="text/javascript">
          $(function() 
          {
            $("[name='UMemail']").on('focus', function()
            {
              $(".emailErrors").hide();
            });

            $("[name='UMbillphone']").on('focus', function()
            {
              $(".phoneErrors").hide();
            });
          });
        </script>

                  <div class="col-sm-3 fieldCtr">
            <div class="lbl" id="phoneNumber">
                              Phone Number
                          </div>

            <div>
                                                <input type="tel" name="UMbillphone" size="25" class="phone-mask txtField reqd" value="" aria-labelledby="phoneNumber">
                                            <div class="phoneErrors"></div>
            </div>
          </div>  
              </div>

      <!-- Row 2 -->
      <div class="row rs1">
        <div class="col-sm-4 fieldCtr">
          <div class="lbl" id="billingStreetAddress">
                          Billing Street Address
                      </div>

          <div>
                          <input type="text" name="UMbillstreet" size="25" value="" class="reqd"  aria-labelledby="billingStreetAddress">
                      </div>
          <!-- <div><input type="text" name="UMbillstreet" size="25" value="" class="reqd"  aria-labelledby="billingStreetAddress"></div> -->
        </div>
        
                  <div class="col-sm-2 fieldCtr">
            <div class="lbl" id="billingCity">
                              Billing City
                          </div>
            <div>
                              <input type="text" name="UMbillcity" size="25" value="" class="reqd" aria-labelledby="billingCity">
                          </div>
          </div>
                
                  <div class="col-sm-3 fieldCtr">
            <div class="lbl" id="stateProvince">
                                                State
                                          </div>
            <div>
                              <input type="text" name="UMbillstate" size="25" value="" style="text-transform:uppercase;" class="reqd" aria-labelledby="stateProvince">
                          </div>
          </div>
        
        <div class="col-sm-3 fieldCtr">
          <div class="lbl" id="zipPostalCode">
                                          Zip
                                    </div>
          <div><input
                          type="tel"
                        name="UMbillzip" size="25" value="" class="txtField reqd zip-mask" aria-labelledby="zipPostalCode"></div>
        </div>
      </div>

      <!-- Row 3: Card Country (Auth.net only) + Company Name -->
            
    </section>
    <!-- cardholder-billing-info-section -->

    <!-- ======================================== custom coding section - start ======================================== -->
        <!-- ======================================== custom coding section - end ========================================== -->

    <p>&nbsp;</p>

    <!-- ================================================================================================================= -->
    <!--                                            ORDER SUMMARY                                                          -->
    <!-- ================================================================================================================= -->
    <section data-cy="order-summary-section">
      <h2>
        <!-- <span>
          <img src="https://freedommerchants.com/images/fmc/orderSummaryIcon.png" class="icon" alt="order summary icon" />
        </span> -->
        <i class="fa fa-list-alt headingIcon" aria-hidden="true"></i>
         
          Payment Summary                <span class="currencyLabel" data-cy="order-summary-currency-label"></span>
      </h2>
      <div class="h-line"></div>

      <div class="row rs1">
        <div class="col-xs-12 col-sm-4">
          <div class="lbl">
                          Payment Amount 
                      <span class="currencyLabel" data-cy="payment-amount-currency-label"></span></div>
          <div>

            <!-- =============================== PARTIAL INVOICE PAYMENT PART 2/2 - START ==================================== -->
            <img src="https://freedommerchants.com/images/fmc/fmcajaxloader.gif" class="loading" style="display: none" alt="loading indicator icon" />

            <div class="invoiceAmountWidget" style="display: none" cy-data="partial-payment-component">
              Total invoice amount: <b><span class="totalAmt"></span></b>
              <br><br>
              I would like to pay:<br>
              <input type="radio" class="amountOpts" name="paymentAmount" optName="balance" aria-label="Balance" role="radio" checked /> Balance: <span class="balance"></span><br>
              <input type="radio" class="amountOpts" name="paymentAmount" optName="other" role="radio" aria-label="Other Amount" cy-data="other-amount-checkbox"/> Other Amount: <input type="text" class="otherAmount txtField" cy-data="other-amount-textbox" placeholder="$0.00" style="width: 70px" aria-label="other amount">
              <!-- <input type="hidden" name="UMamount" id="UMamount" /> -->
            </div>
            <div class="amountErrors"></div>

            <script>
              $(function()
              {
                // when user clicks the "other amount" textbox, checkmark the radio button beside it
                $(".otherAmount").on("focus", function()
                {
                  $(".amountOpts[optName='other']").prop("checked", true);
                  $(".amountErrors").text('');
                });

                // when user removes mouse from 'Other Amount', set UMamount
                $(".otherAmount").on("blur", function()
                {
                  var otherAmount = parseFloat(cleanAmount($(this).val()));

                  // var otherAmount = parseFloat($(this).val());
                  if(otherAmount <= 0)
                  {
                    $(".amountErrors").text('Please enter a valid Amount');
                    // $("input[name='UMamount']").val(0);
                    setTruthField("UMamount", 0);
                  }
                  else if(otherAmount > balance)
                  {
                    $(".amountErrors").text('You cannot pay more than the invoice balance');
                    // $("input[name='UMamount']").val(0);
                    setTruthField("UMamount", 0);
                  }
                  else
                  {
                    // $("input[name='UMamount']").val(otherAmount);
                    $("#amountField").val(otherAmount);
                    calcAmount();
                    $(".amountErrors").text('');
                  }
                });

                $(".otherAmount").on("keyup", function()
                {
                  otherAmountVal = parseFloat(cleanAmount($(this).val()));

                  if(!isNaN(otherAmountVal) && otherAmountVal > 0 && otherAmountVal <= balance && otherAmountVal != "")
                  {
                    $(".amountErrors").text('');
                    $("#amountField").val(otherAmountVal);
                    calcAmount(); 
                  }
                  else
                  {
                    $(".amountErrors").text('Please enter a valid Amount');
                    $("#amountField").val(0);
                    // $("input[name='UMamount']").val(0);
                    calcAmount(); 
                  }
                });

                // jan28-look-into - where is the variable balance declared
                // handle what happens when user selects paying Balance vs Other Amount
                $(".amountOpts").on("change", function()
                {
                  optName = $(".amountOpts:checked").attr("optName");
                  if(optName == "balance")
                  {
                    // $("input[name='UMamount']").val(balance);
                    setTruthField("UMamount", balance);
                    $("#amountField").val(balance);
                    calcAmount();
                  }
                  else
                  {
                    var otherAmount = parseFloat($(".otherAmount").val()).toFixed(2);
                    // $("input[name='UMamount']").val(otherAmount); 
                    $("#amountField").val(otherAmount);
                    calcAmount();
                  }
                  $(".amountErrors").text('');
                });
              });
            </script>

            <style>
              .amountErrors
              {
                color: rgb(213, 7, 7);
              }
            </style>
            <!-- ================================ PARTIAL INVOICE PAYMENT PART 2/2 - END ====================================== -->

            <input type="text" class="txtField" name="" id="amountField" placeholder="Enter an amount" style="max-width: 150px" aria-label="amount">
            <span class="amt"></span>
            <input type="hidden" name="UMamount" />
          </div>   
        </div>

                  <div class="col-xs-12 col-sm-4 fieldCtr">
          
             
              <div class="lbl" id="invoiceNumber">Payment For</div>
                        <div>
              <!-- Field label IS specified -->
               

                <!-- Placeholder IS specified -->
                   
                  
                  <!-- label starts with a vowel -->
                   
                       
                      <input type="text" class="txtField" name="" id="invoiceField" placeholder="Enter a Payment For" style="max-width: 150px" aria-labelledby="invoiceNumber">
                                        
                                  
              <!-- Field label NOT specified -->
              
              <span class="invoice"></span>
              <input type="hidden" name="UMinvoice" />
            </div>  
          </div>
        
        <!-- !@!@ -->
                  <div class="col-xs-12 col-sm-4">
            <div>
                              <div class="lbl">Note</div>
                                            <div class="desc" data-cy="service-description">Invoicing</div>
                          </div>
          </div>
              </div>

      <!-- ================================== Additional Tip ======================================== -->
      <script>
        var tipAmount = 0;

        $(function()
        {
          // Trigger calcAmount on both keyup (user typing) and change (programmatic clear/set, blur)
          // This ensures Cypress tests work correctly when using .clear() or .type()
          $("#tipAmount").on("keyup change", function()
          {
            calcAmount();
          });

          // [exec]
          if(gAllowTipping)
          {
            $(".tipCtr").show();
          }
        });
      </script>

      <style>
        .orderTotal{
          margin-top: 10px;
          font-weight: bold;
        }

        .tipCtr{
          display: none;
        }

        #tipAmount{
          max-width: 100px;
        }

        #tipDescription {
          max-width: 200px;
        }
      </style>

      <section class='tipCtr' data-cy="tip-section">
        <div class="row rs1">
          <div class="col-xs-12 col-sm-12">
            <div>
                              <div class="lbl" id="additionalTip" data-cy='tip-label'>Additional Tip</div>
                            <div>
                <input type="text" name="" size="25" value="" class="" id="tipAmount" placeholder="enter amount" aria-labelledby="additionalTip">
              </div>

                            
            </div>
          </div>  
        </div>

        <div class="row rs1" style="padding-top: 20px;">
          <div class="col-sm-12">
            <div style='border-top: 1px solid #666'></div>
          </div>
          <div class="col-xs-12 col-sm-3">
            <div>
              <div class="lbl">Order Total</div>
            </div>
          </div>  
          <div class="col-xs-12 col-sm-6">
          </div>  
          <div class="col-xs-12 col-sm-3">
            <div>
              <div class="orderTotal"></div>
            </div>
          </div>  
        </div>
      </section>
      <!-- ================================== Additional Tip ======================================== -->

        
      <script type="text/javascript">
        // feature 10 - the code below was OUTSIDE the (function(){}), but we need it to execute AFTER ?surcharge= is processed
        // so we need to place wit within the document ready.
        $(function()
        {
          // [exec-stage3]
          if(gApplyProcessingFee)
          {
            // not doing any logic here - Jan 27 - tiered surcharging logic is going into calcAmount()
          }
          else {
            gCcFeePercentage = 0;
            gECheckFee = 0
          }
        });

        var calcAmount;

        calcAmount = function()
        {
          console.log("in calcAmount...");

          if (typeof jQuery === "undefined") {
            console.error("jQuery is not loaded yet!");
          } else {
            console.log("jQuery is loaded.");
          }

          let umcommand = $("[name='UMcommand']").val();

          let amountVal = $("#amountField").val();
          amountVal = amountVal.replace(/,/g, "");
          amountVal = amountVal.replace('$', '');
          amountVal = amountVal.replace('-', '');
          amountVal = amountVal.replace(/[:/?#@!&()*+,=_~]/, '');
          amountVal = parseFloat(amountVal);
          if(isNaN(amountVal) || amountVal < 0){amountVal = 0;}

          console.log("payment method is:", gSelectedPaymentMethod);
          // if(umcommand == "cc:sale")
          // apple pay (added umcommand == "applePay")
          // if(umcommand == "cc:sale" || umcommand == "applePay")
          if(gSelectedPaymentMethod == "credit" || gSelectedPaymentMethod == "applePay")
          {
            let baseAmount = parseFloat(amountVal);

            // let amountSoFar = baseAmount;
            let finalAmount;

            // Add any tip amount
            if(gAllowTipping)
            {
              gTipAmount = $("#tipAmount").val();
              gTipAmount = gTipAmount.replace(/,/g, "");
              gTipAmount = gTipAmount.replace("$", "");
              gTipAmount = parseFloat(gTipAmount);
              if(isNaN(gTipAmount) || gTipAmount < 0){gTipAmount = 0;}

              // amountSoFar += parseFloat(gTipAmount);
              // if(isNaN(amountSoFar)){amountSoFar = 0;}
              if(parseFloat(baseAmount) === 0)
              {
                let basePlusTip = parseFloat(0);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));    
              }
              else {
                let basePlusTip = parseFloat(baseAmount + gTipAmount);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));    
              }
            }

            console.log("gApplyProcessingFee", gApplyProcessingFee);
            if(gApplyProcessingFee) 
            {
              // new - Jan 27 - tiered surcharing 
              // assign gCcFeePercentage based on the fee table 
              let ccFee = 0;
              console.log("useFeeTable", useFeeTable);
              if(useFeeTable)
              {
                let ccProcessingFeeData;
                // we're paying an invoice and partial payment is on
                // use the ORIGINAL invoice amount to calculate the fee
                // otherwise use the amountField's value
                if(pageMode === "invoicePayment")
                {
                  // let amountToDetermineSurcharge = gOriginalInvoiceAmount + gTipAmount; // NOT including tip in surcharge tier determination
                  // let amountToDetermineSurcharge = gOriginalInvoiceAmount;
                  // instead of using the typed (base) amount to calculate the surcharge fee
                  // in the case of invoices, if we're partial paying, don't use the partial pay amount, instead use the original invoice amount
                  ccProcessingFeeData = getProcessingFee(gOriginalInvoiceAmount);
                }
                else {
                  // if it's not an invoice payment, or for an invoice payment where we're NOT partial paying
                  // the amount typed or invoice balance IS the whole/base amount
                  // eg. if $18 is typed, use $18 as the surcharge
                  // eg. if $18 is the original invoice amount, since we aren't partial paying, the 'typed' amount is the original invoice amount
                  // ccProcessingFeeData = getProcessingFee(amountSoFar); // [3, 'flat | perc']  
                  ccProcessingFeeData = getProcessingFee(baseAmount); // [3, 'flat | perc']  
                }
                ccFee = ccProcessingFeeData[0];
                ccFeePercOrFlat = ccProcessingFeeData[1]; 
                gCcFeePercentage = ccFee;   

                // to test
                if(ccFeePercOrFlat == "perc")
                {
                  $(".txnFeePerc").text(gCcFeePercentage + "%");  
                  textToAgree = `In paying by Credit card you agree to a ${gCcFeePercentage}% convenience fee.`;
                }
                else
                {
                  $(".txnFeePerc").text("$" + gCcFeePercentage);   
                  textToAgree = `In paying by Credit card you agree to a $${gCcFeePercentage} convenience fee.`;
                }
              }
              // will consider later...
              // improvement on existing tiered surcharging, so we can keep using just applyProcessingFee = true, and ccFeePercentage = 3;
              else {
                ccFee = gCcFeePercentage;
              }
              // new - Jan 27 - end

              // tiered surcharging - show/hide processing fee checkbox based on whether a fee applies or not
              // because based on the tier, the fee COULD be 0
              console.log("ccFee", ccFee);
              if(parseFloat(ccFee) > 0)
              {
                $(".processingFeeCtr").show();   
                $(".processingFeeCtrApplePay").show(); // apple pay
              } 
              else {
                $(".processingFeeCtr").hide();   
                $(".processingFeeCtrApplePay").hide(); // apple pay
              }

              // finalAmount = amountSoFar * (1 + ccFee/100); // old: the surcharge was calculated on base + tip
              let surchargeFee = baseAmount * ccFee/100; // new: surcharge calculated on base only, and tip added after
              if(parseFloat(baseAmount) === 0)
              {
                finalAmount = 0;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);  
              }
              else 
              {
                finalAmount = baseAmount + surchargeFee + gTipAmount; 
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = surchargeFee.toFixed(2);  
              }
            }
            else 
            {
              if(parseFloat(baseAmount) === 0)
              {
                finalAmount = 0;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);   
              }
              else
              {
                finalAmount = baseAmount + gTipAmount;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);     
              }
            }

            if(isNaN(finalAmount))
            {
              finalAmount = 0;
            }
            
            // $("input[name='UMamount']").val(finalAmount.toFixed(2));
            setTruthField("UMamount", finalAmount.toFixed(2));
            $(".finalAmount").text("$" + formatNum(finalAmount.toFixed(2)));
          }
          else if(gSelectedPaymentMethod == "check")
          {
            let baseAmount = parseFloat(amountVal);
            
            // let amountSoFar = amount;
            let finalAmount;

            // console.log('in perc');
            if(gAllowTipping)
            {
              gTipAmount = $("#tipAmount").val();
              gTipAmount = gTipAmount.replace(/,/g, "");
              gTipAmount = gTipAmount.replace("$", "");
              gTipAmount = parseFloat(gTipAmount);
              if(isNaN(gTipAmount) || gTipAmount < 0){gTipAmount = 0;}
              
              if(parseFloat(baseAmount) === 0)
              {
                let basePlusTip = parseFloat(0);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));    
              }
              else {
                // amountSoFar += parseFloat(gTipAmount);
                // if(isNaN(amountSoFar)){amountSoFar = 0;}
                let basePlusTip = parseFloat(baseAmount + gTipAmount);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));  
              }
            }

            if(gApplyProcessingFee) 
            {
              // new - Jan 27 - tiered surcharing 
              // assign gCcFeePercentage based on the fee table 
              let checkAchFee = 0;
              let checkAchFeePercOrFlat;
              if(useAchFeeTable)
              {
                let checkAchProcessingFeeData
                if(pageMode === "invoicePayment")
                {
                  // let amountToDetermineSurcharge = gOriginalInvoiceAmount + gTipAmount; // NOT including tip in surcharge tier determination
                  // let amountToDetermineSurcharge = gOriginalInvoiceAmount;
                  // instead of using the typed (base) amount to calculate the surcharge fee
                  // in the case of invoices, if we're partial paying, don't use the partial pay amount, instead use the original invoice amount
                  checkAchProcessingFeeData = getAchProcessingFee(gOriginalInvoiceAmount);
                }
                else {
                  // if it's not an invoice payment, or for an invoice payment where we're NOT partial paying
                  // the amount typed or invoice balance IS the whole/base amount
                  // eg. if $18 is typed, use $18 as the surcharge
                  // eg. if $18 is the original invoice amount, since we aren't partial paying, the 'typed' amount is the original invoice amount
                  // ccProcessingFeeData = getProcessingFee(amountSoFar); // [3, 'flat | perc']  
                  checkAchProcessingFeeData = getAchProcessingFee(baseAmount); // [3, 'flat | perc']
                }
                
                // main - the checkAchFee and perc/flat is being assigned via the TABLE
                checkAchFee = checkAchProcessingFeeData[0];
                checkAchFeePercOrFlat = checkAchProcessingFeeData[1]; 
                
                gECheckFee = checkAchFee; // simply saving it, no real purpose.

                // to test
                if(checkAchFeePercOrFlat == "perc")
                {
                  $(".eCheckFeeTxt").text(gECheckFee + "%");  
                  textToAgreeCheck = `By paying by check you agree to a ${gECheckFee}% convenience fee.`;
                }
                else
                {
                  $(".eCheckFeeTxt").text("$" + gECheckFee);   
                  textToAgreeCheck = `By paying by check you agree to a $${gECheckFee} convenience fee.`; 
                }
              }
              // will consider later...
              // improvement on existing tiered surcharging, so we can keep using just applyProcessingFee = true, and ccFeePercentage = 3;
              else {
                checkAchFee = gECheckFee; // whatever was assigned to $eCheckFee
                checkAchFeePercOrFlat = eCheckPercOrFlat; // whatever was assigned to $eCheckPercOrFlat
              }
              // new - Jan 27 - end

              // Tiered surcharging - show/hide processing fee checkbox based on whether a fee applies or not
              // because based on the tier, the fee COULD be 0
              parseFloat(checkAchFee) > 0 ? $(".eCheckProcessingFeeCtr").show() : $(".eCheckProcessingFeeCtr").hide();

              let surchargeFee;
              if(checkAchFeePercOrFlat === "perc")
              {
                surchargeFee = baseAmount * checkAchFee/100;
              }
              else if(checkAchFeePercOrFlat === "flat")
              {
                surchargeFee = checkAchFee;
              }

              if(parseFloat(baseAmount) === 0)
              {
                finalAmount = 0;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);
              }
              else {
                finalAmount = baseAmount + surchargeFee + gTipAmount;  
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = surchargeFee.toFixed(2);  
              }
            }
            else
            {
              if(parseFloat(baseAmount) === 0)
              {
                finalAmount = 0;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);
              }
              else {
                finalAmount = baseAmount + gTipAmount;
                gRawAmount = baseAmount.toFixed(2);
                gRawFee = (0).toFixed(2);  
              }
            }            

            if(isNaN(finalAmount))
            {
              finalAmount = 0;
            }

            // $("input[name='UMamount']").val(finalAmount.toFixed(2));
            setTruthField("UMamount", finalAmount.toFixed(2));
            $(".checkFinalAmount").text("$" + formatNum(finalAmount.toFixed(2)));
          }
          else if(gSelectedPaymentMethod == "debit")
          {
            let baseAmount = parseFloat(amountVal);
            
            // let amountSoFar = amount;
            let finalAmount;

            if(gAllowTipping)
            {
              gTipAmount = $("#tipAmount").val();
              gTipAmount = gTipAmount.replace(/,/g, "");
              gTipAmount = gTipAmount.replace("$", "");
              gTipAmount = parseFloat(gTipAmount);
              if(isNaN(gTipAmount) || gTipAmount < 0){gTipAmount = 0;}
              
              if(parseFloat(baseAmount) === 0)
              {
                let basePlusTip = parseFloat(0);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));    
              }
              else {
                // amountSoFar += parseFloat(gTipAmount);
                // if(isNaN(amountSoFar)){amountSoFar = 0;}
                let basePlusTip = parseFloat(baseAmount + gTipAmount);
                $(".orderTotal").text("$" + formatNum(basePlusTip.toFixed(2)));  
              }
            }

            if(parseFloat(baseAmount) === 0)
            {
              finalAmount = 0;
              gRawAmount = baseAmount.toFixed(2);
              gRawFee = (0).toFixed(2);
            }
            else {
              finalAmount = baseAmount + gTipAmount;
              gRawAmount = baseAmount.toFixed(2);
              gRawFee = (0).toFixed(2);  
            }
            
            if(isNaN(finalAmount))
            {
              finalAmount = 0;
            }

            // $("input[name='UMamount']").val(finalAmount.toFixed(2));
            setTruthField("UMamount", finalAmount.toFixed(2));
            // $(".checkFinalAmount").text("$" + formatNum(finalAmount.toFixed(2)));
          }
        }

        $(function()
        {
          // this should be handled by calcAmount
          // since we now have 'dynamic' surcharged because of tiered surcharging
          // investigate--
          initSurchargeFeeText = function()
          {
            // [exec-stage3]
            $(".txnFeePerc").text(gCcFeePercentage + "%");

            // [exec-stage3]
            if(eCheckPercOrFlat == "perc")
            {
              $(".eCheckFeeTxt").text(gECheckFee + "%");  
            }
            else if(eCheckPercOrFlat == "flat")
            {
              $(".eCheckFeeTxt").text("$" + gECheckFee);  
            }
          }

          // MIGRATION NOTE: When applying debit defaultPayType support to multi-page or QBD pages,
          // see: docs/saved-plans/DEBIT_DEFAULT_PAYTYPE_MIGRATION_GUIDE.md
          initPaymentOptionsDisplay = function()
          {
            // [exec-stage3]
            if(showCC)
            {
              $(".ccPaymentType").show();
            }
            else
            {
              $(".ccPaymentType").hide(); 
            }

            // [exec-stage3]
            if(showEcheck)
            {
              $(".checkPaymentType").show();
            }
            else
            {
              $(".checkPaymentType").hide(); 
            }

            if(showDebit)
            {
              $(".debitPaymentType").show();
            }
            else
            {
              $(".debitPaymentType").hide(); 
            }

            // Resolve defaultPayType to an available payment method (handles misconfiguration gracefully)
            defaultPayType = resolveDefaultPayType(defaultPayType);

            // [exec-stage3]
            // investigate--
            var payType = getParameterByName("paytype");
            if(payType == "")
            {
              if(defaultPayType == "credit")
              {
                $(".ccFirst").show();
                $(".checkFirst").hide();
              }
              else if(defaultPayType == "debit")
              {
                // Debit uses the card-based list (same as credit)
                $(".ccFirst").show();
                $(".checkFirst").hide();
                // Note: setInitialPaymentMethod("debit") already selected debit.
                // No .click() needed here (matching the credit case pattern).
              }
              else if(defaultPayType == "check")
              {
                $(".checkFirst").show();
                $(".ccFirst").hide();
                $("[class~=check-ctr]").css("display", "block");
              }
            }
            else
            {
              if(payType == "creditcard" || payType == "credit")
              {
                defaultPayType = "credit";
                $(".ccFirst").show();
                $(".checkFirst").hide();
                $(".checkPaymentType").hide();
              }
              else if(payType == "echeck" || payType == "check")
              {
                defaultPayType = "check";
                $(".checkFirst").show();
                $(".ccFirst").hide();
                $(".ccPaymentType").hide();
                $("[class~=check-ctr]").css("display", "block");
              }
              else if(payType == "debit")
              {
                defaultPayType = "debit";
                $(".ccFirst").show();
                $(".checkFirst").hide();
                // Trigger debit selection via click handler (setInitialPaymentMethod
                // is scoped to a different $(function) block and not accessible here)
                $(".debitPaymentType").first().click();
              }
            }
          }

          initSurchargeFeeText();
          initPaymentOptionsDisplay();

          $("#amountField").on("keyup", function()
          {
            calcAmount();
          });
        });
      </script>

    </section>

     
        <section style="margin-top: 20px">
  <div class="row rs1">
    <style>
      .bondNumError
      {
        color: #d50707;
        display: none;
      }
    </style>
    <div class="col-sm-6">
      <p>Student Full Name <input type="text" class="txtField bondNum" placeholder="Enter Student Full Name" name="UMcustom7" /></p>
      <p>Program Number <input type="text" class="txtField pincipalOnBond" placeholder="Enter Program Number" name="UMcustom8" /></p>
      <div class="bondNumError">Please provide Student Name and Program Number. Thanks!</div>
    </div>
  </div>
</section>          
    <p>&nbsp;</p>

    <style>
      #subscription-section {
        display: none;
      }
    </style>

    <section data-cy="recurring-billing-section" id="subscription-section">
      <h2>
        <!-- <span>
          <img src="https://freedommerchants.com/images/fmc/paymentInfoIcon.png" class="icon" alt="payment information icon" />
        </span> -->
        <i class="fa fa-repeat headingIcon" aria-hidden="true"></i>
        Subscription / Membership
      </h2>
      <div class="h-line"></div>
      <div class="row rs1">
        <div class="col-sm-12">
          <div id="recurring-info" data-cy="recurring-info" style="display:none; margin-top: 10px;"></div>
          <!-- <div id="" style="display: block; margin-top: 10px; color: green;">✅ <b>3</b> quarterly payments of <b>$9.99</b> starting <b>next</b></div>     -->

          <div id="recurring-note" data-cy="recurring-note" style="display:none; margin-top: 5px; color: #b25b00; font-size: 14px;">
            <div style="display: flex; gap: 5px;">
              <div>
                ⚠️
              </div>
              <div>
               For compatibility across all months, any scheduled payments that fall on the 29th, 30th or 31st of the month will instead be charged on 28th. 
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- important that this gap is here inside the section, because this block is conditionally visible -->
      <p>&nbsp;</p>
    </section>

    <!-- ================================================================================================================= -->
    <!--                                            PAYMENT INFORMATION                                                          -->
    <!-- ================================================================================================================= -->
    <section data-cy="payment-info-section">
      <h2>
        <!-- <span>
          <img src="https://freedommerchants.com/images/fmc/paymentInfoIcon.png" class="icon" alt="payment information icon" />
        </span> -->
        <i class="fa fa-lock headingIcon" aria-hidden="true"></i>
        Payment Information
      </h2>

            
      <div class="h-line"></div>
      
      <style>
        [class~=check-ctr] {
            /*display: block;*/
        }
      
        .cardPic, .echeckPic, .debitCardPic {
          width: 40px;
        }

        .applePayPic {
          height:30px;
        }

        .paymentTypeLbl
        {
          vertical-align: -1px; 
          margin-right: 7px;
        }

        .paymentTypesList {
          display: none;
        }

        .paymentType-selected {
          border: 5px solid #52ac0a;
        }

        @media (max-width:480px) {
          .cardPic, .echeckPic, .debitCardPic
          {
            width: 25px;
          }

          .applePayPic {
            height:20px;
          }
        }
      </style>


      <div class="row rs1">
        <ul class="paymentTypesList ccFirst" data-cy="cc-default-pay-type">
          <li class="paymentType ccPaymentType" data-cy="cc-payment-type">
            <b class="paymentTypeLbl">
              <!-- 111111 -->
                              Credit Card
                          </b>
            <!-- <input type="radio" name="paymentType" class="paymentType" value="credit" aria-label="Credit Card Payment Type" role="group" /> -->
            <img src="https://freedommerchants.com/images/fmc/visa.png" class="cardPic" card="visa" alt="visa" data-cy="visa-img" />
            <img src="https://freedommerchants.com/images/fmc/mastercard.png" class="cardPic" card="mastercard" alt="mastercard" data-cy="mastercard-img" />
            <img src="https://freedommerchants.com/images/fmc/discover.png" class="cardPic" card="discover" alt="discover" data-cy="discover-img" />
            <img src="https://freedommerchants.com/images/fmc/amexlogo.png" style="border-radius: 3px" class="cardPic" card="amex" alt="american express" data-cy="amex-img" />
          </li>

          <li class="paymentType checkPaymentType" data-cy="check-payment-type">
            <b class="paymentTypeLbl">
              eCheck / ACH
               
                (Free)
                          </b>  
            <!-- <input type="radio" name="paymentType" class="paymentType" value="check" aria-label="Check Payment Type" role="group" /> -->
            <img src="https://freedommerchants.com/images/fmc/echeck.png" alt="check payment" class='echeckPic' data-cy="echeck-img" />
          </li>
          
          <li class="paymentType debitPaymentType" data-cy="debit-payment-type">
            <b class="paymentTypeLbl">
              Debit Card
                          </b>  
            <img src="https://freedommerchants.com/images/fmc/debitcard2.png" alt="debit payment" class='debitCardPic' data-cy="debit-card-img" />
          </li>

                      <!-- apple pay -->
                              </ul>

        <ul class="paymentTypesList checkFirst" data-cy="check-default-pay-type">
          <li class="paymentType checkPaymentType" data-cy="check-payment-type">
            <b class="paymentTypeLbl">
              eCheck / ACH
               
                (Free)
                          </b>  
            <!-- <input type="radio" name="paymentType" class="paymentType" value="check" aria-label="Check Payment Type" role="group" /> -->
            <img src="https://freedommerchants.com/images/fmc/echeck.png" alt="check payment" class='echeckPic' data-cy="echeck-img" />
          </li>

          <li class="paymentType ccPaymentType" data-cy="cc-payment-type">
            <b class="paymentTypeLbl">
                              Credit Card
                          </b>
            <!-- <input type="radio" name="paymentType" class="paymentType" value="credit" aria-label="Credit Card Payment Type" role="group" /> -->
            <img src="https://freedommerchants.com/images/fmc/visa.png" class="cardPic" card="visa" alt="visa" data-cy="visa-img" />
            <img src="https://freedommerchants.com/images/fmc/mastercard.png" class="cardPic" card="mastercard" alt="mastercard" data-cy="mastercard-img" />
            <img src="https://freedommerchants.com/images/fmc/discover.png" class="cardPic" card="discover" alt="discover" data-cy="discover-img" />
            <img src="https://freedommerchants.com/images/fmc/amexlogo.png" style="border-radius: 3px" class="cardPic" card="amex" alt="american express" data-cy="amex-img" />
          </li>

          <li class="paymentType debitPaymentType" data-cy="debit-payment-type">
            <b class="paymentTypeLbl">
              Debit Card
                          </b>  
            <img src="https://freedommerchants.com/images/fmc/debitcard2.png" alt="debit payment" class='debitCardPic' data-cy="debit-card-img" />
          </li>

                      <!-- apple pay -->
                              </ul>
      </div>
      
      <style>
        .cardPic{
          display: none;
        }

        .smallTxt{
          font-size: 11px; font-style: italic
        }

        .creditCardNumError, .creditCardExpirError, .debitCardNumError, .debitCardExpirError {
          display: none;
        }
      </style>

      <!-- <input type="hidden" name="UMcard" placeholder="UMcard" />
      <input type="hidden" name="UMexpir" placeholder="UMexpir" />
      <input type="hidden" name="UMcvv2" placeholder="UMcvv2" /> -->

      <script>
        function keepOnlyNumbers(inputString) {
            // Use a regular expression to match any non-numeric character
            let pattern = /[^0-9]/g;
            
            // Replace all non-numeric characters with an empty string
            let resultString = inputString.replace(pattern, '');

            return resultString;
        }

        $(function()
        {
          
        })
      </script>  

      
                  <!-- load the sandbox or live Pay.js library -->
                                    <!-- Production: Live hosted version -->
              <script src="https://www.usaepay.com/js/v2/pay.js"></script>
                              
                <script>
          // Instantiate Client with Public API Key
          let creditCardClient = new usaepay.Client('Qg5wKAiq76Qp92009489KYA1o4B9Ek4PX2KDgSTt4K');
          let checkAchClient   = new usaepay.Client('Qg5wKAiq76Qp92009489KYA1o4B9Ek4PX2KDgSTt4K');
        </script>

        <div class="card-fields-ctr">
          <!-- ======================== NEW Credit Card Fields - via ePay PayJS iFrame - START ========================== -->
          <div class="row rs1">
            <div class="col-xs-12 col-sm-12 col-md-12">
              <div id="creditCardContainer">
                <!-- PaymentCard iFrame content will go here. -->
              </div>

              <!-- Display error messages here (do not putt comments inside the div because it makes the content non-empty -->
              <div id="creditCardErrorContainer"role="alert"></div>

              <input type="hidden" id="creditCardErrorContainer2" />

              <!-- BIN Lookup UI placeholders -->
              <div id="binLookupStatus" class="bin-lookup-status" style="display: none;"></div>
              <div id="binLookupResult" class="bin-lookup-result" style="display: none;"></div>
            </div>
          </div>

          <style>
            #paymentCardIFrame {
              height: 54px;
            }

            #creditCardErrorContainer {
              text-align: center;
              color: #be0f0f;
            }

            /* BIN Lookup Status & Results */
            .bin-lookup-status {
              padding: 8px 12px;
              margin: 10px 0;
              border-radius: 4px;
              background: #f0f9ff;
              border: 1px solid #bae6fd;
              color: #0c4a6e;
              font-size: 14px;
            }

            /* Modern CSS Spinner */
            .bin-lookup-spinner {
              display: inline-block;
              width: 14px;
              height: 14px;
              border: 2px solid rgba(12, 74, 110, 0.2);
              border-top-color: #0c4a6e;
              border-radius: 50%;
              animation: bin-lookup-spin 0.8s linear infinite;
              margin-right: 8px;
              vertical-align: middle;
            }

            @keyframes bin-lookup-spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            }

            .bin-lookup-result {
              padding: 10px 12px;
              margin: 10px 0;
              border-radius: 4px;
              font-size: 14px;
              line-height: 1.5;
            }

            .bin-lookup-result.success {
              background: #f0fdf4;
              border: 1px solid #86efac;
              color: #166534;
            }

            .bin-lookup-result.warning {
              background: #fffbeb;
              border: 1px solid #fde047;
              color: #854d0e;
            }

            .bin-lookup-result.error {
              background: #fef2f2;
              border: 1px solid #fca5a5;
              color: #991b1b;
            }

            .bin-lookup-result.info {
              background: #eff6ff;
              border: 1px solid #93c5fd;
              color: #1e40af;
            }

            .bin-lookup-result .icon {
              font-weight: bold;
              margin-right: 6px;
            }

            /* Payment type flash highlight */
            .flash-highlight {
              animation: flash 2s ease-in-out;
            }

            @keyframes flash {
              0%, 100% { background-color: transparent; }
              50% { background-color: #fef08a; }
            }

            /* Override checkbox */
            .bin-override-checkbox {
              padding: 15px;
              margin: 15px 0;
              background: #fef3c7;
              border: 2px solid #f59e0b;
              border-radius: 6px;
            }

            .bin-override-checkbox label {
              display: flex;
              align-items: center;
              cursor: pointer;
              font-size: 14px;
              color: #92400e;
            }

            .bin-override-checkbox input[type="checkbox"] {
              margin-right: 10px;
              width: 18px;
              height: 18px;
              cursor: pointer;
            }

            .submitBtn.disabled {
              opacity: 0.5;
              cursor: not-allowed;
              pointer-events: none;
            }

            /* Disabled payment type buttons during processing */
            .paymentType.disabled-during-processing {
              cursor: not-allowed !important;
              opacity: 0.6;
            }

            .paymentType.disabled-during-processing:hover {
              background-color: inherit;  /* Prevent hover effect */
            }

            /* Processing state for submit button */
            .submitBtn.processing {
              cursor: wait !important;
              position: relative;
            }

            .submitBtn.processing::after {
              content: '';
              position: absolute;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              width: 16px;
              height: 16px;
              border: 2px solid #fff;
              border-top-color: transparent;
              border-radius: 50%;
              animation: spin 0.8s linear infinite;
            }
          </style>        

          <script>
            // Instantiate Client with Public API Key

            // [exec]
            // Instantiate Payment Card Entry
            let paymentCard = creditCardClient.createPaymentCardEntry();

            const paymentCardConfig = {
              styles: `
                #payjs-container {
                    font-family: "Ubuntu", sans-serif;
                }

                .payjs-wrapper {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                }

                .payjs-label {
                    font-size: 14px !important;
                }

                #payjs-input-icon {
                    margin-top: 23px;
                }

                .payjs-base {
                    border-radius: 5px;
                    border: 1px solid #ccc !important;
                    padding: 14px 8px;
                    font-size: 14px;
                }

                #payjs-cnum-wrapper {
                    padding-left: 0 !important;
                    margin-right: 20px;
                    flex-basis: 120px
                    flex-shrink: 0;
                    flex-grow: 1;
                }

                #payjs-exp-wrapper {
                  margin-right: 20px;
                  flex-basis: 70px;
                  flex-shrink: 0;
                  flex-grow: 1;
                }

                #payjs-input-icon {
                  flex: 0 0 40px;
                }
              `,
              display_labels: true,
              labels: {
                  cnum: 'Card Number',
                  exp: 'Expiration',
                  cvv: 'CVV'
              },
            }

            // we don't want to load the ePay iframe (CC fields) if we've set live=false
            // to save bandwidth and to make testing easier by making the console cleaner
             
              // [exec]
              paymentCard.generateHTML(paymentCardConfig);
              paymentCard.addHTML('creditCardContainer');

              // [exec]
              // add an error event listener to the paymentCard element
              paymentCard.addEventListener('error', err => {
                err = JSON.parse(err);
                // console.log('error listener triggered');
                // console.log(err); // for debug when developing
                // error code 0 means there was no issue and you can clear your error. 
                if (err.code === '0') {
                    clearCreditCardError();
                } else {
                    handleCreditCardError(err.message);
                }
              });
            
            function handleCreditCardError(errorMessage) {
              var errorContainerEl = document.getElementById('creditCardErrorContainer');
              errorContainerEl.textContent = errorMessage;
              errorContainerEl.classList.remove('hidden');

              var errorContainerEl = document.getElementById('creditCardErrorContainer2');
              errorContainerEl.value = errorMessage;
            }

            function clearCreditCardError() {
              var errorContainerEl = document.getElementById('creditCardErrorContainer');
              errorContainerEl.textContent = '';
              errorContainerEl.classList.add('hidden');

              var errorContainerEl = document.getElementById('creditCardErrorContainer2');
              errorContainerEl.value = "";
            }

            function handleCreditCardPaymentKey(paymentKey) {
              // Insert the payment key into the form so it gets submitted to the server
              var form = document.getElementById('epayForm');
              var hiddenInput = document.createElement('input');
              hiddenInput.setAttribute('type', 'hidden');
              hiddenInput.setAttribute('name', 'cc_payment_key');
              hiddenInput.setAttribute('value', paymentKey);
              form.appendChild(hiddenInput);
            }

            // ============================================================================
            // BIN LOOKUP - Global State Variables
            // ============================================================================
            // NOTE: These variables are now declared at global scope (around line 841)
            // so they're available even when loadEPayIframe=false (e.g., Auth.net tests).
            // Do NOT re-declare them here to avoid duplicate declaration errors.
            // ============================================================================

                          tokenizeCreditCardData = async function()
              {
                try {
                  let tokenize = new Promise(async function(resolve, reject)
                  {
                    paymentCard.addEventListener('error', err =>
                    {
                      let error = JSON.parse(err);
                      resolve({result: "error", category: "E2", ...error})
                    });

                    let res = await creditCardClient.getPaymentKey(paymentCard);
                    console.log("Full PayJS response:", res);
                    if(res.key)
                    {
                      // ===== DETECT CARD NUMBER CHANGE =====
                      let currentCardNumber = res.creditcard?.number;  // "448233xxxxxx5480"

                      if (currentCardNumber && lastLookedUpCardNumber && lastLookedUpCardNumber !== currentCardNumber) {
                        console.log("Card number changed - clearing previous BIN lookup and re-doing lookup");
                        clearBinLookupState();
                      }
                      // =====================================

                      // ===== PERFORM BIN LOOKUP (fresh or re-lookup) =====
                      if (res.creditcard && currentCardNumber) {
                        let bin = extractBinFromTokenization(currentCardNumber);
                        console.log("Extracted BIN:", bin);

                        // Clear previous BIN lookup messages now that we're past the mismatch check
                        // and about to do a fresh lookup (so stale warnings don't show during lookup)
                        $('#binLookupResult').hide().empty();
                        $('#binLookupInfoBox').remove();

                        // Perform BIN lookup with retry logic
                        let binLookup = await performBinLookupWithRetry(bin);

                        // Store results for validation
                        binLookupPerformed = true;
                        binLookupDetectedType = (binLookup.result === "success") ? binLookup.card_type : null;
                        lastLookedUpCardNumber = currentCardNumber;
                        lastLookedUpBIN = bin;

                        // Handle the result (auto-switch, show messages, etc.)
                        await handleBinLookupResult(binLookup);
                      }
                      // ===================================================

                      resolve({
                        result: "success",
                        key: res.key,
                        number: res.creditcard?.number,  // Truncated PAN: "448233xxxxxx5480"
                        cardtype: res.creditcard?.cardtype  // e.g., "Visa"
                      });
                    }
                  })

                  let tokenizationRes = await tokenize;
                  console.log(tokenizationRes);
                  return tokenizationRes;
                } catch (error) {
                  console.error("Tokenization error:", error);
                  unfreezePaymentInputs();  // Always unfreeze on error
                  throw error;  // Re-throw for handler
                }
              }

              // ============================================================================
              // BIN LOOKUP FEATURE - AUTOMATIC CARD TYPE DETECTION
              // ============================================================================
              //
              // ⚠️ IMPORTANT: Before modifying this feature, read:
              //    docs/ArchitectureDecisions/ADR_001_BIN_Lookup_Card_Type_Detection.md
              //
              // This feature automatically detects credit/debit/prepaid cards using BIN lookup
              // to prevent incorrect surcharge application. Design decisions are non-obvious
              // (asymmetric mismatch handling, retry logic, validation flow) and must be
              // understood before making changes.
              //
              // Key functions in this section:
              // - performBinLookupWithRetry() - API calls with exponential backoff
              // - handleBinLookupResult() - UX logic for match/mismatch scenarios
              // - autoSwitchPaymentType() - Programmatic payment type switching
              // - clearBinLookupState() - State management for card changes
              //
              // State variables (declared outside this conditional block, around line 10408):
              // - binLookupPerformed, binLookupDetectedType, lastLookedUpCardNumber
              //
              // ============================================================================

              // Extract BIN from PayJS tokenization result
              function extractBinFromTokenization(truncatedPAN) {
                // PayJS stores truncated PAN in format: "448233xxxxxx5480"
                // Return first 6 digits
                return truncatedPAN.substring(0, 6);
              }

              // Performs BIN lookup with exponential backoff retry
              async function performBinLookupWithRetry(bin, attemptNumber = 1) {
                const maxAttempts = 3;
                const timeouts = [0, 1000, 2000]; // Exponential backoff in ms

                try {
                  // Show appropriate status message based on attempt number
                  if (attemptNumber === 1) {
                    showBinLookupStatus('Verifying card type...');
                  } else if (attemptNumber === 2) {
                    showBinLookupStatus("Couldn't verify card type, retrying...");
                  } else {
                    showBinLookupStatus('Verification still failing, final attempt...');
                  }

                  // Read simulation toggles (test panel)
                  let simulateDelay15 = $("#simulateBinDelay").is(":checked");
                  let simulateDelay5 = $("#simulateBinDelayShort").is(":checked");
                  let simulateDelay = simulateDelay15 || simulateDelay5;
                  let simulateError = $("#simulateBinError").val() || "";

                  // Build request data
                  let requestData = { bin: bin };
                  if (simulateDelay15) requestData.simulate_delay = 15;
                  else if (simulateDelay5) requestData.simulate_delay = 5;
                  if (simulateError && simulateError !== 'rails_api_down') requestData.simulate_error = simulateError;

                  // Determine AJAX URL — for "Rails API down" simulation, point to non-existent port
                  let ajaxUrl = (simulateError === 'rails_api_down')
                    ? 'http://localhost:9999/api/v1/bin_lookup'
                    : `${hostUrl}/api/v1/bin_lookup`;

                  // Determine timeout — longer for delay simulation
                  let ajaxTimeout = simulateDelay ? 20000 : 3000;

                  let response = await $.ajax({
                    url: ajaxUrl,
                    type: 'POST',
                    data: requestData,
                    dataType: 'json',
                    timeout: ajaxTimeout
                  });

                  // Handle "not_found" result (Pagos returns 200 but BIN not in database)
                  if (response.result === "not_found") {
                    hideBinLookupStatus();
                    return response; // Let handleBinLookupResult show appropriate message
                  }

                  hideBinLookupStatus();
                  return response;

                } catch (error) {
                  const errorCode = error.status;

                  // Determine error type:
                  // - For HTTP errors (4xx, 5xx): use statusText (e.g., "Not Found", "Forbidden")
                  // - For parser errors: status is 200 but we're in catch block = JSON parsing failed
                  // - For network errors: status is 0, statusText is "error"
                  // - For timeouts: status is 0, statusText is "timeout"
                  let errorType;
                  if (errorCode === 200) {
                    // HTTP succeeded but we're in catch block = JSON parsing failed
                    errorType = 'parsererror';
                  } else {
                    errorType = error.statusText || 'unknown';
                  }

                  const shouldRetry = attemptNumber < maxAttempts &&
                                     errorCode !== 404 &&  // BIN not found - won't appear on retry
                                     errorCode !== 403 &&  // Auth error - key won't work on retry
                                     errorCode !== 401 &&  // Invalid API key - won't work on retry
                                     errorType !== 'parsererror';  // Parser error - won't fix on retry

                  if (shouldRetry) {
                    console.log(`BIN lookup attempt ${attemptNumber} failed (${errorCode || 'network error'}), retrying in ${timeouts[attemptNumber]}ms...`);
                    // Wait before retry (exponential backoff)
                    await new Promise(resolve => setTimeout(resolve, timeouts[attemptNumber]));
                    return performBinLookupWithRetry(bin, attemptNumber + 1);
                  } else {
                    // All attempts failed or non-retryable error
                    console.log(`BIN lookup failed after ${attemptNumber} attempt(s). Error code: ${errorCode || 'network error'}, error type: ${errorType}`);
                    hideBinLookupStatus();
                    return {
                      result: "error",
                      message: "Could not verify card type after " + attemptNumber + " attempt(s)",
                      errorCode: errorCode,
                      errorType: errorType
                    };
                  }
                }
              }

              // Show inline status message below card number field
              function showBinLookupStatus(message) {
                let statusEl = $('#binLookupStatus');
                if (statusEl.length === 0) {
                  // Create status element if it doesn't exist
                  statusEl = $('<div id="binLookupStatus" class="bin-lookup-status"></div>');
                  $('.card-fields-ctr').append(statusEl);
                }
                statusEl.html(`<span class="bin-lookup-spinner"></span> ${message}`).show();
              }

              function hideBinLookupStatus() {
                $('#binLookupStatus').hide();
              }

              // Show result message with appropriate styling
              function showBinLookupResult(message, type = 'info') {
                // type: 'success', 'warning', 'error', 'info'
                let resultEl = $('#binLookupResult');
                if (resultEl.length === 0) {
                  resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                  $('.card-fields-ctr').append(resultEl);
                }

                const icons = {
                  success: '✅ ',
                  warning: '⚠',
                  error: '✗',
                  info: 'ℹ'
                };

                resultEl
                  .html(`<span class="icon">${icons[type]}</span> ${message}`)
                  .removeClass('success warning error info')
                  .addClass(type)
                  .show();
              }

              function hideBinLookupResult() {
                $('#binLookupResult').hide();
              }

              // Handles BIN lookup result and updates UI accordingly
              async function handleBinLookupResult(binLookup) {
                let tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

                // Handle errors (after all retries exhausted)
                // Handle BIN not found (Pagos doesn't recognize this BIN)
                // ADR-0001: Final BIN Lookup Failure Blocks Card Payment
                if (binLookup.result === "error" || binLookup.result === "not_found") {
                  let isNotFound = binLookup.result === "not_found";
                  let selectedPaymentLabel = gSelectedPaymentMethod === "credit" ? "Credit Card" : "Debit Card";

                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  // ADR-0001: ACH/check-aware messaging split
                  // Check if ACH or check payment methods are available
                  let hasAchOrCheck = showEcheck || (gECheckFee > 0);
                  
                  let messageHtml;
                  
                  // ADR-0001: Split messaging based on failure type
                  // - not_found: card classification failure → try a different card
                  // - error: service/system failure → try again later
                  if (isNotFound) {
                    // Card classification failure - the card BIN is not recognized
                    if (hasAchOrCheck) {
                      messageHtml = `
                        <span style="font-size: 14px;">⚠️</span> <strong>Could not identify your card type.</strong>
                        <br>${tab}${tab}Please try a different card or use <strong>ACH / Check</strong> to complete your payment.
                      `;
                    } else {
                      messageHtml = `
                        <span style="font-size: 14px;">⚠️</span> <strong>Could not identify your card type.</strong>
                        <br>${tab}${tab}Please try a different card.
                      `;
                    }
                  } else {
                    // Service/system failure - BIN lookup service is unavailable
                    if (hasAchOrCheck) {
                      messageHtml = `
                        <span style="font-size: 14px;">⚠️</span> <strong>We couldn't determine your card type right now.</strong>
                        <br>${tab}${tab}Please use <strong>ACH / Check</strong> to complete your payment, or try again later.
                      `;
                    } else {
                      messageHtml = `
                        <span style="font-size: 14px;">⚠️</span> <strong>We couldn't determine your card type right now.</strong>
                        <br>${tab}${tab}Please try again later.
                      `;
                    }
                  }

                  resultEl
                    .html(messageHtml)
                    .removeClass('success warning error info')
                    .addClass('error')
                    .show();

                  // ADR-0001: Permanently block card payment after final BIN failure
                  // No confirm-and-proceed path - user must use ACH/check or try again later
                  binLookupFailureConfirmed = true;

                  // TODO: LOGGING — plug in Sentry/frontend logging here
                  console.warn(`[BIN Lookup ${isNotFound ? 'Not Found' : 'Error'}]`, {
                    result: binLookup.result,
                    message: binLookup.message,
                    errorCode: binLookup.errorCode,
                    selectedPaymentMethod: gSelectedPaymentMethod,
                    bin: lastLookedUpBIN,
                    amount: $("[name='UMamount']").val(),
                    merchant: qbclient
                  });

                  // Send email notification to operations team
                  let customerName = $("[name='UMbillfname']").val() + " " + $("[name='UMbilllname']").val();
                  let customerEmail = $("[name='UMemail']").val();
                  let amount = $("[name='UMamount']").val();
                  let pageName = window.location.pathname.split('/').pop();

                  // Detect urgent error types for case-specific email handling
                  let isUrgent = false;
                  let urgentType = null;
                  let urgentExplanation = '';
                  let urgentGuidance = '';

                  const errorCode = binLookup.errorCode;
                  const errorMsg = (binLookup.message || '').toLowerCase();

                  if (errorCode === 403) {
                    // 403 Auth Key Error - BIN provider authentication/credential issue
                    isUrgent = true;
                    urgentType = '403 Auth Key Error';
                    urgentExplanation = 'The BIN lookup request was rejected with HTTP 403 Forbidden. This indicates an authentication or credential issue with the BIN provider (Pagos API).';
                    urgentGuidance = 'Recommended actions:\n' +
                      '• Check Pagos API key configuration in the application settings\n' +
                      '• Verify the API key is active and has not been revoked\n' +
                      '• Confirm the key has the correct permissions/scopes for BIN lookup\n' +
                      '• Check if the key has been recently rotated and needs updating\n' +
                      '• Verify the key is valid for the current environment (production vs. sandbox)';
                  } else if (errorCode === 429) {
                    // 429 Rate Limited - BIN Lookup / Pagos API rate limiting
                    isUrgent = true;
                    urgentType = '429 Rate Limited';
                    urgentExplanation = 'The BIN lookup request was rejected with HTTP 429 Too Many Requests. The BIN provider (Pagos API) is rate limiting requests.';
                    urgentGuidance = 'Recommended actions:\n' +
                      '• Check your Pagos API quota and current usage\n' +
                      '• Review if there is unusual traffic volume triggering the limit\n' +
                      '• Consider implementing request throttling/debouncing on the frontend\n' +
                      '• Contact Pagos support if quota needs to be increased\n' +
                      '• Review the rate limit headers (X-RateLimit-*) if available';
                  } else if (binLookup.errorType === 'error' || binLookup.errorType === 'timeout') {
                    // Rails API Down - Network error (no HTTP status or timeout)
                    isUrgent = true;
                    urgentType = 'Rails API Down';
                    urgentExplanation = 'The BIN lookup request failed due to a network error. The backend Rails API may be unavailable or experiencing connectivity issues.';
                    urgentGuidance = 'Recommended actions:\n' +
                      '• Check Heroku app status (https://status.heroku.com)\n' +
                      '• Verify dyno status and that the app is running\n' +
                      '• Check Heroku resource usage and quota limits\n' +
                      '• Verify there is no active maintenance window\n' +
                      '• Check application logs for errors or crashes\n' +
                      '• Verify the BIN lookup endpoint is accessible';
                  } else if (binLookup.errorType === 'parsererror') {
                    // Malformed JSON - Backend responded with invalid/non-JSON payload
                    isUrgent = true;
                    urgentType = 'Malformed JSON';
                    urgentExplanation = 'The BIN lookup response could not be parsed as valid JSON. The backend may have returned an error page, proxy error, or malformed response.';
                    urgentGuidance = 'Recommended actions:\n' +
                      '• Check backend Rails logs for errors or exceptions\n' +
                      '• Verify the BIN lookup endpoint is returning proper JSON\n' +
                      '• Check for proxy/gateway errors (nginx, Cloudflare, etc.)\n' +
                      '• Look for application error pages being returned instead of JSON\n' +
                      '• Verify Content-Type header is application/json';
                  }

                  // Build subject with URGENT prefix for urgent cases
                  let emailSubject = isUrgent
                    ? `[URGENT] BIN Lookup ${urgentType} - ${companyName || qbclient} - $${amount}`
                    : `[BIN Lookup ${isNotFound ? 'Not Found' : 'Failed'}] ${companyName || qbclient} - $${amount}`;

                  let emailBody = '';
                  emailBody += `<h3>BIN Lookup ${isUrgent ? urgentType : (isNotFound ? 'Could Not Identify Card' : 'Failed')}</h3>`;

                  if (isUrgent) {
                    emailBody += '<p style="background-color: #fff3cd; padding: 10px; border-left: 4px solid #ffc107;">';
                    emailBody += `<strong>⚠️ Urgent Issue Detected:</strong><br>`;
                    emailBody += `${urgentExplanation}`;
                    emailBody += '</p>';
                    emailBody += '<br>';
                    emailBody += '<h4>Troubleshooting Guidance:</h4>';
                    emailBody += `<pre style="background-color: #f5f5f5; padding: 10px; white-space: pre-wrap;">${urgentGuidance}</pre>`;
                    emailBody += '<br>';
                  } else {
                    emailBody += '<p>A customer attempted to pay, but we could not verify their card type. ';
                    emailBody += 'The customer was asked to confirm their payment method and try again. ';
                    emailBody += 'Please review this transaction to ensure the correct payment method was used.</p>';
                    emailBody += '<br>';
                  }

                  emailBody += '<u>Customer</u><br>';
                  emailBody += `<b>Name:</b> ${customerName}<br>`;
                  emailBody += `<b>Email:</b> ${customerEmail}<br>`;
                  emailBody += '<br>';
                  emailBody += '<u>Payment Details</u><br>';
                  emailBody += `<b>Amount:</b> $${amount}<br>`;
                  emailBody += `<b>Selected Payment Method:</b> ${selectedPaymentLabel}<br>`;
                  emailBody += `<b>Merchant:</b> ${companyName || qbclient}<br>`;
                  emailBody += `<b>Checkout Page:</b> ${pageName}<br>`;
                  emailBody += '<br>';
                  emailBody += '<u>Technical Details</u><br>';
                  emailBody += `<b>Reason:</b> ${isNotFound ? 'Card BIN not found in database' : binLookup.message}<br>`;
                  emailBody += `<b>Error Code:</b> ${binLookup.errorCode || 'N/A'}<br>`;
                  emailBody += '<br>';
                  emailBody += '<i>This is an automated email from the checkout page BIN lookup system.</i>';

                  send_email(emailSubject, emailBody);

                  return;
                }

                const detectedType = binLookup.card_type; // "credit", "debit", or "prepaid"
                const selectedType = gSelectedPaymentMethod; // "credit" or "debit"

                // Treat prepaid as debit
                const effectiveType = (detectedType === "prepaid") ? "debit" : detectedType;

                // Case 1: Perfect match
                if (selectedType === effectiveType) {
                  // Reset failure flag - fresh BIN lookup succeeded
                  binLookupFailureConfirmed = false;

                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }
                  resultEl
                    .html(`<span style="font-size: 14px;">✅</span> <strong>${capitalize(effectiveType)} card verified.</strong>`)
                    .removeClass('success warning error info')
                    .addClass('success')
                    .show();
                  // Continue normally
                  return;
                }

                // Case 2: Mismatch - Credit selected, Debit detected
                if (selectedType === "credit" && effectiveType === "debit") {

                  // Reset failure flag - fresh BIN lookup succeeded
                  binLookupFailureConfirmed = false;

                  // Check if debit payment type is available on this page
                  if (!showDebit) {
                    // Debit is NOT available - cannot auto-switch. Block and require credit card.
                    let resultEl = $('#binLookupResult');
                    if (resultEl.length === 0) {
                      resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                      $('.card-fields-ctr').append(resultEl);
                    }

                    resultEl
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>The card you entered is a debit card.</strong>
                        <br>${tab}${tab}This checkout only accepts <strong>credit cards</strong>.
                        <br>${tab}${tab}Please enter a <strong>credit card</strong> to continue.
                      `)
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .show();

                    // Don't auto-switch - debit not available
                    return;
                  }

                  // Debit IS available - auto-switch (GOOD NEWS!)
                  // Capture amount BEFORE auto-switch (with surcharge)
                  let amountBefore = $("[name='UMamount']").val();
                  let amountBeforeFormatted = parseFloat(amountBefore).toFixed(2);

                  // Auto-select debit (this will trigger calcAmount() and remove surcharge)
                  await autoSwitchPaymentType("debit");

                  // Small delay to let calcAmount() complete
                  await new Promise(resolve => setTimeout(resolve, 100));

                  // Capture amount AFTER auto-switch (without surcharge)
                  let amountAfter = $("[name='UMamount']").val();
                  let amountAfterFormatted = parseFloat(amountAfter).toFixed(2);

                  // Calculate savings
                  let savings = (parseFloat(amountBefore) - parseFloat(amountAfter)).toFixed(2);

                  // Get actual processing fee percentage
                  let feePercentage = gCcFeePercentage;

                  // Define tab character for indentation
                  let tab2 = '&nbsp;&nbsp;&nbsp;&nbsp;';

                  // Show "Great news" message - create HTML directly to avoid duplicate icon
                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  resultEl
                    .html(`
                      <span style="font-size: 14px;">✅</span> <strong>Great news!</strong> Since you're actually using a debit card, no <strong>${feePercentage}%</strong> processing fee applies!
                      <br>${tab2}${halfTab}$${amountBeforeFormatted} → $${amountAfterFormatted} <span style="color: #166534; font-weight: 600;">(saved: $${savings})</span>
                    `)
                    .removeClass('success warning error info')
                    .addClass('success')
                    .show();

                  // Set flag to indicate auto-switch occurred
                  binLookupAutoSwitchOccurred = true;

                  // Show follow-up message BELOW and OUTSIDE the green box (separate box)
                  // Remove any existing info box first (prevent duplicates)
                  $('#binLookupInfoBox').remove();

                  // Create new info message element (outside the success box) with unique ID
                  let infoBox = $(`
                    <div id="binLookupInfoBox" class="bin-lookup-result info" style="margin-top: 10px;">
                      <span class="icon" style="font-size: 18px;">👉</span> We've auto-selected <strong>Debit Card</strong> for you and updated the amount.
                      <br>${tab2}${tab2}Please click <strong>Process Payment</strong> to continue.
                      <br>${tab2}${tab2}<em>If you enter a different card, please double-check your billing address before continuing.</em>
                    </div>`);

                  // Insert after the success box (separate element)
                  resultEl.after(infoBox);

                  return;
                }

                // Case 3: Mismatch - Debit selected, Credit detected (REQUIRES DECISION)
                if (selectedType === "debit" && effectiveType === "credit") {
                  // Reset failure flag - fresh BIN lookup succeeded
                  binLookupFailureConfirmed = false;

                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  let feePercentage = gCcFeePercentage;
                  let tab = '&nbsp;&nbsp;&nbsp;&nbsp;';
                  let halfTab = '&nbsp;&nbsp;';

                  // Check if credit card payment type is available on this page
                  if (!showCC) {
                    // Credit is NOT available - can only tell user to use a debit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>The card you entered is a credit card.</strong>
                        <br>${tab}${halfTab}This checkout only accepts <strong>debit cards</strong>.
                        <br>${tab}${halfTab}Please enter a <strong>debit card</strong> to continue.
                      `)
                      .show();
                  } else {
                    // Credit IS available - show option to switch or use debit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>You're actually using a credit card, so a ${feePercentage}% processing fee applies. You can:</strong>
                        <br>${tab}${halfTab}• Choose <strong>Credit Card</strong> as your payment method, OR
                        <br>${tab}${halfTab}• Use a <strong>Debit Card</strong>
                        <br>${tab}${halfTab}Then click <strong>Process Payment</strong> to continue.
                        <br>${tab}${halfTab}<em>If you enter a different card, please double-check your billing address before continuing.</em>
                      `)
                      .show();
                  }

                  // Don't auto-correct - wait for user action
                  // User must manually switch to credit or use different card
                  return;
                }
              }

              // Programmatically switches payment type and updates UI
              async function autoSwitchPaymentType(newType) {
                if (newType === "credit") {
                  gSelectedPaymentMethod = "credit";
                  $(".ccPaymentType").addClass("paymentType-selected");
                  $(".debitPaymentType").removeClass("paymentType-selected");
                  $(".card-fields-ctr").show();
                  $(".credit-ctr").show();
                  $(".debit-ctr").hide();
                  $("[name='UMcommand']").val("cc:sale");
                  $("[name='UMcustom6']").val("credit card");

                } else if (newType === "debit") {
                  gSelectedPaymentMethod = "debit";
                  $(".debitPaymentType").addClass("paymentType-selected");
                  $(".ccPaymentType").removeClass("paymentType-selected");
                  $(".card-fields-ctr").show();
                  $(".credit-ctr").hide();
                  $(".debit-ctr").show();
                  $("[name='UMcommand']").val("cc:sale");
                  $("[name='UMcustom6']").val("debit");
                }

                // Recalculate amount (triggers surcharge update)
                calcAmount();

                // Visual feedback - flash the selected payment type
                $(`.${newType === "credit" ? "cc" : "debit"}PaymentType`).addClass('flash-highlight');
                setTimeout(() => {
                  $(`.${newType === "credit" ? "cc" : "debit"}PaymentType`).removeClass('flash-highlight');
                }, 2000);
              }

              // Helper function: Capitalize first letter
              function capitalize(str) {
                if (!str) return '';
                return str.charAt(0).toUpperCase() + str.slice(1);
              }

              // Helper function to clear BIN lookup state
              function clearBinLookupState() {
                binLookupPerformed = false;
                binLookupDetectedType = null;
                lastLookedUpCardNumber = null;
                lastLookedUpBIN = null;
                binLookupAutoSwitchOccurred = false;
                binLookupFailureConfirmed = false;  // Reset failure state for fresh card attempts
                hideBinLookupResult();
                hideBinLookupStatus();
                // Also remove the info box (auto-switch follow-up message)
                $('#binLookupInfoBox').remove();
              }

              // Show override checkbox when user overrides auto-correction
              // Override checkbox removed - compliance issue
              // We cannot allow surcharging debit cards even with user "consent"
              // If BIN lookup detects debit, we hard-block credit payment type

              // ===== FREEZE/UNFREEZE INPUT CONTROLS =====

              // Freeze all payment inputs during BIN lookup processing
              function freezePaymentInputs() {
                console.log("Freezing payment inputs...");

                // 1. Disable submit button
                $('.submitBtn').addClass('disabled processing');
                let originalText = $('.submitBtn').text();
                $('.submitBtn').data('original-text', originalText);
                $('.submitBtn').text('Processing...');

                // 2. Disable payment type selection buttons
                $('.paymentType').addClass('disabled-during-processing');
                $('.paymentType').css('pointer-events', 'none');
                $('.paymentType').css('opacity', '0.6');

                // 3. Block interaction with card fields (including PayJS iframe)
                //    CSS pointer-events on parent doesn't stop typing inside an iframe,
                //    so we add a transparent overlay that physically covers the iframe container.
                if ($('#binLookupFreezeOverlay').length === 0) {
                  $('#creditCardContainer').css('position', 'relative');
                  $('#creditCardContainer').append(
                    '<div id="binLookupFreezeOverlay" style="' +
                      'position: absolute; top: 0; left: 0; width: 100%; height: 100%;' +
                      'background: rgba(255,255,255,0.4); z-index: 9999; cursor: not-allowed;' +
                    '"></div>'
                  );
                }
                // Dim the card fields area (but status messages below remain visible)
                $('#creditCardContainer').css('opacity', '0.6');

                // 4. Blur the iframe so keyboard input stops
                $('iframe').each(function() { this.blur(); });
                if (document.activeElement) document.activeElement.blur();

                // 5. Show processing indicator
                showBinLookupStatus("Verifying card type...");
              }

              // Unfreeze all payment inputs after BIN lookup completes
              function unfreezePaymentInputs() {
                console.log("Unfreezing payment inputs...");

                // 1. Re-enable submit button
                $('.submitBtn').removeClass('disabled processing');
                let originalText = $('.submitBtn').data('original-text') || 'Process Payment';
                $('.submitBtn').text(originalText);

                // 2. Re-enable payment type selection buttons
                $('.paymentType').removeClass('disabled-during-processing');
                $('.paymentType').css('pointer-events', 'auto');
                $('.paymentType').css('opacity', '1');

                // 3. Remove card fields overlay and restore opacity
                $('#binLookupFreezeOverlay').remove();
                $('#creditCardContainer').css('opacity', '1');

                // Note: Don't hide status here - it will be replaced by result message
              }

              // ===== PAYMENT TYPE SWITCHING HANDLERS =====

              // Helper function: Re-evaluate BIN lookup result against newly selected payment type
              function reEvaluateBinLookupMatch() {
                if (!binLookupPerformed || !binLookupDetectedType) {
                  // No BIN lookup performed yet, nothing to re-evaluate
                  return;
                }

                console.log("Re-evaluating BIN lookup match after payment type switch");

                // Remove any existing info box when re-evaluating (user switched payment type)
                $('#binLookupInfoBox').remove();

                const detectedType = binLookupDetectedType; // "credit", "debit", or "prepaid"
                const selectedType = gSelectedPaymentMethod; // "credit" or "debit"

                // Treat prepaid as debit
                const effectiveType = (detectedType === "prepaid") ? "debit" : detectedType;

                // Case 1: Perfect match
                if (selectedType === effectiveType) {
                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  let tab = '&nbsp;&nbsp;&nbsp;&nbsp;';
                  let halfTab = '&nbsp;&nbsp;';

                  resultEl
                    .removeClass('success warning error info')
                    .addClass('success')
                    .html(`
                      <span style="font-size: 14px;">✅</span> <strong>Thanks for selecting the correct payment method!</strong>
                      <br>${tab}${halfTab}You may proceed by clicking <strong>Process Payment</strong>.
                    `)
                    .show();

                  // Removed hideOverrideCheckbox() - checkbox no longer exists (compliance requirement)
                  return;
                }

                // Case 2: Mismatch - Credit selected, Debit detected (HARD BLOCK - Compliance Requirement)
                // Note: This can happen if user was auto-switched to Debit, then manually switched back to Credit
                // CRITICAL: Cannot allow surcharging debit cards even with user consent (state law/card network rules)
                if (selectedType === "credit" && effectiveType === "debit") {
                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  let tab = '&nbsp;&nbsp;&nbsp;&nbsp;';
                  let halfTab = '&nbsp;&nbsp;';

                  // Check if debit payment type is available on this page
                  if (!showDebit) {
                    // Debit is NOT available - can only tell user to enter a credit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>The card you entered is a debit card.</strong>
                        <br>${tab}${halfTab}This checkout only accepts <strong>credit cards</strong>.
                        <br>${tab}${halfTab}Please enter a <strong>credit card</strong> to continue.
                      `)
                      .show();
                  } else {
                    // Debit IS available - show option to switch to debit or enter credit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>You've selected Credit Card as payment method, but the card you entered is a Debit Card.</strong>
                        <br>${tab}${halfTab}<strong>Please either:</strong>
                        <br>${tab}${halfTab}• Select <strong>Debit Card</strong> as the payment method and click <strong>Process Payment</strong> to complete the purchase,
                        <br>${tab}${halfTab}&nbsp; OR
                        <br>${tab}${halfTab}• Enter a <strong>Credit Card</strong>
                        <br>${tab}${halfTab}<em>If you enter a different card, please double-check your billing address before continuing.</em>
                      `)
                      .show();
                  }

                  // Submit button will remain disabled in this state (validation will block submission)
                  return;
                }

                // Case 3: Mismatch - Debit selected, Credit detected
                if (selectedType === "debit" && effectiveType === "credit") {
                  let resultEl = $('#binLookupResult');
                  if (resultEl.length === 0) {
                    resultEl = $('<div id="binLookupResult" class="bin-lookup-result"></div>');
                    $('.card-fields-ctr').append(resultEl);
                  }

                  let feePercentage = gCcFeePercentage;
                  let tab = '&nbsp;&nbsp;&nbsp;&nbsp;';
                  let halfTab = '&nbsp;&nbsp;';

                  // Check if credit card payment type is available on this page
                  if (!showCC) {
                    // Credit is NOT available - can only tell user to use a debit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>The card you entered is a credit card.</strong>
                        <br>${tab}${halfTab}This checkout only accepts <strong>debit cards</strong>.
                        <br>${tab}${halfTab}Please enter a <strong>debit card</strong> to continue.
                      `)
                      .show();
                  } else {
                    // Credit IS available - show option to switch or use debit card
                    resultEl
                      .removeClass('success warning error info')
                      .addClass('warning')
                      .html(`
                        <span style="font-size: 14px;">⚠️</span> <strong>You're actually using a credit card, so a ${feePercentage}% processing fee applies. You can:</strong>
                        <br>${tab}${halfTab}• Choose <strong>Credit Card</strong> as your payment method OR
                        <br>${tab}${halfTab}• Use a <strong>Debit Card</strong>
                        <br>${tab}${halfTab}Then click <strong>Process Payment</strong> to continue.
                        <br>${tab}${halfTab}<em>If you enter a different card, please double-check your billing address before continuing.</em>
                      `)
                      .show();
                  }

                  return;
                }
              }

              // ==================== POC Test Function (Legacy - Keep for backwards compatibility) ====================
              // Displays BIN lookup result in UI (POC - stops here, doesn't continue payment)
              displayBinLookupResult = function(binLookup, userSelectedType, bin) {
                let resultDiv = $('#binLookupResult');

                if (binLookup.result === "success") {
                  let actualType = binLookup.card_type;
                  let brand = binLookup.brand;

                  // Treat prepaid as debit (per requirements)
                  let displayType = actualType;
                  if (actualType === "prepaid") {
                    displayType = "debit (prepaid)";
                  }

                  let match = (userSelectedType === "credit" && actualType === "credit") ||
                              (userSelectedType === "debit" && (actualType === "debit" || actualType === "prepaid"));

                  let html = `
                    <div style="padding: 20px; margin: 20px 0; border: 3px solid ${match ? '#28a745' : '#ff9800'}; border-radius: 8px; background: ${match ? '#f0fff4' : '#fff8e1'};">
                      <h3 style="margin-top: 0; color: ${match ? '#28a745' : '#ff9800'};">
                        🔍 BIN Lookup Result (POC)
                      </h3>
                      <div style="font-size: 16px; line-height: 1.8;">
                        <p><strong>BIN:</strong> ${bin}</p>
                        <p><strong>Card Brand:</strong> ${brand.toUpperCase()}</p>
                        <p><strong>Detected Type:</strong> <span style="color: #0066cc; font-weight: bold;">${displayType.toUpperCase()}</span></p>
                        <p><strong>User Selected:</strong> <span style="color: #0066cc; font-weight: bold;">${userSelectedType.toUpperCase()}</span></p>
                        <p style="margin-top: 15px; padding-top: 15px; border-top: 1px solid #ddd;">
                          <strong>Match Status:</strong>
                          <span style="font-size: 18px; font-weight: bold; color: ${match ? '#28a745' : '#ff9800'};">
                            ${match ? '✅ MATCH' : '⚠️ MISMATCH DETECTED'}
                          </span>
                        </p>
                        ${!match ? '<p style="color: #ff9800; margin-top: 10px;"><strong>Note:</strong> Card type differs from user selection. In production, system would auto-correct this.</p>' : ''}
                        <p style="margin-top: 15px; padding: 10px; background: #e3f2fd; border-left: 4px solid #2196f3; font-size: 14px;">
                          <strong>POC Status:</strong> Stopping here for testing. Full implementation would continue with payment processing using correct card type.
                        </p>
                      </div>
                    </div>
                  `;

                  resultDiv.html(html).show();

                  // Scroll to result
                  resultDiv[0].scrollIntoView({behavior: 'smooth', block: 'center'});

                } else {
                  resultDiv.html(`
                    <div style="padding: 20px; margin: 20px 0; border: 3px solid #f44336; border-radius: 8px; background: #ffebee;">
                      <h3 style="margin-top: 0; color: #f44336;">❌ BIN Lookup Failed</h3>
                      <p style="color: #c62828; font-size: 16px;">${binLookup.message}</p>
                      <p style="margin-top: 10px; font-size: 14px; color: #666;">
                        In production, system would proceed with user-selected payment type.
                      </p>
                    </div>
                  `).show();

                  resultDiv[0].scrollIntoView({behavior: 'smooth', block: 'center'});
                }
              }

                        
          </script>
          <!-- ======================== NEW Credit Card Fields - via ePay PayJS iFrame - END ========================== -->
        </div>  
      

      <!-- gateway-agnostic -->
      <div class="credit-ctr">
        <div class="row rs1 processingFeeCtr" style="margin-top: 10px">
          <script type="text/javascript">

                          var textToAgree = "In paying by Credit card you agree to a " + gCcFeePercentage + "% convenience fee.";
            
            $(function()
            {
              $(".jsIAgree").on("change", function()
              {
                if(!$(this).prop("checked"))
                {
                  alert("Please check '" + textToAgree + "' to continue.");
                }
              });
            });
          </script>

          <div class="col-sm-12" data-cy="processing-fee-checkbox">
            <input type="checkbox" name="" value="" align="left" class="jsIAgree" aria-label="Agree to Terms" role="checkbox">
                          In paying by Credit Card, you agree to a <span class="txnFeePerc"></span> convenience fee. Your total amount charged will be: <span class="finalAmount">$0.00</span>.                      </div>
        </div>
      </div><!-- credit-ctr end -->
          

      <style>
        .help-icon {
             display: inline-block; 
            margin-left: 5px;
            vertical-align: text-top;
            cursor: pointer;
        }
      </style>

      
      <script type="text/javascript">
        $(function()
        {
          // [exec]
          try 
          {
            $('.tooltipRouting').tooltipster({
              theme: 'tooltipster-shadow',
              trigger: 'click',
            });

            $('.tooltipAccount').tooltipster({
              theme: 'tooltipster-shadow',
              trigger: 'click',
            });
          }
          catch (err)
          {
            var subject = "Error applying tooltipster";
            console.log(subject);
            var message = '';
            message += '<b>Page URL:</b><br><br>';
            message += window.location.toString();
            message += '<br><br>';
            message += 'error details - name: ' + err.name + ' message: ' + err.message;
            // send_email(subject, message); 
          }
        });
      </script>

      <style type="text/css">
        .tooltip_templates{
          display: none;
        }

        .tooltipster-sidetip .tooltipster-content {
            color: #fff;
            line-height: 18px;
            padding: 2px 4px;
        }

        #tooltipRouting img, #tooltipAccount img{
          width: 350px !important;
        }

        @media (max-width: 480px){
          #tooltipRouting img, #tooltipAccount img{
            width: 250px !important;
          }
        }
      </style>
      
      <div class="tooltip_templates">
          <span id="tooltipRouting">
              <img src="https://freedommerchants.com/images/fmc/blankCheck3.png" alt="blankCheck3" />
          </span>

          <span id="tooltipAccount">
              <img src="https://freedommerchants.com/images/fmc/blankCheck3.png" alt="blankCheck3" />
          </span>
      </div>

      <style>
        .check-ctr {
          margin-top: -10px;
        }
      </style>

      
      <div class="check-ctr">

        <!-- ePay-specific - because we only put labels above the ePay iframe -->
                  <div class="row rs1">
            <div class="col-sm-12">

              <!-- The ACH field labels - since ePay doesn't allow customizing/showing/adding labels to the fields in their iFrame yet -->
              <style>
                #checkLabels {
  /*                width: 93%;*/
                  display: flex;
                  gap: 20px;
                }

                #checkLabels .lbl {
                  flex: 1;
                }

                .confirmAccMobile {
                  display: none;
                }

                @media (max-width: 576px) {
                  .confirmAccDesktop {
                    display: none;
                  }

                  .confirmAccMobile {
                    display: block;
                  }
                }
              </style>

              <div id="checkLabels">
                <div class="lbl">
                  <b>Routing</b> #
                  <span class="tooltipRouting" data-tooltip-content="#tooltipRouting">
                    <img src="https://freedommerchants.com/images/fmc/helpIcon4.svg" class="help-icon" alt="help icon" style="height: 15px;"  />
                  </span>
                </div>
                <div class="lbl">
                  <b>Account</b> #
                  <span class="tooltipRouting" data-tooltip-content="#tooltipRouting">
                    <img src="https://freedommerchants.com/images/fmc/helpIcon4.svg" class="help-icon" alt="help icon" style="height: 15px;"  />
                  </span>
                </div>
                <div class="lbl">
                  <div class="confirmAccDesktop">
                    <b>Confirm</b> Account # <sup>*</sup>
                  </div>
                  <div class="confirmAccMobile">
                    <b>Confirm</b> Acc # <sup>*</sup>
                  </div>
                </div>
              </div>
              <!-- The ACH field labels - end -->

              
              <div id="checkAchContainer">
                <!-- ePay's iFrame is inserted here -->
              </div>

              <!-- Display error messages here (do not putt comments inside the div because it makes the content non-empty -->
              <div id="checkAchErrorCtr" role="alert"></div>

              <input type="hidden" id="checkAchErrorCtr2" />
            </div>
          </div>

          <!-- PayJS ACH iFrame form - START -->
          <style>
            #paymentCheckIFrame {
              /*height: 60px;
              border: 1px solid #bbb;
              box-shadow: 0 1px 3px #ccc;
              border-radius: 5px;
              padding: 3px;*/
              height: 34px;
            }

            #checkAchErrorCtr {
               text-align: center;
                color: #be0f0f;
                margin-top: 5px;
            }
          </style>

          <script>
            // [exec]
            // Instantiate Payment Check Entry
            let paymentCheck = checkAchClient.createPaymentCheckEntry();

            const checkAchConfig = {
              hide_icon: true,
              dl_required: false,
              styles: `
                #payjs-form {
                  width: 100%;
                }

                #payjs-dl-num {
                  display: none;
                }

                #payjs-dl-state {
                  display: none;
                }

                #payjs-container {
                    font-family: "Ubuntu", sans-serif;
                }

                .payjs-section {
                  display: flex;
                  gap: 20px;
                }

                @media (max-width: 576px) {
                  .payjs-section {
                    gap: 10px;
                  }                
                }

                .payjs-base {
                    border-radius: 5px;
                    border: 1px solid #ccc !important;
                    padding: 14px 8px;
                    font-size: 14px;
                }    
              `,
              placeholders: {
                routing: "9-Digit Routing #"
              },
            }

            // [exec-stage2]
             
              paymentCheck.generateHTML(checkAchConfig);
              paymentCheck.addHTML('checkAchContainer');

              function handleCheckError(errorMessage) {
                var errorContainerEl = document.getElementById('checkAchErrorCtr');
                errorContainerEl.textContent = errorMessage;
                errorContainerEl.classList.remove('hidden');

                var errorContainerEl = document.getElementById('checkAchErrorCtr2');
                errorContainerEl.value = errorMessage;
                // console.log("----handleCheckError");
              }

              function clearCheckError() {
                var errorContainerEl = document.getElementById('checkAchErrorCtr');
                errorContainerEl.textContent = '';
                errorContainerEl.classList.add('hidden');

                var errorContainerEl = document.getElementById('checkAchErrorCtr2');
                errorContainerEl.value = "";
              }
            
            function handleCheckPaymentKey(paymentKey) {
              // Insert the payment key into the form so it gets submitted to the server
              var form = document.getElementById('epayForm');
              var hiddenInput = document.createElement('input');
              hiddenInput.setAttribute('type', 'hidden');
              hiddenInput.setAttribute('name', 'check_payment_key');
              hiddenInput.setAttribute('value', paymentKey);
              form.appendChild(hiddenInput);
            }

             
              tokenizeCheckData = async function()
              {
                let tokenize = new Promise(async function(resolve, reject)
                {
                  client.getPaymentKey(paymentCheck).then(result => 
                  {
                    // this enver gets triggered, some weird logic here by ePay
                    // keep it collapsed.
                    if(result.error) 
                    {
                      console.log('----error1');
                      // this doesn't ever get triggered.  Instead
                      // the 'error' event handler gets triggered 
                      // but we're leaving it becuase the original (ePay provided)
                      // code has it 
                      let errorMessage;
                      if(result.error != undefined && result.error != null)
                      {
                        // alert('error1-case1');
                        console.log('----error1-case1');
                        errorMessage = result.error;
                      }
                      else {
                        // alert('error1-case2');
                        console.log('----error1-case2');
                        errorMessage = "An unknown error occurred while trying to process check/ACH information";
                      }
                      resolve({result: "error", category: "unknown", message: errorMessage});  
                    } 
                    else 
                    {
                      resolve({result: "success", key: result.key});
                    }
                  }).catch( err => {
                    console.log('----getPaymentKey [CATCH] block', err);
                    resolve({result: "error", category: "catch", message: err});
                  });
                });

                let tokenizationRes = await tokenize;
                // console.log('----tokenizeCheckData:', tokenizationRes);
                return tokenizationRes;
              }

              // [exec-stage2]
              // When an error happens, this runs FIRST
              // then the above catch block is triggered
              // but we're using this function just to console log
              // and to clear errors as issues are resolved on checking field's
              // 'blur' events.
              paymentCheck.addEventListener('error', errorMessage => {
                // console.error(errorMessage); // for debug when developing
                if (errorMessage.length === 0) {
                  // an empty string means an issue was resolved and you can clear your error. 
                  console.log('----issue resolved..');
                  clearCheckError();
                } else {
                  console.log('----issue found..', errorMessage);
                  // handleCheckError(errorMessage);
                }
              });
                      
          </script>
          <!-- PayJS ACH iFrame form - END -->

          <!-- Account type ("Checking" or "Savings") -->
          <style>
            #check-account-type-section label {
              font-weight: normal;
              display: flex; 
              gap: 5px; 
              align-items: flex-start;
              cursor: pointer;
            }
          </style>

          
          <!-- Checking Format (WEB, CCD, etc) dropdown and Check # fields -->
                  
        <!-- gateway = 'usaepay' - end -->


        <div class="row rs1 eCheckProcessingFeeCtr" data-cy="ach-processing-fee-checkbox" style="margin-top: 10px">
          <script type="text/javascript">
            // [exec-stage2]
            var textToAgreeCheck;
            if(eCheckPercOrFlat == "perc")
            {
              textToAgreeCheck = "By paying by check you agree to a " + gECheckFee + "% convenience fee.";
            }
            else if(eCheckPercOrFlat == "flat")
            {
              textToAgreeCheck = "By paying by check you agree to a $" + gECheckFee + " convenience fee."; 
            } 

            $(function()
            {
              $(".jsIAgreeCheck").on("change", function()
              {
                if(!$(this).prop("checked"))
                {
                  alert("Please check '" + textToAgreeCheck + "' to continue.");
                }
              });
            });
          </script>

          <div class="col-sm-12">
            <input type="checkbox" name="" value="" align="left" class="jsIAgreeCheck" aria-label="Agree to Processing Fee" role="checkbox"> 
            By paying by check you agree to a <span class="eCheckFeeTxt"></span> convenience fee. Your total amount charged will be: <span class="checkFinalAmount">$0.00</span>
          </div>
        </div>
      </div><!-- check-ctr end -->     


      <div class="debit-ctr">

      </div>
      <!-- debit-ctr end -->


              <!-- ======================================== Apple Pay Code - Start ============================================== -->
        <style>
          .apple-pay-button{
            height: 50px;
            display: none;
          }

          .applePaySubmitBtn{
            /*display: none;*/
            margin-bottom: 10px;
            cursor: pointer;
          }
        </style>

        <div class="applePay-ctr">
          <div id="applePayContainer">
              <!-- Apple Pay iFrame content will go here - This contains the Apple Pay button -->
          </div>

          <div class="row rs1 processingFeeCtrApplePay" style="margin-top: 10px">
            <script type="text/javascript">
              var textToAgreeApplePay = "In paying by Credit card you agree to a " + gCcFeePercentage + "% convenience fee.";

              $(function()
              {
                $(".jsIAgreeApplePay").on("change", function()
                {
                  if(!$(this).prop("checked"))
                  {
                    alert("Please check '" + textToAgreeApplePay + "' to continue.");
                    // $(".submitBtn").on("click", function(e)
                    // {
                    //   e.preventDefault();

                    //   if($(".jsIAgreeApplePay").is(":visible") && !$(".jsIAgreeApplePay").prop("checked"))
                    //   {
                    //     alert("Please check '" + textToAgreeApplePay + "' to continue.");
                    //     return false;
                    //   }
                    //   else
                    //   {
                    //     return true;
                    //   }
                    // });
                  }
                  // else
                  // {
                  //   $(".submitBtn").off("click");
                  // }
                });
              });
            </script>

            <div class="col-sm-12">
              <input type="checkbox" name="" value="" align="left" class="jsIAgreeApplePay" aria-label="Agree to Terms" role="checkbox"> 
              In paying by Credit card you agree to a <span class="txnFeePerc"></span> convenience fee. Your total amount charged will be: <span class="finalAmount">$0.00</span>
            </div>
          </div>
        </div><!-- applePay-ctr end -->      


        <!-- Apple Pay Detection and Setup -->
        <script>
          // [exec-stage2]
          // instantiate client with public_key (this is the public api key - shown next to the api key/source key in ePay)
          // let client = new usaepay.Client('2SPLs3462lVW7d4tZXx7HXKKRsRTlL4CTdC9rbJ023');
          let client = new usaepay.Client(applePayPublicKey);

          // documentation for paymentRequest's keys is here: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest
          let applePayConfig = {
              targetDiv: 'applePayContainer',
              displayName: "National Medical Education & Training Center",
              // displayName: '',
              paymentRequest: {
                  // lineItems: [
                  //     {
                  //         label: 'subtotal',
                  //         amount: '2.00',
                  //         type: 'final'
                  //     },
                  // ],
                  total: {
                      label: '',
                      amount: '2.00',
                      type: 'final'
                  },
                  countryCode: 'US',
                  currencyCode: 'USD',

                  // will be populated later in the form.submit function
                  // but need to have the keys now
                  billingContact: {
                    givenName: '',
                    familyName: '', 
                    phoneNumber: '',
                    emailAddress: '',
                    postalCode: ''//, 
                    // addressLines: '' 
                  }
              }
          }

          // [exec-stage2]
          // Instantiate ApplePay Entry
          // applePayConfig = {}
          // let applePay = client.createApplePayEntry(applePayConfig);
          var applePay = client.createApplePayEntry(applePayConfig);

          // [exec-stage2]
          // Error Checking Node 1 - Apple Pay isn't available
          // check to see if Apple Pay is available
          // if it's not available, hide the apple pay payment type
          applePay.checkCompatibility().then( res => {
              // if so, add the Apple Pay button
              applePay.addButton();
              console.log("ApplePay - Node 1 - Browser is Compatiable.");
          }).catch( err => {
              $(".applePayPaymentType").hide();
          });

          // Error Checking Node 2 - Apple Pay is available (node 1), but not configured properly
          // listen for any Apple pay config errors = errors related to missing keys in the applePayConfig hash above
          // this is triggered when the apple pay button is clicked to pay, not before that.
          applePay.on('applePayError', function (err) 
          {
              console.log("ApplePay - Node 2 - Config error");
              console.log(err);
              // Handle Errors
              alert("Looks like there is an Apple Pay Config Error.  Don't worry, We've been notified.  In the mean time please use any other available payment method.  Thanks!");

              // Jan 12 - commenting this out while testing, uncomment this later
              // var msg = "Page URL: " + window.location;
              // msg += ", Amount: " + $("[name='UMamount']").val();
              // msg += ", First Name: " + $("[name='UMbillfname']").val();
              // msg += ", Last Name: " + $("[name='UMbilllname']").val();
              // msg += ", Phone Number: " + $("[name='UMbillphone']").val();
              // msg += ", Email: " + $("[name='UMemail']").val();
              // send_email('Node 2 Error - Apple Pay Config Error.', msg);
          })
        </script>

        <!-- Apple Pay Payment Code -->
        <script type="text/javascript">
          var processApplePayPayment;

          tokenizeApplePayData = async function()
          {
            let tokenize = new Promise(function(resolve)
            {
              // click the actual Apple Pay button that is inserted by ePay's pay.js
              // -> this triggers the popup asking the user to authenticate the payment
              // via touchID or faceID
              $("#payjs-applePayBtn").click(); 

              // and when the user does that successfully, the "applePaySuccess"
              // event gets triggered
              applePay.on('applePaySuccess', function () 
              {
                // once successfully completed, payment key is ready
                client.getPaymentKey(applePay).then(result => 
                {
                  console.log("applePaySuccess:getPaymentKey Result:");
                  console.log(result);
                  resolve({result: "success", key: result});
                })
                .catch(res => 
                {
                  alert('Error Processing Apple Pay Card: ' + res);
                  resolve({result: "error", category: "EApplePay", res})
                  // var msg = "Result: " + res;
                  // msg += "Page URL: " + window.location;
                  // msg += ", Amount: " + $("[name='UMamount']").val();
                  // msg += ", First Name: " + $("[name='UMbillfname']").val();
                  // msg += ", Last Name: " + $("[name='UMbilllname']").val();
                  // msg += ", Phone Number: " + $("[name='UMbillphone']").val();
                  // msg += ", Email: " + $("[name='UMemail']").val();
                  // send_email('Node 3 Error - Error Processing Apple Pay Card.', msg);
                });
              });
            })

            let tokenizationRes = await tokenize;
            console.log(tokenizationRes);
            return tokenizationRes;
          }

          $(function()
          {
            $(".applePaySubmitBtn").on("click", function()
            {
              $("form").submit();
            });

            apple_pay_complete = function(data)
            {
              // console.log('result is: ');
              // alert(data.result, data.msg, data.authcode);
              if(data.result == "success")
              {
                // $(".paymentError").hide();  
                // $(".paymentSuccessful .msg").text(data.msg);
                // $(".paymentSuccessful .authcode").text(data.authcode);
                // $(".paymentSuccessful").show();
                var approvedUrl = $("[name='UMredirApproved']").val();
                approvedUrl = approvedUrl.replace("status=", "UMauthCode=" + data.authcode + "&status=");
                window.location = approvedUrl;
              }
              else
              {
                //111
                // $(".paymentSuccessful").hide();
                // $(".paymentError .msg").text(data.msg);
                // $(".paymentError").show();  
                var declinedUrl = $("[name='UMredirDeclined']").val();
                declinedUrl = declinedUrl.replace("status=", "UMerror=" + data.msg + "&status=");
                window.location = declinedUrl;
              }
            }
          });
        </script>
      
        <style>
          .paymentSuccessful{
            color: green;
          }

          .paymentError{
            color: red;
          }

          .msgBox{
            border: 2px solid #666;
            border-radius: 10px;
            padding: 15px;
            display: none;
          }
        </style>
        <!-- <div class="paymentSuccessful msgBox">
          Result: <div class="msg">some message</div>
          <br>
          Auth Code: <div class="authcode">A234s</div>
        </div>

        <div class="paymentError msgBox">
          Result: <div class="msg">there was an error</div>
        </div> -->
        <!-- ======================================== Apple Pay Code - END ============================================== --> 
            <!-- if gateway = 'epay' end -->

    </section>
    <!-- payment-info-section -->
  
    <!-- ================================================================================================================= -->
    <!--                                               CHECKBOXES                                                      -->
    <!-- ================================================================================================================= -->
    <section data-cy="checkboxes-section">
      <!-- ADD NEW HTML HERE -->

      <!-- Checkbox - Currency - 'You understand that the amount shown to be paid is x Currency' -->
      <div class="row rs1 currencyAgreementCtr" data-cy="currency-checkbox-ctr" style="margin-top: 10px">
        <script type="text/javascript">
          var textToAgreeCurrency = "I understand that the amount shown to be paid is in " + currencyLabel + " currency."; 
          
          $(function()
          {
            $(".jsIAgreeCurrency").on("change", function()
            {
              if(!$(this).prop("checked"))
              {
                alert("Please check '" + textToAgreeCurrency + "' to continue.");
              }
            });
          });
        </script>

        <div class="col-sm-12">
          <input type="checkbox" name="" value="" align="left" class="jsIAgreeCurrency" aria-label="Agree to Currency" role="checkbox"> 
          You understand that the amount shown to be paid is in <span class="currencyLabel"></span> currency. 
        </div>
      </div>

      <!-- Checkbox - Save Payment Details - 'Yes! Please save my payment details to be used for any future recurring bills.'-->
      
      <!-- Section - Additional Info -->
          
      <!-- Checkbox - Terms & Conditions - 'I have fully read, understood, and agree to the Terms & Conditions for this transaction.' -->
      <div class="row rs1">
        <script type="text/javascript">
          var termsTextToAgree;

          $(function()
          {
            initTermsDisplayAndText = function() 
            {
              // [exec-stage2]
              if(showTermsCheckBox)
              {
                $(".termsCtr").show();
              }
              else
              {
                $(".termsCtr").hide();
              }

              // [exec-stage2]
              if(termsDefaultChecked)
              {
                $(".terms").prop("checked", true);
              }
              else
              {
                $(".terms").prop("checked", false);
              }

              termsTextToAgree = $(".termsTxt").text().trim();  
            }
            
            initTermsDisplayAndText();

            $(".terms").on("change", function()
            {
              if(!$(this).prop("checked"))
              {
                alert("Please check '" + termsTextToAgree + "' to continue.");
              }
            });
          });
        </script>

        <div class="col-sm-12 termsCtr" data-cy="terms-checkbox-ctr">
          <input type="checkbox" name="" value="" align="left" class="terms" aria-label="Agree to Terms" role="checkbox"> 
          <span class="termsTxt">
                          I have fully read, understood, and agree to the Terms & Conditions for this transaction.
                        <!-- <a href="https://www.explorethecompany.com/terms/" target="_blank">Terms & Conditions</a>  -->
          </span>
        </div>
      </div>

      <!-- Custom HTML goes here -->
            <!-- Custom HTML goes here -->

      <!-- Checkbox - Privacy Policy - 'I have fully read, understood, and agree to the Cancellation and Refund Policy.' -->
      <div class="row rs1">
        <script type="text/javascript">
          $(function()
          {
            initPrivacyPolicyDisplayAndText = function() 
            {
              // [exec-stage3]
              if(showPrivacyPolicyCheckbox)
              {
                $(".privacyPolicyCtr").show();
              }
              else
              {
                $(".privacyPolicyCtr").hide();
              }

              // [exec-stage3]
              if(privacyPolicyDefaultChecked)
              {
                $(".privacyPolicy").prop("checked", true);
              }
              else
              {
                $(".privacyPolicy").prop("checked", false);
              }

              privacyPolicyTextToAgree = $(".privacyPolicyTxt").text().trim();  
            }
            
            initPrivacyPolicyDisplayAndText();

            $(".privacyPolicy").on("change", function()
            {
              if(!$(this).prop("checked"))
              {
                alert(`Please check '${privacyPolicyTextToAgree}' to continue.`);
              }
            });
          });
        </script>

        <div class="col-sm-12 privacyPolicyCtr" data-cy="policy-checkbox-ctr">
          <input type="checkbox" name="" value="" align="left" class="privacyPolicy" data-cy="policy-checkbox" aria-label="privacy Policy"> 
          <b class="privacyPolicyTxt">
                          I have fully read, understood, and agree to the Cancellation and Refund Policy.
                      </b>
        </div>
      </div>

      <!-- this is what is adding that weird extra spacing on the top -->
      <!-- <p>&nbsp;</p> -->
    </section>
    <!-- checkboxes-section -->  

    
    <!-- Are you Human? -->
          <section data-cy="security">
        <div class="row rs1">
          <div class="col-sm-6">
            Are you Human? How much is: <span id="a"></span>
            <br> Answer: <input type="text" id="b" aria-label="captcha answer" />
          </div>
        </div>

        <script>
          $(function()
          {
            // [exec-stage2]
            var n1 = Math.round(Math.random() * 10 + 1);
            var n2 = Math.round(Math.random() * 10 + 1);
            $("#a").text(n1 + " + " + n2);
          });
        </script>
      </section>
    

    <!-- had to add the </form> tag some where, here i'm adding it before all the submit buttons -->
  </form>


    <!-- end authorize.net integration -->

  <!-- moving it here because we cannot have nested forms -->
  
    <section data-cy="process-payment-section" style="margin-bottom: 15px">
      <!-- Process payment and errors -->
      <style>
        .testButtonsCtr {
          margin-block: 20px; 
          border: 2px solid darkgray; 
          border-radius: 8px; 
          padding: 10px;
          display: flex;
          gap: 5px;   
          display: none;

          h4 {
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px;
          }
        }

        .genericErrors {
          color: #bd2a2a;
          text-align: center;
          display: none;
        }
      </style>


              <!-- these are also ePay specific -->
        <!-- Testing Buttons -->
        <div class="row rs1 buttonsCtr">
          <div class="testButtonsCtr">

            <!-- Full Flow Test Buttons -->
            <section style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);">
              <h4 style="margin-top: 0; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">🧪 Full Flow Testing <small style="color: #333;">Complete Submit Flow</small></h4>
              <p style="font-size: 12px; color: rgba(255,255,255,0.95); margin-bottom: 12px;">Select payment type above, then click to simulate complete flow:</p>
              <div style="display: flex; flex-direction: column; gap: 10px;">
                <button type="button" class="testFullFlowCredit" style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  font-size: 15px;
                  padding: 14px 20px;
                  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                  background-color: white;
                  color: #1e293b;
                  border: 2px solid #e2e8f0;
                  border-radius: 6px;
                  cursor: pointer;
                  font-weight: 600;
                  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                  transition: all 0.2s ease;
                " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)';">
                  <span style="font-size: 16px;">💳</span>
                  <span>Process Payment with Credit Card</span>
                  <span style="display: flex; gap: 4px; margin-left: 8px;">
                    <img src="https://freedommerchants.com/images/fmc/visa.png" style="height: 20px; opacity: 0.9;" alt="Visa" />
                    <img src="https://freedommerchants.com/images/fmc/mastercard.png" style="height: 20px; opacity: 0.9;" alt="Mastercard" />
                    <img src="https://freedommerchants.com/images/fmc/discover.png" style="height: 20px; opacity: 0.9;" alt="Discover" />
                    <img src="https://freedommerchants.com/images/fmc/amexlogo.png" style="height: 20px; border-radius: 2px; opacity: 0.9;" alt="Amex" />
                  </span>
                </button>
                <button type="button" class="testFullFlowDebit" style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  font-size: 15px;
                  padding: 14px 20px;
                  background: white;
                  color: #1e293b;
                  border: 2px solid #e2e8f0;
                  border-radius: 6px;
                  cursor: pointer;
                  font-weight: 600;
                  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                  transition: all 0.2s ease;
                " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)';">
                  <span style="font-size: 16px;">💳</span>
                  <span>Process Payment with Debit Card</span>
                  <span style="margin-left: 8px;">
                    <img src="https://freedommerchants.com/images/fmc/debitcard2.png" style="height: 24px; opacity: 0.9;" alt="Debit Card" />
                  </span>
                </button>
                <button type="button" class="testFullFlowACH" style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap: 10px;
                  font-size: 15px;
                  padding: 14px 20px;
                  background: white;
                  color: #1e293b;
                  border: 2px solid #e2e8f0;
                  border-radius: 6px;
                  cursor: pointer;
                  font-weight: 600;
                  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                  transition: all 0.2s ease;
                " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(0,0,0,0.15)';" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 8px rgba(0,0,0,0.1)';">
                  <span style="font-size: 16px;">🏦</span>
                  <span>Process Payment with ACH/eCheck</span>
                  <span style="margin-left: 8px; font-size: 12px; background: #10b981; color: white; padding: 2px 8px; border-radius: 4px; font-weight: 700;">
                    NO BIN LOOKUP
                  </span>
                </button>
              </div>
              <p style="font-size: 11px; color: #333; margin-top: 12px; margin-bottom: 8px; font-style: italic;">
                These buttons simulate the complete flow: tokenization → BIN lookup → validation → messages (ACH skips BIN lookup)
              </p>
              <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,0.15); border-radius: 6px; cursor: pointer; user-select: none;"
                id="simulateBinDelayToggle"
                onclick="
                  var cb = document.getElementById('simulateBinDelay');
                  cb.checked = !cb.checked;
                  var track = document.getElementById('simulateBinDelayTrack');
                  var knob = document.getElementById('simulateBinDelayKnob');
                  track.style.backgroundColor = cb.checked ? '#10b981' : 'rgba(255,255,255,0.3)';
                  knob.style.transform = cb.checked ? 'translateX(16px)' : 'translateX(0)';
                  // Turn off the 5s toggle if this one is turned on
                  if (cb.checked) {
                    document.getElementById('simulateBinDelayShort').checked = false;
                    document.getElementById('simulateBinDelayShortTrack').style.backgroundColor = 'rgba(255,255,255,0.3)';
                    document.getElementById('simulateBinDelayShortKnob').style.transform = 'translateX(0)';
                  }
                ">
                <input type="checkbox" id="simulateBinDelay" style="display: none;">
                <div id="simulateBinDelayTrack" style="position: relative; width: 36px; height: 20px; background-color: rgba(255,255,255,0.3); border-radius: 20px; transition: 0.3s; flex-shrink: 0;">
                  <div id="simulateBinDelayKnob" style="position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background-color: white; border-radius: 50%; transition: 0.3s;"></div>
                </div>
                <span style="font-size: 12px; color: rgba(255,255,255,0.95); font-weight: 500;">Simulate real BIN delay (15s)</span>
              </div>
              <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,0.15); border-radius: 6px; cursor: pointer; user-select: none;"
                id="simulateBinDelayShortToggle"
                onclick="
                  var cb = document.getElementById('simulateBinDelayShort');
                  cb.checked = !cb.checked;
                  var track = document.getElementById('simulateBinDelayShortTrack');
                  var knob = document.getElementById('simulateBinDelayShortKnob');
                  track.style.backgroundColor = cb.checked ? '#10b981' : 'rgba(255,255,255,0.3)';
                  knob.style.transform = cb.checked ? 'translateX(16px)' : 'translateX(0)';
                  // Turn off the 15s toggle if this one is turned on
                  if (cb.checked) {
                    document.getElementById('simulateBinDelay').checked = false;
                    document.getElementById('simulateBinDelayTrack').style.backgroundColor = 'rgba(255,255,255,0.3)';
                    document.getElementById('simulateBinDelayKnob').style.transform = 'translateX(0)';
                  }
                ">
                <input type="checkbox" id="simulateBinDelayShort" style="display: none;">
                <div id="simulateBinDelayShortTrack" style="position: relative; width: 36px; height: 20px; background-color: rgba(255,255,255,0.3); border-radius: 20px; transition: 0.3s; flex-shrink: 0;">
                  <div id="simulateBinDelayShortKnob" style="position: absolute; height: 16px; width: 16px; left: 2px; top: 2px; background-color: white; border-radius: 50%; transition: 0.3s;"></div>
                </div>
                <span style="font-size: 12px; color: rgba(255,255,255,0.95); font-weight: 500;">Simulate real BIN delay (5s)</span>
              </div>
              <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,0.15); border-radius: 6px;">
                <span style="font-size: 12px; color: rgba(255,255,255,0.95); font-weight: 500; white-space: nowrap;">Error Simulation:</span>
                <select id="simulateBinError" style="
                  flex: 1; padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.3);
                  background: rgba(255,255,255,0.9); color: #1e293b; font-size: 12px; cursor: pointer;
                ">
                  <option value="">Normal (real lookup)</option>
                  <option value="pagos_down">Pagos API down (503)</option>
                  <option value="pagos_timeout">Pagos API timeout (&gt;3s per attempt)</option>
                  <option value="pagos_error">Pagos API error (500)</option>
                  <option value="bin_not_found">BIN not found (200 with error msg)</option>
                  <option value="auth_error">Auth/key error (403)</option>
                  <option value="rate_limited">Rate limited (429)</option>
                  <option value="retry_then_succeed">Retry: fail once then succeed</option>
                  <option value="all_retries_fail">All retries fail (500 × 3)</option>
                  <option value="rails_api_down">Rails API down (connection refused)</option>
                  <option value="malformed_json">Malformed response (invalid JSON)</option>
                </select>
              </div>
            </section>

            <div style="margin: 15px 0;"></div>

            <!-- BIN Lookup Test Buttons - Always Visible -->
            <section>
              <h4>BIN Lookup <small>Isolated BIN Lookup Testing</small></h4>
              <p style="font-size: 12px; color: #666; margin-bottom: 10px;">First select Credit/Debit above, then click test buttons:</p>
              <div style="display: flex; flex-direction: column; gap: 6px;">
                <div>
                  <button type="button" class="testBinLookupCredit" style="font-size: 13px;">Test <b>Credit Card</b></button>
                  <button type="button" class="testBinLookupDebit" style="font-size: 13px;">Test <b>Debit Card</b></button>
                  <button type="button" class="testBinLookupPrepaid" style="font-size: 13px;">Test <b>Prepaid Card</b></button>
                </div>
                <div>
                  <button type="button" class="testBinLookupMismatch" style="font-size: 13px;">Test <b>Mismatch</b> (Debit card, Credit selected)</button>
                </div>
              </div>
            </section>

            <!-- Toggle button for other test buttons -->
            <div style="margin: 15px 0 10px 0;">
              <button type="button" id="toggleTestButtons" style="font-size: 12px; padding: 5px 10px; background: #f0f0f0; border: 1px solid #ccc; border-radius: 4px; cursor: pointer;">
                Show Test Buttons
              </button>
            </div>

            <!-- Other test buttons section (visible in testing mode, hidden otherwise) -->
            <div id="otherTestButtonsSection" style="display: none;">
              <section>
                <h4>layer0 <small>Form Submission</small></h4>
                <div style="display: flex; flex-direction: column; gap: 6px;">
                  <div>
                    <input type="button" class="openWsConnection" value="Open WS Conenction">
                    <input type="button" class="simulateWsDisconnection" value="Simulate WS Disconnection">
                  </div>
                  <div>
                    <input type="button" class="simulateRailsBackendOffline" value="Simulate Rails Backend Offline">
                    <input type="button" class="simulateRailsBackendOfflineForTwoRetries" value="Simulate Rails Backend Offline For 2 Retries">
                  </div>
                </div>
              </section>

              <section>
                <h4>layer1 <small>/epay/checkout</small></h4>
                <p>
                  <input type="button" class="simulateValidationFailBtn" value="Simulate Validation Fail">
                  <input type="button" class="simulateExceptionBtn" value="Simulate Exception">
                </p>
              </section>

              <section>
                <h4>layer2 <small>Epay Job</small></h4>
                <p>
                  <input type="button" class="simulateEpayJobExceptionBtn" value="Simulate Exception">
                </p>
              </section>

              <section>
                <h4>layer3 <small>QboIntent.do_epay</small></h4>
                <div style="display: flex; flex-direction: column; gap: 6px;">
                  <div>
                    <input type="button" class="simulateDoEpayExceptionBtn" value="Simulate Exception">
                    <input type="button" class="simulateDeclinedBtn" value="Simulate Decline">
                    <input type="button" class="simulateApprovedBtn" value="Simulate Approved">
                    <input type="button" class="simulateRealApprovedBtn" value="Simulate a 'real' Approved transaction">
                  </div>

                  <div>
                    <input type="button" class="simulateSlightDelayApprovedBtn" value="Simulate Slight Delay Approved">
                    <input type="button" class="simulateLongDelayApprovedBtn" value="Simulate Long Delay Approved">
                  </div>

                  <div>
                    <input type="button" class="simulateSlightDelayDeclinedBtn" value="Simulate Slight Delay Declined">
                    <input type="button" class="simulateLongDelayDeclinedBtn" value="Simulate Long Delay Declined">
                  </div>

                  <div>
                    <input type="button" class="simulateWsConnectionBreaksLongDelayDeclinedBtn" value="Simulate 'WS connection gets broken'">
                  </div>
                </div>
              </section>

              <!-- ADR-0003: Duplicate/Remediation UX State Controls -->
              <section data-cy="adr0003-test-section">
                <h4>ADR-0003 <small>Duplicate/Remediation UX States</small></h4>

                <!-- Armed indicator badge -->
                <div id="sim-armed-indicator" style="display: none; margin-bottom: 10px; padding: 8px 12px; background: #d4edda; border: 1px solid #28a745; border-radius: 5px; font-size: 13px; color: #155724; font-weight: bold;">
                  🎯 SIM ARMED: <span id="sim-armed-scenario-name"></span>
                </div>

                <!-- ============================================ -->
                <!-- Sub-section 1: Direct Run Buttons (Full Flow) -->
                <!-- ============================================ -->
                <h5 style="margin: 12px 0 6px; color: #155724;">Direct Run Buttons (Full Flow)</h5>
                <p style="font-size: 12px; color: #666; margin-bottom: 10px;">Mocks tokenization, sets sim params, and triggers full checkout_v2 flow in one click. Card type matches selected payment method.</p>

                <!-- 1. Run: In-Flight Duplicate (Decision 2) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunInFlight" data-cy="adrArmInFlight" value="Run: In-Flight Duplicate" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=in_flight_duplicate, sim_delay_ms=2000</span>
                  </div>
                </div>

                <!-- 2. Run: Processing Unknown (Decision 5) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunProcessingUnknown" data-cy="adrArmProcessingUnknown" value="Run: Processing Unknown" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=processing_unknown, sim_delay_ms=3000</span>
                  </div>
                </div>

                <!-- 3. Run: Duplicate + Approved (Decision 9) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunDuplicateApproved" data-cy="adrArmDuplicateApproved" value="Run: Duplicate + Approved" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=duplicate_approved, sim_delay_ms=2000</span>
                  </div>
                  <div style="margin-top: 6px;">
                    <input type="button" class="adrResubmitSameUuid" data-cy="adrResubmitSameUuid" value="Simulate Backend Replay of Same UUID (duplicate + approved)" style="background: #fff3cd; border: 1px solid #d4a017; color: #333; cursor: pointer; font-size: 11px;">
                    <span style="font-size: 11px; color: #666;">After first submit, replays same UUID to simulate backend duplicate+approved recovery</span>
                  </div>
                </div>

                <!-- 4. Run: Retry Required (Decision 1) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunRetryRequired" data-cy="adrArmRetryRequired" value="Run: Retry Required" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=retry_required, sim_delay_ms=2000</span>
                  </div>
                </div>

                <!-- 5. Run: Enqueue Failed (Decision 3) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunEnqueueFailed" data-cy="adrArmEnqueueFailed" value="Run: Enqueue Failed" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=enqueue_failed, sim_delay_ms=500</span>
                  </div>
                </div>

                <!-- 6. Run: Session Not Found (Decision 5) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #e8f4e8; border: 1px solid #6dae6d; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrRunSessionNotFound" data-cy="adrArmSessionNotFound" value="Run: Session Not Found" style="background: #e8f4e8; border: 1px solid #6dae6d; color: #333; cursor: pointer;">
                    <span style="font-size: 12px; color: #333;">Runs full flow with sim_scenario=session_not_found, sim_delay_ms=500</span>
                  </div>
                </div>

                <!-- ============================================ -->
                <!-- Sub-section 2: Display-Only UX States       -->
                <!-- ============================================ -->
                <h5 style="margin: 16px 0 6px; color: #555;">Display-Only UX States</h5>
                <p style="font-size: 12px; color: #666; margin-bottom: 10px;">Directly shows each ADR UX state without submitting the form. Click ▶ Details for context.</p>

                <!-- 1. In-Flight Duplicate (Decision 2) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestInFlight" data-cy="adrTestInFlight" value="In-Flight Duplicate">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">User re-submits while payment is still processing</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-inflight" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-inflight" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User clicked Submit, payment started processing</li>
                      <li>No clear response yet — user clicked Submit again (same UUID)</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>A second POST arrived for the same UUID while the first is still in-flight</li>
                      <li>The UUID is already consumed by the in-flight attempt</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Show "Payment already in progress. Please wait."</li>
                      <li>Show "Do not refresh the page or click back."</li>
                      <li>No retry button — user cannot initiate a new attempt</li>
                      <li>No new CpTxn created on backend</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>Prevents duplicate payment records</li>
                      <li>Distinct from terminal-state retry (decline/error), which gets a fresh UUID</li>
                    </ul>
                  </div>
                </div>

                <!-- 2. Processing Unknown (Decision 5) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestProcessingUnknown" data-cy="adrTestProcessingUnknown" value="Processing Unknown">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">Payment accepted but final outcome not yet known</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-processing-unknown" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-processing-unknown" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User clicked Submit, backend accepted the UUID</li>
                      <li>The payment job is running but hasn't returned a final result yet</li>
                      <li>Frontend lost contact (WS broke, timeout) and re-POSTed the same UUID</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>The UUID was accepted but the backend hasn't determined the final result</li>
                      <li>The payment may still succeed or fail — we don't know yet</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Show "taking longer than usual" info panel</li>
                      <li>Frontend polls for status via /get_status_v2</li>
                      <li>No retry until a terminal state is reached</li>
                      <li>User must wait, not re-submit</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>The payment may still succeed — showing an error prematurely would cause the user to attempt a duplicate payment</li>
                      <li>Treating this as terminal would create a second CpTxn for the same payment</li>
                    </ul>
                  </div>
                </div>

                <!-- 3. Duplicate + Already Approved (Decision 9) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestApproved" data-cy="adrTestApproved" value="Duplicate + Already Approved">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">User re-submits a UUID that already succeeded — must see success, not error</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-approved" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-approved" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User clicked Submit, payment was approved</li>
                      <li>User didn't see the approval (page didn't redirect, or they refreshed)</li>
                      <li>User clicked Submit again with the same UUID</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>A re-POST arrived for a UUID whose payment was already approved</li>
                      <li>Backend returns result: "duplicate", status: "approved", prior_result: "approved"</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Recover the user into the approved/success flow — redirect to the approved page</li>
                      <li>Do NOT show error UX, "duplicate" messaging, or retry prompts</li>
                      <li>Do NOT offer a Try Again button (the payment already succeeded)</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>The user's payment succeeded — showing an error for a successful payment risks the user paying again</li>
                      <li>Creates unnecessary support contacts and loss of confidence in the payment system</li>
                      <li>The duplicate is a transport detail, not a business outcome</li>
                    </ul>
                  </div>
                </div>

                <!-- 4. Retry Required (Decision 1) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestRetryRequired" data-cy="adrTestRetryRequired" value="Retry Required">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">Payment failed — customer checks info and clicks Process Payment to retry with fresh UUID</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-retry-required" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-retry-required" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User clicked Submit, payment was processed</li>
                      <li>The payment reached a terminal failure: declined, error, or exception</li>
                      <li>The UUID is now consumed and cannot be reused</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>The payment failed — the UUID is spent, no retry on same UUID</li>
                      <li>A fresh UUID is required for any new attempt</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Show "Payment failed. Please try again with a new payment."</li>
                      <li>Fresh UUID is auto-generated — no separate retry button needed</li>
                      <li>Customer checks/fixes info and clicks normal Process Payment to retry</li>
                      <li>Billing context is preserved — user doesn't re-enter everything</li>
                      <li>Tokenization runs again for the new UUID</li>
                      <li>BIN lookup resets for fresh attempt (v9.2)</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>Fresh UUID per retry prevents same-UUID replay — the primary duplicate-payment vector</li>
                      <li>Billing context preservation reduces user friction</li>
                      <li>Old attempt-level state (token, WS, timers) must be fully discarded to avoid stale state</li>
                    </ul>
                  </div>
                </div>

                <!-- 5. Enqueue Failed (Decision 3) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestEnqueueFailed" data-cy="adrTestEnqueueFailed" value="Enqueue Failed">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">Backend saved the record but couldn't queue the job — rolled back, UUID not consumed</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-enqueue-failed" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-enqueue-failed" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User clicked Submit, backend saved the CpTxn record</li>
                      <li>Backend tried to enqueue the payment-processing job — the queue rejected it</li>
                      <li>Backend destroyed the just-created CpTxn (compensating cleanup)</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>CpTxn.save! succeeded but job enqueue failed before the job was accepted</li>
                      <li>The CpTxn was rolled back — the UUID is NOT consumed</li>
                      <li>No payment processing will happen for this UUID</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Show "Payment processing failed. Please try again."</li>
                      <li>Fresh UUID is auto-generated — customer clicks Process Payment to retry</li>
                      <li>Since the UUID was not consumed, a fresh attempt with a new UUID is allowed</li>
                      <li>No orphan CpTxn left behind</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>Without this cleanup, an orphan CpTxn would block future same-UUID attempts (UUID appears consumed)</li>
                      <li>But no payment processing is attached — the user is stuck with a ghost record</li>
                      <li>Compensating cleanup ensures the UUID is freed for a fresh attempt</li>
                    </ul>
                  </div>
                </div>

                <!-- 6. Session Not Found (Decision 5) -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestNotFound" data-cy="adrTestNotFound" value="Session Not Found">
                    <small style="color:#999;">[display-only]</small>
                    <span style="font-size: 12px; color: #333;">UUID is stale, expired, or cleaned up — start fresh</span>
                  </div>
                  <div class="adr-details-toggle" data-target="adr-detail-not-found" style="font-size: 11px; color: #888; cursor: pointer; margin-top: 4px; user-select: none;">▶ Details</div>
                  <div id="adr-detail-not-found" style="display: none; margin-top: 6px; padding: 8px 10px; background: #eef2f7; border-radius: 4px; font-size: 12px; color: #333; line-height: 1.6;">
                    <div style="margin-bottom: 6px;"><strong>What happened:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>User submitted a UUID that the backend doesn't recognize</li>
                      <li>The UUID may be stale, expired, from an old session, or was cleaned up after enqueue failure</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Meaning:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>The UUID doesn't exist in the system — nothing to poll or recover</li>
                      <li>This is a terminal state — the session is gone</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>What should happen:</strong></div>
                    <ul style="margin: 0 0 8px 16px; padding: 0; list-style: disc;">
                      <li>Show "This payment session is no longer active. Please try again."</li>
                      <li>Fresh UUID is auto-generated — customer clicks Process Payment to retry</li>
                      <li>A fresh UUID is required — the old one cannot be used</li>
                    </ul>
                    <div style="margin-bottom: 4px;"><strong>Why this matters:</strong></div>
                    <ul style="margin: 0 0 0 16px; padding: 0; list-style: disc;">
                      <li>The old session is gone — there's nothing to poll or recover</li>
                      <li>The user must start a new payment attempt</li>
                      <li>Without clear messaging, the user might keep retrying the same stale UUID</li>
                    </ul>
                  </div>
                </div>

                <!-- 7. Clear All ADR States -->
                <div class="adr-scenario-row" style="margin-bottom: 10px; padding: 8px 10px; background: #f8f8f8; border-radius: 5px;">
                  <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
                    <input type="button" class="adrTestClearAll" data-cy="adrTestClearAll" value="Clear All ADR States" style="background: #f5f5f5; color: #333; border: 1px solid #999;">
                    <span style="font-size: 12px; color: #333;">Reset all ADR display panels and simulation params back to normal form state</span>
                  </div>
                </div>
              </section>
            </div>

            <script>
              // Toggle other test buttons visibility
              $("#toggleTestButtons").on("click", function() {
                let section = $("#otherTestButtonsSection");
                if (section.is(":visible")) {
                  section.hide();
                  $(this).text("Show Test Buttons");
                } else {
                  section.show();
                  $(this).text("Hide Test Buttons");
                }
              });

              // ADR-0003: Display-only UX state test buttons
              $("body").on("click", ".adrTestInFlight", function() {
                console.log("[ADR-0003 TEST] Showing in-flight UX (Decision 2) [display-only]");
                showInFlightBlock();
              });

              $("body").on("click", ".adrTestProcessingUnknown", function() {
                console.log("[ADR-0003 TEST] Showing processing_unknown UX (Decision 5) [display-only]");
                takingLongerThanUsual();
              });

              $("body").on("click", ".adrTestApproved", function() {
                console.log("[ADR-0003 TEST] Showing duplicate+approved UX (Decision 9) [display-only] — will redirect to approved page");
                handlePaymentResult({result: "approved", authcode: "TEST-APPROVED", amount: gCheckoutData.qbo_data.amount});
              });

              $("body").on("click", ".adrTestRetryRequired", function() {
                console.log("[ADR-0003 TEST] Showing duplicate+retry_required UX (Decision 1) [display-only]");
                showRetryRequiredBlock("Payment failed. Please try again with a new payment.");
              });

              $("body").on("click", ".adrTestEnqueueFailed", function() {
                console.log("[ADR-0003 TEST] Showing error+enqueue_failed UX (Decision 3) [display-only]");
                showRetryRequiredBlock("Oops, something went wrong — we couldn't process your payment. Please try again.");
              });

              $("body").on("click", ".adrTestNotFound", function() {
                console.log("[ADR-0003 TEST] Showing error+not_found UX (Decision 5) [display-only]");
                showRetryRequiredBlock("This payment session is no longer active. Please try again.");
              });

              $("body").on("click", ".adrTestClearAll", function() {
                console.log("[ADR-0003 TEST] Clearing all ADR display states and simulation params");
                clearInFlightBlock();
                clearRetryRequiredBlock();
                clearInfoBlock();
                // Clear simulation params
                $("#sim_scenario").val("");
                $("#sim_delay_ms").val("");
                $("#sim-armed-indicator").hide();
              });

              // ADR-0003: Direct Run buttons (full flow with mocked tokenization)
              // These set sim_scenario/sim_delay_ms, mock tokenization, and trigger the normal submit flow
              var gSavedUuidForResubmit = null;

              function runAdrScenario(scenarioName, delayMs, label) {
                console.log("[ADR-0003 RUN] Running: " + scenarioName + " (delay=" + delayMs + "ms)");

                // 1. Set simulation params
                $("#sim_scenario").val(scenarioName);
                $("#sim_delay_ms").val(delayMs);
                $("#sim-armed-scenario-name").text(label);
                $("#sim-armed-indicator").show();

                // 2. Mock tokenization based on selected payment method (BIN full-flow pattern)
                // Do NOT set #testingFlow — that would bypass tokenization and BIN lookup
                var selectedMethod = gSelectedPaymentMethod;

                if (selectedMethod === "credit") {
                  // Mock credit card tokenization
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RUN] Mock getPaymentKey - returning CREDIT card data");
                    return {
                      key: "mock_adr_credit_" + scenarioName + "_" + Date.now(),
                      creditcard: {
                        number: "311338xxxxxx1234",  // Amex BIN (credit)
                        cardtype: "Amex"
                      }
                    };
                  };
                } else if (selectedMethod === "debit") {
                  // Mock debit card tokenization
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RUN] Mock getPaymentKey - returning DEBIT card data");
                    return {
                      key: "mock_adr_debit_" + scenarioName + "_" + Date.now(),
                      creditcard: {
                        number: "485427xxxxxx5678",  // Visa BIN (debit)
                        cardtype: "Visa"
                      }
                    };
                  };
                } else if (selectedMethod === "check") {
                  // Mock ACH tokenization
                  client.getPaymentKey = async function(paymentCheck) {
                    console.log("🎭 [ADR RUN] Mock getPaymentKey (check) - returning ACH payment key");
                    return Promise.resolve({
                      key: "mock_adr_ach_" + scenarioName + "_" + Date.now()
                    });
                  };
                } else {
                  console.warn("[ADR RUN] Unknown payment method: " + selectedMethod + ". Defaulting to credit card mock.");
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RUN] Mock getPaymentKey - returning default CREDIT card data");
                    return {
                      key: "mock_adr_default_" + scenarioName + "_" + Date.now(),
                      creditcard: {
                        number: "311338xxxxxx1234",
                        cardtype: "Amex"
                      }
                    };
                  };
                }

                // 3. Trigger the normal submit button — full flow runs:
                //    Validation → Tokenization (mocked) → BIN lookup → checkout_v2
                console.log("🚀 [ADR RUN] Triggering submit button — running full normal flow...");
                $(".submitBtn").trigger("click");
              }

              $("body").on("click", ".adrRunInFlight", function() {
                runAdrScenario("in_flight_duplicate", 2000, "In-Flight Duplicate");
              });

              $("body").on("click", ".adrRunProcessingUnknown", function() {
                runAdrScenario("processing_unknown", 3000, "Processing Unknown");
              });

              $("body").on("click", ".adrRunDuplicateApproved", function() {
                runAdrScenario("duplicate_approved", 2000, "Duplicate + Approved");
              });

              $("body").on("click", ".adrRunRetryRequired", function() {
                runAdrScenario("retry_required", 2000, "Retry Required");
              });

              $("body").on("click", ".adrRunEnqueueFailed", function() {
                runAdrScenario("enqueue_failed", 500, "Enqueue Failed");
              });

              $("body").on("click", ".adrRunSessionNotFound", function() {
                runAdrScenario("session_not_found", 500, "Session Not Found");
              });

              // Re-Submit Same UUID helper for duplicate+approved scenario
              $("body").on("click", ".adrResubmitSameUuid", function() {
                if (!gSavedUuidForResubmit) {
                  // Save current UUID before first submit
                  gSavedUuidForResubmit = sessionId;
                  console.log("[ADR-0003 SIM] Saved UUID for re-submit: " + gSavedUuidForResubmit);
                }
                // Re-populate UUID with saved value and re-trigger form submission
                sessionId = gSavedUuidForResubmit;
                window.sessionId = sessionId;
                $("#uuid").val(sessionId);
                console.log("[ADR-0003 SIM] Re-submitting with same UUID: " + sessionId);

                // Always set duplicate_approved sim params (checkout response handler clears them after first submit)
                $("#sim_scenario").val("duplicate_approved");
                $("#sim_delay_ms").val(2000);
                $("#sim-armed-scenario-name").text("Duplicate + Approved");
                $("#sim-armed-indicator").show();
                console.log("[ADR-0003 SIM] Armed: duplicate_approved (delay=2000ms) [via resubmit helper]");

                // Mock tokenization based on selected payment method (same pattern as runAdrScenario)
                var selectedMethod = gSelectedPaymentMethod;

                if (selectedMethod === "credit") {
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RESUBMIT] Mock getPaymentKey - returning CREDIT card data");
                    return {
                      key: "mock_adr_credit_duplicate_approved_" + Date.now(),
                      creditcard: {
                        number: "311338xxxxxx1234",  // Amex BIN (credit)
                        cardtype: "Amex"
                      }
                    };
                  };
                } else if (selectedMethod === "debit") {
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RESUBMIT] Mock getPaymentKey - returning DEBIT card data");
                    return {
                      key: "mock_adr_debit_duplicate_approved_" + Date.now(),
                      creditcard: {
                        number: "485427xxxxxx5678",  // Visa BIN (debit)
                        cardtype: "Visa"
                      }
                    };
                  };
                } else if (selectedMethod === "check") {
                  client.getPaymentKey = async function(paymentCheck) {
                    console.log("🎭 [ADR RESUBMIT] Mock getPaymentKey (check) - returning ACH payment key");
                    return Promise.resolve({
                      key: "mock_adr_ach_duplicate_approved_" + Date.now()
                    });
                  };
                } else {
                  console.warn("[ADR RESUBMIT] Unknown payment method: " + selectedMethod + ". Defaulting to credit card mock.");
                  creditCardClient.getPaymentKey = async function(paymentCard) {
                    console.log("🎭 [ADR RESUBMIT] Mock getPaymentKey - returning default CREDIT card data");
                    return {
                      key: "mock_adr_default_duplicate_approved_" + Date.now(),
                      creditcard: {
                        number: "311338xxxxxx1234",
                        cardtype: "Amex"
                      }
                    };
                  };
                }

                // Set one-shot validation bypass flag (cleared in form submit handler after check)
                window._adrResubmitBypassValidation = true;
                console.log("[ADR-0003 RESUBMIT] Set validation bypass flag");

                // Trigger submit button click (consistent with runAdrScenario pattern)
                console.log("🚀 [ADR RESUBMIT] Triggering submit button — running full normal flow...");
                $(".submitBtn").trigger("click");
              });

              // Save UUID before form submission (for re-submit helper)
              var _origFormSubmit = $("form").submit;
              $(document).on("submit", "form", function() {
                if (sessionId && !gSavedUuidForResubmit) {
                  gSavedUuidForResubmit = sessionId;
                }
              });

              // ADR-0003: Expand/collapse details
              $("body").on("click", ".adr-details-toggle", function() {
                let targetId = $(this).data("target");
                let target = $("#" + targetId);
                if (target.is(":visible")) {
                  target.slideUp(150);
                  $(this).text("▶ Details");
                } else {
                  target.slideDown(150);
                  $(this).text("▼ Details");
                }
              });
            </script>
        </div>

        <!-- BIN Lookup Result Display (POC) -->
        <div id="binLookupResult" style="display: none; margin-bottom: 20px; padding: 15px; border-radius: 5px;"></div>

        <!-- had to put this div inside it's own container because
          - I didn't want to define a fixed width, since I wanted to put different text in the button
          - but removing the width makes it take up all the space (since div is a block element)
          - so by making it a flex item, it'll only take up as much space as needed by the content;
          - and the alternative, which was to make it a <button>, was, for some reason, triggering the form submission twice
          - even though I added the </form> tag above, making all these buttons OUTSIDE the form.
         -->
        <div class="submitBtnCtr" style="display:flex">
          <div class="btn btn-primary submitBtn regularSubmitBtn" aria-label="Process Payment Button">Process Payment</div>
        </div>

        <style>
          .applePaySubmitBtn {
            width: 266px;
            margin: 0 auto;
            margin-bottom: 15px;

            background: #000;
            box-shadow: 1px 1px 2px #ccc;
            font-weight: bold;
            font-size: 16px;
            border: 1px solid transparent;
            border-radius: 31px;
            transition: background-color 0.5s ease;
            display: block;
          }

          .applePaySubmitBtn:hover {
            background: #000;
          }

          .applePaySubmitBtn img {
            max-width: 100%;
            max-height: 32px;
          }

          .applePaySubmitBtn h5 {
            display: none;
            margin: 8px;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
        </style>

        <!-- apple pay -->
        <div class="btn btn-primary applePaySubmitBtn" name="applePaySubmitBtn">
          <img src="https://freedommerchants.com/images/fmc/genericApplePay2.png" />
          <h5>Please Wait...Processing</h5>
        </div>
            <!-- gateway=epay end -->

      <!-- ========================== ERROR MESSAGES ======================== -->
      <p class="genericErrors"></p>

      <p class="submissionErrors">Please fill in the required fields</p>

      <!-- apple pay -->
      <!-- Apple Pay Errors will be shown here -->
      <div id="paymentCardErrorContainer" role="alert">
          <!-- Any error messages will be inserted here. -->
      </div>

      <p class="railsErrors alert alert-warning" role="alert"></p>

      <p class="maxMsg" style="color: #d50707; text-align: center"></p>
      <!-- ========================== ERROR MESSAGES ======================== -->
      </div> 
      <!-- Not sure what starting div this is closing -->

      <!-- Server-side ePay result -->
      <style>
        #decline-result {
          display: none;
          text-align: center;

          #decline-reason {
            display: block;
          }
        }

        #error-result {
          display: none;
          text-align: center;

          #error-reason {
            display: block;
          }
        }

        #info-result {
          display: none;
          text-align: center;

          #info-reason {
            display: block;
          }
        }
      </style>

      <div class="panel panel-info" id="info-result" style="width: 100%">
        <div class="panel-heading">
          <h4 class="panel-title"><b>Hmm...</b></h4>  
        </div>
        <div class="panel-body">
          <strong id="info-reason" class="text-info">
            <!-- the declined error will be insterted here -->
          </strong>
          <p id="info-suggestion" class="text-info">
            Sorry, this is taking longer than usual...  
            <br>
            Thanks for your patience!
          </p>
        </div>
      </div>

      <style>
        #wsWarning, #wsError { 
            display: none;
         }
      </style>
      
      <div class="alert alert-warning" id="wsWarning" role="alert">
        Couldn't connect to the server.  Re-trying in 2s...
      </div>

      <div class="panel panel-danger" id="wsError" style="width: 100%">
        <div class="panel-heading">
          <h4 class="panel-title"><b>There was an error connecting to the server...</b></h4>  
        </div>
        <div class="panel-body">
          <strong id="error-reason" class="text-danger">
            <!-- the error error will be insterted here -->
          </strong>
          <p id="error-suggestion" class="text-danger">
            We've been notified.  Sorry for the inconvenience.
            <br><br><b>Please wait a few minutes and try again.</b>
          </p>
        </div>
      </div>

      <div class="panel panel-danger" id="decline-result" style="width: 100%">
        <div class="panel-heading">
          <h4 class="panel-title"><b>Transaction Declined</b></h4>  
        </div>
        <div class="panel-body">
          <strong id="decline-reason" class="text-danger">
            <!-- the declined error will be insterted here -->
          </strong>
          <p id="decline-suggestion" class="text-danger">
            Please check your payment information and re-try the transaction.
          </p>
        </div>
      </div>

    <!-- ADR-0003: In-flight duplicate POST UX (Decision 2) -->
    <div id="in-flight-result" data-cy="inFlightResult" style="display: none; margin-top: 20px;">
      <div class="alert alert-warning">
        <span id="in-flight-reason"></span>
      </div>
    </div>

    <!-- ADR-0003: Retry-required UX (Decision 1) — retry via normal Process Payment button -->
    <div id="retry-result" data-cy="retryResult" style="display: none; margin-top: 20px;">
      <div class="alert alert-danger">
        <span id="retry-reason"></span>
        <p id="retry-guidance" style="margin-top: 8px;">Please check your payment information and click <b>Process Payment</b> to try again.</p>
      </div>
    </div>

      <div class="panel panel-danger" id="error-result" style="width: 100%">
        <div class="panel-heading">
          <h4 class="panel-title"><b>Something Went Wrong..</b></h4>  
        </div>
        <div class="panel-body">
          <strong id="error-reason" class="text-danger">
            <!-- the error error will be insterted here -->
          </strong>
          <p id="error-suggestion" class="text-danger">
            We're on it.  In the mean time, please double-check your payment information and try again.
            <br>Sorry for the inconvenience.
          </p>
        </div>
      </div>
    </section>

    <!--  -->
    <section data-cy="iauthorize-section">
      <style>
        .iAuthorizeTxt{
          text-align: center; font-size: 11px; margin-top: 20px; color: #aaa; display: none;
        }
      </style>

      <script>
        $(function()
        {
          // [exec-stage2]
          if(showIAuthorizeTxt)
          {
            $(".iAuthorizeTxt").show();
            $(".companyName").text(companyName);
          }
        });
      </script>

      <!-- I authorize -->
      <p class="iAuthorizeTxt">
         
          For questions, please contact us
    <br>By Phone: (508) 510-3666, EXT. 2
    <br>By Email: gpowell@nmetc.com
    <br>By Mail: 35 United Drive, Suite 101
    <br>West Bridgewater, MA 02379              </p>
    </section>

    <!-- <section id="temporaryTestArea">
      <h3 id="transactionResult">Transaction Result will appear here..</h3>
    </section> -->

    <section data-cy="trustseal-section">
      <!-- Trust Seal -->
      <div class="row rs1">
        <ul id="trustList">
           
            <li>
              <div>
                <!-- Norton Secured Seal -->
                <script type="text/javascript" src="https://seal.websecurity.norton.com/getseal?host=www.freedommerchants.com&size=L&use_flash=NO&use_transparent=NO&lang=en"></script>
                <noscript>
                  <a href="https://trustsealinfo.websecurity.norton.com/splash?form_file=fdf/splash.fdf&dn=www.freedommerchants.com&lang=en" target="_blank">
                    <img src="https://seal.websecurity.norton.com/images/vseal.gif" alt="Norton Secured Seal" style="height:62px; border:0;" />
                  </a>
                </noscript>
              </div>
            </li>

            <li>
              <div class="nojsTrustwave">
                <a href='https://sealserver.trustwave.com/cert.php?customerId=9d159cf72e0f46e6a145cf632a5655a5&size=105x54' target="_blank"><img id="trustwaveSealImage" src="https://sealserver.trustwave.com/seal_image.php?customerId=9d159cf72e0f46e6a145cf632a5655a5&size=105x54" border="0" style="cursor:pointer;" alt="trustwave seal image"></a> 
              </div>
            </li>

            <li>
              <div>
                <div><a href="https://www.freedommerchants.com" target="_blank"><img src="https://freedommerchants.com/newsite/images/fmclogonew.svg" style="height:45px;" alt="freedom merchants logo" /></a></div>
              </div>
            </li>  
                  </ul>
      </div>
    </section>

    </div><!-- main div container -->
  
  </main><!--  end fieldsCtr   -->
  <div class="col-xs-0 col-sm-1 col-md-1 col-lg-2"></div>
</div>

  </div><!-- col-sm-8 ends -->
  <div class="col-sm-1 col-md-2"></div>
</div><!-- container ends -->

  
  </div>

  <!-- JEMSU - START -->
  <script type="text/javascript">
    if(gpbn("live") == "" || gpbn("live") != "false")
    {
      adroll_adv_id = "EGSA5J2WEJG2NLZBTD4WFF";
      adroll_pix_id = "XP2MS2X3JVFMJKZMKILOW3";
      /* OPTIONAL: provide email to improve user identification */
      /* adroll_email = "sales@freedommerchants.com"; */
      (function () {
          var _onload = function(){
              if (document.readyState && !/loaded|complete/.test(document.readyState)){setTimeout(_onload, 10);return}
              if (!window.__adroll_loaded){__adroll_loaded=true;setTimeout(_onload, 50);return}
              var scr = document.createElement("script");
              var host = (("https:" == document.location.protocol) ? "https://s.adroll.com" : "http://a.adroll.com");
              scr.setAttribute('async', 'true');
              scr.type = "text/javascript";
              scr.src = host + "/j/roundtrip.js";
              ((document.getElementsByTagName('head') || [null])[0] ||
                  document.getElementsByTagName('script')[0].parentNode).appendChild(scr);
          };
          if (window.addEventListener) {window.addEventListener('load', _onload, false);}
          else {window.attachEvent('onload', _onload)}
      }());
    }
  </script>   
  <!-- JEMSU - END -->

  <!-- capture more info about user's browser -->
  <input type="hidden" name="UMcustom9" />
  <script src="https://freedommerchants.com/javascript/feature.js"></script>
  <script>
    // [exec-stage1]
    try 
    {
      // this adds the feature classes to the HTML element
      feature.testAll();
    }
    catch(err)
    {
      console.log("error trying feature.testAll() - " + err.message);
    }
    
    $(function()
    {
      // [exec-stage2]
      var features = $("html").attr("class");
      $("[name='UMcustom9']").val(features);
    });      
  </script>

  </body>
</div>
</html>