

<!-- Connect to WebPayment table on WEBSQL -->


<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="" lang="en">
<!--<![endif]-->
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sault College - Parking Pass</title>

    <link rel="stylesheet" type="text/css" href="scripts/css/MyFontsWebfontsKit/MyFontsWebfontsKit.css">
    <link href="boilerplate.css" rel="stylesheet" type="text/css">

    <!-- Bootstrap CSS -->
    <link href="scripts/css/bootstrap.css" rel="stylesheet" type="text/css">

    <script src="/respond.min.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="scripts/js/smartmenus-1.0.1/jquery.smartmenus.js"></script>
    <script type="text/javascript" src="scripts/js/SCscripts.js"></script>

    <!--Bootstrap JS-->
    <script type="text/javascript" src="scripts/js/bootstrap.min.js"></script>

    <!-- Icon library for favicon icons -->
    <link href="https://use.fontawesome.com/releases/v5.3.0/css/all.css" rel="stylesheet"/>

    <!--Bootstrap Formhelpers - phone (Field Formatter)-->
    <script type="text/javascript" src="scripts/js/bootstrap-formhelpers-phone.js"></script>

    <!-- Date Picker -->
    <link href="scripts/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/js/bootstrap-datepicker.min.js"></script>

    <script type="text/javascript" language="javascript" src="scripts/js/validateEmail.js"></script>
    <script type="text/javascript" language="javaScript" src="scripts/js/OnlineRegistration.js"></script>

    <style>
        .card-header {
            cursor: pointer;
        }

        [data-toggle="collapse"].collapsed .fa:before {
            content: "\f077";
        }

        [data-toggle="collapse"] .fa:before {
            content: "\f078";
        }
    </style>

    <script>
//<![CDATA[

