{% extends 'base.html' %}
<!-- Add this for inheritance -->
{% load replace %}
{% load choice_value %}
{% load i18n %}
{% load static %}

{% block content %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                <h2 id="heading">Fill out the forms</h2>
                <p>Fill all form field to go to next step</p>
                <form id="msform" method="POST">
                    {% csrf_token %}
                    <!-- progressbar -->
                    <ul id="progressbar">
                        {% for topic in questionnaire.topics.all|dictsort:"order" %}
                        <li class="{% if forloop.first %} active {% endif %}"><strong><i class="fas fa-dot-circle"></i>{{ topic.name }}</strong></li>
                        {% endfor %}
                    </ul>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <br> <!-- fieldsets -->
                    {% for topic in questionnaire.topics.all|dictsort:"order" %}
                        <fieldset>
                            <div class="form-card">
                                <div class="row">
                                    <div class="col-7">
                                        <h2 class="fs-title">{{topic.name}}:</h2>
                                        <p>{{topic.description}}</p>
                                    </div>
                                    <div class="col-5">
                                        <h2 class="steps text-right">Step {{forloop.counter}} - {{ questionnaire.topics.all.count }}</h2>
                                    </div>
                                </div>
                                {% for question in topic.questions.all|dictsort:"order" %}
                                    <br /><br />
                                    <label class="fieldlabels" for="{{question.id}}">{{ question.description.strip }}</label><br />

                                    {% if question.type == 'SINGLE' %}
                                        {% for choice in question.choices_list %}
                                           <input type="radio" id="{{question.id}}_{{ forloop.counter }}" name="{{question.id}}" value="{{choice.strip|choice_value}}" required="required">
                                           <label for="{{question.id}}_{{forloop.counter}}">{{choice.strip|replace:"/(^=|=.*)/" }}</label>

                                            {% if choice.strip|slice:"0:1" == "=" %}
                                                <input type="text" name="{{question.id}}" id="{{question.id}}_{{ forloop.counter }}_anders" style="display:none" disabled="disabled">
                                                <script>
                                                    $(document).ready(function(){
                                                        $('input[type="radio"][name="{{question.id}}"]').on('change',(e) => {
                                                            let choice = $(e.target)
                                                            let andersTXT = $('input[type="text"][name="{{question.id}}"]')

                                                            if (choice.val().slice(0,1) == '=')  {
                                                                // Show
                                                                andersTXT.show()
                                                                andersTXT.prop('required',true)
                                                                andersTXT.prop('disabled',false)
                                                            } else {
                                                                // Hide
                                                                andersTXT.hide()
                                                                andersTXT.prop('required',false)
                                                                andersTXT.prop('disabled',true)
                                                            }
                                                        })
                                                    })
                                                </script>
                                            {%endif%}
                                        {% endfor %}
                                    {%elif question.type == 'NUMBER' %}
                                        <input type="{{question.type|lower}}" id="{{question.id}}" name="{{question.id}}" value="" required="required">
                                        {%elif question.type == 'DATE' %}
                                        <input type="{{question.type|lower}}" id="{{question.id}}" name="{{question.id}}" value="" required="required">
                                    {%elif question.type == 'TEXT' %}
                                        <textarea rows="1" id="{{question.id}}" name="{{question.id}}" required="required"></textarea>
                                    {% endif %}

                                {% endfor %}
                            </div>
                            {% if forloop.counter > 1 %}
                            <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                            {% endif %}
                            {% if forloop.last %}
                            <input type="submit" name="next" class="next action-button" value="Save" />
                            {%else %}
                            <input type="button" name="next" class="next action-button" value="Next" />

                            {%endif%}
                        </fieldset>
                    {% endfor %}
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    #grad1 {
        background-color: #9C27B0;
        background-image: linear-gradient(120deg, #FF4081, #81D4FA);
    }

    #msform {
        text-align: center;
        position: relative;
        margin-top: 20px
    }

    #msform fieldset .form-card {
        background: white;
        border: 0 none;
        border-radius: 0px;
        box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
        padding: 20px 40px 30px 40px;
        box-sizing: border-box;
        width: 94%;
        margin: 0 3% 20px 3%;
        position: relative
    }

    #msform fieldset {
        background: white;
        border: 0 none;
        border-radius: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding-bottom: 20px;
        position: relative
    }

    #msform fieldset:not(:first-of-type) {
        display: none
    }

    #msform fieldset .form-card {
        text-align: left;
        color: #000000;
    }

    #msform .action-button {
        width: 100px;
        background: skyblue;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px
    }

    #msform .action-button:hover,
    #msform .action-button:focus {
        box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
    }

    #msform .action-button-previous {
        width: 100px;
        background: #616161;
        font-weight: bold;
        color: white;
        border: 0 none;
        border-radius: 0px;
        cursor: pointer;
        padding: 10px 5px;
        margin: 10px 5px
    }

    #msform .action-button-previous:hover,
    #msform .action-button-previous:focus {
        box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
    }

    select.list-dt {
        border: none;
        outline: 0;
        border-bottom: 1px solid #ccc;
        padding: 2px 5px 3px 5px;
        margin: 2px
    }

    select.list-dt:focus {
        border-bottom: 2px solid skyblue
    }

    .card {
        z-index: 0;
        border: none;
        border-radius: 0.5rem;
        position: relative
    }

    .fs-title {
        font-size: 25px;
        color: #2C3E50;
        margin-bottom: 10px;
        font-weight: bold;
        text-align: left
    }

    #progressbar {
        margin-bottom: 30px;
        overflow: hidden;
        color: lightgrey
    }

    #progressbar .active {
        color: #000000
    }

    #progressbar li {
        list-style-type: none;
        font-size: 12px;
        width: {{menu_width}}%;
        float: left;
        position: relative
    }

    #progressbar li:before {
        width: 50px;
        height: 50px;
        line-height: 45px;
        display: block;
        font-size: 18px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px
    }

    #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: lightgray;
        position: absolute;
        left: 0;
        top: 25px;
        z-index: -1
    }

    #progressbar li.active:before,
    #progressbar li.active:after {
        background: skyblue
    }

    .radio-group {
        position: relative;
        margin-bottom: 25px
    }

    .radio {
        display: inline-block;
        width: 204;
        height: 104;
        border-radius: 0;
        background: lightblue;
        box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        cursor: pointer;
        margin: 8px 2px
    }

    .radio:hover {
        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3)
    }

    .radio.selected {
        box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1)
    }

    .fit-image {
        width: 100%;
        object-fit: cover
    }

    .error {
        /* border: solid 1px red; */
        color:red;
        font-weight: bold;
    }
