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

{% block title %}Ajouter une Radio{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    {# En-tête #}
    <div class="flex justify-between items-center mb-8">
        <h1 class="text-2xl font-bold text-gray-800">
            <i class="fas fa-x-ray mr-2"></i>Nouvel Examen Radio
        </h1>
        <a href="{{ path('patient') }}" class="btn bg-gray-200 hover:bg-gray-300">
            <i class="fas fa-arrow-left mr-2"></i>Retour
        </a>
    </div>

    {# Carte du formulaire #}
    <div class="bg-white rounded-xl shadow-md overflow-hidden">
        <div class="p-6">
        {{ form_start(form, {'attr': {'class': 'space-y-6', 'enctype': 'multipart/form-data'}}) }}
        
        {# Champ Type #}
        <div class="space-y-2">
            {{ form_label(form.type, 'Type de Radio', {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            {{ form_widget(form.type, {
                'attr': {
                    'class': 'w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent',
                    'placeholder': 'Ex: Radio pulmonaire, Radio abdominale...'
                }
            }) }}
            {{ form_errors(form.type) }}
        </div>

        {# Champ Image #}
        <div class="space-y-2">
            {{ form_label(form.imageFile, 'Fichier Radio', {
                'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
            }) }}
            
            <div class="mt-1 flex items-center">
                <label for="{{ form.imageFile.vars.id }}" class="cursor-pointer">
                    <span class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-upload mr-2"></i>
                        Choisir un fichier
                    </span>
                </label>
                {{ form_widget(form.imageFile, {
                    'attr': {
                        'class': 'sr-only'
                    }
                }) }}
                <span class="ml-4 text-sm text-gray-500" id="file-name">Aucun fichier sélectionné</span>
            </div>
            {{ form_help(form.imageFile, {
                'attr': {'class': 'mt-1 text-sm text-gray-500'}
            }) }}
            {{ form_errors(form.imageFile) }}
        </div>

        {# Bouton de soumission #}
        <div class="pt-4 border-gray-200">
            <button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
                <i class="fas fa-save mr-2"></i>Enregistrer la Radio
            </button>
        </div>

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

{# Script pour afficher le nom du fichier sélectionné #}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('{{ form.imageFile.vars.id }}');
        const fileNameDisplay = document.getElementById('file-name');
        
        if (fileInput && fileNameDisplay) {
            fileInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    fileNameDisplay.textContent = e.target.files[0].name;
                } else {
                    fileNameDisplay.textContent = 'Aucun fichier sélectionné';
                }
            });
        }
    });
</script>
{% endblock %}