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

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-trash"></i> {{ title }}</h1>
    <div>
        {% if title == "Équipements à jeter" %}
        <button type="button" class="btn btn-danger" id="bulkTrashBtn" disabled>
            <i class="bi bi-trash"></i> Mettre au rebut (sélectionnés)
        </button>
        <a href="{{ url_for('equipments.trashed') }}" class="btn btn-outline-secondary ms-2">
            <i class="bi bi-archive"></i> Anciens équipements
        </a>
        {% else %}
        <a href="{{ url_for('equipments.to_trash') }}" class="btn btn-outline-secondary">
            <i class="bi bi-trash"></i> À jeter
        </a>
        {% endif %}
    </div>
</div>

{% if equipments %}
{% if title == "Équipements à jeter" %}
{# Formulaire caché pour la mise au rebut multiple #}
<form id="bulkTrashForm" action="{{ url_for('equipments.bulk_confirm_trash') }}" method="POST" style="display:none;">
    <input type="hidden" name="equipment_ids" id="bulkTrashIds">
</form>

<div class="card">
    <div class="card-body">
        <div class="mb-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="selectAll">
                <label class="form-check-label" for="selectAll">
                    <strong>Sélectionner tous</strong>
                </label>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-sm">
                <thead>
                    <tr>
                        <th style="width: 40px;"></th>
                        <th>Code</th>
                        <th>Nom</th>
                        <th>Catégorie</th>
                        <th>Localisation</th>
                        <th>Dernière modification</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for eq in equipments %}
                <tr>
                    <td>
                        <input type="checkbox" value="{{ eq.id }}" class="equipment-checkbox">
                    </td>
                    <td><code>{{ eq.code or '—' }}</code></td>
                    <td>{{ eq.name }}</td>
                    <td>{{ eq.category.name if eq.category else '—' }}</td>
                    <td>
                        {% if eq.room %}
                        {{ eq.room.building.name }} > {{ eq.room.name }}
                        {% else %}
                        <span class="text-muted">Non localisé</span>
                        {% endif %}
                    </td>
                    <td>{{ eq.updated_at|date_fmt }}</td>
                    <td>
                        <a href="{{ url_for('equipments.detail', id=eq.id) }}" class="btn btn-sm btn-outline-primary" title="Voir">
                            <i class="bi bi-eye"></i>
                        </a>
                        <form action="{{ url_for('equipments.cancel_trash', id=eq.id) }}" method="POST" style="display:inline;">
                            <button type="submit" class="btn btn-sm btn-outline-success" title="Annuler (remettre en service)">
                                <i class="bi bi-arrow-counterclockwise"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.equipment-checkbox');
    const bulkBtn = document.getElementById('bulkTrashBtn');
    const bulkForm = document.getElementById('bulkTrashForm');
    const bulkIdsInput = document.getElementById('bulkTrashIds');

    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checkboxes.forEach(cb => cb.checked = this.checked);
            updateBulkButton();
        });
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateBulkButton);
    });

    function updateBulkButton() {
        const checked = document.querySelectorAll('.equipment-checkbox:checked');
        if (bulkBtn) {
            bulkBtn.disabled = checked.length === 0;
            bulkBtn.innerHTML = checked.length > 0 
                ? `<i class="bi bi-trash"></i> Mettre au rebut (${checked.length})` 
                : '<i class="bi bi-trash"></i> Mettre au rebut (sélectionnés)';
        }
    }

    if (bulkBtn) {
        bulkBtn.addEventListener('click', function(e) {
            e.preventDefault();
            const checked = document.querySelectorAll('.equipment-checkbox:checked');
            if (checked.length === 0) {
                alert('Veuillez sélectionner au moins un équipement');
                return;
            }
            if (!confirm(`Confirmer la mise au rebut de ${checked.length} équipement(s) ?`)) {
                return;
            }
            // Collect IDs and submit hidden form
            const ids = Array.from(checked).map(cb => cb.value);
            bulkIdsInput.value = JSON.stringify(ids);
            // Create hidden inputs for each ID
            bulkForm.innerHTML = '';
            ids.forEach(id => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'equipment_ids';
                input.value = id;
                bulkForm.appendChild(input);
            });
            bulkForm.submit();
        });
    }
});
</script>

{% else %}
{# Page "Anciens équipements" #}
<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-sm">
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Nom</th>
                        <th>Catégorie</th>
                        <th>Localisation</th>
                        <th>Dernière modification</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for eq in equipments %}
                <tr>
                    <td><code>{{ eq.code or '—' }}</code></td>
                    <td>{{ eq.name }}</td>
                    <td>{{ eq.category.name if eq.category else '—' }}</td>
                    <td>
                        {% if eq.room %}
                        {{ eq.room.building.name }} > {{ eq.room.name }}
                        {% else %}
                        <span class="text-muted">Non localisé</span>
                        {% endif %}
                    </td>
                    <td>{{ eq.updated_at|date_fmt }}</td>
                    <td>
                        <a href="{{ url_for('equipments.detail', id=eq.id) }}" class="btn btn-sm btn-outline-primary" title="Voir">
                            <i class="bi bi-eye"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endif %}

{% else %}
<div class="alert alert-info">
    {% if title == "Équipements à jeter" %}
    Aucun équipement marqué comme à jeter.
    {% else %}
    Aucun ancien équipement enregistré.
    {% endif %}
</div>
{% endif %}
{% endblock %}