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

{% block title %}Fiches de code{% endblock %}

{% block body %}
<div class="row">
	<div class="col-md-12 grid-margin">
		<div class="d-flex justify-content-between flex-wrap">
			<div class="d-flex align-items-end flex-wrap">
				<div class="d-flex">
					<i class="mdi mdi-home text-muted hover-cursor"></i>
					<p class="text-muted mb-0 hover-cursor">
						&nbsp;/&nbsp;
						<a class="student-dashbord-service" href="{{ path('home') }}">Tableau de bord</a>
					</p>
					<p class="text-muted mb-0 hover-cursor">
						&nbsp;/&nbsp;
						<a class="student-dashbord-service" href="{{ path('traffic_laws_student_themes_list') }}">Fiches de code</a>
						&nbsp;/&nbsp;
					</p>
					<p class="text-primary mb-0 hover-cursor">{{ trafficLawsChapter }}</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="d-flex justify-content-between flex-wrap">
    <div class="col-md-3">
        <div class="row p-2">
            <div class="col-sm-12 text-center">
                <a class="btn btn-outline-primary" href="{{path('traffic_laws_student_themes_list')}}"> < Retour aux thèmes</a>
            </div>
            <div class="col-sm-12 my-3 p-4 bg-light bloc-radius shadow">
                <div>{{progressPercent}}% terminé</div>
                <div class="progress my-2">
                    <div class="progress-bar bg-danger" role="progressbar" style="width: {{progressPercent}}%;" aria-valuenow="{{progressPercent}}" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                {% if generalLastActivity %}
                    <div>Dernière activité le: {{ generalLastActivity|date("d/m/Y à H:i") }}</div>
                {% endif %}
            </div>
            <div class="col-md-12 summary">
                <article class="blog-post">
                    <h3>{{trafficLawsChapter.trafficLawsCourse.trafficLawsTheme}}</h3>
                    <hr>
                    {{ include('traffic_laws_module/student/includes/courses_collapses.html.twig') }}
                </article>
            </div>
        </div>
    </div>
    <div class="col-md-8 p-5 shadow chapters-content-bloc">
        <div></div>
        <div class="d-flex align-items-end flex-wrap">
            <div class="d-flex">
                <p class="text-muted mb-0 hover-cursor">
                    <a class="student-dashbord-service" href="{{ path('traffic_laws_student_theme',{'id' : trafficLawsChapter.trafficLawsCourse.trafficLawsTheme.id}) }}">{{trafficLawsChapter.trafficLawsCourse.trafficLawsTheme}}</a>
                    &nbsp;>&nbsp;
                    <a class="student-dashbord-service" href="{{ path('traffic_laws_student_theme',{'id' : trafficLawsChapter.trafficLawsCourse.trafficLawsTheme.id}) }}">{{trafficLawsChapter.trafficLawsCourse}}</a>
                    &nbsp;>&nbsp;
                </p>
                <p class="text-primary mb-0 hover-cursor">{{trafficLawsChapter}}</p>
            </div>
        </div>
        <hr>
        <nav class="blog-pagination m-1 d-flex flex-wrap justify-content-between" aria-label="Pagination">
            {% if idPerviousChapter %}
                <a class="btn btn-outline-primary my-2" data-id="{{ trafficLawsChapter.id }}" href="{{ path('traffic_laws_student_chapter', {id: idPerviousChapter}) }}" title="Précédent"> <i class="mdi mdi-md mdi-step-backward"></i> <span class="btn-text">Précédent</span> </a>
            {% else %}
                <a class="btn btn-outline-primary my-2 disabled" style="cursor: not-allowed !important;" href="#" title="Précédent"> <i class="mdi mdi-step-backward"></i> <span class="btn-text">Précédent</span> </a>
            {% endif %}

            {% if isFinishedChapter %}
                <span class="mx-2 px-4 py-3 my-2 badge rounded-pill bg-success">Terminé</span>
            {% else %}
                <a class="btn btn-outline-success my-2 i-finished" data-id="{{ trafficLawsChapter.id }}" href="#"><i class="mdi mdi-check"></i><span class="btn-text">J'ai fini</span></a>
            {% endif %}

            {% if idNextChapter %}
                <a class="btn btn-outline-primary my-2" data-id="{{ trafficLawsChapter.id }}" href="{{ path('traffic_laws_student_chapter', {id: idNextChapter}) }}" title="Suivant"> <span class="btn-text">Suivant</span> <i class="mdi mdi-step-forward"></i> </a>
            {% else %}
                <a class="btn btn-outline-primary my-2 disabled" style="cursor: not-allowed !important;" href="#" title="Suivant"> <span class="btn-text">Suivant</span> <i class="mdi mdi-step-forward"></i> </a>
            {% endif %}
        </nav>
        <hr>
        <article class="blog-post post-traffic-laws-chapter">
            <h3>{{ trafficLawsChapter }}</h3>
            <div>{{ trafficLawsChapter.description|raw }}</div>
        </article>
        <hr>
        <nav class="blog-pagination m-1 d-flex flex-wrap justify-content-between" aria-label="Pagination">
            {% if idPerviousChapter %}
                <a class="btn btn-outline-primary my-2" data-id="{{ trafficLawsChapter.id }}" href="{{ path('traffic_laws_student_chapter', {id: idPerviousChapter}) }}" title="Précédent"> <i class="mdi mdi-step-backward"></i> <span class="btn-text">Précédent</span> </a>
            {% else %}
                <a class="btn btn-outline-primary my-2 disabled" style="cursor: not-allowed !important;" href="#" title="Précédent"> <i class="mdi mdi-step-backward"></i> <span class="btn-text">Précédent</span> </a>
            {% endif %}
            {% if isFinishedChapter %}
                <span class="mx-2 px-4 py-3 my-2 badge rounded-pill bg-success">Terminé</span>
            {% else %}
                <a class="btn btn-outline-success my-2 i-finished" data-id="{{ trafficLawsChapter.id }}" href="#"><i class="mdi mdi-check"></i><span class="btn-text">J'ai fini</span></a>
            {% endif %}

            {% if idNextChapter %}
                <a class="btn btn-outline-primary my-2" data-id="{{ trafficLawsChapter.id }}" href="{{ path('traffic_laws_student_chapter', {id: idNextChapter}) }}" title="Suivant"> <span class="btn-text">Suivant</span> <i class="mdi mdi-step-forward"></i> </a>
            {% else %}
                <a class="btn btn-outline-primary my-2 disabled" style="cursor: not-allowed !important;" href="#"> <span class="btn-text" title="Suivant">Suivant</span> <i class="mdi mdi-step-forward"></i> </a>
            {% endif %}
        </nav>
    </div>
