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

{% block title %}Objectifs déchets{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h1 class="h4 fw-bold page-title mb-0">
            <i class="fas fa-bullseye me-2"></i>Objectifs déchets
        </h1>
        <small class="text-muted">Seuils de gaspillage alimentaire à respecter</small>
    </div>
    <a href="{{ path('tenant_dechets_index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<div class="row g-4">
    {# ── Formulaire ─────────────────────────────────────────────────────────── #}
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0"><i class="fas fa-sliders-h me-2"></i>Configurer un seuil</h6>
            </div>
            <div class="card-body">
                <form method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token('dechet_objectif') }}">

                    <div class="row g-3 mb-4">
                        <div class="col-sm-6">
                            <label for="type_etablissement" class="form-label fw-semibold">
                                <i class="fas fa-building me-1"></i>Type d'établissement
                            </label>
                            <select id="type_etablissement" name="type_etablissement" class="form-select">
                                <option value="ecole">🏫 École / Cantine scolaire</option>
                                <option value="ehpad">🏥 EHPAD / Maison de retraite</option>
                                <option value="autre">🏢 Autre établissement</option>
                            </select>
                        </div>
                        <div class="col-sm-6">
                            <label for="categorie_id" class="form-label fw-semibold">
                                <i class="fas fa-tag me-1"></i>Catégorie de déchet
                            </label>
                            <select id="categorie_id" name="categorie_id" class="form-select">
                                <option value="0">🌍 Tous types — objectif global</option>
                                {% for cat in categories %}
                                    <option value="{{ cat.id }}">{{ cat.nom }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">L'objectif global s'applique à l'ensemble des relevés.</div>
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label for="objectif_par_convive" class="form-label fw-semibold text-success">
                                <i class="fas fa-check-circle me-1"></i>Objectif (g/convive)
                            </label>
                            <input type="number" id="objectif_par_convive" name="objectif_par_convive"
                                   class="form-control" placeholder="Ex: 150" min="0" step="5" required>
                            <div class="form-text">Cible à atteindre</div>
                        </div>
                        <div class="col-md-4">
                            <label for="seuil_alerte" class="form-label fw-semibold text-warning">
                                <i class="fas fa-exclamation-triangle me-1"></i>Seuil alerte (g/convive)
                            </label>
                            <input type="number" id="seuil_alerte" name="seuil_alerte"
                                   class="form-control" placeholder="Ex: 180" min="0" step="5" required>
                            <div class="form-text">Dépassement à surveiller</div>
                        </div>
                        <div class="col-md-4">
                            <label for="seuil_critique" class="form-label fw-semibold text-danger">
                                <i class="fas fa-times-circle me-1"></i>Seuil critique (g/convive)
                            </label>
                            <input type="number" id="seuil_critique" name="seuil_critique"
                                   class="form-control" placeholder="Ex: 200" min="0" step="5" required>
                            <div class="form-text">Dépassement important</div>
                        </div>
                    </div>

                    <div class="alert alert-light border mb-4">
                        <div class="fw-semibold mb-2"><i class="fas fa-info-circle text-info me-1"></i>Références nationales (loi AGEC)</div>
                        <div class="row g-2 text-center small">
                            <div class="col-4">
                                <span class="badge bg-success-subtle text-success border border-success-subtle d-block py-2">
                                    <strong>École</strong><br>120 – 150 g / convive
                                </span>
                            </div>
                            <div class="col-4">
                                <span class="badge bg-info-subtle text-info border border-info-subtle d-block py-2">
                                    <strong>EHPAD</strong><br>130 – 160 g / convive
                                </span>
                            </div>
                            <div class="col-4">
                                <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle d-block py-2">
                                    <strong>Entreprise</strong><br>150 – 180 g / convive
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Enregistrer l'objectif
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {# ── Liste des objectifs ─────────────────────────────────────────────────── #}
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0"><i class="fas fa-list-check me-2"></i>Objectifs configurés</h6>
            </div>
            <div class="card-body p-0">
                {% if objectifs is empty %}
                    <div class="text-center py-5 text-muted">
                        <i class="fas fa-inbox fa-2x mb-2 d-block opacity-25"></i>
                        Aucun objectif configuré
                    </div>
                {% else %}
                    <div class="list-group list-group-flush">
                        {% for obj in objectifs %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="flex-grow-1 me-2">
                                    <div class="fw-semibold mb-1">
                                        {% if obj.categorie_id is null or obj.categorie_id == '' %}
                                            <span class="badge bg-primary me-1">Global</span>Tous types de déchets
                                        {% else %}
                                            <i class="fas fa-tag text-secondary me-1"></i>{{ obj.categorie_nom }}
                                        {% endif %}
                                    </div>
                                    <div class="small text-muted mb-1">
                                        {% if obj.type_etablissement == 'ecole' %}🏫 École
                                        {% elseif obj.type_etablissement == 'ehpad' %}🏥 EHPAD
                                        {% else %}🏢 Autre{% endif %}
                                    </div>
                                    <div class="d-flex gap-1 flex-wrap">
                                        <span class="badge bg-success" title="Objectif">
                                            <i class="fas fa-check me-1"></i>{{ obj.objectif_par_convive }}g
                                        </span>
                                        <span class="badge bg-warning text-dark" title="Seuil alerte">
                                            <i class="fas fa-exclamation me-1"></i>{{ obj.seuil_alerte }}g
                                        </span>
                                        <span class="badge bg-danger" title="Seuil critique">
                                            <i class="fas fa-times me-1"></i>{{ obj.seuil_critique }}g
                                        </span>
                                    </div>
                                </div>
                                <form method="post"
                                      action="{{ path('tenant_dechets_objectif_delete', {id: obj.id}) }}"
                                      onsubmit="return confirm('Supprimer cet objectif ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('objectif_delete_' ~ obj.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="card border-0 shadow-sm mt-3">
            <div class="card-body">
                <h6 class="fw-semibold mb-3"><i class="fas fa-palette text-secondary me-2"></i>Échelle de couleurs</h6>
                <div class="d-flex flex-column gap-2 small">
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-success">Vert</span>
                        <span class="text-muted">≤ Objectif</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-warning text-dark">Orange</span>
                        <span class="text-muted">Entre objectif et seuil alerte</span>
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-danger">Rouge</span>
                        <span class="text-muted">≥ Seuil critique</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}