

<!-- 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">

    <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;
        }

        .attendee-info {
            display: none;
            margin-bottom: 10px;
        }

        [data-toggle="collapse"].collapsed .fa:before {
            content: "\f077";
        }

        [data-toggle="collapse"] .fa:before {
            content: "\f078";
        }
    </style>

    <script>
    
    //function updateAttendeeFields() {
    //    var count = parseInt(document.getElementById('attendeeCount').value, 10);

        // Loop through all attendee info fields and show/hide based on count
    //    for (var i = 1; i <= 6; i++) {
    //        var attendeeDiv = document.getElementById('attendee' + i);
    //        attendeeDiv.style.display = i <= count ? 'block' : 'none';
    //    }
    //}

//<![CDATA[

//*******************************************************************************
// This function validates all the form data before submitting to the set up page
//*******************************************************************************
function validate_form() {

    var I;
    var selText;

    //ADD VALIDATION HERE

    //Validate the Campany Name - Letters or Number only
    var companyname = document.getElementById('companyname');
    companyname.value = trim(companyname.value);
    if (notEmpty(companyname, "Please enter a company name") == false)
        return false;
    else
    if (isAlphanumeric(companyname, "Only letters and numbers permitted in company name") == false)
        return false;

    var businessnumber = document.getElementById('businessnumber');
    businessnumber.value = trim(businessnumber.value);
    if (notEmpty(businessnumber, "Please enter a business number") == false)
        return false;

    //Validate the job title - Letters Only
    var title = document.getElementById('title');
    title.value = trim(title.value);
    if (notEmpty(title, "Please enter a job title") == false)
        return false;
    else
    if (isAlphabet(title, "Only letters permitted in job title") == false)
        return false;

    //Validate the job contact name - Letters Only
    var contactname = document.getElementById('contactname');
    contactname.value = trim(contactname.value);
    if (notEmpty(contactname, "Please enter a contact name") == false)
        return false;
    else
    if (isAlphabet(contactname, "Only letters permitted in contact name") == false)
        return false;

    //Validate the Email Address
    var email = document.getElementById('email');  
    email.value = trim(email.value);
    if (notEmpty( email, "Please enter an Email") == false )
    {
      return false;
    }
    else
    {
        if(emailValidator(email, "Please enter a valid Email") == false )
        {
            return false; 	
        }
    }

    // Validate the Electrical Outlet Requirement
    var electricalOutletYes = document.getElementById('electricalOutletYes');
    var electricalOutletNo = document.getElementById('electricalOutletNo');
    if (!electricalOutletYes.checked && !electricalOutletNo.checked) {
        alert("Please select an option for the electrical outlet requirement.");
        return false;
    }

    // Validate Bringing a Display
    var bringingDisplayYes = document.getElementById('bringingDisplayYes');
    var bringingDisplayNo = document.getElementById('bringingDisplayNo');
    if (!bringingDisplayYes.checked && !bringingDisplayNo.checked) {
        alert("Please select if you will be bringing a display.");
        return false;
    }

    // Validate Tablecloth Requirement
    var tableclothYes = document.getElementById('tableclothYes');
    var tableclothNo = document.getElementById('tableclothNo');
    if (!tableclothYes.checked && !tableclothNo.checked) {
        alert("Please select if you require a tablecloth.");
        return false;
    }

    // Validate Resume Acceptance
    var resumeYes = document.getElementById('resumeYes');
    var resumeNo = document.getElementById('resumeNo');
    if (!resumeYes.checked && !resumeNo.checked) {
        alert("Please select if you will be accepting resumes.");
        return false;
    }

    // Validate Position Type Selection
    var checkboxes = document.querySelectorAll('input[name="positionType[]"]');
    var oneChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
    if (!oneChecked) {
        alert("Please select at least one type of position you are recruiting for.");
        return false;
    }


    //Validate the phone number - Letters Only
    var phonenumber = document.getElementById('phonenumber');
    phonenumber.value = trim(phonenumber.value);
    if (notEmpty(phonenumber, "Please enter a phone number") == 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 orderDetails = "";

    document.getElementById("amount").value = 84.75;

    // ----------------------------------------------------------------------
    // BUSNIESS DETAILS
    // ----------------------------------------------------------------------

    // Add the Business Details section
    orderDetails += "Business Details\n";

    // Company/Organization Name
    var companyName = document.getElementById('companyname').value;
    orderDetails += "Company/Organization Name: " + companyName + '\n';

    // Business Number
    var businessNumber = document.getElementById('businessnumber').value;
    orderDetails += "Business Number: " + businessNumber + '\n';

    // Address Details
    var streetNumber = document.getElementById('street_number').value;
    var route = document.getElementById('route').value;
    var locality = document.getElementById('locality').value;
    var administrativeArea = document.getElementById('administrative_area_level_1').value;
    var country = document.getElementById('country').value;
    var postalCode = document.getElementById('postal_code').value;

    orderDetails += "Business Address:\n";
    orderDetails += "Street Number: " + streetNumber + '\n';
    orderDetails += "Street Name: " + route + '\n';
    orderDetails += "City: " + locality + '\n';
    orderDetails += "Province/State: " + administrativeArea + '\n';
    orderDetails += "Country: " + country + '\n';
    orderDetails += "Postal Code: " + postalCode + '\n\n';

    // ----------------------------------------------------------------------
    // REPRESENTATIVE DETAILS
    // ----------------------------------------------------------------------

    // Add the section title for Representative Details
    orderDetails += "Representative Details\n";

    // Retrieve other form fields
    var jobTitle = document.getElementById('title').value;
    var contactName = document.getElementById('contactname').value;
    var email = document.getElementById('email').value;
    var phoneNumber = document.getElementById('phonenumber').value;
    var website = document.getElementById('website').value;
    var emailUpdates = document.getElementById('emailUpdates').checked ? "Yes" : "No";
    // Rep #2
    var jobTitle2 = document.getElementById('title2').value;
    var contactName2 = document.getElementById('contactname2').value;
    var email2 = document.getElementById('email2').value;
    var phoneNumber2 = document.getElementById('phonenumber2').value;
    var website2 = document.getElementById('website2').value;
    var emailUpdates2 = document.getElementById('emailUpdates2').checked ? "Yes" : "No";
    
    var alumni = alumni === 'Y' ? 'Yes' : 'No';

    // Concatenate the representative details into orderDetails
    orderDetails += "Job Title: " + jobTitle + '\n';
    orderDetails += "Company Contact Name: " + contactName + '\n';
    orderDetails += "Email Address: " + email + '\n';
    orderDetails += "Phone Number: " + phoneNumber + '\n';
    orderDetails += "Website: " + website + '\n';
    orderDetails += "Future Email Updates: " + emailUpdates + '\n\n';
    // Rep #2
    orderDetails += "Job Title: " + jobTitle2 + '\n';
    orderDetails += "Company Contact Name: " + contactName2 + '\n';
    orderDetails += "Email Address: " + email2 + '\n';
    orderDetails += "Phone Number: " + phoneNumber2 + '\n';
    orderDetails += "Website: " + website2 + '\n';
    orderDetails += "Future Email Updates: " + emailUpdates2 + '\n\n';

    orderDetails += "Sault College Alumni: " + alumni + '\n';

    // //Atendees Count
    // var attendeeCount = document.getElementById('attendeeCount').value;
    // orderDetails += "Total number of representatives attending: " + attendeeCount + '\n\n';

    // // Loop through the attendee information based on the selected count
    // for (var i = 1; i <= attendeeCount; i++) {
    //     var attendeeName = document.getElementById('attendeeName' + i).value;
    //     var attendeeEmail = document.getElementById('attendeeEmail' + i).value;
        
    //     // Append the attendee details to the orderDetails variable
    //     orderDetails += "Attendee " + i + " Name: " + attendeeName + '\n';
    //     orderDetails += "Attendee " + i + " Email: " + attendeeEmail + '\n\n';
    // }

    // ----------------------------------------------------------------------
    // ADDITIONAL REQUIREMENTS
    // ----------------------------------------------------------------------

    // Add the section title for Additional Requirements
    orderDetails += "Additional Requirements\n";

    // Retrieve the radio button selections
    var electricalOutlet = document.querySelector('input[name="electricalOutlet"]:checked') ? document.querySelector('input[name="electricalOutlet"]:checked').value : 'N';
    var bringingDisplay = document.querySelector('input[name="bringingDisplay"]:checked') ? document.querySelector('input[name="bringingDisplay"]:checked').value : 'N';
    var tablecloth = document.querySelector('input[name="tablecloth"]:checked') ? document.querySelector('input[name="tablecloth"]:checked').value : 'N';
    
    // Convert the values to a more readable format
    electricalOutlet = electricalOutlet === 'Y' ? 'Yes' : 'No';
    bringingDisplay = bringingDisplay === 'Y' ? 'Yes' : 'No';
    tablecloth = tablecloth === 'Y' ? 'Yes' : 'No';

    // Append the additional requirements to the orderDetails variable
    orderDetails += "Requires Electrical Outlet: " + electricalOutlet + '\n';
    orderDetails += "Bringing Display: " + bringingDisplay + '\n';
    orderDetails += "Requires Tablecloth: " + tablecloth + '\n\n';

    // ----------------------------------------------------------------------
    // EMPLOYMENT DETAILS
    // ----------------------------------------------------------------------

    // Add the Employment Details section
    orderDetails += "Employment Details\n";

    // Resume Acceptance
    var resumeAcceptance = document.querySelector('input[name="resumeAcceptance"]:checked') ? document.querySelector('input[name="resumeAcceptance"]:checked').value : 'N';
    resumeAcceptance = resumeAcceptance === 'Y' ? 'Yes' : 'No';
    orderDetails += "Will you be accepting resumes? " + resumeAcceptance + '\n';

    // Position Types
    var positionTypes = [];
    document.querySelectorAll('input[name="positionType[]"]:checked').forEach(function(checkbox) {
        positionTypes.push(checkbox.value);
    });
    orderDetails += "Type of position recruiting for: " + (positionTypes.length > 0 ? positionTypes.join(', ') : 'None') + '\n';

    // Job Opportunities
    var jobOpportunities = document.querySelector('textarea[name="IdOpportunities"]').value;

    jobOpportunities = jobOpportunities.replace(/'/g, '`')
  

    orderDetails += "Job opportunities planning on recruiting for: " + (jobOpportunities.trim() !== '' ? jobOpportunities : 'None provided') + '\n\n';

    document.getElementById("orderDetails").value = orderDetails;

    $("#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>
    <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">
                        </p>
                        <br />

                        <form method="post" name="donorForm" id="donorForm" action="EmployerJobFairCollection_SetUp.asp">

                            <!-- ***************** HIDDEN FORM FIELDS ***************** -->

                            <input type="hidden" name="hdnFundDesc" id="hdnFundDesc" value="Career Fair Employer Registration" />
                            <input type="hidden" name="fundName" id="hdnFundName" value="R" />
                            <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">

                            <!-- ***************** BUSINESS DETAILS ***************** -->

                            <!--Horizontal Line Spacer-->
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12" style="margin: 0px;">
                                    <h3>Business Details</h3>
                                    <hr />
                                </div>
                            </div>
                            <br />
                            <!--./Horizontal Line Spacer-->
							
							<div class="form-row justify-content-center">
                                <div class="form-group col-md-8">
                                    <label for="companyname">Company/Organization Name <label style="color:#9B0000">*</label></label>
                                    <input name="companyname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="companyname" maxlength="49" />
                                    <small id="IdbusinessnumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="businessnumber">Business Number <label style="color:#9B0000">*</label></label>
                                    <input name="businessnumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="businessnumber" maxlength="49" />
                                    <small id="IdbusinessnumberError" class="text-danger"></small>
                                </div>
                            </div>
                            <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>

                            <!-- ***************** REPRESENTATIVE DETAILS ***************** -->

                            <!--Horizontal Line Spacer-->
                            <br /><br />
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12" style="margin: 0px;">
                                    <h3>Attending Representative (maximum 2 representatives)</h3>
                                    <hr />
                                </div>
                            </div>
                            <br />
                            <!--./Horizontal Line Spacer-->

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-5">
                                    <label for="title">Job Title <label style="color:#9B0000">*</label></label>
                                    <input name="title" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="title" maxlength="49" />
                                    <small id="IdtitleError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-7">
                                    <label for="contactname">Company Contact Name <label style="color:#9B0000">*</label></label>
                                    <input name="contactname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="contactname" maxlength="49" />
                                    <small id="IdcontactnameError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12">
                                    <label for="email">Email Address <label style="color: #9B0000">*</label></label>
                                    <input name="email" onkeydown="EnterHandler();" type="email" class="form-control form-control-lg" id="email" aria-describedby="emailHelp" maxlength="49">
                                    <input name="emailUpdates" type="checkbox" class="checkbox" id="emailUpdates" value="Y" style="padding:10px" />
                                    <label for="emailUpdates" class="wide" style="font-size:16px;"> I would like to receive future email updates. </label>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-5">
                                    <label for="phonenumber">Phone Number <label style="color:#9B0000">*</label></label>
                                    <input name="phonenumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg bfh-phone" id="phonenumber" data-format="(ddd) ddd-dddd">
                                    <small id="phonenumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-7">
                                    <label for="website">Website <label style="color:#9B0000">&nbsp;</label></label>
                                    <input name="website" onkeydown="EnterHandler();" type="text" id="website" class="form-control form-control-lg">
                                    <small id="websiteError" class="text-danger"></small>
                                </div>
                            </div>

                            <!--Horizontal Line Spacer-->
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12" style="margin: 0px;">
                                    <h3>Representative 2</h3>
                                    <hr />
                                </div>
                            </div>
                            <!--./Horizontal Line Spacer-->

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-5">
                                    <label for="title">Job Title </label>
                                    <input name="title" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="title2" maxlength="49" />
                                    <small id="IdtitleError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-7">
                                    <label for="contactname">Company Contact Name </label>
                                    <input name="contactname" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg" id="contactname2" maxlength="49" />
                                    <small id="IdcontactnameError" class="text-danger"></small>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12">
                                    <label for="email">Email Address </label>
                                    <input name="email2" onkeydown="EnterHandler();" type="email" class="form-control form-control-lg" id="email2" aria-describedby="emailHelp" maxlength="49">
                                    <input name="emailUpdates" type="checkbox" class="checkbox" id="emailUpdates2" value="Y" style="padding:10px" />
                                    <label for="emailUpdates" class="wide" style="font-size:16px;"> I would like to receive future email updates. </label>
                                </div>
                            </div>
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-5">
                                    <label for="phonenumber">Phone Number </label>
                                    <input name="phonenumber" onkeydown="EnterHandler();" type="text" class="form-control form-control-lg bfh-phone" id="phonenumber2" data-format="(ddd) ddd-dddd">
                                    <small id="phonenumberError" class="text-danger"></small>
                                </div>
                                <div class="form-group col-md-7">
                                    <label for="website">Website </label>
                                    <input name="website" onkeydown="EnterHandler();" type="text" id="website2" class="form-control form-control-lg">
                                    <small id="websiteError" class="text-danger"></small>
                                </div>
                            </div>

                            </div>
                            <!-- <div class="form-row justify-content-center">
                                <div class="form-group col-md-1"></div>
                                <div class="form-group col-md-11">
                                    <label for="attendeeCount">Total number of representatives attending:</label>
                                    <select id="attendeeCount" class="form-control form-control-lg" name="attendeeCount" onchange="updateAttendeeFields()">
                                        <option value="0">Select...</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group"> -->
                                    <!-- Attendee 1 -->
                                    <!-- <div id="attendee1" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">1.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName1">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName1" id="attendeeName1">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail1">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail1" id="attendeeEmail1">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Attendee 2 -->
                                    <!-- <div id="attendee2" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">2.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName2">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName2" id="attendeeName2">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail2">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail2" id="attendeeEmail2">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Attendee 3 -->
                                    <!-- <div id="attendee3" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">3.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName3">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName3" id="attendeeName3">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail3">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail3" id="attendeeEmail3">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Attendee 4 -->
                                    <!-- <div id="attendee4" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">4.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName4">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName4" id="attendeeName4">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail4">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail4" id="attendeeEmail4">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Attendee 5 -->
                                    <!-- <div id="attendee5" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">5.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName5">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName5" id="attendeeName5">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail5">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail5" id="attendeeEmail5">
                                            </div>
                                        </div>
                                    </div> -->
                                    <!-- Attendee 6 -->
                                    <!-- <div id="attendee6" class="attendee-info">
                                        <div class="form-row justify-content-center">
                                            <div class="form-group col-md-1">
                                                <label>&nbsp;</label>
                                                <h3 class="text-center">6.</h3>
                                            </div>
                                            <div class="col-md-4">
                                                <label for="attendeeName6">Attendee Name</label>
                                                <input type="text" class="form-control form-control-lg" name="attendeeName6" id="attendeeName6">
                                            </div>
                                            <div class="col-md-7">
                                                <label for="attendeeEmail6">Email Address</label>
                                                <input type="email" class="form-control form-control-lg" name="attendeeEmail6" id="attendeeEmail6">
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="form-row">
                                    <div class="form-group col-md-12">
                                        <label class="control-label">Are you a Sault College Alumnus/Alumna?</label>
                                        <div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="alumni" id="alumniYes" value="Y">
                                                <label class="form-check-label" for="alumniYes">Yes</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="alumni" id="alumniNo" value="N">
                                                <label class="form-check-label" for="alumniNo">No</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            <!-- ***************** ADDITIONAL REQUIREMENTS ***************** -->

                            <!--Horizontal Line Spacer-->
                            <br /><br />
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12" style="margin: 0px;">
                                    <h3>Additional Requirements</h3>
                                    <hr />
                                </div>
                            </div>
                            <br />
                            <!--./Horizontal Line Spacer-->

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="control-label">I require an electrical outlet. <span style="color:#9B0000">*</span></label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="electricalOutlet" id="electricalOutletYes" value="Y">
                                            <label class="form-check-label" for="electricalOutletYes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="electricalOutlet" id="electricalOutletNo" value="N">
                                            <label class="form-check-label" for="electricalOutletNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="control-label">I will be bringing a display. <span style="color:#9B0000">*</span></label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="bringingDisplay" id="bringingDisplayYes" value="Y">
                                            <label class="form-check-label" for="bringingDisplayYes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="bringingDisplay" id="bringingDisplayNo" value="N">
                                            <label class="form-check-label" for="bringingDisplayNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="control-label">I require a tablecloth. <span style="color:#9B0000">*</span></label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="tablecloth" id="tableclothYes" value="Y">
                                            <label class="form-check-label" for="tableclothYes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="tablecloth" id="tableclothNo" value="N">
                                            <label class="form-check-label" for="tableclothNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ***************** EMPLOYMENT DETAILS ***************** -->

                            <!--Horizontal Line Spacer-->
                            <br /><br />
                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12" style="margin: 0px;">
                                    <h3>Employment Details</h3>
                                    <hr />
                                </div>
                            </div>
                            <br />
                            <!--./Horizontal Line Spacer-->

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label class="control-label" for="resumeAcceptance">Will you be accepting resumes? <span style="color:#9B0000">*</span></label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="resumeAcceptance" id="resumeYes" value="Y">
                                            <label class="form-check-label" for="resumeYes">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="resumeAcceptance" id="resumeNo" value="N">
                                            <label class="form-check-label" for="resumeNo">No</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label>What type of position are you recruiting for? <label style="color:#9B0000">*</label></label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="fullTime" value="Full Time">
                                        <label class="form-check-label" for="fullTime">
                                            Full Time
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="partTime" value="Part Time">
                                        <label class="form-check-label" for="partTime">
                                            Part Time
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="coop" value="Co-op">
                                        <label class="form-check-label" for="coop">
                                            Co-op
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="contract" value="Contract">
                                        <label class="form-check-label" for="contract">
                                            Contract
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="internship" value="Internship">
                                        <label class="form-check-label" for="internship">
                                            Internship
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="positionType[]" id="summerEmployment" value="Summer Employment">
                                        <label class="form-check-label" for="summerEmployment">
                                            Summer Employment
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-row justify-content-center">
                                <div class="form-group col-md-12">
                                    <label for="IdOpportunities">What are the job opportunities you are planning on recruiting for? <label style="color:#9B0000">*</label></label>
                                    <textarea name="IdOpportunities" id="IdOpportunities" onkeydown="EnterHandler();" class="form-control form-control-lg" rows="4"></textarea>
                                    <small id="IdOpportunitiesError" class="text-danger"></small>
                                </div>
                            </div>

                            <!-- ***************** 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>

                            <br/>
                            <div style="font-size:1.25rem !important">
                                <p>We will provide the following to employers:</p>
                                <ul>
                                    <li>Web based Annual Career Fair Employer Program</li>
                                    <li>Snacks for two employer representatives</li>
                                    <li>1 Table and 2 chairs</li>
                                </ul>
                            </div>

                            <p style="font-size:1.25rem !important">
                                While we appreciate having employers on campus, it`s essential to clarify that the primary goal of the Sault College Annual Career Fair is to assist students, graduates, and community members in their pursuit of employment opportunities.  Given the challenging economic climate, we request that only employers who foresee hiring within the next 6 months plan or participate in this fair.  If your organization`s objective is solely for promotional purposes, we would be more than willing to arrange an alternative on-campus visit.<br /><br />

                                If you have any questions or require further information, please do not hesitate to contact us at studentjobcentre@saultcollege.ca or give us a call at 705-759-2554 ext. 2480.<br/><br/>
                            </p>
                            <br/>
                            <small style="font-size: 0.9rem;">Completion of this registration form does not guarantee participation in the Sault College Annual Career Fair. All registration are subject to review and approval by the Sault College Student Job Centre. </small>

                            <!--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>
    // Call updateAttendeeFields on page load to ensure correct fields are shown
    //updateAttendeeFields();

    function EnterHandler(){
        if (window.event.keyCode == 13){
            window.event.returnValue =false;
            return null;
        }
    }

    $('#IdStartDate').datepicker({
        format: "mm-yyyy",
        viewMode: "months",
        minViewMode: "months",
        startDate: "09-2023",
        endDate: "08-2024",
        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-2023",
        endDate: "08-2024",
        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>
