{% load i18n interventions_tags mention_tags static %}
    {{ intervention.lon|json_script:"lon_value" }}
    {{ intervention.lat|json_script:"lat_value" }}
    {{ status_choices|json_script:"status_choices" }}
    {% if 'location' in allowed_update_fields %}
    <script>
        const locationSearchUrl = "{% url 'interventions:mobile_intervention_assets_locations' intervention.id %}";
        const addLocationUrl = "{% url 'interventions:add_intervention_location' intervention.id %}";
        const removeLocationUrlBase = "/interventions/{{ intervention.id }}/location/";
        const autocompleteStreetUrl = "{% url 'common:autocomplete_street' %}";
        const getNearestAddressUrl = "{% url 'common:get_nearest_address' %}";
        const updateInterventionUrl = "/interventions/{{ intervention.id }}/update/";
        const canEditLocation = true;
    </script>
    {% endif %}
    <script>
        const trafficlightintersectionsurl = "{% url 'assets:trafficlights_intersections' %}";
        const feature_lon = JSON.parse(document.getElementById("lon_value").textContent);
        const feature_lat = JSON.parse(document.getElementById("lat_value").textContent);
        const STATUS_CHOICES = JSON.parse(document.getElementById("status_choices").textContent);
        var geomGeoJSON = {% if geom_geojson %} {{ geom_geojson|safe }} {% else %} null {% endif %};
        const currentStatus = '{{ intervention.status }}';
        const recommendedNextStatus = '{{ recommended_next_status }}';
        const interventionId = '{{ intervention.id }}';
        const interventionThematicId = {% if intervention.thematic %}{{ intervention.thematic.id }}{% else %}null{% endif %};
        const interventionSubtypesData = {{ subtypes_data_json|default:"[]"|safe }};
        const allowed_transitions = {{ allowed_transitions|safe }};
        const canViewPrices = {{ can_view_prices|yesno:"true,false" }};
        var contractId = {% if contract_id %} {{ contract_id }} {% else %} null {% endif %};
        const can_control = {{ can_control|yesno:"true,false" }};
        const canManagePosts = {{ can_manage_posts|yesno:"true,false" }};
        const quoteRemainingAvailable = {{ quote_remaining_available|yesno:"true,false" }};
        const hasCoefficientPostsInitial = {{ has_coefficient_posts|yesno:"true,false" }};
        // Rôles de l'utilisateur pour filtrer les boutons de transition
        const userRoles = {{ user_roles|safe }};
        // Droit d'édition sur l'intervention (pour prise en charge par admin/manager/controller)
        const canEditIntervention = {{ can_edit_intervention|yesno:"true,false" }};
        // Droit de prise en charge : nécessite un contrat ET un accès au contrat
        const canTakeOver = {{ can_take_over|yesno:"true,false" }};
        // Period validation flags
        const periodValidationEnabled = {{ period_validation_enabled|yesno:"true,false" }};
        const hasPeriodQuantities = {{ has_period_quantities|yesno:"true,false" }};
        const periodNumber = {{ period_number|default:1 }};
        const periodIsFinal = {{ period_is_final|yesno:"true,false" }};
        const interventionThematicCode = '{{ intervention.thematic.code|default:"" }}';
        const interventionAssetCategoryId = {{ intervention.asset_category_id|default:"null" }};
        const showLinkedSuggestion = {% if intervention.status in 'in_preparation,to_be_approved' %}true{% else %}false{% endif %};
        const photosRequired = {{ photos_required|yesno:'true,false' }};
        const photosRequiredSince = "{{ photos_required_since }}";
        const contractWarnNoPrestationOnProcessed = {{ contract_warn_no_prestation_on_processed|yesno:"true,false" }};
        const hasPrestationsEncoded = {{ has_prestations_encoded|yesno:"true,false" }};
        var contractPostsCount = {{ contract_posts_count|default:0 }};
    </script>

    <script>
        // Force checkbox states from server to prevent browser autocomplete/cache override
        document.addEventListener('DOMContentLoaded', function() {
            const toggleEl = document.getElementById('togglePeriodValidation');
            if (toggleEl) {
                toggleEl.checked = periodValidationEnabled;
            }
            const lastPeriodEl = document.getElementById('setLastPeriodCheckbox');
            if (lastPeriodEl) {
                lastPeriodEl.checked = periodIsFinal;
            }
        });
    </script>

    <script>
        // Operations collapse/expand functionality
        document.addEventListener('DOMContentLoaded', function() {
            const expandAllBtn = document.getElementById('expandAllOperations');
            const collapseAllBtn = document.getElementById('collapseAllOperations');
            const operationsCard = document.getElementById('operationsCard');
            
            if (!operationsCard) return;
            
            // Update collapse icon state when collapse events occur
            operationsCard.querySelectorAll('.operation-collapse-content').forEach(collapseEl => {
                collapseEl.addEventListener('show.bs.collapse', function() {
                    const header = document.querySelector(`[data-bs-target="#${this.id}"]`);
                    if (header) header.classList.remove('collapsed');
                });
                collapseEl.addEventListener('hide.bs.collapse', function() {
                    const header = document.querySelector(`[data-bs-target="#${this.id}"]`);
                    if (header) header.classList.add('collapsed');
                });
            });
            
            // Expand all operations
            if (expandAllBtn) {
                expandAllBtn.addEventListener('click', function() {
                    operationsCard.querySelectorAll('.operation-collapse-content').forEach(collapseEl => {
                        const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl, {toggle: false});
                        bsCollapse.show();
                    });
                });
            }
            
            // Collapse all operations
            if (collapseAllBtn) {
                collapseAllBtn.addEventListener('click', function() {
                    operationsCard.querySelectorAll('.operation-collapse-content').forEach(collapseEl => {
                        const bsCollapse = bootstrap.Collapse.getOrCreateInstance(collapseEl, {toggle: false});
                        bsCollapse.hide();
                    });
                });
            }
        });
    </script>

    <!-- Select2 4.1.0 (local) -->
    <script src="{% static 'common/select2.min.js' %}"></script>
    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static 'interventions/detail/intervention_occupations.js' %}"></script>
    <script src="{% static 'interventions/status_colors.js' %}"></script>
    <script src="{% static 'common/layer-switcher-control.js' %}"></script>
    <script src="{% static 'interventions/detail/utils.js' %}"></script>
    <script src="{% static 'interventions/detail/map.js' %}"></script>
    <script src="{% static 'interventions/detail/documents.js' %}"></script>
    <script src="{% static 'interventions/detail/posts.js' %}"></script>
    <script src="{% static 'interventions/detail/fields.js' %}"></script>
    <script src="{% static 'interventions/detail/timeline_events.js' %}"></script>
    <script src="{% static 'interventions/detail/layout.js' %}"></script>
    <script src="{% static 'interventions/detail/intervention_posts_editor.js' %}"></script>
    <script src="{% static 'interventions/timeline.js' %}"></script>
    <script src="{% static 'interventions/detail/cms_edit_mode.js' %}"></script>
    <script src="{% static 'interventions/detail/cms_notes.js' %}"></script>
    {% if 'location' in allowed_update_fields %}
    <script src="{% static 'interventions/detail/cms_location_edit.js' %}"></script>
    {% endif %}
    <script src="{% static 'interventions/detail/operation_comments.js' %}"></script>
    <script src="{% static 'interventions/detail/desktop_operations_editor.js' %}"></script>
    <script src="{% static 'assets/asset_add_modal.js' %}"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const summaryModal = document.getElementById('locationHistorySummaryModal');
            const summaryModalBody = document.getElementById('locationHistorySummaryModalBody');
            const summaryModalLabel = document.getElementById('locationHistorySummaryModalLabel');

            if (!summaryModal || !summaryModalBody) {
                return;
            }

            summaryModal.addEventListener('show.bs.modal', function(event) {
                const trigger = event.relatedTarget;
                const summaryUrl = trigger?.getAttribute('data-summary-url');
                const summaryTitle = trigger?.getAttribute('data-summary-title');

                if (summaryModalLabel && summaryTitle) {
                    summaryModalLabel.textContent = `${summaryModalLabel.dataset.baseTitle || summaryModalLabel.textContent} ${summaryTitle}`.trim();
                }

                summaryModalBody.innerHTML = `
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{% translate "Chargement..." %}</span>
                        </div>
                    </div>
                `;

                if (!summaryUrl) {
                    summaryModalBody.innerHTML = `<div class="text-muted">{% translate "Impossible de charger le résumé." %}</div>`;
                    return;
                }

                fetch(summaryUrl, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Request failed');
                    }
                    return response.text();
                })
                .then(html => {
                    summaryModalBody.innerHTML = html;
                    initializeSummaryCarousel(summaryModalBody);
                })
                .catch(() => {
                    summaryModalBody.innerHTML = `<div class="text-muted">{% translate "Impossible de charger le résumé." %}</div>`;
                });
            });


        function initializeSummaryCarousel(container) {
            const carouselEl = container.querySelector('#summaryDocumentCarousel');
            if (!carouselEl) {
                return;
            }

            const thumbBtns = Array.from(container.querySelectorAll('.summary-thumbnail-btn'));
            const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));

            const setActiveThumbnail = (index) => {
                thumbBtns.forEach(btn => btn.classList.remove('active'));
                if (thumbBtns[index]) {
                    thumbBtns[index].classList.add('active');
                }
            };

            const activeItem = carouselEl.querySelector('.carousel-item.active');
            const initialIndex = items.indexOf(activeItem);
            setActiveThumbnail(initialIndex >= 0 ? initialIndex : 0);

            const bsCarousel = bootstrap.Carousel.getOrCreateInstance(carouselEl, { ride: false });

            carouselEl.addEventListener('slid.bs.carousel', (event) => {
                setActiveThumbnail(event.to);
            });

            thumbBtns.forEach((btn, index) => {
                btn.addEventListener('click', () => {
                    setActiveThumbnail(index);
                    bsCarousel.to(index);
                });
            });
        }
            summaryModal.addEventListener('hidden.bs.modal', function() {
                if (summaryModalLabel && summaryModalLabel.dataset.baseTitle) {
                    summaryModalLabel.textContent = summaryModalLabel.dataset.baseTitle;
                }
            });
        });

        // Function to show Bootstrap message like Django messages
        function showBootstrapMessage(message, type = 'info') {
            // type can be: 'success', 'info', 'warning', 'danger'
            const alertClass = type === 'danger' ? 'alert-danger' : 
                               type === 'warning' ? 'alert-warning' : 
                               type === 'success' ? 'alert-success' : 'alert-info';
            
            const messageHtml = `
                <div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="position: fixed; top: 70px; right: 20px; z-index: 10050; min-width: 300px; max-width: 500px;">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', messageHtml);
            
            // Auto-dismiss after 5 seconds
            setTimeout(() => {
                const alerts = document.querySelectorAll('.alert');
                alerts.forEach(alert => {
                    if (alert.textContent.includes(message.substring(0, 20))) {
                        alert.remove();
                    }
                });
            }, 5000);
        }

        // Check for newly linked assets and show template selection modal
        document.addEventListener('DOMContentLoaded', function() {
            checkForNewlyLinkedAssets();
        });

        async function checkForNewlyLinkedAssets() {
            try {
                const response = await fetch(`/interventions/{{ intervention.id }}/get-newly-linked-assets/`, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                if (!response.ok) {
                    return;
                }

                const data = await response.json();
                
                if (data.success && data.has_new_assets && data.assets && data.assets.length > 0) {
                    showLinkedAssetsTemplateModal(data.assets, data.templates);
                }
            } catch (error) {
                console.error('Error checking for newly linked assets:', error);
            }
        }

        function showLinkedAssetsTemplateModal(assets, templates) {
            if (!templates || templates.length === 0) {
                showBootstrapMessage("{% trans "Aucun template d'opérations disponible pour cette intervention" %}", 'warning');
                return;
            }

            // Create table header with templates as columns
            const tableHeaderCells = templates.map(template => `
                <th class="text-center" style="min-width: 120px;">
                    <div class="mb-1">${template.name}</div>
                    ${template.description ? `<small class="text-muted d-block">${template.description}</small>` : ''}
                    <button type="button" class="btn btn-sm btn-outline-primary mt-1 select-column-btn" data-template-id="${template.id}">
                        <i class="bi bi-check-square"></i> {% trans "Tout" %}
                    </button>
                </th>
            `).join('');

            // Create table rows with assets
            const tableRows = assets.map(asset => {
                const templateCells = templates.map(template => `
                    <td class="text-center">
                        <input type="checkbox" class="form-check-input template-checkbox" 
                               data-asset-ct-id="${asset.content_type_id}" 
                               data-asset-obj-id="${asset.object_id}" 
                               data-template-id="${template.id}">
                    </td>
                `).join('');

                return `
                    <tr>
                        <td>
                            <strong>${asset.display}</strong>
                            <div class="mt-1">
                                <button type="button" class="btn btn-sm btn-outline-primary select-row-btn" 
                                        data-asset-ct-id="${asset.content_type_id}" 
                                        data-asset-obj-id="${asset.object_id}">
                                    <i class="bi bi-check-square"></i> {% trans "Tout" %}
                                </button>
                                <button type="button" class="btn btn-sm btn-outline-secondary deselect-row-btn" 
                                        data-asset-ct-id="${asset.content_type_id}" 
                                        data-asset-obj-id="${asset.object_id}">
                                    <i class="bi bi-square"></i> {% trans "Aucun" %}
                                </button>
                            </div>
                        </td>
                        ${templateCells}
                    </tr>
                `;
            }).join('');

            // Create modal HTML with table
            const modalHTML = `
                <div class="modal fade" id="linkedAssetsTemplateModal" tabindex="-1" aria-labelledby="linkedAssetsTemplateModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="linkedAssetsTemplateModalLabel">
                                    {% trans "Sélection des templates d'opérations" %}
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <p class="mb-3">
                                    {% trans "Vous avez lié" %} <strong>${assets.length}</strong> 
                                    ${assets.length > 1 ? "{% trans 'nouveaux équipements' %}" : "{% trans 'nouvel équipement' %}"} 
                                    {% trans "à cette intervention. Sélectionnez les templates d'opérations à appliquer." %}
                                </p>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover" id="assetsTemplatesTable">
                                        <thead class="table-light">
                                            <tr>
                                                <th>{% trans "Équipement" %}</th>
                                                ${tableHeaderCells}
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${tableRows}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Annuler" %}</button>
                                <button type="button" class="btn btn-primary" id="createLinkedAssetsOperations">
                                    {% trans "Créer les opérations" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Remove existing modal if any
            const existingModal = document.getElementById('linkedAssetsTemplateModal');
            if (existingModal) {
                existingModal.remove();
            }

            // Add modal to body
            document.body.insertAdjacentHTML('beforeend', modalHTML);

            // Add event listeners for column selection (select all assets for a template)
            document.querySelectorAll('.select-column-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const templateId = this.dataset.templateId;
                    document.querySelectorAll(`input[data-template-id="${templateId}"]`).forEach(cb => {
                        cb.checked = true;
                    });
                });
            });

            // Add event listeners for row selection (select all templates for an asset)
            document.querySelectorAll('.select-row-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const ctId = this.dataset.assetCtId;
                    const objId = this.dataset.assetObjId;
                    document.querySelectorAll(`input[data-asset-ct-id="${ctId}"][data-asset-obj-id="${objId}"]`).forEach(cb => {
                        cb.checked = true;
                    });
                });
            });

            // Add event listeners for row deselection
            document.querySelectorAll('.deselect-row-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const ctId = this.dataset.assetCtId;
                    const objId = this.dataset.assetObjId;
                    document.querySelectorAll(`input[data-asset-ct-id="${ctId}"][data-asset-obj-id="${objId}"]`).forEach(cb => {
                        cb.checked = false;
                    });
                });
            });

            // Show modal
            const modal = new bootstrap.Modal(document.getElementById('linkedAssetsTemplateModal'));
            modal.show();

            // Handle create button
            document.getElementById('createLinkedAssetsOperations').addEventListener('click', async function() {
                await createOperationsForLinkedAssetsTable(assets, templates, modal);
            });
        }

        async function createOperationsForLinkedAssetsTable(assets, templates, modal) {
            const assetsWithTemplates = [];

            // Collect selected templates for each asset from the table
            assets.forEach(asset => {
                const templateIds = [];
                templates.forEach(template => {
                    const checkbox = document.querySelector(
                        `input[data-asset-ct-id="${asset.content_type_id}"][data-asset-obj-id="${asset.object_id}"][data-template-id="${template.id}"]`
                    );
                    if (checkbox && checkbox.checked) {
                        templateIds.push(template.id);
                    }
                });

                if (templateIds.length > 0) {
                    assetsWithTemplates.push({
                        content_type_id: asset.content_type_id,
                        object_id: asset.object_id,
                        template_ids: templateIds
                    });
                }
            });

            if (assetsWithTemplates.length === 0) {
                showBootstrapMessage("{% trans 'Veuillez sélectionner au moins un template pour au moins un équipement' %}", 'warning');
                return;
            }

            try {
                const response = await fetch(`/interventions/{{ intervention.id }}/create-operations-for-linked-assets/`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({
                        assets: assetsWithTemplates
                    })
                });

                const data = await response.json();

                if (data.success) {
                    modal.hide();
                    showBootstrapMessage(data.message, 'success');
                    // Reload page after a brief delay to show the message
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showBootstrapMessage("{% trans 'Erreur' %}: " + (data.error || "{% trans 'Erreur inconnue' %}"), 'danger');
                }
            } catch (error) {
                console.error('Error creating operations:', error);
                alert("{% trans 'Erreur lors de la création des opérations' %}");
            }
        }
    </script>

