{% 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-calendar-check mr-2"></i>{{ page_title }}</h1>
                <p class="text-teal-100 text-sm mt-1">{{ statistics.total }} maintenance{{ statistics.total > 1 ? 's' : '' }}</p>
            </div>
            <a href="{{ path('manager_equipment_maintenance_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>Planifier
            </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-blue-600">{{ statistics.scheduled }}</div><div class="text-xs text-gray-500">Planifiées</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-yellow-600">{{ statistics.in_progress }}</div><div class="text-xs text-gray-500">En cours</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-green-600">{{ statistics.completed }}</div><div class="text-xs text-gray-500">Terminées</div></div>
        <div class="bg-white rounded-lg shadow p-3 text-center"><div class="text-2xl font-bold text-red-600">{{ statistics.cancelled }}</div><div class="text-xs text-gray-500">Annulées</div></div>
    </div>

    <div class="bg-white rounded-lg shadow p-4">
        <form method="get" action="{{ path('manager_equipment_maintenance_index') }}" class="grid grid-cols-1 sm:grid-cols-4 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 focus:ring-teal-500 focus:border-teal-500 block w-full p-2.5">
                <option value="">Tous les statuts</option>
                <option value="scheduled" {{ (filters.status ?? '') == 'scheduled' ? 'selected' : '' }}>Planifiée</option>
                <option value="in_progress" {{ (filters.status ?? '') == 'in_progress' ? 'selected' : '' }}>En cours</option>
                <option value="completed" {{ (filters.status ?? '') == 'completed' ? 'selected' : '' }}>Terminée</option>
                <option value="cancelled" {{ (filters.status ?? '') == 'cancelled' ? 'selected' : '' }}>Annulée</option>
            </select>
            <select name="type" 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">
                <option value="">Tous les types</option>
                <option value="scheduled" {{ (filters.type ?? '') == 'scheduled' ? 'selected' : '' }}>Planifiée</option>
                <option value="corrective" {{ (filters.type ?? '') == 'corrective' ? 'selected' : '' }}>Corrective</option>
                <option value="inspection" {{ (filters.type ?? '') == 'inspection' ? 'selected' : '' }}>Inspection</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">Équipement</th>
                        <th class="px-4 py-3">Type</th>
                        <th class="px-4 py-3">Date prévue</th>
                        <th class="px-4 py-3">Statut</th>
                        <th class="px-4 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    {% for m in maintenances %}
                    <tr class="hover:bg-gray-50 {{ m.isOverdue ? 'bg-red-50' : '' }}">
                        <td class="px-4 py-3 font-medium text-gray-900">{{ m.reference }}</td>
                        <td class="px-4 py-3">{{ m.equipment.name }}</td>
                        <td class="px-4 py-3">{{ m.typeLabel }}</td>
                        <td class="px-4 py-3">{{ m.scheduledDate|date('d/m/Y') }}{% if m.isOverdue %} <span class="text-red-600 text-xs font-medium">En retard</span>{% endif %}</td>
                        <td class="px-4 py-3"><span class="bg-{{ m.statusBadgeColor }}-100 text-{{ m.statusBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ m.statusLabel }}</span></td>
                        <td class="px-4 py-3"><a href="{{ path('manager_equipment_maintenance_show', {id: m.id}) }}" class="text-teal-600 hover:text-teal-800"><i class="fas fa-eye"></i></a></td>
                    </tr>
                    {% else %}
                    <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">Aucune maintenance</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% if maintenances.getTotalItemCount > 0 %}
        <div class="px-4 py-3 border-t">{{ knp_pagination_render(maintenances) }}</div>
        {% endif %}
    </div>
</div>
{% endblock %}