{{ header }}

<main id="account-tracking" class="franklin-account-page franklin-tracking-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="tracking-hero">
      <div class="tracking-hero-content">
        <span class="tracking-eyebrow">
          <i class="bi bi-link-45deg"></i>
          Affiliate Tracking
        </span>

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

        <p>{{ text_description }}</p>
      </div>

      <div class="tracking-hero-icon" aria-hidden="true">
        <i class="bi bi-graph-up-arrow"></i>
      </div>
    </section>

    <div class="tracking-layout">

      <aside class="tracking-info-card">
        <span class="tracking-info-icon">
          <i class="bi bi-broadcast-pin"></i>
        </span>

        <h2>How Tracking Works</h2>

        <p>
          Use your unique tracking code to create product links and monitor referrals sent to the Franklin store.
        </p>

        <div class="tracking-info-list">
          <div>
            <i class="bi bi-key"></i>
            <span>
              <strong>Your Tracking Code</strong>
              <small>Use the unique code assigned to your affiliate account.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-search"></i>
            <span>
              <strong>Select a Product</strong>
              <small>Search for a Franklin product using the generator.</small>
            </span>
          </div>

          <div>
            <i class="bi bi-share"></i>
            <span>
              <strong>Share the Link</strong>
              <small>Copy the generated tracking link and use it in your promotions.</small>
            </span>
          </div>
        </div>

        <div class="tracking-tip">
          <i class="bi bi-info-circle"></i>
          <span>{{ help_generator }}</span>
        </div>

        <a href="{{ continue }}" class="btn tracking-back-button">
          <i class="bi bi-arrow-left"></i>
          {{ button_continue }}
        </a>
      </aside>

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

        <div class="tracking-form-heading">
          <span class="tracking-form-heading-icon">
            <i class="bi bi-link"></i>
          </span>

          <div>
            <h2>Tracking Link Generator</h2>
            <p>Create a trackable product URL using your affiliate code.</p>
          </div>
        </div>

        <form class="tracking-form" onsubmit="return false;">

          <div class="tracking-form-group">
            <label for="input-code">{{ entry_code }}</label>

            <div class="tracking-field-wrap tracking-textarea-wrap">
              <i class="bi bi-key"></i>

              <textarea cols="40"
                        rows="5"
                        placeholder="{{ entry_code }}"
                        id="input-code"
                        class="form-control"
                        readonly>{{ code }}</textarea>

              <button type="button"
                      class="tracking-copy-button"
                      data-copy-target="#input-code"
                      data-copy-default="Copy code"
                      aria-label="Copy tracking code">
                <i class="bi bi-copy"></i>
                <span>Copy code</span>
              </button>
            </div>
          </div>

          <div class="tracking-form-group">
            <label for="input-generator">{{ entry_generator }}</label>

            <div class="tracking-field-wrap">
              <i class="bi bi-search"></i>

              <input type="text"
                     name="product"
                     value=""
                     placeholder="{{ entry_generator }}"
                     id="input-generator"
                     data-oc-target="autocomplete-generator"
                     class="form-control"
                     autocomplete="off"/>

              <ul id="autocomplete-generator" class="dropdown-menu tracking-autocomplete"></ul>
            </div>

            <div class="tracking-help-text">
              <i class="bi bi-lightbulb"></i>
              <span>{{ help_generator }}</span>
            </div>
          </div>

          <div class="tracking-form-group">
            <label for="input-link">{{ entry_link }}</label>

            <div class="tracking-field-wrap tracking-textarea-wrap">
              <i class="bi bi-link-45deg"></i>

              <textarea name="link"
                        cols="40"
                        rows="5"
                        placeholder="{{ entry_link }}"
                        id="input-link"
                        class="form-control"
                        readonly></textarea>

              <button type="button"
                      class="tracking-copy-button"
                      data-copy-target="#input-link"
                      data-copy-default="Copy link"
                      aria-label="Copy generated link">
                <i class="bi bi-copy"></i>
                <span>Copy link</span>
              </button>
            </div>
          </div>

          <div class="tracking-status-card" id="tracking-status-card">
            <span class="tracking-status-icon">
              <i class="bi bi-magic"></i>
            </span>

            <div>
              <strong>Generate Your Link</strong>
              <small>Select a product above and the tracking link will appear automatically.</small>
            </div>
          </div>

        </form>

        <div class="tracking-footer-action">
          <a href="{{ continue }}" class="btn btn-primary">
            <i class="bi bi-arrow-left"></i>
            {{ button_continue }}
          </a>
        </div>

      </section>

    </div>

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#input-generator').autocomplete({
    'source': function(request, response) {
        return $.ajax({
            url: 'index.php?route=account/tracking.autocomplete&customer_token={{ customer_token }}&search=' + encodeURIComponent(request) + '&tracking=' + encodeURIComponent($('#input-code').val()) + '&language={{ language }}',
            dataType: 'json',

            success: function(json) {
                response($.map(json, function(item) {
                    return {
                        label: item['name'],
                        value: item['link']
                    };
                }));
            }
        });
    },

    'select': function(item) {
        $('#input-link').val(item['value']);

        $('#tracking-status-card')
            .addClass('is-ready')
            .find('strong')
            .text('Tracking Link Ready');

        $('#tracking-status-card')
            .find('small')
            .text('Your product tracking link has been generated and is ready to copy.');
    }
});

$('.tracking-copy-button').on('click', function() {
    var button = $(this);
    var target = $(button.data('copy-target'));
    var value = target.val();
    var defaultText = button.data('copy-default');

    if (!value) {
        return;
    }

    function showCopiedState() {
        button.addClass('is-copied');
        button.find('i').removeClass('bi-copy').addClass('bi-check2');
        button.find('span').text('Copied');

        setTimeout(function() {
            button.removeClass('is-copied');
            button.find('i').removeClass('bi-check2').addClass('bi-copy');
            button.find('span').text(defaultText);
        }, 1800);
    }

    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(value).then(showCopiedState);
    } else {
        target.prop('readonly', false).trigger('select');
        document.execCommand('copy');
        target.prop('readonly', true);
        showCopiedState();
    }
});
//--></script>

{{ footer }}