{% extends '@InstallBois/index.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        h2 {
            margin-left: 1rem;
        }

        table td {
            vertical-align: middle !important;
        }
        table td:nth-child(3) {
            vertical-align: top !important;
            text-align: left;
            max-width: 300px;
            white-space: normal;
            word-break: break-word;
        }
        table td:nth-child(5) {
            max-width: 200px;
            white-space: normal;
            word-break: break-word;
        }

    </style>
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <h2>Gestion des formations</h2>
{% endblock %}

{% block page_content %}
    <main>
        <section>
            <h3>Catégories :</h3>
            <div style="margin: 1rem">
                <a href="{{ path('app_training_category_new') }}" class="boutonAction" style="padding: .5rem .7rem">Ajouter une catégorie</a>
            </div>
            <table class="table">
                <thead>
                    <tr>
                       <th>ID</th>
                       <th>Titre</th>
                       <th>Description</th>
                       <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for category in categories %}
                        <tr>
                            <td>{{ category.id }}</td>
                            <td>{{ category.title }}</td>
                            <td>{{ category.description |length > 150 ? category.description |slice(0,150) ~'...' : category.description }}</td>
                            <td style="text-align: center">
                                <a href="{{ path('app_training_category_edit', {id: category.id}) }}" class="boutonAction" style="padding: .5rem .7rem">Modifier</a>
                                {{ include('training/admin/category/_delete.html.twig', {category: category}) }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </section>
        <section>
            <h3>Formations :</h3>
            <div style="margin: 1rem">
                <a href="{{ path('app_training_new') }}" class="boutonAction" style="padding: .5rem .7rem">Ajouter une formation</a>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Titre</th>
                    <th>Description</th>
                    <th>Lien</th>
                    <th>Fichier</th>
                    <th>Catégorie</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for training in trainings %}
                    <tr>
                        <td>{{ training.id }}</td>
                        <td>{{ training.title }}</td>
                        <td>
                            {% set description = training.description| striptags %}
                            {{ description|length > 150 ?
                                description|slice(0,150) ~ '...' :
                                description
                            }}
                        </td>
                        <td>
                            {% if training.link is not null %}
                                <a href="{{ training.link }}" target="_blank" rel="noopener noreferrer">
                                    {{ training.linkLabel }}
                                </a>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>
                            {% if training.filename is not null %}
                                <a href="{{ path('app_training_download', {id: training.id}) }}" title="{{ training.filename }}">
                                    {{ training.filename |length > 60 ? training.filename |slice(0,60) ~'...' : training.filename }}
                                </a>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>{{ training.category.title }}</td>
                        <td>{{ training.status.label }}</td>
                        <td style="text-align: center">
                            <button type="button"
                                    class="boutonAction btn-voir"
                                    data-training="{{ {title: training.title, description: training.description}|json_encode }}"
                            >
                                Voir
                            </button>
                            <form action="{{ path('app_training_status', {id: training.id}) }}" method="post" style="display: inline;">
                                <input type="hidden" name="_token" value="{{ csrf_token('status'~training.id) }}">
                                <button
                                    type="submit"
                                    class="boutonAction"
                                >
                                    {% if training.status.value == 'DRAFT' %}
                                        Publier
                                    {% elseif training.status.value == 'PUBLISHED' %}
                                        Brouillon
                                    {% endif %}
                                </button>
                            </form>
                            <a href="{{ path('app_training_edit', {id: training.id}) }}" class="boutonAction" style="padding: .5rem .7rem">Modifier</a>
                            {{ include('training/admin/_delete.html.twig') }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </section>

        <!-- Modal Voir Formation -->
        <div class="modal fade" id="modal-view-training" tabindex="-1" role="dialog" style="display: none; padding-right: 15px;">
            <div class="modal-dialog popup" role="document">
                <div class="modal-content" style="border: none; box-shadow: none;">
                    <div class="modal-header" style="border-bottom: 2px solid #FC971F;">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="opacity: 1; margin-top: 5px;">
                            <span aria-hidden="true" style="font-size: 24px; color: #FC971F;">&times;</span>
                        </button>
                        <h3 class="modal-title" id="view-training-title" style="color: #FC971F; font-weight: bold; margin: 0;"></h3>
                    </div>
                    <div class="modal-body" style="padding: 20px; font-size: 14px;">
                        <div id="view-training-description"></div>
                    </div>
                    <div class="modal-footer" style="border-top: none;">
                        <button type="button" class="boutonRetour" data-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="application/javascript">
        $(document).ready(function() {
            $('.btn-voir').on('click', function(e) {
                let title = $(this).data('training').title;
                let description = $(this).data('training').description;
                
                $('#view-training-title').text(title);
                $('#view-training-description').html(description);
                $('#modal-view-training').modal('show');
            });
        });
    </script>
{% endblock %}