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

{% block body %}
    <div class="flex items-center justify-between">
        <h1 class="h1">Envoyer un email</h1>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h2 class="h4">Formulaire d'envoi</h2>
            <a href="{{ backUrl }}" class="btn-secondary">Retour</a>
        </div>

        <div class="card-body p0">
            <div class="p-2">
                <form action="{{ path('admin_email_send_process') }}" method="POST">
                    <div class="grid grid-cols-2 gap-4">
                        <div class="form-group">
                            <label for="from">De :</label>
                            <div class="flex items-center bg-gray-100 rounded px-2 py-1">
                                <input type="text" name="from" id="from" value="contact"
                                       class="form-control border-none bg-transparent focus:ring-0 focus:outline-none w-auto">
                                <span class="text-gray-500 ml-1">@asmanissieux.fr</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="template">Choisissez un modèle :</label>
                            <select name="template" id="template" required class="form-control">
                                {% for template in templates %}
                                    <option value="{{ template.id }}">{{ template.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group mt-4">
                        <label for="emailBody">Modifier le contenu :</label>
                        <textarea name="emailBody" id="emailBody" class="ckeditor-text"></textarea>
                    </div>

                    <div class="mt-4">
                        <p class="mb-2"><strong>{{ count }}</strong> membres sélectionnés.</p>
                        <h3 class="h4">Membres sélectionnés :</h3>
                        <div class="border rounded p-3 bg-gray-100 max-h-60 overflow-y-auto">
                            <ul class="list-none space-y-1">
                             {% for member in selectedMembers %}
                                <li class="px-2 py-1 border-b border-gray-300">
                                    {% if member is not null %}
                                        {% if member.user is defined and member.user is not null %}
                                            <span class="font-medium">
                                                {{ member.user.lastname|default('—')|upper }} {{ member.user.firstname|default('')|ucFirst }}
                                            </span>
                                        {% else %}
                                            {% set prenomField = member.fields|filter(f => f.field.name == 'firstname')|first %}
                                            {% set nomField = member.fields|filter(f => f.field.name == 'lastname')|first %}
                                            <span class="font-medium">
                                                {{ nomField is defined ? nomField.value|default('—')|upper : '—' }} {{ prenomField is defined ? prenomField.value|default('')|ucFirst : '' }}
                                            </span>
                                        {% endif %}
                                    {% else %}
                                        <span class="font-medium text-gray-400">— (Non défini)</span>
                                    {% endif %}
                                </li>
                            {% endfor %}

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

                    <div class="flex justify-end mt-4">
                        <button type="submit" class="btn-primary-outline" data-btn="xs">
                            Envoyer les emails
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts_end %}
    <script src="{{ asset('/ckeditor/ckeditor.js') }}"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const templateSelect = document.getElementById("template");
            const emailBody = CKEDITOR.replace("emailBody");

            templateSelect.addEventListener("change", function () {
                fetch(`/admin/email/api/template/${this.value}`)
                    .then(response => response.json())
                    .then(data => {
                        emailBody.setData(data.body);
                    });
            });

            if (templateSelect.value) {
                templateSelect.dispatchEvent(new Event("change"));
            }
        });
    </script>
{% endblock %}