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

{% block body %}
    <div class="flex justify-between items-center mb-2 flex-wrap gap-2">
        <h1 class="h1">{{ licence.name }}</h1>
        <a href="{{ path('admin_licence_type') }}" class="btn-secondary btn-small">Retour</a>
    </div>

    {% if licence.active == false %}
        <alert-message type="error">Hors ligne.</alert-message>
    {% endif %}

    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="flex flex-col gap-2">
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Informations générales</h2>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-y-2 gap-x-3">
                        <p>
                            <span class="text-gray-500">Nom :</span><br>
                            <span class="text-xl break-words">{{ licence.name }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Type :</span><br>
                            <span class="text-xl">{{ licence.type }}</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header flex justify-between">
                    <h2 class="h4">Informations de vente</h2>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        <p>
                            <span class="text-gray-500">Quantité de base :</span><br>
                            <span class="text-xl">{{ licence.quantity }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Quantité restante :</span><br>
                            {% set remainingPlace = licence.quantity - remainingPlaces %}
                            <span class="text-xl mt-1 {{ remainingPlace|color_alert }}">{{ remainingPlace }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Âge minimum :</span><br>
                            <span class="text-xl">{{ licence.minAge }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Âge maximum :</span><br>
                            <span class="text-xl">{{ licence.maxAge }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Prix :</span><br>
                            <span class="text-xl">{{ licence.price }} €</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="flex flex-col gap-2">
            <div class="card">
                <div class="card-header flex justify-between">
                    <h2 class="h4">Responsable de catégorie</h2>
                    <button class="btn-primary btn-small add-manager">Ajouter</button>
                </div>
                <div class="card-body">
                    {% if licence.manager is empty %}
                        <p class="text-gray-500 italic">Aucun responsable dans cette catégorie...</p>
                    {% else %}
                        <div class="flex flex-col gap-3">
                            {% for manager in licence.manager %}
                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 relative">
                                    <p>
                                        <span class="text-gray-500">Nom :</span><br>
                                        <span class="text-xl">{{ manager.firstname }} {{ manager.lastname }}</span>
                                    </p>
                                    <p>
                                        <span class="text-gray-500">Email :</span><br>
                                        <span class="text-xl break-words">{{ manager.email }}</span>
                                    </p>
                                    <p>
                                        <span class="text-gray-500">Téléphone :</span><br>
                                        <span class="text-xl">{{ manager.phone }}</span>
                                    </p>

                                    <form method="post" action="{{ path('admin_licence_type_remove_manager', {licenceId: licence.id, userId: manager.id}) }}" class="absolute top-2 right-2">
                                        <input type="hidden" name="_token" value="{{ csrf_token('remove_manager_' ~ manager.id) }}">
                                        <button type="submit" class="btn-icon-danger btn-small" onclick="return confirm('Supprimer ce responsable ?')">
                                            {{ icon('trash', true) }}
                                        </button>
                                    </form>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Charte associée</h2>
                    <div class="flex gap-2">
                        {% if licence.rules %}
                            <button class="btn-secondary btn-small show-charte-modal">Voir la charte</button>
                            <a href="{{ path('admin_licence_rules_edit', { id: licence.id }) }}" class="btn-primary btn-small">Changer de charte</a>
                        {% else %}
                            <a href="{{ path('admin_licence_rules_edit', { id: licence.id }) }}" class="btn-primary btn-small">Associer une charte</a>
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    {% if licence.rules %}
                        <p class="text-gray-500 italic">Une charte est associée à cette licence. Cliquez sur "Voir la charte" pour la consulter.</p>
                    {% else %}
                        <p class="text-gray-500 italic">Aucune charte associée à cette licence.</p>
                    {% endif %}
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Liste des licenciés</h2>
                </div>
                <div class="card-body max-h-[400px] overflow-y-auto pr-2" id="licence-members-container">
                    <p class="text-gray-500 italic">Chargement...</p>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Actions</h2>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ path('admin_licence_type_send_list', { id: licence.id }) }}">
                        <input type="hidden" name="_token" value="{{ csrf_token('send_list_' ~ licence.id) }}">
                        <button type="submit" class="btn-primary btn-small w-full" onclick="return confirm('Envoyer la liste des licenciés aux responsables ?')">
                            ✉️ Envoyer la liste aux responsables
                        </button>
                    </form>

                </div>
            </div>
        </div>
    </div>


    <modal-box title="Ajouter un responsable" trigger=".add-manager">
        <form id="manager_form" method="post" action="{{ path('admin_licence_type_add_managers', {id: licence.id}) }}">
            <div id="manager-hidden-inputs"></div>
            <change-managers licence-id="{{ licence.id }}"></change-managers>
        </form>
    </modal-box>

    {% if licence.rules %}
        <modal-box title="Charte : {{ licence.rules.title }}" trigger=".show-charte-modal">
            <div class="text-base whitespace-pre-wrap max-h-[70vh] overflow-y-auto px-1">
                {{ licence.rules.text|raw }}
            </div>
        </modal-box>
    {% endif %}

{% endblock %}

{% block javascripts_end %}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('licence-members-container');
            const licenceId = {{ licence.id }};
            const seasonId = {{ app.user.seasonPreference.id ?? 'null' }};

            fetch(`/admin/licence/type/${licenceId}/members?season=${seasonId}`)
                .then(res => res.json())
                .then(data => {
                    container.innerHTML = '';
                    if (!data.length) {
                        container.innerHTML = '<p class="text-gray-500 italic">Aucun licencié dans cette catégorie.</p>';
                        return;
                    }

                    data.forEach(member => {
                        const div = document.createElement('div');
                        div.className = 'grid grid-cols-[1fr_auto_auto] items-center py-2 border-b last:border-none';

                        div.innerHTML = `
                            <p>
                                <span class="block text-gray-500 text-sm">Nom</span>
                                <span class="text-base font-medium">${member.fullname}</span>
                            </p>
                            <p>
                                <span class="block text-gray-500 text-sm">Date de naissance</span>
                                <span class="text-base">${member.birthday ?? ''}</span>
                            </p>
                            <a target="_blank" href="/admin/commande/licence/${member.orderId}" class="text-yellow-600 hover:text-yellow-800 transition">
                                {{ icon('eye')|raw }}
                            </a>
                        `;

                        container.appendChild(div);
                    });
                });
        });
    </script>
{% endblock %}