{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load short_name %}
{% load projects_tags %}
{% load document_viewer_tags %}

{% block head %}
    <link rel="stylesheet" href="{% static 'projects/timeline.css' %}">
    
    <!-- Select2 4.1.0 + Bootstrap 5 theme (local) -->
    <link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
    <link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />

    <style>
        .modal-backdrop {
            z-index: 10001 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }
        .modal {
            z-index: 10002 !important;
        }
        .optional-field {
            border: 1px dashed #6c757d !important;
        }
    </style>

{% endblock head %}

{% block content %}
<div class="row mt-2" style="height: calc(100vh - 200px);">
    <div class="col-md-8" style="max-height: calc(100vh - 200px); overflow: auto;">
        <!-- Main information -->
        <div class="mb-4 ms-2 position-relative">
            {% if is_edit_allowed %}
                <a id="control-edit-btn"
                    href="{% url 'projects:projects_change' project.id %}"
                    class="btn btn-sm btn-light border position-absolute top-0 end-0 m-2"
                    title="Modifier le projet"
                    onclick="showControlEditSpinner(event)">
                    <i id="control-edit-icon" class="bi bi-pencil"></i>
                    <div id="control-edit-spinner" class="spinner-border spinner-border-sm text-primary d-none" role="status"></div>
                </a>
            {% endif %}
            <div class="">
                <h3 style="color: var(--brand-color);"><i class="bi {{ project.thematic.icon }} me-2"></i> {% translate "Projet" %} - {{ project.code }} - {{ project.name }}</h3>
            </div>
            <div class="">
                <div class="timeline" id="statusTimeline"></div>
                <div class="row">
                    <div class="col-md-6">
                        <p>
                            <label>{% translate "Thématiques" %} :</label>
                            {% for thematic in project.thematics.all %}
                                <span class="badge bg-secondary">{{ thematic.name }}</span>
                            {% empty %}
                                <span class="badge bg-secondary">{% translate "Aucune thématique" %}</span>
                            {% endfor %}
                            
                            {% if project.begin_time %}
                                <label>{% translate "Début de projet" %} :</label> {{ project.start_date|date:"d-m-Y" }}<br>
                            {% endif %}
                            {% if project.end_time %}
                                <label>{% translate "Fin de projet" %} :</label> {{ project.end_date|date:"d-m-Y" }}<br>
                            {% endif %}

                            
                        </p>
                    </div>
                    <div class="col-md-6">
                        
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <label>{% translate "Date de début" %} :</label> {{ project.start_date|date:"d-m-Y"|default:"..." }}
                            <label class="ms-3">{% translate "Date de fin" %} :</label> {{ project.end_date|date:"d-m-Y"|default:"..." }}
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <label>{% translate "Description" %} :</label><br> {{ project.description }}
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <label>PMO : </label>
                            {% if project.pmo_number %}
                                <a href="https://sprbgob.sharepoint.com/sites/I-BM-PMO/Lists/PSR/DispForm.aspx?ID={{ project.pmo_number }}"> {{ project.pmo_number }} </a>
                            {% endif %}
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>
                            <label>Osiris : </label>
                            {% if project.osiris_number %}
                                <a href="https://www.osiris.brussels/Index.aspx?ObjId=WS({{project.osiris_number}})&lang=FR&parameter="> {{ project.osiris_number }} </a>
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div> 

        <!-- Documents -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Documents" %}</h4>
                {% if can_add_documents %}
                    <button class="btn btn-light border-0" title="{% translate 'Ajouter' %}" data-bs-toggle="modal" data-bs-target="#addDocumentModal">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body">
                {% if can_browse_folder and document_folder %}
                <div class="mb-2">
                    <a href="/documents/?folder={{ document_folder.slug }}" class="text-decoration-none small">
                        <i class="bi bi-folder2-open me-1"></i>{% translate "Ouvrir le répertoire" %}
                    </a>
                </div>
                {% endif %}
                <div id="documentsAlertContainer" class="m-1"></div>
                {% if use_managed_documents %}
                    {# Nouveau système : visionneuse réutilisable avec tags + versioning #}
                    {% render_document_viewer project_documents modal_id="projectDocViewerModal" show_tags=True show_versions=True location_id=project.id %}
                {% else %}
                    {# Système hérité ProjectDocument #}
                    <div class="row" id="documentsContainer">
                        {% for document in project.documents.all %}
                        {% private_file_url document 'file' as doc_file_url %}
                        {% private_file_url document 'thumbnail' as doc_thumb_url %}
                        <div id="document-card-{{ document.id }}" class="col-md-2 mb-3">
                            <div class="position-relative">
                                {% if can_add_documents %}
                                <button type="button"
                                        class="btn btn-link text-danger p-0 position-absolute top-0 end-0 delete-document-btn bg-white"
                                        data-document-id="{{ document.id }}"
                                        data-document-name="{{ document.filename|escape }}"
                                        aria-label="{% translate 'Supprimer le document' %}"
                                        title="{% translate 'Supprimer le document' %}">
                                    <i class="bi bi-trash fs-6"></i>
                                </button>
                                {% endif %}
                                <a href="{{ doc_file_url }}" target="_blank" class="d-block">
                                    <div class="img-thumbnail" style="width: 100%; height: 100px; overflow: hidden;">
                                        {% if document.thumbnail %}
                                        <img src="{{ doc_thumb_url }}" alt="{{ document.filename }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                        {% else %}
                                        <img src="{{ doc_file_url }}" alt="{{ document.filename }}" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
                                        {% endif %}
                                    </div>
                                </a>
                            </div>
                            <div class="text-center text-muted mt-1" style="font-size: 0.85em;">
                                {{ document.upload_date|date:"d/m/Y H:i" }}<br>
                                {% if document.uploaded_by %}{{ document.uploaded_by|short_name }}{% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Modal de confirmation de suppression de document (système hérité) -->
        {% if can_add_documents %}
        <div class="modal fade" id="deleteDocumentModal" tabindex="-1" aria-labelledby="deleteDocumentModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteDocumentModalLabel">{% translate "Supprimer le document" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-1">{% translate "Voulez-vous supprimer ce document ?" %}</p>
                        <p class="fw-semibold mb-0" id="documentNameToDelete"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteDocument">{% translate "Supprimer" %}</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <!-- Modal form add document -->
        <div class="modal fade" id="addDocumentModal" tabindex="-1" aria-labelledby="addDocumentModalLabel" aria-hidden="true" style="z-index: 10050;">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addDocumentModalLabel">{% translate "Ajouter des documents" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addDocumentForm" method="post" enctype="multipart/form-data" action="{% url 'projects:projects_add_document' project.id %}">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="docFileInput" class="form-label">{% translate "Sélectionner des fichiers" %}</label>
                                <input type="file" id="docFileInput" name="files" multiple class="form-control">
                            </div>
                            <div id="docFileFieldsContainer">
                                {# Champs dynamiques (tag + répertoire) injectés par JS #}
                            </div>
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary" id="documentSubmitButton">
                                    {% translate "Ajouter" %}
                                    <span class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true" id="documentSubmitSpinner"></span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal historique des versions -->
        <div class="modal fade" id="documentHistoryModal" tabindex="-1" aria-labelledby="documentHistoryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="documentHistoryModalLabel">{% translate "Historique des versions" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body">
                        <div id="documentHistoryContent" class="row g-3">
                            {# Contenu dynamique injecté via fetch #}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# Config JSON pour le JS du formulaire d'ajout #}
        <script type="application/json" id="projectDocumentConfigData">
            {
                "use_managed_documents": {% if use_managed_documents %}true{% else %}false{% endif %},
                "can_add_unique_tag_documents": {% if can_add_unique_tag_documents %}true{% else %}false{% endif %},
                "config_url": "{% url 'projects:projects_document_config' project.id %}"
            }
        </script>

        <!-- Tags -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Tags" %}</h4>
                {% if is_edit_allowed %}
                    <button class="btn btn-light border-0" type="button" data-bs-toggle="collapse" data-bs-target="#add-project-tag-form" aria-expanded="false" title="{% translate 'Ajouter un tag' %}">
                        <i class="bi bi-tag text-primary"></i>
                    </button>
                {% endif %}
            </div>
            {% if is_edit_allowed %}
            <div class="collapse" id="add-project-tag-form">
                <div class="card-body border-bottom">
                    <form method="post" action="{% url 'projects:projects_add_tag' project.pk %}">
                        {% csrf_token %}
                        <div class="input-group input-group-sm">
                            <select name="tag_id" class="form-select" required>
                                <option value="">-- {% translate "Sélectionner un tag" %} --</option>
                                {% for t in available_tags %}
                                    <option value="{{ t.pk }}">{{ t.name }}</option>
                                {% endfor %}
                            </select>
                            <button type="submit" class="btn btn-primary">{% translate "Ajouter" %}</button>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}
            <div class="card-body">
                {% for tag in project.tags.all %}
                    <div class="d-inline-flex align-items-center gap-1 me-1 mb-1">
                        <a href="{% url 'projects:projects_index' %}?tag={{ tag.slug }}" class="badge bg-secondary text-decoration-none">{{ tag.name }}</a>
                        {% if is_edit_allowed %}
                            <form method="post" action="{% url 'projects:projects_remove_tag' project.pk tag.pk %}" class="d-inline">
                                {% csrf_token %}
                                <button class="btn btn-sm btn-link text-danger p-0 lh-1" type="submit"><i class="bi bi-x"></i></button>
                            </form>
                        {% endif %}
                    </div>
                {% empty %}
                    <p class="text-muted mb-0">{% translate "Aucun tag associé" %}</p>
                {% endfor %}
            </div>
        </div>

        <!-- Templates (attributs supplémentaires) -->
        {% if project_templates or available_templates %}
        <div class="card mb-4" id="project-templates-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Attributs supplémentaires" %}</h4>
                {% if is_edit_allowed and available_templates %}
                    <button class="btn btn-light border-0" type="button" data-bs-toggle="collapse" data-bs-target="#add-project-template-form" aria-expanded="false" title="{% translate 'Ajouter un template' %}">
                        <i class="bi bi-layout-text-window-reverse text-primary"></i>
                    </button>
                {% endif %}
            </div>
            {% if is_edit_allowed and available_templates %}
            <div class="collapse" id="add-project-template-form">
                <div class="card-body border-bottom">
                    <form method="post" action="{% url 'projects:projects_add_template' project.pk %}">
                        {% csrf_token %}
                        <div class="input-group input-group-sm">
                            <select name="template_id" class="form-select" required>
                                <option value="">-- {% translate "Sélectionner un template" %} --</option>
                                {% for tpl in available_templates %}
                                    <option value="{{ tpl.pk }}">{{ tpl.name }}</option>
                                {% endfor %}
                            </select>
                            <button type="submit" class="btn btn-primary">{% translate "Ajouter" %}</button>
                        </div>
                    </form>
                </div>
            </div>
            {% endif %}
            <div class="card-body">
                {% if not project_templates %}
                    <p class="text-muted mb-0">{% translate "Aucun template associé" %}</p>
                {% endif %}
                {% for tpl_data in project_templates %}
                <div class="mb-4" id="template-section-{{ tpl_data.template.pk }}">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0 fw-semibold">{{ tpl_data.template.name }}</h6>
                        <div class="d-flex gap-2">
                            {% if is_edit_allowed %}
                            <button type="button" class="btn btn-sm btn-outline-primary edit-template-attrs-btn"
                                    data-template-id="{{ tpl_data.template.pk }}"
                                    title="{% translate 'Modifier les valeurs' %}">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <form method="post" action="{% url 'projects:projects_remove_template' project.pk tpl_data.template.pk %}" class="d-inline" onsubmit="return confirm('{% translate "Retirer ce template et ses valeurs ?" %}')">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="{% translate 'Retirer ce template' %}">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </div>

                    {# Read-only view #}
                    <div id="template-view-{{ tpl_data.template.pk }}">
                        {% if not tpl_data.attributes %}
                            <p class="text-muted small mb-0">{% translate "Aucun attribut défini pour ce template." %}</p>
                        {% else %}
                        <table class="table table-sm table-borderless mb-0">
                            <tbody>
                            {% for item in tpl_data.attributes %}
                            <tr>
                                <td class="text-muted" style="width:40%; font-size:0.9em;">
                                    {{ item.attr.name }}
                                    {% if item.attr.is_required %}<span class="text-danger">*</span>{% endif %}
                                </td>
                                <td style="font-size:0.9em;">
                                    {% if item.value %}
                                        {{ item.value.display_value }}
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                        {% endif %}
                    </div>

                    {# Edit form (hidden by default) #}
                    {% if is_edit_allowed %}
                    <div id="template-edit-{{ tpl_data.template.pk }}" class="d-none">
                        <div id="template-edit-alert-{{ tpl_data.template.pk }}" class="d-none alert alert-danger py-2"></div>
                        {% for item in tpl_data.attributes %}
                        <div class="mb-3">
                            <label class="form-label fw-semibold" style="font-size:0.9em;">
                                {{ item.attr.name }}
                                {% if item.attr.is_required %}<span class="text-danger ms-1">*</span>{% endif %}
                            </label>
                            {% if item.attr.help_text %}
                            <div class="form-text mb-1" style="font-size:0.8em;">{{ item.attr.help_text }}</div>
                            {% endif %}

                            {% if item.attr.attribute_type == 'text' %}
                                <textarea class="form-control form-control-sm attr-input {% if not item.attr.is_required %}optional-field{% endif %}"
                                          data-attr-id="{{ item.attr.pk }}"
                                          data-attr-type="text"
                                          rows="2">{% if item.value and item.value.value_text %}{{ item.value.value_text }}{% endif %}</textarea>

                            {% elif item.attr.attribute_type == 'number' %}
                                <input type="number" step="any"
                                       class="form-control form-control-sm attr-input {% if not item.attr.is_required %}optional-field{% endif %}"
                                       data-attr-id="{{ item.attr.pk }}"
                                       data-attr-type="number"
                                       value="{% if item.value and item.value.value_number != None %}{{ item.value.value_number|floatformat:"-6" }}{% endif %}">

                            {% elif item.attr.attribute_type == 'boolean' %}
                                <div class="d-flex gap-2" data-attr-id="{{ item.attr.pk }}" data-attr-type="boolean">
                                    {% with cur=item.value.value_boolean %}
                                    <button type="button" class="btn btn-sm boolean-btn {% if cur == True %}btn-success{% else %}btn-outline-success{% endif %}" data-value="true">{% translate "Oui" %}</button>
                                    <button type="button" class="btn btn-sm boolean-btn {% if cur == False %}btn-danger{% else %}btn-outline-danger{% endif %}" data-value="false">{% translate "Non" %}</button>
                                    <button type="button" class="btn btn-sm boolean-btn {% if cur is None %}btn-secondary{% else %}btn-outline-secondary{% endif %}" data-value="null">{% translate "N/A" %}</button>
                                    {% endwith %}
                                    <input type="hidden" class="attr-input"
                                           data-attr-id="{{ item.attr.pk }}"
                                           data-attr-type="boolean"
                                           value="{% if item.value and item.value.value_boolean is not None %}{% if item.value.value_boolean %}true{% else %}false{% endif %}{% endif %}">
                                </div>

                            {% elif item.attr.attribute_type == 'choice' %}
                                <select class="form-select form-select-sm attr-input {% if not item.attr.is_required %}optional-field{% endif %}"
                                        data-attr-id="{{ item.attr.pk }}"
                                        data-attr-type="choice">
                                    <option value="">-- {% translate "Sélectionner" %} --</option>
                                    {% for ch in item.choices %}
                                        <option value="{{ ch.value }}" {% if item.value and item.value.value_choice == ch.value %}selected{% endif %}>{{ ch.label_fr }}</option>
                                    {% endfor %}
                                </select>

                            {% elif item.attr.attribute_type == 'choice_multiple' %}
                                <div data-attr-id="{{ item.attr.pk }}" data-attr-type="choice_multiple" class="d-flex flex-wrap gap-1">
                                    {% with cur=item.value.value_choices|default:'' %}
                                    {% for ch in item.choices %}
                                        <button type="button"
                                                class="btn btn-sm choice-multiple-btn {% if ch.value in cur %}btn-primary{% else %}btn-outline-primary{% endif %}"
                                                data-value="{{ ch.value }}">{{ ch.label_fr }}</button>
                                    {% endfor %}
                                    {% endwith %}
                                    <input type="hidden" class="attr-input"
                                           data-attr-id="{{ item.attr.pk }}"
                                           data-attr-type="choice_multiple"
                                           value="{% if item.value and item.value.value_choices %}{{ item.value.value_choices|join:',' }}{% endif %}">
                                </div>

                            {% elif item.attr.attribute_type == 'date' %}
                                <input type="date"
                                       class="form-control form-control-sm attr-input {% if not item.attr.is_required %}optional-field{% endif %}"
                                       data-attr-id="{{ item.attr.pk }}"
                                       data-attr-type="date"
                                       value="{% if item.value and item.value.value_date %}{{ item.value.value_date|date:"Y-m-d" }}{% endif %}">
                            {% endif %}
                        </div>
                        {% endfor %}
                        <div class="d-flex gap-2 mt-2">
                            <button type="button" class="btn btn-sm btn-primary save-template-attrs-btn" data-template-id="{{ tpl_data.template.pk }}" data-project-id="{{ project.pk }}">
                                {% translate "Sauvegarder" %}
                                <span class="spinner-border spinner-border-sm d-none ms-1" role="status"></span>
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary cancel-template-edit-btn" data-template-id="{{ tpl_data.template.pk }}">
                                {% translate "Annuler" %}
                            </button>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% if not forloop.last %}<hr>{% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}

        


        <!-- Phases -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Phases" %}</h4>
                {% if is_edit_allowed %}
                    <button onclick="" class="btn btn-light border-0" title="Ajouter une phase" data-bs-toggle="modal" data-bs-target="#addPhaseModal">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body">
                {% if project.phases.all %}
                    {% for phase in project.phases.all %}
                        <div id="phase-container-{{ phase.id }}" {% if not forloop.last %} class="border-bottom pb-2 mb-2 d-flex justify-content-between align-items-start" {% else %} class="d-flex justify-content-between align-items-start" {% endif %}>
                            <div>
                                <strong>{{ phase.name }}</strong><br>
                                {% if phase.start_date and phase.end_date %}
                                    <small class="text-muted">{{ phase.start_date|date:"d-m-Y" }} - {{ phase.end_date|date:"d-m-Y" }}</small><br>
                                {% endif %}
                                {% if phase.contract %}
                                    <small class="text-muted">{% translate "Contrat" %}: {{ phase.contract.contract_number }}</small><br>
                                {% endif %}
                                {% if phase.description %}
                                    <div class="mt-2">{{ phase.description|safe }}</div>
                                {% endif %}
                            </div>
                            {% if is_edit_allowed %}
                                <a href="#" class="btn btn-sm btn-outline-secondary border-0 delete-phase-btn" title="Supprimer" 
                                    data-phase-id="{{ phase.id }}" data-phase-name="{{ phase.name }}" 
                                    data-bs-toggle="modal" data-bs-target="#deletePhaseModal">
                                    <i class="bi bi-trash"></i>
                                </a>
                            {% endif %}
                        </div>
                    {% endfor %}
                {% else %}
                    <p class="text-muted">{% translate "Aucune phase définie pour ce projet." %}</p>
                {% endif %}
            </div>
        </div>

        <!-- Modal form add phase -->
        <div class="modal fade" id="addPhaseModal" tabindex="-1" aria-labelledby="addPhaseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">{% translate "Ajouter une phase" %}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="addPhaseForm" method="post" action="{% url 'projects:projects_add_phase' project.id %}">
                            {% csrf_token %}
                            {{ add_phase_form.as_p }}
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">{% translate "Ajouter" %}</button>
                            </div>
                        </form>
                    </div>
                  </div>
            </div>
        </div>

        <!-- Modale de confirmation de suppression de phase -->
        <div class="modal fade" id="deletePhaseModal" tabindex="-1" aria-labelledby="deletePhaseModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% translate "Confirmer la suppression" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <p>{% translate "Voulez-vous vraiment supprimer cette phase du projet ?" %}</p>
                        <div id="phaseNameToDeleteContainer"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="button" class="btn btn-danger" id="confirmDeletePhaseBtn">{% translate "Supprimer" %}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Interventions -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Interventions" %}</h4>
                {% if can_add_interventions %}
                    <a href="{% url 'projects:projects_add_intervention' project.id %}" class="btn btn-light border-0" title="{% translate "Ajouter une intervention" %}">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </a>
                {% endif %}
            </div>
            <div class="card-body">
                <table id="interventions-table" class="table"
                    data-height="550"
                    data-pagination="true"
                    data-page-size="25"
                    data-click-to-select="true" >
                    <thead>
                        <tr>
                            <th data-field="summary" data-width="80">{% translate "Résumé" %}</th>
                            <th data-field="code">{% translate "Code" %}</th>
                            <th data-field="title">{% translate "Titre" %}</th>
                            <th data-field="begin_date">{% translate "Début" %}</th>
                            <th data-field="statut">{% translate "Statut" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for interv in interventions %}
                            {% with intervention=interv.intervention %}
                            <tr>
                                <td>
                                    {% if interv.can_view_summary %}
                                        <button type="button"
                                                class="btn btn-sm btn-outline-secondary"
                                                data-bs-toggle="modal"
                                                data-bs-target="#interventionSummaryModal"
                                                data-summary-url="{% url 'interventions:intervention_summary_modal' intervention.id %}"
                                                data-summary-title="{{ intervention.code }}"
                                                title="{% translate 'Voir le résumé' %}">
                                            <i class="bi bi-eye"></i>
                                        </button>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if interv.can_view %}
                                        <a href="{% url 'interventions:intervention_detail' intervention.id %}">{{ intervention.code }}</a>
                                    {% else %}
                                        {{ intervention.code }}
                                    {% endif %}
                                </td>
                                <td>{{ intervention.title }}</td>
                                <td>{{ intervention.begin_time|date:"d-m-Y H:i" }}</td>
                                <td>{{ intervention.get_status_display }}</td>
                            </tr>
                            {% endwith %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <div class="modal fade" id="interventionSummaryModal" tabindex="-1" aria-labelledby="interventionSummaryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="interventionSummaryModalLabel" data-base-title="{% translate 'Résumé intervention' %}">{% translate 'Résumé intervention' %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body" id="interventionSummaryModalBody"></div>
                </div>
            </div>
        </div>

        <!-- Commandes -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Commandes" %}</h4>
                {% if can_manage_orders %}
                    <div>
                        <button onclick="" class="btn btn-light border-0" title="Associer une commande existante" data-bs-toggle="modal" data-bs-target="#associateOrderModal">
                            <i class="bi bi-link-45deg text-primary"></i>
                        </button>
                        <a href="{% url 'projects:projects_create_order' project.id %}" class="btn btn-light border-0" title="Créer une nouvelle commande">
                            <i class="bi bi-plus-circle text-primary"></i>
                        </a>
                    </div>
                {% endif %}
            </div>
            <div class="card-body">
                {% if orders %}
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{% translate "Code" %}</th>
                                <th>{% translate "Contrat" %}</th>
                                <th>{% translate "Date de commande" %}</th>
                                <th>{% translate "Date de livraison" %}</th>
                                <th>{% translate "Montant total" %}</th>
                                <th>{% translate "Statut" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for order in orders %}
                            <tr>
                                <td>
                                    <a href="{% url 'contracts:contracts_orders_detail' order.id %}">
                                        {{ order.order_code }}
                                    </a>
                                </td>
                                <td>{{ order.contract.contract_number }}</td>
                                <td>{{ order.order_date|date:"d-m-Y" }}</td>
                                <td>{{ order.delivery_date|date:"d-m-Y" }}</td>
                                <td>{{ order.total_amount|floatformat:2 }} €</td>
                                <td>{{ order.get_order_status_display }}</td>
                                <td>
                                    {% if can_manage_orders %}
                                        <a href="#" class="btn btn-sm btn-outline-secondary border-0 dissociate-order-btn" title="Dissocier" 
                                            data-order-id="{{ order.id }}" data-order-code="{{ order.order_code }}" 
                                            data-bs-toggle="modal" data-bs-target="#dissociateOrderModal">
                                            <i class="bi bi-x-circle"></i>
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <!-- <p class="text-muted">{% translate "Aucune commande associée à ce projet." %}</p> -->
                {% endif %}
            </div>
        </div>

        <!-- Modal form associate order -->
        <div class="modal fade" id="associateOrderModal" tabindex="-1" aria-labelledby="associateOrderModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">{% translate "Associer une commande" %}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <form id="associateOrderForm" method="post" action="{% url 'projects:projects_associate_order' project.id %}">
                            {% csrf_token %}
                            {{ associate_order_form.as_p }}
                            <div class="modal-footer">
                                <button type="submit" class="btn btn-primary">{% translate "Associer" %}</button>
                            </div>
                        </form>
                    </div>
                  </div>
            </div>
        </div>

        <!-- Modale de confirmation de dissociation -->
        <div class="modal fade" id="dissociateOrderModal" tabindex="-1" aria-labelledby="dissociateOrderModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% translate "Confirmer la dissociation" %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <p>{% translate "Voulez-vous vraiment dissocier cette commande du projet ?" %}</p>
                        <div id="orderCodeToDissociateContainer"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="button" class="btn btn-danger" id="confirmDissociateBtn" onclick="dissociateOrder()">{% translate "Dissocier" %}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Follow-up reports -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Rapports de suivi" %}</h4>
                {% if can_add_controls %}
                    <a href="{% url 'controls:controls_add' %}?project_id={{ project.id }}" class="btn btn-light border-0" title="Ajouter">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </a>
                {% endif %}
            </div>
            <div class="card-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>{% translate "Code" %}</th>
                            <th>{% translate "Date" %}</th>
                            <th>{% translate "Type" %}</th>
                            <th>{% translate "Statut" %}</th>
                            <th>{% translate "Auteur" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for control in project.controls.all %}
                        <tr>
                            <td>
                                <a href="{% url 'controls:controls_detail' control.id %}">
                                    {{ control.control_code }}
                                </a>
                            </td>
                            <td>{{ control.updated_at|date:"d-m-Y H:i" }}</td>
                            <td>{{ control.get_control_type_display }}</td>
                            <td>{{ control.get_control_status_display }}</td>
                            <td>{{ control.control_author|short_name }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        {% if can_manage_members %}
        <!-- Permissions spécifiques -->
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h4>{% translate "Permissions spécifiques" %}</h4>
                {% if can_manage_members %}
                    <button onclick="" class="btn btn-light border-0" title="Ajouter" data-bs-toggle="modal" data-bs-target="#addMemberModal">
                        <i class="bi bi-plus-circle text-primary"></i>
                    </button>
                {% endif %}
            </div>
            <div class="card-body" id="membersContainer">
                <div id="membersAlertContainer" class="m-1"></div>
                {% for m in members %}
                <div id="member-container-{{ m.id }}" 
                    class="border-bottom p-1 d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-person me-1"></i>{{ m.user|short_name }}{% if m.can_edit %} - {% translate "Éditeur" %}{% endif %}</span>
                    {% if can_manage_members %}
                        <a href="#" class="btn btn-sm btn-outline-secondary border-0" title="Supprimer" 
                            onclick="openDeleteModal(this)" 
                            data-member-id="{{ m.id }}"
                            data-member-type="user"
                            data-member-name="{{ m.user.first_name }} {{ m.user.last_name }}{% if m.can_edit %} - {% translate 'Éditeur' %}{% endif %}" 
                            data-bs-toggle="modal" data-bs-target="#deleteMemberModal">
                            <i class="bi bi-trash"></i>
                        </a>
                    {% endif %}
                </div>
                {% endfor %}
                {% for ta in team_accesses %}
                <div id="team-access-container-{{ ta.id }}" 
                    class="border-bottom p-1 d-flex justify-content-between align-items-center">
                    <span><i class="bi bi-people me-1"></i>{{ ta.team.name }} ({{ ta.team.company.name }}){% if ta.can_edit %} - {% translate "Éditeur" %}{% endif %}</span>
                    {% if can_manage_members %}
                        <a href="#" class="btn btn-sm btn-outline-secondary border-0" title="Supprimer" 
                            onclick="openDeleteModal(this)" 
                            data-member-id="{{ ta.id }}"
                            data-member-type="team"
                            data-member-name="{{ ta.team.name }} ({{ ta.team.company.name }}){% if ta.can_edit %} - {% translate 'Éditeur' %}{% endif %}" 
                            data-bs-toggle="modal" data-bs-target="#deleteMemberModal">
                            <i class="bi bi-trash"></i>
                        </a>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Modal form add project member -->
        {% if can_manage_members %}
        <div class="modal fade" id="addMemberModal" tabindex="-1" aria-labelledby="addMemberModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">{% translate "Ajouter un accès" %}</h5>
                      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <ul class="nav nav-tabs mb-3" id="memberTypeTabs">
                            <li class="nav-item">
                                <a class="nav-link active" id="team-tab" data-bs-toggle="tab" href="#team-pane">
                                    <i class="bi bi-people me-1"></i>{% translate "Équipe" %}
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="user-tab" data-bs-toggle="tab" href="#user-pane">
                                    <i class="bi bi-person me-1"></i>{% translate "Utilisateur" %}
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade" id="user-pane">
                                <form id="addMemberForm" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="user" id="userAccessUserId">
                                    <div class="mb-3">
                                        <label class="form-label">{% translate "Utilisateur" %}</label>
                                        <input type="text" class="form-control" id="userSearchInput" placeholder="{% translate 'Rechercher un utilisateur...' %}" autocomplete="off">
                                        <div id="userSearchResults" class="list-group mt-1" style="max-height:180px;overflow-y:auto;"></div>
                                        <div id="userSelectedDisplay" class="mt-1 text-success small d-none"></div>
                                    </div>
                                    <div class="mb-2">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="can_view" id="userCanView" checked>
                                            <label class="form-check-label" for="userCanView">{% translate "Peut consulter" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="can_edit" id="userCanEdit">
                                            <label class="form-check-label" for="userCanEdit">{% translate "Peut éditer" %}</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade show active" id="team-pane">
                                <form id="addTeamAccessForm" method="post">
                                    {% csrf_token %}
                                    <input type="hidden" name="team" id="teamAccessTeamId">
                                    <div class="mb-3">
                                        <label class="form-label">{% translate "Équipe" %}</label>
                                        <input type="text" class="form-control" id="teamSearchInput" placeholder="{% translate 'Rechercher une équipe...' %}" autocomplete="off">
                                        <div id="teamSearchResults" class="list-group mt-1" style="max-height:180px;overflow-y:auto;"></div>
                                        <div id="teamSelectedDisplay" class="mt-1 text-success small d-none"></div>
                                    </div>
                                    <div class="mb-2">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="can_view" id="teamCanView" checked>
                                            <label class="form-check-label" for="teamCanView">{% translate "Peut consulter" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" name="can_edit" id="teamCanEdit">
                                            <label class="form-check-label" for="teamCanEdit">{% translate "Peut éditer" %}</label>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- Accès strict au projet -->
                        <div class="border-top mt-3 pt-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="strictAccessToggle"
                                       {% if project.strict_access %}checked{% endif %}>
                                <label class="form-check-label fw-semibold" for="strictAccessToggle">
                                    {% translate "Accès strict" %}
                                </label>
                                <div class="form-text text-muted">
                                    {% translate "Si coché, seuls les utilisateurs et équipes listés peuvent accéder au projet (les permissions thématiques ne s'appliquent pas)." %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="button" class="btn btn-primary" onclick="submitAccessForm()">{% translate "Ajouter" %}</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        {% if can_manage_members %}
        <!-- Modale de confirmation de suppression -->
        <div class="modal fade" id="deleteMemberModal" tabindex="-1" aria-labelledby="deleteMemberModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% translate "Confirmer la suppression" %}"/h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
                    </div>
                    <div class="modal-body">
                        <p>{% translate "Voulez-vous vraiment supprimer ce membre du projet ?" %}</p>
                        <div id="memberNameToDeleteContainer"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="button" class="btn btn-danger" id="confirmDeleteBtn" onclick="deleteMember()">{% translate "Supprimer" %}</button>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

    </div>
    <div class="col-md-4">
        <div id="map">
        </div>
    </div>
</div>

{% endblock content%}


{% block script %}
    <!-- Select2 4.1.0 (local) -->
    <script src="{% static 'common/select2.min.js' %}"></script>

    {{ project.lon|json_script:"lon_value" }}
    {{ project.lat|json_script:"lat_value" }}
    {{ status_choices|json_script:"status_choices" }}
    {{ teams_list|json_script:"teams_list_data" }}
    <script>
        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);
        const allTeams = JSON.parse(document.getElementById("teams_list_data").textContent);
        {% if geom_geojson %} var geomGeoJSON = {{ geom_geojson|safe }} {% else %} var geomGeoJSON = null; {% endif %}
        const currentStatus = '{{ project.status }}';
        const project_id = {{ project.id }};
        const user_search_url = "{% url 'projects:projects_user_search' %}";
        const allowedStatuses = {{ allowed_statuses|safe }};
        const document_history_url = "{% url 'projects:projects_document_history' project.id %}";
    </script>
    <script src="{% url 'javascript-catalog' %}"></script>
    <script src="{% static 'projects/projects_detail.js' %}"></script>
    <script src="{% static 'projects/timeline.js' %}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const summaryModal = document.getElementById('interventionSummaryModal');
            const summaryModalBody = document.getElementById('interventionSummaryModalBody');
            const summaryModalLabel = document.getElementById('interventionSummaryModalLabel');

            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;
                }
            });
        });
    </script>

    <script>
    // ── Gestion des attributs de template ──────────────────────────────────────

    document.querySelectorAll('.edit-template-attrs-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const tid = this.dataset.templateId;
            document.getElementById('template-view-' + tid).classList.add('d-none');
            document.getElementById('template-edit-' + tid).classList.remove('d-none');
        });
    });

    document.querySelectorAll('.cancel-template-edit-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const tid = this.dataset.templateId;
            document.getElementById('template-edit-' + tid).classList.add('d-none');
            document.getElementById('template-view-' + tid).classList.remove('d-none');
            const alertEl = document.getElementById('template-edit-alert-' + tid);
            if (alertEl) { alertEl.classList.add('d-none'); alertEl.textContent = ''; }
        });
    });

    // Boutons booléens
    document.querySelectorAll('[data-attr-type="boolean"]').forEach(function(container) {
        container.querySelectorAll('.boolean-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const parent = this.closest('[data-attr-type="boolean"]');
                parent.querySelectorAll('.boolean-btn').forEach(function(b) {
                    b.classList.remove('btn-success', 'btn-danger', 'btn-secondary');
                    b.classList.add('btn-outline-success', 'btn-outline-danger', 'btn-outline-secondary');
                });
                const v = this.dataset.value;
                if (v === 'true') { this.classList.replace('btn-outline-success', 'btn-success'); }
                else if (v === 'false') { this.classList.replace('btn-outline-danger', 'btn-danger'); }
                else { this.classList.replace('btn-outline-secondary', 'btn-secondary'); }
                const hidden = parent.querySelector('input[type="hidden"].attr-input');
                hidden.value = v === 'null' ? '' : v;
            });
        });
    });

    // Boutons sélection multiple
    document.querySelectorAll('[data-attr-type="choice_multiple"]').forEach(function(container) {
        container.querySelectorAll('.choice-multiple-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const parent = this.closest('[data-attr-type="choice_multiple"]');
                this.classList.toggle('btn-primary');
                this.classList.toggle('btn-outline-primary');
                const selected = [];
                parent.querySelectorAll('.choice-multiple-btn.btn-primary').forEach(function(b) {
                    selected.push(b.dataset.value);
                });
                parent.querySelector('input[type="hidden"].attr-input').value = selected.join(',');
            });
        });
    });

    // Sauvegarde
    document.querySelectorAll('.save-template-attrs-btn').forEach(function(btn) {
        btn.addEventListener('click', function() {
            const tid = this.dataset.templateId;
            const pid = this.dataset.projectId;
            const spinner = this.querySelector('.spinner-border');
            const alertEl = document.getElementById('template-edit-alert-' + tid);

            const section = document.getElementById('template-edit-' + tid);
            const inputs = section.querySelectorAll('.attr-input');

            const values = [];
            inputs.forEach(function(inp) {
                const attrId = inp.dataset.attrId;
                const attrType = inp.dataset.attrType;
                let value = inp.value;

                if (attrType === 'choice_multiple') {
                    value = value ? value.split(',').filter(Boolean) : [];
                } else if (attrType === 'boolean') {
                    value = value === 'true' ? true : (value === 'false' ? false : null);
                } else if (attrType === 'number') {
                    value = value !== '' ? parseFloat(value) : null;
                } else if (value === '') {
                    value = null;
                }
                values.push({ attribute_id: parseInt(attrId), value: value });
            });

            spinner.classList.remove('d-none');
            this.disabled = true;
            alertEl.classList.add('d-none');

            fetch('/projects/' + pid + '/save-attribute-values/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': document.cookie.match(/csrftoken=([^;]+)/)?.[1] || ''
                },
                body: JSON.stringify({ values: values })
            })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                spinner.classList.add('d-none');
                btn.disabled = false;
                if (data.success) {
                    // Recharger la page pour afficher les nouvelles valeurs
                    location.reload();
                } else {
                    const msgs = data.errors ? data.errors.join('\n') : (data.message || '{% translate "Erreur lors de la sauvegarde." %}');
                    alertEl.textContent = msgs;
                    alertEl.classList.remove('d-none');
                }
            })
            .catch(function() {
                spinner.classList.add('d-none');
                btn.disabled = false;
                alertEl.textContent = '{% translate "Erreur réseau." %}';
                alertEl.classList.remove('d-none');
            });
        });
    });
    </script>
    
{% endblock script %}