{% extends 'base.html' %}
{% block title %}Liste des équipements de levage{% endblock title %}
{% block content %}
<div class="row">
    <div class="col-lg-10">
        <input type="text" class="form-control" id="search" placeholder="🔍 Rechercher description ou lieu...">
    </div>
    <div class="col-lg-2">
        <a href="{% url 'ajouter_equipement' %}" class="btn btn-primary inline-block bg-green-600 text-white px-3 py-1 rounded mb-4">➕ Ajouter</a>
    </div>
</div>

<div class="tables-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="card-style mb-30">
                <h6 class="mb-10">Data Table</h6>
                <p class="text-sm mb-20">
                    For basic styling—light padding and only horizontal
                    dividers—use the class table.
                </p>
                <div class="table-wrapper table-responsive">
                    <table class="table" id="equipements-table">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Lieu</th>
                            <th>Type</th>
                            <th>Prochaine vérif</th>
                            <th>Critique ?</th>
                            <th>Rapport</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for e in equipements %}
                        <tr class="border-t {% if e.date_prochaine_verification and e.date_prochaine_verification <= seuil %}bg-red-100{% endif %}">
                            <td>{{ e.description }}</td>
                            <td>{{ e.lieu }}</td>
                            <td>{{ e.type_appareil }}</td>
                            <td>{{ e.date_prochaine_verification|date:"d/m/Y" }}</td>
                            <td>{% if e.criticite %}⚠️{% else %}✅{% endif %}</td>
                            <td>{% if eq.rapport %}<a href="{{ eq.rapport.url }}" target="_blank">📎 Voir le rapport</a>{% else %}Aucun{% endif %}</td>
                            {% comment %} <td><a href="{% url 'rapport_pdf' e.id %}" class="text-indigo-600 underline">📄 PDF</a></td> {% endcomment %}
                            <td><a href="{% url 'editer_equipement' e.id %}" class="text-blue-600 underline">✏️ Modifier</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            <!-- end table -->
            </div>
        </div>
    <!-- end card -->
    </div>
<!-- end col -->
</div>

<script>
    document.getElementById('search').addEventListener('input', function() {
        let value = this.value.toLowerCase();
        let rows = document.querySelectorAll('#equipements-table tbody tr');

        rows.forEach(row => {
            let desc = row.cells[0].textContent.toLowerCase();
            let lieu = row.cells[1].textContent.toLowerCase();
            row.style.display = (desc.includes(value) || lieu.includes(value)) ? '' : 'none';
        });
    });
</script>
{% endblock %}