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

{% block title %}Nouveau Patient - TeleAVC{% endblock %}

{% block stylesheets %}
    <style>
        .form-floating > label {
            color: #6B7280;
            font-weight: 500;
        }
        .form-control:focus {
            border-color: #3B82F6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        .btn-primary {
            background-color: #1E3A8A;
            border-color: #1E3A8A;
        }
        .btn-primary:hover {
            background-color: #1E40AF;
            border-color: #1E40AF;
        }
        .btn-danger {
            background-color: #EF4444;
            border-color: #EF4444;
        }
        .btn-danger:hover {
            background-color: #DC2626;
            border-color: #DC2626;
        }
    </style>
{% endblock %}

{% block body %}
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {# Afficher les messages flash #}
        {% for message in app.flashes('success') %}
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6" role="alert">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="font-medium">{{ message }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}

        {% for message in app.flashes('error') %}
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6" role="alert">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="font-medium">{{ message }}</p>
                    </div>
                </div>
            </div>
        {% endfor %}
        <!-- En-tête de la page -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-teleavc-blue">Enregistrement Nouveau Patient</h1>
                    <p class="text-gray-600 mt-2">Saisie rapide des informations patient pour prise en charge AVC</p>
                </div>
            </div>
        </div>

        <!-- Formulaire Principal -->
        <div class="bg-white rounded-lg shadow-md p-6">
            {{ form_start(form, {'attr': {'class': 'space-y-6', 'novalidate': 'novalidate'}}) }}
            
            <!-- Section Informations Personnelles -->
            <div class="border-l-4 border-teleavc-blue pl-6">
                <h2 class="text-xl font-semibold text-teleavc-blue mb-6 flex items-center">
                    <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
                    </svg>
                    Informations Personnelles
                </h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Nom -->
                    <div class="space-y-2">
                        {{ form_label(form.nom, 'Nom de famille', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.nom, {
                            'attr': {
                                'class': 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teleavc-lightblue focus:border-transparent text-lg',
                                'placeholder': 'Entrez le nom de famille'
                            }
                        }) }}
                        <div class="text-xs text-gray-500">En majuscules de préférence</div>
                        {{ form_errors(form.nom) }}
                    </div>

                    <!-- Prénom -->
                    <div class="space-y-2">
                        {{ form_label(form.prenom, 'Prénom', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.prenom, {
                            'attr': {
                                'class': 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teleavc-lightblue focus:border-transparent text-lg',
                                'placeholder': 'Entrez le prénom'
                            }
                        }) }}
                        {{ form_errors(form.prenom) }}
                    </div>

                    <!-- Date de Naissance -->
                    <div class="space-y-2">
                        {{ form_label(form.dateNaissance, 'Date de naissance', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.dateNaissance, {
                            'attr': {
                                'class': 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teleavc-lightblue focus:border-transparent text-lg'
                            }
                        }) }}
                        {{ form_errors(form.dateNaissance) }}
                    </div>

                    <!-- Sexe -->
                    <div class="space-y-2">
                        {{ form_label(form.sexe, 'Sexe', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.sexe, {
                            'attr': {
                                'class': 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teleavc-lightblue focus:border-transparent text-lg'
                            }
                        }) }}
                        {{ form_errors(form.sexe) }}
                    </div>

                    <!-- Heure d'apparition -->
                    <div class="space-y-2">
                        {{ form_label(form.heure_symptome, 'Heure apparition premiers symptômes', {'label_attr': {'class': 'block text-sm font-medium text-gray-700'}}) }}
                        {{ form_widget(form.heure_symptome, {
                            'attr': {
                                'class': 'w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teleavc-lightblue focus:border-transparent text-lg'
                            }
                        }) }}
                        {{ form_errors(form.heure_symptome) }}
                    </div>
                </div>
            </div>

            <!-- Message d'alerte -->
            <div class="bg-red-50 border-l-4 border-red-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">⚠️ Rappel Important</h3>
                        <p class="text-sm text-red-700 mt-1">
                            En cas de suspicion d'AVC, vérifiez que l'orientation vers l'équipe médicale a été effectuée.
                            <strong>Temps = Cerveau !</strong>
                        </p>
                    </div>
                </div>
            </div>

            <!-- Boutons d'action -->
            <div class="flex flex-col sm:flex-row gap-4 pt-6 border-t border-gray-200">
                <button type="submit" class="flex-1 bg-teleavc-blue hover:bg-blue-800 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-300 shadow-md flex items-center justify-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    Enregistrer le Patient
                </button>
                
                <button type="reset" class="flex-1 bg-gray-500 hover:bg-gray-600 text-white font-bold py-4 px-6 rounded-lg text-lg transition duration-300 shadow-md flex items-center justify-center">
                    <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path>
                    </svg>
                    Réinitialiser
                </button>
            </div>

            {{ form_end(form) }}
        </div>

        <!-- Instructions -->
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mt-6">
            <h3 class="text-lg font-semibold text-teleavc-blue mb-3 flex items-center">
                <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                </svg>
                Instructions Rapides
            </h3>
            <ul class="text-sm text-blue-800 space-y-2">
                <li class="flex items-start">
                    <span class="text-blue-600 mr-2">•</span>
                    Tous les champs sont obligatoires pour un enregistrement complet
                </li>
                <li class="flex items-start">
                    <span class="text-blue-600 mr-2">•</span>
                    Vérifiez l'orthographe du nom et prénom avant validation
                </li>
                <li class="flex items-start">
                    <span class="text-blue-600 mr-2">•</span>
                    La date de création sera automatiquement renseignée par le système
                </li>
                <li class="flex items-start">
                    <span class="text-blue-600 mr-2">•</span>
                    En cas d'urgence AVC, utilisez le bouton rouge après enregistrement
                </li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-focus sur le premier champ
        const firstInput = document.querySelector('input[type="text"]');
        if (firstInput) {
            firstInput.focus();
        }

        // Formatage automatique du nom en majuscules
        const nomField = document.querySelector('input[name*="nom"]');
        if (nomField) {
            nomField.addEventListener('input', function(e) {
                e.target.value = e.target.value.toUpperCase();
            });
        }

        // Formatage automatique du prénom
        const prenomField = document.querySelector('input[name*="prenom"]');
        if (prenomField) {
            prenomField.addEventListener('input', function(e) {
                const value = e.target.value;
                e.target.value = value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
            });
        }

        // Confirmation avant reset
        const resetBtn = document.querySelector('button[type="reset"]');
        if (resetBtn) {
            resetBtn.addEventListener('click', function(e) {
                if (!confirm('Êtes-vous sûr de vouloir effacer tous les champs ?')) {
                    e.preventDefault();
                }
            });
        }
    });
</script>
{% endblock %}