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

{% block title %}Canonical Credentials -- Your exams{% 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 meta_copydoc %}
  https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
{% endblock
meta_copydoc %}

{% block content %}
  <div class="p-strip">

    <div class="row">

      <h3>How many exam attempts do you need?</h3>

    </div>

    <div class="row">

      <div class="col-6">

        <form onsubmit="handleSubmit()" method="post">

          <input type="number"
                 id="key_quantity"
                 name="key_quantity"
                 min="1"
                 value="1"
                 oninput="updateOrderSummary()" />

        </form>

      </div>

    </div>

    <div class="row">

      <p>
        Each exam attempt allows you to register for one or more of the
        following certifications:

        <ul>

          <li>CUE.01 Linux</li>

          <li>CUE.02 Desktop</li>

          <li>CUE.03 Server</li>

        </ul>

      </p>

    </div>
  </div>
  <section class="p-strip--light is-shallow p-shop-cart">

    <div class="row u-sv3">

      <div class="col-6 p-heading--2">Your Order</div>

    </div>

    <div class="row u-sv3">

      <div class="col-6" id="order_quantity">0 x Exam attempt key</div>

      <div class="col-3" id="order_price">$0.00</div>

      <div class="col-3">

        <button type="submit"
                class="p-button--positive"
                id="form-submit"
                onclick="handleSubmit()">Buy Now</button>

      </div>

    </div>
  </section>

  <script>
    const cueKeyProduct = JSON.parse('{{cue_key_product | tojson }}');

    function handleSubmit() {
      const inputQuantity = document.getElementById("key_quantity").value;
      const shopCheckoutData = {
        products: [{
          product: cueKeyProduct,
          quantity: inputQuantity,
        }, ],
        coupon: {
          "origin": "Stripe",
          "IDs": ["81IlzzhQ"]
        },
        action: "purchase",
      };
      localStorage.setItem(
        "shop-checkout-data",
        JSON.stringify(shopCheckoutData)
      )
      location.href = "/account/checkout";
    };

    function updateOrderSummary() {
      const inputQuantity = document.getElementById("key_quantity").value;
      var productPrice = cueKeyProduct["price"]["value"] / 100 * inputQuantity;
      const formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: cueKeyProduct["price"]["currency"],
      });
      productPrice = formatter.format(productPrice);
      document.getElementById("order_price").innerHTML = productPrice;
      document.getElementById("order_quantity").innerHTML = inputQuantity + " x Exam attempt key";

      if (inputQuantity < 1) {
        document.getElementById("form-submit").disabled = true;
      } else {
        document.getElementById("form-submit").disabled = false;
      }
    };

    document.addEventListener("DOMContentLoaded", () => {
      updateOrderSummary();
    });
  </script>
{% endblock content %}