{% if desktop_assets_enabled and desktop_assets_config %}
    {{ desktop_assets_config|json_script:"mobile-assets-config" }}
    <script>
        window.mobileAssetsI18n = {
            noResults: "{{ _('Aucun équipement ne correspond aux filtres sélectionnés.')|escapejs }}",
            requiresCategory: "{{ _('Veuillez sélectionner une catégorie pour lancer une recherche.')|escapejs }}",
            alreadyLinked: "{{ _('Déjà lié')|escapejs }}",
            selectionSingular: "{{ _('équipement sélectionné')|escapejs }}",
            selectionPlural: "{{ _('équipements sélectionnés')|escapejs }}",
            resultSingular: "{{ _('résultat')|escapejs }}",
            resultPlural: "{{ _('résultats')|escapejs }}",
            applyIdle: "{{ _('Ajouter les équipements')|escapejs }}",
            applyBusy: "{{ _('Synchronisation en cours…')|escapejs }}",
            errorFilters: "{{ _('Impossible de charger les filtres disponibles.')|escapejs }}",
            errorSearch: "{{ _('Impossible de charger les équipements.')|escapejs }}",
            errorSync: "{{ _('Impossible de synchroniser les équipements sélectionnés.')|escapejs }}",
            limitMessage: "{{ _('Résultats limités à {count} équipements.')|escapejs }}",
            unsavedWarning: "{{ _('Vous avez des sélections non appliquées. Quitter malgré tout ?')|escapejs }}",
            keepValuesWarning: "{{ _('Certaines opérations n\'ont pas été supprimées car des valeurs ont déjà été encodées.')|escapejs }}",
            modelPlaceholder: "{{ _('Sélectionnez un modèle')|escapejs }}",
            removeConfirm: "{{ _('Supprimer le lien avec {label} ?')|escapejs }}",
            removeError: "{{ _('Impossible de supprimer ce lien.')|escapejs }}",
            removeBusy: "{{ _('Suppression en cours…')|escapejs }}",
            removeIdle: "{{ _('Supprimer')|escapejs }}",
            noLocationChips: "{{ _('Aucune localisation — sélectionnez une catégorie pour rechercher.')|escapejs }}",
            locationNoResults: "{{ _('Aucune localisation trouvée.')|escapejs }}",
            locationRemove: "{{ _('Retirer cette localisation du filtre')|escapejs }}"
        };
    </script>
    <script src="{% static 'interventions/mobile/mobile_assets.js' %}"></script>
{% endif %}

