{{ header }}

<main id="account-address-form" class="franklin-account-page franklin-address-form-page">
  <div class="container">

    <nav class="franklin-breadcrumb account-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="address-form-hero">
      <div class="address-form-hero-content">
        <span class="address-form-eyebrow">
          <i class="bi bi-geo-alt-fill"></i>
          Address Details
        </span>

        <h1>{{ text_address }}</h1>

        <p>
          Add or update your billing and delivery address for a faster, more reliable checkout experience.
        </p>
      </div>

      <a href="{{ back }}" class="address-form-hero-back">
        <i class="bi bi-arrow-left"></i>
        {{ button_back }}
      </a>
    </section>

    <div class="address-form-layout">

      <aside class="address-form-sidebar">
        <div class="address-form-sidebar-icon">
          <i class="bi bi-house-door"></i>
        </div>

        <h2>Delivery Information</h2>

        <p>
          Enter complete and accurate address details so your order can be delivered without delay.
        </p>

        <div class="address-form-tips">
          <div>
            <i class="bi bi-person-check"></i>
            <span>
              <strong>Recipient Details</strong>
              <small>Use the name of the person receiving the order.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-signpost-split"></i>
            <span>
              <strong>Complete Address</strong>
              <small>Include house name, street, locality and landmark.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-mailbox"></i>
            <span>
              <strong>Correct Postcode</strong>
              <small>Helps us identify the right delivery area.</small>
            </span>
          </div>
        </div>

        <a href="{{ back }}" class="btn address-form-sidebar-back">
          <i class="bi bi-arrow-left"></i>
          {{ button_back }}
        </a>
      </aside>

      <section class="address-form-card">
        <div class="address-form-card-heading">
          <span class="address-form-heading-icon">
            <i class="bi bi-pencil-square"></i>
          </span>

          <div>
            <h2>{{ text_address }}</h2>
            <p>Fields marked with an asterisk are required.</p>
          </div>
        </div>

        <form id="form-address"
              action="{{ save }}"
              method="post"
              data-oc-toggle="ajax"
              class="address-form">

          <fieldset>
            <div class="address-form-grid">

              <div class="address-form-group required">
                <label for="input-firstname">{{ entry_firstname }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-person"></i>
                  <input type="text"
                         name="firstname"
                         value="{{ firstname }}"
                         placeholder="{{ entry_firstname }}"
                         id="input-firstname"
                         class="form-control"/>
                </div>

                <div id="error-firstname" class="invalid-feedback"></div>
              </div>

              <div class="address-form-group required">
                <label for="input-lastname">{{ entry_lastname }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-person-badge"></i>
                  <input type="text"
                         name="lastname"
                         value="{{ lastname }}"
                         placeholder="{{ entry_lastname }}"
                         id="input-lastname"
                         class="form-control"/>
                </div>

                <div id="error-lastname" class="invalid-feedback"></div>
              </div>

              <div class="address-form-group address-form-full">
                <label for="input-company">{{ entry_company }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-building"></i>
                  <input type="text"
                         name="company"
                         value="{{ company }}"
                         placeholder="{{ entry_company }}"
                         id="input-company"
                         class="form-control"/>
                </div>
              </div>

              <div class="address-form-group address-form-full required">
                <label for="input-address-1">{{ entry_address_1 }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-house"></i>
                  <input type="text"
                         name="address_1"
                         value="{{ address_1 }}"
                         placeholder="{{ entry_address_1 }}"
                         id="input-address-1"
                         class="form-control"/>
                </div>

                <div id="error-address-1" class="invalid-feedback"></div>
              </div>

              <div class="address-form-group address-form-full">
                <label for="input-address-2">{{ entry_address_2 }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-signpost"></i>
                  <input type="text"
                         name="address_2"
                         value="{{ address_2 }}"
                         placeholder="{{ entry_address_2 }}"
                         id="input-address-2"
                         class="form-control"/>
                </div>
              </div>

              <div class="address-form-group required">
                <label for="input-city">{{ entry_city }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-buildings"></i>
                  <input type="text"
                         name="city"
                         value="{{ city }}"
                         placeholder="{{ entry_city }}"
                         id="input-city"
                         class="form-control"/>
                </div>

                <div id="error-city" class="invalid-feedback"></div>
              </div>

              <div id="postcode-field" class="address-form-group required">
                <label for="input-postcode">{{ entry_postcode }}</label>

                <div class="address-input-wrap">
                  <i class="bi bi-mailbox"></i>
                  <input type="text"
                         name="postcode"
                         value="{{ postcode }}"
                         placeholder="{{ entry_postcode }}"
                         id="input-postcode"
                         class="form-control"/>
                </div>

                <div id="error-postcode" class="invalid-feedback"></div>
              </div>

              <div class="address-form-group required">
                <label for="input-country">{{ entry_country }}</label>

                <div class="address-select-wrap">
                  <i class="bi bi-globe2"></i>
                  <select name="country_id"
                          id="input-country"
                          class="form-select">
                    <option value="0">{{ text_select }}</option>

                    {% for country in countries %}
                      <option value="{{ country.country_id }}"
                              {% if country.country_id == country_id %}selected{% endif %}>
                        {{ country.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>

                <div id="error-country" class="invalid-feedback"></div>
              </div>

              <div class="address-form-group required">
                <label for="input-zone">{{ entry_zone }}</label>

                <div class="address-select-wrap">
                  <i class="bi bi-map"></i>
                  <select name="zone_id"
                          id="input-zone"
                          class="form-select">
                    <option value="">{{ text_select }}</option>

                    {% for zone in zones %}
                      <option value="{{ zone.zone_id }}"
                              {% if zone.zone_id == zone_id %}selected{% endif %}>
                        {{ zone.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>

                <div id="error-zone" class="invalid-feedback"></div>
              </div>

              {% for custom_field in custom_fields %}

                {% if custom_field.type == 'select' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <select name="custom_field[{{ custom_field.custom_field_id }}]"
                            id="input-custom-field-{{ custom_field.custom_field_id }}"
                            class="form-select">
                      <option value="">{{ text_select }}</option>

                      {% for custom_field_value in custom_field.custom_field_value %}
                        <option value="{{ custom_field_value.custom_field_value_id }}"
                                {% if address_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id == address_custom_field[custom_field.custom_field_id] %}selected{% endif %}>
                          {{ custom_field_value.name }}
                        </option>
                      {% endfor %}
                    </select>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'radio' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label>{{ custom_field.name }}</label>

                    <div id="input-custom-field-{{ custom_field.custom_field_id }}" class="address-choice-group">
                      {% for custom_field_value in custom_field.custom_field_value %}
                        <label class="address-choice">
                          <input type="radio"
                                 name="custom_field[{{ custom_field.custom_field_id }}]"
                                 value="{{ custom_field_value.custom_field_value_id }}"
                                 id="input-custom-value-{{ custom_field_value.custom_field_value_id }}"
                                 class="form-check-input"
                                 {% if address_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id == address_custom_field[custom_field.custom_field_id] %}checked{% endif %}/>
                          <span>{{ custom_field_value.name }}</span>
                        </label>
                      {% endfor %}
                    </div>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'checkbox' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label>{{ custom_field.name }}</label>

                    <div id="input-custom-field-{{ custom_field.custom_field_id }}" class="address-choice-group">
                      {% for custom_field_value in custom_field.custom_field_value %}
                        <label class="address-choice">
                          <input type="checkbox"
                                 name="custom_field[{{ custom_field.custom_field_id }}][]"
                                 value="{{ custom_field_value.custom_field_value_id }}"
                                 id="input-custom-value-{{ custom_field_value.custom_field_value_id }}"
                                 class="form-check-input"
                                 {% if address_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id in address_custom_field[custom_field.custom_field_id] %}checked{% endif %}/>
                          <span>{{ custom_field_value.name }}</span>
                        </label>
                      {% endfor %}
                    </div>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'text' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <input type="text"
                           name="custom_field[{{ custom_field.custom_field_id }}]"
                           value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                           placeholder="{{ custom_field.name }}"
                           id="input-custom-field-{{ custom_field.custom_field_id }}"
                           class="form-control"/>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'textarea' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <textarea name="custom_field[{{ custom_field.custom_field_id }}]"
                              rows="5"
                              placeholder="{{ custom_field.name }}"
                              id="input-custom-field-{{ custom_field.custom_field_id }}"
                              class="form-control">{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}</textarea>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'file' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label>{{ custom_field.name }}</label>

                    <div class="address-upload-box">
                      <button type="button"
                              data-oc-toggle="upload"
                              data-oc-url="{{ upload }}"
                              data-oc-size-max="{{ config_file_max_size }}"
                              data-oc-size-error="{{ error_upload_size }}"
                              data-oc-target="#input-custom-field-{{ custom_field.custom_field_id }}"
                              class="btn address-upload-button">
                        <i class="bi bi-cloud-arrow-up"></i>
                        {{ button_upload }}
                      </button>

                      <input type="hidden"
                             name="custom_field[{{ custom_field.custom_field_id }}]"
                             value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% endif %}"
                             id="input-custom-field-{{ custom_field.custom_field_id }}"/>
                    </div>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'date' %}
                  <div class="address-form-group custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <input type="date"
                           name="custom_field[{{ custom_field.custom_field_id }}]"
                           value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                           id="input-custom-field-{{ custom_field.custom_field_id }}"
                           class="form-control"/>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'time' %}
                  <div class="address-form-group custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <input type="time"
                           name="custom_field[{{ custom_field.custom_field_id }}]"
                           value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                           id="input-custom-field-{{ custom_field.custom_field_id }}"
                           class="form-control"/>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

                {% if custom_field.type == 'datetime' %}
                  <div class="address-form-group address-form-full custom-field{% if custom_field.required %} required{% endif %}">
                    <label for="input-custom-field-{{ custom_field.custom_field_id }}">{{ custom_field.name }}</label>

                    <input type="datetime-local"
                           name="custom_field[{{ custom_field.custom_field_id }}]"
                           value="{% if address_custom_field[custom_field.custom_field_id] %}{{ address_custom_field[custom_field.custom_field_id] }}{% else %}{{ custom_field.value }}{% endif %}"
                           id="input-custom-field-{{ custom_field.custom_field_id }}"
                           class="form-control"/>

                    <div id="error-custom-field-{{ custom_field.custom_field_id }}" class="invalid-feedback"></div>
                  </div>
                {% endif %}

              {% endfor %}

              <div class="address-form-group address-form-full">
                <label>{{ entry_default }}</label>

                <div class="address-default-choice">
                  <label>
                    <input type="radio"
                           name="default"
                           value="1"
                           id="input-default-yes"
                           class="form-check-input"
                           {% if default %}checked{% endif %}/>
                    <span>
                      <i class="bi bi-check-circle"></i>
                      {{ text_yes }}
                    </span>
                  </label>

                  <label>
                    <input type="radio"
                           name="default"
                           value="0"
                           id="input-default-no"
                           class="form-check-input"
                           {% if not default %}checked{% endif %}/>
                    <span>
                      <i class="bi bi-circle"></i>
                      {{ text_no }}
                    </span>
                  </label>
                </div>
              </div>

            </div>
          </fieldset>

          <div class="address-form-actions">
            <a href="{{ back }}" class="btn address-form-cancel">
              <i class="bi bi-arrow-left"></i>
              {{ button_back }}
            </a>

            <button type="submit" class="btn btn-primary address-form-save">
              <i class="bi bi-check2-circle"></i>
              {{ button_continue }}
            </button>
          </div>

        </form>
      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#input-country').on('change', function() {
    var element = this;

    $.ajax({
        url: 'index.php?route=localisation/country&country_id=' + this.value + '&language={{ language }}',
        dataType: 'json',

        beforeSend: function() {
            $(element).prop('disabled', true);
            $('#input-zone').prop('disabled', true);
        },

        complete: function() {
            $(element).prop('disabled', false);
            $('#input-zone').prop('disabled', false);
        },

        success: function(json) {
            if (json['postcode_required'] == '1') {
                $('#postcode-field').addClass('required');
            } else {
                $('#postcode-field').removeClass('required');
            }

            var html = '<option value="">{{ text_select|escape('js') }}</option>';

            if (json['zone'] && json['zone'] != '') {
                for (var i = 0; i < json['zone'].length; i++) {
                    html += '<option value="' + json['zone'][i]['zone_id'] + '"';

                    if (json['zone'][i]['zone_id'] == '{{ zone_id }}') {
                        html += ' selected';
                    }

                    html += '>' + json['zone'][i]['name'] + '</option>';
                }
            } else {
                html += '<option value="0" selected>{{ text_none|escape('js') }}</option>';
            }

            $('#input-zone').html(html);
        },

        error: function(xhr, ajaxOptions, thrownError) {
            console.error(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>

{{ footer }}