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

{% block title %}Compte rendu radiologique - {{ patient.prenom }} {{ patient.nom }}{% 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>Compte rendu radiologique
        </h1>
        <a href="{{ path('detail_patient', {'id': patient.id}) }}" class="inline-flex items-center px-4 py-2 rounded-md text-sm font-medium transition-colors duration-150 bg-gray-200 hover:bg-gray-300">
            <i class="fas fa-arrow-left mr-2"></i> Retour
        </a>
    </div>

    {# Carte patient #}
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <h2 class="text-xl font-semibold mb-4">
            Patient : {{ patient.prenom }} {{ patient.nom }}
            <span class="text-sm font-normal text-gray-600 ml-2">(ID: {{ patient.id }})</span>
        </h2>
    </div>

    {# Section Radio #}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {# Colonne gauche - Image radio #}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">
                    <i class="fas fa-image mr-2"></i>Image radiologique
                </h2>
                
                {% if radio %}
                    <div class="border border-gray-200 rounded-lg p-4">
                        <img src="{{ asset('uploads/radio/' ~ radio.image) }}" 
                             alt="Radio {{ radio.type }}" 
                             class="w-full h-auto rounded-lg"
                             onerror="this.onerror=null;this.src='{{ asset('images/default-radio.jpg') }}'">
                        <div class="mt-4 text-sm text-gray-600">
                            <p><span class="font-medium">Type:</span> {{ radio.type }}</p>
                            <p><span class="font-medium">Date:</span> {{ radio.createdAt|date('d/m/Y H:i') }}</p>
                        </div>
                    </div>
                {% else %}
                    <div class="text-center py-8 bg-gray-50 rounded-lg">
                        <i class="fas fa-x-ray text-4xl text-gray-300 mb-3"></i>
                        <h3 class="text-lg font-medium text-gray-600">Aucune image disponible</h3>
                    </div>
                {% endif %}
            </div>
        </div>

        {# Colonne droite - Formulaire compte rendu #}
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">
                    <i class="fas fa-edit mr-2"></i>Compte rendu
                </h2>
                
                {{ form_start(form, {'attr': {'class': 'space-y-4'}}) }}
                
                <div class="form-group">
                    {{ form_label(form.compteRendu, 'Rédigez votre compte rendu', {
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-1'}
                    }) }}
                    {{ form_widget(form.compteRendu, {
                        'attr': {
                            'class': 'w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500',
                            'rows': 12,
                            'placeholder': 'Décrivez vos observations radiologiques...'
                        }
                    }) }}
                    {{ form_errors(form.compteRendu) }}
                </div>

                <div class="pt-4 border-t border-gray-200">
                    <button type="submit" class="btn bg-blue-600 hover:bg-blue-700 text-white w-full py-3">
                        <i class="fas fa-save mr-2"></i> Enregistrer le compte rendu
                    </button>
                </div>
                
                {{ form_end(form) }}
            </div>
        </div>
    </div>
</div>
{% endblock %}