text: function refreshPage(){
      window.location.reload();
  } 
  
  // Function to verify that the phone number is correct.
  // Here, I validate for (12345), but you have to change that for a phone validation
  // Tutorials on Regular expressions
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
  // https://flaviocopes.com/javascript-regular-expressions/
  // Regular expressions can get complex, you can think in terms of a series of characters
  // or numbers
  function validatePhone(txtPhone) {
      var a = document.getElementById(txtPhone).value;
      // This filter asks for something like (12345), so parentheses with any number (at least 1)
      // of digits
      var filter = /^(\([-+]?[0-9]+)\)$/;
      if (filter.test(a)) {
          return true;
      }
      else {
          return false;
      }
  }
  
        // Form validation code will come here.
        function validate() {
  
          datetimepicker = document.getElementById('datetimepicker').value 
          fName = document.getElementById('form6Example1').value 
          lName = document.getElementById('form6Example2').value 
          var service = document.getElementById('serviceid').value
          const phone = document.getElementById("form6Example6").value;
          const creditcard = document.getElementById("form6Example7").value;
          var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
          var cardregexp = /^[(]{0,1}[0-9]{4}[)]{0,1}[-\s\.]{0,1}[0-9]{4}[-\s\.]{0,1}[0-9]{4}[-\s\.]{0,1}[0-9]{4}$/;
          
          var phoneResult = phoneRGEX.test(phone);
          var cardResult = cardregexp.test(creditcard)
        
           if(phoneResult == false) {
              alert( "Please enter your phone number with the proper format! e.g. 123-456-7899 or 1234567899");
              return false;
          }
          else if (cardResult == false) {
            alert( "Please enter your credit card number with the proper format! e.g. 1234-1234-1234-1234");
            return false;
          }
           else{
             alert("Thanks for booking!\n"+
             "Your booking time: " + datetimepicker+
             "\nYour name: " + fName +" "+lName +
             "\nYour Service: "+service);
           }
        }
  
  
  // Using date restrictions on datepicker
  // Document of datepicker is here: https://api.jqueryui.com/datepicker/
  // The following code shows how to set specific dates to exclude, as well as Sundays (Day 0)
  // Make sure in your version that you associate Days to remove with Experts (e.g. John doesn't work Mondays)
  var unavailableDates = ["06/29/2020","07/07/2020","07/10/2020"];
  const setDateFormat = "mm/dd/yy";
  
  function disableDates(date) {
      // Sunday is Day 0, disable all Sundays
      if (date.getDay() === 0)
          return [false];
      var string = jQuery.datepicker.formatDate(setDateFormat, date);
      return [ unavailableDates.indexOf(string) === -1 ]
  }
  
  
  // HERE, JQuery "LISTENING" starts
  $(document).ready(function(){
  
      // phone validation, it calls validatePhone
      // and also some feedback as an Alert + putting a value in the input that shows the format required
      // the "addClass" will use the class "error" defined in style.css and add it to the phone input
      // The "error" class in style.css defines yellow background and red foreground
      $("#phone").on("change", function(){
          if (!validatePhone("phone")){
              alert("Wrong format for phone");
              $("#phone").val("(xxxx)");
              $("#phone").addClass("error");
          }
          else {
              $("#phone").removeClass("error");
          }
      });
  
      // To change the style of the calender, look in jqueryui.com, under Themes, in the ThemeRoller Gallery
      // You can try different themes (the names are under the calendars) / This is Excite Bike
      // To use a different theme you must include its css in your HTML file.
      // The one I included in my HTML is the Excite Bike, but you can try others
  
      // Also, here is a good tutorial for playing with the datepicker in https://webkul.com/blog/jquery-datepicker/
      // Datepicker is also documented as one of the widgets here: https://api.jqueryui.com/category/widgets/
      $( "#dateInput" ).datepicker(
          {
              dateFormat: setDateFormat,
              // no calendar before June 1rst 2020
              minDate: new Date('06/01/2020'),
              maxDate: '+4M',
              // used to disable some dates
              beforeShowDay: $.datepicker.noWeekends,
              beforeShowDay: disableDates
          }
      );
  
  
      // Look at the different events on which an action can be performed
      // https://www.w3schools.com/jquery/jquery_events.asp
      // Here, we put
      $("#debit").on("mouseenter", function(){
          $("#debit").addClass("showInput");
      });
  
      $("#debit").on("mouseleave", function(){
          $("#debit").removeClass("showInput");
      });
  
      // https://jqueryui.com/tooltip/
      // The class "highlight" used here is predefined in JQuery UI
      // the message of the tooltip is encoded in the input (in the HTML file)
      $("#debit").tooltip({
          classes: {
              "ui-tooltip": "highlight"
          }
      });
  
  
  });