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

{% block title %}Liste des Bugs {{ parent() }} {% endblock %}

{% block body %}

    <h1 class="text-center text-5xl lg:text-2xl mt-10 font-bold my-10">Liste des bugs</h1>

    <!-- Boutons de filtre par statut -->
    <div class="flex mb-10 lg:mb-4 justify-left lg:justify-center overflow-x-auto">
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="all">Tous</button>
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="open">Ouverts</button>
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="closed">Fermés</button>
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="resolved">Résolus</button>
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="rejected">Rejetés</button>
        <button class="btn text-4xl lg:text-base mx-2 bg-gray-300 py-2 px-4 rounded" data-status="suggested">Suggestions</button>
    </div>

    <!-- Tableau des rapports de bugs -->
    <div class="overflow-x-auto mx-14">
    <table class="table border-2 border-gray-200 text-center px-10 w-1/2 lg:mx-auto lg:w-5/6">
        <thead class="bg-slate-950 text-white">
            <tr class="border justify-center">
                <th class="border text-4xl lg:text-base py-6">Titre</th>
                <th class="border text-4xl lg:text-base py-6">Date de création</th>
                <th class="border text-4xl lg:text-base py-6">Statut</th>
                <th class="border text-4xl lg:text-base py-6">Lien</th>
                <th class="border text-4xl lg:text-base py-6">Screenshot</th>
                <th class="border text-4xl lg:text-base py-6">Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for bug_report in bug_reports %}
            <tr class="border justify-center" data-status="{{ bug_report.status.value|lower }}">
                <td class="border text-4xl lg:text-base p-4">{{ bug_report.title }}</td>
                <td class="border text-4xl lg:text-base p-4">{{ bug_report.createdAt ? bug_report.createdAt|date('d/m/Y') : '' }}</td>
                <td class="border text-4xl lg:text-base p-4">{{ bug_report.status.value }}</td>
                <td class="border text-4xl lg:text-base p-4"><a href="{{ bug_report.link }}">Page concernée</a></td>
                <td class="border text-4xl lg:text-base p-4">
                    {% if bug_report.screenshot %}
                        <img src="{{ asset('images/bug/' ~ bug_report.screenshot) }}" alt="Screenshot" class="w-32">
                    {% else %}
                        Aucune capture d'écran
                    {% endif %}
                </td>
                <td class="text-4xl lg:text-base p-4 flex flex-col text-center">
                    <a href="{{ path('app_bug_report_show', {'id': bug_report.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-blue-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Voir</a>
                    <a href="{{ path('app_bug_report_edit', {'id': bug_report.id}) }}" class="font-semibold text-3xl lg:text-lg btn bg-orange-300 py-2 lg:py-4 px-4 m-2 rounded shadow-sm">Éditer</a>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="6" class="py-2 px-4 text-center text-xs md:text-sm">Aucun rapport trouvé</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        $(document).ready(function() {
            // Initialisation : montrer les rapports ouverts uniquement
            $('tbody tr').hide();
            $('tbody tr[data-status="open"]').show();

            // Filtrer par statut
            $('button[data-status]').click(function() {
                var status = $(this).data('status');
                if (status === 'all') {
                    $('tbody tr').show();
                } else {
                    $('tbody tr').hide();
                    $('tbody tr[data-status="' + status + '"]').show();
                }
            });

            // Bouton "Tous les rapports"
            $('button[data-status="all"]').click(function() {
                $('tbody tr').show();
            });
        });
    </script>
{% endblock %}