{% extends 'base.html' %}

{% block header %}
{% endblock %}

{% block content %}
<header>

</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="questionnaireInput" name="questionnaireInput" 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" style="float: left; margin: 0.5em;"><i
                        class="fa fa-pen"></i>&nbsp&nbspSubmit</button>
            </div>
        </div>
        </div>
        <div class="card" style="width: 50%; float: left; margin-right: 2em;">
            <h5 class="card-header">Language information</h5>
            <div class="card-body">
                <div class="row" style="margin-bottom: 1em;">
                    <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'] }}" style="text-align: right;" 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 if 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'] }}" style="text-align: right;">
                    </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 if 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'] }}" style="text-align: right;">
                    </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'] }}" style="text-align: right;">
                    </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["questionnaireInput"]["inputLang1"].value;
            let l2 = document.forms["questionnaireInput"]["inputLang2"].value;
            let l3 = document.forms["questionnaireInput"]["inputLang3"].value;
            let l4 = document.forms["questionnaireInput"]["inputLang4"].value;
            let e1 = parseFloat(document.forms["questionnaireInput"]["inputLang1Exp"].value);
            let e2 = parseFloat(document.forms["questionnaireInput"]["inputLang2Exp"].value);
            let e3 = parseFloat(document.forms["questionnaireInput"]["inputLang3Exp"].value);
            let e4 = parseFloat(document.forms["questionnaireInput"]["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 %}