{% extends 'equipment/new.html.twig' %}

{% block title %}Modifier l'équipement{% endblock %}

{% block page_title %}Modifier 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">Modifier l'équipement</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_show', {'id': equipment.id}) }}" 
               class="inline-flex items-center px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-eye mr-2"></i>
                Voir les détails
            </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>

    <!-- Messages flash -->
    {% for message in app.flashes('success') %}
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            {{ message }}
        </div>
    {% endfor %}

    <!-- Formulaire principal -->
    <div class="max-w-4xl mx-auto">
        {{ form_start(form, {'attr': {'class': 'space-y-6', 'novalidate': 'novalidate'}}) }}
        
        {# Cacher le widget par défaut du statut car on l'affiche manuellement #}
        <div style="display: none;">
            {{ form_widget(form.status) }}
        </div>
        
        <!-- Carte principale -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4">
                <h2 class="text-xl font-semibold text-white flex items-center">
                    <i class="fas fa-edit mr-3"></i>
                    Modifier : {{ equipment.name }}
                </h2>
            </div>

            <div class="p-6 space-y-8">
                <!-- Section : Informations générales -->
                <div class="space-y-6">
                    <div class="flex items-center pb-2 border-b border-gray-200">
                        <div class="p-2 bg-blue-100 rounded-lg mr-3">
                            <i class="fas fa-info-circle text-blue-600"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">Informations générales</h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="space-y-2">
                            {{ form_label(form.name, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                            {{ form_widget(form.name, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200'}}) }}
                            <p class="text-xs text-gray-500">
                                <i class="fas fa-info-circle mr-1"></i>
                                Ex: Scanner GE, IRM Siemens, Échographe Philips
                            </p>
                        </div>

                        <div class="space-y-2">
                            {{ form_label(form.model, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                            {{ form_widget(form.model, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200'}}) }}
                        </div>

                        <div class="space-y-2">
                            {{ form_label(form.serialNumber, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                            {{ form_widget(form.serialNumber, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200'}}) }}
                        </div>

                        <div class="space-y-2">
                            {{ form_label(form.location, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                            {{ form_widget(form.location, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200', 'list': 'locations'}}) }}
                            <datalist id="locations">
                                <option value="Salle 1">
                                <option value="Salle 2">
                                <option value="Bloc A">
                                <option value="Bloc B">
                                <option value="Laboratoire">
                                <option value="Urgences">
                                <option value="Radiologie">
                                <option value="Scanner">
                                <option value="IRM">
                            </datalist>
                            <p class="text-xs text-gray-500">
                                <i class="fas fa-map-marker-alt mr-1"></i>
                                Salle, étage, bâtiment où se trouve l'équipement
                            </p>
                        </div>
                    </div>

                    <div class="space-y-2">
                        {{ form_label(form.description, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.description, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200', 'rows': '3'}}) }}
                    </div>
                </div>

                <!-- Section : État et maintenance -->
                <div class="space-y-6">
                    <div class="flex items-center pb-2 border-b border-gray-200">
                        <div class="p-2 bg-yellow-100 rounded-lg mr-3">
                            <i class="fas fa-wrench text-yellow-600"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">État et maintenance</h3>
                    </div>

                    <div class="space-y-6">
                        <div class="space-y-3">
                            <label class="block text-sm font-medium text-gray-700">
                                {{ form_label(form.status) }}
                            </label>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
                                {% for choice in form.status.vars.choices %}
                                    <div>
                                        <input type="radio" 
                                               id="status_{{ choice.value }}" 
                                               name="{{ form.status.vars.full_name }}" 
                                               value="{{ choice.value }}"
                                               class="sr-only peer"
                                               {% if choice.value == form.status.vars.data %}checked{% endif %}>
                                        <label for="status_{{ choice.value }}" 
                                               class="flex flex-col items-center justify-center p-4 bg-white border-2 border-gray-200 rounded-lg cursor-pointer hover:border-{{ choice.value == 'operational' ? 'green' : (choice.value == 'available' ? 'blue' : (choice.value == 'maintenance' ? 'yellow' : 'red')) }}-300 peer-checked:border-{{ choice.value == 'operational' ? 'green' : (choice.value == 'available' ? 'blue' : (choice.value == 'maintenance' ? 'yellow' : 'red')) }}-500 peer-checked:bg-{{ choice.value == 'operational' ? 'green' : (choice.value == 'available' ? 'blue' : (choice.value == 'maintenance' ? 'yellow' : 'red')) }}-50 transition-all duration-200">
                                            <i class="fas fa-{{ choice.value == 'operational' ? 'check-circle' : (choice.value == 'available' ? 'clock' : (choice.value == 'maintenance' ? 'tools' : 'times-circle')) }} text-2xl text-{{ choice.value == 'operational' ? 'green' : (choice.value == 'available' ? 'blue' : (choice.value == 'maintenance' ? 'yellow' : 'red')) }}-600 mb-2"></i>
                                            <span class="text-sm font-medium text-gray-900">{{ choice.label }}</span>
                                        </label>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="space-y-2">
                                <label class="block text-sm font-medium text-gray-700">
                                    <i class="fas fa-calendar-check mr-1 text-green-500"></i>
                                    {{ form_label(form.lastMaintenance) }}
                                </label>
                                {{ form_widget(form.lastMaintenance, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200'}}) }}
                            </div>

                            <div class="space-y-2">
                                <label class="block text-sm font-medium text-gray-700">
                                    <i class="fas fa-calendar-alt mr-1 text-blue-500"></i>
                                    {{ form_label(form.nextMaintenance) }}
                                </label>
                                {{ form_widget(form.nextMaintenance, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200'}}) }}
                                <p class="text-xs text-gray-500">
                                    <i class="fas fa-lightbulb mr-1"></i>
                                    Se calcule automatiquement à partir de la dernière maintenance
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section : Notes -->
                <div class="space-y-6">
                    <div class="flex items-center pb-2 border-b border-gray-200">
                        <div class="p-2 bg-purple-100 rounded-lg mr-3">
                            <i class="fas fa-sticky-note text-purple-600"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">Notes et observations</h3>
                    </div>

                    <div class="space-y-2">
                        {{ form_label(form.notes, null, {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.notes, {'attr': {'class': 'mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition-colors duration-200', 'rows': '4'}}) }}
                        <p class="text-xs text-gray-500">
                            <i class="fas fa-info-circle mr-1"></i>
                            Historique des interventions, observations importantes, recommandations...
                        </p>
                    </div>
                </div>

                <!-- Section : Informations système -->
                <div class="space-y-6">
                    <div class="flex items-center pb-2 border-b border-gray-200">
                        <div class="p-2 bg-gray-100 rounded-lg mr-3">
                            <i class="fas fa-clock text-gray-600"></i>
                        </div>
                        <h3 class="text-lg font-medium text-gray-900">Informations système</h3>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-sm text-gray-600 mb-1">Date de création</p>
                            <p class="font-semibold text-gray-900">{{ equipment.createdAt|date('d/m/Y à H:i') }}</p>
                        </div>
                        <div class="bg-gray-50 rounded-lg p-4">
                            <p class="text-sm text-gray-600 mb-1">Dernière modification</p>
                            <p class="font-semibold text-gray-900">{{ equipment.updatedAt|date('d/m/Y à H:i') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between">
                <div class="flex space-x-3">
                    <a href="{{ path('app_equipment_show', {'id': equipment.id}) }}" 
                       class="inline-flex items-center px-4 py-2 bg-blue-100 hover:bg-blue-200 text-blue-700 font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-eye mr-2"></i>
                        Voir les détails
                    </a>
                </div>
                
                <div class="flex space-x-3">
                    <a href="{{ path('app_equipment_index') }}" 
                       class="inline-flex items-center px-4 py-2 bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium rounded-lg transition-colors duration-200">
                        <i class="fas fa-times mr-2"></i>
                        Annuler
                    </a>
                    <button type="submit" 
                            class="inline-flex items-center px-6 py-2 bg-orange-600 hover:bg-orange-700 text-white font-medium rounded-lg shadow-sm transition-colors duration-200">
                        <i class="fas fa-save mr-2"></i>
                        Enregistrer les modifications
                    </button>
                </div>
            </div>
        </div>
        
        {{ form_end(form) }}
    </div>

    <!-- Conseils contextuels -->
    <div class="max-w-4xl mx-auto">
        <div class="bg-gradient-to-r from-orange-50 to-red-50 rounded-xl border border-orange-200 p-6">
            <h3 class="text-lg font-medium text-orange-900 mb-4 flex items-center">
                <i class="fas fa-lightbulb mr-2"></i>
                Conseils pour la modification
            </h3>
            <div class="bg-orange-100 border border-orange-200 rounded-lg p-4">
                <p class="text-sm text-orange-800">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Astuce :</strong> Si vous changez le statut en "En maintenance", pensez à mettre à jour la date de dernière maintenance et à planifier la prochaine intervention.
                </p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const statusInputs = document.querySelectorAll('input[name="{{ form.status.vars.full_name }}"]');
        const lastMaintenanceInput = document.getElementById('{{ form.lastMaintenance.vars.id }}');
        const nextMaintenanceInput = document.getElementById('{{ form.nextMaintenance.vars.id }}');

        // Auto-fill maintenance date when status changes to maintenance
        statusInputs.forEach(input => {
            input.addEventListener('change', function() {
                if (this.value === 'maintenance' && !lastMaintenanceInput.value) {
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const day = String(now.getDate()).padStart(2, '0');
                    const hours = String(now.getHours()).padStart(2, '0');
                    const minutes = String(now.getMinutes()).padStart(2, '0');
                    
                    lastMaintenanceInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
                    
                    // Animation feedback
                    lastMaintenanceInput.classList.add('ring-2', 'ring-orange-300');
                    setTimeout(() => {
                        lastMaintenanceInput.classList.remove('ring-2', 'ring-orange-300');
                    }, 1000);
                }
            });
        });

        // Calculate next maintenance when last maintenance changes
        lastMaintenanceInput.addEventListener('change', function() {
            if (this.value && !nextMaintenanceInput.value) {
                const lastDate = new Date(this.value);
                const nextDate = new Date(lastDate);
                nextDate.setMonth(nextDate.getMonth() + 6);
                
                const year = nextDate.getFullYear();
                const month = String(nextDate.getMonth() + 1).padStart(2, '0');
                const day = String(nextDate.getDate()).padStart(2, '0');
                const hours = String(nextDate.getHours()).padStart(2, '0');
                const minutes = String(nextDate.getMinutes()).padStart(2, '0');
                
                nextMaintenanceInput.value = `${year}-${month}-${day}T${hours}:${minutes}`;
                
                // Animation feedback
                nextMaintenanceInput.classList.add('ring-2', 'ring-green-300');
                setTimeout(() => {
                    nextMaintenanceInput.classList.remove('ring-2', 'ring-green-300');
                }, 1000);
            }
        });
    });
</script>
{% endblock %}