{% extends "base.html" %}
{% block header %}
{% endblock header %}
{% block content %}
  <header>
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">Language questionnaires</h1>
        <p class="lead">Adding a new language questionnaire 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 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>
          <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 %}
