{% extends "base.html.twig" %} {% block content %}
<div class="container">
    <div class="container my-5">
        <nav aria-label="breadcrumb">
            <ul class="list-inline">
                <li class="list-inline-item"><a class="nav-link text-dark p-0" href="/">Accueil</a></li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item"><a class="nav-link text-dark p-0" href="{{ path('cours')}}">Cours</a></li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item"><a class="nav-link text-dark p-0"
                        href="{{ path('description', {'slug': courses.slug}) }}">{{courses.title}}</a></li>
                <li class="list-inline-item">/</li>
                <li class="list-inline-item"><a class="nav-link text-dark p-0"
                        href="{{ path('start_quiz', {'id': courses.id}) }}">
                        Quiz</a></li>
            </ul>
        </nav>
        <div class="bg-primary radius bg-header-img">
            <div class="p-4">
                <h1 class="display-6 fw-bold text-white py-3">{{courses.title}}</h1>
                <div class="row">
                    <div class="d-flex col">
                        <p class="text-white txt-inline my-1">Créer par </p>
                        <div class="avatar-group px-1">
                            <div class="avatar avatar-circle" data-toggle="tooltip" data-placement="top"
                                title="Formateur {{courses.user.firstName ~' '~ courses.user.lastName}}">
                                {% if courses.user.picture is null %}
                                <span class="default-profile-card px-3 py-2 text-white"
                                    data-color="{{courses.user.colorProfile}}">{{ courses.user.firstName[:1]|upper
                                    }}</span>
                                {% else %}
                                <img src="{{asset('images/userprofile/'~ courses.user.picture)}}"
                                    class="img-fluid avatar-img-feature"
                                    alt="Formateur {{courses.user.firstName ~' '~ courses.user.lastName}}">
                                {% endif %}
                            </div>
                        </div>
                        <p class="text-white my-1"> <span class="fw-bold">{{courses.user.firstName ~' '~
                                courses.user.lastName}}</span></p>
                    </div>
                    <div class="col-auto float-end align-self-center">
                        <div class="d-flex">
                            <div class="circle-border text-center">
                                <svg width="16" height="16" fill="#fff" class="bi bi-award" viewBox="0 0 16 16">
                                    <path
                                        d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z">
                                    </path>
                                    <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z">
                                    </path>
                                </svg>
                            </div>
                            <p class="lead text-white ms-2">Certification</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row ms-1 mt-4">
            <div class="col-md-7 col-lg-9 padding-50">
                {% if quiz is defined and quiz is not null %}
                <h3 class="mb-4">Quiz: {{ quiz.title }}</h3>
                <div class="row ps-4">
                    {{ quiz.description | raw}}
                </div>
                <div class="row ps-4">
                    {% if success is defined and success is not null %}
                    {% if success %}
                    <p class="qcm-note">Bravo ! Vous avez réussi cet Quiz !</p>
                    {% else %}
                    <div class="qcm-note">
                        <p>Vous n'avez pas validé cet Quiz.</p>
                        <p>Vous n'avez pas atteint le seuil de validation de cet Quiz, c'est-à-dire <b>50%</b>. Ce n'est
                            pas très grave car vous pourrez le repasser dans 24h.</p>
                    </div>
                    {% endif %}

                    {% else %}
                    <p class="qcm-note">Il est temps d'évaluer vos connaissances, pour réussir dans ce Quiz vous avez
                        besoin d'obtenir 50% ou moins des bonnes réponses. </p>
                    {% endif %}
                </div>
                <div class="py-5">
                    <div class="row ms-2">
                        <div id="quiz_results"></div>
                        {% if message is defined and message is not null %}
                        <div class="alert alert-danger"> {{ message }} </div>
                        {% else %}
                        <form name="pass_quiz" id="pass_quiz" action="{{ path('quiz_answer') }}" method="POST" novalidate>
                            <input type="hidden" name="trackid" value="{{ trackformation.id }}">
                            {% set i = 0 %}
                            {% for question in questions %}
                            {% set a = 0 %}
                            {% set i = i + 1 %}
                            <div class="border-bottom">
                                <h4 class="p-2 mt-4 badge bg-primary fs-6 fw-bold">Question {{ i }} / {{ questions | length }} </h4>
                                <h5 class="question-title">{{ question.wording }}</h5>
                                {% for answer in question.answer %}
                                {% set a = a + 1 %}
                                <div class="form-group">
                                    <label for="question_{{ i }}_answer_{{ a }}">
                                        {% if a == 1 %}
                                        <input class="form-check-input" type="radio" value="{{ answer.id }}" required
                                            name="{{ question.id }}" id="question_{{ i }}_answer_{{ a }}" />
                                        {% else %}
                                        <input class="form-check-input is-invalid" type="radio" value="{{ answer.id }}"
                                            name="{{ question.id }}" id="question_{{ i }}_answer_{{ a }}" />
                                        {% endif %}
                                        <span>{{ answer.wording }}</span>
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                            {% endfor %}
                            <div class="d-flex my-3 justify-content-center">
                                <button type="submit" class="btn btn-primary">Valider</button>
                                <button type="reset" class="btn btn-primary d-none">Annuler</button>
                            </div>
                        </form>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>
            <div class="col-lg-3">
                <div class="navbar-expand-lg navbar-light">
                    <div class="navbar-vertical">
                        <div class="card flex-grow-1 mb-5 shadow radius border-1">
                            <div class="card-body">
                                <div class="my-3">
                                    <h4 class="card-title text-center fs-5 c-title">
                                        {% if courses is defined and courses is not null %}
                                        <h3 class="my-5"> {{ courses.title }}</h3>
                                        {% endif %}
                                    </h4>
                                </div>
                                <ul class="nav nav-sm nav-tabs nav-vertical border-0">
                                    {% for chapter in courses.chapters %}
                                    <li class="nav-item">
                                        <a class="nav-link text-dark"
                                            href="{{ path('start_read_blog', {'idcourses': courses.id,'idchapter': chapter.id}) }}">
                                            {{chapter.title}}
                                        </a>
                                    </li>
                                    {% endfor %}
                                    <li class="nav-item">
                                        <a class="nav-link text-dark dashboard"
                                            href="{{ path('start_quiz', {'id': courses.id}) }}">
                                            Quiz
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card my-2  shadow radius border-0">
                    <div class="row card-body">
                        <p class="fw-bold fs-6">{{courses.title}}</p>
                        <div class="col">
                            <p class="float-start mb-0">Avancement du cours</p>
                            {% if percent is defined and percent is not null %} {% set percentround = percent|round %}
                            <p class="fs-7 float-end me-3 mb-0">{{ percentround~'%' }}
                            </p>
                            {% else %}
                            <p class="fs-7 float-end me-3 mb-0">0%</p>
                            {% endif %}
                        </div>
                        <div class="col-12 pe-4 my-2">
                            <div class="progress" style="height:5px;">
                                {% if percent is defined and percent is not null %} {% set percentround = percent|round %}
                                <div class="progress-bar" role="progressbar" aria-valuenow="{{ percentround }}"
                                    aria-valuemin="0" aria-valuemax="100" style="width:{{percentround~'%'}}"></div>
                                {% else %}
                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0"
                                    aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block morejavascripts %}
	{{ encore_entry_script_tags('qcm') }}
{% endblock %}