{% extends 'form/base.html.twig' %}

{% block title %}Formulaire{% endblock %}

{% block body %}

    <div class="app-content content" style="background-color: white !important;">
        <div class="content-wrapper">
            <div class="content-body"><!-- Dashboard Analytics Start -->
                <section id="form-360manager">
                    <form method="post">
                        <input type="hidden" name="test" value="test">
                        <div class="container">
                        <div class="tab-content">
                            {% set i = 0 %}
                            {% for category in categories %}
                                <div class="row tab-pane {{ category.id == 1 ? 'active' : '' }}" id="cat{{ category.id }}" role="tabpanel">
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                        <div class="card border">
                                            <div class="card-content">
                                                <div class="row">
                                                    <div class="col-3 col-sm-3 col-md-3 col-lg-3 col-xl-3 d-flex align-items-center justify-content-center">
                                                        <img alt="360 Manager" src="/img/logo_360.png" class="h-75"/>
                                                    </div>
                                                    <div class="col-9 col-sm-9 col-md-9 col-lg-9 col-xl-9 d-flex align-items-center">
                                                        <h3 style="color: {{ category.color }};" class="font-weight-bold">Chapitre {{ category.name }}</h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                                        <div>
                                            {% for question in category.formQuestions %}
                                                <input type="hidden" name="answers[{{ i }}][id_question]" value="{{ question.id }}">
                                                <input type="hidden" name="answers[{{ i }}][id_category]" value="{{ category.id }}">
                                                <input type="hidden" id="question{{ question.id }}" name="answers[{{ i }}][note]" value="0">

                                                <h6 class="d-flex justify-content-center">{{ question.question }}</h6>
                                                <br>
                                                <div class="row">
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(10, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">A</div>
                                                    </div>
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(8, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">B</div>
                                                    </div>
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(6, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">C</div>
                                                    </div>
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(4, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">D</div>
                                                    </div>
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(2, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">E</div>
                                                    </div>
                                                    <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 d-flex align-items-center justify-content-center">
                                                        <div onclick="changeNote(0, {{ question.id }}, this)" class="answer{{ question.id }} font-weight-bold rounded-circle p-1 height-50 width-50 d-flex justify-content-center align-items-center cursor-pointer" style="color: #475F7B; border: 2px solid #475F7B;">F</div>
                                                    </div>
                                                </div>
                                                <br>
                                                <br>
                                            {% set i = i + 1 %}
                                            {% endfor %}
                                        </div>
                                    </div>

                                </div>
                            {% endfor %}
                        </div>

                            <ul class=" justify-content-center mt-2 nav nav-pills">
                                <li class=" nav-item"><a class=" nav-link active" href="#cat1" data-toggle="pill">1</a></li>
                                <li class=" nav-item"><a class=" nav-link" href="#cat2" data-toggle="pill">2</a></li>
                                <li class=" nav-item"><a class=" nav-link" href="#cat3" data-toggle="pill">3</a></li>
                                <li class=" nav-item"><a class=" nav-link" href="#cat4" data-toggle="pill">4</a></li>
                                <li class=" nav-item"><a class=" nav-link" href="#cat5" data-toggle="pill">5</a></li>
                                <li class=" nav-item"><a class=" nav-link" href="#cat6" data-toggle="pill">6</a></li>
                            </ul>
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-primary">Envoyer</button>
                            </div>
                    </div>
                    </form>
                </section>
            </div>
        </div>
    </div>
    <script src="/js/jquery-3.2.1.js"></script>
    <script>
        function changeNote(note, id_question, id_note) {
            $('#question' + id_question).val(note);
            let elements = document.getElementsByClassName('answer' + id_question);
            for (let i = 0; i < elements.length; i++) {
                elements[i].style.backgroundColor = "#ffffff";
                elements[i].style.color = "#475F7B";
            }
            id_note.style.backgroundColor = "#475F7B";
            id_note.style.color = "#ffffff";
        }
    </script>
{% endblock %}