{% extends "base.html" %}
{% block title %}Tâches Préventives — GMAO Collège{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-list-check"></i> Tâches Préventives</h1>
</div>

<div class="row mb-3">
    <div class="col-md-3">
        <label class="form-label">Filtrer par lot</label>
        <select class="form-select" id="filterLot">
            <option value="">Tous les lots</option>
            {% for lot in lots %}
            <option value="{{ lot.id }}">{{ lot.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-md-3">
        <label class="form-label">Filtrer par catégorie</label>
        <select class="form-select" id="filterCategory">
            <option value="">Toutes les catégories</option>
            {% for cat in categories %}
            <option value="{{ cat.id }}">{{ cat.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="col-md-3">
        <label class="form-label">Filtrer par périodicité</label>
        <select class="form-select" id="filterPeriod">
            <option value="">Toutes</option>
            <option value="Quotidien">Quotidien</option>
            <option value="Hebdomadaire">Hebdomadaire</option>
            <option value="Mensuel">Mensuel</option>
            <option value="Annuel">Annuel</option>
        </select>
    </div>
    <div class="col-md-3">
        <label class="form-label">Filtrer par contrat</label>
        <select class="form-select" id="filterContract">
            <option value="">Tous</option>
            <option value="1">Avec contrat</option>
            <option value="0">Sans contrat</option>
        </select>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-hover table-sm">
        <thead class="table-light">
            <tr>
                <th>N°</th>
                <th>Lot</th>
                <th>Catégorie</th>
                <th>Tâche</th>
                <th>Périodicité</th>
                <th>Durée</th>
                <th>Gestionnaire</th>
                <th>Contrat</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for task in tasks %}
            <tr class="task-row" 
                data-lot="{{ task.lot_id }}" 
                data-category="{{ task.lot.category_id if task.lot else '' }}"
                data-period="{{ task.periodicite or '' }}"
                data-contract="{{ '1' if task.contrat else '0' }}">
                <td><code>{{ task.num_tache or '-' }}</code></td>
                <td>
                    {% if task.lot %}
                    <a href="{{ url_for('lots.detail', id=task.lot.id) }}">
                        {{ task.lot.name }}
                    </a>
                    {% else %}
                    <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td>
                    {% if task.lot and task.lot.category %}
                    <a href="{{ url_for('equipments.category_detail', id=task.lot.category.id) }}">
                        {{ task.lot.category.name }}
                    </a>
                    {% else %}
                    <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td>{{ task.tache or '-' }}</td>
                <td>
                    {% if task.periodicite %}
                    <span class="badge bg-info">{{ task.periodicite }}</span>
                    {% elif task.jours_entre_interventions %}
                    <span class="badge bg-secondary">Tous les {{ task.jours_entre_interventions }} jours</span>
                    {% else %}
                    <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td>
                    {% if task.duree_minutes %}
                    <span class="badge bg-primary">{{ task.duree_minutes }} min</span>
                    {% else %}
                    <span class="text-muted">-</span>
                    {% endif %}
                </td>
                <td>{{ task.gestionnaire or '-' }}</td>
                <td>
                    {% if task.contrat %}
                    <i class="bi bi-check-circle text-success"></i> Oui
                    {% else %}
                    <i class="bi bi-x-circle text-muted"></i> Non
                    {% endif %}
                </td>
                <td>
                    <a href="{{ url_for('planning.edit_task', id=task.id) }}" class="btn btn-sm btn-outline-primary" title="Modifier">
                        <i class="bi bi-pencil"></i>
                    </a>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="9" class="text-center text-muted py-4">
                    Aucune tâche préventive.
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="card mt-4">
    <div class="card-body">
        <h5><i class="bi bi-info-circle"></i> Légende</h5>
        <p class="mb-0">
            <strong>Périodicité:</strong> Les tâches sont planifiées automatiquement selon leur périodicité.
            <br><strong>Contrat:</strong> Indique si la tâche est couverte par un contrat de maintenance.
        </p>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Filtrage combiné
function filterTasks() {
    const lotId = document.getElementById('filterLot').value;
    const categoryId = document.getElementById('filterCategory').value;
    const period = document.getElementById('filterPeriod').value;
    const contract = document.getElementById('filterContract').value;
    
    document.querySelectorAll('.task-row').forEach(row => {
        const matchLot = !lotId || row.dataset.lot === lotId;
        const matchCategory = !categoryId || row.dataset.category === categoryId;
        const matchPeriod = !period || row.dataset.period.includes(period);
        const matchContract = !contract || row.dataset.contract === contract;
        
        row.style.display = (matchLot && matchCategory && matchPeriod && matchContract) ? '' : 'none';
    });
}

document.getElementById('filterLot').addEventListener('change', filterTasks);
document.getElementById('filterCategory').addEventListener('change', filterTasks);
document.getElementById('filterPeriod').addEventListener('change', filterTasks);
document.getElementById('filterContract').addEventListener('change', filterTasks);
</script>
{% endblock %}