
<!-- 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 - Spikeball T.M.T Tournament</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";
        }
        .title {
            border-bottom: 1px solid #dedede;
        }

        .form-check-inline{
            display: flex;
            align-items: center;
            margin-left: 50px;
        }

        .form-check-input{
            transform: scale(2);
        }

        .form-check-label{
            font-size: 1.5em;
            margin-left: 15px;
            white-space: nowrap;
        }
    </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 Team Name - Letters Only
    var teamName = document.getElementById('teamname');
    teamName.value = trim(teamName.value);
    if (notEmpty(teamName, "Please enter a Team Name") == false)
        return false;
    else
    if (isAlphabet(teamName, "Only letters permitted in Team Name") == false)
        return false;

    //Validate the Team Captain Name - Letters Only
    var teamCaptainName = document.getElementById('teamCaptainName');
    teamCaptainName.value = trim(teamCaptainName.value);
    if (notEmpty(teamCaptainName, "Please enter a Team Captain Name") == false)
        return false;
    else
    if (isAlphabet(teamCaptainName, "Only letters permitted in Team Captain Name") == false)
        return false;

    // Validate number of players
    var NumOfPlayers = document.getElementById('numOfTeamMembers');
    NumOfPlayers.value = trim(NumOfPlayers.value);
    if(NumOfPlayers.value > 3){
        alert("The number must be less then 4")
        NumOfPlayers.focus();
        return false;
    }
    if(notEmpty(NumOfPlayers, "Please enter a number or 0 if no team mates") == false)
        return false;
    else
    if (isNumeric(NumOfPlayers, "Only numbers permitted in number of team members") == false)
        return false;

    // Validate all team member names
    var teamMemberNames = document.getElementById('teamMemberNames');
    teamMemberNames.value = trim(teamMemberNames.value);
    if (notEmpty(teamMemberNames, "Please enter team members names or enter none") == false)
        return false;

    // Validate photo consent
    var yesConsentRadio = document.getElementById('yes');
    var noConsentRadio = document.getElementById('no');
    if (!yesConsentRadio.checked && !noConsentRadio.checked){
        alert("Check a photo consent box please")
        yesConsentRadio.focus();
        return false;
    }
    if(yesConsentRadio.checked){
       document.getElementById("pictureTaken").value = yesConsentRadio.value 
    }

    if(noConsentRadio.checked){
        document.getElementById("pictureTaken").value = noConsentRadio.value
    }

    //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 Birth Date
    // var birth = document.getElementById('IdBirthDate');
    // birth.value = trim(birth.value);
    // if (notEmpty(birth, "Please enter birth date.") == false)
    //     return false;

    // Validate checkbox
    var funRadio = document.getElementById("fun");
    var competitiveRadio = document.getElementById("competitive");

    if(!funRadio.checked && !competitiveRadio.checked){
        alert("Check a divison box please")
        funRadio.focus();
        return false;
    }
    if(funRadio.checked){
        document.getElementById("hdnFundDesc").value = "Spikeball T.M.T Tournament";
        document.getElementById("hdnFundName").value = "4";
        document.getElementById("amount").value = 29.00;
        document.getElementById("price").value = 29.00;
        

        $("#myModal1").modal("show");
        document.getElementById('donorForm').action = "SpikeballTournament_SetUp.asp";
    } else {
        document.getElementById("hdnFundDesc").value = "Spikeball T.M.T Tournament";
        document.getElementById("hdnFundName").value = "4";
        document.getElementById("amount").value = 29.00;
        document.getElementById("price").value = 29.00;


        $("#myModal1").modal("show");
        document.getElementById('donorForm').action = "SpikeballTournament_SetUp.asp";
    }
}

    //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 date of in the valid range
  function isBirthInRange(elem, helperMsg){
	  var checkBirthExp = /^20(07|1[0-4])/;
	  if(elem.value.match(checkBirthExp)){
		  return true;
	  }else{
		  elem.focus();
          alert(helperMsg);
		  return false;
	  }
  }
	
	//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>
