{% extends 'admin_base.html.twig' %}


{% block body %}
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">

            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h4>Les Qcms</h4>
                    </div>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ path("admin.main") }}">Tableau de board</a></li>
                        <li class="breadcrumb-item"><a href="{{ path("admin.courses.read.all",{ "token" :  cours.getGroupe().getSgToken() }) }}">{{ cours.getGroupe().getName() }}</a></li>
                        <li class="breadcrumb-item"><a href="{{ path("admin.qcms.read.all",{ "token" :  cours.getSgToken() }) }}">{{ cours.getTitle() }}</a></li>
                        {% if etape %}
                            <li class="breadcrumb-item"><a href="{{ path("admin.qcms.read.all",{ "token" :  etape.getSgToken() }) }}">{{ etape.getTitle() }}</a></li>
                        {% endif %}
                        <li class="breadcrumb-item active"><a href="javascript:;">Modifier Qcm</a></li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12 col-xxl-12 col-sm-12">
                    <div class="card">

                        <div class="card-body">
                            <form action="{{ path("admin.qcms.update",{"token" : Qcm.getSgToken()}) }}" method="post" enctype='multipart/form-data'>
                                <input type="hidden" name="_method" value="PUT" />

                                <div class="alert alert-custom alert-outline-danger fade show mb-5" role="alert" style=" display: {{ msg ? "block" : "none" }}">
                                    <div class="alert-icon"><i class="flaticon-warning"></i></div>
                                    <div class="alert-text">{{msg}} </div>
                                    <div class="alert-close">
                                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true"><i class="ki ki-close"></i></span>
                                        </button>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-8 col-md-12 col-sm-12">
                                        <div class="form-group">
                                            <label class="form-label">Titre </label>
                                            <input required type="text" placeholder="Titre" value="{{ Qcm? Qcm.getTitle() : "" }}" name="title" class="form-control">
                                            <input type="hidden"  value="{{ cours.getSgToken()}}" name="token" class="form-control">
                                            {% if errors %}
                                                {% for e in errors %}
                                                    {% if (e['propertyPath'] == "title")%}
                                                        <span class="form-text text-danger">{{ e['message'] }}</span>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <div class="form-check">
                                                <input type="HIDDEN" name="active" id="active" value={{ Qcm.isEnabled() ? "1" : "0" }} >
                                                <input class="form-check-input" onclick="f()"  type="checkbox" {{ Qcm.isEnabled() ? "checked" :"" }}>
                                                <label class="form-check-label">
                                                    Active
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="col-lg-4 ">
                                        <div class="form-group">
                                            <div class="mail-list mt-4 ">
                                                <input type="hidden" name="nbr" value="{{ Qcm.getQuestions()|length }}" id="nbr">
                                                <a class="btn btn-info" onclick="addQuestion()" style="cursor: pointer"><i class="fa fa-question-circle-o font-18 align-middle mr-2"></i>Ajouter une Question</a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 ">

                                    </div>
                                    <div class="col-lg-4 ">
                                    </div>
                                </div>
                                <div  id="questions">
                                    {% set nbr = 1 %}
                                    {% for Question in Qcm.getQuestions() %}
                                        <input type="hidden" name="{{ "exists"~nbr }}" value="{{ Question.getSgToken() }}">
                                        <div id="{{ "qstn"~nbr }}"  class="row">
                                            <div class="col-lg-2"  >
                                                <a style="float: right;margin-top: 40px" title="Supprimer" href="#" onclick="removeQuestion({{ nbr|json_encode }})" class="btn btn-sm btn-danger"><i class="la la-trash-o"></i></a>

                                            </div>
                                            <div class="col-lg-10">
                                                <div class="row" style=" padding: 5px;margin: 5px">

                                                    <div class="col-lg-9 ">
                                                        <div class="form-group">
                                                            <label class="form-label" >Question <input type="number" min="1" name="{{ "num"~nbr }}" value="{{ Question.getNum()}}" style="width: 40px"> : </label>

                                                            <textarea placeholder="Question..?" name="{{ "value"~nbr }}" id="{{ "value"~nbr }}" class="form-control">{{ Question.getValue() }}</textarea>

                                                        </div>
                                                    </div>
                                                    <div class="col-lg-3 ">
                                                        <div class="form-group">
                                                            <label class="form-label"> Nbr de Réponse </label>

                                                            <select onchange="addReponse(this,{{ nbr|json_encode }})" class="form-control">
                                                                <option {{ Question.getReponses()|length == 2 ? "selected" :""}} value="2">2</option>
                                                                <option {{ Question.getReponses()|length == 3 ? "selected" :""}} value="3">3</option>
                                                                <option {{ Question.getReponses()|length == 4 ? "selected" :""}} VALUE="4">4</option>
                                                                <option {{ Question.getReponses()|length == 5 ? "selected" :""}} VALUE="5">5</option>
                                                                <option {{ Question.getReponses()|length == 6 ? "selected" :""}} VALUE="6">6</option>
                                                                <option {{ Question.getReponses()|length == 7 ? "selected" :""}} value="7">7</option>
                                                                <option {{ Question.getReponses()|length == 8 ? "selected" :""}} value="8">8</option>
                                                            </select>


                                                        </div>
                                                    </div>
                                                </div>
                                                <div  style="border: #ff8f16 1px solid; margin: 3%; padding: 20px ">
                                                    {% set i =1 %}
                                                    {% for Reponse in Question.getReponses() %}
                                                        <input type="hidden" name="{{ "exists_R"~i~"_"~nbr }}" value="{{ Reponse.getSgToken() }}">

                                                        <div class="row" id="{{ "R"~i~"_"~nbr }}" >

                                                            <div class="col-lg-9 ">
                                                                <div class="form-group">
                                                                    <input type="text" value="{{ Reponse.getValue() }}" placeholder="Reponse 1" name="{{ "valueN"~i~"_"~nbr }}" id="{{ "valueN"~i~"_"~nbr }}" class="form-control">

                                                                </div>
                                                            </div>
                                                            <div class="col-lg-3 ">
                                                                <div class="form-group">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" name="{{ "is_true"~nbr~"[]" }}" value="0" style="display: none"  type="checkbox"  checked>

                                                                        <input class="form-check-input" name="{{ "is_true"~nbr~"[]" }}" {{ Reponse.getIsTrue() ? "checked" :""}} value="{{ "is_true"~i~"_"~nbr }}"  type="checkbox" >
                                                                        <label class="form-check-label">
                                                                            Vrai
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        {% set i=i+1 %}
                                                    {% endfor %}
                                                    {% set l = Question.getReponses()|length+1%}
                                                    {% for i in range(l,8) %}
                                                        <div class="row" style="display: none" id="{{ "R"~i~"_"~nbr }}" >
                                                            <input type="hidden" name="{{ "exists_R"~i~"_"~nbr }}" value="">
                                                            <div class="col-lg-9 ">
                                                                <div class="form-group">
                                                                    <input type="text"  placeholder="{{ "Reponse "~i }}" name="{{ "valueN"~i~"_"~nbr }}" id="{{ "valueN"~i~"_"~nbr }}" class="form-control">

                                                                </div>
                                                            </div>
                                                            <div class="col-lg-3 ">
                                                                <div class="form-group">
                                                                    <div class="form-check">

                                                                        <input class="form-check-input" name="{{ "is_true"~nbr~"[]" }}" value="{{ "is_true"~i~"_"~nbr }}"  type="checkbox" >
                                                                        <label class="form-check-label">
                                                                            Vrai
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    {% endfor %}



                                                </div>
                                            </div>
                                        </div>
                                        {% set nbr=nbr+1 %}
                                    {% endfor %}
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12">
                                    <button type="submit" class="btn btn-primary">Enregistrer</button>
                                    <button type="reset" class="btn btn-light">Annuler</button>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        function addQuestion() {
            var nbr = parseInt(document.getElementById("nbr").value);
            nbr=nbr+1;
            $.ajax({
                type: "POST",
                url: "{{ path("admin.qcms.add.questions") }}",
                data: {
                    nbr: nbr,
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                },
                success: function (Response) {
                    $("#questions").append(Response);
                    document.getElementById("nbr").value=nbr;
                }
            });
        }


        function addReponse(c,nbr)
        {

            var limit=parseInt(c.value);
            for (var i=1;i<=8;i++){
                if (i<=limit){
                    document.getElementById("R"+i+"_"+nbr).style.display="flex";
                }else{
                    document.getElementById("R"+i+"_"+nbr).style.display="none";
                    document.getElementById("valueN"+i+"_"+nbr).value="";
                }
            }
        }
        function removeQuestion(nbr){
            document.getElementById("qstn"+nbr).style.display="none";

            document.getElementById("value"+nbr).value="";
        }
    </script>
{% endblock %}