

<!-- 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 - Adopt A Cougar</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>

    <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 Adoptee - Letters Only
    var adoptname = document.getElementById('adoptname');
    adoptname.value = trim(adoptname.value);
    if (notEmpty(adoptname, "Please enter a First Name") == false)
        return false;
    else
    if (isAlphabet(adoptname, "Only letters permitted in Adoptee First Name") == false)
        return false;

    //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 amount
    var amount = document.getElementById('IdDonationAmount').value;
    if(amount == null || amount == "" || amount == 0 ){
      alert ("Please enter a Donation Amount");
      document.getElementById('IdDonationAmount').select();
      return false;
    }		
    else
    {
	    if (isNaN(amount) || amount < 0.01)
		{
	        alert("Invalid Donation Amount");
	        document.getElementById('IdDonationAmount').select();
	        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;

    document.getElementById("amount").value = document.getElementById('IdDonationAmount').value;
    document.getElementById("hdnFundDesc").value = document.getElementById('adoptname').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 />
                        <ul style="font-size:1.25rem !important">
                            <li>This program is designed to help our student athletes cover the cost of the team fees that are required to play varsity athletics.
                            </li>
                            <li>All donations are athlete specific and go directly to help the athlete designated by the donor.
                            </li>
                            <li>All Adopt a Cougar donors will receive a tax receipt and donations can be made in any amount big or small.
                            </li>
                            <li>Any money donated above and beyond team fees, half will be used for an OCAA athlete scholarship to the specific athlete the donor is giving to.
                            <!-- </li>
							<li>Donations may also be made to our Men’s National Championship Team heading to Dallas on March 18th by simply typing in the words <b>“MENS HOCKEY TEAM”</b>  in the <b>COUGAR ADOPTEE NAME</b> – field. 
                            </li> -->
                        </ul>
                        <br />

                        <form method="post" name="donorForm" id="donorForm" action="AdoptACougar_SetUp.asp">

                            <!-- ***************** HIDDEN FORM FIELDS ***************** -->

                            <input type="hidden" name="hdnFundDesc" id="hdnFundDesc" />
                            <input type="hidden" name="fundName" id="hdnFundName" value="G" />
                            <input type="hidden" name="amount" id="amount" />

                            <!-- ***************** ADOPT A COUGAR FIELDS ***************** -->

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-8">
                                    <label for="adoptname">Cougar Adoptee Name <label style="color:#9B0000">*</label></label>
                                    <input name="adoptname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="adoptname" maxlength="49" />
                                    <small id="IdadoptacougarError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4">
                                    <div class="d-flex">
                                        <label>&nbsp</label>
                                    </div>
                                    <input type="button" class="btn btn-lg btn-primary" tabindex="-1" style="float: right" alt="Frequently Asked Questions" onclick="$('#myModal2').modal('show');" value="F.A.Q" />
                                </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-->

                            <!-- ***************** 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" 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">
                                    <label for="IdDonationAmount">Amount <label style="color:#9B0000">*</label></label>
                                    <div class="input-group">
                                        <input name="IdDonationAmount" id="IdDonationAmount" onkeydown="EnterHandler();" onblur="RegexAmount();" type="text" class="form-control form-control-lg" maxlength="5">
                                        <span class="input-group-append">
                                            <span class="input-group-text" style="font-size:1.25rem">$</span>
                                        </span>
                                    </div>
                                    <small id="IdDonationAmountError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-2"></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-4">
                                    <input type="button" class="btn btn-lg btn-primary" name="btnSubmit" value="Submit" 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="myModal2" role="dialog">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h4 class="modal-title text-primary">Frequently Asked Questions
                                            </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: 16px;">
                                            <div class="container">
                                                <div class="form-row justify-content-center">
                                                    <div class="col-lg-10">
                                                        <div class="tab-content" id="faq-tab-content">
                                                            <div class="tab-pane show active" id="tab1" role="tabpanel" aria-labelledby="tab1">
                                                                <div class="accordion" id="accordion-tab-1" style="font-size:1.25rem !important">
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-1" data-toggle="collapse" data-target="#accordion-tab-1-content-1" aria-expanded="false" aria-controls="accordion-tab-1-content-1">
                                                                            <button class="btn btn-lg btn-link" type="button">What is the Adopt a Cougar Program?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-1" aria-labelledby="accordion-tab-1-heading-1" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>
                                                                                    Being a college athlete comes with a set of unique pressures and the need to carefully manage one’s time.
                                                                                    The Adopt a Cougar Program will attempt to lift some of these pressures and financial burden from our student athletes. 
                                                                                    With an average of 17 hours per week dedicated to training and games, in addition to being full-time students, 
                                                                                    Varsity Athletes often do not have the time for part-time jobs which makes it difficult for these athletes to pay the expenses associated with attending college.  
                                                                                    This program attempts to off-set these costs through donations.
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-2" data-toggle="collapse" data-target="#accordion-tab-1-content-2" aria-expanded="false" aria-controls="accordion-tab-1-content-2">
                                                                            <button class="btn btn-lg btn-link" type="button">How much are Team Fees?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-2" aria-labelledby="accordion-tab-1-heading-2" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>
                                                                                    Team fees range from $100.00 - $400.00 based on the specific sport they play. 
                                                                                    The Adopt a Cougar program will allow friends, relatives and family members to contribute to covering these fees.
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-3" data-toggle="collapse" data-target="#accordion-tab-1-content-3" aria-expanded="false" aria-controls="accordion-tab-1-content-3">
                                                                            <button class="btn btn-lg btn-link" type="button">Will the money go to the athlete of my choosing?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-3" aria-labelledby="accordion-tab-1-heading-3" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>All donations are athlete specific and go directly to help the athlete designated by the donor.</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-4" data-toggle="collapse" data-target="#accordion-tab-1-content-4" aria-expanded="false" aria-controls="accordion-tab-1-content-4">
                                                                            <button class="btn btn-lg btn-link" type="button">What is the money being used for?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-4" aria-labelledby="accordion-tab-1-heading-4" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>Your gift will impact Cougar Athletes in several areas, including:</p>
                                                                                <br />
                                                                                <ul>
                                                                                    <li>Increased access to training resources and support</li>
                                                                                    <li>Budget for team apparel and equipment</li>
                                                                                    <li>Budget for competition</li>
                                                                                    <li>Budget for travel and meals</li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-5" data-toggle="collapse" data-target="#accordion-tab-1-content-5" aria-expanded="false" aria-controls="accordion-tab-1-content-5">
                                                                            <button class="btn btn-lg btn-link" type="button">Is my donation tax deductible?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-5" aria-labelledby="accordion-tab-1-heading-5" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>All Adopt a Cougar donations will receive a tax receipt for donations over $20.00.</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="card">
                                                                        <div class="card-header collapsed" id="accordion-tab-1-heading-6" data-toggle="collapse" data-target="#accordion-tab-1-content-6" aria-expanded="false" aria-controls="accordion-tab-1-content-6">
                                                                            <button class="btn btn-lg btn-link" type="button">What happens if I give more money than the team fees?</button>
                                                                            <i class="fa" style="float:right"></i>
                                                                        </div>
                                                                        <div class="collapse" id="accordion-tab-1-content-6" aria-labelledby="accordion-tab-1-heading-6" data-parent="#accordion-tab-1">
                                                                            <div class="card-body">
                                                                                <p>
                                                                                    Any money a student athlete brings in through this program will first go to cover their team fees and then half of anything donated above and beyond the team 
                                                                                    fee amount will be returned to the student athlete in the form of a scholarship cheque up to the maximum allowable $1500.00 per semester as set out in the OCAA rules. 
                                                                                    As ACHA hockey athletes are not eligible for scholarships their money will first go to team fees and then equipment costs.
                                                                                </p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer justify-content-between">
                                            <button class="btn btn-lg btn-light" data-dismiss="modal">Back</button>
                                        </div>
                                    </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 site to complete your donation.
                                            <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;
        }
    }
        function RegexAmount() {
            if (!$("#IdDonationAmount").val() == "")
                if (!/(\.\d\d)/g.test($("#IdDonationAmount").val()))
                    $("#IdDonationAmount").val($("#IdDonationAmount").val() + ".00")
        }
    </script>

</body>
</html>
