{{ header }}

<main id="account-subscription-info" class="franklin-account-page franklin-subscription-info-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>

    <div id="subscription-alert"></div>

    {{ content_top }}

    <section class="subscription-info-hero">
      <div class="subscription-info-hero-content">
        <span class="subscription-info-eyebrow">
          <i class="bi bi-arrow-repeat"></i>
          Subscription Information
        </span>

        <h1>{{ text_subscription_id }} #{{ subscription_id }}</h1>

        <p>
          Review recurring products, addresses, payment details, renewal information, history and generated orders.
        </p>
      </div>

      <a href="{{ continue }}" class="subscription-info-back-link">
        <i class="bi bi-arrow-left"></i>
        {{ button_continue }}
      </a>
    </section>

    <section class="subscription-summary-grid">

      <article class="subscription-summary-card">
        <span class="subscription-summary-icon">
          <i class="bi bi-hash"></i>
        </span>

        <div>
          <small>{{ text_subscription_id }}</small>
          <strong>#{{ subscription_id }}</strong>
        </div>
      </article>

      {% if order_id %}
        <article class="subscription-summary-card">
          <span class="subscription-summary-icon">
            <i class="bi bi-receipt-cutoff"></i>
          </span>

          <div>
            <small>{{ text_order_id }}</small>
            <strong>
              <a href="{{ order_link }}" target="_blank" rel="noopener">#{{ order_id }}</a>
            </strong>
          </div>
        </article>
      {% endif %}

      {% if shipping_method %}
        <article class="subscription-summary-card">
          <span class="subscription-summary-icon">
            <i class="bi bi-truck"></i>
          </span>

          <div>
            <small>{{ text_shipping_method }}</small>
            <strong>{{ shipping_method }}</strong>
          </div>
        </article>
      {% endif %}

      <article class="subscription-summary-card">
        <span class="subscription-summary-icon">
          <i class="bi bi-wallet2"></i>
        </span>

        <div>
          <small>{{ text_payment_method }}</small>
          <strong>{{ payment_method }}</strong>
        </div>
      </article>

    </section>

    {% if payment_address or shipping_address %}
      <section class="subscription-address-grid">

        {% if payment_address %}
          <article class="subscription-address-card">
            <div class="subscription-section-heading">
              <span>
                <i class="bi bi-credit-card"></i>
              </span>

              <div>
                <h2>{{ text_payment_address }}</h2>
                <p>Billing information used for this subscription.</p>
              </div>
            </div>

            <div class="subscription-address-content">
              {{ payment_address }}
            </div>
          </article>
        {% endif %}

        {% if shipping_address %}
          <article class="subscription-address-card">
            <div class="subscription-section-heading">
              <span>
                <i class="bi bi-geo-alt"></i>
              </span>

              <div>
                <h2>{{ text_shipping_address }}</h2>
                <p>Delivery information recorded for this subscription.</p>
              </div>
            </div>

            <div class="subscription-address-content">
              {{ shipping_address }}
            </div>
          </article>
        {% endif %}

      </section>
    {% endif %}

    <section class="subscription-products-card">

      <div class="subscription-section-heading">
        <span>
          <i class="bi bi-box-seam"></i>
        </span>

        <div>
          <h2>Subscription Products</h2>
          <p>Products, options, quantities and recurring prices.</p>
        </div>
      </div>

      {% if products %}
        <div class="subscription-product-list">

          {% for product in products %}
            <article class="subscription-product-item">

              <div class="subscription-product-main">
                <span class="subscription-product-icon">
                  <i class="bi bi-bag"></i>
                </span>

                <div class="subscription-product-details">
                  <h3>
                    <a href="{{ product.product_edit }}" target="_blank" rel="noopener">
                      {{ product.name }}
                    </a>
                  </h3>

                  <div class="subscription-product-meta">
                    <span>
                      <i class="bi bi-upc-scan"></i>
                      {{ text_model }}: {{ product.model }}
                    </span>

                    {% for option in product.option %}
                      <span>
                        <i class="bi bi-sliders"></i>
                        {{ option.name }}: {{ option.value }}
                      </span>
                    {% endfor %}
                  </div>
                </div>
              </div>

              <div class="subscription-product-values">
                <div>
                  <small>{{ column_quantity }}</small>
                  <strong>{{ product.quantity }}</strong>
                </div>

                <div>
                  <small>{{ column_trial_price }}</small>
                  <strong>{{ product.trial_price }}</strong>
                </div>

                <div>
                  <small>{{ column_price }}</small>
                  <strong>{{ product.price }}</strong>
                </div>
              </div>

            </article>
          {% endfor %}

        </div>
      {% else %}
        <div class="subscription-section-empty">
          <i class="bi bi-box"></i>
          <p>{{ text_no_results }}</p>
        </div>
      {% endif %}

    </section>

    <section class="subscription-plan-grid">

      <article class="subscription-plan-card subscription-plan-description">
        <span class="subscription-plan-icon">
          <i class="bi bi-arrow-repeat"></i>
        </span>

        <div>
          <small>{{ text_subscription_plan }}</small>
          <strong>{{ description }}</strong>
        </div>
      </article>

      <article class="subscription-plan-card">
        <span class="subscription-plan-icon">
          <i class="bi bi-calendar-event"></i>
        </span>

        <div>
          <small>{{ text_date_next }}</small>
          <strong>{{ date_next }}</strong>
        </div>
      </article>

      {% if duration %}
        <article class="subscription-plan-card">
          <span class="subscription-plan-icon">
            <i class="bi bi-hourglass-split"></i>
          </span>

          <div>
            <small>{{ text_remaining }}</small>
            <strong>{{ remaining }}</strong>
          </div>
        </article>
      {% endif %}

    </section>

    <section class="subscription-management-card">
      <div>
        <span class="subscription-management-icon">
          <i class="bi bi-exclamation-triangle"></i>
        </span>

        <div>
          <h2>Subscription Management</h2>
          <p>Cancel this recurring subscription when it is no longer required.</p>
        </div>
      </div>

      <button type="button" id="button-cancel" class="btn subscription-cancel-button">
        <i class="bi bi-x-circle"></i>
        {{ button_cancel }}
      </button>
    </section>

    <section class="subscription-history-card">

      <div class="subscription-section-heading">
        <span>
          <i class="bi bi-clock-history"></i>
        </span>

        <div>
          <h2>{{ text_history }}</h2>
          <p>Status updates and comments recorded against this subscription.</p>
        </div>
      </div>

      <div id="history">
        {{ history }}
      </div>

    </section>

    <section class="subscription-orders-card">

      <div class="subscription-section-heading">
        <span>
          <i class="bi bi-receipt"></i>
        </span>

        <div>
          <h2>{{ text_order }}</h2>
          <p>Orders generated from this recurring subscription.</p>
        </div>
      </div>

      <div id="order">
        {{ order }}
      </div>

    </section>

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

    {{ content_bottom }}

  </div>
