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

{% block title %}Gestion des équipements{% endblock %}

{% block page_title %}Gestion des équipements{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- En-tête avec action principale -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">Gestion des équipements</h1>
            <p class="text-gray-600 mt-1">Gérez et surveillez vos équipements médicaux</p>
        </div>
        <a href="{{ path('app_equipment_new') }}" 
           class="inline-flex items-center px-4 py-2 text-white font-medium rounded-lg shadow-sm transition-colors duration-200" style="background-color: #2e338f;" onmouseover="this.style.backgroundColor='#f7ba41';" onmouseout="this.style.backgroundColor='#2e338f';">
            <i class="fas fa-plus mr-2"></i>
            Nouvel équipement
        </a>
    </div>

    <!-- Messages flash -->
    {% for message in app.flashes('success') %}
        <div class="border px-4 py-3 rounded-lg flex items-center" style="background-color: rgba(46, 51, 143, 0.1); border-color: #2e338f; color: #2e338f;">
            <i class="fas fa-check-circle mr-2"></i>
            {{ message }}
        </div>
    {% endfor %}

    <!-- Statistiques en temps réel -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center">
                <div class="p-3 rounded-lg" style="background-color: rgba(46, 51, 143, 0.1);">
                    <i class="fas fa-check-circle text-xl" style="color: #2e338f;"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Opérationnels</p>
                    <p class="text-2xl font-bold" style="color: #2e338f;" id="operational-count">
                        {{ equipment|filter(e => e.status == 'operational')|length }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center">
                <div class="p-3 rounded-lg" style="background-color: rgba(247, 186, 65, 0.1);">
                    <i class="fas fa-clock text-xl" style="color: #f7ba41;"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Disponibles</p>
                    <p class="text-2xl font-bold" style="color: #f7ba41;" id="available-count">
                        {{ equipment|filter(e => e.status == 'available')|length }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center">
                <div class="p-3 rounded-lg" style="background-color: rgba(247, 186, 65, 0.1);">
                    <i class="fas fa-wrench text-xl" style="color: #f7ba41;"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">En maintenance</p>
                    <p class="text-2xl font-bold" style="color: #f7ba41;" id="maintenance-count">
                        {{ equipment|filter(e => e.status == 'maintenance')|length }}
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow duration-200">
            <div class="flex items-center">
                <div class="p-3 rounded-lg" style="background-color: rgba(220, 38, 38, 0.1);">
                    <i class="fas fa-exclamation-triangle text-xl" style="color: #dc2626;"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-600">Hors service</p>
                    <p class="text-2xl font-bold" style="color: #dc2626;" id="outoforder-count">
                        {{ equipment|filter(e => e.status == 'out_of_order')|length }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtres avancés -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="flex flex-col lg:flex-row gap-4">
            <div class="flex-1">
                <label class="block text-sm font-medium text-gray-700 mb-2">Rechercher</label>
                <div class="relative">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" id="searchInput" 
                           class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200"
                           placeholder="Nom, modèle, numéro de série...">
                </div>
            </div>
            
            <div class="w-full lg:w-48">
                <label class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                <select id="statusFilter" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                    <option value="">Tous les statuts</option>
                    <option value="operational">Opérationnel</option>
                    <option value="available">Disponible</option>
                    <option value="maintenance">En maintenance</option>
                    <option value="out_of_order">Hors service</option>
                </select>
            </div>

            <div class="w-full lg:w-48">
                <label class="block text-sm font-medium text-gray-700 mb-2">Localisation</label>
                <select id="locationFilter" 
                        class="block w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors duration-200">
                    <option value="">Toutes les localisations</option>
                    {% set locations = [] %}
                    {% for equip in equipment %}
                        {% if equip.location and equip.location not in locations %}
                            {% set locations = locations|merge([equip.location]) %}
                        {% endif %}
                    {% endfor %}
                    {% for location in locations|sort %}
                        <option value="{{ location }}">{{ location }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="flex items-end">
                <button id="resetFilters" 
                        class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition-colors duration-200">
                    <i class="fas fa-undo mr-2"></i>
                    Réinitialiser
                </button>
            </div>
        </div>
    </div>

    <!-- Liste des équipements -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
        {% if equipment is not empty %}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200" id="equipmentTable">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Équipement
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Statut
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Localisation
                            </th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Maintenance
                            </th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                Actions
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for equip in equipment %}
                        <tr class="hover:bg-gray-50 transition-colors duration-150 equipment-row" 
                            data-status="{{ equip.status }}" 
                            data-location="{{ equip.location|default('') }}"
                            data-search="{{ (equip.name ~ ' ' ~ equip.model ~ ' ' ~ equip.serialNumber)|lower }}">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-12 w-12">
                                        <div class="h-12 w-12 rounded-lg bg-{{ equip.statusColor }}-100 flex items-center justify-center">
                                            <i class="fas fa-{{ equip.status == 'maintenance' ? 'wrench' : (equip.status == 'out_of_order' ? 'exclamation-triangle' : 'microchip') }} text-{{ equip.statusColor }}-600"></i>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">{{ equip.name }}</div>
                                        <div class="text-sm text-gray-500">
                                            {% if equip.model %}{{ equip.model }}{% endif %}
                                            {% if equip.model and equip.serialNumber %} • {% endif %}
                                            {% if equip.serialNumber %}N° {{ equip.serialNumber }}{% endif %}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-{{ equip.statusColor }}-100 text-{{ equip.statusColor }}-800">
                                    <span class="w-2 h-2 bg-{{ equip.statusColor }}-600 rounded-full mr-2"></span>
                                    {{ equip.statusLabel }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if equip.location %}
                                    <div class="flex items-center">
                                        <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                                        {{ equip.location }}
                                    </div>
                                {% else %}
                                    <span class="text-gray-400">Non définie</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                {% if equip.nextMaintenance %}
                                    {% set daysUntilMaintenance = date(equip.nextMaintenance).diff(date()).days %}
                                    <div class="flex flex-col">
                                        <span class="{% if daysUntilMaintenance <= 7 %}text-red-600 font-semibold{% elseif daysUntilMaintenance <= 30 %}text-yellow-600{% else %}text-gray-600{% endif %}">
                                            {{ equip.nextMaintenance|date('d/m/Y') }}
                                        </span>
                                        {% if daysUntilMaintenance <= 7 %}
                                            <span class="text-xs text-red-500">Urgent !</span>
                                        {% elseif daysUntilMaintenance <= 30 %}
                                            <span class="text-xs text-yellow-500">Bientôt</span>
                                        {% endif %}
                                    </div>
                                {% else %}
                                    <span class="text-gray-400">Non planifiée</span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <div class="flex items-center justify-end space-x-2">
                                    <a href="{{ path('app_equipment_show', {'id': equip.id}) }}" 
                                       class="p-2 rounded-lg transition-colors duration-200" style="color: #2e338f;" onmouseover="this.style.color='#f7ba41'; this.style.backgroundColor='rgba(247,186,65,0.1)';" onmouseout="this.style.color='#2e338f'; this.style.backgroundColor='';"
                                       title="Voir les détails">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ path('app_equipment_edit', {'id': equip.id}) }}" 
                                       class="text-yellow-600 hover:text-yellow-900 p-2 rounded-lg hover:bg-yellow-50 transition-colors duration-200"
                                       title="Modifier">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form method="post" action="{{ path('app_equipment_delete', {'id': equip.id}) }}" style="display: inline-block;">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ equip.id) }}">
                                        <button type="button" onclick="confirmDelete(this)" 
                                                class="text-red-600 hover:text-red-900 p-2 rounded-lg hover:bg-red-50 transition-colors duration-200"
                                                title="Supprimer"
                                                data-equipment-name="{{ equip.name }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <!-- État vide -->
            <div class="text-center py-12">
                <div class="mx-auto h-24 w-24 text-gray-400 mb-4">
                    <i class="fas fa-tools text-6xl"></i>
                </div>
                <h3 class="text-lg font-medium text-gray-900 mb-2">Aucun équipement</h3>
                <p class="text-gray-500 mb-6">Commencez par ajouter votre premier équipement</p>
                <a href="{{ path('app_equipment_new') }}" 
                   class="inline-flex items-center px-4 py-2 text-white font-medium rounded-lg shadow-sm transition-colors duration-200" style="background-color: #2e338f;" onmouseover="this.style.backgroundColor='#f7ba41';" onmouseout="this.style.backgroundColor='#2e338f';">
                    <i class="fas fa-plus mr-2"></i>
                    Ajouter un équipement
                </a>
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal de confirmation de suppression -->
<div id="deleteModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4">
                <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
            </div>
            <div class="text-center">
                <h3 class="text-lg font-medium text-gray-900 mb-2">Confirmer la suppression</h3>
                <p class="text-sm text-gray-500 mb-4">
                    Êtes-vous sûr de vouloir supprimer l'équipement <strong id="equipmentName"></strong> ?
                </p>
                <p class="text-sm text-red-600 mb-6">Cette action est irréversible.</p>
                <div class="flex justify-center space-x-4">
                    <button onclick="closeDeleteModal()" 
                            class="px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium rounded-lg transition-colors duration-200">
                        Annuler
                    </button>
                    <button id="confirmDeleteBtn" 
                            class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-trash mr-2"></i>
                        Supprimer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        // Filtrage en temps réel
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchInput');
            const statusFilter = document.getElementById('statusFilter');
            const locationFilter = document.getElementById('locationFilter');
            const resetButton = document.getElementById('resetFilters');
            const rows = document.querySelectorAll('.equipment-row');

            function updateCounts() {
                const visibleRows = Array.from(rows).filter(row => row.style.display !== 'none');
                
                const counts = {
                    operational: 0,
                    available: 0,
                    maintenance: 0,
                    out_of_order: 0
                };

                visibleRows.forEach(row => {
                    const status = row.dataset.status;
                    if (counts.hasOwnProperty(status)) {
                        counts[status]++;
                    }
                });

                document.getElementById('operational-count').textContent = counts.operational;
                document.getElementById('available-count').textContent = counts.available;
                document.getElementById('maintenance-count').textContent = counts.maintenance;
                document.getElementById('outoforder-count').textContent = counts.out_of_order;
            }

            function filterTable() {
                const searchTerm = searchInput.value.toLowerCase();
                const statusValue = statusFilter.value;
                const locationValue = locationFilter.value;

                rows.forEach(row => {
                    const searchData = row.dataset.search;
                    const status = row.dataset.status;
                    const location = row.dataset.location;

                    const matchesSearch = !searchTerm || searchData.includes(searchTerm);
                    const matchesStatus = !statusValue || status === statusValue;
                    const matchesLocation = !locationValue || location === locationValue;

                    const show = matchesSearch && matchesStatus && matchesLocation;
                    row.style.display = show ? '' : 'none';
                });

                updateCounts();
            }

            searchInput.addEventListener('input', filterTable);
            statusFilter.addEventListener('change', filterTable);
            locationFilter.addEventListener('change', filterTable);

            resetButton.addEventListener('click', function() {
                searchInput.value = '';
                statusFilter.value = '';
                locationFilter.value = '';
                filterTable();
            });
        });

        // Variables globales pour la suppression
        let currentDeleteForm = null;

        // Modal de suppression
        function confirmDelete(button) {
            const equipmentName = button.getAttribute('data-equipment-name');
            const form = button.closest('form');
            
            document.getElementById('equipmentName').textContent = equipmentName;
            currentDeleteForm = form;
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').classList.add('hidden');
            currentDeleteForm = null;
        }

        // Confirmer la suppression
        document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
            if (currentDeleteForm) {
                currentDeleteForm.submit();
            }
        });

        // Fermer modal en cliquant à l'extérieur
        document.getElementById('deleteModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    </script>
{% endblock %}