<?php
$tab_1 = "";
$tab_2 = "";
$tab_3 = "";
$tab_4 = "";
$tab_id = isset($tab_id) ? $tab_id : "1";
if($tab_id == '1'){
$tab_1 = 'active';
}elseif($tab_id == '2'){
$tab_2 = 'active';
}elseif($tab_id == '3'){
$tab_3 = 'active';
}elseif($tab_id == '4'){
$tab_4 = 'active';
}else{
$tab_1 = 'active';
}
?>
<style>
.bootstrap-timepicker-widget table td input {
width: 31px !important;
margin: 0;
text-align: center;
}
</style>
<!-- Start Tab Section -->
<section class="pad50">
<div class="container">
<div class="row">
<div class="section-title text-center">
<h3>Volunteer Registration</h3>
</div>
<div class="well">VOLUNTEERS NEEDED: We need lots of volunteers to help this race run smoothly. If you would like to find out more about volunteering, please fill out the form below. All volunteers will receive our heartfelt thanks as well as a special "volunteer" T-shirt. </div>
</div>
<div class="row">
<form id="contactForm" action="<?php echo base_url()."home/add_volunteer"?>" class="contact-form" method="post" role="form">
<div class="col-md-12">
<div class="messages" style="padding-bottom: 10px; text-align: center;"><h4>General Information</h4></div>
<div class="controls">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="first_name"><?php _e("First Name"); ?></label>
<input id="first_name" type="text" maxlength="100" name="first_name" class="form-control" placeholder="First Name *" required="required" data-error="First Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="last_name"><?php _e("Last Name"); ?></label>
<input id="last_name" type="text" maxlength="100" name="last_name" class="form-control" placeholder="Last Name *" required="required" data-error="Last Name is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="address"><?php _e("Address"); ?></label>
<input id="address" type="text" maxlength="100" name="address" class="form-control" placeholder="Address">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="city"><?php _e("City"); ?></label>
<input id="city" type="text" maxlength="50" name="city" class="form-control" placeholder="City *" required="required" data-error="Employer City is required.">
<div id="employer_city_err" class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="state"><?php _e("State"); ?></label>
<select name="state" id="state" class="form-control">
<option value="AL" >Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT" selected>Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="zip"><?php _e("ZIP Code"); ?></label>
<input id="zip" pattern="[0-9]{5}" maxlength="5" name="zip" class="form-control" placeholder="ZIP Code *" required="required" data-error="Please enter only digits with 5 characters">
<div id="employer_zip_err" class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="home_phone"><?php _e("Home Phone"); ?></label>
<input id="home_phone" type="text" maxlength="100" name="home_phone" class="form-control" placeholder="Home Phone">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="work_phone"><?php _e("Work Phone"); ?></label>
<input id="work_phone" type="text" maxlength="100" name="work_phone" class="form-control" placeholder="Work Phone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="cell_phone"><?php _e("Cell Phone"); ?></label>
<input id="cell_phone" type="text" maxlength="100" name="cell_phone" class="form-control" placeholder="Cell Phone">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="control-label" for="email"><?php _e("Email"); ?></label>
<input id="form_email" type="email" autocomplete="off" name="email" class="form-control" placeholder="Email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="col-md-12">
<div class="messages" style="padding-bottom: 10px; text-align: center;"><h4>Additional Information</h4></div>
<div class="controls">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="employer_name"><?php _e("Employer Name"); ?></label>
<input id="employer_name" type="text" maxlength="100" name="employer_name" class="form-control" placeholder="Employer Name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="race_type_if_participate"><?php _e("If you are participant, are you:"); ?></label>
<select name="race_type_if_participate" class="form-control" style="margin-bottom: 0px !important;">
<option>--Select--</option>
<option value="W">Walking</option>
<option value="R">Running</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="age_range"><?php _e("Age Range"); ?></label>
<select name="age_range" class="form-control" style="margin-bottom: 0px !important;">
<option value="C">12 - 18</option>
<option value="A">18 or older</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12"><p>On race day, what time are you available to volunteer? :</p></div>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label class="control-label" for="from_time"><?php _e("From Time"); ?></label>
<input id="from_time" type="text" maxlength="100" name="from_time" class="form-control" placeholder="From Time">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label" for="to_time"><?php _e("To Time"); ?></label>
<input id="to_time" type="text" maxlength="100" name="to_time" class="form-control" placeholder="To Time">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="is_prev_volunteer"><?php _e("Have you volunteered for the Corporate Cup Race in the past?"); ?></label>
<select name="is_prev_volunteer" class="form-control" style="margin-bottom: 0px !important;">
<option value="N">No</option>
<option value="Y">Yes</option>
</select>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div class="col-md-12">
<div class="messages" style="padding-bottom: 10px; text-align: center;"><h4>Emergency Contact Info</h4></div>
<div class="controls">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="emergency_name"><?php _e("Contact Name"); ?></label>
<input id="emergency_name" type="text" maxlength="100" name="emergency_name" class="form-control" placeholder="Contact Name">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="emergency_phone"><?php _e("Contact Phone"); ?></label>
<input id="emergency_phone" type="text" maxlength="100" name="emergency_phone" class="form-control" placeholder="Contact Phone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="emergency_phone"><?php _e("How did you hear about volunteering?"); ?></label>
<textarea id="form_message" name="reference" class="form-control" placeholder="Message *" style="min-height: 175px;"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="emergency_phone"><?php _e("Notes/Question to the Volunteer Coordinator"); ?></label>
<textarea id="form_message" name="comments" class="form-control" placeholder="Message *" style="min-height: 175px;"></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="g-recaptcha" data-callback="recaptchaCallback" style="transform:scale(.77);-webkit-transform:scale(.77);transform-origin:0 0;-webkit-transform-origin:0 0;" data-sitekey="6Le5OjwUAAAAADSA1l5jTeYjomg8GtKov8t29QIB"></div>
<div id="captcha_msg" style="color: #a94442;"></div>
</div>
</div>
<div class="col-md-6" style="text-align: center;">
<input type="submit" id="submit_btn" class="btn btn-primary" value="Submit">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</section>
<!-- End Tab Section -->
<script>
$(document).ready(function(){
$('#contactForm').validator();
$('#to_time').timepicker();
$('#from_time').timepicker();
$('#to_time').val('');
$('#from_time').val('');
});
$('#contactForm').submit(function() {
var recaptcha = $("#g-recaptcha-response").val();
if (recaptcha === "") {
alert('Please Check the google recaptcha!');
$("#captcha_msg").html("<p>Please check the recaptcha</p>");
return false;
}else{
//$body = $("body");
//$body.addClass("loading");
return true;
}
});
function recaptchaCallback() {
$("#captcha_msg").hide();
};
</script>