</div>
<!-- Hidden routs -->
<input type="hidden" id="route_traffic_laws_student_chapter" value="{{path('traffic_laws_student_chapter')}}" />
<input type="hidden" id="route_traffic_laws_student_chapter_finished" value="{{path('traffic_laws_student_chapter_finished')}}" />
{% endblock %}
{% block pageJavascript %}
    <script>
        //row click
        $(document).on('click', '.bloc-student-chapter', function (e) {
            e.stopPropagation()
            var id = $(this).attr('data-id');
            url = $("#route_traffic_laws_student_chapter").val() + '/' + id;
            setTimeout(() => {
                $(location).attr('href',url);
            }, 100);
        });
        //change chapter statut
        $(document).on('click', '.i-finished', function (e) {
            const element = $(this);
            const id = $(this).attr('data-id');
            const oldText = element.text();
            element.html('<i class="fas fa-spinner fa-spin"></i>');
            let route = $("#route_traffic_laws_student_chapter_finished").val() + '/' + id;
            $.ajax({
                type: 'post',
                url: route,
                success: function(data){
                    var response = JSON.parse(data);
                    if(response.state == 'error')
                    {
                        alert(response.message);
                    }else{
                       document.location.replace(response.link);
                    }
                   element.html(oldText);
                },
                error: function() {
                    element.html(oldText);
                }
            })
        });
    </script>
{% endblock %}