{% extends "credentials/base_cred.html" %}

{% block title %}Canonical Credentials{% endblock %}

{% block meta_description %}
  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
  Ubuntu Desktop, and Ubuntu Server topics.
{% endblock meta_description %}

{% block content %}
  <form onsubmit="handleSubmit(); return false">
    <div class="p-strip product-selector">
      <div class="row">
        <h2>Select an exam to purchase</h2>
      </div>
      <div class="row u-hide--small">
        {% for exam in exams %}
          {% set metadata_length = exam.metadata|length %}
          {% set is_disabled = metadata_length == 1 %}
          {% set is_discounted = True if metadata_length > 1 and exam.metadata[1].discountPrice else False %}
          <div class="col-4">
            <div id="price-card-{{ loop.index0 }}"
                 class="p-card--radio--column {% if loop.index0 == exam_index %}is-selected{% endif %}">
              <label class="p-radio">
                <input id="price-radio"
                       class="p-radio__input"
                       type="radio"
                       {% if is_disabled %}disabled{% endif %} />
                <span class="p-radio__label">
                  <label class="inner-label p-radio" label="{{ exam.name }}">
                    <input id="price-radio-inner-{{ loop.index0 }}"
                           class="p-radio__input"
                           name="exam-radio"
                           type="radio"
                           value="{{ loop.index0 }}"
                           {% if loop.index0 == exam_index %}checked{% endif %}
                           {% if is_disabled %}disabled{% endif %} />
                    <span class="p-radio__label">{{ exam.displayName }}</span>
                  </label>
                  <hr class="p-rule" />
                  <p style="padding-left: 1rem; padding-right: 1rem;">{{ exam.metadata[0].value }}</p>
                  <hr class="p-rule" />
                  <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
                    {% if is_disabled %}
                      Coming soon
                    {% else %}
                      <span class="exam-price" id="exam-price-{{ exam.id }}">Price:
                        {% if is_discounted %}<s>{{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}</s>{% endif %}
                        {{ exam.metadata[1].currency }}
                        {% if is_discounted %}
                          {{ exam.metadata[1].discountPrice }}
                        {% else %}
                          {{ exam.metadata[1].originalPrice }}
                        {% endif %}
                      </span>
                    {% endif %}
                  </h5>
                </span>
              </label>
            </div>
          </div>
        {% endfor %}
      </div>

      <!-- Smaller cards for minimised window -->
      {% for exam in exams %}
        {% set metadata_length = exam.metadata|length %}
        {% set is_disabled = metadata_length == 1 %}
        {% set is_discounted = True if metadata_length > 1 and exam.metadata[1].discountPrice else False %}
        <div class="col-12 u-hide u-show--small">
          <div id="price-card-{{ loop.index0 }}"
               class="p-card--radio--column {% if loop.index0 == exam_index %}is-selected{% endif %}"
               style="margin-left: 1rem;
                      margin-right: 1rem">
            <label class="p-radio--inline" label="{{ exam.name }}">
              <input id="price-radio" {% if is_disabled %}disabled{% endif %} class="p-radio__input" type="radio" name="exam-radio--small" value={{ loop.index0 }} {% if loop.index0 == exam_index %}checked{% endif %} {% if is_disabled %}disabled{% endif %} />
              <span class="p-radio__label">{{ exam.displayName }}</span>
            </label>
            <span>
              <p style="padding-left: 1rem; padding-right: 1rem;">{{ exam.metadata[0].value }}</p>
            </span>
            <span>
              <h5 id="exam-price" class="u-align--right" style="padding-right: 1rem">
                {% if is_disabled %}
                  Coming Soon!
                {% else %}
                  <span class="exam-price" id="exam-price-{{ exam.id }}">Price:
                    {% if is_discounted %}<s>{{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}</s>{% endif %}
                    {{ exam.metadata[1].currency }}
                    {% if is_discounted %}
                      {{ exam.metadata[1].discountPrice }}
                    {% else %}
                      {{ exam.metadata[1].originalPrice }}
                    {% endif %}
                  </span>
                {% endif %}
              </h5>
            </span>
          </div>
        </div>
      {% endfor %}
    </div>

    <section id="order-cart"
             class="p-strip--light is-shallow p-shop-cart p-shop-cart--cue">
      <div class="row u-sv3">
        <div class="col-6 p-text--small-caps">Your Order</div>
      </div>
      <div class="row">
        {% set exam = exams[exam_index] %}
        {% set is_discounted = True if exam.metadata|length > 1 and exam.metadata[1].discountPrice else False %}
        <div class="col-6" style="display: flex;">
          <p id="selected-product-name"
             class="order-name p-heading--2"
             style="margin-block: auto">{{ exam.displayName }}</p>
        </div>
        <div class="col-3 col-small-2" style="display: flex;">
          <p id="exam-price" class="p-heading--2" style="margin-block: auto;">
            <span id="total-price" class="exam-price">
              {% if is_discounted %}
                {{ exam.metadata[1].currency }}{{ exam.metadata[1].discountPrice }}
              {% else %}
                {{ exam.metadata[1].currency }}{{ exam.metadata[1].originalPrice }}
              {% endif %}
            </span>
          </p>
        </div>
        <div class="col-3 col-small-2 u-align--right" style="display: flex;">
          <button type="submit" class="p-button--positive" style="margin-block: auto;">Buy now</button>
        </div>
      </div>
    </section>
  </form>

  <script>
    window.stripePublishableKey = "{{ get_stripe_publishable_key }}";
    const exams = JSON.parse('{{ exams | tojson }}');

    const updateOrderTotal = (examIndex = 0) => {
      if (examIndex > 0) {
        return;
      }
      const exam = exams[examIndex];
      if (exam.metadata.length === 0) return;
      exams.forEach((e, eIndex) => {
        const priceCard = document.getElementById(`price-card-${eIndex}`);
        if (eIndex === examIndex) {
          priceCard.classList.add('is-selected')
        } else {
          priceCard.classList.remove('is-selected')
        }
      })
      const selectedProduct = document.getElementById('selected-product-name');
      const totalPrice = document.getElementById('total-price');
      selectedProduct.innerText = exam.displayName;
      const price = exam.metadata[1];
      totalPrice.innerText = `${price.currency}${price.discountPrice || price.originalPrice}`
    }

    const handleSubmit = () => {
      event.preventDefault();
      const index = document.querySelector('input[name="exam-radio"]:checked').value;
      const shopCheckoutData = {
        products: [{
          product: exams[index],
          quantity: 1,
        }, ],
        action: "purchase",
      };
      localStorage.setItem(
        "shop-checkout-data",
        JSON.stringify(shopCheckoutData)
      );
      location.href = "/account/checkout?title=Buy Canonical Credentials";
    };

    document.getElementsByName("exam-radio").forEach(function(e) {
      e.addEventListener("click", function() {
        updateOrderTotal(parseInt(e.value));
      });
    });

    document.getElementsByName("exam-radio--small").forEach(function(e) {
      e.addEventListener("click", function() {
        updateOrderTotal(parseInt(e.value));
      });
    });
  </script>
{% endblock %}