</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;">
                            Spikeball T.M.T Tournament 
                            <br /><br />
                            <label class="title">Dates:</label><br />
                            Saturday, August 24, 2024 
                            <br /><br />
                            <label class="title">Location:</label><br />
							Waterfront Adventure Center (18 McPhail Avenue)
							<br /><br />
                            <label class="title">Time:</label><br />
                            9:00 am
                            <br /><br />
                            <label class="title">Cost:</label><br />
							$20.00 + HST
                            <br /><br />
                            <label class="title">Addtional Information:</label><br />
                            Join us for an exciting day of Spikeball action as we come together to raise awareness and support for men's mental health! 
                            Our Spikeball Tournament is not just about the game; it's about building camaraderie, fostering connections, and promoting mental well-being. 
                            <b>Why don't we come together as a community and start talking some more.</b>
                            <br /> <br />
                            Complete the registration form below to secure your spot in the tournament. 
                            Teams will battle it out on the Spikeball court, competing for prizes and, more importantly, supporting men's mental health initiatives.
                            <br /> <br />
                            Teams have a maximum capacity of 2-3 players and this event is an inclusive mixed-gender format!
                            <br /><br />
                            All proceeds will be donated in support of Men's Mental Health to Algoma Family Services!
                            <br /><br />
                        </p>
                        <br />
                        <br />

                        <form method="post" name="donorForm" id="donorForm">

                            <!-- ***************** 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="price" id="price" />
                            <input type="hidden" name="divison" id="divison" />
                            <input type="hidden" name="pictureTaken" id="pictureTaken" />
                            <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="teamname">Team Name <label style="color:#9B0000">*</label></label>
                                    <input name="teamname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="teamname" maxlength="49" />
                                    <small id="IdTeamNameError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="teamCaptainName">Team Captain Name <label style="color:#9B0000">*</label></label>
                                    <input name="teamCaptainName" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="teamCaptainName" maxlength="49" />
                                    <small id="IdTeamCaptainNameError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="IdEmail">Team Captain 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 class="form-group col-md-6">
                                    <label for="IdPhoneNumber">Team Captain 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-6">
                                    <label for="numOfTeamMembers">Number of Team Members <label style="color:#9B0000">*</label></label>
                                    <input name="numOfTeamMembers" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="numOfTeamMembers" maxlength="1" />
                                    <small id="IdNumOfTeamMembersError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="teamMemberNames">Team Members Names <label style="color:#9B0000">*</label></label>
                                    <input name="teamMemberNames" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="teamMemberNames" />
                                    <small id="IdTeamMemberNamesError" 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="form-row justify-content-center">
                                <label for="divison">Divison: <label style="color:#9B0000">*</label></label>
                                <div class="form-check col-md-2 form-check-inline">
                                    <input name="divison" onkeydown="EnterHandler();" type="radio" class="form-check-input" id="fun" value="Fun" />
                                    <label class="form-check-label" for="fun">Fun</label>
                                    <small id="IdDivisonError" class="text-danger"></small>
                                </div>
                                <br>
                                <div class="form-check col-md-2 form-check-inline">
                                    <input name="divison" onkeydown="EnterHandler();" type="radio" class="form-check-input" id="competitive" value="Competitive" />
                                    <label class="form-check-label" for="competitive">Competitive</label>
                                    <small id="IdDivisionError" 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="form-row justify-content-center">
                                <label for="pictureTaken" >Do you consent to having your picture taken?: <label style="color:#9B0000">*</label></label>
                                <div class="form-check col-md-2 form-check-inline">
                                    <input name="yesConsent" onkeydown="EnterHandler();" type="radio" class="form-check-input" id="yes" value="yes" />
                                    <label class="form-check-label" for="yes">Yes</label>
                                    <small id="IdPictureTakenError" class="text-danger"></small>
                                </div>
                                <br>
                                <div class="form-check col-md-2 form-check-inline">
                                    <input name="noConsent" onkeydown="EnterHandler();" type="radio" class="form-check-input" id="no" value="no" />
                                    <label class="form-check-label" for="no">No</label>
                                    <small id="IdPictureTakenError" 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-->

                            <!-- ***************** 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" id="btnSubmit" 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 (Online Payment)-->
                            <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 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;
        }
    }
    </script>

</body>
</html>
