{% extends "base.html" %}
{% block title %}Planificateur - GMAO{% endblock %}
{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="h4"><i class="bi bi-calendar-week"></i> Planificateur automatique</h2>
        <div>
            <form method="POST" action="{{ url_for('scheduler.run') }}" class="d-inline" onsubmit="return confirm('Lancer le planificateur sur 4 semaines ?')">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="weeks" value="4">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-play-circle"></i> Lancer le planificateur
                </button>
            </form>
            <button class="btn btn-outline-info btn-sm" id="btn-preview">
                <i class="bi bi-eye"></i> Previsualiser
            </button>
        </div>
    </div>

    <!-- Resume -->
    <div class="row g-2 mb-3">
        <div class="col-md-4">
            <div class="card text-center border-warning">
                <div class="card-body py-2">
                    <div class="display-6 text-warning">{{ due_tasks|length }}</div>
                    <small class="text-muted">Taches dues (4 sem.)</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center border-primary">
                <div class="card-body py-2">
                    <div class="display-6 text-primary">{{ planned_tasks|length }}</div>
                    <small class="text-muted">Deja planifiees</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-center border-danger">
                <div class="card-body py-2">
                    <div class="display-6 text-danger">{{ overdue_tasks|length }}</div>
                    <small class="text-muted">En retard</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Previsualisation -->
    <div id="preview-result" style="display:none;" class="alert alert-info mb-3"></div>

    <!-- Taches dues regroupees par zone -->
    {% if groups %}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header"><i class="bi bi-diagram-3"></i> Taches dues regroupees par zone</div>
        <div class="card-body">
            {% for zone, tasks in groups.items() %}
            <div class="mb-2">
                <strong><i class="bi bi-building"></i> {{ zone }}</strong>
                <span class="badge bg-info ms-1">{{ tasks|length }}</span>
                <ul class="mt-1" style="font-size:0.85rem;">
                {% for t in tasks %}
                    <li>
                        <strong>{{ t.equipment.name }}</strong>
                        {% if t.room %}<span class="badge bg-secondary">{{ t.room.name }}</span>{% endif %}
                        - {{ t.duration }} min
                        - du {{ t.due_date.strftime('%d/%m/%Y') }}
                        {% if t.due_date < today %}
                        <span class="badge bg-danger">En retard</span>
                        {% endif %}
                    </li>
                {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </div>
    {% else %}
    <div class="alert alert-success">
        <i class="bi bi-check-circle"></i> Aucune tache due dans les 4 prochaines semaines.
    </div>
    {% endif %}

    <!-- Taches planifiees -->
    {% if planned_tasks %}
    <div class="card border-0 shadow-sm mb-3">
        <div class="card-header bg-primary text-white"><i class="bi bi-calendar-check"></i> Taches planifiees</div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead><tr><th>Date</th><th>Heure</th><th>Equipement</th><th>Salle</th><th>Duree</th><th>Statut</th></tr></thead>
                <tbody>
                {% for t in planned_tasks[:20] %}
                <tr>
                    <td>{{ t.scheduled_date.strftime('%d/%m/%Y') if t.scheduled_date else '—' }}</td>
                    <td>{{ t.scheduled_start.strftime('%H:%M') if t.scheduled_start else '—' }}</td>
                    <td>{{ t.equipment.name if t.equipment else '—' }}</td>
                    <td>{{ t.room.name if t.room else '—' }}</td>
                    <td>{{ t.estimated_duration or 60 }} min</td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <form method="POST" action="{{ url_for('scheduler.start_task', task_id=t.id) }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-success btn-sm" title="Demarrer l'intervention"><i class="bi bi-play-fill"></i></button>
                            </form>
                            <form method="POST" action="{{ url_for('scheduler.complete_task', task_id=t.id) }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-primary btn-sm" title="Terminer"><i class="bi bi-check-circle"></i></button>
                            </form>
                            <form method="POST" action="{{ url_for('scheduler.ignore_task', task_id=t.id) }}">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-outline-warning btn-sm" title="Ignorer" onclick="return confirm('Ignorer cette tache ?')"><i class="bi bi-x-circle"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}

    <!-- Taches en retard -->
    {% if overdue_tasks %}
    <div class="card border-danger mb-3">
        <div class="card-header bg-danger text-white"><i class="bi bi-exclamation-triangle"></i> Taches en retard</div>
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
                <thead><tr><th>Date prevue</th><th>Equipement</th><th>Salle</th><th>Duree</th></tr></thead>
                <tbody>
                {% for t in overdue_tasks %}
                <tr>
                    <td>{{ t.scheduled_date.strftime('%d/%m/%Y') if t.scheduled_date else '—' }}</td>
                    <td>{{ t.equipment.name if t.equipment else '—' }}</td>
                    <td>{{ t.room.name if t.room else '—' }}</td>
                    <td>{{ t.estimated_duration or 60 }} min</td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>

<script>
document.getElementById('btn-preview').addEventListener('click', async function() {
    const btn = this;
    const original = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>...';
    try {
        const r = await fetch('/scheduler/api/preview');
        const d = await r.json();
        const div = document.getElementById('preview-result');
        let html = '<strong>Previsualisation :</strong> ' + d.total + ' tache(s) due(s)<br>';
        for (const [zone, count] of Object.entries(d.groups)) {
            html += '<span class="badge bg-info me-1">' + zone + ': ' + count + '</span>';
        }
        div.innerHTML = html;
        div.style.display = 'block';
    } catch(e) {
        alert('Erreur: ' + e.message);
    }
    btn.disabled = false;
    btn.innerHTML = original;
});
</script>
{% endblock %}