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

{% block title %}Nouvel équipement{% endblock %}

{% block page_title %}Nouvel é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">Nouvel é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 inline-flex items-center" onmouseover="this.style.color='#2e338f';" onmouseout="this.style.color='';"
                            <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" onmouseover="this.style.color='#2e338f';" onmouseout="this.style.color='';">É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">Nouvel équipement</span>
                        </div>
                    </li>
                </ol>
            </nav>
        </div>
        <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>

    <!-- 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-blue-500 to-blue-600 px-6 py-4">
                <h2 class="text-xl font-semibold text-white flex items-center">
                    <i class="fas fa-plus-circle mr-3"></i>
                    Ajouter un nouvel équipement
                </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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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-blue-500 focus:border-blue-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>
            </div>

            <!-- Actions -->
            <div class="bg-gray-50 px-6 py-4 flex items-center justify-between">
                <button type="button" onclick="resetForm()" 
                        class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 font-medium transition-colors duration-200">
                    <i class="fas fa-undo mr-2"></i>
                    Réinitialiser
                </button>
                
                <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-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg shadow-sm transition-colors duration-200">
                        <i class="fas fa-save mr-2"></i>
                        Enregistrer
                    </button>
                </div>
            </div>
        </div>
        
        {{ form_end(form) }}
    </div>

    <!-- Aide contextuelle -->
    <div class="max-w-4xl mx-auto">
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
            <h3 class="text-lg font-medium text-blue-900 mb-4 flex items-center">
                <i class="fas fa-question-circle mr-2"></i>
                Guide d'utilisation
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
                <div>
                    <h4 class="font-semibold text-blue-800 mb-2">États des équipements</h4>
                    <ul class="space-y-1 text-blue-700">
                        <li><span class="w-2 h-2 bg-green-500 rounded-full inline-block mr-2"></span><strong>Opérationnel :</strong> Fonctionne parfaitement</li>
                        <li><span class="w-2 h-2 bg-blue-500 rounded-full inline-block mr-2"></span><strong>Disponible :</strong> En stock, non utilisé</li>
                        <li><span class="w-2 h-2 bg-yellow-500 rounded-full inline-block mr-2"></span><strong>En maintenance :</strong> Intervention en cours</li>
                        <li><span class="w-2 h-2 bg-red-500 rounded-full inline-block mr-2"></span><strong>Hors service :</strong> Ne fonctionne plus</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-blue-800 mb-2">Bonnes pratiques</h4>
                    <ul class="space-y-1 text-blue-700">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Renseignez un maximum d'informations</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Planifiez les maintenances à l'avance</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Documentez l'historique dans les notes</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>Mettez à jour le statut régulièrement</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.querySelector('form');
            const lastMaintenanceInput = document.getElementById('{{ form.lastMaintenance.vars.id }}');
            const nextMaintenanceInput = document.getElementById('{{ form.nextMaintenance.vars.id }}');

            // Validation du formulaire
            form.addEventListener('submit', function(event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    event.stopPropagation();
                    
                    // Afficher les erreurs
                    const requiredFields = form.querySelectorAll('[required]');
                    requiredFields.forEach(field => {
                        if (!field.value.trim()) {
                            field.classList.add('border-red-500', 'ring-red-500');
                            field.classList.remove('border-gray-300');
                        }
                    });
                }
            });

            // Calculer automatiquement la prochaine maintenance
            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); // +6 mois par défaut
                    
                    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 de feedback
                    nextMaintenanceInput.classList.add('ring-2', 'ring-green-300');
                    setTimeout(() => {
                        nextMaintenanceInput.classList.remove('ring-2', 'ring-green-300');
                    }, 1000);
                }
            });

            // Réinitialiser les styles d'erreur lors de la saisie
            const inputs = form.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.addEventListener('input', function() {
                    this.classList.remove('border-red-500', 'ring-red-500');
                    this.classList.add('border-gray-300');
                });
            });
        });

        // Fonction pour réinitialiser le formulaire
        function resetForm() {
            if (confirm('Êtes-vous sûr de vouloir réinitialiser le formulaire ? Toutes les données saisies seront perdues.')) {
                document.querySelector('form').reset();
                
                // Réinitialiser les styles
                const inputs = document.querySelectorAll('input, textarea, select');
                inputs.forEach(input => {
                    input.classList.remove('border-red-500', 'ring-red-500');
                    input.classList.add('border-gray-300');
                });
                
                // Remettre le statut par défaut
                const defaultStatus = document.querySelector('input[name="{{ form.status.vars.full_name }}"][value="operational"]');
                if (defaultStatus) {
                    defaultStatus.checked = true;
                }
            }
        }
    </script>
{% endblock %}