<script>
function handleFollowUpClick(event, interventionId, value, radioId, containerId) {
    event.preventDefault();
    const container = document.getElementById(containerId);
    const radio = document.getElementById(radioId);
    const allRadios = container.querySelectorAll('input[type=radio]');
    if (radio.checked) {
        radio.checked = false;
        setFollowUpPerformed(interventionId, null, containerId);
    } else {
        allRadios.forEach(r => r.checked = false);
        radio.checked = true;
        setFollowUpPerformed(interventionId, value, containerId);
    }
}

function setFollowUpPerformed(interventionId, value, containerId) {
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
        || document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] || '';
    const radios = document.querySelectorAll('#' + containerId + ' input[type=radio]');
    radios.forEach(r => r.disabled = true);
    fetch(`/interventions/${interventionId}/toggle-follow-up-performed/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ value: value }),
    })
    .then(r => r.json())
    .then(data => {
        radios.forEach(r => r.disabled = false);
        if (!data.success) {
            radios.forEach(r => r.checked = false);
            alert(data.message || '{% translate "Erreur lors de la mise à jour." %}');
        }
    })
    .catch(() => {
        radios.forEach(r => r.disabled = false);
        radios.forEach(r => r.checked = false);
        alert('{% translate "Erreur réseau." %}');
    });
}

function toggleInterventionChecked(interventionId, checkboxEl) {
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
        || document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] || '';
    checkboxEl.disabled = true;
    fetch(`/interventions/${interventionId}/toggle-checked/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        },
    })
    .then(r => r.json())
    .then(data => {
        checkboxEl.disabled = false;
        if (data.success) {
            const isChecked = data.is_checked;
            checkboxEl.checked = isChecked;
            const badge = document.getElementById('is-checked-badge');
            const text  = document.getElementById('is-checked-text');
            if (badge) {
                badge.classList.toggle('bg-success', isChecked);
                badge.classList.toggle('bg-secondary', !isChecked);
                badge.title = isChecked
                    ? '{% translate "Annuler la vérification" %}'
                    : '{% translate "Marquer comme vérifiée" %}';
            }
            if (text) {
                text.textContent = isChecked
                    ? '{% translate "Vérifiée" %}'
                    : '{% translate "Non vérifiée" %}';
            }
        } else {
            checkboxEl.checked = !checkboxEl.checked;
            alert(data.message || '{% translate "Erreur lors de la mise à jour." %}');
        }
    })
    .catch(() => {
        checkboxEl.disabled = false;
        checkboxEl.checked = !checkboxEl.checked;
        alert('{% translate "Erreur réseau." %}');
    });
}