</style>

<script>
$(document).ready(function(){

    var current_fs, next_fs, previous_fs; //fieldsets
    var opacity;
    var current = 1;
    var steps = $("fieldset").length;

    setProgressBar(current);

    $(".next").click(function(){

        current_fs = $(this).parent();
        next_fs = $(this).parent().next();

        let errors = false

        current_fs.find('input,textarea').each((counter, element) => {
            if (element.name && !element.disabled) {
                if (!element.checkValidity()) {
                jQuery('label[for=' + element.name + ']').addClass('error')
                errors = true;
                } else {
                    jQuery('label[for=' + element.name + ']').removeClass('error')
                }
            }
        });
        if (errors) {
            return
        }

        //Add Class Active
        $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

        //show the next fieldset
        next_fs.show();
        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
        step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        current_fs.css({
        'display': 'none',
        'position': 'relative'
        });
        next_fs.css({'opacity': opacity});
        },
        duration: 500
        });
        setProgressBar(++current);
    });

    $(".previous").click(function(){

        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();

        //Remove class active
        $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

        //show the previous fieldset
        previous_fs.show();

        //hide the current fieldset with style
        current_fs.animate({opacity: 0}, {
        step: function(now) {
        // for making fielset appear animation
        opacity = 1 - now;

        current_fs.css({
        'display': 'none',
        'position': 'relative'
        });
        previous_fs.css({'opacity': opacity});
        },
        duration: 500
        });
        setProgressBar(--current);
    });

    function setProgressBar(curStep){
        var percent = parseFloat(100 / steps) * curStep;
        percent = percent.toFixed();
        $(".progress-bar")
        .css("width",percent+"%")
    }

    // $(".submit").click(function(){
    //     return false;
    // })

});
</script>
{% endblock %}