{% extends 'Admin/admin.html.twig' %}

{% block title %}Catégorisation des objets{% endblock %}

{% block body %}
<div class="card shadow mb-4">

    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Ajouter des objets dans une catégorie</h6>
    </div>
    <div class="card-body">
        {% for label, messages in app.flashes %}
            {% for message in messages %}
                <div class="alert alert-{{ label }}">{{ message }}</div>
            {% endfor %}
        {% endfor %}

        <form method="post">
            <div class="form-group">
                <label for="category_id">Catégorie</label>
                <select name="category_id" class="form-control" required>
                    <option value="">Sélectionner une catégorie</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}">{{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group mt-3">
                <label for="item_ids">Objets</label>
                <select name="item_ids[]" id="item_ids" class="form-control js-item-select" multiple required>
                    {% for item in items %}
                        <option value="{{ item.Id }}">{{ item.Name }}</option>
                    {% endfor %}
                </select>
            </div>

            <button type="submit" class="btn btn-primary mt-3">Ajouter à la catégorie</button>
        </form>
    </div>

    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Objets par catégorie</h6>
    </div>

    {% set grouped = {} %}
    {% for item in categorizedItems %}
        {% set cat = item.category_name %}
        {% if grouped[cat] is not defined %}
            {% set grouped = grouped|merge({ (cat): [item] }) %}
        {% else %}
            {% set grouped = grouped|merge({ (cat): grouped[cat]|merge([item]) }) %}
        {% endif %}
    {% endfor %}

    {% for catName, itemList in grouped %}
        <div class="card mb-3">
            <div class="card-header bg-light font-weight-bold">{{ catName }}</div>
            <ul class="list-group list-group-flush">
                {% for item in itemList %}
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        {{ item.item_name }}
                        <form method="post" action="{{ path('admin.item_category_items.delete') }}" style="margin: 0;">
                            <input type="hidden" name="category_id" value="{{ item.category_id }}">
                            <input type="hidden" name="item_id" value="{{ item.item_id }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Supprimer" onclick="return confirm('Supprimer cet objet de cette catégorie ?')">
                                <i class="fas fa-trash-alt"></i> Supprimer
                            </button>
                        </form>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endfor %}
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
    new TomSelect('#item_ids', {
        placeholder: "Rechercher et sélectionner des objets...",
        create: false,
        maxItems: null
    });
</script>
{% endblock %}