function updateMaterialUI(data) {
    const usedCountEls = document.querySelectorAll('#desktop-material-used-count, #mobile-material-used-count');
    const totalCountEls = document.querySelectorAll('#desktop-material-total-count, #mobile-material-total-count');
    usedCountEls.forEach(el => el.textContent = data.used_count);
    totalCountEls.forEach(el => el.textContent = data.total_count);

    const toggleAllBtnTexts = document.querySelectorAll('#btn-desktop-toggle-all-text, #btn-mobile-toggle-all-text');
    toggleAllBtnTexts.forEach(el => {
        el.textContent = data.all_used ? "{% translate 'Tout décocher' %}" : "{% translate 'Tout cocher' %}";
    });

    if (data.order_id) {
        const orderAllUsed = data.order_all_used !== undefined ? data.order_all_used : data.all_used;
        const orderBtnTexts = document.querySelectorAll(`#btn-order-toggle-all-text-${data.order_id}, #btn-mobile-order-toggle-all-text-${data.order_id}`);
        orderBtnTexts.forEach(el => {
            el.textContent = orderAllUsed ? "{% translate 'Tout décocher' %}" : "{% translate 'Tout cocher' %}";
        });
        if (data.order_used_count !== undefined) {
            const orderUsedCountEls = document.querySelectorAll(`#order-used-count-${data.order_id}, #mobile-order-used-count-${data.order_id}`);
            orderUsedCountEls.forEach(el => el.textContent = data.order_used_count);
        }
    }

    if (data.item_id !== undefined && data.is_other !== undefined) {
        const prefix = data.is_other ? 'other-' : 'item-';
        const badges = document.querySelectorAll(`#material-badge-${prefix}${data.item_id}, #mobile-material-item-badge-${prefix}${data.item_id}`);
        badges.forEach(b => {
            if (data.is_used) {
                b.className = 'badge bg-success text-white material-status-badge';
                b.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Utilisé" %}';
            } else {
                b.className = 'badge bg-secondary-subtle text-muted material-status-badge';
                b.innerHTML = '<i class="bi bi-dash-circle me-1"></i>{% translate "Non utilisé" %}';
            }
        });
    }
}

