{% extends "base.html" %}
{% load static i18n documents_tags %}

{% block title %}{{ building.code }} - {{ building.get_name }} | {{ product_name }}{% endblock %}

{% block extra_head %}
<!-- MapLibre GL CSS -->
<link href="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Breadcrumb & Actions -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{% url 'assets:buildings_index' %}">{% translate "Bâtiments publics" %}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ building.code }}</li>
            </ol>
        </nav>
        <div class="d-flex gap-2">
            {% if can_edit %}
                <a href="{% url 'assets:publicbuilding_edit' building.pk %}" class="btn btn-primary btn-sm">
                    <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
                </a>
            {% endif %}
            <a href="{% url 'assets:buildings_index' %}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>{% translate "Retour à la liste" %}
            </a>
        </div>
    </div>

    <!-- Header Card -->
    <div class="card shadow-sm mb-4">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <h2 class="h4 mb-1">
                        <i class="bi bi-building text-primary me-2"></i>{{ building.code }} - {{ building.get_name }}
                    </h2>
                    <p class="text-muted mb-2"><i class="bi bi-geo-alt me-1"></i>{{ building.address|default:_("Adresse non renseignée") }}</p>
                    <div class="d-flex gap-2 flex-wrap">
                        <span class="badge bg-primary-subtle text-primary border">{{ building.get_usage_type_display }}</span>
                        <span class="badge bg-success-subtle text-success border">{{ building.get_building_status_display }}</span>
                        {% if building.is_erp %}
                            <span class="badge bg-info-subtle text-info border">{{ regional_terms.public_access_short }} (Cat. {{ building.erp_category|default:"-" }})</span>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    {% if building.dpe_rating %}
                        <div class="d-inline-block text-center me-3">
                            <span class="d-block text-muted small">{{ regional_terms.energy_diag_short }}</span>
                            <span class="badge bg-success fs-5 px-3 py-2">Classe {{ building.dpe_rating }}</span>
                        </div>
                    {% endif %}
                    {% if building.ges_rating %}
                        <div class="d-inline-block text-center">
                            <span class="d-block text-muted small">{{ regional_terms.carbon_diag_short }}</span>
                            <span class="badge bg-primary fs-5 px-3 py-2">Classe {{ building.ges_rating }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- 3 Core Tabs Navigation -->
    <ul class="nav nav-tabs mb-4" id="buildingTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">
                <i class="bi bi-info-circle me-1"></i>{% translate "Vue d'ensemble" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="equipments-tab" data-bs-toggle="tab" data-bs-target="#equipments" type="button" role="tab">
                <i class="bi bi-gear me-1"></i>{% translate "Assets & Équipements" %} ({{ equipments|length }})
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="interventions-tab" data-bs-toggle="tab" data-bs-target="#interventions" type="button" role="tab">
                <i class="bi bi-tools me-1"></i>{% translate "Interventions" %} ({{ interventions.count }})
            </button>
        </li>
    </ul>

    <!-- Tabs Content -->
    <div class="tab-content" id="buildingTabsContent">
        
        <!-- 1. Vue d'ensemble (Dashboard avec Cards directes) -->
        <div class="tab-pane fade show active" id="overview" role="tabpanel">
            <div class="row g-4">
                
                <!-- Left Column: Propriété, Caractéristiques & Arborescence Niveaux/Locaux/Équipements -->
                <div class="col-md-7">
                    
                    <!-- Card 1: Propriété & Responsables -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold"><i class="bi bi-person-badge me-2"></i>{% translate "Propriété & Responsables" %}</div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <th class="w-50 text-muted">{% translate "Propriétaire" %} :</th>
                                    <td>{{ building.owner|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Gestionnaire référent" %} :</th>
                                    <td>{% if building.manager %}{{ building.manager.get_full_name|default:building.manager.username }}{% else %}-{% endif %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Service occupant" %} :</th>
                                    <td>{{ building.occupant_entity|default:"-" }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Card 2: Caractéristiques physiques & Normes -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light fw-bold"><i class="bi bi-rulers me-2"></i>{% translate "Caractéristiques physiques &" %} {{ regional_terms.public_access_short }}</div>
                        <div class="card-body">
                            <table class="table table-borderless mb-0">
                                <tr>
                                    <th class="w-50 text-muted">{% translate "Année de construction" %} :</th>
                                    <td>{{ building.construction_year|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Étages / Sous-sols" %} :</th>
                                    <td>{{ building.floors_count }} {% translate "étage(s)" %} / {{ building.basement_count }} {% translate "sous-sol(s)" %}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Surface Utile / Brut" %} :</th>
                                    <td>{{ building.usable_surface_m2|default:"-" }} m² / {{ building.total_surface_m2|default:"-" }} m²</td>
                                </tr>
                                {% if building.room_number %}
                                <tr>
                                    <th class="text-muted">{% translate "Numéro de local / porte" %} :</th>
                                    <td><span class="badge bg-secondary-subtle text-secondary border font-monospace"><i class="bi bi-tag me-1"></i>{{ building.room_number }}</span></td>
                                </tr>
                                {% endif %}
                                {% if building.surface_m2 %}
                                <tr>
                                    <th class="text-muted">{% translate "Surface spécifique" %} :</th>
                                    <td>{{ building.surface_m2 }} m²</td>
                                </tr>
                                {% endif %}
                                {% if building.ceiling_height_m %}
                                <tr>
                                    <th class="text-muted">{% translate "Hauteur sous plafond" %} :</th>
                                    <td>{{ building.ceiling_height_m }} m</td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th class="text-muted">{% translate "Chauffage du local" %} :</th>
                                    <td>{% if building.is_heated %}<span class="text-success"><i class="bi bi-fire me-1"></i>{% translate "Chauffé" %}</span>{% else %}<span class="text-muted"><i class="bi bi-slash-circle me-1"></i>{% translate "Non chauffé" %}</span>{% endif %}</td>
                                </tr>
                                {% if building.floor_type %}
                                <tr>
                                    <th class="text-muted">{% translate "Revêtement de sol" %} :</th>
                                    <td>{{ building.get_floor_type_display }}</td>
                                </tr>
                                {% endif %}
                                {% if building.fire_compartment %}
                                <tr>
                                    <th class="text-muted">{% translate "Compartiment coupe-feu" %} :</th>
                                    <td>{{ building.fire_compartment }}</td>
                                </tr>
                                {% endif %}
                                <tr>
                                    <th class="text-muted">{{ regional_terms.public_access_category }} :</th>
                                    <td>{{ building.erp_category|default:"-" }}</td>
                                </tr>
                                <tr>
                                    <th class="text-muted">{% translate "Accessibilité PMR" %} :</th>
                                    <td>{% if building.pmr_accessible %}<span class="text-success"><i class="bi bi-check-circle-fill me-1"></i>{% translate "Oui" %}</span>{% else %}<span class="text-muted">{% translate "Non" %}</span>{% endif %}</td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Card 3: Arborescence Unifiée des Localisations & Assets -->
                    <div class="card shadow-sm mb-4" id="card-hierarchy-tree">
                        <div class="card-header bg-light fw-bold d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <span><i class="bi bi-diagram-3 me-2"></i>{% translate "Arborescence Hiérarchique" %}</span>
                            <div class="d-flex align-items-center gap-2">
                                <div class="btn-group btn-group-sm" role="group" id="tree-expand-collapse-group">
                                    <button type="button" class="btn btn-outline-secondary py-0 px-2 small" id="btn-tree-collapse-all" title="{% translate 'Tout replier' %}">
                                        <i class="bi bi-arrows-collapse me-1"></i>{% translate "Tout replier" %}
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary py-0 px-2 small" id="btn-tree-expand-all" title="{% translate 'Tout déplier' %}">
                                        <i class="bi bi-arrows-expand me-1"></i>{% translate "Tout déplier" %}
                                    </button>
                                </div>
                                <span class="badge bg-primary-subtle text-primary border">{{ location_tree.children|length }} {% translate "sous-localisation(s)" %}</span>
                            </div>
                        </div>
                        <div class="card-body p-3">
                            
                            <!-- Localisation Parente (si existante) -->
                            {% if parent_location %}
                            <div class="card bg-light border-secondary-subtle p-2 mb-3">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="bi bi-geo-alt-fill text-danger fs-5"></i>
                                        <div>
                                            <div class="small text-muted fw-semibold">{% translate "Localisation parente" %} :</div>
                                            <a href="{{ parent_location.get_absolute_url }}" class="fw-bold text-primary text-decoration-underline">
                                                {{ parent_location.code }} - {{ parent_location.get_name }}
                                            </a>
                                            <span class="badge bg-secondary-subtle text-dark border small ms-1">{{ parent_location.get_location_type_display }}</span>
                                        </div>
                                    </div>
                                    <a href="{{ parent_location.get_absolute_url }}" class="btn btn-sm btn-outline-secondary py-0 px-2 small">
                                        <i class="bi bi-arrow-up me-1"></i>{% translate "Voir la parente" %}
                                    </a>
                                </div>
                            </div>
                            {% endif %}

                            <!-- Localisation Courante (Racine de l'affichage) -->
                            <div class="p-2 border rounded bg-white mb-2">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        <button class="btn btn-sm btn-light border p-0 px-1 tree-toggle-btn" 
                                                type="button" 
                                                data-bs-toggle="collapse" 
                                                data-bs-target="#tree-root-content" 
                                                aria-expanded="true">
                                            <i class="bi bi-chevron-down small"></i>
                                        </button>
                                        <i class="bi {{ building.get_icon_class }} text-primary fs-5"></i>
                                        <span class="fw-bold fs-6 text-primary">{{ building.code }}</span>
                                        {% if building.room_number %}
                                        <span class="badge bg-secondary-subtle text-secondary border ms-1 font-monospace"><i class="bi bi-tag me-1"></i>{{ building.room_number }}</span>
                                        {% endif %}
                                        <span class="fw-bold fs-6">- {{ building.get_name }}</span>
                                        <span class="badge bg-primary text-white ms-1">{{ building.get_location_type_display }}</span>

                                        {% if location_tree.assets %}
                                        <span class="badge bg-info-subtle text-info border small ms-1" title="{% translate 'Assets rattachés directement au bâtiment' %}">
                                            <i class="bi bi-tools me-1"></i>{{ location_tree.assets|length }} {% translate "asset(s)" %}
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div id="tree-root-content" class="collapse show mt-2">
                                    <!-- Assets rattachés directement au bâtiment racine -->
                                    {% if location_tree.assets %}
                                    <div class="tree-assets-group">
                                        {% include "assets/buildings/publicbuilding_asset_tree.html" with asset_nodes=location_tree.assets depth=2 only %}
                                    </div>
                                    {% endif %}

                                    <!-- Sous-localisations & leurs assets -->
                                    <div class="tree-locations-group">
                                        {% include "assets/buildings/publicbuilding_location_tree.html" with node=location_tree depth=1 only %}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <!-- Right Column: Localisation & Plans d'étage / Carte interactive -->
                <div class="col-md-5">
                    
                    <!-- Card Localisation, Carte interactive & Plans d'étage -->
                    <div class="card shadow-sm mb-4" id="card-location-plans">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center flex-wrap gap-2 py-2">
                            <div class="d-flex align-items-center">
                                {% if level_specific_mode %}
                                    <span class="fw-bold text-dark"><i class="bi bi-layers text-primary me-2"></i>{% translate "Plan du niveau" %} : <span class="text-primary">{{ active_floor.name|default:building.name }}</span></span>
                                {% else %}
                                    <span class="fw-bold text-dark"><i class="bi bi-geo-alt text-primary me-2"></i>{% translate "Localisation & Plans" %}</span>
                                {% endif %}
                            </div>

                            <div class="d-flex align-items-center gap-2">
                                <div class="btn-group btn-group-sm" role="group" id="view-mode-toggle">
                                    <button type="button" class="btn btn-outline-primary active" id="btn-toggle-plans" title="{% translate "Afficher les plans d'étage" %}">
                                        <i class="bi bi-layers me-1"></i>{% translate "Plans" %}
                                    </button>
                                    <button type="button" class="btn btn-outline-primary" id="btn-toggle-map" title="{% translate "Afficher la carte du site" %}">
                                        <i class="bi bi-map me-1"></i>{% translate "Carte" %}
                                    </button>
                                </div>
                                {% if center_lat and center_lon %}
                                <a href="https://www.google.com/maps?cbll={{ center_lat_json }},{{ center_lon_json }}&cbp=12,0,0,0,5&layer=c&panoid=" 
                                   target="_blank" class="btn btn-sm btn-outline-secondary py-0 px-2" title="Street View">
                                    <img src="{% static 'common/google-street-view-logo.png' %}" alt="Street View" height="14" class="me-1">
                                    Street View
                                </a>
                                {% endif %}
                            </div>
                        </div>

                        <!-- 1. VUE PLANS D'ÉTAGE -->
                        <div id="section-plans" class="card-body p-0">
                            {% if not level_specific_mode and floors_data %}
                            <!-- Sélecteur d'étage horizontal -->
                            <div class="bg-light border-bottom px-3 py-2 d-flex align-items-center gap-1 overflow-auto" id="floors-nav-bar" style="white-space: nowrap;">
                                <span class="text-muted small fw-semibold me-2"><i class="bi bi-filter me-1"></i>{% translate "Niveaux" %} :</span>
                                {% for f in floors_data %}
                                <button type="button" 
                                        class="btn btn-sm floor-nav-btn {% if f.id == active_floor.id %}btn-primary text-white shadow-sm{% else %}btn-outline-secondary{% endif %}"
                                        data-floor-id="{{ f.id }}"
                                        data-plan-url="{{ f.plan_url }}"
                                        data-has-plan="{{ f.has_plan|yesno:'true,false' }}"
                                        data-floor-name="{{ f.name }}"
                                        data-surface="{{ f.surface_m2|default:'' }}"
                                        data-rooms-count="{{ f.rooms_count }}"
                                        data-assets-count="{{ f.assets_count }}"
                                        data-floor-url="{{ f.url }}">
                                    {{ f.name }}
                                    {% if f.has_plan %}
                                        <span class="badge bg-white text-primary ms-1" title="{% translate "Plan architectural disponible" %}">📐</span>
                                    {% endif %}
                                </button>
                                {% endfor %}
                            </div>
                            {% endif %}

                            <!-- Conteneur du viewer interactif -->
                            <div id="plan-viewer-wrapper" style="position: relative; height: 380px; width: 100%; background: #0F172A05; overflow: hidden; display: flex; align-items: center; justify-content: center;">
                                
                                <!-- Floating Controls (Zoom / Pan / Fullscreen / Download) -->
                                <div class="btn-group-vertical btn-group-sm shadow-sm" style="position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); border-radius: 6px; border: 1px solid #CBD5E1;">
                                    <button type="button" class="btn btn-light py-1 px-2" id="plan-zoom-in" title="{% translate "Zoom avant (+)" %}">
                                        <i class="bi bi-zoom-in"></i>
                                    </button>
                                    <button type="button" class="btn btn-light py-1 px-2" id="plan-zoom-out" title="{% translate "Zoom arrière (-)" %}">
                                        <i class="bi bi-zoom-out"></i>
                                    </button>
                                    <button type="button" class="btn btn-light py-1 px-2" id="plan-reset" title="{% translate "Recentrer / Ajuster (100%)" %}">
                                        <i class="bi bi-arrows-angle-contract"></i>
                                    </button>
                                    <button type="button" class="btn btn-light py-1 px-2" id="plan-fullscreen" title="{% translate "Plein écran" %}">
                                        <i class="bi bi-arrows-fullscreen"></i>
                                    </button>
                                    <a href="{{ active_floor.plan_url|default:'#' }}" target="_blank" class="btn btn-light py-1 px-2" id="plan-download-link" title="{% translate "Ouvrir / Télécharger le plan" %}" {% if not active_floor.has_plan %}style="display:none;"{% endif %}>
                                        <i class="bi bi-box-arrow-up-right"></i>
                                    </a>
                                </div>

                                <!-- Indicateur du niveau affiché -->
                                <div class="badge bg-dark bg-opacity-75 text-white px-2 py-1" style="position: absolute; bottom: 12px; left: 12px; z-index: 10; font-size: 0.8rem; pointer-events: none;" id="plan-level-indicator">
                                    <i class="bi bi-layers me-1"></i><span id="plan-active-name">{{ active_floor.name|default:building.name }}</span>
                                </div>

                                <!-- Pan/Zoom Canvas -->
                                <div id="plan-viewport" style="width: 100%; height: 100%; cursor: grab; display: flex; align-items: center; justify-content: center; transform-origin: center center; transition: transform 0.08s ease-out;">
                                    <img id="plan-image" 
                                         src="{{ active_floor.plan_url|default:'' }}" 
                                         alt="{% translate "Plan d'étage" %}" 
                                         style="max-width: 95%; max-height: 95%; object-fit: contain; user-select: none; pointer-events: none; {% if not active_floor.has_plan %}display: none;{% endif %}">
                                </div>

                                <!-- Empty State when floor has no plan -->
                                <div id="plan-empty-state" class="text-center p-4" style="{% if active_floor.has_plan %}display: none;{% else %}display: block;{% endif %}">
                                    <i class="bi bi-file-earmark-image fs-1 text-muted d-block mb-2"></i>
                                    <h6 class="text-muted mb-1">{% translate "Aucun plan associé à ce niveau" %}</h6>
                                    <p class="text-muted small mb-3">{% translate "Vous pouvez téléverser un plan d'étage (SVG, image ou PDF) pour ce niveau." %}</p>
                                    {% if can_edit %}
                                    <a href="{% url 'assets:publicbuilding_edit' building.pk %}" class="btn btn-sm btn-outline-primary">
                                        <i class="bi bi-upload me-1"></i>{% translate "Associer un plan" %}
                                    </a>
                                    {% endif %}
                                </div>
                            </div>

                            <!-- Footer info du niveau actif (locaux & caractéristiques) -->
                            <div class="card-footer bg-white p-3 border-top" id="plan-floor-info">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-2">
                                    <div>
                                        <strong class="text-dark" id="info-floor-title">{{ active_floor.name|default:building.name }}</strong>
                                        <span class="text-muted small ms-2" id="info-floor-code">({{ active_floor.code|default:building.code }})</span>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <span class="badge bg-light text-dark border" id="info-floor-surface">
                                            {% if active_floor.surface_m2 %}
                                                <i class="bi bi-bounding-box me-1 text-primary"></i>{{ active_floor.surface_m2|floatformat:1 }} m²
                                            {% endif %}
                                        </span>
                                        <span class="badge bg-light text-dark border" id="info-floor-rooms">
                                            <i class="bi bi-door-closed me-1 text-primary"></i><span id="info-rooms-count">{{ active_floor.rooms_count|default:0 }}</span> {% translate "local/locaux" %}
                                        </span>
                                        <span class="badge bg-light text-dark border" id="info-floor-assets">
                                            <i class="bi bi-tools me-1 text-primary"></i><span id="info-assets-count">{{ active_floor.assets_count|default:0 }}</span> {% translate "équipement(s)" %}
                                        </span>
                                    </div>
                                </div>

                                <!-- Chips des locaux / pièces situés sur cet étage -->
                                <div id="info-floor-rooms-chips" class="d-flex flex-wrap gap-1 mt-2">
                                    {% for r in active_floor.rooms %}
                                    <a href="{{ r.url }}" class="badge bg-light text-dark border text-decoration-none py-1 px-2" title="{{ r.location_type_display }}">
                                        <i class="bi bi-door-open me-1 text-primary"></i><strong>{{ r.room_number|default:r.code }}</strong> - {{ r.name }}
                                    </a>
                                    {% empty %}
                                    <span class="text-muted small fst-italic">{% translate "Aucun sous-local direct répertorié sur ce niveau." %}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>

                        <!-- 2. VUE CARTE DU SITE / EMPRISE (MapLibre) -->
                        <div id="section-map" style="display: none;">
                            <div class="card-body p-0">
                                <div id="building-map" style="height: 380px; width: 100%;"></div>
                            </div>
                            <div class="card-footer bg-white p-3 border-top">
                                <p class="mb-2 small">
                                    <strong>{% translate "Adresse" %} :</strong> {{ building.address|default:_("Non renseignée") }}
                                </p>
                                {% if center_lat and center_lon %}
                                <div class="small text-muted font-monospace">
                                    WGS84: {{ center_lat|floatformat:6 }}, {{ center_lon|floatformat:6 }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Card Documents associés (placée sous les plans et la carte) -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <span class="fw-bold"><i class="bi bi-file-earmark-text me-2"></i>{% translate "Documents associés" %} ({{ documents.count }})</span>
                            <a href="{% url 'admin:assets_publicbuildingdocument_add' %}?building={{ building.pk }}" class="btn btn-sm btn-outline-primary py-0 px-2">
                                <i class="bi bi-plus-lg me-1"></i>{% translate "Ajouter" %}
                            </a>
                        </div>
                        <div class="card-body">
                            <div class="row row-cols-1 row-cols-sm-2 g-3">
                                {% for doc in documents %}
                                <div class="col">
                                    <div class="card h-100 border p-2 text-center position-relative">
                                        {% if doc.document_type == 'floor_plan' %}
                                            <span class="badge bg-primary text-white position-absolute top-0 end-0 m-1" style="font-size: 0.65rem;">{% translate "Plan" %}</span>
                                            <i class="bi bi-layers text-primary fs-2 mb-1"></i>
                                        {% else %}
                                            <span class="badge bg-secondary text-white position-absolute top-0 end-0 m-1" style="font-size: 0.65rem;">{{ doc.get_document_type_display }}</span>
                                            <i class="bi bi-file-earmark-pdf text-danger fs-2 mb-1"></i>
                                        {% endif %}
                                        
                                        <div class="small text-truncate w-100 fw-bold" title="{{ doc.description|default:doc.file.name }}">
                                            {{ doc.description|default:doc.file.name }}
                                        </div>
                                        
                                        {% if doc.floor_location %}
                                        <div class="small text-muted text-truncate mb-1" style="font-size: 0.75rem;">
                                            <i class="bi bi-layers-half me-1"></i>{{ doc.floor_location.name }}
                                        </div>
                                        {% endif %}

                                        {% if doc.file %}
                                            <a href="{% url 'private_file_download' %}?app=assets&model=PublicBuildingDocument&pk={{ doc.pk }}&field=file" target="_blank" class="btn btn-sm btn-outline-secondary mt-auto py-0 px-2" style="font-size: 0.8rem;">
                                                <i class="bi bi-download me-1"></i>{% translate "Télécharger" %}
                                            </a>
                                        {% else %}
                                            <span class="text-muted small">{% translate "Fichier indisponible" %}</span>
                                        {% endif %}
                                    </div>
                                </div>
                                {% empty %}
                                <div class="col-12 text-center text-muted py-3">
                                    <i class="bi bi-folder-x fs-4 d-block mb-1"></i>
                                    {% translate "Aucun document associé." %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <!-- 2. Assets & Équipements Tab -->
        <div class="tab-pane fade" id="equipments" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="card-title h6 mb-0"><i class="bi bi-tools me-2"></i>{% translate "Assets Physiques & Équipements de la Localisation et de ses sous-localisations" %}</h5>
                    <span class="badge bg-info-subtle text-info border">{{ equipments|length }} {% translate "asset(s)" %}</span>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{% translate "Code / Nom" %}</th>
                                    <th>{% translate "Lot / Type d'asset" %}</th>
                                    <th>{% translate "Caractéristiques & Spécifications" %}</th>
                                    <th>{% translate "Localisation spécifique" %}</th>
                                    <th>{% translate "Asset Parent" %}</th>
                                    <th>{% translate "Statut" %}</th>
                                    <th>{% translate "Prochain contrôle" %}</th>
                                    <th>{% translate "Maintenance & Prestataire" %}</th>
                                    <th class="text-end pe-3">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for eq in equipments %}
                                <tr>
                                    <td>
                                        <a href="{{ eq.get_absolute_url }}" class="fw-bold text-decoration-none" style="color: {{ eq.theme_color }};">
                                            <i class="bi {{ eq.get_icon_class }} me-1" style="color: {{ eq.theme_icon_color }};"></i>{{ eq.code }}
                                        </a>
                                        <div class="small text-muted">{{ eq.get_name }}</div>
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-muted border me-1">{{ eq.get_macro_lot }}</span>
                                        <span class="badge {{ eq.theme_badge_class }} d-block mt-1" style="{{ eq.theme_badge_style }}">
                                            {{ eq.get_asset_type_display }}
                                        </span>
                                    </td>
                                    <td>
                                        {% if eq.dimensions or eq.surface_m2 %}
                                        <div class="small fw-semibold">{% if eq.dimensions %}{{ eq.dimensions }}{% endif %}{% if eq.surface_m2 %} ({{ eq.surface_m2 }} m²){% endif %}</div>
                                        {% endif %}
                                        {% if eq.power_kw or eq.energy_source %}
                                        <div class="small text-muted">
                                            {% if eq.power_kw %}<i class="bi bi-lightning-charge me-1"></i>{{ eq.power_kw }} kW{% endif %}
                                            {% if eq.energy_source %}<span class="badge bg-warning-subtle text-dark border ms-1">{{ eq.get_energy_source_display }}</span>{% endif %}
                                        </div>
                                        {% endif %}
                                        {% if eq.material or eq.fire_rating or eq.glazing_type %}
                                        <div class="small text-muted">
                                            {% if eq.material %}{{ eq.material }}{% endif %}
                                            {% if eq.glazing_type %} - {{ eq.get_glazing_type_display }}{% endif %}
                                            {% if eq.fire_rating %}<span class="badge bg-danger-subtle text-danger border ms-1">{{ eq.fire_rating }}</span>{% endif %}
                                        </div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if eq.location %}
                                            <a href="{{ eq.location.get_absolute_url }}" class="small text-dark text-decoration-none">
                                                <i class="bi {{ eq.location.get_icon_class }} me-1"></i>{{ eq.location.code }} - {{ eq.location.get_name }}
                                            </a>
                                        {% else %}
                                            <span class="small text-muted">{{ eq.building.code }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if eq.parent_asset %}
                                            <a href="{{ eq.parent_asset.get_absolute_url }}" class="small text-decoration-none">
                                                <i class="bi {{ eq.parent_asset.get_icon_class }} me-1"></i>{{ eq.parent_asset.code }}
                                            </a>
                                        {% else %}
                                            <span class="text-muted small">-</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge {% if eq.status == 'active' %}bg-success-subtle text-success border{% else %}bg-secondary-subtle text-secondary border{% endif %}">
                                            {{ eq.get_status_display }}
                                        </span>
                                    </td>
                                    <td>{{ eq.next_control_date|date:"d/m/Y"|default:"-" }}</td>
                                    <td>
                                        {% if eq.contractor_name %}
                                        <div class="small fw-semibold"><i class="bi bi-building me-1"></i>{{ eq.contractor_name }}</div>
                                        {% endif %}
                                        {% if eq.maintenance_contract_ref %}
                                        <div class="small text-muted font-monospace">Réf: {{ eq.maintenance_contract_ref }}</div>
                                        {% elif not eq.contractor_name %}
                                        <span class="text-muted small">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-3">
                                        <a href="{{ eq.get_absolute_url }}" class="btn btn-sm btn-outline-info py-0 px-2 small text-nowrap" title="{% translate 'Détail de l’asset' %}">
                                            <i class="bi bi-eye me-1"></i>{% translate "Détail" %}
                                        </a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="9" class="text-center text-muted py-4">{% translate "Aucun asset ou équipement technique enregistré." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3. Interventions Tab -->
        <div class="tab-pane fade" id="interventions" role="tabpanel">
            <div class="card shadow-sm">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="card-title h6 mb-0"><i class="bi bi-tools me-2"></i>{% translate "Interventions & Maintenance" %}</h5>
                    <a href="{% url 'interventions:interventions_index' %}?asset={{ building.pk }}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-plus-lg me-1"></i>{% translate "Nouvelle intervention" %}
                    </a>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 50px;"></th>
                                <th>{% translate "Code" %}</th>
                                <th>{% translate "Titre / Objet" %}</th>
                                <th>{% translate "Date de début" %}</th>
                                <th>{% translate "Statut" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for interv in interventions %}
                            <tr>
                                <td>
                                    <a href="{% url 'interventions:interventions_index' %}{{ interv.id }}" class="btn btn-sm btn-light border" title="{% translate 'Détail' %}">
                                        <i class="bi bi-info-circle"></i>
                                    </a>
                                </td>
                                <td><strong>{{ interv.code }}</strong></td>
                                <td>{{ interv.title }}</td>
                                <td>{{ interv.begin_time|date:"d/m/Y H:i"|default:"-" }}</td>
                                <td><span class="badge bg-secondary">{{ interv.get_status_display }}</span></td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="bi bi-tools fs-2 d-block mb-2 text-muted"></i>
                                    {% translate "Aucune intervention enregistrée pour ce bâtiment." %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
{% endblock %}

{% block script %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    const buildingGeom = {{ building_geojson_json|safe }};
    const centerLon = {{ center_lon_json|safe }} || 4.3572;
    const centerLat = {{ center_lat_json|safe }} || 50.8477;
    const floorsData = {{ floors_data_json|safe }} || [];
    let currentFloor = {{ active_floor_json|safe }};
    const hasAnyPlan = {{ has_any_plan|yesno:"true,false" }};
    const levelSpecificMode = {{ level_specific_mode|yesno:"true,false" }};
    let map = null;

    // 1. Initialisation de la carte MapLibre
    function initMap() {
        const container = document.getElementById("building-map");
        if (!container || map) return;

        map = new maplibregl.Map({
            container: "building-map",
            style: "{{ MAP_STYLE_LIGHT|default:'https://api.maptiler.com/maps/streets-v2-light/style.json' }}",
            center: [centerLon, centerLat],
            zoom: 16
        });

        map.addControl(new maplibregl.NavigationControl());

        map.on("load", function() {
            if (buildingGeom) {
                map.addSource("building-footprint", {
                    "type": "geojson",
                    "data": buildingGeom
                });

                map.addLayer({
                    "id": "building-fill",
                    "type": "fill",
                    "source": "building-footprint",
                    "paint": {
                        "fill-color": "#2B579A",
                        "fill-opacity": 0.4
                    }
                });

                map.addLayer({
                    "id": "building-outline",
                    "type": "line",
                    "source": "building-footprint",
                    "paint": {
                        "line-color": "#2B579A",
                        "line-width": 3
                    }
                });
            }
        });
    }

    // 2. Bascule entre Mode Plans d'étage et Mode Carte
    const btnTogglePlans = document.getElementById("btn-toggle-plans");
    const btnToggleMap = document.getElementById("btn-toggle-map");
    const sectionPlans = document.getElementById("section-plans");
    const sectionMap = document.getElementById("section-map");

    function setViewMode(mode) {
        if (mode === "map") {
            btnToggleMap?.classList.add("active");
            btnTogglePlans?.classList.remove("active");
            if (sectionPlans) sectionPlans.style.display = "none";
            if (sectionMap) sectionMap.style.display = "block";
            if (!map) {
                initMap();
            } else {
                map.resize();
            }
        } else {
            btnTogglePlans?.classList.add("active");
            btnToggleMap?.classList.remove("active");
            if (sectionPlans) sectionPlans.style.display = "block";
            if (sectionMap) sectionMap.style.display = "none";
        }
    }

    btnTogglePlans?.addEventListener("click", function() { setViewMode("plans"); });
    btnToggleMap?.addEventListener("click", function() { setViewMode("map"); });

    // Par défaut, si aucun plan n'existe et qu'on n'est pas en mode spécifique à un niveau, afficher la carte
    if (!hasAnyPlan && !levelSpecificMode && (buildingGeom || (centerLon && centerLat))) {
        setViewMode("map");
    } else {
        setViewMode("plans");
    }

    // 3. Pan & Zoom interactif sur le viewer de plan
    const planViewport = document.getElementById("plan-viewport");
    const planImage = document.getElementById("plan-image");
    const planWrapper = document.getElementById("plan-viewer-wrapper");
    const planEmptyState = document.getElementById("plan-empty-state");
    const planDownloadLink = document.getElementById("plan-download-link");
    const planActiveName = document.getElementById("plan-active-name");

    let scale = 1;
    let translateX = 0;
    let translateY = 0;
    let isDragging = false;
    let startX = 0;
    let startY = 0;

    function updateTransform() {
        if (planViewport) {
            planViewport.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
        }
    }

    function resetPlanView() {
        scale = 1;
        translateX = 0;
        translateY = 0;
        updateTransform();
    }

    document.getElementById("plan-zoom-in")?.addEventListener("click", function() {
        scale = Math.min(scale * 1.3, 6);
        updateTransform();
    });

    document.getElementById("plan-zoom-out")?.addEventListener("click", function() {
        scale = Math.max(scale / 1.3, 0.35);
        updateTransform();
    });

    document.getElementById("plan-reset")?.addEventListener("click", resetPlanView);

    document.getElementById("plan-fullscreen")?.addEventListener("click", function() {
        if (!document.fullscreenElement) {
            planWrapper?.requestFullscreen?.();
        } else {
            document.exitFullscreen?.();
        }
    });

    // Zoom molette
    planWrapper?.addEventListener("wheel", function(e) {
        e.preventDefault();
        const delta = e.deltaY > 0 ? 0.88 : 1.14;
        scale = Math.min(Math.max(scale * delta, 0.35), 6);
        updateTransform();
    }, { passive: false });

    // Déplacement souris (pan)
    planWrapper?.addEventListener("mousedown", function(e) {
        if (e.button !== 0) return;
        isDragging = true;
        startX = e.clientX - translateX;
        startY = e.clientY - translateY;
        if (planViewport) planViewport.style.cursor = "grabbing";
    });

    window.addEventListener("mousemove", function(e) {
        if (!isDragging) return;
        translateX = e.clientX - startX;
        translateY = e.clientY - startY;
        updateTransform();
    });

    window.addEventListener("mouseup", function() {
        if (isDragging) {
            isDragging = false;
            if (planViewport) planViewport.style.cursor = "grab";
        }
    });

    // 4. Navigation entre niveaux / étages
    function displayFloor(floor) {
        currentFloor = floor;
        resetPlanView();

        if (planActiveName) planActiveName.textContent = floor.name;

        // Mise à jour de l'image du plan
        if (floor.has_plan && floor.plan_url) {
            if (planImage) {
                planImage.src = floor.plan_url;
                planImage.style.display = "block";
            }
            if (planEmptyState) planEmptyState.style.display = "none";
            if (planDownloadLink) {
                planDownloadLink.href = floor.plan_url;
                planDownloadLink.style.display = "inline-block";
            }
        } else {
            if (planImage) planImage.style.display = "none";
            if (planEmptyState) planEmptyState.style.display = "block";
            if (planDownloadLink) planDownloadLink.style.display = "none";
        }

        // Mise à jour du bandeau d'information sous le plan
        const infoTitle = document.getElementById("info-floor-title");
        const infoCode = document.getElementById("info-floor-code");
        const infoSurface = document.getElementById("info-floor-surface");
        const infoRoomsCount = document.getElementById("info-rooms-count");
        const infoAssetsCount = document.getElementById("info-assets-count");
        const chipsContainer = document.getElementById("info-floor-rooms-chips");

        if (infoTitle) infoTitle.textContent = floor.name;
        if (infoCode) infoCode.textContent = `(${floor.code})`;
        if (infoSurface) {
            if (floor.surface_m2) {
                infoSurface.innerHTML = `<i class="bi bi-bounding-box me-1 text-primary"></i>${parseFloat(floor.surface_m2).toFixed(1)} m²`;
                infoSurface.style.display = "inline-block";
            } else {
                infoSurface.style.display = "none";
            }
        }
        if (infoRoomsCount) infoRoomsCount.textContent = floor.rooms_count || 0;
        if (infoAssetsCount) infoAssetsCount.textContent = floor.assets_count || 0;

        // Locaux de cet étage
        if (chipsContainer) {
            chipsContainer.innerHTML = "";
            if (floor.rooms && floor.rooms.length > 0) {
                floor.rooms.forEach(function(room) {
                    const chip = document.createElement("a");
                    chip.href = room.url;
                    chip.className = "badge bg-light text-dark border text-decoration-none py-1 px-2";
                    chip.title = room.location_type_display || "";
                    chip.innerHTML = `<i class="bi bi-door-open me-1 text-primary"></i><strong>${room.room_number || room.code}</strong> - ${room.name}`;
                    chipsContainer.appendChild(chip);
                });
            } else {
                chipsContainer.innerHTML = '<span class="text-muted small fst-italic">{% translate "Aucun sous-local direct répertorié sur ce niveau." %}</span>';
            }
        }
    }

    // Écouteurs sur les boutons d'étages
    document.querySelectorAll(".floor-nav-btn").forEach(function(btn) {
        btn.addEventListener("click", function() {
            const floorId = parseInt(btn.getAttribute("data-floor-id"));
            const targetFloor = floorsData.find(f => f.id === floorId);
            if (!targetFloor) return;

            document.querySelectorAll(".floor-nav-btn").forEach(b => {
                b.classList.remove("btn-primary", "text-white", "shadow-sm");
                b.classList.add("btn-outline-secondary");
            });
            btn.classList.remove("btn-outline-secondary");
            btn.classList.add("btn-primary", "text-white", "shadow-sm");

            displayFloor(targetFloor);
        });
    });

    const overviewTab = document.getElementById("overview-tab");
    if (overviewTab) {
        overviewTab.addEventListener("shown.bs.tab", function () {
            if (map) map.resize();
        });
    }

    // Gestion du chevron plié / déplié dans l'arborescence
    document.querySelectorAll(".tree-toggle-btn").forEach(function(btn) {
        const targetId = btn.getAttribute("data-bs-target");
        const target = document.querySelector(targetId);
        if (target) {
            target.addEventListener("show.bs.collapse", function (e) {
                if (e.target !== target) return;
                const icon = btn.querySelector("i");
                if (icon) {
                    icon.classList.remove("bi-chevron-right");
                    icon.classList.add("bi-chevron-down");
                }
            });
            target.addEventListener("hide.bs.collapse", function (e) {
                if (e.target !== target) return;
                const icon = btn.querySelector("i");
                if (icon) {
                    icon.classList.remove("bi-chevron-down");
                    icon.classList.add("bi-chevron-right");
                }
            });
        }
    });

    // Gestion du repliage / dépliage global de l'arborescence
    const treeCard = document.getElementById("card-hierarchy-tree");
    if (treeCard) {
        const collapseAllBtn = document.getElementById("btn-tree-collapse-all");
        const expandAllBtn = document.getElementById("btn-tree-expand-all");

        if (collapseAllBtn) {
            collapseAllBtn.addEventListener("click", function() {
                // Replier tous les nœuds enfants de l'arborescence (localisations et assets)
                treeCard.querySelectorAll(".tree-collapse-node").forEach(function(el) {
                    if (window.bootstrap && bootstrap.Collapse) {
                        const bsCollapse = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });
                        bsCollapse.hide();
                    } else {
                        el.classList.remove("show");
                    }
                });
                // Mettre à jour l'état visuel de tous les boutons chevrons
                treeCard.querySelectorAll(".tree-toggle-btn").forEach(function(btn) {
                    if (btn.getAttribute("data-bs-target") !== "#tree-root-content") {
                        btn.classList.add("collapsed");
                        btn.setAttribute("aria-expanded", "false");
                        const icon = btn.querySelector("i");
                        if (icon) {
                            icon.classList.remove("bi-chevron-down");
                            icon.classList.add("bi-chevron-right");
                        }
                    }
                });
            });
        }

        if (expandAllBtn) {
            expandAllBtn.addEventListener("click", function() {
                // S'assurer que le conteneur racine est bien déplié
                const rootContent = document.getElementById("tree-root-content");
                if (rootContent) {
                    if (window.bootstrap && bootstrap.Collapse) {
                        bootstrap.Collapse.getOrCreateInstance(rootContent, { toggle: false }).show();
                    } else {
                        rootContent.classList.add("show");
                    }
                }
                // Déplier tous les nœuds enfants (localisations et assets)
                treeCard.querySelectorAll(".tree-collapse-node").forEach(function(el) {
                    if (window.bootstrap && bootstrap.Collapse) {
                        const bsCollapse = bootstrap.Collapse.getOrCreateInstance(el, { toggle: false });
                        bsCollapse.show();
                    } else {
                        el.classList.add("show");
                    }
                });
                // Mettre à jour l'état visuel de tous les boutons chevrons
                treeCard.querySelectorAll(".tree-toggle-btn").forEach(function(btn) {
                    btn.classList.remove("collapsed");
                    btn.setAttribute("aria-expanded", "true");
                    const icon = btn.querySelector("i");
                    if (icon) {
                        icon.classList.remove("bi-chevron-right");
                        icon.classList.add("bi-chevron-down");
                    }
                });
            });
        }
    }
});
</script>
{% endblock script %}