{% extends 'Default/base.html.twig' %}
{#{% extends 'AdminCandidat/ElearningSession/Quiz/base.html.twig' %}#}
{% block title %} Quiz  Formation E-learning {% endblock %}
{% block breadcrumb1 %} Quiz Formation E-learning {% endblock %}
{% block breadcrumb2 %} Quiz {% endblock %}
{% block stylesheet %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/total-task/css/candidat-quiz.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/total-task/css/fontawesome-free-5.11.2-web/css/all.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <!--Commencez la quiz diapo 1-->
            <div class="diapo1">
                <div class="container container-diapo1">
                    <div class="row">
                        <div class="col-md-12 center">
                            <div class="" style="margin-top: 15px;">
                                <h2 class="h2-nameSession">Session
                                    <spam class="nameSession" data-id="{{ sessionCurrent.id }}">
                                        : {{ sessionCurrent.name }}</spam>
                                </h2>
                                <h2 class="h2-infoSession">Information du formation</h2>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="" style="margin-top: 15px;">
                    <div class="row">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <h4 style="margin-left: 15px; ">
                                <i class="fa fa-briefcase colortmp"></i> Formation:
                                <span class="pull-right nameInfoFormation"> {{ infoFormation.name }}</span>
                            </h4>
                            <h4 style="margin-left: 15px;">
                                <i class="fa fa-clock-o colortmp"></i> Durée:
                                <span class="pull-right timeInfoFormation">{{ infoFormation.timer }} minutes</span>
                            </h4>
                            <h4 style="margin-left: 15px;"><i class="fa fa-question-circle colortmp"></i> Questions:
                                <span class="pull-right CountQuestion"> {{ nbrQuestion }}</span>
                            </h4>
                        </div>
                        <div class="col-md-4"></div>
                    </div>

                </div>

                <div class="row" style="margin-top: 25px">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="center">
                            <p class="p-text-diapo1">
                                En connaissez-vous suffisamment sur les études de marché ou avez-vous encore besoin de
                                couvrir
                                beaucoup de terrain? Répondez à ce questionnaire pour savoir dans quelle mesure vous
                                êtes
                                familiarisé avec les études de marché.
                            </p>


                            <div class="form-group">
                                <button id="btnCommenceQuiz" type="button" onclick="lanceQuiz()"
                                        class="btn btn-wide btn-lg  btn-o btn-danger margin-top-10">
                                    Commencer <i class="fa fa-hand-o-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
            <!--end diapo 1-->
            <!-- passer le quiz -->
            <div class="diapo2" style="display:none ; ">
                <div class="row">
                    <div class="container">
                        <div id="rootwizard" style="padding: 10px;">
                            <div class="hidden">
                                <div class="navbar-inner">
                                    <div class="container ">
                                        <ul class="">
                                            {% for key, listQues in listQuestions %}
                                                <li><a href="#tab{{ listQues.id }}"
                                                       data-toggle="tab">{{ listQues.label }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div id="countdown"></div>
                                <div id="timeQuiz" data-time="{{ infoFormation.timer }}">
                                    <i class="far fa-clock fa-3x"></i>
                                    <span class="time colortmp">{{ infoFormation.timer }}</span></div>
                                {% for key, listQues in listQuestions %}
                                    <div class="tab-pane" id="tab{{ listQues.id }}">
                                        <div class="row">
                                            <div class="col-md-10">
                                                <div class="quest1">
                                                    <div class="" style="margin-top: -18px;"><span
                                                                class="span-question">Question  <b
                                                                    class="questionCurrent{{ loop.index }}">{{ loop.index }}</b> / <b> {{ nbrQuestion }}</b></span>
                                                    </div>
                                                    <hr>
                                                    <div class="mediaQuiz">
                                                        {% if listQues.media.type == 'TYPE_FILE' %}
                                                            <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                                <iframe class="embed-responsive-item img-responsive center"
                                                                        src="{{ asset('uploads/medias/files/'~listQues.media.file) }}"
                                                                ></iframe>
                                                            </div>
                                                        {% elseif listQues.media.type == 'TYPE_VIDEO' %}
                                                            <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                                <iframe class="embed-responsive-item img-responsive condidatVedioMedias"
                                                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                                        frameborder="0"
                                                                        src="{{ asset('uploads/medias/videos/'~listQues.media.file) }}"
                                                                        allowfullscreen>
                                                                </iframe>
                                                            </div>
                                                        {% elseif listQues.media.type == 'TYPE_PHOTO' %}
                                                            <div class="typeImageMedias">
                                                                <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
                                                                    <img class="img-responsive embed-responsive-item img-responsive photoMediaQuiz "
                                                                         src="{{ asset('uploads/medias/images/'~listQues.media.file) }}"
                                                                         alt="image" title="{{ listQues.media.name }} "
                                                                         data-toggle="modal" data-target="#modal{{ listQues.media.id }}">
                                                                </div>
                                                            </div>

                                                                <div class="modal fade center" id="modal{{ listQues.media.id }}" tabindex="-1"
                                                                     role="dialog"
                                                                     aria-labelledby="myModalLabel"
                                                                     aria-hidden="true">
                                                                    <div class="modal-dialog modal-lg" role="document">
                                                                        <!--Content-->
                                                                        <div class="modal-content">
                                                                            <!--Body-->
                                                                            <div class="modal-body mb-0 p-0">
                                                                                <div class="embed-responsive embed-responsive-16by9 photoMediaQuiz2 z-depth-1-half">
                                                                                    <img class="embed-responsive-item"
                                                                                         src="{{ asset('uploads/medias/images/'~ listQues.media.file) }}"/>
                                                                                </div>
                                                                            </div>
                                                                            <!--Footer-->
                                                                            <div class="modal-footer ">
                                                                                <h6 class="pull-left">{{  listQues.media.name }}</h6>
                                                                                <button type="button"
                                                                                        class="btn btn-danger btn-rounded btn-md ml-4"
                                                                                        data-dismiss="modal">
                                                                                    Fermer
                                                                                </button>
                                                                            </div>
                                                                        </div>
                                                                        <!--/.Content-->
                                                                    </div>
                                                                </div>

                                                        {% endif %}


                                                    </div>
                                                <hr/>
                                                    <h1 class="NomQuest">
                                                        <i class="ti-check-box colortmp"></i>
                                                        {{ listQues.label }}
                                                    </h1>
                                                    <input type="hidden" id="countAnswerCorrect{{ listQues.id }}"
                                                           value="{{ answersCorrect[key] }}"/>
                                                    <div class="response">
                                                        <input id="typeQuestion{{ listQues.id }}"
                                                               class="typeQuestion hidden"
                                                               data-id="{{ listQues.id }}"
                                                               type="text" value="{{ listQues.type }}">
                                                        {% for key , reponses in answers %}
                                                            {% for key, value in reponses %}
                                                                {% if  listQues.id  == value.question.id %}
                                                                    <div class="checkbox clip-check check-danger check-md choice{{ listQues.id }} "
                                                                         id="divCheckvalid{{ value.id }}">
                                                                        <input type="checkbox"
                                                                               name="answer{{ listQues.id }}"
                                                                               class="checkrep{{ listQues.id }}  answer{{ listQues.id }}"
                                                                               data-id="{{ value.id }}"
                                                                               data-value="{{ value.id }}"
                                                                               id="checkbox{{ value.id }}"
                                                                               value={{ value.flag }}>
                                                                        <label for="checkbox{{ value.id }}"
                                                                               id="labelReponse{{ value.id }}">
                                                                            <span class="newCheck"
                                                                                  id="checkVerif{{ value.id }}"></span>
                                                                            <span class="ques"
                                                                                  id="ques{{ listQues.id }}">{{ value.label }}</span>
                                                                        </label>
                                                                    </div>
                                                                {% endif %}
                                                            {% endfor %}
                                                        {% endfor %}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button id="btnValide{{ listQues.id }}"
                                                type="button"
                                                onclick="stopTime({{ listQues.id }})"
                                                class="btn btn-sm pull-right btn-danger btnValide stoptime">
                                            Valider <i class="fa fa-check"></i>
                                        </button>
                                    </div>
                                {% endfor %}
                                <ul class="pager wizard">
                                    <li class="next">
                                        <button class="btnNextQues btn btn-sm pull-right" type="button"
                                                onclick="nextQuiz()"
                                                href="javascript:;">Suivant <i
                                                    class="fa fa-angle-double-right"></i></button>
                                    </li>
                                    <li>
                                        <button id="btnSaveQuiz" type="button" onclick="CalculScoreQuiz()"
                                                class="btn btn-sm pull-right btn-danger">
                                            Score <i class="fa fa-hand-o-right"></i>
                                        </button>
                                    </li>
                                    <li>
                                    </li>
                                </ul>
                                <div id="bar" class="progress barProgressQuiz">
                                    <div class="progress progress-striped active progress-sm" style="height: 17px">
                                        <div id="barQuiz" class="progress-bar progress-bar-danger" role="progressbar"
                                             aria-valuenow="0"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                            <span id="barprogress"></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--end quizz-->
            <!--score quiz-->
            <div class="diapo3">
                <div class="container containerdiapo3">
                    <div class="row">
                        <div class="col-md-12 center">
                            <div class="" style="margin-top: 15px;">
                                <h2 class="h2-text-diapo3">Merci
                                    <spam>{{ app.user.lastName }}  {{ app.user.firstName }}</spam>
                                </h2>
                            </div>
                            <div class="mar-top">
                                <h4 style="margin-left: 15px;">
                                    <i class=" ti-stats-up colortmp"></i> Score : <span class="score"></span>%

                                </h4>
                                <h4 class="mar-top">
                                    <i class="fa fa-signal colortmp"></i> Niveau : <span class="niveau">
                                        <span class="niveauxCondidat">
                                                      <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        <i class="fa fa-star margin-right-5 text-yellow"></i>
                                        </span>
                                    </span></h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin-top: 25px">
                    <div class="col-md-2"></div>
                    <div class="col-md-8">
                        <div class="center">
                            <p class="mar-top">
                                En connaissez-vous suffisamment sur les études de marché ou avez-vous encore besoin de
                                couvrir
                                beaucoup de terrain? Répondez à ce questionnaire pour savoir dans quelle mesure vous
                                êtes
                                familiarisé avec les études de marché.
                            </p>
                            <input type="hidden" class="scoreFormation" value="{{ infoFormation.score }}">
                            <div class="form-group">
                                <button id="downloadAttestation" type="button"
                                        class="btn btn-wide btn-lg downloadAttestation  btn-o btn-danger margin-top-10">
                                    Télecharger votre attestation <i class="fa fa-print"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            </div>
            <!--end score-->
        </div>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    {#    <script src="{{ asset('assets/total-task/biblio/jquery.bootstrap.wizard.js') }}"></script>#}
    {#    <script src="{{ asset('assets/total-task/biblio/jquery.bootstrap.wizard.min.js') }}"></script>#}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
    <script src="https://www.jqueryscript.net/demo/Simple-jQuery-Html5-Based-360-Degree-Countdown-Timer-countdown360/src/jquery.countdown360.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.js"></script>
    <script src="{{ asset('assets/total-task/app/condidat-quiz-elearning-session.js') }}"></script>
{% endblock %}