{% extends "base.html" %}
{% block title %}Nouvelle restriction — {{ equipment.name }} — GMAO Collège{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url_for('equipments.index') }}">Équipements</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('equipments.detail', id=equipment.id) }}">{{ equipment.name }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ url_for('equipments_restrictions.restrictions', id=equipment.id) }}">Restrictions</a></li>
                    <li class="breadcrumb-item active">Nouvelle</li>
                </ol>
            </nav>
            <h1><i class="bi bi-shield-exclamation me-2"></i>Nouvelle restriction</h1>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <form method="POST">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Type de restriction</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="radio" name="restriction_type" id="type_time" value="time" checked>
                            <label class="form-check-label" for="type_time">
                                <i class="bi bi-clock me-2"></i><strong>Restriction par horaires</strong>
                                <br><small class="text-muted">Interdit les interventions pendant certaines tranches horaires</small>
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="restriction_type" id="type_room" value="room_occupancy">
                            <label class="form-check-label" for="type_room">
                                <i class="bi bi-door-open me-2"></i><strong>Restriction par occupation de salle</strong>
                                <br><small class="text-muted">Interdit les interventions quand les salles sélectionnées sont occupées (planning PRONOTE)</small>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Restriction par horaires -->
                <div id="time_fields" class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Horaires d'interdiction</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Jours concernés</label>
                            <div class="row">
                                {% for day_num, day_name in days.items() %}
                                {% if day_num > 0 and day_num < 6 %}
                                <div class="col-md-4 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="days" value="{{ day_num }}" id="day_{{ day_num }}" checked>
                                        <label class="form-check-label" for="day_{{ day_num }}">{{ day_name }}</label>
                                    </div>
                                </div>
                                {% else %}
                                <div class="col-md-4 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="days" value="{{ day_num }}" id="day_{{ day_num }}">
                                        <label class="form-check-label" for="day_{{ day_num }}">{{ day_name }}</label>
                                    </div>
                                </div>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="start_time" class="form-label">Heure de début</label>
                                <input type="time" class="form-control" id="start_time" name="start_time" value="08:00">
                            </div>
                            <div class="col-md-6">
                                <label for="end_time" class="form-label">Heure de fin</label>
                                <input type="time" class="form-control" id="end_time" name="end_time" value="17:00">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Restriction par occupation de salle -->
                <div id="room_fields" class="card mb-4" style="display:none;">
                    <div class="card-header">
                        <h5 class="mb-0">Salles à surveiller</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted mb-3">
                            L'intervention sera interdite quand l'une de ces salles est occupée (selon le planning PRONOTE).
                        </p>
                        <div class="mb-3">
                            <label class="form-label">Rechercher des salles</label>
                            <input type="text" class="form-control" id="room_search" placeholder="Tapez pour filtrer...">
                        </div>
                        <div id="rooms_list" style="max-height: 300px; overflow-y: auto;">
                            {% for room in rooms %}
                            <div class="form-check room-item" data-name="{{ room.name|lower }}">
                                <input class="form-check-input" type="checkbox" name="room_ids" value="{{ room.id }}" id="room_{{ room.id }}">
                                <label class="form-check-label" for="room_{{ room.id }}">{{ room.name }}</label>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- Message -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Message explicatif (optionnel)</h5>
                    </div>
                    <div class="card-body">
                        <textarea class="form-control" name="message" rows="2" placeholder="Ex: Intervention impossible pendant les cours"></textarea>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i>Enregistrer
                    </button>
                    <a href="{{ url_for('equipments_restrictions.restrictions', id=equipment.id) }}" class="btn btn-outline-secondary">
                        Annuler
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle entre les types de restriction
    const typeTime = document.getElementById('type_time');
    const typeRoom = document.getElementById('type_room');
    const timeFields = document.getElementById('time_fields');
    const roomFields = document.getElementById('room_fields');

    function toggleFields() {
        if (typeTime.checked) {
            timeFields.style.display = 'block';
            roomFields.style.display = 'none';
        } else {
            timeFields.style.display = 'none';
            roomFields.style.display = 'block';
        }
    }

    typeTime.addEventListener('change', toggleFields);
    typeRoom.addEventListener('change', toggleFields);

    // Recherche de salles
    const roomSearch = document.getElementById('room_search');
    const roomItems = document.querySelectorAll('.room-item');

    roomSearch.addEventListener('input', function() {
        const search = this.value.toLowerCase();
        roomItems.forEach(item => {
            const name = item.getAttribute('data-name');
            item.style.display = name.includes(search) ? 'block' : 'none';
        });
    });
});
</script>
{% endblock %}
{% endblock %}