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

{% block body %}
    {% if order.cancel %}
        <alert-message type="error">Cette commande a été annulée</alert-message>
    {% endif %}

    <div class="flex items-center justify-between mt-4">
        <h1 class="h1">Commande de {{ order.user.fullName }}</h1>
        <a href="{{ path('admin_order_stage_index') }}" class="btn-primary">Retour</a>
    </div>

    <div class="grid grid-cols-3-1 gap-3 mt-2">
        <div class="flex flex-col gap-2">
            {# Bloc Info Commande #}
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Information de la commande</h2>
                    <div class="actions">
                        <button class="btn-success-outline btn-small add-payment">Saisir un paiement</button>
                        <button class="btn-primary-outline btn-small history-payment">Historique des paiements</button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-2 gap-2">
                        <p><span class="text-gray-500">Référence :</span><br><span class="text-xl">{{ order.reference }}</span></p>
                        <p><span class="text-gray-500">Moyen de paiement :</span><br><span class="text-xl">{{ order.paymentMethod.name }}</span></p>
                        <p><span class="text-gray-500">Total :</span><br><span class="text-xl">{{ order.total }} €</span></p>
                        <p><span class="text-gray-500">Reste à payer :</span><br><span class="text-xl">{{ order.outstandingBalance ?? 0 }} €</span></p>
                        <p><span class="text-gray-500">Statut du paiement :</span><br><span class="text-xl">{{ order.isPaid ? 'Payée' : 'Impayée' }}</span></p>
                    </div>
                </div>
            </div>

            {# Bloc par enfant #}
            {% for profilId, profilData in groupedStages %}
                <div class="grid grid-cols-3-1 gap-1">
                    <div class="card">
                        <div class="card-header">
                            <h2 class="h4">{{ profilData.profil.lastname|upper }} {{ profilData.profil.firstname|capitalize }}</h2>
                            <a class="btn-small btn-primary"
                               href="{{ path('admin_member_edit', {
                                   id: profilData.profil.id,
                                   referer: path('admin_order_stage_show', { id: order.id })
                               }) }}">
                                Éditer le profil
                            </a>

                        </div>
                        <div class="card-body">
                            {% if profilData.profil.mimePicture in ["image/jpeg", "image/png", "application/pdf"] %}
                                <img src="{{ vich_uploader_asset(profilData.profil, 'pictureFile')|imagine_filter('miniature_picture_profil') }}" class="max-h-[130px] rounded mb-2" alt="{{ profilData.profil.fullname }}">
                            {% endif %}

                            <div class="grid grid-cols-2 gap-2">
                                <p><span class="text-gray-500">Nom :</span><br><span class="text-xl">{{ profilData.profil.lastname|capitalize }}</span></p>
                                <p><span class="text-gray-500">Prénom :</span><br><span class="text-xl">{{ profilData.profil.firstname|capitalize }}</span></p>
                                <p><span class="text-gray-500">Date de naissance :</span><br><span class="text-xl">{{ profilData.profil.birthday|date('d/m/Y') }}</span></p>
                                <p><span class="text-gray-500">Lieu de naissance :</span><br><span class="text-xl">{{ profilData.profil.placeBirth }}</span></p>
                            </div>

                            <hr class="my-3">
                            <h3 class="text-lg font-semibold mb-2">Stages réservés :</h3>
                            <table class="table-auto w-full border border-gray-200">
                                <thead>
                                <tr class="bg-gray-100">
                                    <th class="border px-4 py-2">Nom</th>
                                    <th class="border px-4 py-2">Date</th>
                                    <th class="border px-4 py-2">Prix</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for stageItem in profilData.stages %}
                                    <tr>
                                        <td class="border px-4 py-2">{{ stageItem.stageDay.name }}</td>
                                        <td class="border px-4 py-2">{{ stageItem.stageDay.date|date('d/m/Y') }}</td>
                                        <td class="border px-4 py-2">{{ stageItem.price }} €</td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="h4">Documents</h2>
                        </div>
                        <div class="card-body">
                            <button class="btn-small btn-primary open-documents-modal" data-target="#modal-docs-{{ profilData.profil.id }}">Gérer les documents</button>
                        </div>
                    </div>

                    {# Modal Documents #}
                    <modal-box title="Documents de {{ profilData.profil.fullname }}" id="modal-docs-{{ profilData.profil.id }}" trigger=".open-documents-modal[data-target='#modal-docs-{{ profilData.profil.id }}']">
                        {{ include('admin/order/stage/_docs_block.html.twig', { profil: profilData.profil }) }}
                    </modal-box>
                </div>
            {% endfor %}
        </div>

        <div class="flex flex-col gap-2">
            {# Actions #}
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Actions</h2>
                </div>
                <div class="card-body space-y-2">
                    {% if order.cancel == false %}
                        {# Paiement #}
                        {% if order.isPaid == false %}
                            <a class="btn-outline-success w-full" href="{{ path('admin_order_stage_payment_valid', {id: order.id}) }}">
                                Valider le paiement
                            </a>
                        {% endif %}

                        {# Facture #}
                        <button class="btn-outline-success w-full open-invoice-modal">
                            Envoyer la facture
                        </button>

                        <hr>

                        {# Communication #}
                        <button class="btn-outline-primary w-full send-mail">
                            Envoyer un email
                        </button>
                        <button class="btn-outline-primary w-full add-reminder">
                            Émettre un rappel
                        </button>

                        <hr>

                        {# Annulation #}
                        <confirm-action
                                data-post="true"
                                data-action="{{ path('admin_order_stage_actions', {id: order.id, action: 'cancel'}) }}"
                                data-classname="!btn-outline-danger w-full"
                                data-message="Vous êtes sur le point d'annuler la commande.">
                            <span class="btn-outline-danger w-full block text-center">Annuler la commande</span>
                        </confirm-action>

                    {% else %}
                        <alert-message type="error">Cette commande a été annulée</alert-message>
                    {% endif %}
                </div>
            </div>



            {# Infos utilisateur #}
            <div class="card">
                <div class="card-header"><h2 class="h4">Parent</h2></div>
                <div class="card-body grid grid-cols-1">
                    <p><span class="text-gray-500">Nom :</span><br><span class="text-xl">{{ order.user.fullName }}</span></p>
                    <p><span class="text-gray-500">Email :</span><br><span class="text-xl">{{ order.user.email }}</span></p>
                    <p><span class="text-gray-500">Téléphone :</span><br><span class="text-xl">{{ order.user.phone }}</span></p>
                    <p><span class="text-gray-500">Adresse :</span><br><span class="text-xl">{{ order.user.fullAddress }}</span></p>
                </div>
            </div>

            {# Rappels #}
            <div class="card">
                <div class="card-header"><h2 class="h4">Rappels</h2></div>
                <div class="card-body">
                    {% if order.reminders is empty %}
                        <p class="text-center">Aucun rappel</p>
                    {% else %}
                        {% for reminder in order.reminders %}
                            <div class="flex justify-between items-center">
                                <p>{{ reminder.name }}</p>
                                <p>{{ reminder.dateReminder|date('d/m/Y') }}</p>
                            </div>
                            <hr class="my-2">
                        {% endfor %}
                    {% endif %}
                </div>
            </div>

            {# Logs #}
            <div class="card">
                <div class="card-header"><h2 class="h4">Historique</h2></div>
                <div class="card-body">
                    {% if order.logs is empty %}
                        <p class="text-center">Aucun log</p>
                    {% else %}
                        {% for log in order.logs|reverse|slice(0, 5) %}
                            <div class="flex justify-between items-center">
                                <p>{{ log.name }}</p>
                                <p>{{ log.createdAt|date('d/m/Y') }}</p>
                            </div>
                            <hr class="my-2">
                        {% endfor %}
                        <button class="btn-small btn-primary open-log">Voir tous les logs</button>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>


    <modal-box title="Ajouter un rappel" trigger=".add-reminder">
        <alert-message class="mb-4" type="primary">Un mail vous sera envoyé à la date du rappel</alert-message>
        {{ include('admin/order/_common/_reminder.html.twig') }}
    </modal-box>

    <modal-box title="Envoyer un mail" trigger=".send-mail">
        {{ include('admin/order/_common/_email.html.twig') }}
    </modal-box>

    <modal-box title="Historique des paiements" trigger=".history-payment">
        {{ include('admin/order/_common/_payments.html.twig') }}
    </modal-box>

    <modal-box title="Saisir un paiement" trigger=".add-payment">
        {{ include('admin/order/_common/_add_payment.html.twig') }}
    </modal-box>

    <modal-box title="Intégralité des logs" trigger=".open-log">
        {{ include('admin/order/_common/_logs.html.twig') }}
    </modal-box>

    <modal-box title="Ajouter un commentaire à la facture" trigger=".open-invoice-modal">
        <form method="post" action="{{ path('admin_order_licence_actions', {id: order.id, action: 'invoice'}) }}">
            <div class="form-group mb-4">
                <label for="invoice_comment" class="block text-sm font-medium text-gray-700 mb-1">Commentaire (optionnel)</label>
                <textarea id="invoice_comment" name="invoice_comment" rows="4" class="form-control" placeholder="Écrivez un commentaire à insérer sur la facture..."></textarea>
            </div>
            <button type="submit" class="btn-primary w-full">Envoyer la facture</button>
        </form>
    </modal-box>
{% endblock %}

{% block javascripts_end %}
    <script>
        document.addEventListener('change', async (e) => {
            const target = e.target;
            if (!target.classList.contains('validate-doc-checkbox')) return;

            const profilId = target.dataset.profilId;
            const docType = target.dataset.docType;
            const checked = target.checked;

            try {
                const response = await fetch('/admin/commande/stage/document-check', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: new URLSearchParams({
                        profilId,
                        docType,
                        checked: checked.toString()
                    })
                });

                const result = await response.json();
                if (!result.success) {
                    alert('Erreur : ' + result.message);
                    target.checked = !checked;
                }
            } catch (err) {
                alert('Erreur réseau');
                target.checked = !checked;
            }
        });
    </script>
{% endblock %}