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

{% set is_edit = dechet and dechet.id is defined %}

{% block title %}{{ is_edit ? 'Modifier le relevé' : 'Nouveau relevé de déchets' }}{% endblock %}

{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 fw-bold mb-0 page-title">
        <i class="fas fa-recycle me-2"></i>
        {{ is_edit ? 'Modifier le relevé' : 'Nouveau relevé de déchets' }}
    </h1>
    <a href="{{ path('tenant_dechets_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="card border-0 shadow-sm rounded-3">
            <div class="card-body p-4">
                <form method="post" action="{{ action }}" novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token(token) }}">

                    <div class="row g-3">

                        <div class="col-sm-6">
                            <label for="date_releve" class="form-label fw-semibold">
                                Date du relevé <span class="text-danger">*</span>
                            </label>
                            <input type="date" id="date_releve" name="date_releve" class="form-control"
                                   value="{{ dechet.date_releve ?? 'now'|date('Y-m-d') }}" required>
                        </div>

                        <div class="col-sm-6">
                            <label for="service" class="form-label fw-semibold">Service</label>
                            <select id="service" name="service" class="form-select">
                                <option value="dejeuner" {{ (dechet.service ?? 'dejeuner') == 'dejeuner' ? 'selected' }}>
                                    Déjeuner
                                </option>
                                <option value="diner" {{ (dechet.service ?? '') == 'diner' ? 'selected' }}>
                                    Dîner
                                </option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label for="categorie_id" class="form-label fw-semibold">
                                Catégorie de déchet <span class="text-danger">*</span>
                            </label>
                            <select id="categorie_id" name="categorie_id" class="form-select" required>
                                <option value="">— Choisir —</option>
                                {% for cat in categories %}
                                    <option value="{{ cat.id }}" {{ (dechet.categorie_id ?? '') == cat.id ? 'selected' }}>
                                        {{ cat.nom }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="col-sm-6">
                            <label for="quantite" class="form-label fw-semibold">
                                Quantité <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <input type="number" id="quantite" name="quantite" class="form-control"
                                       value="{{ dechet.quantite ?? '' }}" required min="0" step="0.001">
                                <select name="unite" class="form-select" style="max-width:80px">
                                    {% for u in ['kg', 'g', 'L', 'unite'] %}
                                        <option value="{{ u }}" {{ (dechet.unite ?? 'kg') == u ? 'selected' }}>{{ u }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>

                        <div class="col-sm-6">
                            <label for="nb_convives" class="form-label fw-semibold">Nombre de convives</label>
                            <input type="number" id="nb_convives" name="nb_convives" class="form-control"
                                   value="{{ dechet.nb_convives ?? 0 }}" min="0">
                        </div>

                        <div class="col-12">
                            <label for="zone" class="form-label fw-semibold">Zone / Poste</label>
                            <input type="text" id="zone" name="zone" class="form-control"
                                   value="{{ dechet.zone ?? '' }}" placeholder="Ex : Self, Maternelle, Production…"
                                   list="zones-datalist" autocomplete="off">
                            <datalist id="zones-datalist"></datalist>
                        </div>

                        <div class="col-12">
                            <label for="notes" class="form-label fw-semibold">Notes</label>
                            <textarea id="notes" name="notes" class="form-control" rows="3"
                                      placeholder="Observations, causes identifiées…">{{ dechet.notes ?? '' }}</textarea>
                        </div>

                    </div>

                    <hr class="my-4">
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ path('tenant_dechets_index') }}" class="btn btn-outline-secondary">Annuler</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>{{ is_edit ? 'Enregistrer les modifications' : 'Enregistrer le relevé' }}
                        </button>
                    </div>

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

{% block javascripts %}
{{ parent() }}
<script>
document.addEventListener('DOMContentLoaded', function () {
    fetch('{{ path('tenant_dechets_api_zones') }}')
        .then(function (r) { return r.json(); })
        .then(function (zones) {
            var dl = document.getElementById('zones-datalist');
            if (!dl) return;
            zones.forEach(function (z) {
                var opt = document.createElement('option');
                opt.value = z;
                dl.appendChild(opt);
            });
        })
        .catch(function () { /* silencieux si pas de zones */ });
});
</script>
{% endblock %}