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

{% block title %}Gestion des catégories{% endblock %}

{% block body %}
<div class="row justify-content-center">
<div class="col-lg-8">

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-tags"></i> Catégories</h1>
    <a href="{{ path('app_recipe_index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Retour
    </a>
</div>

{# Formulaire d'ajout #}
<div class="card mb-4">
    <div class="card-header fw-bold">
        <i class="bi bi-plus-circle"></i> Nouvelle catégorie
    </div>
    <div class="card-body">
        <form method="post" action="{{ path('app_category_new') }}">
            <div class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Nom *</label>
                    <input type="text" name="name" class="form-control" placeholder="Ex: Plat principal" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">
                        Icône Bootstrap
                        <a href="https://icons.getbootstrap.com" target="_blank" class="ms-1 small">
                            <i class="bi bi-box-arrow-up-right"></i> Voir les icônes
                        </a>
                    </label>
                    <div class="input-group">
                        <span class="input-group-text" id="icon-preview-new">
                            <i class="bi bi-tag"></i>
                        </span>
                        <input type="text" name="icon" id="icon-input-new" class="form-control"
                               placeholder="Ex: bi-cake2"
                               oninput="previewIcon(this, 'icon-preview-new')">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">Ordre</label>
                    <input type="number" name="position" class="form-control" value="0" min="0">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-success w-100">
                        <i class="bi bi-plus-lg"></i> Ajouter
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{# Liste des catégories #}
<div class="card">
    <div class="card-header fw-bold">
        <i class="bi bi-list-ul"></i> Catégories existantes
        <span class="badge bg-secondary ms-2">{{ categories|length }}</span>
    </div>
    <div class="list-group list-group-flush">
        {% for category in categories %}
        <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-3">
                    <span class="fs-4">
                        <i class="bi {{ category.icon ?: 'bi-tag' }}"></i>
                    </span>
                    <div>
                        <div class="fw-bold">{{ category.name }}</div>
                        <small class="text-muted">
                            {{ category.recipes|length }} recette(s) —
                            ordre : {{ category.position }}
                            {% if category.icon %}— <code>{{ category.icon }}</code>{% endif %}
                        </small>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-primary btn-sm"
                            data-bs-toggle="collapse"
                            data-bs-target="#edit-{{ category.id }}">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <form method="post"
                          action="{{ path('app_category_delete', {id: category.id}) }}"
                          onsubmit="return confirm('Supprimer {{ category.name }} ? Les recettes associées ne seront pas supprimées.')">
                        <input type="hidden" name="_token"
                               value="{{ csrf_token('delete-category-' ~ category.id) }}">
                        <button type="submit" class="btn btn-outline-danger btn-sm"
                                {% if category.recipes|length > 0 %}
                                    title="{{ category.recipes|length }} recette(s) utilisent cette catégorie"
                                {% endif %}>
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                </div>
            </div>

            {# Formulaire d'édition inline (collapse) #}
            <div class="collapse mt-3" id="edit-{{ category.id }}">
                <form method="post" action="{{ path('app_category_edit', {id: category.id}) }}">
                    <div class="row g-2 align-items-end">
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">Nom</label>
                            <input type="text" name="name" class="form-control form-control-sm"
                                   value="{{ category.name }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">Icône</label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text" id="icon-preview-{{ category.id }}">
                                    <i class="bi {{ category.icon ?: 'bi-tag' }}"></i>
                                </span>
                                <input type="text" name="icon"
                                       id="icon-input-{{ category.id }}"
                                       class="form-control form-control-sm"
                                       value="{{ category.icon }}"
                                       oninput="previewIcon(this, 'icon-preview-{{ category.id }}')">
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">Ordre</label>
                            <input type="number" name="position" class="form-control form-control-sm"
                                   value="{{ category.position }}" min="0">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-success btn-sm w-100">
                                <i class="bi bi-check-lg"></i> Sauvegarder
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
        {% else %}
        <div class="list-group-item text-muted text-center py-4">
            Aucune catégorie pour le moment.
        </div>
        {% endfor %}
    </div>
</div>

</div>
</div>
{% endblock %}

{% block javascripts %}
<script>
function previewIcon(input, previewId) {
    const preview = document.getElementById(previewId);
    if (preview) {
        preview.innerHTML = `<i class="bi ${input.value || 'bi-tag'}"></i>`;
    }
}
</script>
{% endblock %}