{{ header }}

<main id="account-affiliate" class="franklin-account-page franklin-affiliate-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="affiliate-hero">
      <div class="affiliate-hero-content">
        <span class="affiliate-eyebrow">
          <i class="bi bi-people-fill"></i>
          Franklin Partner Programme
        </span>

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

        <p>
          Manage your affiliate profile, website information and preferred payment method from one secure place.
        </p>
      </div>

      <div class="affiliate-hero-icon" aria-hidden="true">
        <i class="bi bi-megaphone"></i>
      </div>
    </section>

    <div class="affiliate-layout">

      <aside class="affiliate-sidebar">
        <div class="affiliate-sidebar-icon">
          <i class="bi bi-graph-up-arrow"></i>
        </div>

        <h2>Grow With Franklin</h2>

        <p>
          Keep your affiliate and payment information accurate so commissions can be processed without delay.
        </p>

        <div class="affiliate-benefits">
          <div>
            <i class="bi bi-link-45deg"></i>
            <span>
              <strong>Promote Products</strong>
              <small>Share Franklin products with your audience.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-cash-coin"></i>
            <span>
              <strong>Earn Commission</strong>
              <small>Receive rewards for eligible referrals.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-shield-check"></i>
            <span>
              <strong>Secure Payments</strong>
              <small>Choose the payment option that suits you.</small>
            </span>
          </div>
        </div>

        <div class="affiliate-sidebar-note">
          <i class="bi bi-info-circle"></i>
          <span>Fields marked with an asterisk are required.</span>
        </div>
      </aside>

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

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

          <fieldset class="affiliate-section">
            <div class="affiliate-section-heading">
              <span class="affiliate-section-icon">
                <i class="bi bi-building"></i>
              </span>

              <div>
                <legend>{{ text_my_affiliate }}</legend>
                <p>Tell us about your organisation and online presence.</p>
              </div>
            </div>

            <div class="affiliate-grid">

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

                <div class="affiliate-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="affiliate-form-group">
                <label for="input-website">{{ entry_website }}</label>

                <div class="affiliate-input-wrap">
                  <i class="bi bi-globe2"></i>
                  <input type="text"
                         name="website"
                         value="{{ website }}"
                         placeholder="{{ entry_website }}"
                         id="input-website"
                         class="form-control"/>
                </div>
              </div>

            </div>
          </fieldset>

          <fieldset class="affiliate-section">
            <div class="affiliate-section-heading">
              <span class="affiliate-section-icon">
                <i class="bi bi-wallet2"></i>
              </span>

              <div>
                <legend>{{ text_payment }}</legend>
                <p>Select how you would like to receive affiliate payments.</p>
              </div>
            </div>

            <div class="affiliate-grid">

              <div class="affiliate-form-group affiliate-full">
                <label for="input-tax">{{ entry_tax }}</label>

                <div class="affiliate-input-wrap">
                  <i class="bi bi-receipt"></i>
                  <input type="text"
                         name="tax"
                         value="{{ tax }}"
                         placeholder="{{ entry_tax }}"
                         id="input-tax"
                         class="form-control"/>
                </div>
              </div>

              <div class="affiliate-form-group affiliate-full required">
                <label>{{ entry_payment_method }}</label>

                <div class="affiliate-payment-options">

                  <label class="affiliate-payment-option" for="input-payment-cheque">
                    <input type="radio"
                           name="payment_method"
                           value="cheque"
                           id="input-payment-cheque"
                           class="form-check-input"
                           {% if payment_method == 'cheque' %}checked{% endif %}/>

                    <span class="affiliate-payment-option-icon">
                      <i class="bi bi-bank"></i>
                    </span>

                    <span class="affiliate-payment-option-text">
                      <strong>{{ text_cheque }}</strong>
                      <small>Receive payment by cheque.</small>
                    </span>

                    <i class="bi bi-check-circle-fill affiliate-payment-check"></i>
                  </label>

                  <label class="affiliate-payment-option" for="input-payment-paypal">
                    <input type="radio"
                           name="payment_method"
                           value="paypal"
                           id="input-payment-paypal"
                           class="form-check-input"
                           {% if payment_method == 'paypal' %}checked{% endif %}/>

                    <span class="affiliate-payment-option-icon">
                      <i class="bi bi-paypal"></i>
                    </span>

                    <span class="affiliate-payment-option-text">
                      <strong>{{ text_paypal }}</strong>
                      <small>Receive payment through PayPal.</small>
                    </span>

                    <i class="bi bi-check-circle-fill affiliate-payment-check"></i>
                  </label>

                  <label class="affiliate-payment-option" for="input-payment-bank">
                    <input type="radio"
                           name="payment_method"
                           value="bank"
                           id="input-payment-bank"
                           class="form-check-input"
                           {% if payment_method == 'bank' %}checked{% endif %}/>

                    <span class="affiliate-payment-option-icon">
                      <i class="bi bi-credit-card"></i>
                    </span>

                    <span class="affiliate-payment-option-text">
                      <strong>{{ text_bank }}</strong>
                      <small>Receive payment by bank transfer.</small>
                    </span>

                    <i class="bi bi-check-circle-fill affiliate-payment-check"></i>
                  </label>

                </div>

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

              <div class="affiliate-form-group affiliate-full required payment affiliate-payment-panel" id="payment-cheque">
                <label for="input-cheque">{{ entry_cheque }}</label>

                <div class="affiliate-input-wrap">
                  <i class="bi bi-person-vcard"></i>
                  <input type="text"
                         name="cheque"
                         value="{{ cheque }}"
                         placeholder="{{ entry_cheque }}"
                         id="input-cheque"
                         class="form-control"/>
                </div>

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

              <div class="affiliate-form-group affiliate-full required payment affiliate-payment-panel" id="payment-paypal">
                <label for="input-paypal">{{ entry_paypal }}</label>

                <div class="affiliate-input-wrap">
                  <i class="bi bi-envelope"></i>
                  <input type="text"
                         name="paypal"
                         value="{{ paypal }}"
                         placeholder="{{ entry_paypal }}"
                         id="input-paypal"
                         class="form-control"/>
                </div>

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

              <div id="payment-bank" class="payment affiliate-payment-panel affiliate-full">
                <div class="affiliate-grid">

                  <div class="affiliate-form-group">
                    <label for="input-bank-name">{{ entry_bank_name }}</label>

                    <div class="affiliate-input-wrap">
                      <i class="bi bi-bank"></i>
                      <input type="text"
                             name="bank_name"
                             value="{{ bank_name }}"
                             placeholder="{{ entry_bank_name }}"
                             id="input-bank-name"
                             class="form-control"/>
                    </div>
                  </div>

                  <div class="affiliate-form-group">
                    <label for="input-bank-branch-number">{{ entry_bank_branch_number }}</label>

                    <div class="affiliate-input-wrap">
                      <i class="bi bi-signpost-2"></i>
                      <input type="text"
                             name="bank_branch_number"
                             value="{{ bank_branch_number }}"
                             placeholder="{{ entry_bank_branch_number }}"
                             id="input-bank-branch-number"
                             class="form-control"/>
                    </div>
                  </div>

                  <div class="affiliate-form-group">
                    <label for="input-bank-swift-code">{{ entry_bank_swift_code }}</label>

                    <div class="affiliate-input-wrap">
                      <i class="bi bi-upc-scan"></i>
                      <input type="text"
                             name="bank_swift_code"
                             value="{{ bank_swift_code }}"
                             placeholder="{{ entry_bank_swift_code }}"
                             id="input-bank-swift-code"
                             class="form-control"/>
                    </div>
                  </div>

                  <div class="affiliate-form-group required">
                    <label for="input-bank-account-name">{{ entry_bank_account_name }}</label>

                    <div class="affiliate-input-wrap">
                      <i class="bi bi-person-badge"></i>
                      <input type="text"
                             name="bank_account_name"
                             value="{{ bank_account_name }}"
                             placeholder="{{ entry_bank_account_name }}"
                             id="input-bank-account-name"
                             class="form-control"/>
                    </div>

                    <div id="error-bank-account-name" class="invalid-feedback"></div>
                  </div>

                  <div class="affiliate-form-group affiliate-full required">
                    <label for="input-bank-account-number">{{ entry_bank_account_number }}</label>

                    <div class="affiliate-input-wrap">
                      <i class="bi bi-123"></i>
                      <input type="text"
                             name="bank_account_number"
                             value="{{ bank_account_number }}"
                             placeholder="{{ entry_bank_account_number }}"
                             id="input-bank-account-number"
                             class="form-control"/>
                    </div>

                    <div id="error-bank-account-number" class="invalid-feedback"></div>
                  </div>

                </div>
              </div>

              {% for custom_field in custom_fields %}
                {% if custom_field.location == 'affiliate' %}

                  {% if custom_field.type == 'select' %}
                    <div class="affiliate-form-group affiliate-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 affiliate_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id == affiliate_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="affiliate-form-group affiliate-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="affiliate-choice-group">
                        {% for custom_field_value in custom_field.custom_field_value %}
                          <label class="affiliate-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 affiliate_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id == affiliate_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="affiliate-form-group affiliate-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="affiliate-choice-group">
                        {% for custom_field_value in custom_field.custom_field_value %}
                          <label class="affiliate-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 affiliate_custom_field[custom_field.custom_field_id] and custom_field_value.custom_field_value_id in affiliate_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="affiliate-form-group affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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="affiliate-form-group affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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="affiliate-form-group affiliate-full custom-field{% if custom_field.required %} required{% endif %}">
                      <label>{{ custom_field.name }}</label>

                      <div class="affiliate-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 affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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="affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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="affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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="affiliate-form-group affiliate-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 affiliate_custom_field[custom_field.custom_field_id] %}{{ affiliate_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 %}

                {% endif %}
              {% endfor %}

            </div>
          </fieldset>

          <div class="affiliate-actions">

            {% if text_agree %}
              <label class="affiliate-agreement" for="input-agree">
                <input type="hidden" name="agree" value="0"/>
                <input type="checkbox"
                       name="agree"
                       value="1"
                       id="input-agree"
                       class="form-check-input"/>

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

            <button type="submit" class="btn btn-primary affiliate-submit">
              <i class="bi bi-check2-circle"></i>
              {{ button_continue }}
            </button>

          </div>

        </form>
      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('input[name=\'payment_method\']').on('change', function() {
    $('.payment').hide();
    $('#payment-' + this.value).show();

    $('.affiliate-payment-option').removeClass('is-selected');
    $(this).closest('.affiliate-payment-option').addClass('is-selected');
});

$('input[name=\'payment_method\']:checked').trigger('change');
//--></script>

{{ footer }}