{% extends '@Projet/projet/layout.html.twig' %}

{% block projet_title %}Tous les tickets{% endblock %}

{% block projet_content %}
{% set months = {1:'janv.',2:'févr.',3:'mars',4:'avr.',5:'mai',6:'juin',7:'juil.',8:'août',9:'sept.',10:'oct.',11:'nov.',12:'déc.'} %}
<div class="project-work" data-controller="project-work-index">
    <header class="project-work__header">
        <div>
            <h1>Tous les tickets</h1>
            <p>Centralisez les demandes rattachées à tous les projets actifs de la société.</p>
        </div>
        <div>
            <a class="project-button project-button--secondary" href="{{ path('projet_index') }}"><i class="ti ti-folder"></i> Voir les projets</a>
        </div>
    </header>

    <section class="project-work__stats mt-4" aria-label="Indicateurs des tickets">
        {% for item in [
            {label:'Total', value:stats.total, icon:'ti-ticket', tone:'indigo'},
            {label:'Ouverts', value:stats.open, icon:'ti-circle', tone:'blue'},
            {label:'En attente', value:stats.waiting, icon:'ti-hourglass', tone:'amber'},
            {label:'Critiques', value:stats.critical, icon:'ti-alert-octagon', tone:'red'},
            {label:'Résolus / fermés', value:stats.closed, icon:'ti-circle-check', tone:'green'}
        ] %}
            <article class="project-work-stat project-work-stat--{{ item.tone }}"><span><i class="ti {{ item.icon }}"></i></span><div><small>{{ item.label }}</small><strong>{{ item.value }}</strong></div></article>
        {% endfor %}
    </section>

    <section class="project-work__card mt-4">
        <div class="project-work__toolbar">
            <label class="project-work__search"><i class="ti ti-search"></i><input type="search" placeholder="Rechercher un ticket, un projet, un client…" data-project-work-index-target="search" data-action="input->project-work-index#filter"></label>
            <select data-project-work-index-target="project" data-action="change->project-work-index#filter" aria-label="Filtrer par projet"><option value="">Tous les projets</option>{% for project in projects %}<option value="{{ project.id }}">{{ project.titre }}</option>{% endfor %}</select>
            <select data-project-work-index-target="status" data-action="change->project-work-index#filter" aria-label="Filtrer par statut"><option value="">Tous les statuts</option><option>Ouvert</option><option>En attente</option><option>En cours</option><option>Résolu</option><option>Fermé</option></select>
            <select data-project-work-index-target="priority" data-action="change->project-work-index#filter" aria-label="Filtrer par priorité"><option value="">Toutes les priorités</option><option>Faible</option><option>Basse</option><option>Moyenne</option><option>Haute</option><option>Critique</option></select>
            <button type="button" class="project-work__reset" data-action="project-work-index#reset" title="Réinitialiser"><i class="ti ti-rotate-2"></i></button>
        </div>
        <div class="project-work__result"><strong data-project-work-index-target="count">{{ tickets|length }}</strong> ticket{{ tickets|length > 1 ? 's' : '' }} affiché{{ tickets|length > 1 ? 's' : '' }}</div>
        <div class="project-work__table-wrap">
            <table class="project-work__table">
                <thead><tr><th>Ticket</th><th>Projet / client</th><th>Priorité</th><th>Statut</th><th>Créé par</th><th>Assigné à</th><th>Créé le</th><th></th></tr></thead>
                <tbody>
                {% for ticket in tickets %}
                    {% set closed = ticket.statut|lower in ['résolu','fermé'] %}
                    <tr data-project-work-index-target="row"
                        data-search="{{ (ticket.titre ~ ' ' ~ ticket.description ~ ' ' ~ ticket.projet.titre ~ ' ' ~ (ticket.client ? ticket.client.nom : '') ~ ' ' ~ (ticket.assignedTo ? ticket.assignedTo.prenom ~ ' ' ~ ticket.assignedTo.nom : ''))|lower }}"
                        data-project="{{ ticket.projet.id }}"
                        data-status="{{ ticket.statut }}"
                        data-priority="{{ ticket.priorite }}">
                        <td>
                            <a class="project-work__entity" href="{{ path('projet_ticket_show',{projectId:ticket.projet.id,id:ticket.id}) }}">
                                <span class="project-work__entity-icon {{ closed ? 'is-complete' : (ticket.priorite|lower == 'critique' ? 'is-overdue' : '') }}"><i class="ti {{ closed ? 'ti-check' : 'ti-ticket' }}"></i></span>
                                <span><strong class="{{ closed ? 'is-complete' : '' }}">{{ ticket.titre }}</strong><small>#TK-{{ '%03d'|format(ticket.id) }} · {{ ticket.description|striptags|slice(0,55) }}{{ ticket.description|length > 55 ? '…' : '' }}</small></span>
                            </a>
                        </td>
                        <td><a class="project-work__project" href="{{ path('projet_show',{id:ticket.projet.id}) }}">{{ ticket.projet.titre }}</a><small class="project-work__client">{{ ticket.client ? ticket.client.nom : (ticket.projet.client ? ticket.projet.client.nom : 'Projet interne') }}</small></td>
                        <td><span class="project-work-badge {{ ticket.priorite|lower == 'critique' ? 'is-red' : (ticket.priorite|lower == 'haute' ? 'is-amber' : 'is-gray') }}">{{ ticket.priorite ?: 'Non définie' }}</span></td>
                        <td><span class="project-work-badge {{ closed ? 'is-green' : (ticket.statut|lower == 'en attente' ? 'is-amber' : 'is-blue') }}">{{ ticket.statut }}</span></td>
                        <td>{{ ticket.user ? ticket.user.prenom ~ ' ' ~ ticket.user.nom : '—' }}</td>
                        <td>{{ ticket.assignedTo ? ticket.assignedTo.prenom ~ ' ' ~ ticket.assignedTo.nom : 'Non assigné' }}</td>
                        <td>{{ ticket.createdAt ? ticket.createdAt|date('j') ~ ' ' ~ months[ticket.createdAt|date('n')] ~ ' ' ~ ticket.createdAt|date('Y') : '—' }}</td>
                        <td><a class="project-work__open" href="{{ path('projet_ticket_show',{projectId:ticket.projet.id,id:ticket.id}) }}" aria-label="Ouvrir le ticket"><i class="ti ti-chevron-right"></i></a></td>
                    </tr>
                {% else %}
                    <tr><td colspan="8"><div class="project-work__empty"><i class="ti ti-ticket"></i><strong>Aucun ticket</strong><span>Les tickets des projets actifs apparaîtront ici.</span></div></td></tr>
                {% endfor %}
                    <tr class="project-work__filtered-empty" data-project-work-index-target="empty" hidden><td colspan="8">Aucun ticket ne correspond à ces filtres.</td></tr>
                </tbody>
            </table>
        </div>
    </section>
</div>
{% endblock %}