{% extends 'admin/base.twig' %}
{% block title %}AG (Assemblée Générale){% endblock %}
{% block page_title %}AG (Assemblée Générale){% endblock %}

{% block body %}
    <div class="p-4 sm:p-6 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 min-h-screen">

        {# Titre Principal (Créer / Modifier) #}
        <h1 class="text-2xl font-bold mb-6 border-b pb-2 border-gray-200 dark:border-gray-700">
            {% if ag.vars.value.id is defined and ag.vars.value.id is not null %}
                Modifier l'Assemblée Générale
            {% else %}
                Créer une nouvelle Assemblée Générale
            {% endif %}
        </h1>

        {% form_theme ag 'form_admin.twig' %}

        {# ============================================== #}
        {# FORMULAIRE 1: DÉTAILS DE L'AG (Non répété ici) #}
        {# ============================================== #}
        {{ form_start(ag, {'attr': {'class': 'space-y-6 mb-10'}}) }}

        {# Section 1: Détails de l'AG #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700">
            <h2 class="col-span-full text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Détails de l'AG</h2>
            {{ form_row(ag.agDateAt) }}
            {{ form_row(ag.closedAt) }}
            {{ form_row(ag.type) }}
            <div class="md:col-span-1"></div>
        </div>

        {# Section 2: Localisation #}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700">
            <h2 class="col-span-full text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Lieu</h2>
            {{ form_row(ag.locate) }}
            {{ form_row(ag.locateZipcode) }}
            {{ form_row(ag.locateCity) }}
        </div>

        {# Section 3: Rôles #}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700">
            <h2 class="col-span-full text-lg font-semibold text-gray-700 dark:text-gray-200 mb-2">Rôles</h2>
            {{ form_row(ag.president) }}
            {{ form_row(ag.secretaire) }}
        </div>

        {# Boutons d'action pour le formulaire AG #}
        <div class="flex justify-end space-x-4 pt-6 border-t border-gray-200 dark:border-gray-700">
            <a href="{{ path('admin_ag') }}"
               class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Annuler
            </a>
            <button type="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Enregistrer l'AG
            </button>
        </div>

        {{ form_end(ag) }}

        {# ============================================== #}
        {# BLOC GESTION DES MEMBRES (Non répété ici) #}
        {# ============================================== #}
        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Ajouter/Gérer les membres</h2>

            {% form_theme agMembers 'form_admin.twig' %}

            {{ form_start(agMembers, {'attr': {'class': 'space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700 mb-6'}}) }}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-end">
                <div class="md:col-span-2">{{ form_row(agMembers.member) }}</div>
                <div class="md:col-span-1">
                    <button type="submit" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        Ajouter le membre
                    </button>
                </div>
            </div>
            {{ form_end(agMembers) }}

            {# LISTE DES MEMBRES ACTUELS #}
            {% if ag.vars.value.mainMembers is defined and ag.vars.value.mainMembers|length > 0 %}
                <h3 class="text-lg font-semibold mt-8 mb-4 border-b pb-2 text-gray-700 dark:text-gray-300">
                    Liste des Membres Principaux ({{ ag.vars.value.mainMembers|length }})
                </h3>
                <ul class="space-y-3">
                    {% for memberAg in ag.vars.value.mainMembers %}
                        <li class="flex justify-between items-center p-3 rounded-md bg-white dark:bg-gray-800 shadow border border-gray-200 dark:border-gray-700">
                            <span class="text-gray-900 dark:text-gray-100 font-medium">
                                {{ memberAg.member.pseudo }} - <span class="text-sm font-normal text-gray-600 dark:text-gray-400">{{ memberAg.member.role }}</span>
                            </span>
                            <form method="POST" action="{{ path('admin_ag_edit',{id:ag.vars.value.id,idMember:memberAg.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir retirer {{ memberAg.member.pseudo }} de cette AG ?');">
                                <input type="hidden" name="_method" value="DELETE">
                                <button type="submit"
                                        class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-md text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150">
                                    Supprimer
                                </button>
                            </form>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="mt-4 p-4 text-center text-gray-500 dark:text-gray-400 border border-dashed rounded-lg">
                    Aucun membre principal n'est encore rattaché à cette Assemblée Générale.
                </p>
            {% endif %}
        </div>

        {# ============================================== #}
        {# BLOC ORDRES DU JOUR (ODJ) (Non répété ici) #}
        {# ============================================== #}
        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Ajouter un Ordre du Jour</h2>

            {% form_theme agOrder 'form_admin.twig' %}

            {# FORMULAIRE D'AJOUT D'ODJ #}
            {{ form_start(agOrder, {'attr': {'class': 'space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700 mb-6'}}) }}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{ form_row(agOrder.title) }}
                <div class="md:col-span-1 hidden md:block"></div>
            </div>
            {{ form_row(agOrder.description) }}
            <div class="flex justify-end pt-2">
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-teal-600 hover:bg-teal-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500">
                    Ajouter l'Ordre du Jour
                </button>
            </div>
            {{ form_end(agOrder) }}

            {# LISTE DES ORDRES DU JOUR ACTUELS #}
            {% if ag.vars.value.orders is defined and ag.vars.value.orders|length > 0 %}
                <h3 class="text-lg font-semibold mt-8 mb-4 border-b pb-2 text-gray-700 dark:text-gray-300">
                    Ordres du Jour ({{ ag.vars.value.orders|length }})
                </h3>
                <ul class="space-y-3">
                    {% for order in ag.vars.value.orders %}
                        <li class="p-4 rounded-md bg-white dark:bg-gray-800 shadow border border-gray-200 dark:border-gray-700">
                            <div class="flex justify-between items-start">
                                <span class="text-gray-900 dark:text-gray-100 font-medium text-base">
                                    {{ loop.index }}. {{ order.title }}
                                </span>
                                <form method="POST" action="{{ path('admin_ag_edit', {'id': ag.vars.value.id, 'orderId': order.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer cet Ordre du Jour : {{ order.title }} ?');">
                                    <input type="hidden" name="_method" value="DELETE">
                                    <button type="submit"
                                            class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-md text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150 ml-4">
                                        Supprimer
                                    </button>
                                </form>
                            </div>
                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 whitespace-pre-line">
                                {{ order.description|default('Aucune description fournie.') }}
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="mt-4 p-4 text-center text-gray-500 dark:text-gray-400 border border-dashed rounded-lg">
                    Aucun Ordre du Jour n'a encore été défini pour cette Assemblée Générale.
                </p>
            {% endif %}
        </div>

        {# ============================================== #}
        {# BLOC GESTION DES VOTES #}
        {# ============================================== #}
        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-700">
            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Enregistrer et Gérer les Votes</h2>

            {% form_theme agVote 'form_admin.twig' %}

            {# FORMULAIRE D'ENREGISTREMENT DE VOTE #}
            {{ form_start(agVote, {'attr': {'class': 'space-y-4 p-4 border rounded-lg bg-gray-50 dark:bg-gray-700 mb-6'}}) }}

            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                {{ form_row(agVote.member) }}
                {{ form_row(agVote.role) }}
                {{ form_row(agVote.pour) }}
                {{ form_row(agVote.contre) }}
            </div>

            <div class="flex justify-end pt-2">
                <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-pink-600 hover:bg-pink-700 dark:bg-pink-500 dark:hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500">
                    Enregistrer le Vote
                </button>
            </div>

            {{ form_end(agVote) }}

            {# NOUVEAU: LISTE DES VOTES ACTUELS #}
            {% if ag.vars.value.mainVote is defined and ag.vars.value.mainVote|length > 0 %}
                <h3 class="text-lg font-semibold mt-8 mb-4 border-b pb-2 text-gray-700 dark:text-gray-300">
                    Historique des Votes ({{ ag.vars.value.mainVote|length }})
                </h3>

                <ul class="space-y-3">
                    {% for vote in ag.vars.value.mainVote %}
                        <li class="p-4 rounded-md bg-white dark:bg-gray-800 shadow border border-gray-200 dark:border-gray-700 flex justify-between items-center">

                            <div>
                                <span class="text-gray-900 dark:text-gray-100 font-medium">
                                    {{ vote.member.pseudo }}
                                </span>
                                <span class="text-sm font-normal text-gray-600 dark:text-gray-400 ml-2">
                                    ({{ vote.role }})
                                </span>
                                <p class="mt-1 text-sm">
                                    <span class="text-green-600 font-semibold">Pour: {{ vote.pour|default(0) }}</span> |
                                    <span class="text-red-600 font-semibold">Contre: {{ vote.contre|default(0) }}</span>
                                </p>
                            </div>

                            {# Formulaire de Suppression du Vote #}
                            <form method="POST" action="{{ path('admin_ag_edit', {'id': agMain.id, 'agVoteId': vote.id}) }}" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce vote ?');">
                                <input type="hidden" name="_method" value="DELETE">
                                <button type="submit"
                                        class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-md text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition duration-150">
                                    Supprimer
                                </button>
                            </form>
                        </li>
                    {% endfor %}
                </ul>
            {% else %}
                <p class="mt-4 p-4 text-center text-gray-500 dark:text-gray-400 border border-dashed rounded-lg">
                    Aucun vote n'a encore été enregistré pour cette Assemblée Générale.
                </p>
            {% endif %}
        </div>

    </div>
{% endblock %}
