{% extends "_base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
<header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">
        Language questionnaires&nbsp;&nbsp;<i class="fa fa-file-plus"></i>
      </h1>
      <p class="lead">Adding a new language questionnaire for participant {{ ppt_id }}</p>
    </div>
  </div>
  <hr class="my-4">
</header>

<body>
  <div class="div-center">
    <form name="questionnaire-input" class="form-inline needs-validation" method="post" onsubmit="return validateForm()"
      novalidate>
      <div class="row">
        <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&nbspSubmit
            </button>
          </div>
        </div>
      </div>
      <div class="card">
        <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">
            <label class="form-check-label" for="inputEstimated">Language profile is an estimation</label>
          </div>
          <br>
          <br>
          <div class="row">
            <div class="col-8">
              <b>Language</b>
            </div>
            <div class="col-4">
              <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="lang1addon">L1</span>
                </div>
                <select class="form-select" name="inputLang1" aria-describedby="lang1addon" required>
                  <option selected value="0">-- Select one --</option>
                  {% for k, v in data_dict["language_lang1"].items() %}
                  {% if k!="0" %}<option value="{{ k }}">{{ v }}</option>{% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-4">
              <input type="number" name="inputLang1Exp" class="form-control" min="0" max="100" value="0" 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 }}">{{ v }}</option>{% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-4">
              <input type="number" name="inputLang2Exp" id="inputLang2Exp" class="form-control" min="0" max="100"
                value="0">
            </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 }}">{{ v }}</option>{% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-4">
              <input type="number" name="inputLang3Exp" class="form-control" min="0" max="100" value="0">
            </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 value="{{ k }}">{{ v }}</option>{% endif %}
                  {% endfor %}
                </select>
              </div>
            </div>
            <div class="col-4">
              <input type="number" name="inputLang4Exp" class="form-control" min="0" max="100" value="0">
            </div>
          </div>
          <label for="inputComments" class="form-label">Comments</label>
          <input type="text" class="form-control" name="inputComments" />
        </div>
      </div>
    </form>
    <script>
      (function () {
        'use strict';
        window.addEventListener('load', function () {
          var forms = document.getElementsByClassName('needs-validation');
          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>
  </div>
</body>
{% endblock content %}