</main>

<script type="text/javascript"><!--
$('#button-cancel').on('click', function(e) {
    e.preventDefault();

    var button = this;
    var originalHtml = $(button).html();

    $.ajax({
        url: 'index.php?route=account/subscription.cancel&language={{ language }}&customer_token={{ customer_token }}&subscription_id={{ subscription_id }}',
        dataType: 'json',

        beforeSend: function() {
            $('#subscription-alert').empty();

            $(button)
                .prop('disabled', true)
                .html(
                    '<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>' +
                    '<span> Processing...</span>'
                );
        },

        complete: function() {
            $(button)
                .prop('disabled', false)
                .html(originalHtml);
        },

        success: function(json) {
            if (json['error']) {
                $('#subscription-alert').html(
                    '<div class="alert alert-danger alert-dismissible fade show subscription-alert" role="alert">' +
                        '<i class="bi bi-exclamation-circle-fill"></i>' +
                        '<span>' + json['error'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );
            }

            if (json['success']) {
                $('#subscription-alert').html(
                    '<div class="alert alert-success alert-dismissible fade show subscription-alert" role="alert">' +
                        '<i class="bi bi-check-circle-fill"></i>' +
                        '<span>' + json['success'] + '</span>' +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                    '</div>'
                );

                $('#history').load(
                    'index.php?route=account/subscription.history&language={{ language }}&customer_token={{ customer_token }}&subscription_id={{ subscription_id }}'
                );
            }
        },

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

            $('#subscription-alert').html(
                '<div class="alert alert-danger alert-dismissible fade show subscription-alert" role="alert">' +
                    '<i class="bi bi-exclamation-circle-fill"></i>' +
                    '<span>Unable to cancel this subscription. Please try again.</span>' +
                    '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                '</div>'
            );
        }
    });
});

$('#history').on('click', '.pagination a', function(e) {
    e.preventDefault();
    $('#history').load(this.href);
});

$('#order').on('click', '.pagination a', function(e) {
    e.preventDefault();
    $('#order').load(this.href);
});
//--></script>

{{ footer }}