{% extends "base.html" %}
{% block title %}Règles d'accès — GMAO Collège{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0 h5"><i class="bi bi-shield-lock"></i> Règles d'accès aux zones</h2>
        <a href="{{ url_for('planning.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i> Retour
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <p class="text-muted">Définissez les règles d'accès aux zones pour la planification des interventions.</p>

            {% if rules %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Zone</th>
                            <th>Règle</th>
                            <th>Valeur</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for rule in rules %}
                        <tr>
                            <td>{{ rule.zone.name if rule.zone else '-' }}</td>
                            <td>{{ rule.rule_type }}</td>
                            <td>{{ rule.rule_value }}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteRule({{ rule.id }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i> Aucune règle définie.
            </div>
            {% endif %}
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-plus-circle"></i> Ajouter une règle</h5>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('planning.add_rule') }}">
                <div class="row g-2">
                    <div class="col-md-4">
                        <label class="form-label">Zone</label>
                        <select name="zone_id" class="form-select" required>
                            {% for zone in zones %}
                            <option value="{{ zone.id }}">{{ zone.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Type de règle</label>
                        <select name="rule_type" class="form-select" required>
                            <option value="time_window">Fenêtre horaire</option>
                            <option value="day_restriction">Restriction jour</option>
                            <option value="requires_approval">Approbation requise</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Valeur</label>
                        <input type="text" name="rule_value" class="form-control" placeholder="Ex: 08:00-18:00" required>
                    </div>
                </div>
                <div class="mt-3">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check"></i> Ajouter
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function deleteRule(ruleId) {
    if (confirm('Supprimer cette règle ?')) {
        fetch(`/planning/rules/${ruleId}`, { method: 'DELETE' })
            .then(r => r.ok ? location.reload() : alert('Erreur'));
    }
}
</script>
{% endblock %}