{{ header }}

<main id="account-register" class="franklin-account-page franklin-register-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="register-hero">
      <div class="register-hero-content">
        <span class="register-eyebrow">
          <i class="bi bi-person-plus-fill"></i>
          Create Your Franklin Account
        </span>

        <h1>{{ heading_title }}</h1>

        <p>
          Create an account to manage orders, save addresses, track purchases and enjoy a faster checkout experience.
        </p>

        <div class="register-benefit-row">
          <span><i class="bi bi-bag-check-fill"></i> Faster checkout</span>
          <span><i class="bi bi-truck"></i> Order tracking</span>
          <span><i class="bi bi-heart-fill"></i> Saved favourites</span>
        </div>
      </div>

      <div class="register-hero-icon" aria-hidden="true">
        <i class="bi bi-person-vcard"></i>
      </div>
    </section>

    <div class="register-layout">

      <aside class="register-sidebar">
        <div class="register-sidebar-icon">
          <i class="bi bi-shield-check"></i>
        </div>

        <h2>Why Create an Account?</h2>

        <p>
          Your Franklin account keeps your shopping information organised and available whenever you return.
        </p>

        <div class="register-sidebar-list">
          <div>
            <i class="bi bi-receipt-cutoff"></i>
            <span>
              <strong>Order History</strong>
              <small>Review previous orders and purchase details.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-geo-alt"></i>
            <span>
              <strong>Address Book</strong>
              <small>Save delivery and billing addresses securely.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-envelope-heart"></i>
            <span>
              <strong>Wellness Updates</strong>
              <small>Choose whether to receive Franklin news.</small>
            </span>
          </div>
        </div>

        <div class="register-login-note">
          <i class="bi bi-box-arrow-in-right"></i>
          <span>{{ text_account_already }}</span>
        </div>
      </aside>

      <section class="register-form-card">

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

          <fieldset class="register-section" id="account">
            <div class="register-section-heading">
              <span class="register-section-icon">
                <i class="bi bi-person"></i>
              </span>

              <div>
                <legend>{{ text_your_details }}</legend>
                <p>Enter your personal and contact information.</p>
              </div>
            </div>

            <div class="register-grid">

              {% if customer_groups|length > 1 %}
                <div class="register-form-group register-full required">
                  <label for="input-customer-group">{{ entry_customer_group }}</label>

                  <select name="customer_group_id"
                          id="input-customer-group"
                          class="form-select">
                    {% for customer_group in customer_groups %}
                      <option value="{{ customer_group.customer_group_id }}"
                              {% if customer_group.customer_group_id == customer_group_id %}selected{% endif %}>
                        {{ customer_group.name }}
                      </option>
                    {% endfor %}
                  </select>
                </div>
              {% endif %}

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

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

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

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

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

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

              <div class="register-form-group required">
                <label for="input-email">{{ entry_email }}</label>

                <div class="register-input-wrap">
                  <i class="bi bi-envelope"></i>
                  <input type="email"
                         name="email"
                         value=""
                         placeholder="{{ entry_email }}"
                         id="input-email"
                         class="form-control"
                         autocomplete="email"/>
                </div>

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

              {% if config_telephone_display %}
                <div class="register-form-group{% if config_telephone_required %} required{% endif %}">
                  <label for="input-telephone">{{ entry_telephone }}</label>

                  <div class="register-input-wrap">
                    <i class="bi bi-telephone"></i>
                    <input type="tel"
                           name="telephone"
                           value=""
                           placeholder="{{ entry_telephone }}"
                           id="input-telephone"
                           class="form-control"
                           autocomplete="tel"/>
                  </div>

                  <div id="error-telephone" class="invalid-feedback"></div>
                </div>
              {% endif %}

              {% for custom_field in custom_fields %}

                {% if custom_field.type == 'select' %}
                  <div class="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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 }}">
                          {{ 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="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <label>{{ custom_field.name }}</label>

                    <div id="input-custom-field-{{ custom_field.custom_field_id }}" class="register-choice-group">
                      {% for custom_field_value in custom_field.custom_field_value %}
                        <label class="register-choice" for="input-custom-value-{{ custom_field_value.custom_field_value_id }}">
                          <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"/>
                          <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="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <label>{{ custom_field.name }}</label>

                    <div id="input-custom-field-{{ custom_field.custom_field_id }}" class="register-choice-group">
                      {% for custom_field_value in custom_field.custom_field_value %}
                        <label class="register-choice" for="input-custom-value-{{ custom_field_value.custom_field_value_id }}">
                          <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"/>
                          <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="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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="{{ custom_field.value }}"
                           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="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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">{{ custom_field.value }}</textarea>

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

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

                    <div class="register-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 register-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=""
                             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="register-form-group custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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="{{ custom_field.value }}"
                           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="register-form-group custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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="{{ custom_field.value }}"
                           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="register-form-group register-full custom-field custom-field-{{ custom_field.custom_field_id }}">
                    <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="{{ custom_field.value }}"
                           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>
          </fieldset>

          <fieldset class="register-section">
            <div class="register-section-heading">
              <span class="register-section-icon">
                <i class="bi bi-lock"></i>
              </span>

              <div>
                <legend>{{ text_your_password }}</legend>
                <p>Create a secure password for your account.</p>
              </div>
            </div>

            <div class="register-grid">
              <div class="register-form-group register-full required">
                <label for="input-password">{{ entry_password }}</label>

                <div class="register-input-wrap">
                  <i class="bi bi-lock"></i>

                  <input type="password"
                         name="password"
                         value=""
                         placeholder="{{ entry_password }}"
                         id="input-password"
                         class="form-control"
                         autocomplete="new-password"/>

                  <button type="button"
                          id="button-password-toggle"
                          class="register-password-toggle"
                          aria-label="Show password">
                    <i class="bi bi-eye"></i>
                  </button>
                </div>

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

                <div class="register-password-tip">
                  <i class="bi bi-shield-check"></i>
                  Use a strong password that is difficult to guess.
                </div>
              </div>
            </div>
          </fieldset>

          <fieldset class="register-section">
            <div class="register-section-heading">
              <span class="register-section-icon">
                <i class="bi bi-envelope-heart"></i>
              </span>

              <div>
                <legend>{{ text_newsletter }}</legend>
                <p>Choose whether to receive Franklin news and wellness updates.</p>
              </div>
            </div>

            <div class="register-newsletter-card" id="register-newsletter-card">
              <div class="register-newsletter-content">
                <span class="register-newsletter-icon">
                  <i class="bi bi-envelope-check"></i>
                </span>

                <div>
                  <strong>{{ entry_newsletter }}</strong>
                  <small id="register-newsletter-status">Newsletter subscription is currently disabled.</small>
                </div>
              </div>

              <label class="register-switch" for="input-newsletter">
                <input type="hidden" name="newsletter" value="0"/>

                <input type="checkbox"
                       name="newsletter"
                       value="1"
                       id="input-newsletter"/>

                <span class="register-switch-track">
                  <span class="register-switch-thumb"></span>
                </span>
              </label>
            </div>
          </fieldset>

          {% if captcha %}
            <div class="register-captcha">
              {{ captcha }}
            </div>
          {% endif %}

          <div class="register-submit-area">

            {% if text_agree %}
              <label class="register-agreement">
                <input type="checkbox"
                       name="agree"
                       value="1"
                       class="form-check-input"/>

                <span>
                  <i class="bi bi-shield-check"></i>
                  {{ text_agree }}
                </span>
              </label>
            {% endif %}

            <button type="submit" class="btn btn-primary register-submit-button">
              <i class="bi bi-person-check-fill"></i>
              {{ button_continue }}
            </button>

          </div>

        </form>

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#input-customer-group').on('change', function() {
    $.ajax({
        url: 'index.php?route=account/custom_field&customer_group_id=' + this.value + '&language={{ language }}',
        dataType: 'json',

        success: function(json) {
            $('.custom-field').hide().removeClass('required');

            for (var i = 0; i < json.length; i++) {
                var customField = json[i];
                var field = $('.custom-field-' + customField['custom_field_id']);

                field.show();

                if (customField['required']) {
                    field.addClass('required');
                }
            }
        },

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

if ($('#input-customer-group').length) {
    $('#input-customer-group').trigger('change');
}

$('#button-password-toggle').on('click', function() {
    var input = $('#input-password');
    var icon = $(this).find('i');

    if (input.attr('type') === 'password') {
        input.attr('type', 'text');
        icon.removeClass('bi-eye').addClass('bi-eye-slash');
        $(this).attr('aria-label', 'Hide password');
    } else {
        input.attr('type', 'password');
        icon.removeClass('bi-eye-slash').addClass('bi-eye');
        $(this).attr('aria-label', 'Show password');
    }
});

$('#input-newsletter').on('change', function() {
    var card = $('#register-newsletter-card');
    var status = $('#register-newsletter-status');

    if (this.checked) {
        card.addClass('is-active');
        status.text('Newsletter subscription is enabled.');
    } else {
        card.removeClass('is-active');
        status.text('Newsletter subscription is currently disabled.');
    }
});
//--></script>

{{ footer }}