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

{% block title %}Détail de la manifestation{% endblock %}

{% block body %}

    <h1 class="h1 mb-4">Détail de la manifestation</h1>

    <div class="grid grid-cols-2 gap-3">
        <div class="flex flex-col gap-2">
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Informations générales</h2>
                    <div class="flex gap-1">
                        <a href="{{ path('manifestation_show', { slug: manifestation.slug }) }}"
                           class="btn-secondary btn-small"
                           target="_blank">Prévisualiser</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="grid grid-cols-2 gap-2 mb-4">
                        {% if manifestation.banner %}
                            <p class="">
                                <span class="text-gray-500">Affiche :</span><br>
                                <img src="{{ vich_uploader_asset(manifestation, 'bannerFile') | imagine_filter('miniature') }}"
                                     alt="{{ manifestation.title }}" class="max-h-[100px] mt-1">
                            </p>
                        {% endif %}
                        <p>
                            <span class="text-gray-500">Titre :</span><br>
                            <span class="text-xl">{{ manifestation.title }}</span>
                        </p>
                    </div>

                    <div class="grid grid-cols-1 gap-2">
                        <p>
                            <span class="text-gray-500">Dates :</span><br>
                            <span class="text-xl">{{ manifestation.startDate|date('d/m/Y') }} → {{ manifestation.endDate|date('d/m/Y') }}</span>
                        </p>
                        <p>
                            <span class="text-gray-500">Inscriptions :</span><br>
                            <span class="text-xl">
                        {{ manifestation.registrationStart ? manifestation.registrationStart|date('d/m/Y') : '—' }}
                        →
                        {{ manifestation.registrationEnd ? manifestation.registrationEnd|date('d/m/Y') : '—' }}
                    </span>
                        </p>
                        <p>
                            <span class="text-gray-500">Statuts :</span><br>
                            <span class="text-xl flex gap-1 items-center">
                        {% if manifestation.isPublished %}{{ icon('valid', true) }} Publiée{% else %}{{ icon('invalid', true) }} Brouillon{% endif %}
                                {% if manifestation.isPaid %} | Payante{% endif %}
                                {% if manifestation.isTemplate %} | Modèle{% endif %}
                    </span>
                        </p>
                    </div>
                </div>
                <div class="card-footer">
                    <a class="btn-primary btn-small" href="{{ path('admin_manifestation_edit', { id : manifestation.id }) }}">
                        Modifier
                    </a>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Description</h2>
                    <a class="btn-primary btn-small" href="{{ path('admin_manifestation_edit', { id : manifestation.id }) }}">
                        Modifier
                    </a>
                </div>
                <div class="card-body">
                    <p class="text-gray-800 whitespace-pre-wrap">{{ manifestation.description|default('Aucune description.') }}</p>
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Documents publics</h2>
                    <a href="{{ path('admin_manifestation_public_doc_upload', { id: manifestation.id }) }}"
                       class="btn-secondary btn-small">Ajouter un document</a>
                </div>

                <div class="card-body space-y-2">
                    {% if manifestation.manifestationPublicDocuments|length > 0 %}
                        <ul class="space-y-1">
                            {% for doc in manifestation.manifestationPublicDocuments %}
                                <li class="flex items-center justify-between border-b pb-2">
                                    <div class="flex items-center gap-4">
                                        {% if doc.mimeType starts with 'image/' %}
                                            <img src="{{ vich_uploader_asset(doc, 'documentFile') | imagine_filter('miniature') }}"
                                                 alt="{{ doc.name }}"
                                                 class="w-12 h-12 object-cover rounded shadow">
                                        {% elseif doc.mimeType == 'application/pdf' %}
                                            <img src="{{ asset('img/back/manifestation/pdf.png') }}"
                                                 alt="PDF"
                                                 class="w-12 h-12 object-contain">
                                        {% else %}
                                            <img src="{{ asset('img/back/manifestation/download.png') }}"
                                                 alt="Fichier"
                                                 class="w-12 h-12 object-contain">
                                        {% endif %}

                                        <div>
                                            <span class="font-medium">{{ doc.name }}</span><br>
                                            <small class="text-gray-500">{{ doc.mimeType }}</small><br>
                                            {% if doc.IncludeInSummaryEmail %}
                                                <small class="text-red-500">Inclus dans l'email de résumé</small>
                                            {% endif %}
                                            {% if not doc.isVisible %}
                                                <div class="text-xs text-orange-500">Non visible</div>
                                            {% endif %}
                                            {% if not doc.isDownloadable %}
                                                <div class="text-xs text-red-500">Non téléchargeable</div>
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-3">
                                        <a href="{{ vich_uploader_asset(doc, 'documentFile') }}"
                                           target="_blank"
                                           class="text-primary hover:underline">Voir</a>

                                        <a href="{{ path('admin_manifestation_public_doc_edit', {
                                            id: manifestation.id,
                                            docId: doc.id
                                        }) }}" class="text-contrast hover:underline">
                                            Éditer
                                        </a>

                                        <form method="post"
                                              action="{{ path('admin_manifestation_public_doc_delete', {
                                                  id: manifestation.id,
                                                  docId: doc.id
                                              }) }}"
                                              onsubmit="return confirm('Supprimer ce fichier ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_public_doc_' ~ doc.id) }}">
                                            <button class="text-red-600 hover:underline" style="background: none; border: none;">
                                                Supprimer
                                            </button>
                                        </form>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-gray-600">Aucun document public pour cette manifestation.</p>
                    {% endif %}
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Demande de matériels</h2>
                    <a href="{{ path('admin_manifestation_material_new', { id: manifestation.id }) }}" class="btn-secondary btn-small">
                        Nouvelle demande
                    </a>
                </div>

                <div class="card-body space-y-6">
                    {% if manifestation.manifestationMaterialRequests|length > 0 %}
                        {% for request in manifestation.manifestationMaterialRequests %}
                            <div class="flex items-start gap-4">
                                <div class="w-full">
                                    <p class="text-lg font-semibold mb-1">{{ request.representant }}</p>
                                    <p class="text-sm text-gray-600">📧 {{ request.mail }}<br>📞 {{ request.telephone }}<br>📅 Retour prévu le {{ request.dateRetour|date('d/m/Y') }}</p>

                                    <hr class="my-3">

                                    <div class="text-sm space-y-2">
                                        <p class="font-semibold">Matériel demandé :</p>
                                        <ul class="grid grid-cols-3 gap-2">
                                            {% if request.nbTables %}<li>🪑 Tables : {{ request.nbTables }}</li>{% endif %}
                                            {% if request.nbBancs %}<li>🪑 Bancs : {{ request.nbBancs }}</li>{% endif %}
                                            {% if request.nbChaises %}<li>🪑 Chaises : {{ request.nbChaises }}</li>{% endif %}
                                            {% if request.nbBarrieres %}<li>🚧 Barrières : {{ request.nbBarrieres }}</li>{% endif %}
                                            {% if request.nbGrilles %}<li>🪜 Grilles : {{ request.nbGrilles }}</li>{% endif %}
                                            {% if request.nbPodiums %}<li>🎤 Podiums : {{ request.nbPodiums }}</li>{% endif %}
                                            {% if request.nbPraticables %}<li>🧱 Praticables : {{ request.nbPraticables }}</li>{% endif %}
                                            {% if request.nbPodiumRoulants %}<li>🚚 Podiums Roulants : {{ request.nbPodiumRoulants }}</li>{% endif %}
                                            {% if request.nbLogetteElectriqueMobile %}<li>🔌 Logette électrique : {{ request.nbLogetteElectriqueMobile }}</li>{% endif %}
                                            {% if request.nbRalonge %}<li>🧵 Rallonges 32A : {{ request.nbRalonge }}</li>{% endif %}
                                            {% if request.nbUrnes %}<li>🗳 Urnes : {{ request.nbUrnes }}</li>{% endif %}
                                            {% if request.nbIsoloirs %}<li>🛖 Isoloirs : {{ request.nbIsoloirs }}</li>{% endif %}
                                        </ul>
                                    </div>

                                    {% if request.sentToTownhall %}
                                        <div class="bg-green-50 border border-green-200 text-green-700 text-sm rounded p-3 mt-4">
                                            ✅ Cette demande a déjà été envoyée à la mairie.
                                            <br>👉 Si vous souhaitez transmettre une nouvelle demande, merci d’en créer une nouvelle.
                                        </div>
                                    {% else %}
                                        <p class="text-sm text-gray-600 mt-4">❌ Demande non envoyée à la mairie</p>
                                    {% endif %}

                                    <div class="flex justify-end items-center gap-4 mt-4">
                                        <a target="_blank" href="{{ path('admin_manifestation_material_pdf', { id: manifestation.id, requestId: request.id }) }}"
                                           class="text-sm text-primary hover:underline">🧾 Voir le PDF</a>

                                        {% if not request.sentToTownhall %}
                                            <a href="{{ path('admin_manifestation_material_edit', { id: manifestation.id, requestId: request.id }) }}"
                                               class="text-sm text-yellow-500 hover:underline">Éditer</a>

                                            <form action="{{ path('admin_manifestation_material_confirm_mail', {
                                                id: manifestation.id,
                                                requestId: request.id
                                            }) }}" method="get">
                                                <button type="submit" class="text-sm text-blue-600 hover:underline">📩 Envoyer</button>
                                            </form>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <p class="text-gray-600">Aucune demande de matériel enregistrée.</p>
                    {% endif %}
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h2 class="h4">Drive – Fichiers</h2>
                </div>
                <div class="card-body">
                    <form action="{{ path('admin_manifestation_drive_upload_ajax', { id: manifestation.id }) }}"
                          class="dropzone"
                          id="manifestation-dropzone"
                          enctype="multipart/form-data">
                        <div class="dz-message">Déposez vos fichiers ici ou cliquez pour les choisir.</div>
                    </form>

                    <p class="text-sm text-gray-500 mt-2">Formats acceptés : PDF, JPG, PNG, HEIC, HEIF, WEBP</p>
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Documents (Drive)</h2>
                    <a href="{{ path('admin_manifestation_drive_upload', { id: manifestation.id }) }}" class="btn-secondary btn-small">Ajouter un document</a>
                </div>
                <div class="card-body space-y-2">
                    {% if manifestation.manifestationDriveFiles|length > 0 %}
                        <ul class="space-y-1">
                            {% for file in manifestation.manifestationDriveFiles %}
                                <li class="flex items-center justify-between border-b pb-2">
                                    <div class="flex items-center gap-4">
                                        {% if file.mimeType starts with 'image/' %}
                                            <img src="{{ asset('upload/manifestation_drive/' ~ file.filePath) | imagine_filter('miniature') }}"
                                                 alt="{{ file.name }}"
                                                 class="w-12 h-12 object-cover rounded shadow">
                                        {% elseif file.mimeType == 'application/pdf' %}
                                            <img src="{{ asset('img/back/manifestation/pdf.png') }}"
                                                 alt="PDF"
                                                 class="w-12 h-12 object-contain">
                                        {% else %}
                                            <img src="{{ asset('img/back/manifestation/png.png') }}"
                                                 alt="Fichier"
                                                 class="w-12 h-12 object-contain">
                                        {% endif %}

                                        <div>
                                            <span class="font-medium">{{ file.name }}</span><br>
                                            <small class="text-gray-500">{{ file.mimeType }}</small>
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-3">
                                        <a href="{{ asset('upload/manifestation_drive/' ~ file.filePath) }}"
                                           target="_blank"
                                           class="text-primary hover:underline">Voir</a>
                                        <form method="post"
                                              action="{{ path('admin_manifestation_drive_delete', { id: manifestation.id, fileId: file.id }) }}"
                                              onsubmit="return confirm('Supprimer ce fichier ?');">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete_drive_file_' ~ file.id) }}">
                                            <button class="text-red-600 hover:underline" style="background: none; border: none;">Supprimer</button>
                                        </form>
                                        {% include 'admin/manifestation/drive/_rename.html.twig' with {
                                            id: file.id,
                                            name: file.name,
                                            url: path('admin_manifestation_drive_rename_ajax', { id: manifestation.id, fileId: file.id })
                                        } %}

                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    {% else %}
                        <p class="text-gray-600">Aucun document n’a encore été ajouté.</p>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="flex flex-col gap-2">
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Champs personnalisés</h2>
                    <a href="{{ path('admin_manifestation_field_new', { id: manifestation.id }) }}"
                       class="btn-secondary btn-small">Ajouter un champ</a>
                </div>
                <div class="card-body">
                    {% if manifestation.manifestationFields|length > 0 %}
                        <div class="overflow-x-auto">
                            <table class="table table-sm">
                                <thead>
                                <tr>
                                    <th>Nom technique</th>
                                    <th>Label</th>
                                    <th>Type</th>
                                    <th>Obligatoire</th>
                                    <th>Position</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for field in manifestation.manifestationFields|sort((a, b) => a.position <=> b.position) %}
                                    <tr>
                                        <td><code>{{ field.name }}</code></td>
                                        <td>{{ field.label }}</td>
                                        <td>{{ field.type }}</td>
                                        <td>{{ field.required ? icon('valid', true) : icon('invalid', true) }}</td>
                                        <td>{{ field.position }}</td>
                                        <td>
                                <span class="flex gap-2">
                                    <a href="{{ path('admin_manifestation_field_edit', { id: manifestation.id, fieldId: field.id }) }}"
                                       class="text-contrast">
                                        {{ icon('edit', true) }}
                                    </a>

                                <confirm-delete data-action="{{ path('admin_manifestation_field_delete', {
                                    id: manifestation.id,
                                    fieldId: field.id
                                }) }}">
                                </confirm-delete>
                                </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

                        </div>
                    {% else %}
                        <p>Aucun champ personnalisé pour cette manifestation.</p>
                    {% endif %}
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Produits proposés</h2>
                    <a href="{{ path('admin_manifestation_product_new', { id: manifestation.id }) }}"
                       class="btn-secondary btn-small">
                        Ajouter un produit
                    </a>
                </div>
                <div class="card-body">
                    {% if manifestation.manifestationProducts|length > 0 %}
                        <div class="w-full overflow-x-auto">
                            <table class="table-auto min-w-[1100px] w-full text-sm text-left border-collapse">
                                <thead class="bg-gray-50">
                                <tr>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Nom</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Image</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Prix de base</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Quantité max/utilisateur</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Stock total</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Vente</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Actif</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for product in manifestation.manifestationProducts|sort((a, b) => a.position <=> b.position) %}
                                    <tr class="hover:bg-gray-50 transition">
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">{{ product.title }}</td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {% if product.picture %}
                                                <img src="{{ vich_uploader_asset(product, 'pictureFile') | imagine_filter('miniature') }}"
                                                     alt="{{ product.title }}" class="max-h-[50px] rounded">
                                            {% endif %}
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {{ product.price|number_format(2, ',', ' ') }} €
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {{ product.maxQuantityPerUser ?? '—' }}
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {{ product.totalAvailable ?? '—' }}
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {{ product.saleStart ? product.saleStart|date('d/m/Y H:i') : '—' }} →
                                            {{ product.saleEnd ? product.saleEnd|date('d/m/Y H:i') : '—' }}
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                            {{ product.enabled ? icon('valid', true) : icon('invalid', true) }}
                                        </td>
                                        <td class="whitespace-nowrap px-4 py-2 align-middle">
                                    <span class="flex gap-2">
                                        <a href="{{ path('admin_manifestation_product_edit', {
                                            id: manifestation.id,
                                            productId: product.id
                                        }) }}" class="text-contrast" title="Éditer">
                                            {{ icon('edit', true) }}
                                        </a>
                                        <a href="{{ path('admin_manifestation_product_show', {
                                            id: manifestation.id,
                                            productId: product.id
                                        }) }}" class="text-primary" title="Gérer les options">
                                            {{ icon('plus', true) }}
                                        </a>
                                        <confirm-delete data-action="{{ path('admin_manifestation_product_delete', {
                                            id: manifestation.id,
                                            productId: product.id
                                        }) }}">
                                        </confirm-delete>
                                    </span>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p>Aucun produit n’est encore associé à cette manifestation.</p>
                    {% endif %}
                </div>
            </div>
            <div class="card">
                <div class="card-header flex justify-between items-center">
                    <h2 class="h4">Inscriptions / Commandes récentes</h2>
                    <a href="{{ path('admin_manifestation_registration_index', { id: manifestation.id }) }}"
                       class="text-sm text-primary hover:underline">Voir tout</a>
                </div>
                <div class="card-body space-y-2 text-sm">
                    {% if manifestationRegistrations|length > 0 %}
                        <div class="w-full overflow-x-auto">
                            <table class="table-auto min-w-[1100px] w-full text-sm text-left border-collapse">
                                <thead class="bg-gray-50">
                                <tr>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Nom</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Email</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Produits</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Montant</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Date</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Statut</th>
                                    <th class="whitespace-nowrap px-4 py-2 font-semibold text-gray-600">Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                {% for registration in manifestationRegistrations %}
                                    {% set prenomField = registration.fields|filter(f => f.field.name == 'firstname')|first %}
                                    {% set nomField = registration.fields|filter(f => f.field.name == 'lastname')|first %}
                                    {% set emailField = registration.fields|filter(f => f.field.name == 'email')|first %}

                                    <tr class="hover:bg-gray-50 transition border-t">
                                        <td class="px-4 py-2">
                                            {% if registration.user %}
                                                {{ registration.user.fullname }}
                                            {% else %}
                                                {% set prenom = prenomField is defined ? prenomField.value : '' %}
                                                {% set nom = nomField is defined ? nomField.value : '' %}
                                                {{ prenom ~ ' ' ~ nom ?: '—' }}
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-2">
                                            {% if registration.user %}
                                                {{ registration.user.email }}
                                            {% else %}
                                                {{ emailField is defined and emailField.value ? emailField.value : '—' }}
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-2">
                                            {% for product in registration.products %}
                                                <div>{{ product.product.title }} × {{ product.quantity }}</div>
                                            {% endfor %}
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            {{ registration.totalAmount|number_format(2, ',', ' ') }} €
                                        </td>
                                        <td class="px-4 py-2 whitespace-nowrap">
                                            {{ registration.createdAt|date('d/m/Y H:i') }}
                                        </td>
                                        <td class="px-4 py-2">
                                            {% if registration.isPaid %}
                                                <span class="text-green-600 font-semibold">Payé</span>
                                            {% else %}
                                                <span class="text-red-600 font-semibold">Non payé</span>
                                            {% endif %}
                                        </td>
                                        <td class="px-4 py-2">
                                            <a href="{{ path('admin_manifestation_registration_show', { id: registration.id }) }}"
                                               class="btn btn-sm btn-outline">Voir</a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <p class="text-gray-500">Aucune inscription pour le moment.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts_end %}
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script>
    Dropzone.options.manifestationDropzone = {
        paramName: 'file',
        maxFilesize: 10,
        acceptedFiles: '.pdf,.jpg,.jpeg,.png,.heic,.heif,.webp',
        dictDefaultMessage: "Déposez vos fichiers ici ou cliquez pour les choisir.",
        success: function (file, response) {
            location.reload();
        },
        error: function (file, message) {
            alert("Erreur lors de l'upload : " + message);
        }
    };
</script>

    <script>
        function toggleRenameInput(id) {
            const span = document.querySelector(`[data-display-name="${id}"]`);
            const input = document.querySelector(`[data-input-name="${id}"]`);

            span.classList.add('hidden');
            input.classList.remove('hidden');
            input.focus();
        }

        function handleRenameKey(e, id) {
            if (e.key === 'Enter') {
                const input = document.querySelector(`[data-input-name="${id}"]`);
                const span = document.querySelector(`[data-display-name="${id}"]`);
                const url = input.dataset.url;
                const newName = input.value;

                fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: new URLSearchParams({ name: newName })
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            span.textContent = data.newName;
                            span.classList.remove('hidden');
                            input.classList.add('hidden');
                        } else {
                            alert('Erreur : ' + data.error);
                        }
                    });
            }
        }
    </script>

{% endblock %}