{{ header }}

<main id="account-order-info" class="franklin-account-page franklin-order-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="order-alert"></div>

    {{ content_top }}

    <section class="order-info-hero">
      <div class="order-info-hero-content">
        <span class="order-info-eyebrow">
          <i class="bi bi-receipt-cutoff"></i>
          Order Information
        </span>

        <h1>{{ text_order_id }} #{{ order_id }}</h1>

        <p>
          Review your invoice, addresses, payment details, ordered products and order history.
        </p>
      </div>

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

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

      <article class="order-summary-card">
        <span class="order-summary-icon">
          <i class="bi bi-file-earmark-text"></i>
        </span>

        <div>
          <small>{{ text_invoice_no }}</small>
          <strong>
            {% if invoice_no %}
              {{ invoice_no }}
            {% else %}
              {{ text_tbc }}
            {% endif %}
          </strong>
        </div>
      </article>

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

        <div>
          <small>{{ text_order_id }}</small>
          <strong>#{{ order_id }}</strong>
        </div>
      </article>

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

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

      <article class="order-summary-card">
        <span class="order-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="order-address-grid">

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

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

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

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

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

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

      </section>
    {% endif %}

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

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

        <div>
          <h2>Ordered Products</h2>
          <p>Products, quantities, prices and available actions.</p>
        </div>
      </div>

      <div class="order-products-list">
        {% set product_row = 0 %}

        {% for product in products %}
          <article class="order-product-item" id="product-row-{{ product_row }}">

            <div class="order-product-main">

              <div class="order-product-icon">
                <i class="bi bi-bag"></i>
              </div>

              <div class="order-product-details">
                <h3>
                  <a href="{{ product.view }}">{{ product.name }}</a>
                </h3>

                <div id="error-{{ product_row }}-product" class="invalid-feedback mt-0"></div>

                <div class="order-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>

                    <div id="error-{{ product_row }}-option-{{ option.product_option_id }}"
                         class="invalid-feedback mt-0"></div>
                  {% endfor %}

                  {% if product.subscription %}
                    <span>
                      <i class="bi bi-arrow-repeat"></i>
                      {{ text_subscription }}:
                      {% if product.subscription %}
                        <a href="{{ product.subscription }}" target="_blank">
                          {{ product.subscription_plan }}
                        </a>
                      {% else %}
                        {{ product.subscription_plan }}
                      {% endif %}
                    </span>

                    <div id="error-{{ product_row }}-subscription"
                         class="invalid-feedback mt-0"></div>
                  {% endif %}

                  {% if product.reward %}
                    <span>
                      <i class="bi bi-gift"></i>
                      {{ text_points }}: {{ product.reward }}
                    </span>
                  {% endif %}
                </div>

                <form id="form-product-{{ product_row }}" class="order-reorder-form">
                  <input type="hidden" name="product_id" value="{{ product.product_id }}"/>
                  <input type="hidden" name="quantity" value="{{ product.quantity }}"/>

                  {% for option in product.option %}
                    {% if option.type == 'select' or option.type == 'radio' %}
                      <input type="hidden"
                             name="option[{{ option.product_option_id }}]"
                             value="{{ option.product_option_value_id }}"/>
                    {% endif %}

                    {% if option.type == 'checkbox' %}
                      <input type="hidden"
                             name="option[{{ option.product_option_id }}][]"
                             value="{{ option.product_option_value_id }}"/>
                    {% endif %}

                    {% if option.type == 'text' or option.type == 'textarea' or option.type == 'file' or option.type == 'date' or option.type == 'datetime' or option.type == 'time' %}
                      <input type="hidden"
                             name="option[{{ option.product_option_id }}]"
                             value="{{ option.value }}"/>
                    {% endif %}
                  {% endfor %}

                  <input type="hidden"
                         name="subscription_plan_id"
                         value="{{ product.subscription_plan_id }}"/>
                </form>
              </div>

            </div>

            <div class="order-product-numbers">

              <div>
                <small>{{ column_quantity }}</small>
                <strong>{{ product.quantity }}</strong>
              </div>

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

              <div>
                <small>{{ column_total }}</small>
                <strong>{{ product.total }}</strong>
              </div>

            </div>

            <div class="order-product-actions">
              <button type="submit"
                      form="form-product-{{ product_row }}"
                      class="btn btn-primary order-reorder-button">
                <i class="bi bi-arrow-repeat"></i>
                {{ button_reorder }}
              </button>

              <a href="{{ product.return }}"
                 class="btn order-return-button">
                <i class="bi bi-arrow-counterclockwise"></i>
                {{ button_return }}
              </a>
            </div>

          </article>

          {% set product_row = product_row + 1 %}
        {% endfor %}
      </div>

      <div class="order-totals">
        {% for total in totals %}
          <div class="order-total-row">
            <span>{{ total.title }}</span>
            <strong>{{ total.text }}</strong>
          </div>
        {% endfor %}
      </div>

    </section>

    {% if comment %}
      <section class="order-comment-card">
        <span class="order-comment-icon">
          <i class="bi bi-chat-left-text"></i>
        </span>

        <div>
          <h2>{{ text_comment }}</h2>
          <p>{{ comment }}</p>
        </div>
      </section>
    {% endif %}

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

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

        <div>
          <h2>{{ text_history }}</h2>
          <p>Updates and comments recorded against this order.</p>
        </div>
      </div>

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

    </section>

    <div class="order-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"><!--
$('.order-reorder-form').on('submit', function(e) {
    e.preventDefault();

    var element = this;
    var button = e.originalEvent && e.originalEvent.submitter
        ? e.originalEvent.submitter
        : document.querySelector('[form="' + element.id + '"]');

    var originalHtml = button ? $(button).html() : '';

    $.ajax({
        url: 'index.php?route=checkout/cart.add&language={{ language }}',
        type: 'post',
        data: $(element).serialize(),
        dataType: 'json',
        cache: false,

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

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

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

        success: function(json) {
            $('.order-reorder-form')
                .find('.invalid-feedback')
                .removeClass('d-block');

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

                var productRow = $(element).attr('id').replace('form-product-', '');

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

                    delete json['error']['warning'];
                }

                for (var key in json['error']) {
                    if (Object.prototype.hasOwnProperty.call(json['error'], key)) {
                        $('#error-' + productRow + '-' + key.replaceAll('_', '-'))
                            .html(json['error'][key])
                            .addClass('d-block');
                    }
                }
            }

            if (json['success']) {
                $('#order-alert').html(
                    '<div class="alert alert-success alert-dismissible fade show order-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>'
                );

                if ($('#cart').length) {
                    $('#cart').load(
                        'index.php?route=common/cart.info&language={{ language }}'
                    );
                }
            }
        },

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

            $('#order-alert').html(
                '<div class="alert alert-danger alert-dismissible fade show order-alert" role="alert">' +
                    '<i class="bi bi-exclamation-circle-fill"></i>' +
                    '<span>Unable to reorder this product. 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);
});
//--></script>

{{ footer }}