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

{% block title %}Ajouter/Éditer un Membre{% endblock %}
{% block page_title %}
    {{ form.vars.value.id ? 'Éditer le Membre: ' ~ form.vars.value.pseudo : 'Créer un nouveau Membre' }}
{% endblock %}

{% block body %}

    {# --- APPLICATION DU THÈME DE FORMULAIRE DEMANDÉ --- #}
    {% form_theme form 'form_admin.twig' %}

    {# Définir l'entité pour la rendre plus facile à référencer, notamment pour vich_uploader_asset #}
    {% set member = form.vars.value %}

    {# Conteneur principal #}
    <div class="w-full mx-auto bg-gray-800 p-4 sm:p-8 md:p-10 rounded-xl shadow-2xl border border-gray-700">

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

        {# --- SECTION 1: Informations de base (Grille de 3 colonnes sur grand écran) --- #}
        <h3 class="text-2xl font-bold text-white border-b border-gray-700 pb-3 mb-6">
            Informations Principales
        </h3>

        {# Grille de 3 colonnes sur les grands écrans (lg:grid-cols-3) #}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

            {# Pseudo - Utilise le style défini dans form_admin.twig #}
            <div>
                {{ form_row(form.pseudo) }}
            </div>
            {# Rôle - Utilise le style défini dans form_admin.twig #}
            <div>
                {{ form_row(form.role) }}
            </div>

            {# Date de Rejoint - Utilise le style défini dans form_admin.twig #}
            <div>
                {{ form_row(form.joinedAt) }}
            </div>

            {# Statut - Utilise le style défini dans form_admin.twig #}
            <div>
                {{ form_row(form.status) }}
            </div>

            {# Orientation - Utilise le style défini dans form_admin.twig #}
            <div>
                {{ form_row(form.orientation) }}
            </div>
            <div>
                {{ form_row(form.email) }}
            </div>
            <div>
                {{ form_row(form.civ) }}
            </div>
            <div>
                {{ form_row(form.name) }}
            </div>
            <div>
                {{ form_row(form.surname) }}
            </div>
        </div>

        {# --- SECTION IMAGE DE PROFIL / UPLOAD --- #}
        <h3 class="text-2xl font-bold text-white border-b border-gray-700 pb-3 pt-6 mb-6">
            Photo de Profil
        </h3>

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

            {# Zone cliquable pour l'image existante, le placeholder ou la prévisualisation #}
            <label for="{{ form.members.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 = member.memberFileName ? asset(vich_uploader_asset(member, 'members')) : '' %}

                {# 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.members, {'attr': {'class': 'sr-only'}}) }}

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

        </div>


        {# --- SECTION 2: Tags / Booléens (Boutons Radio) --- #}
        <h3 class="text-2xl font-bold text-white border-b border-gray-700 pb-3 pt-6 mb-6">
            Tags et Caractéristiques
        </h3>

        {# Utilisation d'une grille pour aligner les 3 groupes de boutons radio #}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

            {% set boolFields = [form.crosscosplayer, form.cosplayer, form.trans] %}

            {# Utilisation de form_row() pour chaque champ booléen.
               Le thème form_admin.twig gère le conteneur de carte sombre, le label et les options radio via 'choice_widget_expanded'. #}
            {% for field in boolFields %}
                {{ form_row(field) }}
            {% endfor %}

        </div>

        {# --- Bouton de Soumission --- #}
        <div class="pt-8 border-t border-gray-700 mt-8">
            <button type="submit" class="w-full inline-flex justify-center py-4 px-6 border border-transparent
                                     rounded-xl shadow-lg text-lg font-bold text-white bg-indigo-600
                                     hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2
                                     focus:ring-indigo-500 focus:ring-offset-gray-800 transition duration-150 transform hover:scale-[1.01]">
                {{ member.id ? 'Sauvegarder les Modifications' : 'Créer le Membre' }}
            </button>
        </div>

        {{ form_end(form) }}

    </div>

    {# --- NOUVELLE SECTION: LISTE DES COTISATIONS --- #}
    {% if member.membersCotisations is defined %}
        <div class="w-full mx-auto bg-gray-800 p-4 sm:p-8 md:p-10 rounded-xl shadow-2xl border border-gray-700 mt-8">
            <h3 class="text-2xl font-bold text-white border-b border-gray-700 pb-3 mb-6">
                Liste des Cotisations
            </h3>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-700">
                    <thead>
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                            Période
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                            Montant
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">
                            Statut
                        </th>
                        <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-400 uppercase tracking-wider">
                            Actions
                        </th>
                    </tr>
                    </thead>
                    <tbody class="bg-gray-800 divide-y divide-gray-700 text-white">

                    {# Itération sur la collection de cotisations #}
                    {% for cotisation in member.membersCotisations %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">
                                {{ cotisation.startDate|date('d/m/Y') }} - {{ cotisation.endDate|date('d/m/Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                                {{ cotisation.amount|format_currency('EUR', locale='fr') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm">
                                {% if cotisation.isPaid %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-700 text-green-100">
                                    Payée
                                </span>
                                {% else %}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-700 text-red-100">
                                    Non payée
                                </span>
                                {% endif %}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                {% if not cotisation.isPaid %}
                                    <a href="{{ path('admin_member_edit', {'id': member.id,'idValidateCota':cotisation.id}) }}"
                                       class="text-green-400 hover:text-green-200 transition duration-150 mr-3">
                                        Valider le paiement
                                    </a>
                                    <a href="{{ path('admin_member_edit', {'id': member.id,'idLinkCota':cotisation.id}) }}"
                                       class="text-indigo-400 hover:text-indigo-200 transition duration-150">
                                        Envoyer lien
                                    </a>
                                {% else %}
                                    <span class="text-gray-500">Aucune action requise</span>
                                {% endif %}
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-center text-gray-500">
                                Aucune cotisation trouvée pour ce membre.
                            </td>
                        </tr>
                    {% endfor %}

                    </tbody>
                </table>
            </div>

        </div>
    {% endif %}


    {# --- SCRIPT JAVASCRIPT POUR LA PRÉVISUALISATION D'IMAGE --- #}
    <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.members.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 %}
