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

    {% block title %}Liste des cours{% endblock %}

{% block titre_page %}Liste des cours{% endblock %}
{% block resume_page %}Qui prépare le prochain cous ? Est-ce que le dernier cours a plu ? Qui est le prochain intervenant ?{% endblock %}
{% block description_page %}
{% endblock %}

{% block body %}
    <div class="row">
        {% if dernierCours %}
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title">Dernier cours
                                    {% for type, messages in app.flashes %}
                                        {% for message in messages %}
                                            {{ message }}
                                        {% endfor %}
                                    {% endfor %}</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-center">
                                {% if dernierCours.intervenant %}

                                {% elseif dernierCours.leader %}
                                    <h3 class="mb-0">Animateur</h3>
                                    <div class="text-center py-2">
                                        {% if dernierCours.leader.photo %}
                                            <img class="mainnav__avatar img-md rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ dernierCours.leader.photo) }}"
                                                 alt="Nobody" loading="lazy">
                                        {% else %}
                                            <img class="mainnav__avatar img-md rounded-circle border"
                                                 src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody" loading="lazy">
                                        {% endif %}
                                    </div>
                                    <h6 class="mb-0">{{ dernierCours.leader.firstname }}</h6>
                                {% endif %}
                            </div>
                            <div class="col-8">
                                <div class="fs-5 mb-3">
                                    {% if dernierCours.theme %}
                                        <h3 class="text-primary">Thème : {{ dernierCours.theme }}</h3>
                                    {% endif %}
                                    Le {{ dernierCours.date|date('d/m/y') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        {% if prochainCours %}
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <h5 class="card-title">Prochain cours</h5>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 text-center">
                                {% if prochainCours.intervenant %}

                                {% elseif prochainCours.leader %}
                                    <h3 class="mb-0">Animateur</h3>
                                    <div class="text-center py-2">
                                        {% if prochainCours.leader.photo %}
                                            <img class="mainnav__avatar img-md rounded-circle border"
                                                 src="{{ asset('uploads/user/photo/' ~ prochainCours.leader.photo) }}"
                                                 alt="Nobody" loading="lazy">
                                        {% else %}
                                            <img class="mainnav__avatar img-md rounded-circle border"
                                                 src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody" loading="lazy">
                                        {% endif %}
                                    </div>
                                    <h6 class="mb-0">{{ prochainCours.leader.firstname }}</h6>
                                {% endif %}
                            </div>
                            <div class="col-8">
                                <div class="fs-5 mb-3">
                                    {% if prochainCours.theme %}
                                        <h3 class="text-primary">Thème : {{ prochainCours.theme }}</h3>
                                    {% endif %}
                                    Le {{ prochainCours.date|date('d/m/y') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
    </div>
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <h5 class="card-title">Liste des cours</h5>
                    </div>
                    <div class="col-6 text-end ">
                        <a href="{{ path('cours_add') }}" class="btn btn-primary rounded-pill"><i
                                    class="ti-plus"></i> Ajouter</a>
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="text-start">Date</th>
                            <th class="text-center">Intervenant / Animateur</th>
                            <th class="text-center">Theme</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for cour in cours %}
                            <tr>
                                <td class="text-start">{{ cour.date|date('d/m/Y') }}</td>
                                <td class="text-center">
                                    {% if cour.intervenant %}
                                        <strong>Intervenant exterieur : <br/></strong>
                                        {{ cour.intervenant.firstname }}
                                    {% elseif cour.leader %}
                                        <div class="text-center py-2">
                                            {% if cour.leader.photo %}
                                                <img class="mainnav__avatar img-sm rounded-circle border"
                                                     src="{{ asset('uploads/user/photo/' ~ cour.leader.photo) }}"
                                                     alt="Nobody" loading="lazy">
                                            {% else %}
                                                <img class="mainnav__avatar img-sm rounded-circle border"
                                                     src="{{ asset('assets/img/nobody.jpg') }}" alt="Nobody"
                                                     loading="lazy">
                                            {% endif %}{{ cour.leader.firstname }}
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="text-center">{{ cour.theme }}</td>
                                <td class="text-center">
                                    <a class="action-link"
                                       href="{{ path('cours_edit', {'idCours':cour.id}) }}"><i
                                                class="ti-pencil"></i></a>
                                    <a class="action-link deleteCours" data-id="{{ cour.id }}"
                                       data-info="{{ cour.theme }} du {{ cour.date|date('d/m/y') }}"
                                       href="#modal-delete-cours" role="button" data-bs-toggle="modal"><i
                                                class="ti-trash"></i></a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

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

{% block modals %}
    <div class="modal" id="modal-delete-cours" aria-hidden="true"
         aria-labelledby="exampleModalToggleLabel2"
         tabindex="0">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalToggleLabel2">Supprimer le cours</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    Tu veux vraiment supprimer le cours ?<br/>
                    <span class="fw-bold" id="info"></span>
                </div>
                <div class="modal-footer">
                    <a href="#"
                       class="btn btn-primary modal-submit"><i class="ti-trash"></i>
                        Supprimer</a>
                    <button class="btn btn-light" data-bs-dismiss="modal" aria-label="Close">Annuler
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/js/jquery-3.7.1.min.js') }}"></script>
    <script type="text/javascript">
        $('.deleteCours').on('click', function (element) {
            var url = "{{ path('cours_delete', {'idCours':'___'}) }}";
            url = url.replace('___', $(this).data('id'));

            $('#info').text($(this).data('info'));

            $('#modal-delete-cours .modal-submit').attr('href', url);
        });
    </script>
{% endblock %}