function toggleMaterialItemUsed(interventionId, itemId, isOther, checkboxEl) {
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
        || document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] || '';
    
    checkboxEl.disabled = true;
    const formData = new FormData();
    formData.append('is_other', isOther ? 'true' : 'false');
    formData.append('is_used', checkboxEl.checked ? 'true' : 'false');

    fetch(`/interventions/${interventionId}/material/${itemId}/toggle-used/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: formData,
    })
    .then(r => r.json())
    .then(data => {
        checkboxEl.disabled = false;
        if (data.success) {
            checkboxEl.checked = data.is_used;
            const otherFlag = isOther ? 'true' : 'false';
            document.querySelectorAll(`.material-used-checkbox[data-item-id="${itemId}"][data-is-other="${otherFlag}"]`).forEach(cb => {
                cb.checked = data.is_used;
            });
            updateMaterialUI(data);
        } else {
            checkboxEl.checked = !checkboxEl.checked;
            alert(data.error || "{% translate 'Erreur lors de la mise à jour.' %}");
        }
    })
    .catch(() => {
        checkboxEl.disabled = false;
        checkboxEl.checked = !checkboxEl.checked;
        alert("{% translate 'Erreur réseau.' %}");
    });
}

function toggleAllMaterialUsed(interventionId, orderId) {
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
        || document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] || '';
    
    const buttons = document.querySelectorAll('#btn-desktop-toggle-all-material, #btn-mobile-toggle-all-material, .btn-order-toggle-all');
    buttons.forEach(b => b.disabled = true);

    const formData = new FormData();
    if (orderId) {
        formData.append('order_id', orderId);
    }

    fetch(`/interventions/${interventionId}/material/toggle-all-used/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        },
        body: formData,
    })
    .then(r => r.json())
    .then(data => {
        buttons.forEach(b => b.disabled = false);
        if (data.success) {
            const isAllUsed = data.all_used;
            const selector = orderId 
                ? `.material-used-checkbox[data-order-id="${orderId}"]` 
                : '.material-used-checkbox';
            
            document.querySelectorAll(selector).forEach(cb => {
                cb.checked = isAllUsed;
                const itemId = cb.dataset.itemId;
                const isOther = cb.dataset.isOther === 'true';
                const prefix = isOther ? 'other-' : 'item-';
                const badges = document.querySelectorAll(`#material-badge-${prefix}${itemId}, #mobile-material-item-badge-${prefix}${itemId}`);
                badges.forEach(b => {
                    if (isAllUsed) {
                        b.className = 'badge bg-success text-white material-status-badge';
                        b.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Utilisé" %}';
                    } else {
                        b.className = 'badge bg-secondary-subtle text-muted material-status-badge';
                        b.innerHTML = '<i class="bi bi-dash-circle me-1"></i>{% translate "Non utilisé" %}';
                    }
                });
            });

            if (orderId) {
                const orderBtnTexts = document.querySelectorAll(`#btn-order-toggle-all-text-${orderId}, #btn-mobile-order-toggle-all-text-${orderId}`);
                orderBtnTexts.forEach(el => {
                    el.textContent = isAllUsed ? "{% translate 'Tout décocher' %}" : "{% translate 'Tout cocher' %}";
                });
                if (data.order_used_count !== undefined) {
                    const orderUsedCountEls = document.querySelectorAll(`#order-used-count-${orderId}, #mobile-order-used-count-${orderId}`);
                    orderUsedCountEls.forEach(el => el.textContent = data.order_used_count);
                }
            } else {
                document.querySelectorAll('.btn-order-toggle-all-text').forEach(el => {
                    el.textContent = isAllUsed ? "{% translate 'Tout décocher' %}" : "{% translate 'Tout cocher' %}";
                });
                document.querySelectorAll('.btn-order-toggle-all').forEach(btn => {
                    const id = btn.id.replace('btn-order-toggle-all-', '').replace('btn-mobile-order-toggle-all-', '');
                    const totalCheckboxes = document.querySelectorAll(`.material-used-checkbox[data-order-id="${id}"]`).length;
                    const orderUsedCountEls = document.querySelectorAll(`#order-used-count-${id}, #mobile-order-used-count-${id}`);
                    orderUsedCountEls.forEach(el => el.textContent = isAllUsed ? totalCheckboxes : 0);
                });
            }

            updateMaterialUI({
                used_count: data.used_count,
                total_count: data.total_count,
                all_used: data.intervention_all_used !== undefined ? data.intervention_all_used : data.all_used
            });
        } else {
            alert(data.error || "{% translate 'Erreur lors de la mise à jour.' %}");
        }
    })
    .catch(() => {
        buttons.forEach(b => b.disabled = false);
        alert("{% translate 'Erreur réseau.' %}");
    });
}
</script>

<script>
// =====================================================================
// Section Navigation Panel
// =====================================================================
const SECTION_NAV_ITEMS = [
    { id: 'section-recommandations', icon: 'bi-exclamation-circle-fill', label: "{% translate 'Recommandations' %}" },
    { id: 'section-notes',           icon: 'bi-journal-text',            label: "{% translate 'Notes et documents' %}" },
    { id: 'operationsCard',          icon: 'bi-list-task',               label: "{% translate 'Opérations' %}" },
    { id: 'section-stock',           icon: 'bi-box-seam',                label: "{% translate 'Stock' %}" },
    { id: 'section-controles',       icon: 'bi-clipboard2-check',        label: "{% translate 'Contrôles / Rapports' %}" },
    { id: 'section-assets',          icon: 'bi-tools',                   label: "{% translate 'Assets' %}" },
    { id: 'section-origine',         icon: 'bi-geo-alt',                 label: "Origine" },
    { id: 'section-observations',   icon: 'bi-eye',                     label: "{% translate 'Observations liées' %}" },
    { id: 'section-occupations',     icon: 'bi-calendar3',               label: "{% translate 'Occupations' %}" },
    { id: 'posts-section',           icon: 'bi-receipt',                 label: "{% translate 'Prestations' %}" },
    { id: 'section-liens',           icon: 'bi-link-45deg',              label: "{% translate 'Interventions liées' %}" },
    { id: 'section-historique',      icon: 'bi-clock-history',           label: "{% translate 'Historique (3 mois)' %}" },
    { id: 'section-chronologie',     icon: 'bi-clock',                   label: "{% translate 'Chronologie' %}" },
];