//*******************************************************************************
// This function validates all the form data before submitting to the set up page
//*******************************************************************************
function validate_form() {

    var I;
    var selText;

    //Validate First Name - Letters Only
    var firstName = document.getElementById('firstname');
    firstName.value = trim(firstName.value);
    if (notEmpty(firstName, "Please enter a First Name") == false)
        return false;
    else
    if (isAlphabet(firstName, "Only letters permitted in First Name") == false)
        return false;

    //Validate the Last Name - Letters Only
    var lastName = document.getElementById('lastname');
    lastName.value = trim(lastName.value);
    if (notEmpty(lastName, "Please enter a Last Name") == false)
        return false;
    else
    if (isAlphabet(lastName, "Only letters permitted in Last Name") == false)
        return false;

    //Validate the Email
    var email = document.getElementById('IdEmail');
    email.value = trim(email.value);
    if (notEmpty(email, "Please enter an email") == false)
        return false;
    else
    if (emailValidator(email, "Invalid email format") == false)
        return false;

    //Validate the Phone Number
    var phoneNumber = document.getElementById('IdPhoneNumber');
    phoneNumber.value = trim(phoneNumber.value);
    if (notEmpty(phoneNumber, "Please enter a phone number") == false)
        return false;

    //Validate the Student Number
    var studentNumber = document.getElementById('IdStudentNumber');
    studentNumber.value = trim(studentNumber.value);
    if (notEmpty(studentNumber, "Please enter a student number") == false)
        return false;
    else
    if (isNumeric(studentNumber, "Only numbers permitted in the Student Number") == false)
        return false;

    //Validate License Number - Letters Only and Numbers Only
    var licencePlate = document.getElementById('IdLicencePlate');
    licencePlate.value = trim(licencePlate.value);
    if (notEmpty(licencePlate, "Please enter a Licence Plate") == false)
        return false;
    else
    if (isAlphanumeric(licencePlate, "Only letters and numbers permitted in Licence Plate") == false)
        return false;

    //Validate Parking Lot - Is Required
    var parkingLot = document.getElementById('IdParkingLot');
    parkingLot.value = trim(parkingLot.value);
    if (notEmpty(parkingLot, "Please select a parking lot") == false)
        return false;

    //Validate the Street Number
    var streetnumber = document.getElementById('street_number');
    streetnumber.value = trim(streetnumber.value);
    if (notEmpty(streetnumber, "Please enter a street number") == false)
        return false;
    else
    if (isNumeric(streetnumber, "Only numbers permitted in the Street Number") == false)
        return false;

    //Validate the Address - Letters or Number only
    var address = document.getElementById('route');
    address.value = trim(address.value);
    if (notEmpty(address, "Please enter an address") == false)
        return false;
    else
    if (isAlphanumeric(address, "Only letters and numbers permitted in Address") == false)
        return false;

    //Validate the City - Letters Only
    var city = document.getElementById('locality');
    city.value = trim(city.value);
    if (notEmpty(city, "Please enter a City Name") == false)
        return false;
    else
    if (isAlphabet(city, "Only letters permitted in City") == false)
        return false;

    //Validate the Province / State
    var province = document.getElementById('administrative_area_level_1');
    province.value = trim(province.value);
    if (notEmpty(province, "Please enter a Province / State") == false)
        return false;
    else
    if (isAlphabet(province, "Only letters are permitted in Province / State") == false)
        return false;

    //Validate the Country
    var country = document.getElementById('country');
    country.value = trim(country.value);
    if (notEmpty(country, "Please enter a Country") == false)
        return false;
    else
    if (isAlphabet(country, "Only letters are permitted in Country") == false)
        return false;

    //Validate the Postal Code - Letters and Numbers only
    var postalCode = document.getElementById('postal_code');
    postalCode.value = trim(postalCode.value);
    postalCode.Value = postalCode.value.toUpperCase();
    if (notEmpty(postalCode, "Please enter a Postal Code") == false)
        return false;
    else
    if (isAlphanumeric(postalCode, "Only letters and numbers permitted in Postal Code") == false)
        return false;

        var monthDetails = "";

	//Validate Parking Pass Type
	if(document.getElementById('annual').checked) 
    {
		document.getElementById("amount").value = 290.41;
		document.getElementById("hdnFundDesc").value = "Annual Parking Pass - "
    } 
    else if (document.getElementById('semester').checked)
    {
		document.getElementById("amount").value = 146.90;
		document.getElementById("hdnFundDesc").value = "Semester Parking Pass - "
    } 
	else if (document.getElementById('apprenticeship').checked)
    {
		document.getElementById("amount").value = 101.70;
		document.getElementById("hdnFundDesc").value = "Apprenticeship Parking Pass - "
    } 
    else if (document.getElementById('month').checked) 
    {
        var startDate = document.getElementById("IdStartDate");
        var endDate = document.getElementById("IdEndDate");

        if (notEmpty(startDate, "Please enter a Start Date") == false)
            return false;
        

        if (notEmpty(endDate, "Please enter a End Date") == false)
            return false;
        

        var startMonth = startDate.value.split("-")[0];
        var startYear = startDate.value.split("-")[1];
        var endMonth = endDate.value.split("-")[0];
        var endYear = endDate.value.split("-")[1];

        var monthsDifference = ((endYear - startYear) * 12 + (endMonth - startMonth) + 1);

        document.getElementById("amount").value = 50.85 * monthsDifference;
        document.getElementById("hdnFundDesc").value = "Monthly Parking Pass (" + monthsDifference + " month(s)) - ";

        monthDetails = "Start Date: " + startDate.value + " | End Date: " + endDate.value + " | ";
    }
    else
    {
        alert("Please select parking pass type");
        return false;
    }

    var parkingLot = document.getElementById('IdParkingLot').value;

    if (parkingLot == "A")
    {
        document.getElementById("hdnFundName").value = "Y";
        document.getElementById("hdnFundDesc").value += "A - North";
    }
    else if (parkingLot == "J")
    {
        document.getElementById("hdnFundName").value = "Z";
        document.getElementById("hdnFundDesc").value += "J - South";
    }
    
    document.getElementById("orderDetails").value = monthDetails + "Licence Num: " + document.getElementById('IdLicencePlate').value + " | Licence Num 2: " + document.getElementById('IdLicencePlateAlt').value + " | Student Num: " + document.getElementById('IdStudentNumber').value;

    $("#myModal1").modal("show");
}

    //submit function
    function submit() {
        document.donorForm.submit();
        }
  
  //function changes background color when field gets focus
  function setBGColor(obj){
    obj.style.backgroundColor = "#FFFFBA";
  }

  //function returns background color to white when loosing focus
  function resetBGColor(obj){
    obj.style.backgroundColor = "";
  }	   
	
	function cleanSQLText(sqlText)
	{
	  sqlText = sqlText.replace(/['"-;]/g, "");
		return sqlText;   
	}
	
	
	//******************************************************************************************
	//The following functions provided by http://www.tizag.com/javascriptT/javascriptform.php
	
	// This function ensures the values are only Letters or Numbers
	function isAlphanumeric(elem, helperMsg){
	  var alphaExp = /^[0-9a-zA-Z .]+$/;
	  if(elem.value.match(alphaExp)){
		  return true;
	  }else{
		  alert(helperMsg);
		  elem.focus();
		  return false;
	  }
  }
	
	//Removes leading and trailing spaces
	function trim(stringToTrim) {
	  return stringToTrim.replace(/^\s+|\s+$/g,"");
  }

    //Removes everything accept numbers
	function trimNonNumbers(stringToTrim) {
	  return stringToTrim.replace(/\D+/g,"");
  }
	
	// If the length of the element's string is 0 then display helper message
  function notEmpty(elem, helperMsg){
	  if(elem.value.length == 0){
		  alert(helperMsg);
		  elem.focus(); // set the focus to this input
		  return false;
	  }
	  return true;
  }
	
	//Verify the string only contains letters and spaces
  function isAlphabet(elem, helperMsg){
	  var alphaExp = /^[a-zA-Z .]+$/;
	  if(elem.value.match(alphaExp)){
		  return true;
	  }else{
		  elem.focus();
          alert(helperMsg);
		  return false;
	  }
  }
	
	//Verify the string contains only numbers
  function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
      return true;
    }else{
      alert(helperMsg);
      elem.focus();
      return false;
    }
  }
		
  //Validate the email address
  function emailValidator(elem, helperMsg){
    var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if(elem.value.match(emailExp)){
      return true;
    }else{
      alert(helperMsg);
      elem.focus();
      return false;
    }
  }
		
