{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold"><i class="fas fa-bell mr-2"></i>{{ page_title }}</h1>
                <p class="text-teal-100 text-sm mt-1">{{ statistics.total }} incident{{ statistics.total > 1 ? 's' : '' }}</p>
            </div>
            <a href="{{ path('manager_equipment_incidents_create') }}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-teal-600 bg-white rounded-lg hover:bg-gray-100">
                <i class="fas fa-plus mr-2"></i>Signaler
            </a>
        </div>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4">
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-yellow-600">{{ statistics.reported }}</div><div class="text-xs text-gray-500">Signalés</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-blue-600">{{ statistics.under_investigation }}</div><div class="text-xs text-gray-500">En enquête</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-green-600">{{ statistics.resolved }}</div><div class="text-xs text-gray-500">Résolus</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-red-600">{{ statistics.critical }}</div><div class="text-xs text-gray-500">Critiques</div></div>
    </div>

    <div class="bg-white rounded-lg shadow p-4">
        <form method="get" action="{{ path('manager_equipment_incidents_index') }}" class="grid grid-cols-1 sm:grid-cols-5 gap-3">
            <input type="text" name="search" value="{{ filters.search ?? '' }}" placeholder="Rechercher..." class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5">
            <select name="status" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5">
                <option value="">Tous statuts</option>
                <option value="reported" {{ (filters.status ?? '') == 'reported' ? 'selected' : '' }}>Signalé</option>
                <option value="under_investigation" {{ (filters.status ?? '') == 'under_investigation' ? 'selected' : '' }}>En enquête</option>
                <option value="resolved" {{ (filters.status ?? '') == 'resolved' ? 'selected' : '' }}>Résolu</option>
                <option value="closed" {{ (filters.status ?? '') == 'closed' ? 'selected' : '' }}>Clôturé</option>
            </select>
            <select name="type" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5">
                <option value="">Tous types</option>
                <option value="damage" {{ (filters.type ?? '') == 'damage' ? 'selected' : '' }}>Dommage</option>
                <option value="malfunction" {{ (filters.type ?? '') == 'malfunction' ? 'selected' : '' }}>Dysfonctionnement</option>
                <option value="theft" {{ (filters.type ?? '') == 'theft' ? 'selected' : '' }}>Vol</option>
                <option value="misuse" {{ (filters.type ?? '') == 'misuse' ? 'selected' : '' }}>Mauvaise utilisation</option>
                <option value="other" {{ (filters.type ?? '') == 'other' ? 'selected' : '' }}>Autre</option>
            </select>
            <select name="severity" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2.5">
                <option value="">Toutes gravités</option>
                <option value="low" {{ (filters.severity ?? '') == 'low' ? 'selected' : '' }}>Faible</option>
                <option value="medium" {{ (filters.severity ?? '') == 'medium' ? 'selected' : '' }}>Moyen</option>
                <option value="high" {{ (filters.severity ?? '') == 'high' ? 'selected' : '' }}>Élevé</option>
                <option value="critical" {{ (filters.severity ?? '') == 'critical' ? 'selected' : '' }}>Critique</option>
            </select>
            <button type="submit" class="text-white bg-teal-600 hover:bg-teal-700 font-medium rounded-lg text-sm px-5 py-2.5"><i class="fas fa-search mr-1"></i>Filtrer</button>
        </form>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left text-gray-500">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                    <tr>
                        <th class="px-4 py-3">Réf</th>
                        <th class="px-4 py-3">Titre</th>
                        <th class="px-4 py-3">Équipement</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3">Gravité</th>
                        <th class="px-4 py-3">Statut</th>
                        <th class="px-4 py-3">Date</th>
                        <th class="px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for inc in incidents %}
                    <tr class="hover:bg-gray-50 {{ inc.isCritical ? 'bg-red-50' : '' }}">
                        <td class="px-4 py-3 font-medium text-gray-900">{{ inc.reference }}</td>
                        <td class="px-4 py-3 font-medium text-gray-900">{{ inc.title }}</td>
                        <td class="px-4 py-3">{{ inc.equipment.name }}</td>
                        <td class="px-4 py-3">{{ inc.typeLabel }}</td>
                        <td class="px-4 py-3"><span class="bg-{{ inc.severityBadgeColor }}-100 text-{{ inc.severityBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ inc.severityLabel }}</span></td>
                        <td class="px-4 py-3"><span class="bg-{{ inc.statusBadgeColor }}-100 text-{{ inc.statusBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ inc.statusLabel }}</span></td>
                        <td class="px-4 py-3">{{ inc.incidentDate|date('d/m/Y') }}</td>
                        <td class="px-4 py-3"><a href="{{ path('manager_equipment_incidents_show', {id: inc.id}) }}" class="text-teal-600 hover:text-teal-800"><i class="fas fa-eye"></i></a></td>
                    </tr>
                    {% else %}
                    <tr><td colspan="8" class="px-4 py-8 text-center text-gray-500">Aucun incident</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if incidents.getTotalItemCount > 0 %}
        <div class="px-4 py-3 border-t">{{ knp_pagination_render(incidents) }}</div>
        {% endif %}
    </div>
</div>
{% endblock %}