function toggleSectionNavPanel() {
    const panel = document.getElementById('section-nav-panel');
    if (!panel) return;
    const opening = !panel.classList.contains('open');
    panel.classList.toggle('open', opening);
    if (opening) buildSectionNavLinks();
}

// Ferme le panneau sur clic en dehors, sans bloquer le scroll
document.addEventListener('click', function(e) {
    const panel = document.getElementById('section-nav-panel');
    if (!panel || !panel.classList.contains('open')) return;
    // Ignorer les clics à l'intérieur du panneau ou sur les boutons toggle
    if (panel.contains(e.target)) return;
    if (e.target.closest('[onclick*="toggleSectionNavPanel"]')) return;
    panel.classList.remove('open');
});

function buildSectionNavLinks() {
    const container = document.getElementById('section-nav-links');
    if (!container) return;
    container.innerHTML = '';
    SECTION_NAV_ITEMS.forEach(item => {
        const el = document.getElementById(item.id);
        // Skip sections absent from the DOM or explicitly hidden server-side
        if (!el || el.classList.contains('d-none')) return;
        const btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'nav-section-link';
        btn.dataset.sectionId = item.id;
        btn.innerHTML = `<i class="bi ${item.icon}"></i><span>${item.label}</span>`;
        btn.addEventListener('click', () => {
            const colLeft = document.getElementById('col-left');
            if (!colLeft) return;
            const stickyHeader = colLeft.querySelector('.sticky-top');
            const stickyHeight = stickyHeader ? stickyHeader.getBoundingClientRect().height : 0;
            const colRect = colLeft.getBoundingClientRect();
            const elRect  = el.getBoundingClientRect();
            const newScrollTop = colLeft.scrollTop + (elRect.top - colRect.top) - stickyHeight - 8;
            colLeft.scrollTo({ top: newScrollTop, behavior: 'smooth' });
        });
        container.appendChild(btn);
    });
}

// Scroll-spy: highlight the active section as the user scrolls col-left
(function initSectionScrollSpy() {
    const colLeft = document.getElementById('col-left');
    if (!colLeft) return;
    colLeft.addEventListener('scroll', function () {
        const panel = document.getElementById('section-nav-panel');
        if (!panel || !panel.classList.contains('open')) return;
        const stickyHeader = colLeft.querySelector('.sticky-top');
        const stickyHeight = stickyHeader ? stickyHeader.getBoundingClientRect().height : 0;
        const colRect  = colLeft.getBoundingClientRect();
        const threshold = colRect.top + stickyHeight + 8;
        let activeId = null;
        SECTION_NAV_ITEMS.forEach(item => {
            const el = document.getElementById(item.id);
            if (!el || el.classList.contains('d-none')) return;
            if (el.getBoundingClientRect().top <= threshold) {
                activeId = item.id;
            }
        });
        panel.querySelectorAll('.nav-section-link').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.sectionId === activeId);
        });
    });
})();
</script>

<script>
// =====================================================================
// Discussion – widget flottant + @mention autocomplete + file preview
// =====================================================================

function toggleDiscussionPanel() {
    const panel = document.getElementById('discussion-panel');
    if (!panel) return;
    const opening = !panel.classList.contains('open');
    panel.classList.toggle('open', opening);
    if (opening) {
        // Auto-scroll vers le bas à l'ouverture
        const thread = document.getElementById('discussion-thread');
        if (thread) setTimeout(() => { thread.scrollTop = thread.scrollHeight; }, 50);
        // Masquer la pastille après ouverture
        const badge = document.getElementById('discussion-fab-badge');
        if (badge) badge.style.display = 'none';
    }
}

// Fermer le panel en cliquant en dehors
document.addEventListener('click', function (e) {
    const panel = document.getElementById('discussion-panel');
    const fab   = document.getElementById('discussion-fab');
    if (!panel || !panel.classList.contains('open')) return;
    if (panel.contains(e.target) || (fab && fab.contains(e.target))) return;
    panel.classList.remove('open');
});

// Ouvrir automatiquement si l'URL contient #discussion
if (window.location.hash === '#discussion') {
    toggleDiscussionPanel();
}

