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

{% block content %}
<!-- MapLibre & CSS/JS requirements -->
<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>
<script src="{% static 'common/layer-switcher-control.js' %}"></script>
<script src="{% static 'common/address_search_control.js' %}"></script>

<div class="container-fluid py-4" style="background-color: #f8fafc; min-height: 100vh;">
    <!-- Header/Breadcrumbs -->
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-2" style="background-color: transparent; padding: 0;">
                    <li class="breadcrumb-item"><a href="{% url 'assets:trafficlights_index' %}">{% translate "Thématiques" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'assets:trafficlights_intersections_detail' intersection.id %}">{{ intersection.code }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% translate "Importation Plan de croix" %}</li>
                </ol>
            </nav>
            <div class="d-flex align-items-center justify-content-between">
                <h2 class="h3 font-weight-bold text-dark mb-0">
                    <i class="bi bi-file-earmark-excel text-success me-2"></i>
                    {% translate "Importation d'un plan de croix (Excel)" %}
                </h2>
                <a href="{% url 'assets:trafficlights_intersections_detail' intersection.id %}" class="btn btn-outline-secondary btn-sm">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour au carrefour" %}
                </a>
            </div>
        </div>
    </div>

    <!-- Step 1: Select/Upload Plan -->
    {% if step == 'select' %}
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                <div class="card-header text-white py-3" style="background: linear-gradient(135deg, #10b981, #059669);">
                    <h5 class="card-title mb-0 font-weight-semibold">
                        <i class="bi bi-file-earmark-arrow-up me-2"></i> {% translate "Sélectionner / Téléverser le plan de croix (.xlsx)" %}
                    </h5>
                </div>
                <div class="card-body p-4" style="background-color: #ffffff;">
                    {% if error %}
                    <div class="alert alert-danger rounded-3 d-flex align-items-center mb-4" role="alert">
                        <i class="bi bi-exclamation-triangle-fill fs-5 me-2"></i>
                        <div>{{ error }}</div>
                    </div>
                    {% endif %}

                    <form method="post" enctype="multipart/form-data" id="select-import-form">
                        {% csrf_token %}
                        
                        <!-- Select Existing Cross Plans -->
                        {% if cross_plan_choices %}
                        <div class="mb-4">
                            <label class="form-label font-weight-semibold text-secondary d-flex justify-content-between align-items-center">
                                <span>{% translate "Utiliser des plans de croix déjà rattachés" %}</span>
                                <div class="form-check form-check-inline m-0">
                                    <input class="form-check-input" type="checkbox" id="select_all_existing_plans">
                                    <label class="form-check-label small text-muted font-weight-medium" for="select_all_existing_plans">
                                        {% translate "Tout sélectionner" %}
                                    </label>
                                </div>
                            </label>
                            <div class="border rounded-3 p-3 bg-light overflow-auto" style="max-height: 250px;">
                                {% for cp in cross_plan_choices %}
                                <div class="form-check py-1 border-bottom last-border-0">
                                    <input class="form-check-input existing-plan-checkbox" type="checkbox" name="existing_cross_plans" value="{{ cp.id }}" id="cp_{{ cp.id }}">
                                    <label class="form-check-label text-dark small font-weight-medium d-block cursor-pointer" for="cp_{{ cp.id }}">
                                        <i class="bi bi-file-earmark-excel-fill text-success me-1"></i>
                                        {{ cp.title }} <span class="text-muted font-weight-normal">({{ cp.filename }})</span>
                                    </label>
                                </div>
                                {% endfor %}
                            </div>
                            <div class="form-text mt-2 text-muted">
                                {% translate "Sélectionnez un ou plusieurs plans de croix déjà associés à ce carrefour, ou téléversez-en de nouveaux ci-dessous." %}
                            </div>
                        </div>

                        <div class="text-center my-3 text-muted font-weight-medium">
                            — {% translate "OU" %} —
                        </div>
                        {% endif %}

                        <!-- Upload Excel File -->
                        <div class="mb-4">
                            <label for="cross_plan_file_upload" class="form-label font-weight-semibold text-secondary">
                                {% translate "Fichier Excel du plan de croix" %}
                            </label>
                            <input type="file" name="cross_plan_file_upload" id="cross_plan_file_upload" class="form-control form-control-lg rounded-3" accept=".xlsx" multiple required>
                            <div class="form-text mt-2 text-muted">
                                {% translate "Téléversez un ou plusieurs classeurs Excel de plans de croix (contenant l'onglet 'kruisjesplan' ou 'Plan croix')." %}
                            </div>
                        </div>

                        <div class="d-grid mt-4">
                            <button type="submit" class="btn btn-success btn-lg rounded-3 shadow-sm font-weight-semibold">
                                <i class="bi bi-search me-1"></i> {% translate "Analyser et comparer les assets" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const fileInput = document.getElementById('cross_plan_file_upload');
        const checkboxes = document.querySelectorAll('.existing-plan-checkbox');
        const selectAllCheckbox = document.getElementById('select_all_existing_plans');
        const form = document.getElementById('select-import-form');
        
        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                checkboxes.forEach(cb => {
                    cb.checked = selectAllCheckbox.checked;
                });
            });
        }
        
        if (fileInput && form) {
            fileInput.removeAttribute('required');
            form.addEventListener('submit', function(e) {
                const anyChecked = Array.from(checkboxes).some(cb => cb.checked);
                if (!fileInput.value && !anyChecked) {
                    e.preventDefault();
                    alert("{% translate 'Veuillez téléverser un fichier Excel ou sélectionner au moins un plan existant.' %}");
                }
            });
        }
    });
    </script>
    {% endif %}

    <!-- Step 2: Compare & Edit Actions -->
    {% if step == 'preview' %}
    <form method="post" action="{% url 'assets:integrate_cross_plan' intersection.id %}" id="combined-import-form">
        {% csrf_token %}
        <input type="hidden" name="cross_plan_filename" value="{{ cross_plan_filename }}">
        <input type="hidden" name="global_action" id="global_action_input" value="apply">

        <!-- Hidden input fields for poles coordinates -->
        {% for item in poles %}
            {% if item.status != 'db_only' %}
                <input type="hidden" name="lon_pole_{{ item.code }}" id="lon_pole_{{ item.code }}" value="{{ item.new_lon|default_if_none:''|unlocalize }}">
                <input type="hidden" name="lat_pole_{{ item.code }}" id="lat_pole_{{ item.code }}" value="{{ item.new_lat|default_if_none:''|unlocalize }}">
                <input type="hidden" name="x_3812_pole_{{ item.code }}" id="x_3812_pole_{{ item.code }}" value="{{ item.new_x_3812|default_if_none:''|unlocalize }}">
                <input type="hidden" name="y_3812_pole_{{ item.code }}" id="y_3812_pole_{{ item.code }}" value="{{ item.new_y_3812|default_if_none:''|unlocalize }}">
            {% endif %}
        {% endfor %}

        <!-- Hidden input fields for cables geometries -->
        {% for item in cables %}
            {% if item.status != 'db_only' %}
                <input type="hidden" name="geom_cable_{{ item.code }}" id="geom_cable_{{ item.code }}" value="">
            {% endif %}
        {% endfor %}

        <!-- A. STANDARD COMPARATIVE TABLE VIEW (Default Visible) -->
        <div id="table-view" class="d-block">
            <div class="row">
                <!-- Summary Card -->
                <div class="col-12 mb-4">
                    <div class="card border-0 shadow-sm rounded-4 p-3 d-flex flex-row align-items-center justify-content-between" style="background-color: #ffffff;">
                        <div>
                            <h5 class="mb-1 text-dark font-weight-semibold">{% translate "Aperçu de la comparaison des assets" %}</h5>
                            <p class="text-muted mb-0 small">
                                {% if uploaded_filenames %}
                                    {% translate "Fichiers :" %} <strong>{{ uploaded_filenames|join:", " }}</strong>
                                {% else %}
                                    {% translate "Fichier :" %} <code>{{ cross_plan_filename }}</code>
                                {% endif %}
                                | {% translate "Carrefour :" %} <strong>{{ intersection.code }}</strong>
                            </p>
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <div class="btn-group btn-group-sm rounded-3 shadow-sm me-1" role="group">
                                <button type="button" class="btn btn-outline-secondary" id="btn-check-all-global" title="{% translate 'Cocher tous les éléments dans tous les onglets' %}">
                                    <i class="bi bi-check-all me-1"></i> {% translate "Tout cocher" %}
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="btn-uncheck-all-global" title="{% translate 'Décocher tous les éléments dans tous les onglets' %}">
                                    <i class="bi bi-dash-square me-1"></i> {% translate "Tout décocher" %}
                                </button>
                            </div>
                            <div class="btn-group btn-group-sm rounded-3 shadow-sm me-1" role="group">
                                <button type="button" class="btn btn-outline-success" id="btn-batch-update" title="{% translate 'Définir toutes les décisions sur Mettre à jour' %}">
                                    <i class="bi bi-pencil-square me-1"></i> {% translate "Tout Mettre à jour" %}
                                </button>
                                <button type="button" class="btn btn-outline-warning text-dark" id="btn-batch-replace" title="{% translate 'Définir toutes les décisions sur Remplacer' %}">
                                    <i class="bi bi-arrow-repeat me-1"></i> {% translate "Tout Remplacer" %}
                                </button>
                            </div>
                            <button type="button" class="btn btn-success btn-sm rounded-3 shadow-sm px-3" onclick="triggerGlobalAction('update_all')">
                                <i class="bi bi-arrow-repeat me-1"></i> {% translate "Tout mettre à jour (Conserver existant + MAJ)" %}
                            </button>
                            <button type="button" class="btn btn-outline-danger btn-sm rounded-3 shadow-sm px-3" onclick="triggerGlobalAction('replace_all')">
                                <i class="bi bi-trash3-fill me-1"></i> {% translate "Tout remplacer (Archiver l'existant + Recréer)" %}
                            </button>
                            <button type="submit" class="btn btn-primary btn-sm rounded-3 shadow-sm px-4">
                                <i class="bi bi-check2-circle me-1"></i> {% translate "Appliquer les décisions" %}
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Main Interactive Table Grid -->
                <div class="col-12">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                        <!-- Tab Headers -->
                        <div class="card-header bg-light border-bottom p-0">
                            <ul class="nav nav-tabs border-0" id="comparisonTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active px-4 py-3 border-0 rounded-0" id="poles-tab" data-bs-toggle="tab" data-bs-target="#poles-pane" type="button" role="tab" aria-controls="poles-pane" aria-selected="true">
                                        <i class="bi bi-cone-striped me-2"></i> {% translate "Poteaux" %} <span class="badge bg-secondary ms-1">{{ poles|length }}</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 border-0 rounded-0" id="lanterns-tab" data-bs-toggle="tab" data-bs-target="#lanterns-pane" type="button" role="tab" aria-controls="lanterns-pane" aria-selected="false">
                                        <i class="bi bi-traffic-light me-2"></i> {% translate "Lanternes" %} <span class="badge bg-secondary ms-1">{{ lanterns|length }}</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 border-0 rounded-0" id="detectors-tab" data-bs-toggle="tab" data-bs-target="#detectors-pane" type="button" role="tab" aria-controls="detectors-pane" aria-selected="false">
                                        <i class="bi bi-broadcast-pin me-2"></i> {% translate "Détecteurs & BP" %} <span class="badge bg-secondary ms-1">{{ detectors|length }}</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 border-0 rounded-0" id="cables-tab" data-bs-toggle="tab" data-bs-target="#cables-pane" type="button" role="tab" aria-controls="cables-pane" aria-selected="false">
                                        <i class="bi bi-bezier2 me-2"></i> {% translate "Câbles" %} <span class="badge bg-secondary ms-1">{{ cables|length }}</span>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link px-4 py-3 border-0 rounded-0" id="other-assets-tab" data-bs-toggle="tab" data-bs-target="#other-assets-pane" type="button" role="tab" aria-controls="other-assets-pane" aria-selected="false">
                                        <i class="bi bi-diagram-3 me-2"></i> {% translate "Autres équipements" %} <span class="badge bg-secondary ms-1">{{ other_assets|length }}</span>
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- Tab Contents -->
                        <div class="card-body p-0">
                            <div class="tab-content" id="comparisonTabsContent">
                                
                                <!-- 1. POLES PANEL -->
                                <div class="tab-pane fade show active" id="poles-pane" role="tabpanel" aria-labelledby="poles-tab">
                                    <div class="p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
                                        <span class="text-secondary small">
                                            <i class="bi bi-info-circle"></i> {% translate "Vous pouvez géolocaliser les poteaux en les plaçant sur le plan de la carte." %}
                                        </span>
                                        <button type="button" class="btn btn-outline-primary btn-sm rounded-3 show-map-btn" data-target-tab="poles">
                                            <i class="bi bi-map-fill me-1"></i> {% translate "Positionner les poteaux sur la carte" %}
                                        </button>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th class="ps-4" style="width: 40px;"><input type="checkbox" id="select-all-poles" class="form-check-input" checked></th>
                                                    <th>{% translate "Code Asset" %}</th>
                                                    <th>{% translate "Nom" %}</th>
                                                    <th>{% translate "Statut" %}</th>
                                                    <th>{% translate "Position / Géométrie" %}</th>
                                                    <th>{% translate "Modèle Déduit (Excel)" %}</th>
                                                    <th>{% translate "Modèle Actuel (DB)" %}</th>
                                                    <th>{% translate "Décision" %}</th>
                                                    <th class="pe-4">{% translate "Forcer le Modèle" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in poles %}
                                                <tr class="{% if item.status == 'new' %}table-success-light{% elif item.status == 'modified' %}table-warning-light{% elif item.status == 'db_only' %}table-danger-light{% endif %}">
                                                    <td class="ps-4"><input type="checkbox" name="{% if item.status == 'db_only' %}selected_pole_db_{{ item.code }}{% else %}selected_pole_{{ item.code }}{% endif %}" class="form-check-input pole-checkbox" checked></td>
                                                    <td class="font-weight-medium"><code>{{ item.code }}</code><input type="hidden" name="db_id_pole_{{ item.code }}" value="{{ item.db_id|default:'' }}"></td>
                                                    <td>
                                                        <input type="text" name="name_pole_{{ item.code }}" class="form-control form-control-sm" value="{{ item.name }}">
                                                    </td>
                                                    <td>
                                                        {% if item.status == 'new' %}
                                                             <span class="badge bg-success">{% translate "Nouveau" %}</span>
                                                        {% elif item.status == 'modified' %}
                                                            <span class="badge bg-warning text-dark">{% translate "Modifié" %}</span>
                                                        {% elif item.status == 'identical' %}
                                                            <span class="badge bg-light text-secondary border">{% translate "Identique" %}</span>
                                                        {% elif item.status == 'db_only' %}
                                                            <span class="badge bg-danger">{% translate "DB uniquement" %}</span>
                                                        {% endif %}
                                                        {% for diff in item.details_diff %}
                                                            <div class="small text-muted mt-1" style="font-size: 0.75rem; line-height: 1.25;">
                                                                <i class="bi bi-info-circle me-1"></i>{{ diff }}
                                                            </div>
                                                        {% endfor %}
                                                    </td>
                                                    <td id="geom_cell_pole_{{ item.code }}">
                                                        {% if item.geom_modified %}
                                                            <span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1">
                                                                <i class="bi bi-arrows-move"></i>
                                                                {% if item.distance_diff is not None %}
                                                                    {% translate "Décalage" %} {{ item.distance_diff }} m
                                                                {% else %}
                                                                    {% translate "Position modifiée" %}
                                                                {% endif %}
                                                            </span>
                                                            <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-pole-on-map-btn" data-code="{{ item.code }}" title="{% translate 'Voir et ajuster sur la carte' %}">
                                                                <i class="bi bi-geo-alt"></i>
                                                            </button>
                                                        {% elif item.new_lon is not None %}
                                                            {% if item.status == 'new' %}
                                                                <span class="badge bg-success d-inline-flex align-items-center gap-1">
                                                                    <i class="bi bi-geo-alt-fill"></i> {% if item.new_x_3812 %}DXF{% else %}{% translate "Plan" %}{% endif %}
                                                                </span>
                                                            {% elif item.status == 'db_only' %}
                                                                <span class="badge bg-secondary d-inline-flex align-items-center gap-1">
                                                                    <i class="bi bi-database"></i> DB
                                                                </span>
                                                            {% else %}
                                                                <span class="badge bg-light text-muted border d-inline-flex align-items-center gap-1">
                                                                    <i class="bi bi-check2"></i> {% translate "Inchangée" %}
                                                                </span>
                                                            {% endif %}
                                                            <button type="button" class="btn btn-xs btn-outline-secondary ms-1 show-pole-on-map-btn" data-code="{{ item.code }}" title="{% translate 'Voir sur la carte' %}">
                                                                <i class="bi bi-geo-alt"></i>
                                                            </button>
                                                        {% else %}
                                                            <span class="badge bg-danger d-inline-flex align-items-center gap-1">
                                                                <i class="bi bi-geo-alt"></i> {% translate "Non positionné" %}
                                                            </span>
                                                            <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-pole-on-map-btn" data-code="{{ item.code }}" title="{% translate 'Positionner sur la carte' %}">
                                                                <i class="bi bi-crosshair"></i>
                                                            </button>
                                                        {% endif %}
                                                    </td>
                                                    <td><span class="text-secondary small">{{ item.deduced_model_name|default:"—" }}</span></td>
                                                    <td><span class="text-secondary small">{{ item.db_model_name|default:"—" }}</span></td>
                                                    <td>
                                                        {% if item.status == 'db_only' %}
                                                            <select name="action_pole_db_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                <option value="keep">{% translate "Conserver en DB" %}</option>
                                                                <option value="archive" selected>{% translate "Archiver" %}</option>
                                                                <option value="delete">{% translate "Supprimer de la DB" %}</option>
                                                            </select>
                                                        {% else %}
                                                            <select name="action_pole_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                {% if item.status == 'new' %}
                                                                    <option value="add" selected>{% translate "Créer l'asset" %}</option>
                                                                    <option value="keep">{% translate "Ne pas créer (Ignorer)" %}</option>
                                                                {% elif item.status == 'modified' %}
                                                                    <option value="modify" selected>{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="keep">{% translate "Conserver existant" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant (Ne pas recréer)" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% elif item.status == 'identical' %}
                                                                    <option value="keep" selected>{% translate "Ne rien faire (Identique)" %}</option>
                                                                    <option value="modify">{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% endif %}
                                                            </select>
                                                        {% endif %}
                                                    </td>
                                                    <td class="pe-4">
                                                        {% if item.status != 'db_only' %}
                                                        <select name="model_pole_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                            <option value="">
                                                                {% if item.status == 'new' or item.status == 'modified' %}
                                                                    -- {% translate "Modèle déduit" %} --
                                                                {% else %}
                                                                    -- {% translate "Modèle actuel" %} --
                                                                {% endif %}
                                                            </option>
                                                            {% for m in pole_models %}
                                                            <option value="{{ m.id }}">{{ m.name_fr }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        {% else %}
                                                        <span class="text-muted small">—</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="9" class="text-center py-4 text-muted">{% translate "Aucun poteau détecté." %}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 2. LANTERNS PANEL -->
                                <div class="tab-pane fade" id="lanterns-pane" role="tabpanel" aria-labelledby="lanterns-tab">
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th class="ps-4" style="width: 40px;"><input type="checkbox" id="select-all-lanterns" class="form-check-input" checked></th>
                                                    <th>{% translate "Code Asset" %}</th>
                                                    <th>{% translate "Nom" %}</th>
                                                    <th>{% translate "Poteau" %}</th>
                                                    <th>{% translate "Statut" %}</th>
                                                    <th>{% translate "Modèle Déduit (Excel)" %}</th>
                                                    <th>{% translate "Modèle Actuel (DB)" %}</th>
                                                    <th>{% translate "Décision" %}</th>
                                                    <th class="pe-4">{% translate "Forcer le Modèle" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in lanterns %}
                                                <tr class="{% if item.status == 'new' %}table-success-light{% elif item.status == 'modified' %}table-warning-light{% elif item.status == 'db_only' %}table-danger-light{% endif %}">
                                                    <td class="ps-4"><input type="checkbox" name="{% if item.status == 'db_only' %}selected_lantern_db_{{ item.code }}{% else %}selected_lantern_{{ item.code }}{% endif %}" class="form-check-input lantern-checkbox" checked></td>
                                                    <td class="font-weight-medium"><code>{{ item.code }}</code><input type="hidden" name="db_id_lantern_{{ item.code }}" value="{{ item.db_id|default:'' }}"></td>
                                                    <td>
                                                        <input type="text" name="name_lantern_{{ item.code }}" class="form-control form-control-sm" value="{{ item.name }}">
                                                    </td>
                                                    <td><code>{{ item.pole_code }}</code></td>
                                                    <td>
                                                        {% if item.status == 'new' %}
                                                            <span class="badge bg-success">{% translate "Nouveau" %}</span>
                                                        {% elif item.status == 'modified' %}
                                                            <span class="badge bg-warning text-dark">{% translate "Modifié" %}</span>
                                                        {% elif item.status == 'identical' %}
                                                            <span class="badge bg-light text-secondary border">{% translate "Identique" %}</span>
                                                        {% elif item.status == 'db_only' %}
                                                            <span class="badge bg-danger">{% translate "DB uniquement" %}</span>
                                                        {% endif %}
                                                        {% for diff in item.details_diff %}
                                                            <div class="small text-muted mt-1" style="font-size: 0.75rem; line-height: 1.25;">
                                                                <i class="bi bi-info-circle me-1"></i>{{ diff }}
                                                            </div>
                                                        {% endfor %}
                                                    </td>
                                                    <td><span class="text-secondary small">{{ item.deduced_model_name|default:"—" }}</span></td>
                                                    <td><span class="text-secondary small">{{ item.db_model_name|default:"—" }}</span></td>
                                                    <td>
                                                        {% if item.status == 'db_only' %}
                                                            <select name="action_lantern_db_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                <option value="keep">{% translate "Conserver en DB" %}</option>
                                                                <option value="archive" selected>{% translate "Archiver" %}</option>
                                                                <option value="delete">{% translate "Supprimer de la DB" %}</option>
                                                            </select>
                                                        {% else %}
                                                            <select name="action_lantern_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                {% if item.status == 'new' %}
                                                                    <option value="add" selected>{% translate "Créer l'asset" %}</option>
                                                                    <option value="keep">{% translate "Ne pas créer (Ignorer)" %}</option>
                                                                {% elif item.status == 'modified' %}
                                                                    <option value="modify" selected>{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="keep">{% translate "Conserver existant" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant (Ne pas recréer)" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% elif item.status == 'identical' %}
                                                                    <option value="keep" selected>{% translate "Ne rien faire (Identique)" %}</option>
                                                                    <option value="modify">{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% endif %}
                                                            </select>
                                                        {% endif %}
                                                    </td>
                                                    <td class="pe-4">
                                                        {% if item.status != 'db_only' %}
                                                        <select name="model_lantern_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                            <option value="">
                                                                {% if item.status == 'new' or item.status == 'modified' %}
                                                                    -- {% translate "Modèle déduit" %} --
                                                                {% else %}
                                                                    -- {% translate "Modèle actuel" %} --
                                                                {% endif %}
                                                            </option>
                                                            {% for m in lantern_models %}
                                                            <option value="{{ m.id }}">{{ m.name_fr }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        {% else %}
                                                        <span class="text-muted small">—</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="8" class="text-center py-4 text-muted">{% translate "Aucune lanterne détectée." %}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 3. DETECTORS PANEL -->
                                <div class="tab-pane fade" id="detectors-pane" role="tabpanel" aria-labelledby="detectors-tab">
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th class="ps-4" style="width: 40px;"><input type="checkbox" id="select-all-detectors" class="form-check-input" checked></th>
                                                    <th>{% translate "Code Asset" %}</th>
                                                    <th>{% translate "Nom" %}</th>
                                                    <th>{% translate "Poteau" %}</th>
                                                    <th>{% translate "Statut" %}</th>
                                                    <th>{% translate "Modèle Déduit (Excel)" %}</th>
                                                    <th>{% translate "Modèle Actuel (DB)" %}</th>
                                                    <th>{% translate "Décision" %}</th>
                                                    <th class="pe-4">{% translate "Forcer le Modèle" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in detectors %}
                                                <tr class="{% if item.status == 'new' %}table-success-light{% elif item.status == 'modified' %}table-warning-light{% elif item.status == 'db_only' %}{% if item.action_default == 'keep' %}table-light{% else %}table-danger-light{% endif %}{% endif %}">
                                                    <td class="ps-4"><input type="checkbox" name="{% if item.status == 'db_only' %}selected_detector_db_{{ item.code }}{% else %}selected_detector_{{ item.code }}{% endif %}" class="form-check-input detector-checkbox" checked></td>
                                                    <td class="font-weight-medium"><code>{{ item.code }}</code><input type="hidden" name="db_id_detector_{{ item.code }}" value="{{ item.db_id|default:'' }}"></td>
                                                    <td>
                                                         <input type="text" name="name_detector_{{ item.code }}" class="form-control form-control-sm" value="{{ item.name }}">
                                                    </td>
                                                    <td><code>{{ item.pole_code|default:"—" }}</code></td>
                                                    <td>
                                                        {% if item.status == 'new' %}
                                                            <span class="badge bg-success">{% translate "Nouveau" %}</span>
                                                        {% elif item.status == 'modified' %}
                                                            <span class="badge bg-warning text-dark">{% translate "Modifié" %}</span>
                                                        {% elif item.status == 'identical' %}
                                                            <span class="badge bg-light text-secondary border">{% translate "Identique" %}</span>
                                                        {% elif item.status == 'db_only' %}
                                                            {% if item.action_default == 'keep' %}
                                                                <span class="badge bg-secondary">{% translate "DB uniquement" %}</span>
                                                            {% else %}
                                                                <span class="badge bg-danger">{% translate "DB uniquement" %}</span>
                                                            {% endif %}
                                                        {% endif %}
                                                        {% for diff in item.details_diff %}
                                                            <div class="small text-muted mt-1" style="font-size: 0.75rem; line-height: 1.25;">
                                                                <i class="bi bi-info-circle me-1"></i>{{ diff }}
                                                            </div>
                                                        {% endfor %}
                                                    </td>
                                                    <td><span class="text-secondary small">{{ item.deduced_model_name|default:"—" }}</span></td>
                                                    <td><span class="text-secondary small">{{ item.db_model_name|default:"—" }}</span></td>
                                                    <td>
                                                        {% if item.status == 'db_only' %}
                                                            <select name="action_detector_db_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                <option value="keep" {% if item.action_default == 'keep' %}selected{% endif %}>{% translate "Conserver en DB" %}</option>
                                                                <option value="archive" {% if item.action_default != 'keep' %}selected{% endif %}>{% translate "Archiver" %}</option>
                                                                <option value="delete">{% translate "Supprimer de la DB" %}</option>
                                                            </select>
                                                        {% else %}
                                                            <select name="action_detector_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                {% if item.status == 'new' %}
                                                                    <option value="add" selected>{% translate "Créer l'asset" %}</option>
                                                                    <option value="keep">{% translate "Ne pas créer (Ignorer)" %}</option>
                                                                {% elif item.status == 'modified' %}
                                                                    <option value="modify" selected>{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="keep">{% translate "Conserver existant" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant (Ne pas recréer)" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% elif item.status == 'identical' %}
                                                                    <option value="keep" selected>{% translate "Ne rien faire (Identique)" %}</option>
                                                                    <option value="modify">{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% endif %}
                                                            </select>
                                                        {% endif %}
                                                    </td>
                                                    <td class="pe-4">
                                                        {% if item.status != 'db_only' %}
                                                        <select name="model_detector_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                            <option value="">
                                                                {% if item.status == 'new' or item.status == 'modified' %}
                                                                    -- {% translate "Modèle déduit" %} --
                                                                {% else %}
                                                                    -- {% translate "Modèle actuel" %} --
                                                                {% endif %}
                                                            </option>
                                                            {% for m in detector_models %}
                                                            <option value="{{ m.id }}">{{ m.name_fr }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        {% else %}
                                                        <span class="text-muted small">—</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="8" class="text-center py-4 text-muted">{% translate "Aucun détecteur détecté." %}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <!-- 4. CABLES PANEL -->
                                <div class="tab-pane fade" id="cables-pane" role="tabpanel" aria-labelledby="cables-tab">
                                    <div class="p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
                                        <span class="text-secondary small">
                                             <i class="bi bi-info-circle"></i> {% translate "Vous pouvez tracer précisément les câbles d'interconnexion le long des tranchées de la carte." %}
                                        </span>
                                        <button type="button" class="btn btn-outline-success btn-sm rounded-3 show-map-btn" data-target-tab="cables">
                                            <i class="bi bi-bezier2 me-1"></i> {% translate "Tracer les câbles sur la carte" %}
                                        </button>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th class="ps-4" style="width: 40px;"><input type="checkbox" id="select-all-cables" class="form-check-input" checked></th>
                                                    <th>{% translate "Code Asset" %}</th>
                                                    <th>{% translate "Nom" %}</th>
                                                    <th>{% translate "Statut" %}</th>
                                                    <th>{% translate "Géométrie" %}</th>
                                                    <th>{% translate "Modèle Déduit (Excel)" %}</th>
                                                    <th>{% translate "Modèle Actuel (DB)" %}</th>
                                                    <th>{% translate "Décision" %}</th>
                                                    <th class="pe-4">{% translate "Forcer le Modèle" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in cables %}
                                                <tr class="{% if item.status == 'new' %}table-success-light{% elif item.status == 'modified' %}table-warning-light{% elif item.status == 'db_only' %}table-danger-light{% endif %}">
                                                    <td class="ps-4"><input type="checkbox" name="{% if item.status == 'db_only' %}selected_cable_db_{{ item.code }}{% else %}selected_cable_{{ item.code }}{% endif %}" class="form-check-input cable-checkbox" checked></td>
                                                    <td class="font-weight-medium"><code>{{ item.code }}</code><input type="hidden" name="db_id_cable_{{ item.code }}" value="{{ item.db_id|default:'' }}"></td>
                                                    <td>
                                                        <input type="text" name="name_cable_{{ item.code }}" class="form-control form-control-sm" value="{{ item.name }}">
                                                    </td>
                                                    <td>
                                                        {% if item.status == 'new' %}
                                                            <span class="badge bg-success">{% translate "Nouveau" %}</span>
                                                        {% elif item.status == 'modified' %}
                                                            <span class="badge bg-warning text-dark">{% translate "Modifié" %}</span>
                                                        {% elif item.status == 'identical' %}
                                                            <span class="badge bg-light text-secondary border">{% translate "Identique" %}</span>
                                                        {% elif item.status == 'db_only' %}
                                                            <span class="badge bg-danger">{% translate "DB uniquement" %}</span>
                                                        {% endif %}
                                                        {% for diff in item.details_diff %}
                                                            <div class="small text-muted mt-1" style="font-size: 0.75rem; line-height: 1.25;">
                                                                <i class="bi bi-info-circle me-1"></i>{{ diff }}
                                                            </div>
                                                        {% endfor %}
                                                    </td>
                                                    <td id="geom_cell_cable_{{ item.code }}">
                                                        {% if item.geom_modified %}
                                                            <span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1">
                                                                <i class="bi bi-arrows-move"></i> {% translate "Tracé modifié" %}
                                                            </span>
                                                        {% elif item.has_db_geom %}
                                                            <span class="badge bg-info text-dark d-inline-flex align-items-center gap-1">
                                                                <i class="bi bi-bezier2"></i> {{ item.db_geom_length }} m
                                                            </span>
                                                        {% else %}
                                                            <span class="badge bg-light text-muted border">{% translate "Non tracé" %}</span>
                                                        {% endif %}
                                                        {% if item.status != 'db_only' %}
                                                            <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-cable-on-map-btn" data-code="{{ item.code }}" title="{% translate 'Voir et éditer sur la carte' %}">
                                                                <i class="bi bi-geo-alt"></i>
                                                            </button>
                                                        {% endif %}
                                                    </td>
                                                    <td><span class="text-secondary small">{{ item.deduced_model_name|default:"—" }}</span></td>
                                                    <td><span class="text-secondary small">{{ item.db_model_name|default:"—" }}</span></td>
                                                    <td>
                                                        {% if item.status == 'db_only' %}
                                                            <select name="action_cable_db_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                <option value="keep">{% translate "Conserver en DB" %}</option>
                                                                <option value="archive" selected>{% translate "Archiver" %}</option>
                                                                <option value="delete">{% translate "Supprimer de la DB" %}</option>
                                                            </select>
                                                        {% else %}
                                                            <select name="action_cable_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                                {% if item.status == 'new' %}
                                                                    <option value="add" selected>{% translate "Créer l'asset" %}</option>
                                                                    <option value="keep">{% translate "Ne pas créer (Ignorer)" %}</option>
                                                                {% elif item.status == 'modified' %}
                                                                    <option value="modify" selected>{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="keep">{% translate "Conserver existant" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant (Ne pas recréer)" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% elif item.status == 'identical' %}
                                                                    <option value="keep" selected>{% translate "Ne rien faire (Identique)" %}</option>
                                                                    <option value="modify">{% translate "Mettre à jour l'asset" %}</option>
                                                                    <option value="replace">{% translate "Remplacer (Archiver + Créer)" %}</option>
                                                                    <option value="archive">{% translate "Archiver l'existant" %}</option>
                                                                    <option value="delete">{% translate "Supprimer l'existant de la DB" %}</option>
                                                                {% endif %}
                                                            </select>
                                                        {% endif %}
                                                    </td>
                                                    <td class="pe-4">
                                                        {% if item.status != 'db_only' %}
                                                        <select name="model_cable_{{ item.code }}" class="form-select form-select-sm rounded-2">
                                                            <option value="">
                                                                {% if item.status == 'new' or item.status == 'modified' %}
                                                                    -- {% translate "Modèle déduit" %} --
                                                                {% else %}
                                                                    -- {% translate "Modèle actuel" %} --
                                                                {% endif %}
                                                            </option>
                                                            {% for m in cable_models %}
                                                            <option value="{{ m.id }}">{{ m.name_fr }}</option>
                                                            {% endfor %}
                                                        </select>
                                                        {% else %}
                                                        <span class="text-muted small">—</span>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="9" class="text-center py-4 text-muted">{% translate "Aucun câble détecté." %}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
 
                                <!-- 5. OTHER ASSOCIATED ASSETS PANEL -->
                                <div class="tab-pane fade" id="other-assets-pane" role="tabpanel" aria-labelledby="other-assets-tab">
                                    <div class="p-3 bg-light border-bottom d-flex align-items-center justify-content-between">
                                        <span class="text-secondary small">
                                            <i class="bi bi-info-circle"></i> {% translate "Équipements associés existants en base (panneaux, caméras ITS, contrôleurs, armoires, etc.) non décrits dans le plan de croix Excel. Par défaut, ils sont conservés." %}
                                        </span>
                                    </div>
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th class="ps-4" style="width: 40px;"><input type="checkbox" id="select-all-other" class="form-check-input" checked></th>
                                                    <th>{% translate "Catégorie" %}</th>
                                                    <th>{% translate "Code Asset" %}</th>
                                                    <th>{% translate "Nom / Modèle" %}</th>
                                                    <th>{% translate "Support / Liaison" %}</th>
                                                    <th>{% translate "Statut DB" %}</th>
                                                    <th class="pe-4">{% translate "Décision" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for item in other_assets %}
                                                <tr>
                                                    <td class="ps-4">
                                                        <input type="checkbox" name="selected_other_{{ item.unique_key }}" class="form-check-input other-checkbox" checked>
                                                    </td>
                                                    <td>
                                                        <span class="badge {{ item.badge_class }}">{{ item.category_label }}</span>
                                                    </td>
                                                    <td class="font-weight-medium">
                                                        <code>{{ item.code }}</code>
                                                        <input type="hidden" name="id_other_{{ item.unique_key }}" value="{{ item.id }}">
                                                    </td>
                                                    <td>
                                                        <div class="fw-semibold">{{ item.name }}</div>
                                                        {% if item.model_name and item.model_name != "—" %}
                                                            <div class="small text-muted">{{ item.model_name }}</div>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <code>{{ item.support }}</code>
                                                    </td>
                                                    <td>
                                                        <span class="badge bg-light text-secondary border">{% translate "En base (Actif)" %}</span>
                                                        {% for diff in item.details_diff %}
                                                            <div class="small text-muted mt-1" style="font-size: 0.75rem; line-height: 1.25;">
                                                                <i class="bi bi-info-circle me-1"></i>{{ diff }}
                                                            </div>
                                                        {% endfor %}
                                                    </td>
                                                    <td class="pe-4">
                                                        <select name="action_other_{{ item.unique_key }}" class="form-select form-select-sm rounded-2">
                                                            <option value="keep" selected>{% translate "Conserver (Par défaut)" %}</option>
                                                            <option value="archive">{% translate "Archiver" %}</option>
                                                            <option value="delete">{% translate "Supprimer de la DB" %}</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="7" class="text-center py-4 text-muted">{% translate "Aucun autre équipement associé en base pour ce carrefour." %}</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- B. SPLIT SCREEN WORKSPACE VIEW (Default Hidden) -->
        <div id="map-view" class="d-none">
            <div class="row">
                <!-- Left Panel (Sidebar for map elements) -->
                <div class="col-lg-4 col-md-5 mb-3 d-flex flex-column" style="height: calc(100vh - 120px);">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 d-flex flex-column" style="background-color: #ffffff;">
                        
                        <!-- Header & Switch back button + placed count display -->
                        <div class="p-3 border-bottom bg-light d-flex flex-column gap-2">
                            <button type="button" class="btn btn-outline-secondary btn-sm w-100 hide-map-btn rounded-3">
                                <i class="bi bi-arrow-left me-1"></i> {% translate "Retour au tableau comparatif" %}
                            </button>
                            <div class="d-flex align-items-center justify-content-between text-muted small px-1">
                                <span>{% translate "Poteaux positionnés :" %}</span>
                                <strong id="placed-poles-count" class="text-primary font-monospace">0 / 0</strong>
                            </div>
                        </div>

                        <!-- Tabs Header -->
                        <div class="card-header bg-white py-2 border-bottom">
                            <ul class="nav nav-tabs card-header-tabs" id="mapTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active font-weight-bold px-2 py-1.5" id="map-poles-tab" data-bs-toggle="tab" data-bs-target="#map-poles-pane" type="button" role="tab" aria-controls="map-poles-pane" aria-selected="true" style="font-size: 0.82rem;">
                                        {% translate "Poteaux" %}
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link font-weight-bold px-2 py-1.5" id="map-cables-tab" data-bs-toggle="tab" data-bs-target="#map-cables-pane" type="button" role="tab" aria-controls="map-cables-pane" aria-selected="false" style="font-size: 0.82rem;">
                                        {% translate "Câbles" %}
                                    </button>
                                </li>
                            </ul>
                        </div>

                        <!-- Scrollable Content without double scrollbars -->
                        <div class="card-body p-3 flex-grow-1 overflow-hidden d-flex flex-column" style="font-size: 0.82rem;">
                            <div class="tab-content flex-grow-1 overflow-hidden" id="mapTabsContent">
                                
                                <!-- Map Poles Sub-pane -->
                                <div class="tab-pane fade show active h-100" id="map-poles-pane" role="tabpanel" aria-labelledby="map-poles-tab">
                                    <div class="d-flex flex-column h-100 align-items-start justify-content-start">
                                        <div class="mb-2 p-2 bg-light rounded-3 border w-100">
                                            <div class="font-weight-semibold text-primary mb-1">
                                                <i class="bi bi-info-circle-fill"></i> {% translate "Aide au placement" %}
                                            </div>
                                            <p class="text-secondary mb-0 small">
                                                {% translate "Cliquez sur 'Placer sur la carte' pour un poteau, puis cliquez sur la carte pour le positionner." %}
                                            </p>
                                        </div>

                                        <div class="list-group list-group-flush overflow-auto flex-grow-1 w-100 align-self-stretch">
                                            {% for item in poles %}
                                            {% if item.status != 'db_only' %}
                                            <div class="list-group-item py-2 px-1 border-bottom d-flex flex-column gap-1 pole-config-item align-self-stretch" data-code="{{ item.code }}">
                                                <div class="d-flex align-items-center justify-content-between w-100">
                                                    <strong class="font-monospace text-dark">{{ item.short_code }}</strong>
                                                    <span class="badge bg-danger text-white georef-status-badge" id="georef_badge_{{ item.code }}" style="font-size: 0.7rem;">{% translate "À placer" %}</span>
                                                </div>
                                                <div class="text-muted small font-monospace">{{ item.deduced_model_name|default:item.db_model_name }}</div>
                                                <div class="small text-muted">
                                                    <span id="meta_lanterns_{{ item.code }}">0 Lanternes</span> |
                                                    <span id="meta_detectors_{{ item.code }}">0 Détecteurs</span>
                                                </div>
                                                <div class="mt-1 align-self-start">
                                                    <button type="button" class="btn btn-xs btn-outline-primary py-0.5 px-2 start-placement-btn rounded-2" data-code="{{ item.code }}">
                                                        <i class="bi bi-geo-alt-fill"></i> {% translate "Placer sur la carte" %}
                                                    </button>
                                                </div>
                                            </div>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>

                                <!-- Map Cables Sub-pane -->
                                <div class="tab-pane fade h-100" id="map-cables-pane" role="tabpanel" aria-labelledby="map-cables-tab">
                                    <div class="d-flex flex-column h-100 align-items-start justify-content-start">
                                        <div class="mb-2 p-2.5 bg-light rounded-3 border w-100 shadow-sm" style="font-size: 0.78rem;">
                                            <div class="d-flex align-items-center justify-content-between mb-1.5 pb-1 border-bottom">
                                                <span class="font-weight-semibold text-success d-flex align-items-center gap-1">
                                                    <i class="bi bi-bezier"></i> {% translate "Aide au tracé des câbles" %}
                                                </span>
                                            </div>
                                            <ul class="list-unstyled mb-0 text-secondary d-flex flex-column gap-1" style="line-height: 1.35;">
                                                <li><i class="bi bi-plus-circle text-primary me-1"></i><strong>{% translate "Tracer" %} :</strong> {% translate "Double-clic sur la carte pour ajouter un point." %}</li>
                                                <li><i class="bi bi-node-plus text-success me-1"></i><strong>{% translate "Ajouter un nœud" %} :</strong> {% translate "Double-clic sur un segment du câble." %}</li>
                                                <li><i class="bi bi-node-minus text-danger me-1"></i><strong>{% translate "Supprimer un nœud" %} :</strong> {% translate "Double-clic sur un nœud (poignée orange)." %}</li>
                                                <li><i class="bi bi-arrows-move text-warning me-1"></i><strong>{% translate "Déplacer" %} :</strong> {% translate "Glisser-déposer les poignées pour ajuster." %}</li>
                                                <li><i class="bi bi-files text-info me-1"></i><strong>{% translate "Copier tracé" %} :</strong> {% translate "Copiez le tracé d'un autre câble suivant le même trajet (ex: 48 et tel.)." %}</li>
                                            </ul>
                                        </div>

                                        <div class="list-group list-group-flush overflow-auto flex-grow-1 w-100 align-self-stretch">
                                            {% for item in cables %}
                                            {% if item.status != 'db_only' %}
                                            <div class="list-group-item py-2 px-1 border-bottom d-flex flex-column gap-1 cable-config-item align-self-stretch" data-code="{{ item.code }}">
                                                <div class="d-flex align-items-center justify-content-between w-100">
                                                    <strong class="text-dark font-monospace">{{ item.name }}</strong>
                                                    <span class="badge cable-geom-status-badge font-monospace" id="badge-cable-status-{{ item.code }}" style="font-size: 0.72rem;">
                                                        <span class="text-muted">…</span>
                                                    </span>
                                                </div>
                                                <div class="text-muted small font-monospace">{{ item.deduced_model_name }}</div>
                                                <div class="mt-1 d-flex align-items-center gap-1 flex-wrap">
                                                    <button type="button" class="btn btn-xs btn-outline-success py-0.5 px-2 edit-cable-btn rounded-2" data-code="{{ item.code }}">
                                                        <i class="bi bi-pencil-square"></i> {% translate "Tracer / Éditer" %}
                                                    </button>
                                                    <div class="dropdown d-inline-block">
                                                        <button type="button" class="btn btn-xs btn-outline-secondary dropdown-toggle py-0.5 px-2 rounded-2 copy-cable-btn" data-bs-toggle="dropdown" aria-expanded="false" title="{% translate "Copier le tracé d'un autre câble" %}">
                                                            <i class="bi bi-files"></i> {% translate "Copier tracé…" %}
                                                        </button>
                                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm copy-cable-menu py-1" data-target-code="{{ item.code }}" style="font-size: 0.8rem; min-width: 220px;">
                                                            <!-- Populated dynamically by JS -->
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Right Panel (Interactive Map) -->
                <div class="col-lg-8 col-md-7 mb-3" style="height: calc(100vh - 120px);">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 position-relative">
                        <!-- Mode indicator centered at the top -->
                        <div class="position-absolute top-0 start-50 translate-middle-x m-3 z-3 bg-white py-1 px-3 rounded-pill shadow border d-flex align-items-center gap-2" style="white-space: nowrap;">
                            <span class="small text-muted font-monospace font-weight-semibold mb-0" id="map-mode-indicator">{% translate "Mode: Lecture" %}</span>
                            <button type="button" id="btn-duplicate-trace" class="btn btn-xs btn-outline-primary rounded-pill py-0.5 px-2" style="display: none; font-size: 0.75rem;">
                                <i class="bi bi-copy"></i> {% translate "Appliquer aux autres câbles…" %}
                            </button>
                            <button type="button" id="btn-clear-trace" class="btn btn-xs btn-outline-danger rounded-pill py-0.5 px-2" style="display: none; font-size: 0.75rem;">
                                <i class="bi bi-trash"></i> {% translate "Effacer" %}
                            </button>
                        </div>
                        <div id="cable-edit-tip" class="position-absolute start-50 translate-middle-x z-2 px-3 py-1 bg-white bg-opacity-95 rounded-pill shadow-sm border small text-muted text-center" style="top: 56px; display: none; font-size: 0.75rem; white-space: nowrap;">
                            <i class="bi bi-info-circle text-primary me-1"></i>
                            <span>{% translate "Double-clic sur un segment pour ajouter un nœud • Double-clic sur un nœud pour le supprimer • Glisser pour déplacer" %}</span>
                        </div>

                        <div id="map" class="w-100 h-100"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal: Appliquer le tracé d'un câble à d'autres câbles -->
    <div class="modal fade" id="duplicateCableModal" tabindex="-1" aria-labelledby="duplicateCableModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 border-0 shadow">
                <div class="modal-header border-bottom py-2.5 px-3">
                    <h6 class="modal-title font-weight-semibold text-dark d-flex align-items-center gap-2 mb-0" id="duplicateCableModalLabel">
                        <i class="bi bi-copy text-primary"></i> {% translate "Appliquer le tracé à d'autres câbles" %}
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-3">
                    <p class="text-secondary small mb-3">
                        {% translate "Copier le tracé de" %} <strong id="modal-source-cable-name" class="text-dark"></strong> <span id="modal-source-cable-info" class="badge bg-light text-secondary border"></span> {% translate "vers les câbles sélectionnés ci-dessous :" %}
                    </p>

                    <div class="p-2.5 bg-light rounded-3 border mb-2">
                        <div class="form-check mb-0">
                            <input class="form-check-input" type="checkbox" id="modal-select-all-cables">
                            <label class="form-check-label font-weight-semibold small text-dark cursor-pointer" for="modal-select-all-cables">
                                {% translate "Tout sélectionner" %}
                            </label>
                        </div>
                    </div>

                    <div id="modal-target-cables-list" class="d-flex flex-column gap-1.5 overflow-auto pe-1" style="max-height: 240px;">
                        <!-- Dynamically generated list of cables -->
                    </div>
                </div>
                <div class="modal-footer border-top py-2 px-3 d-flex justify-content-between">
                    <button type="button" class="btn btn-sm btn-outline-secondary rounded-2" data-bs-dismiss="modal">
                        {% translate "Annuler" %}
                    </button>
                    <button type="button" id="btn-confirm-duplicate-cable" class="btn btn-sm btn-primary rounded-2 px-3 d-flex align-items-center gap-1.5">
                        <i class="bi bi-check-lg"></i> {% translate "Copier le tracé" %}
                    </button>
                </div>
            </div>
        </div>
    </div>

    {% endif %}
</div>

{% if step == 'preview' %}
<!-- Embedded JSON Data for JS Map Initialization -->
{{ existing_poles_geojson|json_script:"existing_poles_geojson" }}
{{ intersection.lon|json_script:"intersection_lon" }}
{{ intersection.lat|json_script:"intersection_lat" }}
{{ dxf_poles|json_script:"dxf_poles" }}
<script type="application/json" id="georeferencedDocumentsData">
    {{ georeferenced_documents_json|safe }}
</script>
{{ dxf_files|json_script:"dxfFilesData" }}
<script type="application/json" id="crossroadPlansConfig">
    {
        "importDxfUrl": "{% url 'assets:import_dxf' intersection.id %}"
    }
</script>
{% endif %}

<style>
    .table-success-light { background-color: #f0fdf4 !important; }
    .table-warning-light { background-color: #fffbeb !important; }
    .table-danger-light { background-color: #fef2f2 !important; }
    .nav-tabs .nav-link {
        color: #64748b;
        font-weight: 500;
        background-color: transparent;
        transition: background-color 0.15s, color 0.15s;
    }
    .nav-tabs .nav-link:hover {
        background-color: #f1f5f9;
        color: #334155;
    }
    .nav-tabs .nav-link.active {
        color: #2563eb !important;
        background-color: #ffffff !important;
        border-bottom: 2px solid #2563eb !important;
    }
    .pole-marker {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: transform 0.15s ease;
    }
    .pole-marker:hover { transform: scale(1.1); }
    .btn-xs { padding: 2px 6px; font-size: 0.75rem; }
    .cable-handle:hover { transform: scale(1.3); }
    
    /* Pull top-right controls to the top and leave margin below orthophotos button */
    #map .maplibregl-ctrl-top-right {
        top: 10px !important;
    }
    .layer-switcher-ctrl {
        margin-bottom: 15px !important;
    }
</style>

<script>
    function triggerGlobalAction(actionType) {
        if (actionType === 'replace_all') {
            if (confirm("{% translate 'Voulez-vous vraiment archiver TOUS les assets actifs existants de ce carrefour et recréer les nouveaux à partir du fichier Excel ? Cette action est irréversible.' %}")) {
                document.getElementById('global_action_input').value = 'replace_all';
                document.getElementById('combined-import-form').submit();
            }
        } else if (actionType === 'update_all') {
            if (confirm("{% translate 'Voulez-vous mettre à jour les assets existants sans les archiver, et créer les nouveaux assets présents dans le plan ? Les géométries et modèles modifiés seront appliqués.' %}")) {
                document.getElementById('global_action_input').value = 'update_all';
                document.getElementById('combined-import-form').submit();
            }
        }
    }
</script>

{% if step == 'preview' %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1. Select all checkboxes in tables
    const bindSelectAll = (headerId, checkboxClass) => {
        const headerCheckbox = document.getElementById(headerId);
        if (!headerCheckbox) return;
        headerCheckbox.addEventListener('change', () => {
            const checkboxes = document.querySelectorAll('.' + checkboxClass);
            checkboxes.forEach(cb => {
                cb.checked = headerCheckbox.checked;
            });
        });
    };

    bindSelectAll('select-all-poles', 'pole-checkbox');
    bindSelectAll('select-all-lanterns', 'lantern-checkbox');
    bindSelectAll('select-all-detectors', 'detector-checkbox');
    bindSelectAll('select-all-cables', 'cable-checkbox');
    bindSelectAll('select-all-other', 'other-checkbox');

    // Global Check All / Uncheck All across all tabs
    const setAllCheckboxesState = (state) => {
        const allItemCheckboxes = document.querySelectorAll('.pole-checkbox, .lantern-checkbox, .detector-checkbox, .cable-checkbox, .other-checkbox');
        allItemCheckboxes.forEach(cb => {
            cb.checked = state;
        });
        const allHeaderCheckboxes = document.querySelectorAll('#select-all-poles, #select-all-lanterns, #select-all-detectors, #select-all-cables, #select-all-other');
        allHeaderCheckboxes.forEach(cb => {
            cb.checked = state;
        });
    };

    const btnCheckAllGlobal = document.getElementById('btn-check-all-global');
    if (btnCheckAllGlobal) {
        btnCheckAllGlobal.addEventListener('click', () => setAllCheckboxesState(true));
    }

    const btnUncheckAllGlobal = document.getElementById('btn-uncheck-all-global');
    if (btnUncheckAllGlobal) {
        btnUncheckAllGlobal.addEventListener('click', () => setAllCheckboxesState(false));
    }

    // Batch Decision Buttons (Tout Mettre à jour / Tout Remplacer)
    const btnBatchUpdate = document.getElementById('btn-batch-update');
    if (btnBatchUpdate) {
        btnBatchUpdate.addEventListener('click', () => {
            const allDecisionSelects = document.querySelectorAll('select[name^="action_pole_"], select[name^="action_cable_"], select[name^="action_lantern_"], select[name^="action_detector_"]');
            allDecisionSelects.forEach(sel => {
                if (sel.name.includes('_db_')) {
                    if (sel.querySelector('option[value="keep"]')) sel.value = 'keep';
                } else {
                    if (sel.querySelector('option[value="modify"]')) {
                        sel.value = 'modify';
                    } else if (sel.querySelector('option[value="add"]')) {
                        sel.value = 'add';
                    } else if (sel.querySelector('option[value="keep"]')) {
                        sel.value = 'keep';
                    }
                }
            });
        });
    }

    const btnBatchReplace = document.getElementById('btn-batch-replace');
    if (btnBatchReplace) {
        btnBatchReplace.addEventListener('click', () => {
            const allDecisionSelects = document.querySelectorAll('select[name^="action_pole_"], select[name^="action_cable_"], select[name^="action_lantern_"], select[name^="action_detector_"]');
            allDecisionSelects.forEach(sel => {
                if (sel.name.includes('_db_')) {
                    if (sel.querySelector('option[value="archive"]')) sel.value = 'archive';
                } else {
                    if (sel.querySelector('option[value="replace"]')) {
                        sel.value = 'replace';
                    } else if (sel.querySelector('option[value="add"]')) {
                        sel.value = 'add';
                    }
                }
            });
        });
    }

    // 2. Interactive Switch Logic between Table View and Map View
    const tableView = document.getElementById('table-view');
    const mapView = document.getElementById('map-view');
    
    function switchToMapView(targetTab, cableCodeToEdit) {
        tableView.classList.remove('d-block');
        tableView.classList.add('d-none');
        
        mapView.classList.remove('d-none');
        mapView.classList.add('d-block');
        
        // Trigger MapLibre GL canvas resize recalculation
        if (map) {
            map.resize();
        }
        
        // Activate corresponding tab in map sidebar
        if (targetTab === 'poles') {
            const tabEl = document.getElementById('map-poles-tab');
            if (tabEl) new bootstrap.Tab(tabEl).show();
        } else if (targetTab === 'cables') {
            const tabEl = document.getElementById('map-cables-tab');
            if (tabEl) new bootstrap.Tab(tabEl).show();
            if (cableCodeToEdit) {
                activateCableEditingMode(cableCodeToEdit);
                const item = document.querySelector(`.cable-config-item[data-code="${cableCodeToEdit}"]`);
                if (item) {
                    item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            }
        }
    }

    document.querySelectorAll('.show-map-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            switchToMapView(this.dataset.targetTab);
        });
    });

    document.querySelectorAll('.show-cable-on-map-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            switchToMapView('cables', this.dataset.code);
        });
    });

    document.querySelectorAll('.hide-map-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            
            mapView.classList.remove('d-block');
            mapView.classList.add('d-none');
            
            tableView.classList.remove('d-none');
            tableView.classList.add('d-block');
        });
    });

    // 3. MapLibre GL interactive workspace integration
    const intersectionId = "{{ intersection.id }}";
    window.dxfFile = "{{ dxf_file|escapejs }}";

    const intersectionLon = JSON.parse(document.getElementById('intersection_lon').textContent);
    const intersectionLat = JSON.parse(document.getElementById('intersection_lat').textContent);
    const existingPolesGeojson = JSON.parse(document.getElementById('existing_poles_geojson').textContent);
    const initialDxfPoles = JSON.parse(document.getElementById('dxf_poles').textContent);
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;

    const polesList = [
        {% for item in poles %}
        {
            code: "{{ item.code|escapejs }}",
            short_code: "{{ item.short_code|escapejs }}",
            status: "{{ item.status|escapejs }}",
            new_lon: {% if item.new_lon is not None %}{{ item.new_lon|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            new_lat: {% if item.new_lat is not None %}{{ item.new_lat|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            new_x_3812: {% if item.new_x_3812 is not None %}{{ item.new_x_3812|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            new_y_3812: {% if item.new_y_3812 is not None %}{{ item.new_y_3812|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            db_lon: {% if item.db_lon is not None %}{{ item.db_lon|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            db_lat: {% if item.db_lat is not None %}{{ item.db_lat|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            db_x_3812: {% if item.db_x_3812 is not None %}{{ item.db_x_3812|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            db_y_3812: {% if item.db_y_3812 is not None %}{{ item.db_y_3812|default_if_none:''|unlocalize }}{% else %}null{% endif %},
            geom_modified: {{ item.geom_modified|yesno:"true,false" }},
            distance_diff: {% if item.distance_diff is not None %}{{ item.distance_diff|default_if_none:''|unlocalize }}{% else %}null{% endif %}
        },
        {% endfor %}
    ];

    const lanternsList = [
        {% for item in lanterns %}
        {
            code: "{{ item.code|escapejs }}",
            pole_code: "{{ item.pole_code|escapejs }}"
        },
        {% endfor %}
    ];

    const detectorsList = [
        {% for item in detectors %}
        {
            code: "{{ item.code|escapejs }}",
            pole_code: "{{ item.pole_code|escapejs }}"
        },
        {% endfor %}
    ];

    const cablesList = [
        {% for item in cables %}
        {
            code: "{{ item.code|escapejs }}",
            name: "{{ item.name|escapejs }}",
            status: "{{ item.status|escapejs }}",
            geom_modified: {{ item.geom_modified|yesno:"true,false" }},
            connected_poles: {{ item.connected_poles|safe|default:"[]" }},
            db_coords: {{ item.db_coords|safe|default:"[]" }},
            has_db_geom: {{ item.has_db_geom|yesno:"true,false" }},
            db_geom_length: {% if item.db_geom_length is not None %}{{ item.db_geom_length|unlocalize }}{% else %}null{% endif %},
            deduced_model_name: "{{ item.deduced_model_name|default:''|escapejs }}"
        },
        {% endfor %}
    ];

    // Compute metadata counts for sidebar listing
    polesList.forEach(p => {
        const lanterns = lanternsList.filter(l => l.pole_code === p.code).length;
        const detectors = detectorsList.filter(d => d.pole_code === p.code).length;
        
        const ml = document.getElementById(`meta_lanterns_${p.code}`);
        const md = document.getElementById(`meta_detectors_${p.code}`);
        if (ml) ml.textContent = `${lanterns} Lanternes`;
        if (md) md.textContent = `${detectors} Détecteurs`;
    });

    let center = [4.3508, 50.8465]; // default Brussels
    if (intersectionLon !== null && intersectionLat !== null) {
        center = [parseFloat(intersectionLon), parseFloat(intersectionLat)];
    }

    const map = new maplibregl.Map({
        style: window.MAP_STYLE_LIGHT || 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
        center: center,
        zoom: 17,
        container: 'map'
    });

    let activePlacementPole = null;
    let activeEditCable = null;
    let cableHandles = [];
    const cableGeometries = {};
    const placedPoles = {};
    let layerSwitcher = null;

    function calculateLineLengthMeters(coords) {
        if (!coords || coords.length < 2) return 0;
        const R = 6371000;
        let total = 0;
        for (let i = 0; i < coords.length - 1; i++) {
            const lon1 = coords[i][0] * Math.PI / 180;
            const lat1 = coords[i][1] * Math.PI / 180;
            const lon2 = coords[i+1][0] * Math.PI / 180;
            const lat2 = coords[i+1][1] * Math.PI / 180;
            const dLat = lat2 - lat1;
            const dLon = lon2 - lon1;
            const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                      Math.cos(lat1) * Math.cos(lat2) *
                      Math.sin(dLon/2) * Math.sin(dLon/2);
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
            total += R * c;
        }
        return Math.round(total * 10) / 10;
    }

    function getCableCoords(code) {
        if (cableGeometries[code] && cableGeometries[code].length >= 2) {
            return cableGeometries[code];
        }
        const c = cablesList.find(item => item.code === code);
        if (!c) return [];
        if (c.db_coords && c.db_coords.length >= 2) {
            return c.db_coords;
        }
        const coords = [];
        const connected = c.connected_poles || [];
        connected.forEach(pCode => {
            if (placedPoles[pCode]) {
                coords.push([placedPoles[pCode].lon, placedPoles[pCode].lat]);
            }
        });
        return coords;
    }

    function updateCableBadge(code) {
        const badge = document.getElementById(`badge-cable-status-${code}`);
        const coords = getCableCoords(code);
        const c = cablesList.find(item => item.code === code);
        if (!badge || !c) return;

        if (coords && coords.length >= 2) {
            const len = calculateLineLengthMeters(coords);
            const isModified = cableGeometries[code] !== undefined || c.geom_modified;
            if (isModified) {
                badge.className = 'badge bg-warning text-dark border border-warning-subtle font-monospace cable-geom-status-badge';
                badge.innerHTML = `<i class="bi bi-bezier2"></i> ${coords.length} pts (${len} m)`;
            } else {
                badge.className = 'badge bg-info-subtle text-info-emphasis border border-info-subtle font-monospace cable-geom-status-badge';
                badge.innerHTML = `<i class="bi bi-bezier2"></i> ${coords.length} pts (${len} m)`;
            }
        } else {
            badge.className = 'badge bg-light text-muted border font-monospace cable-geom-status-badge';
            badge.textContent = `{% translate "Non tracé" %}`;
        }
    }

    function updateTableCableGeomCell(code) {
        const geomCell = document.getElementById(`geom_cell_cable_${code}`);
        if (!geomCell) return;
        const coords = getCableCoords(code);
        if (coords && coords.length >= 2) {
            const len = calculateLineLengthMeters(coords);
            geomCell.innerHTML = `<span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1"><i class="bi bi-arrows-move"></i> {% translate "Tracé modifié" %} (${len} m)</span> <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-cable-on-map-btn" data-code="${code}" title="{% translate 'Voir et éditer sur la carte' %}"><i class="bi bi-geo-alt"></i></button>`;
        } else {
            geomCell.innerHTML = `<span class="badge bg-light text-muted border">{% translate "Non tracé" %}</span> <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-cable-on-map-btn" data-code="${code}" title="{% translate 'Tracer sur la carte' %}"><i class="bi bi-geo-alt"></i></button>`;
        }
        const btn = geomCell.querySelector('.show-cable-on-map-btn');
        if (btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                switchToMapView('cables', code);
            });
        }
    }

    function markCableAsModified(code) {
        const selectAction = document.querySelector(`select[name="action_cable_${code}"]`);
        if (selectAction) {
            if (selectAction.querySelector('option[value="modify"]')) {
                selectAction.value = 'modify';
            } else if (selectAction.querySelector('option[value="add"]')) {
                selectAction.value = 'add';
            }
        }
        const cb = document.querySelector(`input[name="selected_cable_${code}"]`);
        if (cb) cb.checked = true;

        updateTableCableGeomCell(code);
        updateCableBadge(code);
    }

    const snapCandidates = initialDxfPoles.map(dp => [dp.lon, dp.lat, dp.x_3812, dp.y_3812]);

    // AddressSearchControl initialization
    const AUTOCOMPLETE_STREET_URL = "{% url 'common:autocomplete_street' %}";
    if (typeof AddressSearchControl !== 'undefined') {
        const searchCtrl = new AddressSearchControl({
            autocompleteUrl: AUTOCOMPLETE_STREET_URL,
            placeholder: "{% translate 'Rechercher une adresse…' %}"
        });
        map.addControl(searchCtrl, 'top-left');
    }

    // ── Helper to determine where to place the orthophoto layer ──
    function getOrthoBeforeLayer(m) {
        if (!m || !m.getStyle) return undefined;
        const style = m.getStyle();
        const styleLayers = (style && style.layers) || [];
        
        // 1. Bottom-most plan layer: first georef image layer
        const imageLayer = styleLayers.find(l => l.id && l.id.startsWith('georef-image-overlay-layer-'));
        if (imageLayer) return imageLayer.id;
        
        // 2. Or first CAD layer
        if (m.getLayer('dxf-layout-fills')) return 'dxf-layout-fills';
        if (m.getLayer('dxf-layout-lines')) return 'dxf-layout-lines';
        if (m.getLayer('dxf-layout-symbols')) return 'dxf-layout-symbols';
        
        // 3. Or existing poles layer
        if (m.getLayer('existing-poles-layer')) return 'existing-poles-layer';
        
        return undefined;
    }

    // ── Ensure strict layer stacking order for cross plan import ──
    function reorderCrossPlanLayers() {
        if (!map || typeof map.isStyleLoaded !== 'function' || !map.isStyleLoaded()) return;

        const markerBottomId = map.getLayer('existing-poles-layer') ? 'existing-poles-layer' : undefined;

        const style = map.getStyle();
        const styleLayers = (style && style.layers) || [];
        const imageLayerIds = styleLayers
            .filter(l => l.id && l.id.startsWith('georef-image-overlay-layer-'))
            .map(l => l.id);

        const firstCadId = map.getLayer('dxf-layout-fills')
            ? 'dxf-layout-fills'
            : (map.getLayer('dxf-layout-lines') ? 'dxf-layout-lines' : (map.getLayer('dxf-layout-symbols') ? 'dxf-layout-symbols' : undefined));

        const firstPlanId = (imageLayerIds.length > 0 ? imageLayerIds[0] : null) || firstCadId;

        // 1. Move orthophoto under any plan layer (or under marker)
        const orthoBeforeId = firstPlanId || markerBottomId;
        if (map.getLayer('layer-switcher-ortho') && orthoBeforeId && map.getLayer(orthoBeforeId)) {
            try {
                map.moveLayer('layer-switcher-ortho', orthoBeforeId);
            } catch (e) {
                console.warn("Could not move layer-switcher-ortho:", e);
            }
        }

        // 2. Georeferenced image layers under CAD layers (or under marker)
        const imageBeforeId = firstCadId || markerBottomId;
        if (imageBeforeId && map.getLayer(imageBeforeId)) {
            imageLayerIds.forEach(imgId => {
                if (map.getLayer(imgId)) {
                    try {
                        map.moveLayer(imgId, imageBeforeId);
                    } catch (e) {
                        console.warn("Could not move image overlay layer:", e);
                    }
                }
            });
        }

        // 3. DXF CAD layers: fills -> lines -> symbols, before markerBottomId
        if (markerBottomId && map.getLayer(markerBottomId)) {
            ['dxf-layout-fills', 'dxf-layout-lines', 'dxf-layout-symbols'].forEach(cadId => {
                if (map.getLayer(cadId)) {
                    try {
                        map.moveLayer(cadId, markerBottomId);
                    } catch (e) {
                        console.warn("Could not move CAD layer:", e);
                    }
                }
            });
        }
    }

    // --- Contrôle photo aérienne (LayerSwitcherControl) ---
    if (typeof LayerSwitcherControl !== 'undefined') {
        layerSwitcher = new LayerSwitcherControl({
            layers: [
                {
                    id: 'ortho',
                    name: 'Orthophotos',
                    icon: 'satellite',
                    group: 'ortho',
                    beforeLayer: getOrthoBeforeLayer,
                    onLayerAdded: () => reorderCrossPlanLayers(),
                    onVisibilityChange: (layerId, isVisible) => {
                        if (isVisible) reorderCrossPlanLayers();
                    },
                    layer: {
                        type: 'raster',
                        paint: { 'raster-opacity': 1 }
                    },
                    sublayers: [
                        {
                            id: 'urbis',
                            name: window.MAP_ORTHO_WMS_NAME || 'Urbis (Bruxelles)',
                            default: true,
                            source: {
                                type: 'raster',
                                tiles: [
                                    window.MAP_ORTHO_WMS_URL || 'https://geoservices-urbis.irisnet.be/geoserver/urbisgrid/wms?service=WMS&version=1.3.0&request=GetMap&layers=Ortho&styles=&format=image/png&transparent=true&width=256&height=256&crs=EPSG:3857&bbox={bbox-epsg-3857}'
                                ],
                                tileSize: 256,
                                attribution: window.MAP_ORTHO_WMS_ATTRIBUTION || '© Brussels UrbIS'
                            }
                        },
                        {
                            id: 'vlaanderen',
                            name: 'Vlaanderen 2023',
                            source: {
                                type: 'raster',
                                tiles: [
                                    'https://geo.api.vlaanderen.be/OMW/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=omwrgb23vl&STYLE=&FORMAT=image/png&TILEMATRIXSET=GoogleMapsVL&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                                ],
                                tileSize: 256,
                                attribution: '© Digitaal Vlaanderen - Orthofoto 2023'
                            }
                        }
                    ]
                }
            ]
        });
        map.addControl(layerSwitcher, 'top-right');
    }

    // Classic Zoom Control with Bearing/Compass in Top Right (below Orthophotos control)
    map.addControl(new maplibregl.NavigationControl({ showCompass: true }), 'top-right');

    map.on('load', function() {
        // Load active poles as read-only features
        map.addSource('existing-poles', {
            type: 'geojson',
            data: existingPolesGeojson
        });
        map.addLayer({
            id: 'existing-poles-layer',
            type: 'circle',
            source: 'existing-poles',
            paint: {
                'circle-radius': 5,
                'circle-color': '#9ca3af',
                'circle-stroke-width': 1.5,
                'circle-stroke-color': '#ffffff'
            }
        });
        map.addLayer({
            id: 'existing-poles-labels',
            type: 'symbol',
            source: 'existing-poles',
            layout: {
                'text-field': ['coalesce', ['get', 'short_code'], ['get', 'code']],
                'text-font': ['Noto Sans Regular'],
                'text-size': 11,
                'text-anchor': 'top',
                'text-offset': [0, 0.6],
                'text-allow-overlap': true
            },
            paint: {
                'text-color': '#6b7280',
                'text-halo-color': 'rgba(255, 255, 255, 0.9)',
                'text-halo-width': 1.5
            }
        });

        // Add DXF snapping points source and layer
        const dxfPolesFeatures = initialDxfPoles.map(dp => ({
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [dp.lon, dp.lat]
            },
            properties: {
                id: dp.id,
                label: dp.label
            }
        }));
        map.addSource('dxf-snap-points', {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: dxfPolesFeatures
            }
        });
        map.addLayer({
            id: 'dxf-snap-layer',
            type: 'circle',
            source: 'dxf-snap-points',
            paint: {
                'circle-radius': 5,
                'circle-color': '#e2e8f0',
                'circle-stroke-width': 1.5,
                'circle-stroke-color': '#94a3b8'
            }
        });

        // Add Cables source and layer for tracing representation
        map.addSource('cable-lines-source', {
            type: 'geojson',
            data: {
                type: 'FeatureCollection',
                features: []
            }
        });
        map.addLayer({
            id: 'cable-lines-layer',
            type: 'line',
            source: 'cable-lines-source',
            paint: {
                'line-color': '#10b981',
                'line-width': 1.8,
                'line-dasharray': [1.5, 1.5]
            }
        });
        
        map.addLayer({
            id: 'cable-lines-active-layer',
            type: 'line',
            source: 'cable-lines-source',
            filter: ['==', 'active', true],
            paint: {
                'line-color': '#f59e0b',
                'line-width': 2.8
            }
        });

        if (window.dxfFile && window.dxfFile !== "") {
            loadDxfBackground(window.dxfFile);
        }

        // Automatically place markers for poles that have known coordinates (e.g. from DXF or previous georeferencing)
        polesList.forEach(p => {
            if (p.status !== 'db_only' && p.new_lon !== null && p.new_lat !== null) {
                placePoleMarker(p.code, p.new_lon, p.new_lat, p.new_x_3812, p.new_y_3812, false, true);
            }
        });
        
        updatePolesCounter();
    });

    // Delegated click handler for "Voir sur la carte" buttons in table
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.show-pole-on-map-btn');
        if (!btn) return;
        e.preventDefault();
        const code = btn.dataset.code;
        
        tableView.classList.remove('d-block');
        tableView.classList.add('d-none');
        mapView.classList.remove('d-none');
        mapView.classList.add('d-block');
        
        if (map) {
            map.resize();
            const tabEl = document.getElementById('map-poles-tab');
            if (tabEl) new bootstrap.Tab(tabEl).show();

            if (placedPoles[code]) {
                map.flyTo({ center: [placedPoles[code].lon, placedPoles[code].lat], zoom: 19 });
            } else {
                activatePlacementMode(code);
            }
        }
    });

    function getSnappedCoords(lon, lat) {
        let bestDistance = Infinity;
        let bestCoords = [lon, lat];
        let bestLambert = [null, null];
        const threshold = 0.00005; // approx 5m
        
        snapCandidates.forEach(pt => {
            const d = Math.sqrt((pt[0] - lon) ** 2 + (pt[1] - lat) ** 2);
            if (d < threshold && d < bestDistance) {
                bestDistance = d;
                bestCoords = [pt[0], pt[1]];
                bestLambert = [pt[2], pt[3]];
            }
        });
        return { coords: bestCoords, lambert: bestLambert };
    }

    function updatePolesCounter() {
        const total = polesList.filter(p => p.status !== 'db_only').length;
        const placed = Object.keys(placedPoles).length;
        document.getElementById('placed-poles-count').textContent = `${placed} / ${total}`;
    }

    function markPoleAsGeoreferenced(code, lon, lat, x_3812, y_3812, isInitialLoad = false) {
        const badge = document.getElementById(`georef_badge_${code}`);
        if (badge) {
            badge.classList.remove('bg-danger');
            badge.classList.add('bg-success');
            badge.textContent = `{% translate "Positionné" %}`;
        }
        
        const inputLon = document.getElementById(`lon_pole_${code}`);
        if (inputLon) inputLon.value = lon;
        const inputLat = document.getElementById(`lat_pole_${code}`);
        if (inputLat) inputLat.value = lat;
        const inputX = document.getElementById(`x_3812_pole_${code}`);
        if (inputX) inputX.value = (x_3812 !== undefined && x_3812 !== null) ? x_3812 : "";
        const inputY = document.getElementById(`y_3812_pole_${code}`);
        if (inputY) inputY.value = (y_3812 !== undefined && y_3812 !== null) ? y_3812 : "";

        // If not initial load (i.e. user moved or placed the pole interactively), update decision and geom cell
        if (!isInitialLoad) {
            const poleMeta = polesList.find(p => p.code === code);
            if (poleMeta) {
                const selectAction = document.querySelector(`select[name="action_pole_${code}"]`);
                const geomCell = document.getElementById(`geom_cell_pole_${code}`);
                const hasDbPos = (poleMeta.db_x_3812 !== null && poleMeta.db_y_3812 !== null && x_3812 !== null && y_3812 !== null);
                let dist = hasDbPos ? Math.sqrt((poleMeta.db_x_3812 - x_3812)**2 + (poleMeta.db_y_3812 - y_3812)**2) : null;
                const isIdenticalPos = (hasDbPos && dist < 0.05);

                if (isIdenticalPos && poleMeta.status === 'identical') {
                    // Position identical and attributes identical: propose "Ne rien faire"
                    if (selectAction && selectAction.querySelector('option[value="keep"]')) {
                        selectAction.value = 'keep';
                    }
                    if (geomCell) {
                        geomCell.innerHTML = `<span class="badge bg-light text-muted border d-inline-flex align-items-center gap-1"><i class="bi bi-check2"></i> {% translate "Inchangée" %}</span> <button type="button" class="btn btn-xs btn-outline-secondary ms-1 show-pole-on-map-btn" data-code="${code}" title="{% translate 'Voir sur la carte' %}"><i class="bi bi-geo-alt"></i></button>`;
                    }
                } else {
                    // Position changed or newly placed: propose "Mise à jour"
                    if (selectAction) {
                        if (selectAction.querySelector('option[value="modify"]')) {
                            selectAction.value = 'modify';
                        } else if (selectAction.querySelector('option[value="add"]')) {
                            selectAction.value = 'add';
                        }
                    }
                    const cb = document.querySelector(`input[name="selected_pole_${code}"]`);
                    if (cb) cb.checked = true;

                    if (geomCell) {
                        let distText = (dist !== null) ? ` (${dist.toFixed(1)} m)` : "";
                        geomCell.innerHTML = `<span class="badge bg-warning text-dark d-inline-flex align-items-center gap-1"><i class="bi bi-arrows-move"></i> {% translate "Position modifiée" %}${distText}</span> <button type="button" class="btn btn-xs btn-outline-primary ms-1 show-pole-on-map-btn" data-code="${code}" title="{% translate 'Voir et ajuster sur la carte' %}"><i class="bi bi-geo-alt"></i></button>`;
                    }

                    // Any cable connected to this pole also has its geometry modified
                    cablesList.forEach(c => {
                        if (c.connected_poles && c.connected_poles.includes(code)) {
                            markCableAsModified(c.code);
                        }
                    });
                }
            }
        }

        redrawCablesOnMap();
        updatePolesCounter();
        saveCablesToForm();
    }

    map.on('click', function(e) {
        if (!activePlacementPole) return;

        const originalCoords = [e.lngLat.lng, e.lngLat.lat];
        const snapped = getSnappedCoords(originalCoords[0], originalCoords[1]);
        
        placePoleMarker(activePlacementPole, snapped.coords[0], snapped.coords[1], snapped.lambert[0], snapped.lambert[1], true, false);
    });

    function placePoleMarker(code, lon, lat, x_3812, y_3812, autoAdvance = true, isInitialLoad = false) {
        if (placedPoles[code]) {
            placedPoles[code].marker.remove();
        }

        const el = document.createElement('div');
        el.className = 'pole-marker shadow-sm';
        el.style.backgroundColor = '#2563eb';
        el.style.color = '#ffffff';
        el.style.padding = '3px 8px';
        el.style.borderRadius = '20px';
        el.style.fontWeight = 'bold';
        el.style.fontSize = '12px';
        el.style.border = '2px solid #ffffff';
        el.style.cursor = 'move';
        
        const short_code = polesList.find(p => p.code === code)?.short_code || code;
        el.textContent = short_code;

        const marker = new maplibregl.Marker({
            element: el,
            draggable: true
        })
        .setLngLat([lon, lat])
        .addTo(map);

        placedPoles[code] = {
            lon: lon,
            lat: lat,
            x_3812: x_3812,
            y_3812: y_3812,
            marker: marker
        };

        marker.on('dragend', function() {
            const lngLat = marker.getLngLat();
            const snapped = getSnappedCoords(lngLat.lng, lngLat.lat);
            marker.setLngLat(snapped.coords);
            placedPoles[code].lon = snapped.coords[0];
            placedPoles[code].lat = snapped.coords[1];
            placedPoles[code].x_3812 = snapped.lambert[0];
            placedPoles[code].y_3812 = snapped.lambert[1];
            markPoleAsGeoreferenced(code, snapped.coords[0], snapped.coords[1], snapped.lambert[0], snapped.lambert[1], false);
        });

        markPoleAsGeoreferenced(code, lon, lat, x_3812, y_3812, isInitialLoad);

        const mapPane = document.getElementById('map-poles-pane');
        mapPane.querySelectorAll('.pole-config-item').forEach(item => item.classList.remove('bg-light'));
        const listItem = mapPane.querySelector(`.pole-config-item[data-code="${code}"]`);
        if (listItem) {
            listItem.classList.add('bg-light');
        }

        if (autoAdvance) {
            const unplaced = polesList.filter(p => p.status !== 'db_only' && !placedPoles[p.code]);
            if (unplaced.length > 0) {
                activatePlacementMode(unplaced[0].code);
            } else {
                deactivatePlacementMode();
            }
        }
    }

    function activatePlacementMode(code) {
        deactivateCableEditingMode();
        activePlacementPole = code;
        map.getCanvas().style.cursor = 'crosshair';
        document.getElementById('map-mode-indicator').textContent = `{% translate "Mode: Placement de" %} ${code.split('_').pop()}`;
        
        document.querySelectorAll('.start-placement-btn').forEach(btn => {
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-outline-primary');
        });
        const activeBtn = document.querySelector(`.start-placement-btn[data-code="${code}"]`);
        if (activeBtn) {
            activeBtn.classList.remove('btn-outline-primary');
            activeBtn.classList.add('btn-primary');
        }
    }

    function deactivatePlacementMode() {
        activePlacementPole = null;
        map.getCanvas().style.cursor = '';
        document.getElementById('map-mode-indicator').textContent = `{% translate "Mode: Lecture" %}`;
        document.querySelectorAll('.start-placement-btn').forEach(btn => {
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-outline-primary');
        });
    }

    document.querySelectorAll('.start-placement-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const code = this.dataset.code;
            if (activePlacementPole === code) {
                deactivatePlacementMode();
            } else {
                activatePlacementMode(code);
            }
        });
    });

    // Cable editor helpers
    function activateCableEditingMode(code) {
        deactivatePlacementMode();
        deactivateCableEditingMode();
        
        activeEditCable = code;
        const cableInfo = cablesList.find(c => c.code === code);
        const cableName = cableInfo ? cableInfo.name : code;
        document.getElementById('map-mode-indicator').textContent = `{% translate "Mode: Tracé" %} ${cableName}`;
        document.getElementById('btn-clear-trace').style.display = 'block';
        document.getElementById('btn-duplicate-trace').style.display = 'block';
        document.getElementById('cable-edit-tip').style.display = 'block';

        const mapPane = document.getElementById('map-cables-pane');
        mapPane.querySelectorAll('.cable-config-item').forEach(item => item.classList.remove('bg-light'));
        const item = mapPane.querySelector(`.cable-config-item[data-code="${code}"]`);
        if (item) item.classList.add('bg-light');

        let coords = cableGeometries[code];
        if (!coords || coords.length === 0) {
            const defaultCoords = getCableCoords(code);
            coords = defaultCoords && defaultCoords.length > 0 ? defaultCoords.map(pt => [pt[0], pt[1]]) : [];
            cableGeometries[code] = coords;
        }

        drawCableHandles(code);
        redrawCablesOnMap();
        updateCableBadge(code);
    }

    function deactivateCableEditingMode() {
        activeEditCable = null;
        document.getElementById('btn-clear-trace').style.display = 'none';
        document.getElementById('btn-duplicate-trace').style.display = 'none';
        document.getElementById('cable-edit-tip').style.display = 'none';
        document.getElementById('map-mode-indicator').textContent = `{% translate "Mode: Lecture" %}`;
        
        cableHandles.forEach(h => h.remove());
        cableHandles = [];

        const mapPane = document.getElementById('map-cables-pane');
        mapPane.querySelectorAll('.cable-config-item').forEach(item => item.classList.remove('bg-light'));
        redrawCablesOnMap();
    }

    function drawCableHandles(code) {
        cableHandles.forEach(h => h.remove());
        cableHandles = [];

        const coords = cableGeometries[code] || [];
        coords.forEach((pt, index) => {
            const el = document.createElement('div');
            el.className = 'cable-handle shadow';
            el.style.width = '12px';
            el.style.height = '12px';
            el.style.backgroundColor = '#f59e0b';
            el.style.border = '2px solid #ffffff';
            el.style.borderRadius = '50%';
            el.style.cursor = 'pointer';

            const marker = new maplibregl.Marker({
                element: el,
                draggable: true
            })
            .setLngLat(pt)
            .addTo(map);

            cableHandles.push(marker);

            marker.on('drag', function() {
                const lngLat = marker.getLngLat();
                cableGeometries[code][index] = [lngLat.lng, lngLat.lat];
                redrawCablesOnMap();
            });

            marker.on('dragend', function() {
                const lngLat = marker.getLngLat();
                const snapped = getSnappedCoords(lngLat.lng, lngLat.lat);
                marker.setLngLat(snapped.coords);
                cableGeometries[code][index] = snapped.coords;
                redrawCablesOnMap();
                saveCablesToForm();
                markCableAsModified(code);
                populateCopyCableMenus();
            });

            el.addEventListener('dblclick', function(e) {
                e.stopPropagation();
                cableGeometries[code].splice(index, 1);
                drawCableHandles(code);
                redrawCablesOnMap();
                saveCablesToForm();
                markCableAsModified(code);
                populateCopyCableMenus();
            });
        });
    }

    function getDistanceToSegment(pt, p1, p2) {
        const x = pt[0], y = pt[1];
        const x1 = p1[0], y1 = p1[1];
        const x2 = p2[0], y2 = p2[1];
        
        const dx = x2 - x1;
        const dy = y2 - y1;
        
        if (dx === 0 && dy === 0) {
            return Math.sqrt((x - x1) ** 2 + (y - y1) ** 2);
        }
        
        let t = ((x - x1) * dx + (y - y1) * dy) / (dx * dx + dy * dy);
        t = Math.max(0, Math.min(1, t)); // clamp to segment
        
        const px = x1 + t * dx;
        const py = y1 + t * dy;
        
        return Math.sqrt((x - px) ** 2 + (y - py) ** 2);
    }

    let dblClickLayerHandled = false;

    // Double-click on segment to insert intermediate point
    map.on('dblclick', 'cable-lines-active-layer', function(e) {
        if (!activeEditCable) return;
        dblClickLayerHandled = true;
        e.preventDefault();
        
        const clickPoint = [e.lngLat.lng, e.lngLat.lat];
        const snapped = getSnappedCoords(clickPoint[0], clickPoint[1]);
        
        const coords = cableGeometries[activeEditCable];
        if (!coords || coords.length < 2) return;
        
        let minDistance = Infinity;
        let insertIndex = coords.length;
        
        for (let i = 0; i < coords.length - 1; i++) {
            const p1 = coords[i];
            const p2 = coords[i+1];
            const d = getDistanceToSegment(clickPoint, p1, p2);
            if (d < minDistance) {
                minDistance = d;
                insertIndex = i + 1;
            }
        }
        
        coords.splice(insertIndex, 0, snapped.coords);
        drawCableHandles(activeEditCable);
        redrawCablesOnMap();
        saveCablesToForm();
        markCableAsModified(activeEditCable);
        populateCopyCableMenus();
    });

    map.on('dblclick', function(e) {
        if (!activeEditCable) return;
        e.preventDefault();
        
        if (dblClickLayerHandled) {
            dblClickLayerHandled = false;
            return;
        }
        
        const coords = [e.lngLat.lng, e.lngLat.lat];
        const snapped = getSnappedCoords(coords[0], coords[1]);

        if (!cableGeometries[activeEditCable]) {
            cableGeometries[activeEditCable] = [];
        }
        
        cableGeometries[activeEditCable].push(snapped.coords);
        drawCableHandles(activeEditCable);
        redrawCablesOnMap();
        saveCablesToForm();
        markCableAsModified(activeEditCable);
        populateCopyCableMenus();
    });

    // Hover mouse styles for active cable line
    map.on('mouseenter', 'cable-lines-active-layer', function() {
        if (activeEditCable) {
            map.getCanvas().style.cursor = 'pointer';
        }
    });
    map.on('mouseleave', 'cable-lines-active-layer', function() {
        if (activeEditCable) {
            map.getCanvas().style.cursor = 'crosshair';
        } else {
            map.getCanvas().style.cursor = '';
        }
    });

    document.getElementById('btn-clear-trace').addEventListener('click', function() {
        if (activeEditCable) {
            cableGeometries[activeEditCable] = [];
            drawCableHandles(activeEditCable);
            redrawCablesOnMap();
            saveCablesToForm();
            markCableAsModified(activeEditCable);
            populateCopyCableMenus();
        }
    });

    function copyCableGeometry(sourceCode, targetCode) {
        const srcCoords = getCableCoords(sourceCode);
        if (!srcCoords || srcCoords.length < 2) {
            alert("{% translate "Le câble source ne possède aucun tracé valide à copier." %}");
            return false;
        }
        cableGeometries[targetCode] = srcCoords.map(pt => [pt[0], pt[1]]);
        saveCablesToForm();
        markCableAsModified(targetCode);
        populateCopyCableMenus();
        if (activeEditCable === targetCode) {
            drawCableHandles(targetCode);
            redrawCablesOnMap();
        }
        return true;
    }

    function populateCopyCableMenus() {
        document.querySelectorAll('.copy-cable-menu').forEach(menu => {
            const targetCode = menu.dataset.targetCode;
            menu.innerHTML = '';

            let hasAvailable = false;
            cablesList.forEach(other => {
                if (other.code === targetCode || other.status === 'db_only') return;
                const coords = getCableCoords(other.code);
                if (coords && coords.length >= 2) {
                    hasAvailable = true;
                    const len = calculateLineLengthMeters(coords);
                    const li = document.createElement('li');
                    li.innerHTML = `
                        <button type="button" class="dropdown-item py-1.5 px-3 d-flex align-items-center justify-content-between copy-from-cable-btn" data-source="${other.code}" data-target="${targetCode}">
                            <span class="font-monospace text-truncate me-2">${other.name}</span>
                            <span class="badge bg-light text-secondary border font-monospace" style="font-size: 0.7rem;">${coords.length} pts (${len} m)</span>
                        </button>
                    `;
                    menu.appendChild(li);
                }
            });

            if (!hasAvailable) {
                const li = document.createElement('li');
                li.className = 'dropdown-item text-muted small fst-italic py-2';
                li.textContent = `{% translate "Aucun tracé disponible" %}`;
                menu.appendChild(li);
            }
        });

        // Rebind click listeners for dynamically populated dropdown items
        document.querySelectorAll('.copy-from-cable-btn').forEach(btn => {
            btn.onclick = function(e) {
                e.preventDefault();
                const source = this.dataset.source;
                const target = this.dataset.target;
                const success = copyCableGeometry(source, target);
                if (success) {
                    const targetCable = cablesList.find(c => c.code === target);
                    const sourceCable = cablesList.find(c => c.code === source);
                    const targetName = targetCable ? targetCable.name : target;
                    const sourceName = sourceCable ? sourceCable.name : source;
                    const tipEl = document.getElementById('cable-edit-tip');
                    if (tipEl) {
                        tipEl.style.display = 'block';
                        const origContent = tipEl.innerHTML;
                        tipEl.innerHTML = `<i class="bi bi-check-circle-fill text-success me-1"></i><strong>{% translate "Tracé copié de" %} ${sourceName} {% translate "vers" %} ${targetName}</strong>`;
                        setTimeout(() => {
                            if (!activeEditCable) tipEl.style.display = 'none';
                            else tipEl.innerHTML = origContent;
                        }, 3000);
                    }
                }
            };
        });
    }

    // Modal Duplicate Trace logic
    const duplicateModalEl = document.getElementById('duplicateCableModal');
    const duplicateModal = duplicateModalEl ? new bootstrap.Modal(duplicateModalEl) : null;

    const btnDuplicateTrace = document.getElementById('btn-duplicate-trace');
    if (btnDuplicateTrace) {
        btnDuplicateTrace.addEventListener('click', function() {
            if (!activeEditCable) return;
            const currentCable = cablesList.find(c => c.code === activeEditCable);
            const coords = getCableCoords(activeEditCable);
            if (!coords || coords.length < 2) {
                alert("{% translate "Veuillez d'abord tracer au moins deux points pour ce câble avant de le dupliquer." %}");
                return;
            }

            const len = calculateLineLengthMeters(coords);
            const srcNameEl = document.getElementById('modal-source-cable-name');
            const srcInfoEl = document.getElementById('modal-source-cable-info');
            if (srcNameEl) srcNameEl.textContent = currentCable ? currentCable.name : activeEditCable;
            if (srcInfoEl) srcInfoEl.textContent = `${coords.length} pts • ${len} m`;

            const listContainer = document.getElementById('modal-target-cables-list');
            if (listContainer) {
                listContainer.innerHTML = '';
                const otherCables = cablesList.filter(c => c.code !== activeEditCable && c.status !== 'db_only');
                if (otherCables.length === 0) {
                    listContainer.innerHTML = `<div class="text-center text-muted small py-3">{% translate "Aucun autre câble disponible dans ce carrefour." %}</div>`;
                    const confirmBtn = document.getElementById('btn-confirm-duplicate-cable');
                    if (confirmBtn) confirmBtn.disabled = true;
                } else {
                    const confirmBtn = document.getElementById('btn-confirm-duplicate-cable');
                    if (confirmBtn) confirmBtn.disabled = false;
                    otherCables.forEach(c => {
                        const cCoords = getCableCoords(c.code);
                        const hasGeom = cCoords && cCoords.length >= 2;
                        const cLen = hasGeom ? calculateLineLengthMeters(cCoords) : null;
                        const geomBadge = hasGeom 
                            ? `<span class="badge bg-light text-secondary border font-monospace ms-auto" style="font-size: 0.7rem;">${cCoords.length} pts (${cLen} m)</span>`
                            : `<span class="badge bg-light text-muted border font-monospace ms-auto" style="font-size: 0.7rem;">{% translate "Non tracé" %}</span>`;

                        const itemDiv = document.createElement('div');
                        itemDiv.className = 'form-check d-flex align-items-center p-2 rounded border bg-white';
                        itemDiv.innerHTML = `
                            <input class="form-check-input modal-cable-target-cb me-2" type="checkbox" value="${c.code}" id="modal_cb_target_${c.code}">
                            <label class="form-check-label small text-dark d-flex align-items-center w-100 cursor-pointer mb-0" for="modal_cb_target_${c.code}">
                                <span class="font-monospace font-weight-semibold me-2">${c.name}</span>
                                <span class="text-muted small">${c.deduced_model_name ? '(' + c.deduced_model_name + ')' : ''}</span>
                                ${geomBadge}
                            </label>
                        `;
                        listContainer.appendChild(itemDiv);
                    });
                }
            }

            const selectAllCb = document.getElementById('modal-select-all-cables');
            if (selectAllCb) selectAllCb.checked = false;

            if (duplicateModal) duplicateModal.show();
        });
    }

    const modalSelectAllCables = document.getElementById('modal-select-all-cables');
    if (modalSelectAllCables) {
        modalSelectAllCables.addEventListener('change', function() {
            const checked = this.checked;
            document.querySelectorAll('.modal-cable-target-cb').forEach(cb => {
                cb.checked = checked;
            });
        });
    }

    const btnConfirmDuplicateCable = document.getElementById('btn-confirm-duplicate-cable');
    if (btnConfirmDuplicateCable) {
        btnConfirmDuplicateCable.addEventListener('click', function() {
            if (!activeEditCable) return;
            const selectedCbs = document.querySelectorAll('.modal-cable-target-cb:checked');
            if (selectedCbs.length === 0) {
                alert("{% translate "Veuillez sélectionner au moins un câble cible." %}");
                return;
            }

            let appliedCount = 0;
            selectedCbs.forEach(cb => {
                const targetCode = cb.value;
                copyCableGeometry(activeEditCable, targetCode);
                appliedCount++;
            });

            if (duplicateModal) duplicateModal.hide();

            const tipEl = document.getElementById('cable-edit-tip');
            if (tipEl) {
                const origContent = tipEl.innerHTML;
                tipEl.innerHTML = `<i class="bi bi-check-circle-fill text-success me-1"></i><strong>${appliedCount} {% translate "câble(s) mis à jour avec ce tracé !" %}</strong>`;
                setTimeout(() => {
                    if (activeEditCable) tipEl.innerHTML = origContent;
                }, 3000);
            }
        });
    }

    function saveCablesToForm() {
        cablesList.forEach(c => {
            let coords = cableGeometries[c.code];
            if (!coords || coords.length === 0) {
                coords = getCableCoords(c.code);
            }
            const input = document.getElementById(`geom_cable_${c.code}`);
            if (input && coords && coords.length >= 2) {
                input.value = JSON.stringify(coords);
            } else if (input) {
                input.value = "";
            }
        });
    }

    document.querySelectorAll('.edit-cable-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const code = this.dataset.code;
            if (activeEditCable === code) {
                deactivateCableEditingMode();
            } else {
                activateCableEditingMode(code);
            }
        });
    });

    function redrawCablesOnMap() {
        if (!map.getSource('cable-lines-source')) return;

        const features = [];
        cablesList.forEach(c => {
            // Only draw/show the cable if it is actively being edited!
            if (c.code !== activeEditCable) return;

            let coords = cableGeometries[c.code];
            if (!coords || coords.length === 0) {
                coords = getCableCoords(c.code);
            }

            if (coords && coords.length >= 2) {
                // Force a new array reference to bypass MapLibre's internal cache
                const freshCoords = coords.map(pt => [pt[0], pt[1]]);
                features.push({
                    type: 'Feature',
                    geometry: {
                        type: 'LineString',
                        coordinates: freshCoords
                    },
                    properties: {
                        code: c.code,
                        active: true
                    }
                });
            }
        });

        map.getSource('cable-lines-source').setData({
            type: 'FeatureCollection',
            features: features
        });

        map.triggerRepaint();
    }

    // Initial cable badges and copy menus update
    cablesList.forEach(c => {
        updateCableBadge(c.code);
    });
    populateCopyCableMenus();

    // ── Georeferenced Plans & DXF Background Loader ──
    const georeferencedDocumentsDataEl = document.getElementById('georeferencedDocumentsData');
    let georeferencedDocuments = [];
    if (georeferencedDocumentsDataEl) {
        try {
            let parsed = JSON.parse(georeferencedDocumentsDataEl.textContent);
            if (typeof parsed === 'string') {
                parsed = JSON.parse(parsed);
            }
            if (Array.isArray(parsed)) {
                georeferencedDocuments = parsed;
            }
        } catch (e) {
            console.error("Error parsing georeferenced documents data:", e);
        }
    }

    const dxfFilesDataEl = document.getElementById('dxfFilesData');
    let availableDxfFiles = [];
    if (dxfFilesDataEl) {
        try {
            availableDxfFiles = JSON.parse(dxfFilesDataEl.textContent) || [];
        } catch (e) {
            console.error("Error parsing dxf files data:", e);
        }
    }
    if (!availableDxfFiles.length && typeof window.dxfFiles !== 'undefined' && Array.isArray(window.dxfFiles)) {
        availableDxfFiles = window.dxfFiles;
    }

    const crossroadPlansConfigEl = document.getElementById('crossroadPlansConfig');
    let crossroadPlansConfig = {};
    if (crossroadPlansConfigEl) {
        try {
            crossroadPlansConfig = JSON.parse(crossroadPlansConfigEl.textContent);
        } catch (e) {
            console.error("Error parsing crossroad plans config:", e);
        }
    }

    function showGeorefImage(doc, active, opacity) {
        const srcId = `georef-image-overlay-${doc.id}`;
        const lyrId = `georef-image-overlay-layer-${doc.id}`;
        
        if (!active) {
            if (map.getLayer(lyrId)) {
                map.setLayoutProperty(lyrId, 'visibility', 'none');
            }
            return;
        }
        
        if (map.getSource(srcId)) {
            if (map.getLayer(lyrId)) {
                map.setLayoutProperty(lyrId, 'visibility', 'visible');
                map.setPaintProperty(lyrId, 'raster-opacity', opacity);
                reorderCrossPlanLayers();
            }
        } else {
            map.addSource(srcId, {
                type: 'image',
                url: doc.url,
                coordinates: doc.coords
            });
            
            let beforeId = undefined;
            if (map.getLayer('dxf-layout-fills')) {
                beforeId = 'dxf-layout-fills';
            } else if (map.getLayer('dxf-layout-lines')) {
                beforeId = 'dxf-layout-lines';
            } else if (map.getLayer('existing-poles-layer')) {
                beforeId = 'existing-poles-layer';
            }
            
            map.addLayer({
                'id': lyrId,
                'type': 'raster',
                'source': srcId,
                'layout': { 'visibility': 'visible' },
                'paint': { 'raster-opacity': opacity }
            }, beforeId);

            reorderCrossPlanLayers();
        }
        
        // Zoom/fitBounds to document
        if (doc.coords && doc.coords.length > 0) {
            const coords = doc.coords;
            const bounds = coords.reduce((acc, coord) => {
                return acc.extend(coord);
            }, new maplibregl.LngLatBounds(coords[0], coords[0]));
            map.fitBounds(bounds, { padding: 40, maxZoom: 19 });
        }
    }

    let fullDxfGeoJson = null;

    function fetchDxfGeoJson(file) {
        const spinner = document.getElementById('dxf-detail-layers-spinner');
        if (spinner) spinner.style.display = 'block';
        
        const url = `/assets/trafficlights/intersections/${intersectionId}/dxf-layout-geojson/?file=${encodeURIComponent(file)}&detail=true&layers=all`;
        fetch(url)
            .then(response => response.json())
            .then(data => {
                fullDxfGeoJson = data;
                applyDxfVectorFilters();
                if (spinner) spinner.style.display = 'none';
            })
            .catch(err => {
                console.error("Error fetching DXF GeoJSON:", err);
                if (spinner) spinner.style.display = 'none';
            });
    }

    function applyDxfVectorFilters() {
        if (!fullDxfGeoJson) return;
        
        const selectedLayers = [];
        document.querySelectorAll('.dxf-vector-layer-toggle:checked').forEach(cb => {
            selectedLayers.push(cb.dataset.layer);
        });
        
        const filteredFeatures = fullDxfGeoJson.features.filter(f => {
            const layerName = f.properties && (f.properties.Layer || f.properties.layer);
            return selectedLayers.includes(layerName);
        });
        
        const filteredData = {
            ...fullDxfGeoJson,
            features: filteredFeatures
        };
        
        ensureDxfSourcesAndLayers();
        if (map.getSource('dxf-layout')) {
            map.getSource('dxf-layout').setData(filteredData);
            
            const isVisible = selectedLayers.length > 0;
            ['dxf-layout-fills', 'dxf-layout-lines', 'dxf-layout-symbols'].forEach(lId => {
                if (map.getLayer(lId)) {
                    map.setLayoutProperty(lId, 'visibility', isVisible ? 'visible' : 'none');
                }
            });
            reorderCrossPlanLayers();
        }
    }

    function ensureDxfSourcesAndLayers() {
        if (!map.getSource('dxf-layout')) {
            map.addSource('dxf-layout', {
                type: 'geojson',
                data: { type: "FeatureCollection", features: [] }
            });

            const beforeId = map.getLayer('existing-poles-layer') ? 'existing-poles-layer' : undefined;

            map.addLayer({
                'id': 'dxf-layout-fills',
                'type': 'fill',
                'source': 'dxf-layout',
                'layout': {
                    'visibility': 'visible'
                },
                'paint': {
                    'fill-color': ['coalesce', ['get', 'color'], '#94a3b8'],
                    'fill-opacity': 0.1
                }
            }, beforeId);

            map.addLayer({
                'id': 'dxf-layout-lines',
                'type': 'line',
                'source': 'dxf-layout',
                'layout': {
                    'visibility': 'visible'
                },
                'paint': {
                    'line-color': ['coalesce', ['get', 'color'], '#475569'],
                    'line-width': 1.2,
                    'line-opacity': 0.7
                }
            }, beforeId);

            map.addLayer({
                'id': 'dxf-layout-symbols',
                'type': 'symbol',
                'source': 'dxf-layout',
                'filter': ['has', 'Text'],
                'layout': {
                    'visibility': 'visible',
                    'text-field': ['get', 'Text'],
                    'text-font': ['Noto Sans Regular'],
                    'text-size': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        17, ['coalesce', ['*', ['get', 'text_height'], 6], 10],
                        21, ['coalesce', ['*', ['get', 'text_height'], 24], 14]
                    ],
                    'text-rotate': ['coalesce', ['*', ['get', 'text_angle'], -1], 0],
                    'text-rotation-alignment': 'map',
                    'text-anchor': ['coalesce', ['get', 'text_anchor'], 'center'],
                    'text-allow-overlap': true,
                    'text-ignore-placement': true
                },
                'paint': {
                    'text-color': ['coalesce', ['get', 'color'], '#000000'],
                    'text-halo-color': '#ffffff',
                    'text-halo-width': 2
                }
            }, beforeId);
        }
        reorderCrossPlanLayers();
    }

    let detailLayersFetched = {};
    let detailLayersResponseData = {};

    function fetchDetailLayers(file, autoCheckAll = false) {
        if (!file) return;

        const layersAccordion = document.getElementById('dxf-layers-accordion');
        if (layersAccordion) layersAccordion.style.display = 'block';

        if (detailLayersFetched[file]) {
            renderDetailLayers(file, autoCheckAll);
            fetchDxfGeoJson(file);
            return;
        }

        const spinner = document.getElementById('dxf-detail-layers-spinner');
        const list = document.getElementById('dxf-detail-layers-list');
        if (spinner) spinner.style.display = 'block';
        if (list) list.style.display = 'none';

        fetch(`/assets/trafficlights/intersections/${intersectionId}/dxf-layers/?file=${encodeURIComponent(file)}`)
            .then(response => response.json())
            .then(data => {
                detailLayersFetched[file] = data.layers || [];
                detailLayersResponseData[file] = data;
                renderDetailLayers(file, autoCheckAll);
                fetchDxfGeoJson(file);
                if (spinner) spinner.style.display = 'none';
                if (list) list.style.display = 'flex';
            })
            .catch(err => {
                console.error("Error fetching detail layers:", err);
                if (spinner) {
                    spinner.innerHTML = `<div class="text-danger" style="font-size: 10px;"><i class="bi bi-exclamation-triangle-fill"></i> Erreur de chargement.</div>`;
                }
            });
    }

    function renderDetailLayers(file, autoCheckAll = false) {
        const container = document.getElementById('dxf-detail-layers-list');
        if (!container) return;
        container.innerHTML = '';
        const layers = detailLayersFetched[file] || [];

        layers.forEach(layer => {
            const div = document.createElement('div');
            div.className = 'd-flex align-items-center justify-content-between py-1 px-1 rounded';
            div.style.fontSize = '11px';
            div.innerHTML = `
                <div class="d-flex align-items-center gap-1 text-truncate" style="max-width: 200px;">
                    <span class="color-indicator" style="width: 9px; height: 9px; border-radius: 2px; background-color: ${layer.color}; border: 1px solid rgba(0,0,0,0.15); flex-shrink: 0;"></span>
                    <label class="form-check-label text-truncate mb-0" for="dxf-detail-layer-${layer.name}" style="cursor: pointer; font-size: 11px; color: #334155;" title="${layer.name}">
                        ${layer.name}
                    </label>
                </div>
                <div class="form-check form-switch mb-0" style="padding-left: 1.8em;">
                    <input class="form-check-input dxf-vector-layer-toggle" type="checkbox" role="switch" 
                           id="dxf-detail-layer-${layer.name}" data-layer="${layer.name}" ${autoCheckAll ? 'checked' : ''} style="cursor: pointer; width: 28px; height: 14px;">
                </div>
            `;
            container.appendChild(div);

            const toggle = div.querySelector('.dxf-vector-layer-toggle');
            toggle.addEventListener('change', () => {
                applyDxfVectorFilters();
                updatePlansActiveState();
            });
        });

        const totalCountEl = document.getElementById('dxf-total-layers-count');
        if (totalCountEl) totalCountEl.textContent = layers.length;

        updatePlansActiveState();
    }

    function updatePlansActiveState() {
        let activeImages = 0;
        document.querySelectorAll('.image-plan-toggle').forEach(cb => {
            if (cb.checked) activeImages++;
        });

        let activeDxfLayers = 0;
        let totalDxfLayers = 0;
        document.querySelectorAll('.dxf-vector-layer-toggle').forEach(cb => {
            totalDxfLayers++;
            if (cb.checked) activeDxfLayers++;
        });

        const activeCount = activeImages + (activeDxfLayers > 0 ? 1 : 0);
        const hasAnyActive = activeImages > 0 || activeDxfLayers > 0;

        const countBadge = document.getElementById('plans-active-count-badge');
        if (countBadge) {
            if (hasAnyActive) {
                countBadge.style.display = 'inline-block';
                countBadge.textContent = `${activeCount} actif${activeCount > 1 ? 's' : ''}`;
            } else {
                countBadge.style.display = 'none';
            }
        }

        const dxfActiveCountEl = document.getElementById('dxf-active-layers-count');
        if (dxfActiveCountEl) dxfActiveCountEl.textContent = activeDxfLayers;

        const dxfTotalCountEl = document.getElementById('dxf-total-layers-count');
        if (dxfTotalCountEl) dxfTotalCountEl.textContent = totalDxfLayers;

        const switchDxfMaster = document.getElementById('switch-dxf-master');
        if (switchDxfMaster) {
            switchDxfMaster.checked = activeDxfLayers > 0;
        }

        const planDxfCard = document.getElementById('plan-dxf-card');
        if (planDxfCard) {
            planDxfCard.classList.toggle('active', activeDxfLayers > 0);
        }

        const footerActions = document.getElementById('plans-footer-actions');
        if (footerActions) {
            footerActions.style.display = hasAnyActive ? 'block' : 'none';
        }

        const dxfToggleAllBtn = document.getElementById('dxf-detail-toggle-all-layers');
        if (dxfToggleAllBtn && totalDxfLayers > 0) {
            dxfToggleAllBtn.textContent = (activeDxfLayers === totalDxfLayers) ? "Décocher tout" : "Tout cocher";
        }

        if (layerSwitcher && typeof layerSwitcher.setOverlayActive === 'function') {
            layerSwitcher.setOverlayActive(hasAnyActive);
        }
    }

    function renderCrossroadPlansSection(container, control) {
        const importDxfUrl = crossroadPlansConfig && crossroadPlansConfig.importDxfUrl;
        const hasImages = georeferencedDocuments && georeferencedDocuments.length > 0;
        const hasDxf = availableDxfFiles && availableDxfFiles.length > 0;

        // 1. Header with title & active badge
        const headerEl = document.createElement('div');
        headerEl.className = 'layer-switcher-subtitle';
        headerEl.innerHTML = `
            <span class="d-flex align-items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                Plans du carrefour
            </span>
            <span class="badge bg-light text-primary border" id="plans-active-count-badge" style="font-size: 9px; display: none;">0 actif</span>
        `;
        container.appendChild(headerEl);

        // Empty state if neither image nor DXF
        if (!hasImages && !hasDxf) {
            const emptyEl = document.createElement('div');
            emptyEl.className = 'text-center py-2 px-1';
            emptyEl.innerHTML = `
                <div class="text-muted" style="font-size: 11px; margin-bottom: 4px;">Aucun plan géoréférencé</div>
                ${importDxfUrl ? `<a href="${importDxfUrl}" class="layer-switcher-btn-action"><i class="bi bi-upload"></i> Importer un plan DXF</a>` : ''}
            `;
            container.appendChild(emptyEl);
            return;
        }

        // 2. Image Plans Sub-section
        if (hasImages) {
            const imgTitleEl = document.createElement('div');
            imgTitleEl.className = 'layer-switcher-subtitle text-muted';
            imgTitleEl.style.fontSize = '9px';
            imgTitleEl.innerHTML = `<span><i class="bi bi-file-earmark-image me-1"></i> Plans images (${georeferencedDocuments.length})</span>`;
            container.appendChild(imgTitleEl);

            georeferencedDocuments.forEach(doc => {
                const card = document.createElement('div');
                card.className = 'layer-switcher-card';
                card.id = `plan-img-card-${doc.id}`;
                card.innerHTML = `
                    <div class="d-flex align-items-center justify-content-between">
                        <label class="form-check-label d-flex align-items-center gap-1 mb-0" for="switch-georef-img-${doc.id}" style="cursor: pointer; font-size: 11.5px; font-weight: 600; color: #1e293b; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${doc.title}">
                            <i class="bi ${doc.is_dxf ? 'bi-file-earmark-code text-success' : 'bi-file-earmark-image text-primary'}" style="flex-shrink: 0; font-size: 12px;"></i>
                            <span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${doc.title}</span>
                        </label>
                        <div class="form-check form-switch mb-0" style="padding-left: 2em;">
                            <input class="form-check-input image-plan-toggle" type="checkbox" role="switch" id="switch-georef-img-${doc.id}" data-id="${doc.id}" style="cursor: pointer; width: 28px; height: 14px;">
                        </div>
                    </div>
                    <div class="layer-switcher-slider-row" id="opacity-container-${doc.id}" style="display: none;">
                        <label>Opacité</label>
                        <input type="range" class="form-range image-plan-opacity-slider" min="0" max="100" value="95" id="range-georef-img-opacity-${doc.id}" data-id="${doc.id}">
                        <span class="layer-switcher-slider-val opacity-val">95%</span>
                    </div>
                `;
                container.appendChild(card);

                const toggle = card.querySelector('.image-plan-toggle');
                const opacityRow = card.querySelector('.layer-switcher-slider-row');
                const slider = card.querySelector('.image-plan-opacity-slider');
                const opacityVal = card.querySelector('.opacity-val');

                toggle.addEventListener('change', () => {
                    const active = toggle.checked;
                    card.classList.toggle('active', active);
                    opacityRow.style.display = active ? 'flex' : 'none';
                    const opacity = parseFloat(slider.value) / 100.0;
                    showGeorefImage(doc, active, opacity);
                    updatePlansActiveState();
                });

                slider.addEventListener('input', () => {
                    const val = slider.value;
                    opacityVal.textContent = val + '%';
                    const opacity = parseFloat(val) / 100.0;
                    const lyrId = `georef-image-overlay-layer-${doc.id}`;
                    if (map.getLayer(lyrId)) {
                        map.setPaintProperty(lyrId, 'raster-opacity', opacity);
                    }
                });
            });
        }

        // 3. DXF Vector Plan Sub-section
        if (hasDxf) {
            const dxfTitleEl = document.createElement('div');
            dxfTitleEl.className = 'layer-switcher-subtitle text-muted mt-1';
            dxfTitleEl.style.fontSize = '9px';
            dxfTitleEl.innerHTML = `<span><i class="bi bi-file-earmark-code me-1"></i> Plan CAO (DXF)</span>`;
            container.appendChild(dxfTitleEl);

            const dxfCard = document.createElement('div');
            dxfCard.className = 'layer-switcher-card';
            dxfCard.id = 'plan-dxf-card';

            let dxfSelectHtml = '';
            if (availableDxfFiles.length === 1) {
                dxfSelectHtml = `
                    <input type="hidden" id="select-dxf-file" value="${availableDxfFiles[0]}">
                    <div class="d-flex align-items-center justify-content-between mb-1">
                        <span class="small font-weight-bold text-dark text-truncate" style="font-size: 11.5px; max-width: 190px;" title="${availableDxfFiles[0]}">
                            <i class="bi bi-file-earmark-check-fill text-success me-1"></i>${availableDxfFiles[0]}
                        </span>
                        <div class="form-check form-switch mb-0" style="padding-left: 2em;">
                            <input class="form-check-input" type="checkbox" role="switch" id="switch-dxf-master" style="cursor: pointer; width: 28px; height: 14px;" title="Afficher/masquer le plan CAO">
                        </div>
                    </div>
                `;
            } else {
                const selectedVal = window.dxfFile || availableDxfFiles[0] || '';
                dxfSelectHtml = `
                    <div class="d-flex align-items-center justify-content-between gap-1 mb-2">
                        <select id="select-dxf-file" class="form-select form-select-sm" style="font-size: 11px; padding: 2px 6px; flex-grow: 1;">
                            <option value="">-- Sélectionner un fichier DXF --</option>
                            ${availableDxfFiles.map(f => `<option value="${f}" ${f === selectedVal ? 'selected' : ''}>${f}</option>`).join('')}
                        </select>
                        <div class="form-check form-switch mb-0 ps-2">
                            <input class="form-check-input" type="checkbox" role="switch" id="switch-dxf-master" style="cursor: pointer; width: 28px; height: 14px;" title="Afficher/masquer le plan CAO">
                        </div>
                    </div>
                `;
            }

            dxfCard.innerHTML = `
                ${dxfSelectHtml}
                <div id="dxf-layers-accordion" style="display: none; margin-top: 4px;">
                    <div class="d-flex align-items-center justify-content-between py-1 px-1 bg-white border rounded mb-1" style="font-size: 10.5px;">
                        <button type="button" id="btn-toggle-dxf-accordion" class="btn btn-link p-0 text-decoration-none text-dark font-weight-bold d-flex align-items-center gap-1" style="font-size: 10.5px;">
                            <i class="bi bi-chevron-down" id="dxf-accordion-chevron" style="transition: transform 0.2s ease; font-size: 10px;"></i>
                            <span>Couches (<span id="dxf-active-layers-count">0</span>/<span id="dxf-total-layers-count">0</span>)</span>
                        </button>
                        <button type="button" id="dxf-detail-toggle-all-layers" class="btn btn-link p-0 text-decoration-none text-primary font-weight-semibold" style="font-size: 10px;">
                            Tout cocher
                        </button>
                    </div>
                    <div id="dxf-detail-layers-spinner" class="text-center py-2" style="display: none;">
                        <div class="spinner-border spinner-border-sm text-primary" style="width: 14px; height: 14px; border-width: 1.5px;" role="status"></div>
                        <span class="text-muted ms-1" style="font-size: 10px;">Chargement...</span>
                    </div>
                    <div id="dxf-detail-layers-list" style="max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 2px;">
                        <!-- Checkboxes populated dynamically -->
                    </div>
                </div>
            `;
            container.appendChild(dxfCard);

            // Wire up DXF select and master toggle
            const dxfSelectEl = dxfCard.querySelector('#select-dxf-file');
            const dxfMasterSwitch = dxfCard.querySelector('#switch-dxf-master');
            const accordionBtn = dxfCard.querySelector('#btn-toggle-dxf-accordion');
            const accordionChevron = dxfCard.querySelector('#dxf-accordion-chevron');
            const layersListEl = dxfCard.querySelector('#dxf-detail-layers-list');
            const layersAccordion = dxfCard.querySelector('#dxf-layers-accordion');
            const toggleAllBtn = dxfCard.querySelector('#dxf-detail-toggle-all-layers');

            let isAccordionExpanded = true;

            if (accordionBtn) {
                accordionBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    isAccordionExpanded = !isAccordionExpanded;
                    layersListEl.style.display = isAccordionExpanded ? 'flex' : 'none';
                    if (toggleAllBtn) toggleAllBtn.style.display = isAccordionExpanded ? 'inline' : 'none';
                    accordionChevron.style.transform = isAccordionExpanded ? 'rotate(0deg)' : 'rotate(-90deg)';
                });
            }

            if (dxfMasterSwitch) {
                dxfMasterSwitch.addEventListener('change', (e) => {
                    e.stopPropagation();
                    const isMasterOn = dxfMasterSwitch.checked;
                    dxfCard.classList.toggle('active', isMasterOn);
                    
                    const file = dxfSelectEl ? dxfSelectEl.value : '';
                    if (!file) {
                        dxfMasterSwitch.checked = false;
                        return;
                    }

                    if (!detailLayersFetched[file]) {
                        fetchDetailLayers(file, isMasterOn);
                    } else {
                        const checkboxes = dxfCard.querySelectorAll('.dxf-vector-layer-toggle');
                        checkboxes.forEach(cb => {
                            cb.checked = isMasterOn;
                        });
                        applyDxfVectorFilters();
                        updatePlansActiveState();
                    }

                    if (isMasterOn) {
                        layersAccordion.style.display = 'block';
                    }
                });
            }

            if (dxfSelectEl && dxfSelectEl.tagName === 'SELECT') {
                dxfSelectEl.addEventListener('change', (e) => {
                    e.stopPropagation();
                    const file = dxfSelectEl.value;
                    if (file) {
                        fetchDetailLayers(file, dxfMasterSwitch.checked);
                    } else {
                        layersAccordion.style.display = 'none';
                        if (dxfMasterSwitch) dxfMasterSwitch.checked = false;
                        applyDxfVectorFilters();
                        updatePlansActiveState();
                    }
                });
            }

            if (toggleAllBtn) {
                toggleAllBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const checkboxes = dxfCard.querySelectorAll('.dxf-vector-layer-toggle');
                    const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                    checkboxes.forEach(cb => {
                        cb.checked = !allChecked;
                    });
                    toggleAllBtn.textContent = allChecked ? "Tout cocher" : "Décocher tout";
                    applyDxfVectorFilters();
                    updatePlansActiveState();
                });
            }

            // If default or single DXF, prepare layers
            if (dxfSelectEl && dxfSelectEl.value) {
                fetchDetailLayers(dxfSelectEl.value, false);
            }
        }

        // 4. Footer Actions (Désactiver tous les plans)
        const footerEl = document.createElement('div');
        footerEl.id = 'plans-footer-actions';
        footerEl.style.display = 'none';
        footerEl.style.marginTop = '6px';
        footerEl.innerHTML = `
            <button type="button" id="btn-disable-all-plans" class="layer-switcher-btn-action btn-danger-light">
                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>
                Désactiver tous les plans
            </button>
        `;
        container.appendChild(footerEl);

        const btnDisableAll = footerEl.querySelector('#btn-disable-all-plans');
        btnDisableAll.addEventListener('click', (e) => {
            e.stopPropagation();
            // Turn off image plans
            document.querySelectorAll('.image-plan-toggle').forEach(cb => {
                if (cb.checked) {
                    cb.checked = false;
                    cb.dispatchEvent(new Event('change'));
                }
            });

            // Turn off DXF layers
            document.querySelectorAll('.dxf-vector-layer-toggle').forEach(cb => {
                cb.checked = false;
            });
            const switchMaster = document.getElementById('switch-dxf-master');
            if (switchMaster) switchMaster.checked = false;
            const dxfCard = document.getElementById('plan-dxf-card');
            if (dxfCard) dxfCard.classList.remove('active');

            applyDxfVectorFilters();
            updatePlansActiveState();
        });
    }

    // Register plans section into layerSwitcher
    if (layerSwitcher) {
        layerSwitcher.addCustomSection({
            id: 'crossroad-plans',
            render: (container, control) => {
                renderCrossroadPlansSection(container, control);
            }
        });
    }

    // GeoJSON Client-side Vector Layers Loading
    const geojsonFileInput = document.getElementById('geojson-file-input');
    if (geojsonFileInput) {
        geojsonFileInput.addEventListener('change', function() {
            const file = this.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(e) {
                try {
                    const geojson = JSON.parse(e.target.result);
                    const sourceId = `user-vector-source-${Date.now()}`;
                    
                    map.addSource(sourceId, { type: 'geojson', data: geojson });
                    map.addLayer({
                        id: `${sourceId}-lines`,
                        type: 'line',
                        source: sourceId,
                        filter: ['in', '$type', 'LineString', 'Polygon', 'MultiLineString', 'MultiPolygon'],
                        paint: { 'line-color': '#3b82f6', 'line-width': 2, 'line-opacity': 0.8 }
                    });
                    map.addLayer({
                        id: `${sourceId}-points`,
                        type: 'circle',
                        source: sourceId,
                        filter: ['==', '$type', 'Point'],
                        paint: {
                            'circle-radius': 5,
                            'circle-color': '#3b82f6',
                            'circle-stroke-width': 1,
                            'circle-stroke-color': '#ffffff'
                        }
                    });

                    const coordinates = [];
                    const extractCoords = (geom) => {
                        if (!geom) return;
                        if (geom.type === 'Point') coordinates.push(geom.coordinates);
                        else if (geom.type === 'LineString' || geom.type === 'MultiPoint') coordinates.push(...geom.coordinates);
                        else if (geom.type === 'Polygon' || geom.type === 'MultiLineString') geom.coordinates.forEach(c => coordinates.push(...c));
                    };

                    if (geojson.features) {
                        geojson.features.forEach(f => extractCoords(f.geometry));
                    } else {
                        extractCoords(geojson.geometry);
                    }

                    if (coordinates.length > 0) {
                        const bounds = coordinates.reduce((b, coord) => {
                            return [
                                [Math.min(b[0][0], coord[0]), Math.min(b[0][1], coord[1])],
                                [Math.max(b[1][0], coord[0]), Math.max(b[1][1], coord[1])]
                            ];
                        }, [[coordinates[0][0], coordinates[0][1]], [coordinates[0][0], coordinates[0][1]]]);
                        map.fitBounds(bounds, { padding: 40 });
                    }
                    alert(`{% translate "Couche vectorielle chargée avec succès !" %}`);
                } catch (err) {
                    alert("Fichier GeoJSON invalide: " + err.message);
                }
            };
            reader.readAsText(file);
        });
    }

    const form = document.getElementById('combined-import-form');
    if (form) {
        form.addEventListener('submit', function() {
            saveCablesToForm();
        });
    }
});
</script>
{% endif %}
{% endblock %}