{% extends 'layouts/members.twig' %}

{% block members_content %}

    {% set billing_address = member.addressBilling %}
    {% set shipping_address = member.addressShipping %}

    {% include 'includes/elements/intro_block.twig' with {
        intro_title: 'Account Details',
        intro_content: false,
        class: 'membersIntro',
        use_h1: true
    }%}

    <div class="membersContentWrap">


        <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 %}
                            <li>
                                {{error}}
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

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

        <div class="editDetailsWrap">

            <form class="memberContactDetails js_memberContactDetails"
                  action="{{ route('members-account-store', [], false) }}"
                  method="POST"
            >

                <div id="changeCustomerDetails" class="detailsGrid">

                    <div class="detailsCol">
                        <fieldset class="memberEditContact">

                            <h5 class="memberTitle">Contact details</h5>

                            <p>
                                Please enter the details you would like us to contact you on.
                            </p>

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

                                {% if errors.email %}
                                    <div class="errorWrap">
                                        <i class="far fa-exclamation"></i>
                                        <span>{{ errors.email }}</span>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="row">

                                <div class="row">
                                    <label for="firstname">First Name<sup>*</sup></label>
                                    <div class="inputWrap{% if errors.billing_firstname %} inputError showError{% endif %}">
                                        <input type="text" name="billing_firstname" value="{{ billing_address.firstname }}" class="text" />
                                    </div>
                                    {% if errors.billing_firstname %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.billing_firstname }}</span>
                                        </div>
                                    {% endif %}
                                </div>

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

                                    {% if errors.billing_lastname %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.billing_lastname }}</span>
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="row">
                                    <label for="contactNo">Contact No.</label>
                                    <div class="inputWrap phoneWrap">
                                        <input type="text"
                                               id="phonePrefix"
                                               name="phone_prefix"
                                               value="{{ member.phone_prefix }}"
                                               class="text prefix" />
                                        <input type="text"
                                               id="contactNo"
                                               name="contact_no"
                                               value="{{ member.contact_no }}"
                                               class="text" />
                                    </div>
                                </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>

                                <div class="row">

                                    <div class="row">
                                        <label for="gender">
                                            Gender
                                        </label>

                                        <div class="inputWrap">
                                            <select name="gender" id="gender">
                                                <option value="">Select</option>
                                                {% for gender in genders %}
                                                    <option value="{{ gender }}"{% if member.gender|lower == gender|lower %} selected{% endif %}>{{ gender }}</option>
                                                {% endfor %}
                                            </select>

                                        </div>

                                        {% if errors.gender %}
                                            <div class="errorWrap">
                                                <i class="far fa-exclamation"></i>
                                                <span>{{ errors.gender }}</span>
                                            </div>
                                        {% endif %}
                                    </div>

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


                    <div class="detailsCol">
                        <fieldset class="changePasswordDetails">

                            <h5 class="memberTitle">Change Password</h5>

                            <p>If you want to reset your password, please fill in the below fields</p>

                            <div class="row checkboxRow">
                                <input type="checkbox" id="passwordChange" name="resetpw" value="1" />
                                <label for="passwordChange">Change Password?</label>
                            </div>

                            <div class="row">
                                <label for="password">Password</label>
                                <div class="inputWrap">
                                    <input type="password" id="password" name="password" value="" class="text" />
                                </div>
                            </div>

                            <div class="row">
                                <label for="passwordConfirm">Confirm Password</label>
                                <div class="inputWrap">
                                    <input type="password" id="passwordConfirm" name="password2" value="" class="text" />
                                </div>
                            </div>

                        </fieldset>
                    </div> <!-- .detailsCol -->


                    <div id="addresses" class="detailsCol">
                        <fieldset class="memberEditAddress">

                            <h5 class="memberTitle">Billing Address</h5>

                            <p>
                                Please enter the card holder address, this must match where your credit card is registered to.
                            </p>


                            <div class="row">
                                <label for="billing-address-1">Address 1<sup>*</sup></label>
                                <div class="inputWrap{% if errors.billing_address1 %} inputError showError{% endif %}">
                                    <input type="text" id="billing-address-1" name="billing_address1" value="{{ billing_address.address1 }}" class="text" />
                                    {% if errors.billing_address1 %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.billing_address1 }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

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

                            <div class="row">
                                <label for="billing-city">City<sup>*</sup></label>
                                <div class="inputWrap{% if errors.billing_city %} inputError showError{% endif %}">
                                    <input type="text" id="billing-city" name="billing_city" value="{{ billing_address.city }}" class="text" />
                                </div>
                                {% if errors.billing_city %}
                                    <div class="errorWrap">
                                        <i class="far fa-exclamation"></i>
                                        <span>{{ errors.billing_city }}</span>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="row">
                                <label for="billing_postcode">Postcode</label>
                                <div class="inputWrap{% if errors.billing_postcode %} inputError showError{% endif %}">
                                    <input type="text" name="billing_postcode" id="billing_postcode" value="{{ billing_address.postcode }}" class="text" />
                                    {% if errors.billing_postcode %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.billing_postcode }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            {% if countries is not empty %}

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

                            {% endif %}

                            {# Disabled #}
                            {% if state_list is not empty and true == false%}

                                <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 %}

                        </fieldset>
                    </div> <!-- .detailsCol -->


                    <div class="detailsCol">
                        <fieldset class="memberEditAddress">

                            <h5 class="memberTitle">Shipping Address</h5>

                            <p>
                                Please enter the shipping address, this must match where your order will be delivered to.
                            </p>



                            <div class="row">
                                <label for="shipping-address-1">Address 1<sup>*</sup></label>
                                <div class="inputWrap{% if errors.shipping_address1 %} inputError showError{% endif %}">
                                    <input type="text" id="shipping-address-1" name="shipping_address1" value="{{ shipping_address.address1 }}" class="text" />
                                    {% if errors.shipping_address1 %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.shipping_address1 }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="row">
                                <label for="shipping-address-2">Address 2</label>
                                <div class="inputWrap">
                                    <input type="text" id="shipping-address-2" name="shipping_address2" value="{{ shipping_address.address2 }}" class="text" />
                                </div>
                            </div>

                            <div class="row">
                                <label for="shipping-city">City<sup>*</sup></label>
                                <div class="inputWrap{% if errors.shipping_city %} inputError showError{% endif %}">
                                    <input type="text" id="shipping-city" name="shipping_city" value="{{ shipping_address.city }}" class="text" />
                                </div>
                                {% if errors.shipping_city %}
                                    <div class="errorWrap">
                                        <i class="far fa-exclamation"></i>
                                        <span>{{ errors.shipping_city }}</span>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="row">
                                <label for="shipping_postcode">Postcode</label>
                                <div class="inputWrap{% if errors.shipping_postcode %} inputError showError{% endif %}">
                                    <input type="text" name="shipping_postcode" id="shipping_postcode" value="{{ shipping_address.postcode }}" class="text" />
                                    {% if errors.shipping_postcode %}
                                        <div class="errorWrap">
                                            <i class="far fa-exclamation"></i>
                                            <span>{{ errors.shipping_postcode }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>

                            {% if countries is not empty %}

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

                            {% endif %}

                            {% if state_list is not empty %}

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

                            {% endif %}

                        </fieldset>
                    </div> <!-- .detailsCol -->

                </div><!-- .detailsGrid -->


                <div class="actionButtons">

                    <input type="hidden"
                           name="action"
                           value="update"
                    />
                    <input type="hidden"
                           name="id"
                           value="{{ member.id }}"
                    />

                    <div class="actionsRight">
                        <button type="submit"
                                name="submit['change_details']"
                                class="button buttonAlt"
                        >
                            Save Details
                        </button>
                    </div> <!-- .actionsLeft -->

                </div> <!-- .actionButtons -->

            </form>

        </div> <!-- .editDetailsWrap -->


    </div> <!-- .membersContentGrid -->

{% endblock %}
