SummitEventsRegister.page

<!--
Copyright 2019 University of St. Thomas - Minnesota. All rights reserved.
Use of this source code is governed by a BSD Revised
license that can be found in the LICENSE file.
Created by Thaddaeus Dahlberg on 5/1/2018.
-->

<apex:page id="SummitEventsRegister" showHeader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" standardStylesheets="false" docType="html-5.0" cache="false" controller="SummitEventsRegisterController" action="{!checkEventDetails}">
    <apex:composition template="{!templateSelected}">
        <apex:define name="metaPageTitle">
            {!evtInstance.Event__r.Event_Name__c}
            <apex:outputText rendered="{!!ISBLANK(evtInstance.Instance_Title__c)}" value="{! ' - ' + evtInstance.Instance_Title__c}"/>
            - Registration
        </apex:define>
        <apex:define name="pageTitle"><a href="{!eventPage.Event_home_Link_URL__c}">{!eventPage.Event_Home_Link_Title__c}</a></apex:define>
        <apex:define name="scriptsHead">
            <link href="{!URLFOR($Resource.SummitEventsAssets, '/css/main.css')}" rel="stylesheet" type="text/css"/>
            <script src="{!URLFOR($Resource.SummitEventsAssets, '/js/register.js')}" type="text/javascript"></script>
            <script>
                window.dataLayer = window.dataLayer || [];
                dataLayer.push({
                    'account': '{!IF(!ISBLANK(eventPage.Account__r.Name),eventPage.Account__r.Name, '')}',
                    'audience': '{!IF(!ISBLANK(eventPage.Audience__c),eventPage.Audience__c, '')}',
                    'event': 'summit_registration',
                    'eventLabel': '{!eventPage.Event_Name__c}{!IF(!ISBLANK(evtInstance.Instance_Title__c),' - ' + evtInstance.Instance_Title__c,'')}',
                    'category': '{!IF(!ISBLANK(eventPage.Filter_Category__c), eventPage.Filter_Category__c, '')}',
                    'sponsor': '{!IF(!ISBLANK(eventPage.Event_Sponsor__c), eventPage.Event_Sponsor__c, '')}',
                    'page': '{!$CurrentPage.Name}'
                });
            </script>
            <!--Embedd recatpcha script if requrested-->
            <apex:outputPanel layout="none" rendered="{!recaptcha.version = 3}">
                <script src="{!recaptcha.apiUrl}?render={!recaptcha.publicKey}" type="text/javascript"></script>
                <script>
                    const googleRecaptchaV3 = true;
                    document.addEventListener('DOMContentLoaded', function () {
                        document.querySelector("[id$=submitReg2]").addEventListener("click", function (e) {
                            e.preventDefault();
                            grecaptcha.ready(function () {
                                grecaptcha.execute('{!recaptcha.publicKey}', {action: 'submit'}).then(function (token) {
                                    let responseField = document.querySelector("[id$=recaptchaResponse]");
                                    responseField.value = token;
                                    document.querySelector("[id$=submitReg1]").click();
                                });
                            });
                        });
                    }, false);
                </script>
            </apex:outputPanel>
        </apex:define>

        <apex:define name="body">
            <div class="slds-grid slds-wrap" xmlns="http://www.w3.org/2000/svg" version="1.1">

                <apex:messages layout="list" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-notify slds-notify_toast slds-theme_warning"/>

                <apex:form id="SummitEventRegisterForm" styleClass="slds-grid slds-wrap" style="width:100%">

                    <apex:actionFunction name="setParentSetting" immediate="true" onComplete="dynamicValidation();fadein();" reRender="thirdPartyRegistrant">
                        <apex:param name="parentType" value="" assignTo="{!eventRegistration.Registrant_Third_Party_Status__c}"/>
                    </apex:actionFunction>
                    <apex:actionFunction name="setCountrySetting" immediate="true" onComplete="dynamicValidation();fadein();" reRender="countryInfo">
                        <apex:param name="countrySetting" value="" assignTo="{!eventRegistration.Registrant_Country__c}"/>
                    </apex:actionFunction>
                    <apex:actionFunction name="setPhoneSetting" immediate="true" onComplete="setOldPhoneValue();dynamicValidation();" reRender="phoneBlock">
                        <apex:param name="phoneSetting" value="" assignTo="{!phoneType}"/>
                    </apex:actionFunction>
                    <apex:actionFunction name="setAccessibility" immediate="true" onComplete="dynamicValidation();fadein();" reRender="accessibilityWrap">
                        <apex:param name="accessibilitySettings" value="" assignTo="{!eventRegistration.Accessibility_Need__c}"/>
                    </apex:actionFunction>

                    <!-- EVENT BREADCRUMB -->
                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                        <nav role="navigation" aria-label="Breadcrumbs">
                            <ol class="slds-breadcrumb slds-list_horizontal">
                                <apex:outputPanel rendered="{!!ISBLANK(eventPage.Event_Name__c)}" layout="none">
                                    <li class="slds-breadcrumb__item slds-text-title_caps slds-p-right_x-small">{!eventPage.Event_Name__c}</li>
                                </apex:outputPanel>
                                <apex:outputPanel rendered="{!!ISBLANK(eventInstance.Instance_Title__c)}" layout="none">
                                    <li class="slds-breadcrumb__item slds-text-title_caps slds-p-horizontal_x-small">{!eventInstance.Instance_Title__c}</li>
                                </apex:outputPanel>
                                <apex:outputPanel rendered="{!!ISBLANK(formattedNavDate)}" layout="none">
                                    <li class="slds-breadcrumb__item slds-text-title_caps slds-p-horizontal_x-small">{!formattedNavDate}</li>
                                </apex:outputPanel>
                            </ol>
                        </nav>
                    </div>

                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 regularLists">
                        <h2 class="slds-text-heading_large">
                            <apex:outputText value="{!eventPage.Event_Name__c}"/>
                        </h2>
                        <apex:outputPanel layout="none" rendered="{!!ISBLANK(evtInstance.Instance_Title__c)}">
                            <h3 class="slds-text-heading_medium">
                                {!evtInstance.Instance_Title__c}
                            </h3>
                        </apex:outputPanel>
                    </div>

                    <!-- EVENT CLOSED MESSAGE -->
                    <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 regularLists" rendered="{!eventIsClosed}">
                        <p class="slds-text-body">
                            <apex:outputText escape="false" value="{!eventPage.Event_Full_Text__c}"/>
                        </p>
                    </apex:outputPanel>

                    <!-- REGISTRATION QUESTIONS BEGIN  -->
                    <apex:outputPanel rendered="{!!eventIsClosed}" layout="none">

                        <div class="slds-col slds-p-around_x-small slds-size_1-of-1 regularLists">
                            <apex:outputText escape="false" value="{!eventPage.Event_description__c}"/>
                        </div>

                        <!-- Location Inforamation -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1" rendered="{!showLocation}">
                            <h4 class="slds-text-heading_medium slds-p-vertical_xx-small">Event Details</h4>
                            <!-- Location Title -->
                            <apex:outputPanel layout="none" rendered="{!IF(!ISBLANK(eventPage.Location_Title__c) || !ISBLANK(evtInstance.Location_Title_Override__c), true, false)}">
                                <p class="slds-text-body_large slds-p-vertical_xx-small">
                                    <apex:outputText value="{!IF(!ISBLANK(evtInstance.Location_Title_Override__c), evtInstance.Location_Title_Override__c, eventPage.Location_Title__c)}"/>
                                </p>
                            </apex:outputPanel>
                            <!-- Location Date/Time -->
                            <p class="slds-text-body">
                                {!formattedNavDate}
                            </p>

                            <!-- Location Address/Map Link -->
                            <apex:outputPanel layout="none"
                                              rendered="{!IF(!ISBLANK(eventPage.Location_Address__c)
                                              || !ISBLANK(evtInstance.Location_Address_Override__c)
                                              || !ISBLANK(eventPage.Location_Map_Link__c)
                                              || !ISBLANK(evtInstance.Location_Map_Link_Override__c)
                                              , true, false)}">

                                <apex:outputPanel layout="none" rendered="{!If(!ISBLANK(eventPage.Location_Map_Link__c) || !ISBLANK(evtInstance.Location_Map_Link_Override__c), true, false)}">
                                    <p class="slds-text-body_large slds-p-vertical_xx-small">
                                        <a href='{!IF(!ISBLANK(evtInstance.Location_Map_Link_Override__c), evtInstance.Location_Map_Link_Override__c, eventPage.Location_Map_Link__c)}'>
                                            {!If(!ISBLANK(evtInstance.Location_Address_Override__c), evtInstance.Location_Address_Override__c,'')}
                                            {!If(!ISBLANK(eventPage.Location_Address__c) && ISBLANK(evtInstance.Location_Address_Override__c),eventPage.Location_Address__c, '')}
                                            {!If((ISBLANK(eventPage.Location_Address__c) && ISBLANK(evtInstance.Location_Address_Override__c)) && (!ISBLANK(eventPage.Location_Map_Link__c) || !ISBLANK(evtInstance.Location_Map_Link_Override__c)),'Map', '')}
                                        </a>
                                    </p>
                                </apex:outputPanel>

                                <apex:outputPanel layout="none" rendered="{!If(ISBLANK(eventPage.Location_Map_Link__c) && ISBLANK(evtInstance.Location_Map_Link_Override__c), true, false)}">
                                    <p class="slds-text-body_large slds-p-vertical_xx-small">
                                        {!If(!ISBLANK(evtInstance.Location_Address_Override__c), evtInstance.Location_Address_Override__c,'')}
                                        {!If(!ISBLANK(eventPage.Location_Address__c) && ISBLANK(evtInstance.Location_Address_Override__c),eventPage.Location_Address__c, '')}
                                    </p>
                                </apex:outputPanel>

                            </apex:outputPanel>

                        </apex:outputPanel>

                        <apex:outputPanel layout="block" rendered="{!IF(totalEventCost!= 0,true,false)}" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1">
                            <h3 class="slds-text-heading_medium">{!IF(ISBLANK(eventPage.Event_Fee_Submit_List_Label__c),'Event Cost', eventPage.Event_Fee_Submit_List_Label__c)}</h3>
                            <p class="slds-text-body">$
                                <apex:outputText value="{!totalEventCost}"/>
                            </p>
                        </apex:outputPanel>

                        <apex:outputText rendered="{!If(EvtUserType != 'Guest',true,false)}" escape="false">
                            <!-- LOGGED IN TO PORTAL MESSAGE -->
                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <p class="errorMessage">You are currently logged into a Portal and therefore your portal information is pre-filled below and cannot be changed.
                                </p>
                            </div>
                        </apex:outputText>

                        <!-- THIRD PARTY REGISTRANTS -->
                        <apex:outputPanel layout="block" id="thirdPartyRegistrant" styleClass="slds-col slds-size_1-of-1" rendered="{!eventPage.Ask_Third_Party_Registrant__c != null}">

                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <div class="slds-form-element slds-is-required">
                                    <apex:outputLabel for="iamthe" styleClass="slds-form-element__label">{!eventPage.Third_Party_Registrant_Label__c} <abbr class="slds-required" title="required"> * </abbr></apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <div class="slds-select_container">
                                            <apex:selectList multiSelect="false" value="{!eventRegistration.Registrant_Third_Party_Status__c}" size="1" id="iamthe" styleClass="slds-select" required="true" onchange="setParentSetting(this.value);" html-aria-describedby="iamthe-required">
                                                <apex:selectOptions value="{!thirdPartyStatus}"/>
                                            </apex:selectList>
                                        </div>
                                    </div>
                                    <div class="slds-form-element__help" id="iamthe-required">Let us know who you are</div>
                                </div>
                            </div>

                            <!-- If individual registering is not the registrant then display these questions-->
                            <apex:outputPanel layout="none" rendered="{!IF(eventRegistration.Registrant_Third_Party_Status__c == 'Primary Registrant' || eventRegistration.Registrant_Third_Party_Status__c == '', false, true)}">

                                <!-- Parent questions -->
                                <apex:outputPanel layout="block" styleClass="slds-grid slds-wrap" id="parentInfo" rendered="{!IF(eventRegistration.Registrant_Third_Party_Status__c == 'Parent/Guardian', true, false)}" style="width:100%">

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                        <h3 class="slds-text-heading_medium">My Information</h3>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="parentFirstName" styleClass="slds-form-element__label">
                                                Parent {!eventPage.First_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:inputText value="{!eventRegistration.Registrant_Parent_First_Name__c}" id="parentFirstName" html-aria-describedby="parentFirstName-required" required="true" styleClass="slds-input"/>
                                            </div>
                                            <div class="slds-form-element__help" id="parentFirstName-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="parentLastName" styleClass="slds-form-element__label">
                                                Parent {!eventPage.Last_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:inputText value="{!eventRegistration.Registrant_Parent_Last_Name__c}" html-aria-describedby="parentLastName-required" id="parentLastName" required="true" styleClass="required requiredText slds-input"/>
                                            </div>
                                            <div class="slds-form-element__help" id="parentLastName-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="parentEmail" styleClass="slds-form-element__label">
                                                Parent {!eventPage.Email_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:input type="email" value="{!eventRegistration.Registrant_Parent_Email__c}" id="parentEmail" html-aria-describedby="parentEmail-required" required="true" styleClass="required requiredText validEmail slds-input"/>
                                            </div>
                                            <div class="slds-form-element__help" id="parentEmail-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element">
                                            <apex:outputLabel for="parentPhone" styleClass="slds-form-element__label">
                                                Parent {!eventPage.Phone_Label__c}
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:input type="tel" value="{!eventRegistration.Registrant_Parent_Phone__c}" id="parentPhone" styleClass="validPhone slds-input"/>
                                            </div>
                                        </div>
                                    </div>

                                </apex:outputPanel>

                                <!-- OTHER QUESTIONS -->
                                <apex:outputPanel layout="block" styleClass="slds-grid slds-wrap" rendered="{!IF(eventRegistration.Registrant_Third_Party_Status__c == 'Parent/Guardian', false, true)}" style="width:100%">

                                    <div class="cslds-col slds-p-around_x-small slds-size_1-of-1">
                                        <h3 class="slds-text-heading_medium">My Information</h3>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="otherFirstName" styleClass="slds-form-element__label">
                                                {!eventPage.First_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:inputText value="{!eventRegistration.Registrant_Other_First_Name__c}" id="otherFirstName" html-aria-describedby="otherFirstName-required" required="true" styleClass="required requiredText slds-input"/>
                                            </div>
                                            <div class="slds-form-element__help" id="otherFirstName-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="otherLastName" styleClass="slds-form-element__label">
                                                {!eventPage.Last_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:inputText value="{!eventRegistration.Registrant_Other_Last_Name__c}" id="otherLastName" html-aria-describedby="otherLastName-required" required="true" styleClass="required requiredText slds-input"/>
                                            </div>
                                            <div class="slds-form-element__help" id="otherLastName-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element slds-is-required">
                                            <apex:outputLabel for="otherEmail" styleClass="slds-form-element__label">
                                                {!eventPage.Email_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputLabel>
                                            <div class="slds-form-element__control">
                                                <apex:input type="email" value="{!eventRegistration.Registrant_Other_Email__c}" id="otherEmail" html-aria-describedby="otherEmail-required" required="true" styleClass="slds-input required requiredText validEmail"/>
                                            </div>
                                            <div class="slds-form-element__help" id="otherEmail-required">This field is required</div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                        <div class="slds-form-element">
                                            <apex:outputLabel value="{!eventPage.Phone_Label__c}" for="otherPhone" styleClass="slds-form-element__label"/>
                                            <div class="slds-form-element__control">
                                                <apex:input type="tel" value="{!eventRegistration.Registrant_Other_Phone__c}" id="otherPhone" styleClass="slds-input validPhone"/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                        <div class="slds-form-element">
                                            <apex:outputLabel value="{!eventPage.Registrant_Relationship_Label__c}" for="otherRelated" styleClass="slds-form-element__label"/>
                                            <div class="slds-form-element__control">
                                                <apex:inputTextarea value="{!eventRegistration.Registrant_Other_Relationship__c}" id="otherRelated" styleClass="slds-input"/>
                                            </div>
                                        </div>
                                    </div>

                                </apex:outputPanel>

                                <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                    <p class="slds-text-body">Enter the contact information of the individual you are registering for this activity below.
                                        <br/><strong><em>Note: it is preferable that the registrant have a unique email (different than yours) for our records.</em></strong></p>
                                </div>

                            </apex:outputPanel>
                        </apex:outputPanel>

                        <!-- REGISTRANT FIRST NAME -->
                        <apex:outputPanel rendered="{!eventPage.Ask_Third_Party_Registrant__c != null}" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1" layout="block">
                            <h3 class="slds-text-heading_medium"> Registrant Information</h3>
                        </apex:outputPanel>

                        <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                            <div class="slds-form-element slds-is-required">
                                <apex:outputLabel for="firstName" styleClass="required slds-form-element__label">
                                    {!eventPage.First_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Registrant_First_Name__c}" html-aria-describedby="firstName-required" id="firstName" required="true" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_First_Name__c)}"/>
                                </div>
                                <div class="slds-form-element__help" id="firstName-required">This field is required</div>
                            </div>
                        </div>

                        <!-- REGISTRANT LAST NAME -->
                        <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                            <div class="slds-form-element slds-is-required">
                                <apex:outputLabel for="lastName" styleClass="required slds-form-element__label">
                                    {!eventPage.Last_Name_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Registrant_Last_Name__c}" id="lastName" html-aria-describedby="lastName-required" required="true" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Last_Name__c)}"/>
                                </div>
                                <div class="slds-form-element__help" id="lastName-required">This field is required</div>
                            </div>
                        </div>

                        <!-- REGISTRANT EMAIL -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                            <div class="slds-form-element slds-is-required">
                                <apex:outputLabel for="email" styleClass="required slds-form-element__label">
                                    {!eventPage.Email_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:input type="email" value="{!eventRegistration.Registrant_Email__c}" id="email" html-aria-describedby="email-required" required="true" styleClass="slds-input validEmail" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Email__c)}"/>
                                </div>
                                <div class="slds-form-element__help" id="email-required">This field is required</div>
                            </div>
                        </apex:outputPanel>

                        <!-- CONFIRM EMAIL -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Email_Confirmation__c != 'Do not ask' && !ISBLANK(eventPage.Ask_Email_Confirmation__c), true, false)}">
                            <div class="slds-form-element slds-is-required">
                                <apex:outputLabel for="confirm-email" styleClass="required slds-form-element__label">
                                    Confirm Email <abbr class="slds-required" title="required">*</abbr>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:input type="email" id="confirm-email" html-aria-describedby="confirm-email-required" required="true" styleClass="slds-input validEmail" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Email__c)}"/>
                                </div>
                                <div class="slds-form-element__help" id="confirm-email-required">This field is required</div>
                            </div>
                        </apex:outputPanel>

                        <!-- PREFERRED FIRST NAME -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Preferred_First_Name__c != 'Do not ask' && eventPage.Ask_Preferred_First_Name__c != null, true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Preferred_First_Name__c == 'Ask and require', 'slds-is-required', '')}">
                                <apex:outputLabel for="preferredFirstName" styleClass="slds-form-element__label">
                                    {!eventPage.Preferred_First_Name_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Preferred_First_Name__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Registrant_Preferred_First_Name__c}" id="preferredFirstName" html-aria-describedby="preferredFirstName-required" required="{!IF(eventPage.Ask_Preferred_First_Name__c == 'Ask and require', true, false)}" styleClass="slds-input"/>
                                </div>
                                <div class="slds-form-element__help" id="preferredFirstName-required">
                                    {!IF(eventPage.Ask_Preferred_First_Name__c == 'Ask and require', 'This field is required', '')}
                                </div>
                            </div>
                        </apex:outputPanel>
                        <!-- REGISTRANT PREVIOUS LAST NAME -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Last_Name_As_Student__c != 'Do not ask' && eventPage.Ask_Last_Name_As_Student__c != null, true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Last_Name_As_Student__c == 'Ask and require', 'slds-is-required', '')}">
                                <apex:outputLabel for="lastNameAsStudent" styleClass="slds-form-element__label">
                                    {!eventPage.Last_Name_As_Student_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Last_Name_As_Student__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Last_Name_as_Student__c}" html-aria-describedby="lastNameAsStudent-required" id="lastNameAsStudent" styleClass="slds-input" required="{!IF(eventPage.Ask_Last_Name_As_Student__c == 'Ask and require', true, false)}"/>
                                </div>
                                <div class="slds-form-element__help" id="lastNameAsStudent-required">
                                    {!IF(eventPage.Ask_Last_Name_As_Student__c == 'Ask and require', 'This field is required', '')}
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- REGISTRANT PHONE NUMBER -->
                        <apex:outputPanel layout="block" id="phoneBlock" styleClass="slds-grid slds-wrap slds-size_1-of-1 {!IF(CONTAINS(eventPage.Ask_Phone__c, 'require one'), ' phone-require-one ','')}" rendered="{!IF(BEGINS(eventPage.Ask_Phone__c, 'Do not ') || eventPage.Ask_Phone__c == null, false, true) }" style="width:100%">

                            <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1" rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'require one'),true,false)}">
                                <p class="slds-is-required"><strong>Please provide either a home or mobile number</strong></p>
                            </apex:outputPanel>

                            <!-- HOME PHONE NUMBER -->
                            <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'home and mobile') || phoneType == 'home', true, false)}">
                                <div class="slds-form-element {!If(eventPage.Ask_Phone__c = 'Ask with type require'|| eventPage.Ask_Phone__c = 'Ask home and mobile require both', 'slds-is-required', '')}">
                                    <apex:outputLabel for="phone" styleClass="slds-form-element__label">
                                        {!IF((CONTAINS(eventPage.Ask_Phone__c, 'with type') && phoneType == ''),'', 'Home ')}{!eventPage.Phone_Label__c}
                                        <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'require'), true, false)}">
                                            <abbr class="slds-required" title="required">*</abbr>
                                        </apex:outputText>
                                    </apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <apex:input type="tel" value="{!eventRegistration.Registrant_Phone__c}" id="phone" html-aria-describedby="phone-required" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Phone__c)}" styleClass="slds-input"/>
                                    </div>
                                    <div class="slds-form-element__help" id="phone-required">
                                        Phone required
                                    </div>
                                </div>
                            </apex:outputPanel>

                            <!-- MOBILE PHONE NUMBER -->
                            <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6"
                                              rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'home and mobile') || eventPage.Ask_Phone__c == 'Ask mobile' || eventPage.Ask_Phone__c == 'Ask mobile and require' || phoneType == 'mobile' || (phoneType= '' && CONTAINS(eventPage.Ask_Phone__c, 'with type')), true, false)}">
                                <div class="slds-form-element {!If(eventPage.Ask_Phone__c = 'Ask with type require' || eventPage.Ask_Phone__c = 'Ask home and mobile require both' || eventPage.Ask_Phone__c == 'Ask mobile and require', 'slds-is-required', '')}">
                                    <apex:outputLabel for="mobile" styleClass="slds-form-element__label">
                                        {!IF((CONTAINS(eventPage.Ask_Phone__c, 'with type') || eventPage.Ask_Phone__c == 'Ask mobile' || eventPage.Ask_Phone__c == 'Ask mobile and require' && phoneType == ''),'', 'Mobile ')}{!eventPage.Phone_Label__c}
                                        <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'require'), true, false)}">
                                            <abbr class="slds-required" title="required">*</abbr>
                                        </apex:outputText>
                                    </apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <apex:input type="tel" value="{!eventRegistration.Registrant_Mobile_Phone__c}" id="mobile" html-aria-describedby="mobile-required" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Mobile_Phone__c)}" styleClass="slds-input"/>
                                    </div>
                                    <div class="slds-form-element__help" id="mobile-required">
                                        {!IF(CONTAINS(eventPage.Ask_Phone__c, 'with type'),'', 'Mobile ')}phone required
                                    </div>
                                </div>
                            </apex:outputPanel>

                            <!-- PHONE TYPE NUMBER -->
                            <apex:outputPanel rendered="{!IF(CONTAINS(eventPage.Ask_Phone__c, 'with type'), true, false)}" layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6">
                                <div class="slds-form-element {!If(eventPage.Ask_Phone__c = 'Ask with type require', 'slds-is-required', '')}">
                                    <apex:outputLabel for="mobile" styleClass="slds-form-element__label">
                                        {!eventPage.Phone_Type_Label__c} <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <div class="slds-select_container">
                                            <apex:selectList multiselect="false" size="1" value="{!phoneType}" required="false" id="phoneType" html-aria-describedby="phoneType-required" styleClass="slds-select" onChange="phoneTypeToggle(this.value)">
                                                <apex:selectOption itemLabel="Select..." itemValue=""/>
                                                <apex:selectOption itemLabel="Mobile" itemValue="mobile"/>
                                                <apex:selectOption itemLabel="Home" itemValue="home"/>
                                            </apex:selectList>
                                        </div>
                                    </div>
                                    <div class="slds-form-element__help" id="phoneType-required">
                                        Select a type of phone
                                    </div>
                                </div>
                            </apex:outputPanel>

                            <!-- TEXT MESSAGE ASK -->
                            <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1" rendered="{!IF((CONTAINS(eventPage.Ask_Phone__c, 'mobile') || eventPage.Ask_Phone__c == 'Ask mobile' || eventPage.Ask_Phone__c == 'Ask mobile and require' ||  phoneType='mobile') && !eventPage.Do_not_show_receive_text_question__c, true, false)}">
                                <div class="slds-form-element">
                                    <div class="slds-form-element__control">
                                        <div class="slds-checkbox">
                                            <apex:inputCheckbox value="{!eventRegistration.Registrant_Receive_Texts__c}" id="AcceptTextMessage"/>
                                            <apex:outputLabel for="AcceptTextMessage" styleClass="slds-checkbox__label">
                                                <span class="slds-checkbox_faux"></span>
                                                <span class="slds-form-element__label">{!eventPage.Registrant_Receive_Texts_Label__c} <abbr class="slds-required" title="required">*</abbr></span>
                                            </apex:outputLabel>
                                        </div>
                                    </div>
                                </div>
                            </apex:outputPanel>

                        </apex:outputPanel>
                        <!-- Gender Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Gender__c != 'Do not ask' && !isBlank(eventPage.Ask_Gender__c), true, false)}">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Gender__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Gender" styleClass="slds-form-element__label">
                                    {!eventPage.Gender_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Gender__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList value="{!eventRegistration.Registrant_Gender__c}" size="1" id="Gender" multiselect="false" required="{!IF(eventPage.Ask_Gender__c == 'Ask and require', true, false)}" styleClass="slds-select {!IF(eventPage.Ask_Gender__c == 'Ask and require', 'required', '')}">
                                            <apex:selectOptions value="{!sexDD}"/>
                                        </apex:selectList>
                                    </div>
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- Pronouns Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Pronoun__c != 'Do not ask' && !isBlank(eventPage.Ask_Pronoun__c), true, false)}">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Pronoun__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Pronouns" styleClass="slds-form-element__label">
                                    {!eventPage.Pronouns_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Pronoun__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList value="{!eventRegistration.Registrant_Pronouns__c}" size="1" id="pronoun" multiselect="false" required="{!IF(eventPage.Ask_Pronoun__c == 'Ask and require', true, false)}" styleClass="slds-select">
                                            <apex:selectOptions value="{!PronounDD}"/>
                                        </apex:selectList>
                                    </div>
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- Title Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Title__c != 'Do not ask' && !isBlank(eventPage.Ask_Title__c), true, false)}">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Title__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Title" styleClass="slds-form-element__label">
                                    {!eventPage.Title_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Title__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Registrant_Title__c}" id="title" html-aria-describedby="title-required" required="{!IF(eventPage.Ask_Title__c == 'Ask and require', true, false)}" styleClass="slds-input {!IF(eventPage.Ask_Title__c == 'Ask and require', 'required', '')}"/>
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- Registrant Company or Organization Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Company_Organization__c != 'Do not ask' && !isBlank(eventPage.Ask_Company_Organization__c), true, false)}">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Company_Organization__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Company or Organization" styleClass="slds-form-element__label">
                                    {!eventPage.Company_Organization_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Company_Organization__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputText value="{!eventRegistration.Registrant_Company_Organization__c}" id="companyorganization" html-aria-describedby="companyorganization" required="{!IF(eventPage.Ask_Company_Organization__c == 'Ask and require', true, false)}" styleClass="slds-input {!IF(eventPage.Ask_Company_Organization__c == 'Ask and require', 'required', '')}"/>
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- APPLICANT TYPE -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Applicant_Type__c != 'Do not ask' && eventPage.Ask_Applicant_Type__c != null && !BEGINS(eventPage.Ask_Applicant_Type__c, 'Do not ask but assign '), true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Applicant_Type__c == 'Ask and require', 'slds-is-required', '')}">
                                <apex:outputLabel for="applicantType" styleClass="slds-form-element__label">
                                    {!eventPage.Applicant_Type_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Applicant_Type__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList multiSelect="false" value="{!ApplicantType}" id="applicantType" html-aria-describedby="applicantType-required" size="1" styleClass="slds-select" required="{!IF(eventPage.Ask_Applicant_Type__c == 'Ask and require', true, false)}">
                                            <apex:selectOptions value="{!ApplicantTypeDD}"/>
                                        </apex:selectList>
                                    </div>
                                </div>
                                <div class="slds-form-element__help" id="applicantType-required">
                                    {!IF(eventPage.Ask_Last_Name_As_Student__c == 'Ask and require', 'This field is required', '')}
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- REGISTRANT PREFERRED CLASS YEAR -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Preferred_Class_Year__c != 'Do not ask' && eventPage.Ask_Preferred_Class_Year__c != null, true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Preferred_Class_Year__c == 'Ask and require', 'slds-is-required', '')}">
                                <apex:outputLabel for="preferredClassYear" styleClass="slds-form-element__label">
                                    {!eventPage.Preferred_Class_Year_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Preferred_Class_Year__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:input value="{!eventRegistration.Preferred_Class_Year__c}" html-aria-describedby="preferredClassYear-required" id="preferredClassYear" styleClass="slds-input validYear" required="{!IF(eventPage.Ask_Preferred_Class_Year__c == 'Ask and require', true, false)}"/>
                                </div>
                                <div class="slds-form-element__help" id="preferredClassYear-required">
                                    Please enter a valid 4-digit value
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- REGISTRANT DATE OF BIRTH -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" rendered="{!IF(eventPage.Ask_Date_Of_Birth__c != 'Do not ask' && eventPage.Ask_Date_Of_Birth__c != null, true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Date_Of_Birth__c == 'Ask and require', 'slds-is-required', '')}">
                                <apex:outputLabel for="dateofbirth" styleClass="slds-form-element__label">
                                    {!eventPage.Date_Of_Birth_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Date_Of_Birth__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:input type="date" value="{!eventRegistration.Registrant_Date_of_Birth__c}" id="dateOfBirth" html-aria-describedby="dateOfBirth-required" styleClass=" slds-input mmddyyyy" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Date_of_Birth__c)}" required="{!IF(eventPage.Ask_Date_Of_Birth__c == 'Ask and require', true, false)}" html-placeholder="MM/DD/YYYY"/>
                                </div>
                                <div class="slds-form-element__help" id="dateOfBirth-required">
                                    {!IF(eventPage.Ask_Date_Of_Birth__c == 'Ask and require', 'This field is required', '')}
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- REGISTRANT RELATIONSHIP TO INSTITUTION -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-around_x-small slds-size_1-of-1" rendered="{!IF((eventPage.Ask_Relationship_To_Institution__c != 'Do not ask') && (eventPage.Ask_Relationship_To_Institution__c != null), true, false)}">
                            <div class="slds-form-element {!IF(eventPage.Ask_Relationship_To_Institution__c == 'Ask and require','slds-is-required', '')}">
                                <apex:outputLabel for="relationshipToInstitution" styleClass="slds-form-element__label">
                                    {!eventPage.Relationship_To_Institution_Label__c}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Relationship_To_Institution__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <apex:inputHidden value="{!eventRegistration.Relationship_to_Institution__c}" id="relationshipToInstitution" required="{!IF(eventPage.Ask_Relationship_To_Institution__c == 'Ask and require',true, false)}"/>
                                    <ol class="selectableOL" id="rel2UST" data-hiddendataid="relationshipToInstitution" html-aria-describedby="relationshipToInstitution-required">
                                        <apex:repeat value="{!relationshipDD}" var="account">
                                            <li>
                                                <apex:outputText value="{!account.value}"/>
                                            </li>
                                        </apex:repeat>
                                    </ol>
                                </div>
                                <div class="slds-form-element__help" id="relationshipToInstitution-required">
                                    {!IF(eventPage.Ask_Relationship_To_Institution__c == 'Ask and require', 'Please select a relationship you have to the institution.', '')}
                                </div>
                            </div>
                        </apex:outputPanel>

                        <!-- Accessibility Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Accessibility_Needs__c != 'Do not ask' && !ISBLANK(eventPage.Ask_Accessibility_Needs__c), true, false)}" id="accessibilityWrap">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Accessibility_Needs__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Accessibility" styleClass="slds-form-element__label">
                                    {!IF(!ISBLANK(eventPage.Accessibility_Label__c), eventPage.Accessibility_Label__c, 'Do you have any accessibility needs for this event?')}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Accessibility_Needs__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <div class="slds-form-element__control">
                                    <div class="slds-select_container">
                                        <apex:selectList value="{!eventRegistration.Accessibility_Need__c}" size="1" id="Accessibility" multiselect="false" required="{!IF(eventPage.Ask_Accessibility_Needs__c == 'Ask and require', true, false)}" styleClass="slds-select" onChange="setAccessibility(this.value)">
                                            <apex:selectOptions value="{!accessibilityDD}"/>
                                        </apex:selectList>
                                    </div>
                                </div>
                            </div>
                            <apex:outputPanel layout="block" styleClass="slds-form-element {!IF(CONTAINS(eventPage.Ask_Accessibility_Needs__c, 'require'), 'slds-is-required', '')}" rendered="{!eventRegistration.Accessibility_Need__c == 'Yes'}">
                                <apex:outputLabel for="AccessibilityDetails" styleClass="slds-form-element__label">
                                    {!IF(!ISBLANK(eventPage.Accessibility_Detail_Label__c), eventPage.Accessibility_Detail_Label__c, 'Please indicate your accessibility request below.')}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Accessibility_Needs__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>

                                <apex:outputPanel layout="block" styleClass="slds-form-element__control">
                                    <apex:inputTextarea value="{!eventRegistration.Accessibility_Need_Detail__c}" styleClass="slds-input input-textbox" Id="AccessibilityDetails"/>
                                </apex:outputPanel>

                            </apex:outputPanel>
                        </apex:outputPanel>

                        <!-- Dietary Restrictions Question -->
                        <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-medium-size_3-of-6 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Ask_Dietary_Restrictions__c != 'Do not ask' && !ISBLANK(eventPage.Ask_Dietary_Restrictions__c), true, false)}">
                            <div class="slds-form-element {!IF(CONTAINS(eventPage.Ask_Dietary_Restrictions__c, 'require'), 'slds-is-required', '')}">
                                <apex:outputLabel for="Dietary" styleClass="slds-form-element__label">
                                    {!IF(!ISBLANK(eventPage.Dietary_Restrictions_Label__c), eventPage.Dietary_Restrictions_Label__c, 'Do you have any dietary restrictions?')}
                                    <apex:outputText escape="false" rendered="{!IF(eventPage.Ask_Dietary_Restrictions__c == 'Ask and require', true, false)}">
                                        <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputText>
                                </apex:outputLabel>
                                <apex:outputPanel layout="block" styleClass="slds-form-element__control">
                                    <apex:inputTextarea value="{!eventRegistration.Dietary_Ristrictions__c}" styleClass="slds-input input-textbox" Id="Dietary"/>
                                </apex:outputPanel>
                            </div>
                        </apex:outputPanel>

                        <!-- Mailing Address registration (optional)-->
                        <apex:outputPanel layout="none" rendered="{!eventPage.Ask_Mailing_Address__c != 'Do not ask' && eventPage.Ask_Mailing_Address__c != null}">

                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <h3 class="slds-text-heading_medium">{!eventPage.Mailing_Address_Label__c}</h3>
                            </div>

                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <div class="slds-form-element {!IF(eventPage.Ask_Mailing_Address__c == 'Ask and require', 'slds-is-required', '')}">
                                    <apex:outputLabel for="street" styleClass="slds-form-element__label">
                                        Street
                                        <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}">
                                            <abbr class="slds-required" title="required">*</abbr>
                                        </apex:outputText>
                                    </apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <apex:inputText value="{!eventRegistration.Registrant_Street_1__c}" id="street" required="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Street_1__c)}"/>
                                    </div>
                                </div>
                            </div>

                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <div class="slds-form-element">
                                    <apex:outputLabel value="Street Line 2 (Optional)" for="street2" styleClass="slds-form-element__label"/>
                                    <div class="slds-form-element__control">
                                        <apex:inputText value="{!eventRegistration.Registrant_Street_2__c}" id="street2" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Street_1__c)}"/>
                                    </div>
                                </div>
                            </div>
                            <apex:outputPanel layout="block" id="countryInfo" rendered="true" styleClass="slds-grid slds-wrap slds-size_1-of-1" style="width:100%">
                                <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                    <div class="slds-form-element {!IF(eventPage.Ask_Mailing_Address__c == 'Ask and require', 'slds-is-required', '')}">
                                        <apex:outputLabel for="country" styleClass="slds-form-element__label">
                                            Country
                                            <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}">
                                                <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputText>
                                        </apex:outputLabel>
                                        <div class="slds-form-element__control">
                                            <div class="slds-select_container">
                                                <apex:selectList value="{!eventRegistration.Registrant_Country__c}" size="1" id="country" multiselect="false" required="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}" styleClass="slds-select" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Country__c)}" onChange="setCountrySetting(this.value)">
                                                    <apex:selectOptions value="{!countryDD}"/>
                                                </apex:selectList>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_2-of-6">
                                    <div class="slds-form-element {!IF(eventPage.Ask_Mailing_Address__c == 'Ask and require', 'slds-is-required', '')}">
                                        <apex:outputLabel for="zip" styleClass="slds-form-element__label">
                                            Postal Code
                                            <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}">
                                                <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputText>
                                        </apex:outputLabel>
                                        <div class="slds-form-element__control">
                                            <apex:inputText value="{!eventRegistration.Registrant_Zip__c}" id="zip" required="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_Zip__c)}"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_2-of-6">
                                    <div class="slds-form-element {!IF(eventPage.Ask_Mailing_Address__c == 'Ask and require', 'slds-is-required', '')}">
                                        <apex:outputLabel for="city" styleClass="slds-form-element__label">
                                            {!$ObjectType[namespace + 'Summit_Events_Registration__c'].fields['Registrant_City__c'].Label}
                                            <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}">
                                                <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputText>
                                        </apex:outputLabel>
                                        <div class="slds-form-element__control">
                                            <apex:inputText value="{!eventRegistration.Registrant_City__c}" id="city" required="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_City__c)}"/>
                                        </div>
                                    </div>
                                </div>

                                <div class="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_2-of-6">
                                    <div class="slds-form-element {!IF(eventPage.Ask_Mailing_Address__c == 'Ask and require' && stateDD.size > 0, 'slds-is-required', '')}">
                                        <apex:outputLabel for="state" styleClass="slds-form-element__label">
                                            State/Province
                                            <apex:outputText escape="false" rendered="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require') && stateDD.size > 0, true, false)}">
                                                <abbr class="slds-required" title="required">*</abbr>
                                            </apex:outputText>
                                        </apex:outputLabel>
                                        <div class="slds-form-element__control">
                                            <apex:outputPanel layout="block" styleClass="slds-select_container" rendered="{!stateDD.size > 0}">
                                                <apex:selectList value="{!eventRegistration.Registrant_State__c}" size="1" id="state" multiselect="false" required="{!IF(CONTAINS(eventPage.Ask_Mailing_Address__c, 'require'), true, false)}" styleClass="slds-select" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_State__c)}">
                                                    <apex:selectOptions value="{!stateDD}"/>
                                                </apex:selectList>
                                            </apex:outputPanel>
                                            <apex:outputPanel layout="none" rendered="{!stateDD.size = 0}">
                                                <apex:inputText value="{!eventRegistration.Registrant_State_Province__c}" id="stateProvince" required="false" styleClass="slds-input" disabled="{!contactSet && !ISBLANK(eventRegistration.Registrant_State_Province__c)}"/>
                                            </apex:outputPanel>
                                        </div>
                                    </div>
                                </div>
                            </apex:outputPanel>
                        </apex:outputPanel>

                        <!-- Additional Questions -->
                        <apex:outputPanel layout="block" id="addInfo" styleClass="slds-grid slds-wrap" rendered="{!additionalQuestions}" style="width:100%">

                            <div class="slds-col slds-p-around_x-small slds-size_1-of-1">
                                <h3 class="slds-text-heading_medium">Additional Information</h3>
                            </div>

                            <!-- TIME FRAME QUESTION -->
                            <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Include_Time_frame_List__c, true,false)}">
                                <div class="slds-form-element slds-is-required">
                                    <apex:outputLabel for="timeframe" styleClass="slds-form-element__label">
                                        Preferred visit time <abbr class="slds-required" title="required">*</abbr>
                                    </apex:outputLabel>
                                    <div class="slds-form-element__control">
                                        <div class="slds-select_container">
                                            <apex:selectList size="1" value="{!eventRegistration.Preferred_Visit_Time__c}" id="timeframe" required="true" styleClass="slds-select">
                                                <apex:selectOptions value="{!timeFrame}"/>
                                            </apex:selectList>
                                        </div>
                                    </div>
                                </div>
                            </apex:outputPanel>

                            <!-- Additional Guests -->
                            <apex:outputPanel styleClass="slds-col slds-p-around_x-small slds-size_1-of-1 slds-large-size_3-of-6" layout="block" rendered="{!IF(eventPage.Allow_Other_Attendees__c, true,false)}">
                                <div class="slds-form-element">
                                    <apex:outputLabel value="Additional guests" for="guests" styleClass="slds-form-element__label"/>
                                    <div class="slds-form-element__control">
                                        <div class="slds-select_container">
                                            <apex:selectList size="1" value="{!eventRegistration.Number_of_Guests__c}" id="guests" styleClass="slds-select">
                                                <apex:selectOptions value="{!guestAmt}"/>
                                            </apex:selectList>
                                        </div>
                                    </div>
                                </div>
                            </apex:outputPanel>

                            <!-- Free from additional questions as defined in event -->
                            <apex:repeat value="{!questionNum}" var="q">
                                <apex:outputPanel layout="none" rendered="{!IF((!ISBLANK(eventPage['Add_Info_Question_Text_' + q + '__c']) && (!ISBLANK(eventPage['Add_Info_Question_Type_' + q + '__c']))),true, false)}">
                                    <apex:variable var="isRequired" value="{!IF(CONTAINS(eventPage['Add_Info_Question_Type_' + q + '__c'],'required'),true, false)}"/>
                                    <div class="slds-col slds-p-around_x-small slds-size_1-of-1">

                                        <div class="slds-form-element {!IF(isRequired, 'slds-is-required', '')}">

                                            <apex:outputLabel styleClass="slds-form-element__label">
                                                {!eventPage['Add_Info_Question_Text_' + q + '__c']}
                                                <apex:outputText escape="false" rendered="{!isRequired}">
                                                    <abbr class="slds-required" title="required">*</abbr>
                                                </apex:outputText>
                                            </apex:outputLabel>

                                            <apex:outputPanel layout="block" styleClass="slds-form-element__control">

                                                <!--Text area -->
                                                <apex:outputPanel layout="block" styleClass="slds-form-element__control" rendered="{!IF(CONTAINS(eventPage['Add_Info_Question_Type_' + q + '__c'], 'Text box'), true, false)}">
                                                    <apex:inputText value="{!eventRegistration['Add_Info_Answer_' + q + '__c']}" styleClass="slds-textarea"/>
                                                </apex:outputPanel>

                                                <!--Text area-->
                                                <apex:outputPanel layout="block" styleClass="slds-form-element__control" rendered="{!IF(CONTAINS(eventPage['Add_Info_Question_Type_' + q + '__c'],'Text area'), true, false)}">
                                                    <apex:inputTextarea value="{!eventRegistration['Add_Info_Answer_' + q + '__c']}" styleClass="slds-input input-textbox"/>
                                                </apex:outputPanel>

                                                <!--Pick List-->
                                                <apex:outputPanel layout="block" styleClass="slds-select_container" rendered="{!IF(CONTAINS(eventPage['Add_Info_Question_Type_' + q + '__c'], 'Pick-list'), true, false)}">
                                                    <apex:selectList value="{!eventRegistration['Add_Info_Answer_' + q + '__c']}" size="1" styleClass="slds-select">
                                                        <apex:selectOptions value="{!CASE(q, '1', addPick1, '2', addPick2, '3', addPick3, '4', addPick4, addPick5) }"/>
                                                    </apex:selectList>
                                                </apex:outputPanel>

                                                <div class="slds-form-element__help">
                                                    {!IF(isRequired, 'This field is required', '')}
                                                </div>

                                            </apex:outputPanel>
                                        </div>
                                    </div>
                                </apex:outputPanel>
                            </apex:repeat>
                        </apex:outputPanel>


                        <apex:variable value="{!100}" var="count"/>

                        <!-- Google reCAPTCHA v3 -->
                        <apex:inputHidden id="recaptchaResponse" value="{!recaptchaResponse}" rendered="{!recaptcha.version == 3}"/>

                        <!-- Submit buttons -->
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-vertical_medium slds-p-left_x-small slds-size_1-of-1" style="{!IF(recaptcha.version == 3, 'display:none', '')}">
                            <apex:commandLink action="{!saveContactRegistration}" onClick="fadeout(); return checkForm();" Value="{!IF(CONTAINS(nextUrl,'summiteventsconfirmation'), 'Register', 'Next')}" id="submitReg1" styleClass="slds-button slds-button_brand slds-p-horizontal_xx-large slds-p-vertical_xx-small" html-role="button"/>
                        </apex:outputPanel>
                        <apex:outputPanel layout="block" styleClass="slds-col slds-p-vertical_medium slds-p-left_x-small slds-size_1-of-1" rendered="{!recaptcha.version == 3}">
                            <button href="#" id="submitReg2" class="slds-button slds-button_brand slds-p-horizontal_xx-large slds-p-vertical_xx-small">{!IF(CONTAINS(nextUrl,'summiteventsconfirmation'), 'Register', 'Next')}</button>
                        </apex:outputPanel>
                        <div class="slds-col slds-p-vertical_medium slds-p-left_x-small slds-size_1-of-1 regularLists">
                            <apex:outputText escape="false" value="{!eventPage.Event_Footer__c}"/>
                        </div>
                    </apex:outputPanel>
                </apex:form>
                <!-- Event is closed message generated from event definition -->
            </div>
        </apex:define>
    </apex:composition>
</apex:page>