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


<!-- 
  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"

    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

    // ------------------------- 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]
    const sessionId = uuid.v4();
    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 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")
            {
              // 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)
              {
                // randomly tip between 5 and 15%
                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") === "")
                {
                  // 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)
              {
                // 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
            if(getParameterByName("defaultPayType") === "")
            {
              $(".ccPaymentType").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();
          });
        }

        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;
      });

      // 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;
      });

      // 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;
      });

      // 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]
      // 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" /> 

  <!-- 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 checkoutTestSubCase = "";
    // -------------------------------------------------------------------------

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

      // Scroll down to ensure the info-result is visible
      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}/epay/get_status`, 
        type: 'GET',                        
        data: {
          uuid: sessionId
        },
        success: function(response) 
        {
          if(response.result == "success") 
          { 
            const paymentStatus = response.epayJobStatus;
            const paymentResult = response.epayJobResult;
            
            if(paymentStatus === "not_started")
            {
              // think about...
              // there is some sort of error, we've been informed
              // please wait a few mins and try again.
              // log in sentry with UUID
              // send me an email
            }
            else if(paymentStatus === "processing")
            {
              takingLongerThanUsual();
            }
            else if(paymentStatus === "complete")
            {
              // process result, i.e. show approved page  
              handlePaymentResult(paymentResult);
            }
            else if(paymentStatus === "exception")
            {
              // show error block with error message
              handlePaymentResult(paymentResult)
            }
          }
          else 
          {
            // will handle
          }
        },
        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="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();
  }

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

    // Scroll down to ensure the declined-result is visible
    document.getElementById('error-result').scrollIntoView({
      behavior: 'smooth',  // This makes the scroll smooth; remove it if you want instant scrolling.
      block: 'start'       // Aligns the element to the top of the viewport. You can change this to 'center' or 'end'.
    });
  }

  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 down to ensure the declined-result is visible
    document.getElementById('decline-result').scrollIntoView({
      behavior: 'smooth', 
      block: 'start'      
    });
  }
  
  clearDeclineBlock = function()
  {
    $("#decline-reason").text("");
    $("#decline-result").hide(); 
  }

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

    $(".phoneErrors").hide();
  }


  // 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;
      resetCheckoutState();
      clearInterval(checkoutPollingInterval);
      clearInfoBlock();

      if(paymentResult === "approved")
      {
        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);
        }
      }
      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();
        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();
            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();
              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();
              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 ========================================

      return true;
    }


    // ePay specific
          checkout = function(checkoutData)
      {
        // POST all the FORM data to /checkout
        $.ajax(
        {
          url: `${hostUrl}/checkout`, 
          type: 'POST',                        
          data: checkoutData,
          success: function(response) 
          {
            if(response.result == "success") 
            { 
              // 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
              // which is OF COURSE, before we've received a response.
              if($("#testSubCase").val() === 'ws-connection-gets-broken')
              {
                setTimeout(function() {
                  gSocket.close();
                  console.log("WebSocket connection got broken..");
                }, 2000)
              }
            }
            else 
            {
              console.log(response);
              let errorMsg = response.msg;
              let level = response.level;
              if(level == "exception") {
                showErrorBlock(errorMsg);  
              } else {
                showGenericError(errorMsg);
              }
              resetSubmitBtnUI();
            }
          },
          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(!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);

            let tokenizeResult = await tokenizeCreditCardData();
            if(tokenizeResult.result == "success")
            {
              // console.log("CREDIT payment key is", tokenizeResult.key);
              // return false;
              handleCreditCardPaymentKey(tokenizeResult.key);
            }
            else
            {
              // show an error
              $(".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);

              let tokenizeResult = await tokenizeCreditCardData();
              if(tokenizeResult.result == "success")
              {
                  handleCreditCardPaymentKey(tokenizeResult.key);
              }
              else
              {
                  $(".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
          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();

          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: rgb(152, 36, 36); */
              font-size: 14px;
              margin-top: 10px;
              margin-bottom: 10px;
              margin-left: 5px;
              display: none;
            }
          </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()
        {
          $("#tipAmount").on("keyup", 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);  
            }
          }

          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(); 
            }

            // [exec-stage3]
            if(!showCC && showEcheck)
            {
              $(".checkPaymentType").click(); 
            }

            // [exec-stage3]
            // investigate--
            var payType = getParameterByName("paytype");
            if(payType == "")
            {
              if(defaultPayType == "credit")
              {
                $(".ccFirst").show();
                $(".checkFirst").hide();
              }
              else if(defaultPayType == "check")
              {
                $(".checkFirst").show();
                $(".ccFirst").hide();
                $("[class~=check-ctr]").css("display", "block");
              }
              else
              {
                alert('defaultPayType has an invalid value');
              }
            }
            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");
              }  
            }
          }

          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" />
            </div>
          </div>

          <style>
            #paymentCardIFrame {
              height: 54px;
            }

            #creditCardErrorContainer {
              text-align: center;
              color: #be0f0f;
            }
          </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);
            }

             
              tokenizeCreditCardData = async function()
              {
                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);
                  if(res.key)
                  {
                    resolve({result: "success", key: res.key});
                  }
                })

                let tokenizationRes = await tokenize;
                console.log(tokenizationRes);
                return tokenizationRes;
              }
                        
          </script>
          <!-- ======================== NEW Credit Card Fields - via ePay PayJS iFrame - END ========================== -->
        </div>  
      

      <!-- gateway-agnostic -->
      <div class="credit-ctr">  
        <div class="row rs1 processingFeeCtr" data-cy="processing-fee-checkbox" 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">
            <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">
            <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>
        </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>

      <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>