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

{% block title %}{{ equipment.name }} - Détails{% endblock %}

{% block page_title %}Détails de l'équipement{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- En-tête -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-3xl font-bold text-gray-900">{{ equipment.name }}</h1>
            <nav class="flex mt-2" aria-label="Breadcrumb">
                <ol class="inline-flex items-center space-x-1 md:space-x-3">
                    <li class="inline-flex items-center">
                        <a href="{{ path('app_dashboard') }}" class="text-gray-700 hover:text-blue-600 inline-flex items-center">
                            <i class="fas fa-home w-4 h-4 mr-2"></i>
                            Tableau de bord
                        </a>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <a href="{{ path('app_equipment_index') }}" class="text-gray-700 hover:text-blue-600">Équipements</a>
                        </div>
                    </li>
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                            <span class="text-gray-500">{{ equipment.name }}</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="flex space-x-3">
            <a href="{{ path('app_equipment_edit', {'id': equipment.id}) }}" 
               class="inline-flex items-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-edit mr-2"></i>
                Modifier
            </a>
            <a href="{{ path('app_equipment_index') }}" 
               class="inline-flex items-center 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-arrow-left mr-2"></i>
                Retour à la liste
            </a>
        </div>
    </div>

    <!-- Statut principal -->
    <div class="bg-gradient-to-r from-{{ equipment.statusColor }}-500 to-{{ equipment.statusColor }}-600 rounded-xl p-6 text-white">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="p-4 bg-white bg-opacity-20 rounded-full mr-4">
                    <i class="fas fa-{{ equipment.status == 'maintenance' ? 'wrench' : (equipment.status == 'out_of_order' ? 'exclamation-triangle' : 'microchip') }} text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-2xl font-bold">{{ equipment.name }}</h2>
                    <div class="flex items-center mt-2">
                        <span class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm font-medium">
                            {{ equipment.statusLabel }}
                        </span>
                        {% if equipment.location %}
                            <span class="ml-3 text-{{ equipment.statusColor }}-100">
                                <i class="fas fa-map-marker-alt mr-1"></i>
                                {{ equipment.location }}
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% if equipment.nextMaintenance %}
                {% set daysUntilMaintenance = date(equipment.nextMaintenance).diff(date()).days %}
                <div class="text-right">
                    <p class="text-{{ equipment.statusColor }}-100 text-sm">Prochaine maintenance</p>
                    <p class="text-xl font-bold">{{ equipment.nextMaintenance|date('d/m/Y') }}</p>
                    {% if daysUntilMaintenance <= 7 %}
                        <p class="text-red-200 text-sm font-semibold">⚠️ Urgent</p>
                    {% elseif daysUntilMaintenance <= 30 %}
                        <p class="text-yellow-200 text-sm">Bientôt</p>
                    {% endif %}
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Contenu principal -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Informations principales -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Caractéristiques techniques -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-cog text-blue-500 mr-2"></i>
                        Caractéristiques techniques
                    </h3>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Nom de l'équipement</dt>
                                <dd class="mt-1 text-sm font-semibold text-gray-900">{{ equipment.name }}</dd>
                            </div>
                            {% if equipment.model %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Modèle</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ equipment.model }}</dd>
                            </div>
                            {% endif %}
                            {% if equipment.serialNumber %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Numéro de série</dt>
                                <dd class="mt-1 text-sm text-gray-900 font-mono bg-gray-100 px-2 py-1 rounded">{{ equipment.serialNumber }}</dd>
                            </div>
                            {% endif %}
                        </div>
                        <div class="space-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Statut actuel</dt>
                                <dd class="mt-1">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-{{ equipment.statusColor }}-100 text-{{ equipment.statusColor }}-800">
                                        <span class="w-2 h-2 bg-{{ equipment.statusColor }}-600 rounded-full mr-2"></span>
                                        {{ equipment.statusLabel }}
                                    </span>
                                </dd>
                            </div>
                            {% if equipment.location %}
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Localisation</dt>
                                <dd class="mt-1 text-sm text-gray-900 flex items-center">
                                    <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                                    {{ equipment.location }}
                                </dd>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Description -->
            {% if equipment.description %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-align-left text-purple-500 mr-2"></i>
                        Description
                    </h3>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 leading-relaxed">{{ equipment.description|nl2br }}</p>
                </div>
            </div>
            {% endif %}

            <!-- Notes -->
            {% if equipment.notes %}
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-sticky-note text-yellow-500 mr-2"></i>
                        Notes et observations
                    </h3>
                </div>
                <div class="p-6">
                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                        <p class="text-gray-700 leading-relaxed">{{ equipment.notes|nl2br }}</p>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="space-y-6">
            <!-- Actions rapides -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-bolt text-blue-500 mr-2"></i>
                        Actions rapides
                    </h3>
                </div>
                <div class="p-6 space-y-3">
                    <a href="{{ path('app_equipment_edit', {'id': equipment.id}) }}" 
                       class="w-full inline-flex items-center justify-center px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-edit mr-2"></i>
                        Modifier l'équipement
                    </a>
                    
                    {% if equipment.status != 'maintenance' %}
                    <button onclick="changeStatus('maintenance')" 
                            class="w-full inline-flex items-center justify-center px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-wrench mr-2"></i>
                        Marquer en maintenance
                    </button>
                    {% endif %}
                    
                    {% if equipment.status == 'maintenance' %}
                    <button onclick="changeStatus('operational')" 
                            class="w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-check-circle mr-2"></i>
                        Marquer opérationnel
                    </button>
                    {% endif %}
                    
                    <form method="post" action="{{ path('app_equipment_delete', {'id': equipment.id}) }}" style="display: inline-block; width: 100%;">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ equipment.id) }}">
                        <button type="button" onclick="confirmDelete(this)" 
                                class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors duration-200"
                                data-equipment-name="{{ equipment.name }}">
                            <i class="fas fa-trash mr-2"></i>
                            Supprimer
                        </button>
                    </form>
                </div>
            </div>

            <!-- Calendrier de maintenance -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-calendar-alt text-green-500 mr-2"></i>
                        Maintenance
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    {% if equipment.lastMaintenance %}
                    <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg">
                        <div>
                            <p class="text-sm font-medium text-green-800">Dernière maintenance</p>
                            <p class="text-lg font-bold text-green-900">{{ equipment.lastMaintenance|date('d/m/Y') }}</p>
                        </div>
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                    {% endif %}

                    {% if equipment.nextMaintenance %}
                        {% set daysUntilMaintenance = date(equipment.nextMaintenance).diff(date()).days %}
                        <div class="flex items-center justify-between p-3 bg-{% if daysUntilMaintenance <= 7 %}red{% elseif daysUntilMaintenance <= 30 %}yellow{% else %}blue{% endif %}-50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-{% if daysUntilMaintenance <= 7 %}red{% elseif daysUntilMaintenance <= 30 %}yellow{% else %}blue{% endif %}-800">Prochaine maintenance</p>
                                <p class="text-lg font-bold text-{% if daysUntilMaintenance <= 7 %}red{% elseif daysUntilMaintenance <= 30 %}yellow{% else %}blue{% endif %}-900">{{ equipment.nextMaintenance|date('d/m/Y') }}</p>
                                <p class="text-xs text-{% if daysUntilMaintenance <= 7 %}red{% elseif daysUntilMaintenance <= 30 %}yellow{% else %}blue{% endif %}-700">
                                    {% if daysUntilMaintenance <= 0 %}
                                        Maintenance en retard !
                                    {% elseif daysUntilMaintenance <= 7 %}
                                        Dans {{ daysUntilMaintenance }} jour{{ daysUntilMaintenance > 1 ? 's' : '' }}
                                    {% else %}
                                        Dans {{ daysUntilMaintenance }} jours
                                    {% endif %}
                                </p>
                            </div>
                            <i class="fas fa-{% if daysUntilMaintenance <= 7 %}exclamation-triangle{% elseif daysUntilMaintenance <= 30 %}clock{% else %}calendar-alt{% endif %} text-{% if daysUntilMaintenance <= 7 %}red{% elseif daysUntilMaintenance <= 30 %}yellow{% else %}blue{% endif %}-600 text-xl"></i>
                        </div>
                    {% else %}
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <p class="text-sm font-medium text-gray-600">Prochaine maintenance</p>
                            <p class="text-sm text-gray-500">Non planifiée</p>
                        </div>
                        <i class="fas fa-calendar-times text-gray-400 text-xl"></i>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Informations système -->
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                        <i class="fas fa-info-circle text-gray-500 mr-2"></i>
                        Informations système
                    </h3>
                </div>
                <div class="p-6 space-y-3">
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">ID</span>
                        <span class="text-sm font-mono bg-gray-100 px-2 py-1 rounded">#{{ equipment.id }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Créé le</span>
                        <span class="text-sm text-gray-900">{{ equipment.createdAt|date('d/m/Y H:i') }}</span>
                    </div>
                    <div class="flex justify-between">
                        <span class="text-sm text-gray-500">Modifié le</span>
                        <span class="text-sm text-gray-900">{{ equipment.updatedAt|date('d/m/Y H:i') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal 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>{{ equipment.name }}</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>
        function changeStatus(newStatus) {
            if (confirm('Êtes-vous sûr de vouloir changer le statut de cet équipement ?')) {
                // Créer un formulaire pour changer le statut
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ path('app_equipment_edit', {'id': equipment.id}) }}';
                
                // Rediriger vers la page d'édition avec le nouveau statut
                window.location.href = '{{ path('app_equipment_edit', {'id': equipment.id}) }}';
            }
        }

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

        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 %}