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

{% block title %}Canonical Credentials -- Schedule an exam{% 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 %}

  <section class="p-strip is-paper">
    {% if error or maintenance_error %}
      <div class="row">
        <div class="p-notification--negative">
          <div class="p-notification__content">
            <h5 class="p-notification__title">Error</h5>
            <p class="p-notification__message" id="error-message"></p>
          </div>
        </div>
      </div>
    {% endif %}
    <div class="row">
      <div class="col-6">
        <h1 class="p-heading--2">
          <strong>Schedule your exam</strong>
        </h1>
        <a href="/credentials/your-exams">View your scheduled exams here</a>
      </div>
      <div class="col-6">
        <form method="post">
          <input type="number"
                 name="contract_item_id"
                 value="{{ contract_item_id }}"
                 hidden />
          <label class="p-heading--5" for="exam-name">Select your exam</label>
          <select class="spaced-bottom--smaller is-paper--input"
                  id="exam-name"
                  name="name"
                  required>
            <option value="linux-essentials">CUE.01 Linux</option>
          </select>
          <label class="p-heading--5" for="exam-timezone">Select your timezone</label>
          <select class="spaced-bottom--smaller is-paper--input"
                  id="exam-timezone"
                  name="timezone"
                  required></select>
          <label class="p-heading--5 u-no-margin" for="exam-date">Select your preferred day</label>
          <p>You can schedule your exam to begin {{ time_delay }} from now or later.</p>
          <input class="spaced-bottom--smaller is-paper--input"
                 type="date"
                 id="exam-date"
                 name="date"
                 value="{{ date }}"
                 max="{{ max_date }}"
                 required />
          <label class="p-heading--5 u-no-margin" for="exam-time">Select your preferred time</label>
          <p>
            Your exam will take up to one hour to complete. Please make sure to plan accordingly before and after to
            ensure the best exam experience.
          </p>
          <input class="spaced-bottom--smaller is-paper--input"
                 type="time"
                 id="exam-time"
                 name="time"
                 required />
          {% if uuid %}<input type="text" id="exam-uuid" name="uuid" value="{{ uuid }}" hidden />{% endif %}
          <div class="u-align--right">
            <button class="p-button--positive u-align--right" type="submit" name="submit">Schedule Exam</button>
          </div>
        </form>
      </div>
    </div>
  </section>

  {# djlint:off #}
  <script>
    {% if timezone and timezone != "" %}
    const timezone = "{{ timezone }}";
    {% else %}
    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    {% endif %}

    const error = "{{ error }}";
    const maintenance_error = "{{ maintenance_error }}";
    const maintenance_start = "{{ maintenance_start }}";
    const maintenance_end = "{{ maintenance_end }}";

    const formatDateTime = (dateTime, locale = 'default') => {
      const date = new Date(dateTime);
      const options = {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: true,
        timeZoneName: 'short',
      };

      let formattedDate = date.toLocaleString(locale, { ...options, timeZoneName: undefined });
      formattedDate = formattedDate.replace(/am|pm/, match => match.toUpperCase());
      const timeZone = date.toLocaleString(locale, { timeZoneName: 'short' }).split(' ').pop();
      return `${formattedDate} (${timeZone})`;
    }

    const setError = () => {
    if (maintenance_error === 'True') {
      const elem = document.getElementById("error-message");
      const startFormatted = formatDateTime(maintenance_start, navigator.language);
      const endFormatted = formatDateTime(maintenance_end, navigator.language);
      if (elem) {
        elem.innerHTML = `Scheduled time should be outside of the maintenance window. Please schedule the exam before <strong>${startFormatted}</strong> or after <strong>${endFormatted}</strong>`;
      }
    }
    else if (error) {
      const elem = document.getElementById("error-message");
      elem.innerHTML = error;
    }
    }

    const setDateTime = () => {
      const dateInput = document.querySelector("#exam-date");
      const timeInput = document.querySelector("#exam-time");
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const dateString = `${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
      dateInput.min = dateString;
      dateInput.value = dateString;
      timeInput.value = now.toTimeString().split(" ")[0].slice(0, 5);
    }

    const timezoneInput = document.querySelector("#exam-timezone");
    const allTimezones = Intl.supportedValuesOf('timeZone');
    allTimezones.map((tz) => {
      optionElement = document.createElement("option");
      optionElement.value = tz;
      optionElement.innerText = tz;
      if (tz == timezone) {
        optionElement.setAttribute("selected", true);
      }
      timezoneInput.appendChild(optionElement);
    })

    document.addEventListener('DOMContentLoaded', setDateTime);
    document.addEventListener('DOMContentLoaded', setError);
</script>
  {# djlint:on #}

{% endblock content %}