{% extends base_template|default:"base.html" %}
{% load i18n static l10n short_name inspections_tags %}

{% block title %}{% translate "Inspections d'assets" %}{% endblock %}

{% block extra_css %}
<link href="{% static 'common/maplibre-gl.css' %}" rel="stylesheet">
<style>
.inspection-card.is-cancelled {
    background-color: #f8f9fa !important;
    border: 1px dashed #adb5bd !important;
    opacity: 0.7;
}
.inspection-card.is-cancelled .card-title,
.inspection-card.is-cancelled h6 {
    color: #6c757d !important;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
        <div>
            <h3 class="mb-0 fw-bold">
                <i class="bi bi-search text-primary me-2"></i>{% translate "Inspections" %}
            </h3>
            <p class="text-muted mb-0 small">{% translate "Suivi et historique des inspections et vérifications sur le terrain" %}</p>
        </div>
        {% if can_inspect %}
        <div>
            <a href="{% if is_mobile %}{% url 'mobile:quick_inspection_map_mobile' %}{% else %}{% url 'inspections:quick_inspection_map' %}{% endif %}" class="btn btn-primary shadow-sm">
                <i class="bi bi-geo-alt-fill me-1"></i>{% translate "Nouvelle inspection" %}
            </a>
        </div>
        {% endif %}
    </div>

    <!-- Navigation par Onglets -->
    <ul class="nav nav-tabs mb-3">
        {% if can_inspect %}
        <li class="nav-item">
            <a class="nav-link {% if filter_type == 'scheduled' %}active fw-bold text-primary{% endif %} position-relative" href="?tab=scheduled">
                <i class="bi bi-calendar2-check me-1"></i>{% translate "À réaliser" %}
                {% if scheduled_count > 0 %}
                <span class="badge rounded-pill bg-danger ms-1">{{ scheduled_count }}</span>
                {% endif %}
            </a>
        </li>
        {% endif %}
        <li class="nav-item">
            <a class="nav-link {% if filter_type == 'my' %}active fw-bold{% endif %}" href="?tab=my">
                <i class="bi bi-person-check me-1"></i>{% translate "Mes inspections" %}
                {% if my_count > 0 and filter_type != 'my' %}
                <span class="badge rounded-pill bg-secondary ms-1">{{ my_count }}</span>
                {% endif %}
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {% if filter_type == 'all' %}active fw-bold{% endif %}" href="?tab=all">
                <i class="bi bi-collection me-1"></i>{% translate "Toutes les inspections" %}
            </a>
        </li>
    </ul>

    <!-- Barre de filtres -->
    <div class="card mb-3 shadow-sm border-0 bg-light">
        <div class="card-body p-3">
            <form method="get" class="row g-2 align-items-center">
                <input type="hidden" name="tab" value="{{ filter_type }}">
                
                <div class="col-12 col-md-3">
                    <div class="input-group input-group-sm">
                        <span class="input-group-text bg-white"><i class="bi bi-search"></i></span>
                        <input type="text" name="q" value="{{ search_q }}" class="form-control" placeholder="{% translate 'Rechercher par note, asset, ...' %}">
                    </div>
                </div>

                <div class="col-12 col-sm-6 col-md-2">
                    <select name="thematic" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">{% translate "-- Thématiques --" %}</option>
                        {% for t in thematics %}
                        <option value="{{ t.code }}" {% if selected_thematic == t.code %}selected{% endif %}>{{ t.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                {% if zones %}
                <div class="col-12 col-sm-6 col-md-2">
                    <select name="zone" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">{% translate "-- Districts / Zones --" %}</option>
                        {% for z in zones %}
                        <option value="{{ z.id }}" {% if selected_zone == z.id|stringformat:"s" %}selected{% endif %}>{{ z.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% endif %}

                <div class="col-12 col-sm-6 col-md-2">
                    <select name="nature" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">{% translate "-- Natures --" %}</option>
                        {% for val, label in nature_choices %}
                        <option value="{{ val }}" {% if selected_nature == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-12 col-sm-6 col-md-2">
                    <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="">{% translate "-- Tous les résultats --" %}</option>
                        {% for val, label in result_choices %}
                        <option value="{{ val }}" {% if selected_status == val %}selected{% endif %}>{{ label }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="col-12 col-sm-6 col-md-1 d-flex gap-2">
                    <button type="submit" class="btn btn-sm btn-secondary flex-grow-1">{% translate "Filtrer" %}</button>
                    <a href="?tab={{ filter_type }}" class="btn btn-sm btn-outline-secondary" title="{% translate 'Réinitialiser' %}"><i class="bi bi-x-circle"></i></a>
                </div>
            </form>
        </div>
    </div>

    <!-- Bouton Flottant (FAB) Carte des résultats -->
    <button type="button" class="btn btn-primary rounded-circle shadow-lg position-fixed bottom-0 end-0 m-4 d-flex align-items-center justify-content-center"
            style="width: 56px; height: 56px; z-index: 1050; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;"
            data-bs-toggle="modal" 
            data-bs-target="#inspectionsMapModal" 
            id="btn-open-inspections-map-fab"
            title="{% translate 'Carte des résultats' %}"
            aria-label="{% translate 'Carte des résultats' %}">
        <i class="bi bi-map fs-4"></i>
    </button>

    {% if inspections %}
    <!-- Liste des inspections sous forme de Cards -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <span class="fw-semibold text-muted small">
            {% blocktranslate count counter=total_count %}{{ counter }} inspection trouvée{% plural %}{{ counter }} inspections trouvées{% endblocktranslate %}
            <span class="fst-italic text-secondary">({% translate "limité aux 100 plus récentes" %})</span>
        </span>
    </div>

    <div class="row g-3 mb-4">
        {% for insp in inspections %}
        <div class="col-12">
            <div class="card shadow-sm border-0 h-100 inspection-card cursor-pointer {% if insp.is_cancelled %}is-cancelled{% endif %}"
                 style="cursor: pointer; transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;"
                 data-bs-toggle="modal" 
                 data-bs-target="#inspectionDetailModal{{ insp.id }}">
                <div class="card-body p-3 d-flex flex-column justify-content-between">
                    <div>
                        <!-- Entête card : Thématique/Type + Badge résultat -->
                        <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-1">
                            <div class="d-flex align-items-center gap-1">
                                <span class="badge bg-light text-dark border d-inline-flex align-items-center">
                                    <i class="bi {{ insp.thematic_icon }} me-1 text-primary"></i>
                                    {{ insp.asset_content_type.name }}
                                </span>
                                {% if insp.assigned_team %}
                                <span class="badge bg-light text-secondary border">
                                    <i class="bi bi-people me-1"></i>{{ insp.assigned_team.name }}
                                </span>
                                {% endif %}
                            </div>
                            <div>
                                {% if insp.is_scheduled %}
                                <span class="badge {{ insp.timeliness_badge_class }}">
                                    <i class="bi bi-hourglass-split me-1"></i>{{ insp.timeliness_label }}
                                </span>
                                {% else %}
                                <span class="badge {{ insp.status_badge_class }}">
                                    <i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}
                                </span>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Nom de la cible tronqué à 100 caractères -->
                        <h6 class="fw-bold text-dark mb-1 text-break">
                            {{ insp.target_display|truncatechars:100 }}
                        </h6>

                        {% if insp.is_scheduled %}
                        <div class="alert alert-light border py-1 px-2 my-2 small text-muted d-flex align-items-center justify-content-between flex-wrap gap-1">
                            <span>
                                <i class="bi bi-calendar-range text-primary me-1"></i>
                                {% translate "Fenêtre" %} : {{ insp.scheduled_start_date|date:"d/m/Y" }} &rarr; <strong>{{ insp.scheduled_due_date|date:"d/m/Y" }}</strong>
                            </span>
                            {% if insp.checked_intervention %}
                            <span class="text-primary fw-semibold">
                                <i class="bi bi-tools me-1"></i>{{ insp.checked_intervention.code }}{% if insp.checked_intervention.sub_type %} ({{ insp.checked_intervention.sub_type.get_name }}){% endif %}
                            </span>
                            {% endif %}
                        </div>
                        {% endif %}

                        <!-- Résumé des constats si présent -->
                        {% if insp.details_summary and insp.details_summary != "-" %}
                        <p class="text-muted small mb-2 text-truncate mt-1">
                            <i class="bi bi-ui-checks me-1 text-secondary"></i>{{ insp.details_summary }}
                        </p>
                        {% endif %}
                    </div>

                    <!-- Ligne de pied card : Date & Inspecteur / Action -->
                    <div class="d-flex justify-content-between align-items-center pt-2 border-top mt-2 text-muted extra-small">
                        {% if insp.is_scheduled %}
                        <span><i class="bi bi-clock-history me-1"></i>{% translate "Planifiée" %}</span>
                        <div class="d-flex align-items-center gap-2">
                            {% can_edit_inspection insp request.user as can_perform %}
                            {% if can_perform %}
                            <button type="button" class="btn btn-sm btn-success fw-bold py-1 px-2.5 shadow-sm" onclick="event.stopPropagation(); openEditInspectionModal({{ insp.id }});">
                                <i class="bi bi-clipboard-check me-1"></i>{% translate "Réaliser" %}
                            </button>
                            {% endif %}
                        </div>
                        {% else %}
                        <span><i class="bi bi-clock me-1"></i>{{ insp.inspection_date|date:"d/m/Y H:i" }}</span>
                        <div class="d-flex align-items-center gap-2">
                            {% if insp.documents.all %}
                            <span class="badge bg-light text-secondary border" title="{% translate 'Photos / Documents joints' %}">
                                <i class="bi bi-paperclip me-1"></i>{{ insp.documents.count }}
                            </span>
                            {% endif %}
                            {% if insp.inspector %}
                            <span><i class="bi bi-person me-1"></i>{{ insp.inspector|short_name }}</span>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal de détail de l'inspection -->
        <div class="modal fade" id="inspectionDetailModal{{ insp.id }}" tabindex="-1" aria-labelledby="inspectionDetailModalLabel{{ insp.id }}" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered">
                <div class="modal-content border-0 shadow">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title fw-bold" id="inspectionDetailModalLabel{{ insp.id }}">
                            <i class="bi {{ insp.thematic_icon }} me-2 text-primary"></i>{% translate "Détail de l'inspection" %}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body p-3">
                        {% if insp.is_cancelled %}
                        <div class="alert alert-secondary py-2 px-3 small d-flex align-items-center mb-3">
                            <i class="bi bi-slash-circle me-2 fs-6"></i>
                            <div>
                                <strong>{% translate "Inspection annulée" %}</strong> — {% translate "Cette inspection a été annulée et n'est plus prise en compte dans la conformité active de la cible." %}
                            </div>
                        </div>
                        {% endif %}
                        <!-- Boutons d'action : asset et/ou intervention -->
                        {% if insp.asset or insp.related_intervention %}
                        <div class="row g-2 mb-3">
                            {% if insp.asset %}
                            <div class="col-12 {% if insp.related_intervention %}col-6{% endif %}">
                                <a href="{% if is_mobile %}{{ insp.mobile_asset_url }}{% else %}{{ insp.asset.get_absolute_url }}{% endif %}" class="btn btn-primary w-100 fw-semibold">
                                    <i class="bi bi-box-arrow-up-right me-2"></i>{% translate "Fiche de l'asset" %}
                                </a>
                            </div>
                            {% endif %}
                            {% if insp.related_intervention %}
                            <div class="col-12 {% if insp.asset %}col-6{% endif %}">
                                <a href="{% if is_mobile %}{{ insp.mobile_related_intervention_url }}{% else %}{{ insp.related_intervention_url }}{% endif %}" class="btn btn-outline-primary w-100 fw-semibold">
                                    <i class="bi bi-tools me-2"></i>{% translate "Intervention" %} {{ insp.related_intervention.code }}
                                </a>
                            </div>
                            {% endif %}
                        </div>
                        {% endif %}

                        <ul class="list-group list-group-flush mb-3">
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-geo-alt me-1"></i>{% translate "Cible" %}</span>
                                <span class="fw-bold text-end ms-2">{{ insp.target_display }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-layers me-1"></i>{% translate "Type d'asset" %}</span>
                                <span class="badge bg-secondary">{{ insp.asset_content_type.name }}</span>
                            </li>
                            {% if insp.related_intervention %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-tools me-1"></i>{% translate "Intervention liée" %}</span>
                                <span class="fw-semibold text-end ms-2">
                                    <a href="{% if is_mobile %}{{ insp.mobile_related_intervention_url }}{% else %}{{ insp.related_intervention_url }}{% endif %}" class="text-decoration-none fw-bold">
                                        <i class="bi bi-box-arrow-up-right me-1"></i>{{ insp.related_intervention.code }}
                                    </a>
                                    {% if insp.related_intervention.sub_type %}
                                    <span class="badge bg-light text-dark border ms-1">{{ insp.related_intervention.sub_type.get_name }}</span>
                                    {% endif %}
                                </span>
                            </li>
                            {% endif %}
                            {% if insp.is_scheduled %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-hourglass-split me-1"></i>{% translate "Statut" %}</span>
                                <span class="badge {{ insp.timeliness_badge_class }}">{{ insp.get_status_display }} ({{ insp.timeliness_label }})</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-calendar-range me-1"></i>{% translate "Fenêtre d'inspection" %}</span>
                                <span class="fw-semibold">{{ insp.scheduled_start_date|date:"d/m/Y" }} &rarr; {{ insp.scheduled_due_date|date:"d/m/Y" }}</span>
                            </li>
                            {% if insp.assigned_team %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-people me-1"></i>{% translate "Équipe assignée" %}</span>
                                <span class="fw-semibold">{{ insp.assigned_team.name }}</span>
                            </li>
                            {% endif %}
                            {% if insp.checked_intervention %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-tools me-1"></i>{% translate "Intervention liée" %}</span>
                                <a href="/interventions/{{ insp.checked_intervention.id }}/" class="fw-bold text-decoration-none">
                                    {{ insp.checked_intervention.code }} {% if insp.checked_intervention.sub_type %}({{ insp.checked_intervention.sub_type.get_name }}){% endif %}
                                </a>
                            </li>
                            {% endif %}
                            {% else %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-calendar-event me-1"></i>{% translate "Date & Heure" %}</span>
                                <span class="fw-semibold">{{ insp.inspection_date|date:"d/m/Y H:i" }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-shield-check me-1"></i>{% translate "Résultat du contrôle" %}</span>
                                <span class="badge {{ insp.status_badge_class }}"><i class="bi {{ insp.status_icon }} me-1"></i>{{ insp.get_result_status_display }}</span>
                            </li>
                            {% endif %}
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-eye me-1"></i>{% translate "Nature" %}</span>
                                <span class="badge bg-light text-dark border">{{ insp.get_nature_display }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-person me-1"></i>{% translate "Inspecteur" %}</span>
                                <span class="fw-semibold">{{ insp.inspector|short_name|default:"-" }}</span>
                            </li>
                            <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                                <span class="text-muted"><i class="bi bi-clock-history me-1"></i>{% translate "Date de modification" %}</span>
                                <span class="fw-semibold">{{ insp.updated_at|date:"d/m/Y H:i" }}</span>
                            </li>
                        </ul>

                        {% get_inspection_detail_template insp as detail_template %}
                        {% if detail_template %}
                            <div class="mt-3">
                                {% include detail_template with insp=insp %}
                            </div>
                        {% endif %}

                        {% if insp.notes and not insp.is_giep %}
                        <div class="card bg-light border-0 p-3 mb-3">
                            <h6 class="fw-bold text-secondary mb-2"><i class="bi bi-journal-text me-2"></i>{% translate "Remarques" %}</h6>
                            <div class="text-dark small">{{ insp.notes }}</div>
                        </div>
                        {% endif %}

                        {% if insp.verified_obsolescence %}
                        <div class="card bg-warning-subtle border-0 p-3 mb-3">
                            <h6 class="fw-bold text-warning-emphasis mb-1"><i class="bi bi-exclamation-triangle me-2"></i>{% translate "Obsolescence" %}</h6>
                            <div class="text-warning-emphasis small">{{ insp.verified_obsolescence }}</div>
                        </div>
                        {% endif %}

                        {% if insp.documents.exists and not insp.is_giep %}
                        <div class="card bg-light border-0 p-3 mb-3">
                            <h6 class="fw-bold text-secondary mb-2">
                                <i class="bi bi-images me-2 text-primary"></i>{% translate "Photos & Documents joints" %} ({{ insp.documents.count }})
                            </h6>

                            {% with docs=insp.documents.all %}
                            <!-- Carrousel Photos Bootstrap -->
                            <div id="carouselInsp{{ insp.id }}" class="carousel slide rounded overflow-hidden shadow-sm bg-black mb-3" data-bs-ride="false">
                                <div class="carousel-indicators">
                                    {% for doc in docs %}
                                    {% if doc.is_image %}
                                    <button type="button" data-bs-target="#carouselInsp{{ insp.id }}" data-bs-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active" aria-current="true"{% endif %} aria-label="Slide {{ forloop.counter }}"></button>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                <div class="carousel-inner" style="max-height: 300px; min-height: 180px;">
                                    {% for doc in docs %}
                                    {% if doc.is_image %}
                                    <div class="carousel-item {% if forloop.first %}active{% endif %} h-100">
                                        <div class="d-flex align-items-center justify-content-center bg-black position-relative" style="height: 260px;">
                                            <img data-src="{{ doc.file_url }}" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" loading="lazy" class="d-block img-fluid mh-100 mw-100 list-insp-carousel-trigger" style="object-fit: contain; max-height: 260px; cursor: pointer;" data-insp-id="{{ insp.id }}" data-img-index="{{ forloop.counter0 }}" alt="{{ doc.filename }}">
                                            <button type="button" class="btn btn-sm btn-dark bg-opacity-75 text-white rounded-circle p-1.5 shadow list-insp-carousel-trigger position-absolute bottom-0 end-0 m-2" style="z-index: 10; cursor: pointer;" data-insp-id="{{ insp.id }}" data-img-index="{{ forloop.counter0 }}" title="{% translate 'Plein écran' %}">
                                                <i class="bi bi-arrows-fullscreen"></i>
                                            </button>
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#carouselInsp{{ insp.id }}" data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon p-2 rounded-circle bg-dark bg-opacity-50" aria-hidden="true"></span>
                                    <span class="visually-hidden">{% translate "Précédent" %}</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#carouselInsp{{ insp.id }}" data-bs-slide="next">
                                    <span class="carousel-control-next-icon p-2 rounded-circle bg-dark bg-opacity-50" aria-hidden="true"></span>
                                    <span class="visually-hidden">{% translate "Suivant" %}</span>
                                </button>
                            </div>

                            <!-- Documents non-images -->
                            <div class="flex-wrap gap-2 d-flex">
                                {% for doc in docs %}
                                {% if not doc.is_image %}
                                <a href="{{ doc.file_url }}" target="_blank" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1">
                                    <i class="bi bi-file-earmark-arrow-down text-primary"></i>
                                    <span class="text-truncate" style="max-width: 160px;">{{ doc.filename }}</span>
                                </a>
                                {% endif %}
                                {% endfor %}
                            </div>
                            {% endwith %}
                        </div>
                        {% endif %}
                    </div>
                    <div class="modal-footer bg-light py-2">
                        {% can_edit_inspection insp request.user as user_can_edit %}
                        {% if user_can_edit %}
                            {% if insp.is_scheduled %}
                            <button type="button" class="btn btn-success btn-sm fw-bold px-3" onclick="openEditInspectionModal({{ insp.id }})" data-bs-dismiss="modal">
                                <i class="bi bi-clipboard-check me-1"></i>{% translate "Réaliser le contrôle" %}
                            </button>
                            {% endif %}
                            {% if insp.is_cancelled %}
                            <button type="button" class="btn btn-outline-success btn-sm fw-semibold" onclick="handleToggleCancelInspection({{ insp.id }}, 'restore')">
                                <i class="bi bi-arrow-counterclockwise me-1"></i>{% translate "Rétablir l'inspection" %}
                            </button>
                            {% else %}
                            <button type="button" class="btn btn-outline-danger btn-sm fw-semibold" onclick="handleToggleCancelInspection({{ insp.id }}, 'cancel')">
                                <i class="bi bi-x-circle me-1"></i>{% translate "Annuler l'inspection" %}
                            </button>
                            {% endif %}
                            {% if not insp.is_scheduled %}
                            <button type="button" class="btn btn-outline-primary btn-sm fw-semibold" onclick="openEditInspectionModal({{ insp.id }})" data-bs-dismiss="modal">
                                <i class="bi bi-pencil me-1"></i>{% translate "Modifier l'inspection" %}
                            </button>
                            {% endif %}
                        {% endif %}
                        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
                    </div>

                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="card shadow-sm border-0 p-5 text-center text-muted">
        <i class="bi bi-inbox fs-1 d-block mb-3 text-secondary"></i>
        <h5>{% translate "Aucune inspection trouvée" %}</h5>
        <p class="small text-muted mb-0">{% translate "Aucune inspection ne correspond à vos critères de recherche." %}</p>
    </div>
    {% endif %}
</div>

<!-- Overlay Carrousel Plein Écran pour Photos (avec bouton fermer) -->
<div id="fullscreenPhotoOverlay" class="d-none position-fixed top-0 start-0 w-100 h-100 bg-black" style="z-index: 999999;">
    <!-- Bouton Fermer -->
    <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3 fs-4 shadow p-2" id="btn-close-photo-overlay" style="z-index: 1000005; cursor: pointer;" aria-label="{% translate 'Fermer' %}"></button>

    <!-- Conteneur Carrousel -->
    <div id="fullscreenPhotoCarousel" class="carousel slide w-100 h-100" data-bs-ride="false">
        <div class="carousel-indicators mb-3" id="fullscreen-carousel-indicators" style="z-index: 1000001;"></div>
        <div class="carousel-inner w-100 h-100" id="fullscreen-carousel-inner"></div>
        <button class="carousel-control-prev" type="button" data-bs-target="#fullscreenPhotoCarousel" data-bs-slide="prev" style="z-index: 1000000;">
            <span class="carousel-control-prev-icon p-3 rounded-circle bg-dark bg-opacity-75" aria-hidden="true"></span>
            <span class="visually-hidden">{% translate "Précédent" %}</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#fullscreenPhotoCarousel" data-bs-slide="next" style="z-index: 1000000;">
            <span class="carousel-control-next-icon p-3 rounded-circle bg-dark bg-opacity-75" aria-hidden="true"></span>
            <span class="visually-hidden">{% translate "Suivant" %}</span>
        </button>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const listTriggers = document.querySelectorAll('.list-insp-carousel-trigger');
    listTriggers.forEach(trig => {
        trig.addEventListener('click', function(e) {
            e.preventDefault();
            const inspId = this.getAttribute('data-insp-id');
            const startIndex = parseInt(this.getAttribute('data-img-index'), 10) || 0;
            const carouselEl = document.getElementById('carouselInsp' + inspId);
            if (!carouselEl) return;

            const imgs = carouselEl.querySelectorAll('img.list-insp-carousel-trigger');
            const imagesData = [];
            imgs.forEach(img => {
                imagesData.push({
                    url: img.getAttribute('src'),
                    filename: img.getAttribute('alt') || '{% translate "Photo" %}'
                });
            });

            const overlay = document.getElementById('fullscreenPhotoOverlay');
            const fsInner = document.getElementById('fullscreen-carousel-inner');
            const fsIndicators = document.getElementById('fullscreen-carousel-indicators');
            if (!overlay || !fsInner) return;

            fsInner.innerHTML = '';
            if (fsIndicators) fsIndicators.innerHTML = '';

            imagesData.forEach((doc, idx) => {
                const activeClass = idx === startIndex ? 'active' : '';
                const item = document.createElement('div');
                item.className = `carousel-item ${activeClass} w-100 h-100`;
                item.innerHTML = `
                    <div class="w-100 h-100 d-flex flex-column align-items-center justify-content-center p-3">
                        <img src="${doc.url}" class="img-fluid mh-100 mw-100 shadow-lg" style="object-fit: contain; max-height: 85vh;" alt="${doc.filename}">
                        <div class="text-white small mt-2 bg-dark bg-opacity-75 px-3 py-1 rounded-pill">${doc.filename}</div>
                    </div>
                `;
                fsInner.appendChild(item);

                if (fsIndicators && imagesData.length > 1) {
                    const ind = document.createElement('button');
                    ind.type = 'button';
                    ind.setAttribute('data-bs-target', '#fullscreenPhotoCarousel');
                    ind.setAttribute('data-bs-slide-to', idx.toString());
                    if (idx === startIndex) {
                        ind.className = 'active';
                        ind.setAttribute('aria-current', 'true');
                    }
                    ind.setAttribute('aria-label', `{% translate "Photo" %} ${idx + 1}`);
                    fsIndicators.appendChild(ind);
                }
            });

            overlay.classList.remove('d-none');

            const btnClose = document.getElementById('btn-close-photo-overlay');
            if (btnClose) {
                const closeHandler = function(e) {
                    if (e) e.preventDefault();
                    overlay.classList.add('d-none');
                    btnClose.removeEventListener('click', closeHandler);
                };
                btnClose.addEventListener('click', closeHandler);
            }

            const escHandler = function(e) {
                if (e.key === 'Escape') {
                    overlay.classList.add('d-none');
                    document.removeEventListener('keydown', escHandler);
                }
            };
            document.addEventListener('keydown', escHandler);
        });
    });
});
</script>
<!-- Modale Carte des Inspections filtrées -->
<div class="modal fade" id="inspectionsMapModal" tabindex="-1" aria-labelledby="inspectionsMapModalLabel" aria-hidden="true" style="z-index: 1070;">
    <div class="modal-dialog modal-xl modal-dialog-centered mx-auto" style="width: 92vw; max-width: 1200px;">
        <div class="modal-content shadow-lg border-0 rounded-3">
            <div class="modal-header bg-dark text-white py-2.5">
                <h5 class="modal-title fs-6 fw-bold d-flex align-items-center gap-2" id="inspectionsMapModalLabel">
                    <i class="bi bi-map text-info fs-5"></i>
                    {% translate "Carte des résultats d'inspections" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
            </div>
            <div class="modal-body p-0 position-relative">
                <div id="inspections-list-modal-map" style="width: 100%; height: 75vh; border-radius: 0 0 0.5rem 0.5rem;"></div>
            </div>
        </div>
    </div>
</div>

<script src="{% static 'common/maplibre-gl.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalEl = document.getElementById('inspectionsMapModal');
    if (!modalEl) return;

    let mapModalInstance = null;

    const rawInspectionsData = [
        {% for insp in inspections %}
        {% if insp.lon_lat %}
        {
            id: {{ insp.id }},
            lon: {{ insp.lon_lat.0|unlocalize }},
            lat: {{ insp.lon_lat.1|unlocalize }},
            title: "{{ insp.target_display|escapejs }}",
            date: "{{ insp.inspection_date|date:'d/m/Y H:i' }}",
            date_raw: "{{ insp.inspection_date|date:'Y-m-d H:i:s' }}",
            result: "{{ insp.get_result_status_display|escapejs }}",
            result_code: "{{ insp.result_status|escapejs }}",
            badge_class: "{{ insp.status_badge_class|escapejs }}",
            inspector: "{{ insp.inspector|short_name|escapejs }}",
            nature: "{{ insp.get_nature_display|escapejs }}",
            summary: "{{ insp.details_summary|escapejs }}"
        }{% if not forloop.last %},{% endif %}
        {% endif %}
        {% endfor %}
    ];

    // Regroupement des inspections par emplacement (lon, lat)
    const groupedMap = {};
    rawInspectionsData.forEach(item => {
        const key = item.lon.toFixed(6) + '_' + item.lat.toFixed(6);
        if (!groupedMap[key]) {
            groupedMap[key] = {
                lon: item.lon,
                lat: item.lat,
                title: item.title,
                inspections: []
            };
        }
        groupedMap[key].inspections.push(item);
    });

    const groupedList = Object.values(groupedMap);
    groupedList.forEach(grp => {
        grp.inspections.sort((a, b) => b.date_raw.localeCompare(a.date_raw));
        grp.latest_result_code = grp.inspections[0].result_code;
        grp.inspections_count = grp.inspections.length;
        grp.inspections_json = JSON.stringify(grp.inspections);
    });

    modalEl.addEventListener('shown.bs.modal', function() {
        if (!mapModalInstance) {
            mapModalInstance = new maplibregl.Map({
                container: 'inspections-list-modal-map',
                style: window.MAP_STYLE_LIGHT || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
                center: [4.35, 50.85],
                zoom: 12
            });

            mapModalInstance.addControl(new maplibregl.NavigationControl(), 'bottom-right');

            mapModalInstance.on('load', function() {
                const geojson = {
                    type: 'FeatureCollection',
                    features: groupedList.map(m => ({
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [m.lon, m.lat]
                        },
                        properties: {
                            title: m.title,
                            latest_result_code: m.latest_result_code,
                            inspections_count: m.inspections_count,
                            inspections_json: m.inspections_json
                        }
                    }))
                };

                mapModalInstance.addSource('inspections-list-modal-source', {
                    type: 'geojson',
                    data: geojson
                });

                mapModalInstance.addLayer({
                    id: 'inspections-list-modal-layer',
                    type: 'circle',
                    source: 'inspections-list-modal-source',
                    paint: {
                        'circle-color': [
                            'match',
                            ['get', 'latest_result_code'],
                            'compliant', '#198754',
                            'non_compliant', '#ffc107',
                            'damaged', '#dc3545',
                            'missing', '#212529',
                            '#0d6efd'
                        ],
                        'circle-radius': 8,
                        'circle-stroke-width': 2,
                        'circle-stroke-color': '#ffffff'
                    }
                });

                mapModalInstance.on('mouseenter', 'inspections-list-modal-layer', function() {
                    mapModalInstance.getCanvas().style.cursor = 'pointer';
                });
                mapModalInstance.on('mouseleave', 'inspections-list-modal-layer', function() {
                    mapModalInstance.getCanvas().style.cursor = '';
                });

                mapModalInstance.on('click', 'inspections-list-modal-layer', function(e) {
                    if (!e.features || !e.features.length) return;

                    const clickPoint = e.point;
                    const rendered = mapModalInstance.queryRenderedFeatures(clickPoint, { layers: ['inspections-list-modal-layer'] });

                    let combinedInspections = [];
                    let popupTitle = '';
                    rendered.forEach(f => {
                        try {
                            const insps = JSON.parse(f.properties.inspections_json || '[]');
                            if (!popupTitle && f.properties.title) popupTitle = f.properties.title;
                            combinedInspections = combinedInspections.concat(insps);
                        } catch (err) {}
                    });

                    // Déduplication & tri par date décroissante
                    const dedup = {};
                    combinedInspections.forEach(item => { dedup[item.id] = item; });
                    const sortedInspections = Object.values(dedup).sort((a, b) => b.date_raw.localeCompare(a.date_raw));

                    if (!sortedInspections.length) return;

                    const coords = e.features[0].geometry.coordinates.slice();
                    let contentHtml = '';

                    if (sortedInspections.length === 1) {
                        const insp = sortedInspections[0];
                        contentHtml = `
                            <div class="p-1" style="min-width: 240px;">
                                <div class="d-flex justify-content-between align-items-center mb-1 gap-2">
                                    <span class="badge ${insp.badge_class}">${insp.result}</span>
                                    <small class="text-muted">${insp.date}</small>
                                </div>
                                <h6 class="fw-bold mb-1 text-dark">${insp.title}</h6>
                                <div class="small text-muted mb-1"><i class="bi bi-person me-1"></i>${insp.inspector}</div>
                                <p class="small text-secondary mb-2">${insp.summary}</p>
                                <button type="button" class="btn btn-xs btn-outline-primary w-100 py-1 open-detail-from-modal" data-insp-id="${insp.id}">
                                    <i class="bi bi-eye me-1"></i>{% translate "Détail" %}
                                </button>
                            </div>
                        `;
                    } else {
                        let rowsHtml = '';
                        sortedInspections.forEach(insp => {
                            rowsHtml += `
                                <div class="p-2 border-bottom d-flex align-items-center justify-content-between gap-2">
                                    <div class="min-w-0 flex-grow-1">
                                        <div class="d-flex flex-wrap align-items-center gap-1 mb-1">
                                            <span class="badge ${insp.badge_class} text-truncate flex-shrink-0" style="font-size: 0.7rem; max-width: 140px;">${insp.result}</span>
                                            <span class="fw-semibold text-primary text-nowrap insp-date-modal-link open-detail-from-modal" style="cursor: pointer; font-size: 0.78rem;" data-insp-id="${insp.id}">
                                                📅 ${insp.date}
                                            </span>
                                        </div>
                                        <div class="small text-muted text-truncate" style="max-width: 220px;"><i class="bi bi-person me-1"></i>${insp.inspector}</div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary px-2 py-1 flex-shrink-0 open-detail-from-modal ms-1" data-insp-id="${insp.id}" style="font-size: 0.75rem; border-radius: 0.375rem;" title="{% translate "Voir l'inspection" %}">
                                        <i class="bi bi-eye me-1"></i>{% translate "Détail" %}
                                    </button>
                                </div>
                            `;
                        });

                        contentHtml = `
                            <div class="p-1" style="min-width: 320px; max-width: 360px;">
                                <div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
                                    <h6 class="fw-bold mb-0 text-dark text-truncate" style="max-width: 230px;">${popupTitle || '{% translate "Équipement" %}'}</h6>
                                    <span class="badge bg-secondary rounded-pill small">${sortedInspections.length} {% translate "inspections" %}</span>
                                </div>
                                <div class="overflow-auto" style="max-height: 240px;">
                                    ${rowsHtml}
                                </div>
                            </div>
                        `;
                    }

                    new maplibregl.Popup({ closeButton: true, maxWidth: '380px' })
                        .setLngLat(coords)
                        .setHTML(contentHtml)
                        .addTo(mapModalInstance);
                });

                if (groupedList.length > 0) {
                    const bounds = new maplibregl.LngLatBounds();
                    groupedList.forEach(m => bounds.extend([m.lon, m.lat]));
                    mapModalInstance.fitBounds(bounds, { padding: 50, maxZoom: 17 });
                }
            });
        } else {
            mapModalInstance.resize();
            if (groupedList.length > 0) {
                const bounds = new maplibregl.LngLatBounds();
                groupedList.forEach(m => bounds.extend([m.lon, m.lat]));
                mapModalInstance.fitBounds(bounds, { padding: 50, maxZoom: 17 });
            }
        }
    });

    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.open-detail-from-modal');
        if (btn) {
            const inspId = btn.getAttribute('data-insp-id');
            const bsMapModal = bootstrap.Modal.getInstance(modalEl);
            if (bsMapModal) bsMapModal.hide();
            const detailModalEl = document.getElementById('inspectionDetailModal' + inspId);
            if (detailModalEl) {
                detailModalEl.setAttribute('data-opened-from-map', 'true');
                setTimeout(() => {
                    const bsDetailModal = bootstrap.Modal.getInstance(detailModalEl) || new bootstrap.Modal(detailModalEl);
                    bsDetailModal.show();
                }, 200);
            }
        }
    });

    document.addEventListener('show.bs.modal', function(e) {
        const modal = e.target;
        if (modal) {
            modal.querySelectorAll('img[data-src]').forEach(function(img) {
                const dataSrc = img.getAttribute('data-src');
                if (dataSrc && (!img.src || img.src.indexOf('data:image') !== -1)) {
                    img.src = dataSrc;
                }
            });
        }
    });

    document.addEventListener('hidden.bs.modal', function(e) {
        const modalTarget = e.target;
        if (modalTarget && modalTarget.getAttribute('data-opened-from-map') === 'true') {
            modalTarget.removeAttribute('data-opened-from-map');
            setTimeout(() => {
                const bsMapModal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
                bsMapModal.show();
            }, 150);
        }
    });

    window.handleToggleCancelInspection = function(inspectionId, action) {
        const confirmMsg = action === 'cancel' 
            ? "{% translate 'Êtes-vous sûr de vouloir annuler cette inspection ?' %}" 
            : "{% translate 'Êtes-vous sûr de vouloir rétablir cette inspection ?' %}";
        if (!confirm(confirmMsg)) return;

        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, 10) === 'csrftoken=') {
                    cookieValue = decodeURIComponent(cookie.substring(10));
                    break;
                }
            }
        }

        const formData = new FormData();
        formData.append('action', action);

        fetch(`/inspections/api/${inspectionId}/toggle-cancel/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': cookieValue
            },
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                window.location.reload();
            } else {
                alert(data.error || "{% translate 'Une erreur est survenue.' %}");
            }
        })
        .catch(err => {
            console.error(err);
            alert("{% translate 'Erreur de communication avec le serveur.' %}");
        });
    };
});
</script>

{% include "inspections/components/edit_inspection_modal.html" %}
{% endblock %}