document.addEventListener('DOMContentLoaded', function () {

    // ---- Aperçu des pièces jointes avant envoi ----
    const fileInput   = document.getElementById('intervention-msg-file-input');
    const filePreview = document.getElementById('intervention-msg-file-preview');

    if (fileInput && filePreview) {
        fileInput.addEventListener('change', renderPreview);

        function renderPreview() {
            filePreview.innerHTML = '';
            const files = fileInput.files;
            if (!files || files.length === 0) {
                filePreview.style.display = 'none';
                return;
            }
            filePreview.style.display = 'flex';

            Array.from(files).forEach((file, idx) => {
                const isImage = file.type.startsWith('image/');
                const wrapper = document.createElement('div');
                wrapper.className = 'position-relative';
                wrapper.style.cssText = 'display:inline-block;';

                if (isImage) {
                    const img = document.createElement('img');
                    img.style.cssText = 'width:64px;height:64px;object-fit:cover;border-radius:6px;border:1px solid #dee2e6;';
                    img.alt = file.name;
                    const reader = new FileReader();
                    reader.onload = e => { img.src = e.target.result; };
                    reader.readAsDataURL(file);
                    wrapper.appendChild(img);
                } else {
                    const chip = document.createElement('div');
                    chip.className = 'd-flex align-items-center gap-1 bg-light border rounded px-2 py-1 small';
                    chip.style.cssText = 'max-width:140px;';
                    chip.innerHTML = `<i class="bi bi-paperclip text-secondary"></i>
                        <span class="text-truncate" title="${file.name}">${file.name}</span>`;
                    wrapper.appendChild(chip);
                }

                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'btn btn-danger btn-sm position-absolute top-0 end-0 p-0 d-flex align-items-center justify-content-center';
                btn.style.cssText = 'width:18px;height:18px;font-size:10px;border-radius:50%;transform:translate(40%,-40%);line-height:1;';
                btn.innerHTML = '&times;';
                btn.title = '{% translate "Retirer" %}';
                btn.addEventListener('click', () => removeFile(idx));
                wrapper.appendChild(btn);
                filePreview.appendChild(wrapper);
            });
        }

        function removeFile(indexToRemove) {
            const dt = new DataTransfer();
            Array.from(fileInput.files).forEach((f, i) => {
                if (i !== indexToRemove) dt.items.add(f);
            });
            fileInput.files = dt.files;
            renderPreview();
        }

        const msgForm = document.getElementById('intervention-msg-form');
        if (msgForm) {
            msgForm.addEventListener('submit', () => {
                filePreview.innerHTML = '';
                filePreview.style.display = 'none';
            });
        }
    }
    // ---- fin aperçu pièces jointes ----
});

