{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block body %}
  {% block content %}
    <header>
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4">Language questionnaires</h1>
          <p class="lead">Modifying language questionnaire {{ quest_id }} for participant {{ ppt_id }}</p>
        </div>
      </div>
      <hr class="my-4">
    </header>
    <body>
      <form name="questionnaire-input"
            class="form-inline needs-validation"
            method="post"
            onsubmit="return validateForm()"
            novalidate>
        <div class="row"></div>
        <div class="col">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="submit" class="btn btn-warning">
              <i class="fa fa-pen"></i>&nbsp;&nbsp;Submit
            </button>
          </div>
        </div>
        <div class="card col-6">
          <h5 class="card-header">Language information</h5>
          <div class="card-body">
            <div class="form-check form-check-inline">
              <input class="form-check-input"
                     type="checkbox"
                     name="inputIsEstimated"
                     id="inputIsEstimated"
                     {% if data['isestimated']=='1' %}checked{% endif %}>
              <label class="form-check-label" for="inputIsEstimated">Language profile is an estimation</label>
            </div>
            <div class="row">
              <div class="col-8">
                <b>Language</b>
              </div>
              <div class="col-3">
                <b>Exposure (%)</b>
              </div>
            </div>
            <div class="row">
              <div class="col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="lang2addon">L1</span>
                  </div>
                  <select class="form-select" name="inputLang1" required>
                    <option selected value="0">-- Select one --</option>
                    {% for k, v in data_dict["language_lang1"].items() %}
                      {% if k!="0" %}
                        <option if value="{{ k }}" {% if data["lang1"]==k %}selected{% endif %}>{{ v }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-4">
                <input type="number"
                       name="inputLang1Exp"
                       class="form-control"
                       min="0"
                       max="100"
                       value="{{ data['lang1_exp'] }}"
                       required>
              </div>
            </div>
            <div class="row">
              <div class="col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="lang2addon">L2</span>
                  </div>
                  <select class="form-select" name="inputLang2">
                    <option selected value="0">-- Select one --</option>
                    {% for k, v in data_dict["language_lang1"].items() %}
                      {% if k!="0" %}
                        <option value="{{ k }}" {% if data["lang2"]==k %}selected{% endif %}>{{ v }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-4">
                <input type="number"
                       name="inputLang2Exp"
                       class="form-control"
                       min="0"
                       max="100"
                       value="{{ data['lang2_exp'] }}">
              </div>
            </div>
            <div class="row">
              <div class="col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="lang2addon">L3</span>
                  </div>
                  <select class="form-select" name="inputLang3">
                    <option selected value="0">-- Select one --</option>
                    {% for k, v in data_dict["language_lang1"].items() %}
                      {% if k!="0" %}
                        <option value="{{ k }}" {% if data["lang3"]==k %}selected{% endif %}>{{ v }}</option>
                      {% endif %}
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="col-4">
                <input type="number"
                       name="inputLang3Exp"
                       class="form-control"
                       min="0"
                       max="100"
                       value="{{ data['lang3_exp'] }}">
              </div>
            </div>
            <div class="row">
              <div class="col-8">
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="lang2addon">L4</span>
                  </div>
                  <select class="form-select" name="inputLang4">
                    <option selected value="0">-- Select one --</option>
                    {% for k, v in data_dict["language_lang1"].items() %}
                      {% if k!="0" %}
                        <option if value="{{ k }}" {% if data["lang4"]==k %}selected{% endif %}>{{ v }}</option>
                        {%
                        endif %}
                      {% endfor %}
                    </select>
                  </div>
                </div>
                <div class="col-4">
                  <input type="number"
                         name="inputLang4Exp"
                         class="form-control"
                         min="0"
                         max="100"
                         value="{{ data['lang4_exp'] }}">
                </div>
              </div>
              <label for="inputComments" class="form-label">Comments</label>
              <textarea class="form-control" name="inputComments" rows="3"></textarea>
            </div>
          </div>
        </form>
        <script>
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
      'use strict';
      window.addEventListener('load', function () {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function (form) {
          form.addEventListener('submit', function (event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
            }
            form.classList.add('was-validated');
          }, false);
        });
      }, false);
    })();
        </script>
        <script>
    function validateForm() {
      let l1 = document.forms["questionnaire-input"]["inputLang1"].value;
      let l2 = document.forms["questionnaire-input"]["inputLang2"].value;
      let l3 = document.forms["questionnaire-input"]["inputLang3"].value;
      let l4 = document.forms["questionnaire-input"]["inputLang4"].value;
      let e1 = parseFloat(document.forms["questionnaire-input"]["inputLang1Exp"].value);
      let e2 = parseFloat(document.forms["questionnaire-input"]["inputLang2Exp"].value);
      let e3 = parseFloat(document.forms["questionnaire-input"]["inputLang3Exp"].value);
      let e4 = parseFloat(document.forms["questionnaire-input"]["inputLang4Exp"].value);
      let array = [l1, l2, l3, l4]
      let duplicates = array.filter((item, index) => array.indexOf(item) !== index);
      let duplicates_filtered = duplicates.filter(i => i !== "0");

      if (duplicates_filtered.length !== 0) {
        alert("At least one language is repeated.");
        return false;
      }
      if ((e1 + e2 + e3 + e4) != 100) {
        alert("Percentages must add up to 100%.");
        return false;
      }

      if (l1 == "0" & e1 != 0) {
        alert("Language 1 is not selected but exposure is not 0%.");
        return false;
      }
      if (l2 == "0" & e2 != 0) {
        alert("Language 2 is not selected but exposure is not 0%.");
        return false;
      }
      if (l3 == "0" & e3 != 0) {
        alert("Language 3 is not selected but exposure is not 0%.");
        return false;
      }
      if (l4 == "0" & e4 != 0) {
        alert("Language 4 is selected but exposure is 0%.");
      }
      if (l1 != "0" & e1 == 0) {
        alert("Language 1 is selected but exposure is 0%.");
        return false;
      }
      if (l2 != "0" & e2 == 0) {
        alert("Language 2 is selected but exposure is 0%.");
        return false;
      }
      if (l3 != "0" & e3 == 0) {
        alert("Language 3 is selected but exposure is 0%.");
        return false;
      }
      if (l4 != "0" & e4 == 0) {
        alert("Language 4 is selected but exposure is 0%.");
        return false;
      }


    }
        </script>
      </body>
    {% endblock content %}
  {% endblock body %}
