{% extends 'admin/base.twig' %}

{% block title %}Ajouter/Éditer un événement{% endblock %}
{% block page_title %}
    {{ form.vars.value.id ? 'Éditer l\' événement: ' ~ form.vars.value.title : 'Créer un nouveau événement' }}
{% endblock %}


{% block body %}
    {% form_theme form 'form_admin.twig' %}

    <!-- Conteneur principal en mode sombre -->

    <div class="bg-gray-900 min-h-screen p-6">
        <div class="max-w-4xl mx-auto bg-gray-800 p-8 rounded-xl shadow-2xl">

            <h1 class="text-3xl font-bold text-gray-100 mb-6">    {{ form.vars.value.id ? 'Éditer l\' événement: ' ~ form.vars.value.title : 'Créer un nouveau événement' }}</h1>

            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}

            {% set event = form.vars.data %}

            <!-- Style générique pour les form_row en dark mode -->
            {% set input_classes = 'w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-700 text-gray-100 placeholder-gray-400 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150' %}
            {% set label_classes = 'text-white block text-sm font-medium text-gray-100 mb-1' %}

            <!-- Champ Titre -->
            <div class="form-group">
                {{ form_row(form.title, {
                    'label_attr': {'class': label_classes},
                    'attr': {'class': input_classes}
                }) }}
            </div>

            <!-- Champ Lieu -->
            <div class="form-group">
                {{ form_row(form.location, {
                    'label_attr': {'class': label_classes},
                    'attr': {'class': input_classes}
                }) }}
            </div>

            <!-- Champs Date -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Date de Début -->
                <div class="form-group">
                    {{ form_row(form.startAt, {
                        'label_attr': {'class': label_classes},
                        'attr': {'class': input_classes}
                    }) }}
                </div>

                <!-- Date de Fin -->
                <div class="form-group">
                    {{ form_row(form.endAt, {
                        'label_attr': {'class': label_classes},
                        'attr': {'class': input_classes}
                    }) }}
                </div>
            </div>

            <!-- Champ Organisateur -->
            <div class="form-group">
                {{ form_row(form.organizer, {
                    'label_attr': {'class': label_classes},
                    'attr': {'class': input_classes}
                }) }}
            </div>

            {# --- DÉBUT : CHAMP D'UPLOAD D'IMAGE STYLISÉ (Dark Mode) --- #}
            {# --- SECTION IMAGE DE PROFIL / UPLOAD --- #}
            <h3 class="text-2xl font-bold text-white border-b border-gray-700 pb-3 pt-6 mb-6">
                Affiche
            </h3>

            <div class="flex items-center space-x-6">

                {# Zone cliquable pour l'image existante, le placeholder ou la prévisualisation #}
                <label for="{{ form.affiche.vars.id }}"
                       class="relative cursor-pointer bg-gray-700 rounded-full w-32 h-32
                  flex items-center justify-center border-2 border-dashed border-gray-600
                  hover:border-indigo-500 transition duration-300 overflow-hidden shadow-lg"
                       id="preview-container">

                    {% set currentImageUrl = event.eventsFileName ? asset(vich_uploader_asset(event, 'affiche')) : '' %}

                    {# Image de prévisualisation ou Image actuelle #}
                    <img id="profile-preview-img"
                         src="{{ currentImageUrl }}"
                         alt="Photo de profil"
                         class="w-full h-full object-cover {{ currentImageUrl ? '' : 'hidden' }}">

                    {# Icône par défaut (visible seulement si aucune image actuelle) #}
                    <svg id="default-user-icon"
                         class="h-12 w-12 text-gray-500 {{ currentImageUrl ? 'hidden' : '' }}"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>


                    {# Overlay pour indiquer que c'est cliquable (s'applique à l'ensemble du label) #}
                    <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center
                        opacity-0 hover:opacity-100 transition duration-300 text-white font-bold text-xs p-2 text-center">
                        Cliquer pour changer
                    </div>

                </label>

                {# Champ de fichier réel (caché) #}
                {{ form_widget(form.affiche, {'attr': {'class': 'sr-only'}}) }}

                <div class="flex-1">
                    <p class="text-sm text-gray-400">
                        Sélectionnez une nouvelle affiche. Le fichier actuel sera remplacé. (Max 2Mo).
                    </p>
                    {# Affichage des erreurs spécifiques au champ image #}
                    {{ form_errors(form.affiche) }}
                </div>

            </div>
            {# --- FIN : CHAMP D'UPLOAD D'IMAGE STYLISÉ --- #}

            <!-- Bouton de soumission -->
            <div class="pt-4">
                <button type="submit"
                        class="inline-flex justify-center w-full px-4 py-3 border border-transparent text-lg font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 focus:ring-offset-gray-800 transition duration-150">
                    Enregistrer l'événement
                </button>
            </div>

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


    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Récupère l'ID réel du champ de fichier généré par Symfony
            const fileInput = document.getElementById('{{ form.affiche.vars.id }}');
            const previewImg = document.getElementById('profile-preview-img');
            const defaultIcon = document.getElementById('default-user-icon');

            if (fileInput) {
                fileInput.addEventListener('change', function() {
                    // Vérifie si un fichier a été sélectionné
                    if (this.files && this.files[0]) {
                        const reader = new FileReader();

                        reader.onload = function(e) {
                            // 1. Met à jour l'attribut src de l'image avec la data URL du fichier
                            previewImg.src = e.target.result;

                            // 2. Assure que l'image est visible
                            previewImg.classList.remove('hidden');

                            // 3. Cache l'icône par défaut si elle est là
                            if (defaultIcon) {
                                defaultIcon.classList.add('hidden');
                            }
                        }

                        // Lit le contenu du fichier
                        reader.readAsDataURL(this.files[0]);
                    }
                });
            }
        });
    </script>
{% endblock %}
