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

{% block sidebar %}
    {% include 'b2b/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: 'Trade Account Application',
                    content: 'Apply for a trade account to access wholesale pricing. Complete the form below and our team will review your application.',
                    icon: false,
                    use_h2: true
                }%}

                <div class="membersAlerts">

                    {% if success is not empty %}
                        <div class="success">
                            <p>{{ success }}</p>
                        </div>
                    {% endif %}

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

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

                {% if success is empty %}
                <form action="/trade/register" method="post" class="registerMember tradeRegisterForm js_registerMember">
                    {{ csrf_token('tradeRegisterForm')|raw }}

                    <fieldset class="registerYourDetails">
                        <h3>Company Details</h3>

                        <div class="row{% if errors.company_name %} inputError showError{% endif %}">
                            <label for="company_name">Company Name<sup>*</sup></label>
                            <div class="inputWrap">
                                <input class="text" id="company_name" name="company_name" type="text" value="{{ old.company_name }}">
                            </div>
                            {% if errors.company_name %}
                                <div class="validationMessage">{{ errors.company_name }}</div>
                            {% endif %}
                        </div>
                    </fieldset>

                    <fieldset class="registerYourDetails">
                        <h3>Contact Details</h3>

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

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

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

                        <div class="row{% if errors.phone %} inputError showError{% endif %}">
                            <label for="phone">Phone Number<sup>*</sup></label>
                            <div class="inputWrap">
                                <input class="text" id="phone" name="phone" type="tel" value="{{ old.phone }}">
                            </div>
                            {% if errors.phone %}
                                <div class="validationMessage">{{ errors.phone }}</div>
                            {% endif %}
                        </div>
                    </fieldset>

                    <fieldset class="registerYourAddress">

                        <h3>Business Address</h3>

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

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

                        <div class="row">
                            <label for="billing-address-2">Address 2</label>
                            <div class="inputWrap">
                                <input class="text" id="billing-address-2" name="address_2" type="text" value="{{ old.address_2 }}">
                            </div>
                        </div>

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

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

                    </fieldset>

                    <fieldset class="registerYourDetails">
                        <h3>Create Password</h3>

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

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

                    <fieldset class="registerYourDetails">
                        <h3>Additional Information</h3>

                        <div class="row">
                            <label for="message">Message / Notes</label>
                            <div class="inputWrap">
                                <textarea id="message" name="message" rows="4" class="text">{{ old.message }}</textarea>
                            </div>
                        </div>
                    </fieldset>

                    <div class="fullscreenFormFooter">

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

                        <button type="submit" class="button buttonAlt">Submit Application</button>

                    </div>

                </form>
                {% endif %}

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

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

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

{% endblock %}