//]]>
    </script>

    <script>
        var placeSearch, autocomplete;
      var componentForm = {
        street_number: 'short_name',
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'long_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      function initAutocomplete() {
        // Create the autocomplete object, restricting the search to geographical
        // location types.
        autocomplete = new google.maps.places.Autocomplete(
            /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
            {types: ['geocode']});

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
      }

      function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      // Bias the autocomplete object to the user's geographical location,
      // as supplied by the browser's 'navigator.geolocation' object.
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            var circle = new google.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            });
            autocomplete.setBounds(circle.getBounds());
          });
        }
      }
    </script>
</head>

<body style="width:94%">
    <div class="container">
        <div id="contentwrap">
            <div id="leftCol4" role="main">
                <div id="leftCol4R" role="contentinfo">
                    <div id="leftCol4M" class="bootstrap">
                        <br />
                        <p style="font-size:1.25rem !important">
                                Welcome to our online payment page to purchase your parking permit.  Please follow the steps below to purchase your parking permit online:

								<br/><br/><strong>Step 1</strong>: Please complete the online form and payment below to purchase your parking pass.  Your payment receipt will be emailed to the email address provided in the form.  

								<br/><br/><strong>Step 2</strong>: Once complete, pick up your permit in the Parking Office (B1140).
                                <br/>For the 2025/26 September term, visit the Parking staff in <u>M Wing</u> from September 3rd to September 10th, 2025 between 9:00am to 4:00pm.
                                <br/>Please have <strong>Photo ID</strong> ready to receive your permit.

								<br/><br/><strong>Step 3</strong>: Begin parking in the lot your permit was issued for and have a great semester! 

								<br /><br />
								Please note, Parking Office hours are Monday to Thursday 9:00 am to 2:30 pm, and Friday 9:00 am to 1:00 pm.
                        </p>
                        <br />

                        <form method="post" name="donorForm" id="donorForm" action="ParkingPass_SetUp.asp">

                            <!-- ***************** HIDDEN FORM FIELDS ***************** -->

                            <input type="hidden" name="hdnFundDesc" id="hdnFundDesc" />
                            <input type="hidden" name="fundName" id="hdnFundName" />
                            <input type="hidden" name="amount" id="amount" />
                            <input type="hidden" name="orderDetails" id="orderDetails" />
                            <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">

                            <!-- ***************** CONTACT FIELDS ***************** -->

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-6">
                                    <label for="firstname">First Name <label style="color:#9B0000">*</label></label>
                                    <input name="firstname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="firstname" maxlength="49" />
                                    <small id="IdFirstNameError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="lastname">Last Name <label style="color:#9B0000">*</label></label>
                                    <input name="lastname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="lastname" maxlength="49" />
                                    <small id="IdLastNameError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12">
                                    <label for="IdEmail">Email address <label style="color:#9B0000">*</label></label>
                                    <input name="email" onkeydown="EnterHandler();" type="email" class="form-control form-control-lg" id="IdEmail" aria-describedby="emailHelp" placeholder="example@email.com" maxlength="49">
                                    <small id="IdEmailError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-6">
                                    <label for="IdPhoneNumber">Phone Number <label style="color:#9B0000">*</label></label>
                                    <input name="IdPhoneNumber" id="IdPhoneNumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg bfh-phone" data-format="(ddd) ddd-dddd">
                                    <small id="IdPhoneNumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4"></div>
                                <div class="form-group col-md-2"></div>
                            </div>

                            <!-- ***************** PARKING PASS FIELDS ***************** -->

                            <!--Horizontal Line Spacer-->
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-10" style="margin: 0px;">
                                    <hr />
                                </div>
                            </div>
                            <br />
                            <!--./Horizontal Line Spacer-->
							
							<div class="form-row justify-content-center">
                                <div class="form-group col-md-3">
                                    <label for="IdStudentNumber">Student/Staff Number <label style="color:#9B0000">*</label></label>
                                    <input name="IdStudentNumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg bfh-phone" data-format="dddddddd" id="IdStudentNumber" Maxlength="8">
                                    <small id="IdStudentNumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-5">
                                    <label for="IdParkingLot">Parking Lot <label style="color:#9B0000">*</label></label>
                                    <select class="form-control form-control-lg" name="IdParkingLot" id="IdParkingLot" onchange="">
                                        <option value=""> -- Please Select -- </option>
                                        <option value="J">J - South</option>
                                        <option value="A">A - North</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-4">
                                    <label for="IdLicencePlate">Licence Plate #1 <label style="color:#9B0000">*</label></label>
                                    <input name="IdLicencePlate" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="IdLicencePlate" Maxlength="8">
                                    <small id="IdLicencePlateError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="IdLicencePlateAlt">Licence Plate #2 <label style="color:#9B0000">&nbsp;</label></label>
                                    <input name="IdLicencePlateAlt" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="IdLicencePlateAlt" Maxlength="8">
                                    <small id="IdLicencePlateAltError" class="text-danger"></small>
                                </div>
                            </div>

							<br/>
                             
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-8">
									<label for="IdPhoneNumber">Parking Pass Type <label style="color:#9B0000">*</label></label>
                                    <ul class="list-group">
										<li class="list-group-item">
                                            <div class="row">
                                            <div class="custom-control custom-radio" style="width:60%">
												<input type="radio" id="annual" name="customRadio" class="custom-control-input" value="annual">
												<label class="custom-control-label" for="annual">Annual Parking Pass <br/><small>(Sept. 1 - Aug. 31)</small></label>
                                            </div>
                                            <div style="width:40%; text-align:right">
                                                <label>$290.41</label>
                                            </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="row">
                                            <div class="custom-control custom-radio" style="width:60%">
												<input type="radio" id="semester" name="customRadio" class="custom-control-input" value="semester">
												<label class="custom-control-label" for="semester">Semester Parking Pass</label>
                                            </div>
                                            <div style="width:40%; text-align:right">
                                                <label>$146.90</label>
                                            </div>
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="row">
                                            <div class="custom-control custom-radio" style="width:60%">
												<input type="radio" id="month" name="customRadio" class="custom-control-input" value="month">
												<label class="custom-control-label" for="month">Monthly Parking Pass</label>
                                            </div>
                                            <div style="width:40%; text-align:right">
                                                <label>$50.85 (per Month)</label>
                                            </div>
                                            </div>
                                        </li>
										<li class="list-group-item">
                                            <div class="row">
                                            <div class="custom-control custom-radio" style="width:60%">
												<input type="radio" id="apprenticeship" name="customRadio" class="custom-control-input" value="apprenticeship">
												<label class="custom-control-label" for="apprenticeship">Apprentice Parking Pass <br/><small>(Permit will align with Apprenticeship Schedule)</small></label>
                                            </div>
                                            <div style="width:40%; text-align:right">
                                                <label>$101.70</label>
                                            </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="form-row justify-content-center" id="dateFields" style="display:none;">
                                <div class="form-group col-md-4">
                                    <label for="IdStartDate">Start Month <label style="color:#9B0000">*</label></label>
                                    <input name="IdStartDate" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="IdStartDate">
                                    <small id="IdStartDateError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="IdEndDate">End Month <label style="color:#9B0000">*</label></label>
                                    <input name="IdEndDate" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="IdEndDate">
                                    <small id="IdEndDateError" class="text-danger"></small>
                                </div>
                            </div>

                            <!--Horizontal Line Spacer-->
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-10" style="margin: 0px;">
                                    <hr />
                                </div>
                            </div>
                            <!--./Horizontal Line Spacer-->

                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    <h4 class="panel-title" style="font-weight: 600">Address</h4>
                                </div>
                                <div class="panel-body">
                                    <input id="autocomplete" onkeydown="EnterHandler();" placeholder="Search Address (Autofill)"
                                        onfocus="geolocate()" type="text" class="form-control form-control-lg" maxlength="300">
                                    <br>
                                    <div id="address">
                                        <div class="form-row">
                                            <div class="form-group col-md-3">
                                                <label class="control-label" for="street_number">Street Number <label style="color:#9B0000">*</label></label>
                                                <input name="street_number" onkeydown="EnterHandler();" class="form-control form-control-lg" id="street_number" maxlength="9">
                                            </div>
                                            <div class="form-group col-md-9">
                                                <label class="control-label" for="route">Street Name <label style="color:#9B0000">*</label></label>
                                                <input name="route" onkeydown="EnterHandler();" class="form-control form-control-lg" id="route" maxlength="40">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="locality">City <label style="color:#9B0000">*</label></label>
                                                <input name="locality" onkeydown="EnterHandler();" class="form-control form-control-lg field" id="locality" maxlength="49">
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="administrative_area_level_1">Province / State <label style="color:#9B0000">*</label></label>
                                                <input name="administrative_area_level_1" onkeydown="EnterHandler();" class="form-control form-control-lg" id="administrative_area_level_1" maxlength="49">
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label class="control-label" for="country">Country <label style="color:#9B0000">*</label></label>
                                                <input name="country" onkeydown="EnterHandler();" class="form-control form-control-lg" id="country" maxlength="49">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label class="control-label" for="postal_code">Postal Code <label style="color:#9B0000">*</label></label>
                                                <input name="postal_code" onkeydown="EnterHandler();" class="form-control form-control-lg" id="postal_code" maxlength="9">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br />

                            <!-- ***************** SUBMIT FIELDS ***************** -->
                            <div class="form-row justify-content-left">
                                <div class="col-md-12">
                                    <script src="https://www.google.com/recaptcha/api.js?render=6Le6b_slAAAAAHAXjB9072E-gmQ9ZgJ1Js2Vthie"></script>
                                    <script>
                                    grecaptcha.ready(function() {
                                        grecaptcha.execute('6Le6b_slAAAAAHAXjB9072E-gmQ9ZgJ1Js2Vthie', {action: 'submit'}).then(function(token) {
                                        document.getElementById('g-recaptcha-response').value=token;
                                        });
                                    });
                                    </script>
                                </div>
                            </div>
                            <div class="form-row justify-content-left">
                                <div class="col-md-4">
                                    <input type="button" class="btn btn-lg btn-primary" name="btnSubmit" value="Proceed to Payment" alt="Submit This Form" onclick="return validate_form();" />&nbsp;&nbsp;&nbsp;
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group text-right" style="color:#9B0000">* Indicates required field</div>
                                </div>
                            </div>

                            <!--Confirm Modal-->
                            <div class="modal fade" id="myModal1" role="dialog">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title text-primary">Payment Redirect
                                            </h4>
                                            <button type="button" class="close"
                                                data-dismiss="modal" aria-hidden="true">
                                                <span class="fa fa-times"></span>
                                            </button>
                                        </div>
                                        <div class="modal-body help" style="font-size: 1.25rem;">
                                            You will be redirected to our chase payment site to complete your transaction.
                                            <br />
                                            <br />
                                            Would you like to continue?
                                        </div>
                                        <div class="modal-footer justify-content-between">
                                            <button type="button" class="btn btn-lg btn-primary" onclick="return submit()">Continue</button>
                                            <button class="btn btn-lg btn-light" data-dismiss="modal">Back</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFAHzYLeWyNIuyQJo1XitvDocuyH4ELRw&libraries=places&callback=initAutocomplete" async defer></script>

    <!--Stop entry key from being pressed and submitting form-->
    <script>
    function EnterHandler(){
        if (window.event.keyCode == 13){
            window.event.returnValue =false;
            return null;
        }
    }

    $('#IdStartDate').datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: "09-2025",
        endDate: "08-2026",
        autoclose: true
    }).on('changeDate', function (selected) {
        var minDate = new Date(selected.date.valueOf());
        $('#IdEndDate').datepicker('setStartDate', minDate);
    });

    $('#IdEndDate').datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: "09-2025",
        endDate: "08-2026",
        autoclose: true
    }).on('changeDate', function (selected) {
        var maxDate = new Date(selected.date.valueOf());
        $('#IdStartDate').datepicker('setEndDate', maxDate);
    });

    // Add event listener to radio buttons
    $("input[name='customRadio']").change(function() {
        if ($(this).val() === "month") {
            $("#dateFields").show(); // Show date fields
        } else {
            $("#dateFields").hide(); // Hide date fields
        }
    });
    </script>

</body>
</html>
