{% extends '@PrestaShop/Admin/layout.html.twig' %}

{% block content %}
<div class="col-sm-12">
    <div class="card">

        {% include '@Modules/polarisprestaconnector/views/templates/admin/nav.html.twig' %}

        <div class="card-body">

            <h2 style="text-transform: uppercase;">{{ 'Méta-catégories'|trans }}</h2>

            <p>
                Les méta-catégories sont des catégories <strong>virtuelles côté backoffice</strong>, construites
                par le module comme la <strong>combinaison logique</strong> de plusieurs catégories
                {{ backoffice }} existantes. L'objectif est de permettre de créer des catégories Prestashop
                dont le peuplement dépend de l'appartenance simultanée d'un produit à plusieurs catégories
                backoffice.
            </p>
            <p>
                Une fois créée, une méta-catégorie apparaît automatiquement dans la grille de
                <a href="{{ path('polarisprestaconnector_map_category', { 'type': 'metacat_' }) }}">Mapping catégories</a>
                et se configure exactement comme une catégorie ordinaire. Les entrées de mappage sont créées
                à la volée au fur et à mesure que la synchronisation rencontre les combinaisons de valeurs.
            </p>
            <div class="alert alert-info" role="alert">
                <strong>Important&nbsp;:</strong> la composition d'une méta-catégorie ne peut pas être modifiée
                après création (cela invaliderait tous les mappages déjà positionnés). Pour en changer la
                composition, supprimez-la et recréez-la, puis remappez-la.
            </div>

            {# ── Grille des méta-catégories existantes ────────────────────────── #}
            <h3 style="margin-top: 2em;">{{ 'Méta-catégories définies'|trans }}</h3>

            {% if metaRows is not empty %}
            <div style="margin: 1ex 2em;">
                <table class="grid-table table polarisprestaconnector">
                    <thead class="thead-default">
                        <tr class="columns-headers">
                            <th style="width: 25%;">Nom</th>
                            <th>Catégories {{ backoffice }} composantes</th>
                            <th style="width: 80px; text-align: center;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for row in metaRows %}
                        <tr>
                            <th><strong>{{ row.name }}</strong></th>
                            <td>{{ row.componentLabels | join(' + ') }}</td>
                            <td style="text-align: center;">
                                <form method="POST"
                                    action="{{ path('polarisprestaconnector_meta_categories') }}"
                                    style="display: inline;"
                                    onsubmit="return confirm('Supprimer la méta-catégorie « {{ row.name|e('js') }} » ?\n\nCette opération est définitive : la définition et tous les mappages associés seront effacés.\nUne resynchronisation sera nécessaire pour mettre à jour les produits.');">
                                    <input type="hidden" name="action" value="delete">
                                    <input type="hidden" name="guid" value="{{ row.guid }}">
                                    <button type="submit"
                                        class="btn tooltip-link js-link-row-action grid-modifier-row-link"
                                        data-toggle="pstooltip"
                                        data-original-title="Supprimer cette méta-catégorie">
                                        <i class="material-icons" style="color: #dc3545;">delete</i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <p class="text-muted" style="margin: 1ex 2em;">
                <em>Aucune méta-catégorie définie pour l'instant.</em>
            </p>
            {% endif %}

            {# ── Formulaire de création ────────────────────────────────────────── #}
            <h3 style="margin-top: 2em;">{{ 'Créer une nouvelle méta-catégorie'|trans }}</h3>

            {% if dynCats is empty %}
                <div class="alert alert-warning" role="alert">
                    Aucune catégorie dynamique {{ backoffice }} n'est encore connue du module.
                    Lancez une première synchronisation pour qu'il découvre les catégories disponibles,
                    puis revenez ici pour les combiner en méta-catégories.
                </div>
            {% else %}
            <form method="POST" action="{{ path('polarisprestaconnector_meta_categories') }}"
                style="margin: 1ex 2em;"
                onsubmit="return validateMetaCatForm(this);">
                <input type="hidden" name="action" value="create">

                <div class="form-group row">
                    <label for="meta-cat-name" class="col-sm-3 col-form-label">
                        Nom de la méta-catégorie <span class="text-danger">*</span>
                    </label>
                    <div class="col-sm-6">
                        <input type="text" id="meta-cat-name" name="name" class="form-control"
                            placeholder="ex.&nbsp;: RFS, Jeans longues tailles…"
                            maxlength="128" required>
                        <small class="form-text text-muted">
                            Ce nom apparaîtra comme libellé de la méta-catégorie dans la grille de mapping.
                        </small>
                    </div>
                </div>

                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">
                        Catégories composantes <span class="text-danger">*</span>
                        <br>
                        <small class="text-muted">
                            Cochez au moins <strong>2</strong> catégories. La méta-catégorie regroupera
                            les produits selon leur combinaison de valeurs sur ces catégories.
                        </small>
                    </label>
                    <div class="col-sm-9">
                        <div class="row">
                        {% for code, label in dynCats %}
                            <div class="col-sm-4" style="padding-bottom: .4em;">
                                <div class="form-check">
                                    <input class="form-check-input meta-cat-component"
                                        type="checkbox"
                                        id="comp-{{ code }}"
                                        name="components[]"
                                        value="{{ code }}">
                                    <label class="form-check-label" for="comp-{{ code }}">
                                        {{ label }}
                                    </label>
                                </div>
                            </div>
                        {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-sm-9 offset-sm-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="material-icons" style="vertical-align: middle;">add</i>
                            Créer la méta-catégorie
                        </button>
                    </div>
                </div>
            </form>

            <script>
                function validateMetaCatForm(form) {
                    var name = form.elements['name'].value.trim();
                    if (!name) {
                        alert('Veuillez saisir un nom pour la méta-catégorie.');
                        return false;
                    }
                    var checked = form.querySelectorAll('.meta-cat-component:checked');
                    if (checked.length < 2) {
                        alert('Veuillez cocher au moins 2 catégories composantes.');
                        return false;
                    }
                    return true;
                }
            </script>
            {% endif %}

        </div>{# card-body #}
    </div>{# card #}
</div>
{% endblock %}
