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

{% block title %}AFC E-Learning{% endblock %}

{% block body %}
<style>
.download-btn {
    width: 18rem;
    justify-content: center;
}

li a {
    display: flex; 
    align-items: center;
}
</style>

{% include 'partials/accountNavbar.html.twig' %}

<section class="quaternary-section">
    <h1 class="text-secondary mb-3">Bienvenu <span class="secondary-color">{{ learner.getFirstName }}</span> </h1>
    <p>Vous trouverez sur votre compte de formations AFC l'accés à vos formations, ainsi qu'une <a href="#assistance" class="secondary-color"><strong>assistance</strong></a> en cas de besoin.</p>
    {% include 'partials/flash.html.twig' %}

    <h2 class="text-secondary">Vos formations :</h2>
    {% if training|length > 0 %}
    
    {# Liste des formations #}
    {% for t in training %}
        {% if t["completed"] == false %}
            <div class="card mb-3">
                <div class="card-body">
                    <a href="{{ path('training', {'slug': t.training.slug}) }}" class="secondary-btn mr-5">Poursuivre la formation</a>  {{ t.training.name }}
                </div>
            </div>
        {% else %}
            <nav class="navbar navbar-light mb-3 shadow p-3">
                <h5> <span class="badge bg-primary text-white">Terminé</span> {{ t.training.name }} <strong class="secondary-color">ressources</strong></h5>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternal{{loop.index0}}" aria-controls="navbarToggleExternal" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>
            <div class="collapse p-3 border mb-3" id="navbarToggleExternal{{ loop.index0 }}">
                <ul>
                {% for mod in t.training.module %}
                    {% if mod.summarySheetFileName != null %}
                    <li class="mt-3">
                        <a href="{{ asset('uploads/summary/' ~ mod.summarySheetFileName) }}" target="_blank" class="lead">
                         <span class="material-icons mr-2 secondary-color">
                            picture_as_pdf
                        </span>  
                         {{ mod.name }}
                         </a>
                    </li>
                    {% endif %}
                    <ul>
                    {% for chap in mod.trainingChapters %}
                        {% if chap.summarySheetFileName != null %}
                        <li>
                            <a href="{{ asset('uploads/summarysummary/' ~ chap.summarySheetFileName) }}" target="_blank" class="lead"> 
                                <span class="material-icons mr-2 secondary-color">
                                    picture_as_pdf
                                </span>  
                                <span>{{ chap.title }}</span>
                            </a>
                        </li>
                        {% endif %}
                    {% endfor %}
                    </ul>
                {% endfor %}
                </ul>
                <a href="{{ path('training_certificate', {'slug': t.training.getSlug() }) }}" class="download-btn m-3 mt-5 shadow" target="_blank">Télécharger mon attestation</a>
            </div>
        {% endif %}
    {% endfor %}

    {# Liste des correction disponible ou en attente #}
    {% if exercices|length > 0 %}
        {% for ex in exercices %}
            {% if ex.state == 1 %}
                <div class="card mb-3">
                    <div class="card-header">
                        Formation {{ ex.chapter.module.training.name }} - Module : {{ ex.chapter.module.name }} - Chapitre {{ ex.chapter.orderNumber }} : {{ ex.chapter.title }}
                    </div>
                    <div class="card-body">
                        <p class="badge bg-warning p-3">Etude de cas en attente de correction</p>
                    </div>
                </div>
            {% else %}
            <nav class="navbar navbar-light mb-3 shadow p-3">
                <h5>{{ ex.chapter.module.training.name }} - {{ ex.chapter.title }}</h5>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent{{loop.index0}}" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </nav>
            <div class="collapse p-3 border mb-3" id="navbarToggleExternalContent{{ loop.index0 }}">
                <p><strong class="text-secondary">Formation</strong> : {{ ex.chapter.module.training.name }} - <strong class="text-secondary">Module </strong>: {{ ex.chapter.module.name }} - <strong class="text-secondary">Chapitre</strong> {{ ex.chapter.orderNumber }} : {{ ex.chapter.title }}</p>
                <hr>
                {% if ex.state == 0 %}
                    <p class="badge bg-danger p-3">Non-acquis</p>
                {% endif %}
                {% if ex.state == 2 %}
                    <p class="badge bg-success p-3">Acquis</p>
                {% endif %}
                <br>
                <p>{{ ex.appreciation }}</p>
                {% if ex.correctionFileName != null %}
                <a href="{{ asset('uploads/correction/' ~ ex.correctionFileName) }}" class="download-btn" target="_blank" style="width:20rem;">Télécharger le pdf de la correction</a>
                {% endif %}
            </div>
            {% endif %}
        {% endfor %}
    {% endif %}

    {% else %}
        <p class="lead text-secondary">Aucune formations enregistré.</p>
        <a href="{{ path('account_unlock_training') }}" class="secondary-btn">Dévérouiller une formation</a>
    {% endif %}


</section>

<section class="quaternary-section py-5" id="assistance">
<h2 class="text-secondary mb-3">Assistance</h2>
<p>En cas de difficultés lors de la formation, ou dans le cas d'un problème technique à signaler, vous pouvez envoyer un mai à l'adresse ci-dessous :</p>
<p class="lead"><strong class="text-secondary">Mail</strong> : <span class="secondary-color">afc.degasperi@yahoo.fr</span></p>
</section>

{#
<div class="container-fluid row p-5">

    <div class="col-3">
    {% include 'partials/accountNav.html.twig' %}
    </div>
    <div class="col-9 px-5">
        <h1 class="text-secondary mb-3">Bienvenu <span class="text-primary">{{ learner.getFirstName }}</span> </h1> 
        
       
        


        


    </div>

</div>
#}

{% endblock %}