{% set is_login_page = true %}
{% extends 'layouts/fullscreen.twig' %}


{% block sidebar %}
    {% include 'members/login/sidebar_login_form.twig' %}
{% endblock %}

{% block content %}

    <div class="pageWrap">

        <div class="contentPageWrap membersWrap publicMembersArea">

            <div class="innerPageContent">


                {% include 'includes/partials/fullscreen_page_heading.twig' with {
                    title: 'Register',
                    content: 'To register, please provide your details using the form below.',
                    icon: false,
                    use_h2: true
                }%}

                <div class="membersAlerts">

                    {% if success is not empty %}
                        {{ success.message|raw }}
                    {% endif %}

                    {% if errors is not empty %}
                        <div class="error">
                            <ul>
                                {% for error in errors %}
                                    {% if loop.index == 1 %}
                                        <li>
                                            {{ error }}
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                </div> <!-- .membersAlerts -->


                <form action="{{ route('members-register-action', [], false) }}" method="post" class="registerMember js_registerMember">

                    <fieldset class="registerYourDetails">

                        <h3>Your details</h3>

                        <div class="formGrid">

                            <div class="fieldLeft">
                                <div class="row{% if errors.billing_firstname %} inputError showError{% endif %}">
                                    <label for="fname">First Name<sup>*</sup></label>
                                    <div class="inputWrap">
                                        <input class="text" id="fname" name="billing_firstname" type="text" value="{{ request.billing_firstname }}">
                                    </div>
                                    {% if errors.billing_firstname %}
                                        <div class="validationMessage">
                                            {{ errors.billing_firstname }}
                                        </div> <!-- .validationMessage -->
                                    {% endif %}
                                </div>
                            </div> <!-- .fieldLeft -->

                            <div class="fieldRight">
                                <div class="row{% if errors.billing_lastname %} inputError showError{% endif %}">
                                    <label for="sname">Last Name<sup>*</sup></label>
                                    <div class="inputWrap">
                                        <input class="text" id="sname" name="billing_lastname" type="text" value="{{ request.billing_lastname }}">
                                    </div>
                                    {% if errors.billing_lastname %}
                                        <div class="validationMessage">
                                            {{ errors.billing_lastname }}
                                        </div> <!-- .validationMessage -->
                                    {% endif %}
                                </div>
                            </div> <!-- .fieldRight -->

                        </div> <!-- .formGrid -->


                        <div class="row{% if errors.gender %} inputError showError{% endif %}">
                            <label for="gender">Gender</label>
                            <div class="inputWrap">

                                <select id="gender" name="gender">

                                    <option value="" {% if request.billing_gender is empty %}selected{% endif %}>Select your gender</option>

                                    {% for gender in genders %}

                                        <option
                                                value="{{ gender }}"
                                                {% if request.billing_gender == gender %}
                                                    selected
                                                {% endif %}
                                        >
                                            {{ gender }}
                                        </option>

                                    {% endfor %}

                                </select>

                            </div><!-- .inputWrap -->
                            {% if errors.billing_gender %}
                                <div class="validationMessage">
                                    {{ errors.billing_gender }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>


                        <div class="row">
                            <label for="contactNo">Contact No.<sup>*</sup></label>
                            <div class="inputWrap phoneWrap">
                                <input type="text"
                                       id="phonePrefix"
                                       name="phone_prefix"
                                       {#value="{% if member.phone_prefix is not empty %}{{ member.phone_prefix }}{% else %}+44{% endif %}"#}
                                       value="+44"
                                       class="text prefix hiddenPrefix"
                                       maxlength="3"
                                       placeholder="+44"
                                       readonly
                                />
                                <input type="tel"
                                       id="contactNo"
                                       name="contact_no"
                                       value="{{ member.contact_no }}"
                                       class="text"
                                       placeholder="07123456789"
                                />
                            </div>
                            {% if errors.contact_no %}
                                <div class="validationMessage">
                                    {{ errors.contact_no }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>



                        <div class="row">
                            <label for="DOB">
                                Date of Birth
                            </label>

                            <div class="inputWrap dobSelectRow">

                                <div class="inputWrap">

                                    <select name="dob_date"
                                            id="dobDate"
                                    >
                                        <option value="" {% if member.dob_date is empty or member.dob_date == '0' %}selected{% endif %}>Day</option>

                                        {% for day in dob.days %}
                                            <option
                                                    {% if day.value == member.dob_date %} selected {% endif %}
                                                    value="{{ day.value }}"
                                            >
                                                {{ day.text }}
                                            </option>
                                        {% endfor %}

                                    </select>

                                </div>

                                <div class="inputWrap">

                                    <select name="dob_month"
                                            id="dobMonth"
                                    >
                                        <option value="" {% if member.dob_month is empty or member.dob_month == '0' %}selected{% endif %}>Month</option>

                                        {% for month in dob.months %}
                                            <option
                                                    {% if month.value == member.dob_month %} selected {% endif %}
                                                    value="{{ month.value }}"
                                            >
                                                {{ month.text }}
                                            </option>
                                        {% endfor %}

                                    </select>

                                </div>

                                <div class="inputWrap inputWrapWide">

                                    <select name="dob_year"
                                            id="dobYear"
                                    >
                                        <option value="" {% if member.dob_year is empty or member.dob_year == '0' %}selected{% endif %}>Year</option>

                                        {% for year in dob.years %}
                                            <option
                                                    {% if year.value == member.dob_year %} selected {% endif %}
                                                    value="{{ year.value }}"
                                            >
                                                {{ year.text }}
                                            </option>
                                        {% endfor %}

                                    </select>

                                </div>

                            </div> <!-- .dobSelectRow -->

                            {#
                            <div class="inputWrap dobWrap">
                                <input type="tel"
                                       max="2"
                                       name="dob_date"
                                       id="dobDate"
                                       placeholder="DD"
                                       value="{{ member.dob_date }}"
                                       class="text prefix"/>

                                <input type="tel"
                                       max="2"
                                       name="dob_month"
                                       id="dobMonth"
                                       placeholder="MM"
                                       value="{{ member.dob_month }}"
                                       class="text prefix"/>

                                <input type="tel"
                                       max="4"
                                       name="dob_year"
                                       id="dobYear"
                                       placeholder="YYYY"
                                       value="{{ member.dob_year }}"
                                       class="text prefix"/>
                            </div>
                            #}


                        </div>

                    </fieldset>

                    <fieldset class="registerYourDetails">

                        <h3>Account details</h3>

                        <div class="row{% if errors.email %} inputError showError{% endif %}">
                            <label for="personal-email">Email<sup>*</sup></label>
                            <div class="inputWrap">
                                <input class="text" id="personal-email" name="email" type="email" value="{{ request.email }}">
                            </div>
                            {% if errors.email %}
                                <div class="validationMessage">
                                    {{ errors.email }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                        <div class="row{% if errors.password %} inputError showError{% endif %}">
                            <label for="registerpassword">Choose Password<sup>*</sup></label>
                            <div class="inputWrap">
                                <input class="text" id="registerpassword" name="password" type="password" autocomplete="off">
                            </div>
                            {% if errors.password %}
                                <div class="validationMessage">
                                    {{ errors.password }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                        <div class="row{% if errors.password2 %} inputError showError{% endif %}">
                            <label for="confirm-password">Re-Enter Password<sup>*</sup></label>
                            <div class="inputWrap">
                                <input class="text" id="confirm-password" name="password2" type="password" autocomplete="off">
                            </div>
                            {% if errors.password2 %}
                                <div class="validationMessage">
                                    {{ errors.password2 }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                    </fieldset>

                    <fieldset class="registerYourAddress">

                        <h3>Your address</h3>

                        {% include 'components/paf.twig' %}

                        <div class="row{% if errors.billing_address1 %} inputError showError{% endif %}">
                            <label for="billing-address-1">Address 1</label>
                            <div class="inputWrap">
                                <input class="text" id="billing-address-1" name="billing_address1" type="text" value="{{ request.billing_address1 }}" >
                            </div>
                            {% if errors.billing_address1 %}
                                <div class="validationMessage">
                                    {{ errors.billing_address1 }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                        <div class="row{% if errors.billing_address2 %} inputError showError{% endif %}">
                            <label for="billing-address-2">Address 2</label>
                            <div class="inputWrap">
                                <input class="text" id="billing-address-2" name="billing_address2" type="text" value="{{ request.billing_address2 }}" >
                            </div>
                            {% if errors.billing_address2 %}
                                <div class="validationMessage">
                                    {{ errors.billing_address2 }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                        <div class="row{% if errors.billing_city %} inputError showError{% endif %}">
                            <label for="billing-city">City</label>
                            <div class="inputWrap">
                                <input class="text" id="billing-city" name="billing_city" type="text" value="{{ request.billing_city }}" >
                            </div>
                            {% if errors.billing_city %}
                                <div class="validationMessage">
                                    {{ errors.billing_city }}
                                </div> <!-- .validationMessage -->
                            {% endif %}
                        </div>

                        {% if settings.PAF_ENABLED == false %}
                            <div class="row{% if errors.billing_postcode %} inputError showError{% endif %}">
                                <label for="postcode">Postcode</label>
                                <div class="inputWrap">
                                    <input class="text" id="postcode" name="billing_postcode" type="text" value="{{ request.billing_postcode }}">
                                </div>
                                {% if errors.billing_postcode %}
                                    <div class="validationMessage">
                                        {{ errors.billing_postcode }}
                                    </div> <!-- .validationMessage -->
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if countries is not empty %}

                            <div class="row">
                                <label for="billing-country">Country</label>
                                <div class="inputWrap">
                                    <select id="billing-country" name="billing_country">
                                        {% for country_id, country in countries %}
                                            {% if request.billing_country == country_id %}
                                                <option value="{{ country_id }}" selected>{{ country }}</option>
                                            {% else %}
                                                <option value="{{ country_id }}">{{ country }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>

                        {% endif %}

                        {% if state_list is not empty %}

                            <div class="row billing-state" id="bill-state">
                                <label class="country" for="billing-state">US State</label>
                                <div class="inputWrap">
                                    <select id="billing-state" name="billing_state">
                                        <option value="">US Addresses Only</option>
                                        {% for state_id, state in state_list %}
                                            {% if request.billing_state == state_id %}
                                                <option value="{{ state_id }}" selected>{{ state }}</option>
                                            {% else %}
                                                <option value="{{ state_id }}">{{ state }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div> <!-- row.billing-state -->

                        {% endif %}

                        <div class="row checkboxRow">
                            <input type="checkbox"
                                   id="newsletter"
                                   name="newsletter"
                                   value="1" {% if request.newsletter == 1 %} checked{% endif %}
                            />
                            <label for="newsletter">
                                I want to receive updates and special offers via email
                            </label>
                        </div>

                        <div class="row checkboxRow">
                            <input type="checkbox" id="terms" name="terms" value="1" {% if request.terms == 1 %} checked{% endif %} />
                            <label for="terms">I confirm I have read and accept the <a href="{{ terms_and_conditions }}" target="_blank" class="termsLink">Terms and conditions of service</a></label>
                        </div>


                        <div class="fullscreenFormFooter">

                            <a class="formLink" href="/members/">
                                Cancel registration
                            </a>

                            <button type="submit" name="submitbtn" class="button buttonAlt">Register</button>

                        </div>

                        <input name="action" type="hidden" value="register">
                        <input name="redirect" type="hidden" value="{{ request.redirect }}">

                    </fieldset>

                </form> <!--  .registerMember -->

            </div> <!-- .innerPageContent -->

        </div> <!-- .contentWrap.membersWrap -->

    </div> <!-- .pageWrap -->

{% endblock %}
