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

{% block title %}Configuration des équipements HACCP{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
    <div>
        <h1 class="h3 fw-bold page-title mb-1">
            <i class="fas fa-cogs me-2"></i>Équipements HACCP
        </h1>
        <p class="text-muted mb-0">Gérez vos équipements de cuisine pour personnaliser les formulaires</p>
    </div>
    <a href="{{ path('tenant_haccp_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

{# ── Formulaire d'ajout ─────────────────────────────────────────────────── #}
{% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-transparent fw-semibold py-3">
        <i class="fas fa-plus-circle me-2 text-success"></i>Ajouter un équipement
    </div>
    <div class="card-body">
        <form method="POST" action="{{ path('tenant_haccp_equipements_ajouter') }}">
            <input type="hidden" name="_token" value="{{ csrf_token('haccp_equipement') }}">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold">Nom <span class="text-danger">*</span></label>
                    <input type="text" name="nom" class="form-control form-control-sm" placeholder="ex: Chambre froide positive" required>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">Type</label>
                    <select name="type" class="form-select form-select-sm">
                        {% for typeCode, typeLabel in types %}
                        <option value="{{ typeCode }}">{{ typeLabel }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">Zone / Emplacement</label>
                    <input type="text" name="zone" class="form-control form-control-sm" placeholder="ex: Cuisine froide">
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">T° min (°C)</label>
                    <input type="number" name="temperature_min" step="0.1" class="form-control form-control-sm" placeholder="ex: 0">
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold">T° max (°C)</label>
                    <input type="number" name="temperature_max" step="0.1" class="form-control form-control-sm" placeholder="ex: 4">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-success btn-sm w-100">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
{% endif %}

{# ── Liste des équipements ────────────────────────────────────────────────── #}
{% if equipements is empty %}
    <div class="alert alert-info border-0">
        <i class="fas fa-info-circle me-2"></i>Aucun équipement configuré.
        {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
        Utilisez le formulaire ci-dessus pour en ajouter.
        {% endif %}
    </div>
{% else %}
<div class="card border-0 shadow-sm">
    <div class="card-body p-0">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>Nom</th>
                    <th>Type</th>
                    <th>Zone</th>
                    <th>T° min</th>
                    <th>T° max</th>
                    <th>Statut</th>
                    {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}<th class="text-end">Actions</th>{% endif %}
                </tr>
            </thead>
            <tbody>
                {% for eq in equipements %}
                <tr id="eq-{{ eq.id }}">
                    <td class="fw-semibold">{{ eq.nom }}</td>
                    <td><span class="badge bg-secondary">{{ types[eq.type] ?? eq.type }}</span></td>
                    <td class="text-muted small">{{ eq.zone ?: '—' }}</td>
                    <td class="small">{{ eq.temperature_min is not null ? eq.temperature_min ~ ' °C' : '—' }}</td>
                    <td class="small">{{ eq.temperature_max is not null ? eq.temperature_max ~ ' °C' : '—' }}</td>
                    <td>
                        {% if eq.actif %}
                            <span class="badge bg-success">Actif</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactif</span>
                        {% endif %}
                    </td>
                    {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
                    <td class="text-end">
                        <button type="button" class="btn btn-sm btn-outline-primary me-1"
                                data-bs-toggle="modal" data-bs-target="#modalEdit{{ eq.id }}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <form method="POST" action="{{ path('tenant_haccp_equipements_supprimer', {id: eq.id}) }}"
                              class="d-inline" onsubmit="return confirm('Supprimer cet équipement ?')">
                            <input type="hidden" name="_token" value="{{ csrf_token('haccp_equipement_del_' ~ eq.id) }}">
                            <button type="submit" class="btn btn-sm btn-outline-danger">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </td>
                    {% endif %}
                </tr>

                {# ── Modal édition ─────────────────────────────────────────── #}
                {% if is_granted('ROLE_TENANT_GESTIONNAIRE') %}
                <div class="modal fade" id="modalEdit{{ eq.id }}" tabindex="-1">
                    <div class="modal-dialog">
                        <form method="POST" action="{{ path('tenant_haccp_equipements_modifier', {id: eq.id}) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('haccp_equipement_edit_' ~ eq.id) }}">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Modifier {{ eq.nom }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body row g-3">
                                    <div class="col-12">
                                        <label class="form-label small fw-semibold">Nom</label>
                                        <input type="text" name="nom" class="form-control form-control-sm" value="{{ eq.nom }}" required>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-semibold">Type</label>
                                        <select name="type" class="form-select form-select-sm">
                                            {% for tc, tl in types %}
                                            <option value="{{ tc }}" {% if eq.type == tc %}selected{% endif %}>{{ tl }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-semibold">Zone</label>
                                        <input type="text" name="zone" class="form-control form-control-sm" value="{{ eq.zone }}">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-semibold">T° min (°C)</label>
                                        <input type="number" step="0.1" name="temperature_min" class="form-control form-control-sm" value="{{ eq.temperature_min }}">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label small fw-semibold">T° max (°C)</label>
                                        <input type="number" step="0.1" name="temperature_max" class="form-control form-control-sm" value="{{ eq.temperature_max }}">
                                    </div>
                                    <div class="col-12">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="actif" value="1"
                                                   id="actif{{ eq.id }}" {% if eq.actif %}checked{% endif %}>
                                            <label class="form-check-label" for="actif{{ eq.id }}">Équipement actif</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Annuler</button>
                                    <button type="submit" class="btn btn-primary btn-sm">Enregistrer</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                {% endif %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}
{% endblock %}