// ---- @mention autocomplete ----
(function () {
    const textarea   = document.getElementById('intervention-msg-content');
    const realInput  = document.getElementById('intervention-msg-content-real');
    const dropdown   = document.getElementById('intervention-mention-dropdown');
    const form       = document.getElementById('intervention-msg-form');
    if (!textarea || !dropdown || !realInput || !form) return;

    let mentions = [];
    let mentionStart = -1;
    let mentionQuery = null;
    let searchTimer  = null;
    let currentResults = [];
    let selectedIndex = -1;

    function escHtml(str) {
        return (str || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function syncReal() {
        const dv = textarea.value;
        if (!mentions.length) { realInput.value = dv; return; }
        let real = '';
        let pos  = 0;
        const sorted = [...mentions].sort((a, b) => a.start - b.start);
        for (const m of sorted) {
            if (m.start > pos) real += dv.slice(pos, m.start);
            real += m.marker;
            pos = m.end;
        }
        real += dv.slice(pos);
        realInput.value = real;
    }

    function shiftMentions(fromPos, delta) {
        for (const m of mentions) {
            if (m.start >= fromPos) { m.start += delta; m.end += delta; }
        }
    }

    function removeMentionsIn(start, end) {
        mentions = mentions.filter(m => m.end <= start || m.start >= end);
    }

    function highlightIndex(idx) {
        const items = dropdown.querySelectorAll('.list-group-item');
        if (!items || !items.length) return;
        items.forEach((btn, i) => {
            if (i === idx) {
                btn.classList.add('active');
                btn.scrollIntoView({ block: 'nearest' });
            } else {
                btn.classList.remove('active');
            }
        });
    }

    function showDropdown(results) {
        dropdown.innerHTML = '';
        currentResults = results || [];
        selectedIndex = -1;
        if (!results || !results.length) { hideDropdown(); return; }
        results.forEach((r, idx) => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'list-group-item list-group-item-action d-flex align-items-center gap-2 py-2 small';
            const icon     = r.type === 'user' ? 'bi-person-fill' : 'bi-people-fill';
            const badgeCls = r.type === 'user'
                ? 'badge bg-primary-subtle text-primary-emphasis border border-primary-subtle'
                : 'badge bg-info-subtle text-info-emphasis border border-info-subtle';
            btn.innerHTML = `<span class="${badgeCls}"><i class="bi ${icon}"></i></span><span>${escHtml(r.display)}</span>`;
            btn.addEventListener('mousedown', function (e) {
                e.preventDefault();
                insertMention(r);
            });
            btn.addEventListener('mouseenter', function () {
                selectedIndex = idx;
                highlightIndex(selectedIndex);
            });
            dropdown.appendChild(btn);
        });

        selectedIndex = 0;
        highlightIndex(0);
        dropdown.style.display = 'block';
    }

    function hideDropdown() {
        dropdown.style.display = 'none';
        dropdown.innerHTML = '';
        mentionStart = -1;
        mentionQuery = null;
        currentResults = [];
        selectedIndex = -1;
    }

    function insertMention(r) {
        const shortTag = `@[${r.display}]`;
        const marker   = r.type === 'user'
            ? `@[${r.display}](u:${r.id})`
            : `@[${r.display}](t:${r.id})`;
        const dv     = textarea.value;
        const qLen   = mentionQuery ? mentionQuery.length : 0;
        const before = dv.slice(0, mentionStart);
        const after  = dv.slice(mentionStart + 1 + qLen);
        textarea.value = before + shortTag + ' ' + after;
        removeMentionsIn(mentionStart, mentionStart + 1 + qLen);
        shiftMentions(mentionStart + 1 + qLen, shortTag.length + 1 - (1 + qLen));
        mentions.push({ start: mentionStart, end: mentionStart + shortTag.length, marker });
        syncReal();
        const pos = mentionStart + shortTag.length + 1;
        textarea.setSelectionRange(pos, pos);
        textarea.focus();
        hideDropdown();
    }

    textarea.addEventListener('keydown', function (e) {
        if (dropdown.style.display === 'block' && currentResults.length > 0) {
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                selectedIndex = (selectedIndex + 1) % currentResults.length;
                highlightIndex(selectedIndex);
                return;
            }
            if (e.key === 'ArrowUp') {
                e.preventDefault();
                selectedIndex = (selectedIndex - 1 + currentResults.length) % currentResults.length;
                highlightIndex(selectedIndex);
                return;
            }
            if (e.key === 'Enter' || e.key === 'Tab') {
                if (selectedIndex >= 0 && selectedIndex < currentResults.length) {
                    e.preventDefault();
                    insertMention(currentResults[selectedIndex]);
                }
                return;
            }
            if (e.key === 'Escape') {
                e.preventDefault();
                hideDropdown();
                return;
            }
        }
    });

    function searchMentions(q) {
        clearTimeout(searchTimer);
        searchTimer = setTimeout(() => {
            fetch(`{% url 'notifications:api_mention_search' %}?q=${encodeURIComponent(q)}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(resp => resp.json())
            .then(data => showDropdown(data.results))
            .catch(() => hideDropdown());
        }, 180);
    }

    textarea.addEventListener('input', function () {
        syncReal();
        const cur    = this.selectionStart;
        const before = this.value.slice(0, cur);
        const match  = before.match(/@([^\s@]*)$/);
        if (!match) { hideDropdown(); return; }
        mentionStart = match.index;
        mentionQuery = match[1];
        searchMentions(mentionQuery);
    });

    form.addEventListener('submit', function (e) {
        syncReal();
        if (!realInput.value.trim()) {
            e.preventDefault();
            textarea.setCustomValidity('{% translate "Le message ne peut pas être vide." %}');
            textarea.reportValidity();
        } else {
            textarea.setCustomValidity('');
        }
    });

    textarea.addEventListener('keydown', function (e) {
        if (dropdown.style.display === 'none') return;
        const items  = Array.from(dropdown.querySelectorAll('.list-group-item'));
        const focused = document.activeElement;
        if (e.key === 'Escape') {
            e.stopPropagation(); hideDropdown();
        } else if (e.key === 'ArrowDown') {
            e.preventDefault();
            const idx = items.indexOf(focused);
            (idx < 0 ? items[0] : items[idx + 1] || items[0])?.focus();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            const idx = items.indexOf(focused);
            (idx > 0 ? items[idx - 1] : textarea).focus();
        }
    });

    dropdown.addEventListener('keydown', function (e) {
        const items = Array.from(dropdown.querySelectorAll('.list-group-item'));
        const idx   = items.indexOf(document.activeElement);
        if (e.key === 'Enter' && idx >= 0) {
            e.preventDefault(); items[idx].dispatchEvent(new MouseEvent('mousedown'));
        } else if (e.key === 'ArrowDown') {
            e.preventDefault(); (items[idx + 1] || items[0])?.focus();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault(); idx > 0 ? items[idx - 1].focus() : textarea.focus();
        } else if (e.key === 'Escape') {
            hideDropdown(); textarea.focus();
        }
    });

    document.addEventListener('click', function (e) {
        if (!dropdown.contains(e.target) && e.target !== textarea) hideDropdown();
    });

    form.addEventListener('submit', function () {
        setTimeout(() => { textarea.value = ''; realInput.value = ''; mentions = []; }, 0);
    });
})();
// ---- fin @mention autocomplete ----

// ---- Changement de drapeau de la discussion ----
{% if discussion %}
(function() {
    document.querySelectorAll('.intervention-flag-opt').forEach(btn => {
        btn.addEventListener('click', function() {
            const flag = this.getAttribute('data-flag');
            const url = "{% url 'notifications:discussion_set_flag' discussion.pk %}";
            const formData = new FormData();
            formData.append('flag', flag);
            formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.ok) {
                    const fabFlagBadge = document.getElementById('discussion-fab-flag-badge');
                    const headerIcon = document.getElementById('intervention-flag-icon-display');
                    const headerLabel = document.getElementById('intervention-flag-label-display');

                    if (data.flag) {
                        if (fabFlagBadge) {
                            fabFlagBadge.classList.remove('d-none');
                            fabFlagBadge.style.backgroundColor = data.flag_info.color;
                            fabFlagBadge.title = data.flag_info.label;
                            fabFlagBadge.innerHTML = `<i class="bi ${data.flag_info.icon}"></i>`;
                        }
                    } else {
                        if (fabFlagBadge) {
                            fabFlagBadge.classList.add('d-none');
                        }
                    }

                    if (headerIcon) {
                        if (data.flag === 'red') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-danger"></i>';
                        else if (data.flag === 'orange') headerIcon.innerHTML = '<i class="bi bi-flag-fill" style="color: #fd7e14;"></i>';
                        else if (data.flag === 'green') headerIcon.innerHTML = '<i class="bi bi-flag-fill text-success"></i>';
                        else headerIcon.innerHTML = '<i class="bi bi-flag text-white-50"></i>';
                    }
                    if (headerLabel) {
                        headerLabel.textContent = data.flag_info.label || '{% translate "Statut" %}';
                    }

                    if (data.system_message) {
                        const thread = document.getElementById('discussion-thread');
                        if (thread) {
                            const sysDiv = document.createElement('div');
                            sysDiv.className = 'd-flex justify-content-center my-1';
                            sysDiv.innerHTML = `<span class="badge bg-light text-secondary border px-2.5 py-1 rounded-pill" style="font-size: 0.75rem; font-weight: 500;">
                                ${data.system_message.content}
                            </span>`;
                            thread.appendChild(sysDiv);
                            thread.scrollTop = thread.scrollHeight;
                        }
                    }
                }
            })
            .catch(err => console.error('Error changing discussion flag:', err));
        });
    });
})();
{% endif %}

function toggleSubscription(interventionId) {
    const btn = document.getElementById('subscription-btn');
    const icon = document.getElementById('subscription-icon');
    const text = document.getElementById('subscription-text');
    if (!btn || !icon || !text) return;
    
    fetch(`/interventions/${interventionId}/toggle-subscription/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': getCookie('csrftoken'),
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (data.subscribed) {
                btn.classList.replace('btn-outline-secondary', 'btn-secondary');
                icon.classList.replace('bi-bell', 'bi-bell-fill');
                text.textContent = "{% translate 'Suivi' %}";
                btn.title = "{% translate 'Ne plus suivre' %}";
            } else {
                btn.classList.replace('btn-secondary', 'btn-outline-secondary');
                icon.classList.replace('bi-bell-fill', 'bi-bell');
                text.textContent = "{% translate 'Suivre' %}";
                btn.title = "{% translate 'Suivre cette intervention' %}";
            }
        } else {
            alert(data.message || "{% translate 'Une erreur est survenue.' %}");
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert("{% translate 'Une erreur réseau est survenue.' %}");
    });
}
</script>