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

{% block head %}
<link rel="stylesheet" href="{% static 'common/jquery-ui.min.css' %}">
<link rel="stylesheet" href="{% static 'common/flatpickr.min.css' %}">
<link rel="stylesheet" href="{% static 'common/flatpickr-material_blue.css' %}">

<style>
    /* --- Styles Généraux & Onglets --- */
    .teams-nav-tabs .nav-link {
        font-weight: 500;
        color: #495057;
        border-radius: 8px;
        padding: 8px 16px;
        transition: all 0.2s ease;
    }
    .teams-nav-tabs .nav-link.active {
        background-color: #0d6efd;
        color: #fff;
        box-shadow: 0 2px 6px rgba(13, 110, 253, 0.35);
    }

    /* --- Onglet 1 : Kanban État actuel --- */
    #teams-board {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .team-col {
        min-width: 260px;
        max-width: 320px;
        flex: 0 0 auto;
    }

    .sortable-members {
        min-height: 60px;
        padding: 4px;
        border-radius: 4px;
        transition: background-color 0.2s;
    }

    .sortable-members.ui-sortable-over {
        background-color: #e8f0fe;
    }

    .unassigned-col .sortable-members.ui-sortable-over {
        background-color: #fff3cd;
    }

    .unassigned-col .team-card .card-header {
        background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    }

    .member-card {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 8px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        transition: box-shadow 0.15s;
    }

    .member-card:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,.12);
    }

    .member-card .drag-handle {
        cursor: grab;
        color: #adb5bd;
        flex-shrink: 0;
    }

    .member-card .drag-handle:active {
        cursor: grabbing;
    }

    .member-info {
        flex: 1;
        overflow: hidden;
    }

    .member-info strong {
        display: block;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-info small {
        color: #6c757d;
        font-size: 0.78rem;
    }

    .member-actions {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }

    .ui-sortable-placeholder {
        border: 2px dashed #86b7fe;
        background: #f0f5ff;
        border-radius: 6px;
        visibility: visible !important;
        height: 44px;
        margin-bottom: 6px;
    }

    .ui-sortable-helper {
        box-shadow: 0 4px 12px rgba(0,0,0,.2);
        rotate: 2deg;
        opacity: 0.9;
    }

    .team-card {
        height: 100%;
    }

    .team-card .card-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    }

    .empty-placeholder {
        color: #adb5bd;
        font-style: italic;
        font-size: 0.85rem;
        text-align: center;
        padding: 12px 0;
        pointer-events: none;
        user-select: none;
    }

    /* --- Onglet 2 : Planification / Calendrier des équipes --- */
    body.tab-planning-active #content-wrapper,
    #content-wrapper:has(#tab-planning.active) {
        overflow-y: hidden !important;
        padding-bottom: 2px !important;
    }

    .teams-container {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: calc(100vh - 65px);
        overflow: hidden;
    }

    .teams-header-row {
        flex-shrink: 0;
        margin-bottom: 6px !important;
    }

    #teamsTabContent {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .tab-pane.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #tab-current-state.active {
        overflow-y: auto;
        display: block;
    }

    #tab-planning.active {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1 1 auto;
        min-height: 0;
    }

    .planning-toolbar {
        flex-shrink: 0;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 8px 12px;
        margin-bottom: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .planning-layout {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        gap: 12px;
        align-items: stretch;
        overflow: hidden;
    }

    .planning-matrix-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        height: 100%;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        overflow: auto;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        position: relative;
    }

    .planning-sidebar-wrapper {
        width: 300px;
        flex: 0 0 300px;
        height: 100%;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .planning-sidebar-header {
        flex-shrink: 0;
        padding: 10px 12px;
        border-bottom: 1px solid #f0f0f0;
        background: #fdfdfd;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .planning-sidebar-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: 8px 12px;
        overflow-y: auto;
    }

    /* Table planning */
    .planning-table {
        margin-bottom: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .planning-table th,
    .planning-table td {
        border-right: 1px solid #cbd5e1;
        border-bottom: 1px solid #cbd5e1;
        vertical-align: top;
    }

    .planning-table thead th {
        background: #f8f9fa;
        position: sticky;
        top: 0;
        z-index: 20;
        padding: 10px 8px;
        text-align: center;
        font-weight: 600;
        min-width: 150px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.06);
        border-bottom: 2px solid #64748b;
    }

    .planning-table thead th.sticky-team-col {
        left: 0;
        top: 0;
        z-index: 30;
        min-width: 230px;
        max-width: 270px;
        text-align: left;
        background: #e2e8f0;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.08);
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #64748b;
    }

    .planning-table tbody td.sticky-team-col {
        position: sticky;
        left: 0;
        z-index: 10;
        background: #ffffff;
        padding: 10px 12px;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05);
        border-right: 2px solid #94a3b8;
    }

    /* Différenciation très marquée des lignes d'équipes */
    .planning-table tbody tr.planning-team-row td {
        border-bottom: 3px solid #64748b !important;
        padding-top: 10px;
        padding-bottom: 12px;
    }

    .planning-table tbody tr.planning-team-row:nth-child(even) td.sticky-team-col {
        background-color: #f1f5f9;
    }

    .planning-table tbody tr.planning-team-row:nth-child(even) td.planning-drop-cell:not(.is-today-cell):not(.is-past-cell):not(.is-weekend-cell) {
        background-color: #f8fafc;
    }

    /* En-têtes et cellules de jours */
    .planning-table th.is-today-header {
        background: linear-gradient(180deg, #e7f1ff 0%, #d0e2ff 100%);
        color: #0b5ed7;
        border-bottom: 2px solid #0d6efd;
    }

    .planning-table td.is-today-cell {
        background-color: #f3f8ff !important;
    }

    .planning-table th.is-weekend-header {
        background: #f8f9fa;
        color: #8c98a4;
    }

    .planning-table td.is-weekend-cell {
        background: #fcfcfc;
    }

    /* Bouton de duplication rapide au bas à droite des en-têtes de jour */
    .btn-quick-duplicate {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 22px;
        height: 22px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #0d6efd;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
        cursor: pointer;
        transition: all 0.15s ease;
        z-index: 5;
    }

    .btn-quick-duplicate:hover {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #ffffff;
        box-shadow: 0 2px 5px rgba(13,110,253,0.3);
        transform: scale(1.1);
    }

    /* Jours passés grisés */
    .planning-table th.is-past-header {
        background: #e9ecef;
        color: #6c757d;
    }

    .planning-table td.is-past-cell {
        background-color: #f3f4f6 !important;
        background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px);
        cursor: not-allowed;
    }

    /* Cellules de dépôt */
    .planning-drop-cell {
        min-height: 90px;
        padding: 6px;
        transition: background-color 0.15s, border-color 0.15s;
    }

    .planning-drop-cell.drag-over {
        background-color: #e8f0fe !important;
        outline: 2px dashed #0d6efd;
        outline-offset: -2px;
    }

    /* Cartes de membres dans le planning */
    .planning-member-card {
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-left: 3px solid #0d6efd;
        border-radius: 6px;
        padding: 5px 8px;
        margin-bottom: 5px;
        font-size: 0.82rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        cursor: grab;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        transition: transform 0.1s, box-shadow 0.1s, border-color 0.1s;
    }

    .planning-member-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0,0,0,0.08);
    }

    .planning-member-card:active {
        cursor: grabbing;
    }

    .planning-member-card.is-absent {
        border-left-color: #dc3545;
        background: #fff8f8;
        border-style: dashed;
    }

    .planning-member-card.is-absent .member-name-text {
        text-decoration: line-through;
        color: #842029;
    }

    /* Membre sur jour passé */
    .planning-member-card.is-past-member {
        cursor: default;
        opacity: 0.85;
        background: #fdfdfd;
        border-left-color: #6c757d;
    }

    .planning-member-card.is-past-member:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .planning-member-info {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .planning-card-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    .btn-absence-toggle {
        padding: 1px 4px;
        font-size: 0.72rem;
        border-radius: 4px;
    }

    /* Sidebar cards */
    .sidebar-member-item {
        background: #ffffff;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 8px 10px;
        margin-bottom: 6px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        cursor: grab;
        transition: all 0.15s ease;
    }

    .sidebar-member-item:hover {
        background: #f8f9fa;
        border-color: #0d6efd;
        box-shadow: 0 2px 5px rgba(0,0,0,0.06);
    }

    .sidebar-member-item:active {
        cursor: grabbing;
    }

    .member-avatar-pill {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #e7f1ff;
        color: #0d6efd;
        font-weight: 600;
        font-size: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid px-3 pt-2 pb-0 teams-container">

    <!-- En-tête avec titre & onglets -->
    <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2 teams-header-row">
        <div>
            <h4 class="mb-0">
                <i class="bi bi-people-fill me-2 text-primary"></i>{% trans "Gestion des équipes" %}
            </h4>
            <small class="text-muted">{% trans "Affectation des membres, suivi des présences et planification calendaire." %}</small>
        </div>

        <!-- Onglets Navigation -->
        <ul class="nav nav-pills teams-nav-tabs" id="teamsNavTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="tab-current-state-btn" data-bs-toggle="pill" data-bs-target="#tab-current-state" type="button" role="tab">
                    <i class="bi bi-kanban me-2"></i>{% trans "État actuel" %}
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="tab-planning-btn" data-bs-toggle="pill" data-bs-target="#tab-planning" type="button" role="tab">
                    <i class="bi bi-calendar3-range me-2"></i>{% trans "Planification des équipes" %}
                </button>
            </li>
        </ul>
    </div>

    <!-- Contenu des onglets -->
    <div class="tab-content" id="teamsTabContent">

        <!-- ============================================================
             ONGLET 1 : ÉTAT ACTUEL (KANBAN)
             ============================================================ -->
        <div class="tab-pane fade show active" id="tab-current-state" role="tabpanel">

            {% if not teams %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle me-2"></i>{% trans "Aucune équipe accessible." %}
            </div>
            {% else %}

            <!-- Tableau Kanban des équipes -->
            <div class="d-flex gap-3 pb-3" id="teams-board">

                <!-- Colonne : membres non assignés -->
                <div class="team-col unassigned-col" id="team-col-unassigned">
                    <div class="card team-card">
                        <div class="card-header d-flex justify-content-between align-items-start py-2">
                            <div class="overflow-hidden me-2">
                                <div class="fw-semibold text-truncate">
                                    <i class="bi bi-person-dash me-1"></i>{% trans "Non assignés" %}
                                </div>
                                <small class="text-muted">{% trans "Aucune équipe" %}</small>
                            </div>
                            {% if can_edit %}
                            <button class="btn btn-sm btn-outline-warning border-0"
                                    title="{% trans 'Ajouter un membre non assigné' %}"
                                    onclick="openAddMemberModal(null, '{% trans "Non assignés" %}', {% if user_company %}{{ user_company.id }}{% else %}null{% endif %})">  
                                <i class="bi bi-person-plus"></i>
                            </button>
                            {% endif %}
                        </div>
                        <div class="card-body p-2">
                            <ul class="sortable-members list-unstyled mb-0"
                                data-team-id=""
                                id="members-unassigned">
                                {% for member in unassigned_members %}
                                <li class="member-card mb-2" data-member-id="{{ member.id }}" data-member-name="{{ member.name|escapejs }}"{% if member.user %} data-user-id="{{ member.user.id }}"{% endif %}>
                                    {% if can_edit %}
                                    <i class="bi bi-grip-vertical drag-handle fs-5"></i>
                                    {% endif %}
                                    <div class="member-info">
                                        <strong>{{ member.name }}</strong>
                                        {% if member.user %}
                                        <small>{{ member.user.get_full_name|default:member.user.username }}</small>
                                        {% endif %}
                                    </div>
                                    {% if can_edit %}
                                    <div class="member-actions">
                                        <button class="btn btn-sm btn-outline-secondary"
                                                title="{% trans 'Assigner à une équipe' %}"
                                                onclick="openMoveMemberModal({{ member.id }}, '{{ member.name|escapejs }}', null)">
                                            <i class="bi bi-arrow-left-right"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger"
                                                title="{% trans 'Supprimer ce membre' %}"
                                                onclick="deleteMember({{ member.id }}, '{{ member.name|escapejs }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                    {% endif %}
                                </li>
                                {% empty %}
                                <li class="empty-placeholder" id="empty-unassigned">
                                    <i class="bi bi-inbox d-block mb-1" style="font-size:1.2rem;"></i>
                                    {% trans "Aucun membre" %}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        <div class="card-footer text-muted small py-1 px-2">
                            <span id="count-unassigned">{{ unassigned_members.count }}</span>
                            {% trans "membre(s)" %}
                        </div>
                    </div>
                </div>

                <!-- Colonnes des équipes -->
                {% for team in teams %}
                <div class="team-col" id="team-col-{{ team.id }}">
                    <div class="card team-card">
                        <div class="card-header d-flex justify-content-between align-items-start py-2">
                            <div class="overflow-hidden me-2">
                                <div class="fw-semibold text-truncate">{{ team.name }}</div>
                                <small class="text-muted">{{ team.company.name }}</small>
                            </div>
                            <div class="d-flex flex-shrink-0">
                                {% if team.active_interventions_count > 0 %}
                                <button class="btn btn-sm btn-outline-info border-0"
                                        title="{% trans 'Voir les interventions assignées' %} ({{ team.active_interventions_count }})"
                                        onclick="openTeamInterventionsModal({{ team.id }}, '{{ team.name|escapejs }}')">
                                    <i class="bi bi-list-task"></i>
                                </button>
                                {% endif %}
                                {% if can_edit %}
                                <button class="btn btn-sm btn-outline-secondary border-0"
                                        title="{% trans 'Ajouter un membre' %}"
                                        onclick="openAddMemberModal({{ team.id }}, '{{ team.name|escapejs }}', {{ team.company.id }})">
                                    <i class="bi bi-person-plus"></i>
                                </button>
                                {% endif %}
                            </div>
                        </div>

                        <div class="card-body p-2">
                            <ul class="sortable-members list-unstyled mb-0"
                                data-team-id="{{ team.id }}"
                                id="members-{{ team.id }}">
                                {% for member in team.members.all %}
                                <li class="member-card mb-2" data-member-id="{{ member.id }}" data-member-name="{{ member.name|escapejs }}"{% if member.user %} data-user-id="{{ member.user.id }}"{% endif %}>
                                    {% if can_edit %}
                                    <i class="bi bi-grip-vertical drag-handle fs-5"></i>
                                    {% endif %}
                                    <div class="member-info">
                                        <div class="d-flex align-items-center flex-wrap gap-1">
                                            <strong>{{ member.name }}</strong>
                                            {% if member.teams.count > 1 %}
                                            <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-1 py-0" style="font-size: 0.65rem;" title="{% trans 'Affecté à plusieurs équipes' %} : {{ member.teams_display }}">
                                                <i class="bi bi-diagram-3 me-1"></i>{% trans "Multi-équipes" %}
                                            </span>
                                            {% endif %}
                                        </div>
                                        {% if member.user %}
                                        <small>{{ member.user.get_full_name|default:member.user.username }}</small>
                                        {% endif %}
                                    </div>
                                    {% if can_edit %}
                                    <div class="member-actions">
                                        <button class="btn btn-sm btn-outline-secondary"
                                                title="{% trans 'Modifier ou déplacer ce membre' %}"
                                                onclick="openMoveMemberModal({{ member.id }}, '{{ member.name|escapejs }}', {{ team.id }})">
                                            <i class="bi bi-arrow-left-right"></i>
                                        </button>
                                        {% if member.teams.count > 1 %}
                                        <button class="btn btn-sm btn-outline-warning"
                                                title="{% trans 'Retirer de cette équipe' %}"
                                                onclick="removeMemberFromTeam({{ member.id }}, {{ team.id }}, '{{ member.name|escapejs }}', '{{ team.name|escapejs }}')">
                                            <i class="bi bi-x-circle"></i>
                                        </button>
                                        {% else %}
                                        <button class="btn btn-sm btn-outline-danger"
                                                title="{% trans 'Supprimer ce membre' %}"
                                                onclick="deleteMember({{ member.id }}, '{{ member.name|escapejs }}')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                        {% endif %}
                                    </div>
                                    {% endif %}
                                </li>
                                {% empty %}
                                <li class="empty-placeholder" id="empty-{{ team.id }}">
                                    <i class="bi bi-inbox d-block mb-1" style="font-size:1.2rem;"></i>
                                    {% trans "Aucun membre" %}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>

                        <div class="card-footer text-muted small py-1 px-2">
                            <span id="count-{{ team.id }}">{{ team.members.count }}</span>
                            {% trans "membre(s)" %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}

        </div>

        <!-- ============================================================
             ONGLET 2 : PLANIFICATION DES ÉQUIPES (CALENDRIER)
             ============================================================ -->
        <div class="tab-pane fade" id="tab-planning" role="tabpanel">

            <!-- Toolbar de planification -->
            <div class="planning-toolbar d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary" id="btn-planning-prev" title="{% trans 'Période précédente' %}">
                            <i class="bi bi-chevron-left"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="btn-planning-today">
                            <i class="bi bi-calendar-event me-1"></i>{% trans "Aujourd'hui" %}
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="btn-planning-next" title="{% trans 'Période suivante' %}">
                            <i class="bi bi-chevron-right"></i>
                        </button>
                    </div>

                    <!-- Date picker Flatpickr -->
                    <div class="input-group input-group-sm" style="width: 140px;">
                        <span class="input-group-text"><i class="bi bi-calendar3"></i></span>
                        <input type="text" id="planning-datepicker" class="form-control" placeholder="YYYY-MM-DD">
                    </div>

                    <!-- Sélecteur de mode de vue -->
                    <div class="d-flex align-items-center gap-1">
                        <span class="text-muted small text-nowrap"><i class="bi bi-eye me-1"></i>{% trans "Vue :" %}</span>
                        <div class="btn-group btn-group-sm" role="group" id="planning-viewmode-group">
                            <button type="button" class="btn btn-outline-primary" data-mode="work_week">{% trans "5j (Ouvré)" %}</button>
                            <button type="button" class="btn btn-primary" data-mode="week">{% trans "1 Semaine (7j)" %}</button>
                            <button type="button" class="btn btn-outline-primary" data-mode="two_weeks">{% trans "2 Semaines" %}</button>
                            <button type="button" class="btn btn-outline-primary" data-mode="month">{% trans "1 Mois" %}</button>
                        </div>
                    </div>

                    <!-- Sélecteur global de portée d'assignation -->
                    <div class="d-flex align-items-center gap-1 ms-1 p-1 px-2 rounded" style="background: #eef2ff; border: 1px solid #c7d2fe;">
                        <span class="fw-semibold small text-primary-emphasis text-nowrap" title="{% trans "Période sur laquelle un membre est affecté ou retiré lors d'un glisser-déposer" %}"><i class="bi bi-calendar-check me-1 text-primary"></i>{% trans "Affecter par :" %}</span>
                        <div class="btn-group btn-group-sm" role="group" id="planning-assign-scope-group" title="{% trans "Durée appliquée lors de l'assignation ou du retrait d'un membre" %}">
                            <button type="button" class="btn btn-primary" data-scope="day">{% trans "Jour" %}</button>
                            <button type="button" class="btn btn-outline-primary" data-scope="week">{% trans "Semaine" %}</button>
                            <button type="button" class="btn btn-outline-primary" data-scope="month">{% trans "Mois" %}</button>
                        </div>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <!-- Filtre par Société -->
                    <div id="planning-company-filter-container" style="min-width: 180px;">
                        <select class="form-select form-select-sm" id="planning-company-filter">
                            <option value="">{% trans "Toutes les sociétés" %}</option>
                        </select>
                    </div>

                    {% if can_edit %}
                    <!-- Bouton Dupliquer -->
                    <button type="button" class="btn btn-sm btn-outline-primary" id="btn-open-duplicate-modal" title="{% trans 'Dupliquer une journée ou une semaine' %}">
                        <i class="bi bi-copy me-1"></i>{% trans "Dupliquer..." %}
                    </button>
                    {% endif %}

                    <!-- Bouton Actualiser -->
                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-refresh-planning" title="{% trans 'Actualiser' %}">
                        <i class="bi bi-arrow-clockwise"></i>
                    </button>
                </div>
            </div>

            <!-- Grille de planification + Volet latéral -->
            <div class="planning-layout">

                <!-- Grille principale -->
                <div class="planning-matrix-wrapper">
                    <div id="planning-loading-spinner" class="text-center py-5 d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">{% trans "Chargement du planning..." %}</span>
                        </div>
                    </div>

                    <table class="planning-table table table-sm" id="planning-matrix-table">
                        <thead>
                            <tr id="planning-table-header-row">
                                <th class="sticky-team-col">{% trans "Équipes" %}</th>
                                <!-- Les colonnes de jours seront injectées en JS -->
                            </tr>
                        </thead>
                        <tbody id="planning-table-body">
                            <!-- Les lignes d'équipes seront injectées en JS -->
                        </tbody>
                    </table>
                </div>

                <!-- Volet latéral : Membres & Filtres -->
                <div class="planning-sidebar-wrapper">
                    <div class="planning-sidebar-header">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-semibold text-dark">
                                <i class="bi bi-person-lines-fill me-1 text-primary"></i>{% trans "Membres" %}
                            </span>
                            <span class="badge bg-secondary rounded-pill" id="planning-sidebar-count">0</span>
                        </div>

                        <!-- Recherche -->
                        <div class="mb-2">
                            <input type="search" class="form-control form-control-sm" id="planning-member-search" placeholder="{% trans 'Rechercher un membre…' %}">
                        </div>

                        <!-- Filtres Profil / Rôle -->
                        <div class="row g-1">
                            <div class="col-6">
                                <select class="form-select form-select-sm" id="planning-role-filter">
                                    <option value="">{% trans "Tous les rôles" %}</option>
                                </select>
                            </div>
                            <div class="col-6">
                                <select class="form-select form-select-sm" id="planning-presence-filter">
                                    <option value="all">{% trans "Tous" %}</option>
                                    <option value="present">{% trans "Présents" %}</option>
                                    <option value="absent">{% trans "Absents" %}</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="planning-sidebar-body" id="planning-sidebar-members">
                        <!-- Liste des membres injectée en JS -->
                    </div>
                </div>

            </div>

        </div>

    </div>

</div>

<!-- ============================================================
     Modales (affichées uniquement si droits d'édition)
     ============================================================ -->
{% if can_edit %}

<!-- Modale 1 : Avertissement de déplacement immédiat (Onglet 1) -->
<div class="modal fade" id="confirmImmediateMoveModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title text-warning">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{% trans "Affectation d'équipe immédiate" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-3">
                <p class="mb-2">
                    {% trans "Vous modifiez l'affectation de" %} <strong id="immediateMoveMemberName"></strong> {% trans "pour aujourd'hui." %}
                </p>
                <div class="alert alert-warning py-2 px-3 small mb-0">
                    <i class="bi bi-info-circle me-1"></i>
                    {% trans "Pour planifier des affectations d'équipes pour demain ou les jours futurs sans impacter la journée en cours, utilisez l'onglet" %} <strong>« {% trans "Planification des équipes" %} »</strong>.
                </div>
            </div>
            <div class="modal-footer border-top-0 pt-0 d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnCancelImmediateMove" data-bs-dismiss="modal">
                    {% trans "Annuler" %}
                </button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-primary fw-semibold" id="btnConfirmAddImmediate">
                        <i class="bi bi-diagram-3 me-1"></i>{% trans "Ajouter aussi (multi-équipes)" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-warning fw-semibold" id="btnConfirmImmediateMove">
                        <i class="bi bi-arrow-right me-1"></i>{% trans "Déplacer" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale 1b : Confirmation Multi-équipes (Planning - Onglet 2) -->
<div class="modal fade" id="planningMultiTeamConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-bottom-0 pb-0">
                <h5 class="modal-title text-warning">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>{% trans "Membre déjà planifié ce jour" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-3">
                <p class="mb-2">
                    <strong id="multiTeamMemberName"></strong> {% trans "est déjà planifié(e) le" %} <strong id="multiTeamDateDisplay"></strong> {% trans "dans l'équipe" %} :
                    <span class="badge bg-secondary" id="multiTeamExistingTeamName"></span>.
                </p>
                <p class="mb-0 text-muted small">
                    {% trans "Vous tentez de l'assigner à l'équipe" %} : <strong id="multiTeamTargetTeamName"></strong>.
                    {% trans "Souhaitez-vous déplacer ce membre ou l'affecter aux deux équipes ?" %}
                </p>
                <div class="mt-2 p-2 bg-light rounded small border">
                    <i class="bi bi-clock-history me-1 text-primary"></i>{% trans "Portée d'affectation :" %} <strong id="multiTeamScopeDisplay">Jour</strong>
                </div>
            </div>
            <div class="modal-footer border-top-0 pt-0 d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">
                    {% trans "Annuler" %}
                </button>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-primary fw-semibold" id="btnPlanningAddMultiTeam">
                        <i class="bi bi-diagram-3 me-1"></i>{% trans "Affecter aussi à cette équipe" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-warning fw-semibold" id="btnPlanningMoveTeam">
                        <i class="bi bi-arrow-right me-1"></i>{% trans "Déplacer vers cette équipe" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modale 2 : Duplication de planification -->
<div class="modal fade" id="duplicatePlanningModal" tabindex="-1" aria-labelledby="duplicatePlanningModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="duplicatePlanningModalLabel">
                    <i class="bi bi-copy me-2 text-primary"></i>{% trans "Dupliquer la configuration des équipes" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Mode de duplication -->
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% trans "Que souhaitez-vous dupliquer ?" %}</label>
                    <div class="d-flex gap-3 flex-wrap">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="dupMode" id="dupModeDay" value="day" checked>
                            <label class="form-check-label" for="dupModeDay">{% trans "Une journée" %}</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="dupMode" id="dupModeWeek" value="week">
                            <label class="form-check-label" for="dupModeWeek">{% trans "Une semaine complète" %}</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="dupMode" id="dupModeMonth" value="month">
                            <label class="form-check-label" for="dupModeMonth">{% trans "Un mois complet" %}</label>
                        </div>
                    </div>
                </div>

                <!-- Section Journée -->
                <div id="dupSectionDay">
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Jour source" %}</label>
                            <input type="date" class="form-control form-control-sm" id="dupSourceDate">
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Jour cible" %}</label>
                            <input type="date" class="form-control form-control-sm" id="dupTargetDate">
                        </div>
                    </div>
                </div>

                <!-- Section Semaine -->
                <div id="dupSectionWeek" class="d-none">
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Semaine source (Lundi)" %}</label>
                            <input type="date" class="form-control form-control-sm" id="dupSourceWeek">
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Semaine cible (Lundi)" %}</label>
                            <input type="date" class="form-control form-control-sm" id="dupTargetWeek">
                        </div>
                    </div>
                </div>

                <!-- Section Mois -->
                <div id="dupSectionMonth" class="d-none">
                    <div class="row g-2 mb-3">
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Mois source" %}</label>
                            <input type="month" class="form-control form-control-sm" id="dupSourceMonth">
                        </div>
                        <div class="col-6">
                            <label class="form-label small fw-semibold">{% trans "Mois cible" %}</label>
                            <input type="month" class="form-control form-control-sm" id="dupTargetMonth">
                        </div>
                    </div>
                </div>

                <!-- Option Absences -->
                <div class="form-check form-switch mb-3">
                    <input class="form-check-input" type="checkbox" id="dupCopyAbsences">
                    <label class="form-check-label small" for="dupCopyAbsences">
                        {% trans "Copier également les statuts d'absence" %}
                    </label>
                </div>

                <div id="dupModalAlert" class="alert alert-danger d-none small"></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="btnSubmitDuplicate" onclick="submitDuplicatePlanning()">
                    <i class="bi bi-copy me-1"></i>{% trans "Dupliquer" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modale 3 : Détails et bascule de l'absence -->
<div class="modal fade" id="absenceModal" tabindex="-1" aria-labelledby="absenceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="absenceModalLabel">
                    <i class="bi bi-person-x text-danger me-1"></i>{% trans "Gestion de l'absence" %}
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="absenceMemberId">
                <input type="hidden" id="absenceDate">

                <div class="mb-2 text-center">
                    <strong id="absenceMemberName"></strong>
                    <div class="text-muted small" id="absenceDateDisplay"></div>
                </div>

                <div class="mb-3">
                    <label class="form-label small fw-semibold">{% trans "Motif d'absence" %}</label>
                    <select class="form-select form-select-sm" id="absenceReason">
                        <option value="conge">{% trans "Congé / RTT" %}</option>
                        <option value="maladie">{% trans "Maladie / Arrêt" %}</option>
                        <option value="formation">{% trans "Formation" %}</option>
                        <option value="autre">{% trans "Autre" %}</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label small fw-semibold">{% trans "Commentaire (optionnel)" %}</label>
                    <input type="text" class="form-control form-control-sm" id="absenceComment" placeholder="{% trans 'Précisions…' %}">
                </div>

                <div id="absenceModalError" class="alert alert-danger d-none small"></div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-sm btn-outline-success" id="btnRemoveAbsence" onclick="submitToggleAbsence(false)">
                    <i class="bi bi-person-check me-1"></i>{% trans "Présent" %}
                </button>
                <button type="button" class="btn btn-sm btn-danger" id="btnSetAbsence" onclick="submitToggleAbsence(true)">
                    <i class="bi bi-person-x me-1"></i>{% trans "Marquer Absent" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modale : Ajouter un membre (existant) -->
<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" id="addMemberModalLabel">
                    <i class="bi bi-person-plus me-2"></i><span id="addMemberModalTitle">{% trans "Ajouter un membre" %}</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="addMemberTeamId">
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% trans "Nom affiché" %} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="newMemberName" placeholder="{% trans 'Ex : Jean Dupont' %}">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% trans "Compte utilisateur" %} <span class="text-danger">*</span></label>
                    <select class="form-select" id="newMemberUser">
                        <option value="">— {% trans "Sélectionner un utilisateur" %} —</option>
                        {% for u in available_users %}
                        <option value="{{ u.id }}" data-company-id="{{ u.config.company.id|default:'' }}">
                            {% if u.get_full_name %}{{ u.get_full_name }} ({{ u.username }}){% else %}{{ u.username }}{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div id="addMemberError" class="alert alert-danger d-none"></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" onclick="createMember()">
                    <i class="bi bi-person-plus me-1"></i>{% trans "Ajouter" %}
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modale : Éditer un membre (nom + équipe) (existant) -->
<div class="modal fade" id="moveMemberModal" tabindex="-1" aria-labelledby="moveMemberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="moveMemberModalLabel">
                    <i class="bi bi-pencil-square me-2"></i>{% trans "Modifier le membre" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="moveMemberId">
                <input type="hidden" id="moveOldTeamId">
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% trans "Nom affiché" %} <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="editMemberName">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">{% trans "Équipe" %}</label>
                    <select class="form-select" id="moveToTeamId">
                        <option value="">— {% trans "Ne pas modifier l'équipe" %} —</option>
                        <option value="unassign">&#9747; {% trans "Désassigner (aucune équipe)" %}</option>
                        <optgroup label="{% trans 'Assigner à une équipe' %}">
                        {% for team in teams %}
                        <option value="{{ team.id }}">{{ team.name }} — {{ team.company.name }}</option>
                        {% endfor %}
                        </optgroup>
                    </select>
                </div>
                <div class="mb-3 d-none" id="moveActionContainer">
                    <label class="form-label fw-semibold small">{% trans "Type d'affectation" %}</label>
                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="moveActionRadio" id="moveActionMove" value="move" checked>
                            <label class="form-check-label small" for="moveActionMove">{% trans "Déplacer (remplace l'ancienne équipe)" %}</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="moveActionRadio" id="moveActionAdd" value="add">
                            <label class="form-check-label small" for="moveActionAdd">{% trans "Ajouter aussi (multi-équipes)" %}</label>
                        </div>
                    </div>
                </div>
                <div id="moveMemberError" class="alert alert-danger d-none"></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" onclick="confirmMoveMember()">
                    <i class="bi bi-check2 me-1"></i>{% trans "Enregistrer" %}
                </button>
            </div>
        </div>
    </div>
</div>

{% endif %}

<!-- Modale : Interventions assignées à une équipe (existant) -->
<div class="modal fade" id="teamInterventionsModal" tabindex="-1" aria-labelledby="teamInterventionsModalLabel" 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="teamInterventionsModalLabel">
                    <i class="bi bi-list-task me-2"></i><span id="teamInterventionsModalTitle">{% trans "Interventions" %}</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0" id="teamInterventionsModalBody">
                <div class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% trans "Chargement..." %}</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer text-muted small" id="teamInterventionsModalFooter"></div>
        </div>
    </div>
</div>

<!-- Modale : Résumé d’intervention (existant) -->
<div class="modal fade" id="teamInterventionSummaryModal" tabindex="-1" aria-labelledby="teamInterventionSummaryModalLabel" 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="teamInterventionSummaryModalLabel"
                    data-base-title="{% trans 'Résumé intervention' %}">
                    {% trans "Résumé intervention" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="teamInterventionSummaryModalBody"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="teamInterventionSummaryBackBtn">
                    <i class="bi bi-arrow-left me-1"></i>{% trans "Retour aux interventions" %}
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Fermer" %}</button>
            </div>
        </div>
    </div>
<!-- Modale : Historique d’un membre -->
<div class="modal fade" id="memberHistoryModal" tabindex="-1" aria-labelledby="memberHistoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title d-flex align-items-center gap-2" id="memberHistoryModalLabel">
                    <i class="bi bi-person-badge text-primary fs-4"></i>
                    <span id="member-history-title-name">{% trans "Historique du membre" %}</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Fermer' %}"></button>
            </div>
            <div class="modal-body">
                <div id="member-history-spinner" class="text-center py-5">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{% trans "Chargement..." %}</span>
                    </div>
                </div>
                <div id="member-history-content" class="d-none">
                    <!-- Header info card -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded border">
                                <div class="small text-muted mb-1">{% trans "Technicien / Membre" %}</div>
                                <h5 class="mb-0 fw-bold text-primary" id="member-history-name-card"></h5>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 bg-light rounded border">
                                <div class="small text-muted mb-1">{% trans "Entreprise" %}</div>
                                <h5 class="mb-0 fw-bold" id="member-history-company-card"></h5>
                            </div>
                        </div>
                    </div>

                    <!-- Tables for Teams History and Interventions History -->
                    <div class="row g-4">
                        <!-- Team membership history -->
                        <div class="col-md-5">
                            <div class="card h-100 shadow-sm border">
                                <div class="card-header bg-white fw-bold d-flex align-items-center gap-2">
                                    <i class="bi bi-people-fill text-primary"></i>
                                    {% trans "Historique des équipes" %}
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light">
                                                <tr>
                                                    <th>{% trans "Équipe" %}</th>
                                                    <th>{% trans "Entrée" %}</th>
                                                    <th>{% trans "Sortie" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody id="member-history-teams-tbody"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Interventions assignments history -->
                        <div class="col-md-7">
                            <div class="card h-100 shadow-sm border">
                                <div class="card-header bg-white fw-bold d-flex align-items-center gap-2">
                                    <i class="bi bi-tools text-primary"></i>
                                    {% trans "Dernières interventions réalisées / assignées" %}
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                        <table class="table table-hover align-middle mb-0">
                                            <thead class="table-light sticky-top">
                                                <tr>
                                                    <th>{% trans "Date" %}</th>
                                                    <th>{% trans "Code" %}</th>
                                                    <th>{% trans "Titre" %}</th>
                                                    <th>{% trans "Équipe" %}</th>
                                                    <th>{% trans "Statut" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody id="member-history-interventions-tbody"></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Fermer" %}</button>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block script %}
<script src="{% static 'common/jquery-ui.min.js' %}"></script>
<script src="{% static 'common/flatpickr.min.js' %}"></script>

<script>
const CSRF_TOKEN = '{{ csrf_token }}';
const CAN_EDIT_TEAMS = {% if can_edit %}true{% else %}false{% endif %};
const CAN_VIEW_MEMBER_HISTORY = {% if can_view_member_history %}true{% else %}false{% endif %};

function postJSON(url, data, onSuccess, onError) {
    $.ajax({
        url: url,
        type: 'POST',
        contentType: 'application/json',
        headers: { 'X-CSRFToken': CSRF_TOKEN },
        data: JSON.stringify(data),
        success: function(resp) {
            if (resp.success) {
                onSuccess(resp);
            } else {
                onError(resp.error || "{% trans 'Une erreur est survenue.' %}");
            }
        },
        error: function(xhr) {
            let msg = "{% trans 'Une erreur est survenue.' %}";
            try {
                const r = JSON.parse(xhr.responseText);
                if (r.error) msg = r.error;
            } catch(e) {}
            onError(msg);
        }
    });
}

function escapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

{% if can_edit %}
// ───────────────────────────────────────────────
// Onglet 1 : Drag & drop avec Avertissement Immédiat
// ───────────────────────────────────────────────
let _pendingMove = null;

$(function () {
    $('.sortable-members').sortable({
        connectWith: '.sortable-members',
        placeholder: 'ui-sortable-placeholder',
        handle: '.drag-handle',
        tolerance: 'pointer',
        receive: function (event, ui) {
            const memberId = ui.item.data('member-id');
            const memberName = ui.item.data('member-name') || ui.item.find('strong').text().trim();
            const rawTeamId = $(this).data('team-id');
            const teamIdPayload = (rawTeamId === '' || rawTeamId === null || rawTeamId === undefined) ? null : rawTeamId;
            
            const rawOldTeamId = ui.sender.data('team-id');
            const oldTeamIdPayload = (rawOldTeamId === '' || rawOldTeamId === null || rawOldTeamId === undefined) ? null : rawOldTeamId;

            // Préparer l'action en attente de confirmation
            _pendingMove = {
                memberId: memberId,
                teamIdPayload: teamIdPayload,
                oldTeamIdPayload: oldTeamIdPayload,
                senderSortable: ui.sender,
                item: ui.item
            };

            // Afficher la modale d'avertissement
            $('#immediateMoveMemberName').text(memberName);
            const modalEl = document.getElementById('confirmImmediateMoveModal');
            const modal = new bootstrap.Modal(modalEl);
            modal.show();
        }
    });
    $('.sortable-members').disableSelection();

    // Bouton Déplacer de la modale d'avertissement immédiat
    $('#btnConfirmImmediateMove').on('click', function() {
        if (!_pendingMove) return;
        const moveData = _pendingMove;
        _pendingMove = null;
        bootstrap.Modal.getInstance(document.getElementById('confirmImmediateMoveModal')).hide();

        postJSON(
            `/contracts/teams/members/${moveData.memberId}/move/`,
            { team_id: moveData.teamIdPayload, old_team_id: moveData.oldTeamIdPayload, action: 'move' },
            function(resp) {
                location.reload();
            },
            function(errMsg) {
                alert(errMsg);
                location.reload();
            }
        );
    });

    // Bouton Ajouter aussi (multi-équipes) de la modale d'avertissement immédiat
    $('#btnConfirmAddImmediate').on('click', function() {
        if (!_pendingMove) return;
        const moveData = _pendingMove;
        _pendingMove = null;
        bootstrap.Modal.getInstance(document.getElementById('confirmImmediateMoveModal')).hide();

        postJSON(
            `/contracts/teams/members/${moveData.memberId}/move/`,
            { team_id: moveData.teamIdPayload, old_team_id: moveData.oldTeamIdPayload, action: 'add' },
            function(resp) {
                location.reload();
            },
            function(errMsg) {
                alert(errMsg);
                location.reload();
            }
        );
    });

    // Bouton Annuler de la modale d'avertissement
    $('#confirmImmediateMoveModal').on('hidden.bs.modal', function () {
        if (_pendingMove) {
            // Annuler le déplacement visuel
            $(_pendingMove.senderSortable).sortable('cancel');
            _pendingMove = null;
        }
    });

    // Écouter le changement d'équipe dans la modale d'édition pour afficher l'option multi-équipes
    $('#moveToTeamId').on('change', function() {
        const val = $(this).val();
        const oldTeamId = $('#moveOldTeamId').val();
        if (val && val !== 'unassign' && oldTeamId && oldTeamId !== val) {
            $('#moveActionContainer').removeClass('d-none');
        } else {
            $('#moveActionContainer').addClass('d-none');
        }
    });

    // Auto-fill member name when user is selected
    $('#newMemberUser').on('change', function() {
        const text = $(this).find('option:selected').text().trim();
        if (text && $(this).val()) {
            const name = text.split(' (')[0];
            $('#newMemberName').val(name);
        }
    });
});

function updateCounters() {
    $('.sortable-members').each(function() {
        const rawId = $(this).data('team-id');
        const colId = (rawId === '' || rawId === null || rawId === undefined) ? 'unassigned' : rawId;
        const count = $(this).find('li.member-card').length;
        $(`#count-${colId}`).text(count);
    });
}

function updateEmptyPlaceholders() {
    $('.sortable-members').each(function() {
        const rawId = $(this).data('team-id');
        const colId = (rawId === '' || rawId === null || rawId === undefined) ? 'unassigned' : rawId;
        const hasMembers = $(this).find('li.member-card').length > 0;
        const placeholder = $(`#empty-${colId}`);
        if (hasMembers) {
            placeholder.hide();
        } else {
            placeholder.show();
        }
    });
}

function openMoveMemberModal(memberId, memberName, currentTeamId) {
    document.getElementById('moveMemberId').value = memberId;
    document.getElementById('moveOldTeamId').value = (currentTeamId !== null && currentTeamId !== undefined) ? currentTeamId : '';
    document.getElementById('editMemberName').value = memberName;
    const sel = document.getElementById('moveToTeamId');
    sel.value = '';
    for (const opt of sel.options) {
        if (opt.value === 'unassign') {
            opt.disabled = (currentTeamId === null || currentTeamId === undefined);
        } else {
            opt.disabled = (opt.value !== '' && opt.value == currentTeamId);
        }
    }
    $('#moveActionContainer').addClass('d-none');
    $('#moveActionMove').prop('checked', true);
    document.getElementById('moveMemberError').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('moveMemberModal')).show();
}

function confirmMoveMember() {
    const memberId = document.getElementById('moveMemberId').value;
    const oldTeamId = document.getElementById('moveOldTeamId').value;
    const newName = document.getElementById('editMemberName').value.trim();
    const selected = document.getElementById('moveToTeamId').value;

    if (!newName) {
        showError('moveMemberError', "{% trans 'Le nom du membre est requis.'|escapejs %}");
        return;
    }

    const payload = { name: newName };
    payload.old_team_id = oldTeamId !== '' ? parseInt(oldTeamId) : null;
    if (selected !== '') {
        payload.team_id = selected === 'unassign' ? null : parseInt(selected);
    }
    const action = (!$('#moveActionContainer').hasClass('d-none'))
        ? ($('input[name="moveActionRadio"]:checked').val() || 'move')
        : 'move';
    payload.action = action;

    bootstrap.Modal.getInstance(document.getElementById('moveMemberModal')).hide();

    postJSON(
        `/contracts/teams/members/${memberId}/update/`,
        payload,
        function() { location.reload(); },
        function(err) { alert(err); }
    );
}

function removeMemberFromTeam(memberId, teamId, memberName, teamName) {
    if (!confirm(`{% trans "Voulez-vous retirer"|escapejs %} ${memberName} {% trans "de l'équipe"|escapejs %} ${teamName} ? {% trans "(Le membre restera dans ses éventuelles autres équipes)"|escapejs %}`)) {
        return;
    }
    postJSON(
        `/contracts/teams/members/${memberId}/move/`,
        { team_id: null, old_team_id: teamId },
        function(resp) {
            location.reload();
        },
        function(errMsg) {
            alert(errMsg);
        }
    );
}

function openAddMemberModal(teamId, teamName, teamCompanyId) {
    document.getElementById('addMemberTeamId').value = teamId !== null ? teamId : '';
    const title = teamId !== null
        ? `{% trans "Ajouter un membre"|escapejs %} — ${teamName}`
        : `{% trans "Ajouter un membre non assigné"|escapejs %}`;
    document.getElementById('addMemberModalTitle').textContent = title;
    document.getElementById('newMemberName').value = '';
    document.getElementById('newMemberUser').value = '';

    const colId = teamId !== null ? teamId : 'unassigned';
    const existingUserIds = [];
    $(`#members-${colId} li.member-card`).each(function() {
        const uid = $(this).data('user-id');
        if (uid) existingUserIds.push(parseInt(uid));
    });

    const isUserAdmin = {% if is_admin %}true{% else %}false{% endif %};
    const userCompanyId = {% if user_company %}{{ user_company.id }}{% else %}null{% endif %};

    const sel = document.getElementById('newMemberUser');
    for (const opt of sel.options) {
        if (opt.value !== '') {
            const userId = parseInt(opt.value);
            const userCompany = opt.dataset.companyId ? parseInt(opt.dataset.companyId) : null;
            const alreadyInTeam = existingUserIds.includes(userId);
            
            let matchesCompany = true;
            if (!isUserAdmin && userCompanyId !== null) {
                matchesCompany = (userCompany === userCompanyId) || 
                                 (teamCompanyId !== null && teamCompanyId !== undefined && userCompany === parseInt(teamCompanyId));
            }

            if (alreadyInTeam || !matchesCompany) {
                opt.disabled = true;
                opt.style.display = !matchesCompany ? 'none' : '';
            } else {
                opt.disabled = false;
                opt.style.display = '';
            }
        }
    }

    document.getElementById('addMemberError').classList.add('d-none');
    new bootstrap.Modal(document.getElementById('addMemberModal')).show();
}

function createMember() {
    const name = document.getElementById('newMemberName').value.trim();
    const userId = document.getElementById('newMemberUser').value;
    const teamId = document.getElementById('addMemberTeamId').value;

    document.getElementById('addMemberError').classList.add('d-none');
    if (!name) { showError('addMemberError', "{% trans 'Le nom du membre est requis.'|escapejs %}"); return; }
    if (!userId) { showError('addMemberError', '{% trans "L\'utilisateur est requis."|escapejs %}'); return; }

    postJSON(
        '/contracts/teams/members/create/',
        { name: name, user_id: parseInt(userId), team_id: teamId ? parseInt(teamId) : null },
        function() {
            bootstrap.Modal.getInstance(document.getElementById('addMemberModal')).hide();
            location.reload();
        },
        function(err) { showError('addMemberError', err); }
    );
}

function deleteMember(memberId, memberName) {
    if (!confirm(`{% trans "Supprimer le membre"|escapejs %} « ${memberName} » ? {% trans "Cette action est irréversible."|escapejs %}`)) return;

    postJSON(
        `/contracts/teams/members/${memberId}/delete/`,
        {},
        function() { location.reload(); },
        function(err) { alert(err); }
    );
}

function showError(elementId, message) {
    const el = document.getElementById(elementId);
    el.textContent = message;
    el.classList.remove('d-none');
}
{% endif %}


// ───────────────────────────────────────────────
// ONGLET 2 : MOTEUR DE PLANIFICATION DES ÉQUIPES
// ───────────────────────────────────────────────
const TEAMS_STORAGE_PREFIX = 'loko_teams_planning_';

function getStoredSetting(key, defaultVal) {
    try {
        const val = localStorage.getItem(TEAMS_STORAGE_PREFIX + key);
        return val !== null ? val : defaultVal;
    } catch (e) {
        return defaultVal;
    }
}

function setStoredSetting(key, val) {
    try {
        if (val === null || val === undefined) {
            localStorage.removeItem(TEAMS_STORAGE_PREFIX + key);
        } else {
            localStorage.setItem(TEAMS_STORAGE_PREFIX + key, val);
        }
    } catch (e) {}
}

const initialDate = (function() {
    const saved = getStoredSetting('anchor_date', '');
    if (saved && /^\d{4}-\d{2}-\d{2}$/.test(saved)) {
        return saved;
    }
    return new Date().toISOString().split('T')[0];
})();

const initialViewMode = (function() {
    const saved = getStoredSetting('view_mode', 'week');
    if (['work_week', 'week', 'two_weeks', 'month'].includes(saved)) return saved;
    return 'week';
})();

let _planningState = {
    anchorDate: initialDate,
    viewMode: initialViewMode,
    assignScope: getStoredSetting('assign_scope', 'day'),
    companyId: getStoredSetting('company_id', ''),
    data: null,
    members: [],
    flatpickrInstance: null,
};

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    // Restaurer le mode de vue sur les boutons
    $('#planning-viewmode-group button').removeClass('btn-primary').addClass('btn-outline-primary');
    $(`#planning-viewmode-group button[data-mode="${_planningState.viewMode}"]`).removeClass('btn-outline-primary').addClass('btn-primary');

    // Restaurer le sélecteur global de portée d'assignation
    $('#planning-assign-scope-group button').removeClass('btn-primary').addClass('btn-outline-primary');
    $(`#planning-assign-scope-group button[data-scope="${_planningState.assignScope}"]`).removeClass('btn-outline-primary').addClass('btn-primary');

    // Gestion du sélecteur de portée d'assignation
    $('#planning-assign-scope-group button').on('click', function() {
        $('#planning-assign-scope-group button').removeClass('btn-primary').addClass('btn-outline-primary');
        $(this).removeClass('btn-outline-primary').addClass('btn-primary');
        _planningState.assignScope = $(this).data('scope');
        setStoredSetting('assign_scope', _planningState.assignScope);
    });

    // Restaurer les filtres de la sidebar
    const savedSearch = getStoredSetting('search', '');
    if (savedSearch) $('#planning-member-search').val(savedSearch);

    const savedPresence = getStoredSetting('presence', 'all');
    if (savedPresence) $('#planning-presence-filter').val(savedPresence);

    // Initialiser Flatpickr sur la toolbar
    _planningState.flatpickrInstance = flatpickr("#planning-datepicker", {
        defaultDate: _planningState.anchorDate,
        dateFormat: "Y-m-d",
        onChange: function(selectedDates, dateStr) {
            if (dateStr) {
                _planningState.anchorDate = dateStr;
                setStoredSetting('anchor_date', dateStr);
                loadPlanningData();
            }
        }
    });

    // Gestion des boutons de navigation de la toolbar
    $('#btn-planning-prev').on('click', function() {
        navigatePlanningDate(-1);
    });
    $('#btn-planning-next').on('click', function() {
        navigatePlanningDate(1);
    });
    $('#btn-planning-today').on('click', function() {
        _planningState.anchorDate = new Date().toISOString().split('T')[0];
        setStoredSetting('anchor_date', _planningState.anchorDate);
        _planningState.flatpickrInstance.setDate(_planningState.anchorDate);
        loadPlanningData();
    });
    $('#btn-refresh-planning').on('click', function() {
        loadPlanningData();
    });

    // Changement de mode de vue (5j / 7j / 14j / mois)
    $('#planning-viewmode-group button').on('click', function() {
        $('#planning-viewmode-group button').removeClass('btn-primary').addClass('btn-outline-primary');
        $(this).removeClass('btn-outline-primary').addClass('btn-primary');
        _planningState.viewMode = $(this).data('mode');
        setStoredSetting('view_mode', _planningState.viewMode);
        loadPlanningData();
    });

    // Filtre société
    $('#planning-company-filter').on('change', function() {
        _planningState.companyId = $(this).val();
        setStoredSetting('company_id', _planningState.companyId);
        loadPlanningData();
    });

    // Filtres du volet latéral (Sidebar)
    $('#planning-member-search').on('input', function() {
        setStoredSetting('search', $(this).val());
        filterSidebarMembers();
    });
    $('#planning-role-filter').on('change', function() {
        setStoredSetting('role', $(this).val());
        filterSidebarMembers();
    });
    $('#planning-presence-filter').on('change', function() {
        setStoredSetting('presence', $(this).val());
        filterSidebarMembers();
    });

    // Gestion du basculement d'onglets
    function updatePlanningTabClass() {
        if ($('#tab-planning-btn').hasClass('active')) {
            $('body').addClass('tab-planning-active');
        } else {
            $('body').removeClass('tab-planning-active');
        }
    }

    let planningLoadedOnce = false;
    $('button[data-bs-toggle="pill"]').on('shown.bs.tab', function(e) {
        const tabId = $(e.target).attr('id');
        setStoredSetting('active_tab', tabId);
        updatePlanningTabClass();
        if (tabId === 'tab-planning-btn') {
            if (!planningLoadedOnce) {
                planningLoadedOnce = true;
            }
            loadPlanningData();
        }
    });

    // Restaurer le dernier onglet actif
    const savedActiveTab = getStoredSetting('active_tab', 'tab-current-state-btn');
    if (savedActiveTab === 'tab-planning-btn') {
        const tabEl = document.getElementById('tab-planning-btn');
        if (tabEl) {
            bootstrap.Tab.getOrCreateInstance(tabEl).show();
        }
    }
    updatePlanningTabClass();

    // Mode duplication modal switch
    $('input[name="dupMode"]').on('change', function() {
        const val = $(this).val();
        $('#dupSectionDay').toggleClass('d-none', val !== 'day');
        $('#dupSectionWeek').toggleClass('d-none', val !== 'week');
        $('#dupSectionMonth').toggleClass('d-none', val !== 'month');
    });

    $('#dupSourceDate').on('change', function() {
        const targetDateStr = getTargetDuplicateDate($(this).val(), _planningState.viewMode);
        if (targetDateStr) {
            $('#dupTargetDate').val(targetDateStr);
        }
    });

    $('#btn-open-duplicate-modal').on('click', function() {
        openDuplicateModal();
    });

    // Boutons de la modale de confirmation multi-équipes pour la planification
    $('#btnPlanningAddMultiTeam').on('click', function() {
        if (!_pendingPlanningAssign) return;
        const data = _pendingPlanningAssign;
        _pendingPlanningAssign = null;
        bootstrap.Modal.getInstance(document.getElementById('planningMultiTeamConfirmModal')).hide();
        executePlanningAssign(data.memberId, data.targetTeamId, data.targetDate, 'add');
    });

    $('#btnPlanningMoveTeam').on('click', function() {
        if (!_pendingPlanningAssign) return;
        const data = _pendingPlanningAssign;
        _pendingPlanningAssign = null;
        bootstrap.Modal.getInstance(document.getElementById('planningMultiTeamConfirmModal')).hide();
        executePlanningAssign(data.memberId, data.targetTeamId, data.targetDate, 'move');
    });

    $('#planningMultiTeamConfirmModal').on('hidden.bs.modal', function () {
        _pendingPlanningAssign = null;
    });
});

function navigatePlanningDate(direction) {
    const d = new Date(_planningState.anchorDate);
    if (_planningState.viewMode === 'month') {
        d.setDate(1);
        d.setMonth(d.getMonth() + direction);
    } else {
        const step = _planningState.viewMode === 'two_weeks' ? 14 : 7;
        d.setDate(d.getDate() + (direction * step));
    }
    _planningState.anchorDate = d.toISOString().split('T')[0];
    setStoredSetting('anchor_date', _planningState.anchorDate);
    _planningState.flatpickrInstance.setDate(_planningState.anchorDate);
    loadPlanningData();
}

function loadPlanningData() {
    $('#planning-loading-spinner').removeClass('d-none');

    const params = new URLSearchParams({
        date: _planningState.anchorDate,
        view_mode: _planningState.viewMode,
    });
    if (_planningState.companyId) {
        params.append('company_id', _planningState.companyId);
    }

    fetch(`/contracts/teams/planning/data/?${params.toString()}`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => {
        if (!r.ok) throw new Error('Network error');
        return r.json();
    })
    .then(data => {
        $('#planning-loading-spinner').addClass('d-none');
        _planningState.data = data;
        _planningState.members = data.members || [];
        renderPlanningMatrix(data);
        renderPlanningSidebar(data);
        updateCompaniesFilter(data.companies || []);
    })
    .catch(err => {
        $('#planning-loading-spinner').addClass('d-none');
        alert("{% trans 'Erreur lors du chargement de la planification.'|escapejs %}");
    });
}

function updateCompaniesFilter(companies) {
    const sel = document.getElementById('planning-company-filter');
    const currentVal = _planningState.companyId || sel.value;
    sel.innerHTML = '<option value="">{% trans "Toutes les sociétés"|escapejs %}</option>';
    companies.forEach(c => {
        const opt = document.createElement('option');
        opt.value = c.id;
        opt.textContent = c.name;
        if (String(c.id) === String(currentVal)) opt.selected = true;
        sel.appendChild(opt);
    });
}

const TEAM_PALETTE = [
    '#0d6efd', '#6610f2', '#6f42c1', '#d63384', '#fd7e14',
    '#198754', '#20c997', '#0dcaf0', '#495057', '#e83e8c'
];
function getTeamColor(teamId) {
    return TEAM_PALETTE[Math.abs(teamId || 0) % TEAM_PALETTE.length];
}

function renderPlanningMatrix(data) {
    const days = data.days || [];
    const teams = data.teams || [];

    // 1. Rendu des en-têtes
    const theadRow = document.getElementById('planning-table-header-row');
    theadRow.innerHTML = `<th class="sticky-team-col">{% trans "Équipes"|escapejs %}</th>`;

    days.forEach(day => {
        const th = document.createElement('th');
        let headerClasses = [];
        if (day.is_today) headerClasses.push('is-today-header');
        if (day.is_weekend) headerClasses.push('is-weekend-header');
        if (day.is_past) headerClasses.push('is-past-header');
        th.className = headerClasses.join(' ');

        const dParts = day.date.split('-');
        const dateObj = new Date(parseInt(dParts[0], 10), parseInt(dParts[1], 10) - 1, parseInt(dParts[2], 10));
        const isFriday = dateObj.getDay() === 5;

        const quickDupTitle = (_planningState.viewMode === 'work_week' && isFriday)
            ? "{% trans 'Dupliquer vers le lundi suivant (avec absences)'|escapejs %}"
            : "{% trans 'Dupliquer vers le jour suivant (avec absences)'|escapejs %}";
        const optionsTitle = "{% trans 'Options de la journée'|escapejs %}";
        const dupCustomTitle = "{% trans 'Dupliquer cette journée…'|escapejs %}";

        let badgeHtml = '';
        if (day.is_today) {
            badgeHtml = `<span class="badge bg-primary text-white" style="font-size:0.65rem; padding: 2px 6px;">{% trans "Aujourd'hui"|escapejs %}</span>`;
        } else if (day.is_past) {
            badgeHtml = `<span class="badge bg-light text-muted border" style="font-size:0.62rem; padding: 2px 5px;"><i class="bi bi-clock-history me-1"></i>{% trans "Passé"|escapejs %}</span>`;
        }

        th.innerHTML = `
            <div class="d-flex flex-column align-items-center justify-content-between position-relative py-1" style="min-height: 64px; height: 100%;">
                ${CAN_EDIT_TEAMS ? `
                <div class="dropdown position-absolute" style="top: 0px; right: 0px;">
                    <button class="btn btn-sm btn-link text-muted p-0 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" title="${optionsTitle}"></button>
                    <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                        <li>
                            <a class="dropdown-item small" href="javascript:void(0)" onclick="openDuplicateModalForDay('${day.date}')">
                                <i class="bi bi-copy me-2 text-primary"></i>${dupCustomTitle}
                            </a>
                        </li>
                    </ul>
                </div>` : ''}

                <div class="small text-uppercase ${day.is_past ? 'text-muted opacity-75' : 'text-muted'}" style="font-size:0.75rem; letter-spacing: 0.5px; line-height: 1.2;">${escapeHtml(day.day_short)}</div>
                <div class="fw-bold fs-6 ${day.is_past ? 'text-muted' : ''}" style="line-height: 1.2;">${escapeHtml(day.day_num)}</div>
                <div class="header-badge-slot d-flex align-items-center justify-content-center" style="min-height: 20px; width: 100%;">
                    ${badgeHtml}
                </div>

                ${CAN_EDIT_TEAMS ? `
                <button type="button" 
                        class="btn-quick-duplicate" 
                        title="${quickDupTitle}" 
                        onclick="quickDuplicateToNextDay('${day.date}')">
                    <i class="bi bi-chevron-double-right"></i>
                </button>` : ''}
            </div>
        `;
        theadRow.appendChild(th);
    });

    // 2. Rendu des lignes d'équipes
    const tbody = document.getElementById('planning-table-body');
    tbody.innerHTML = '';

    if (teams.length === 0) {
        tbody.innerHTML = `<tr><td colspan="${days.length + 1}" class="text-center text-muted py-4">{% trans "Aucune équipe trouvée."|escapejs %}</td></tr>`;
        return;
    }

    teams.forEach(team => {
        const tr = document.createElement('tr');
        tr.className = 'planning-team-row';

        const teamColor = getTeamColor(team.id);

        // Colonne Équipe sticky gauche
        const teamTd = document.createElement('td');
        teamTd.className = 'sticky-team-col';
        teamTd.innerHTML = `
            <div class="d-flex align-items-center">
                <div class="team-color-indicator" style="background-color: ${teamColor}; min-height: 38px; width: 4px; margin-right: 8px; border-radius: 2px;"></div>
                <div class="overflow-hidden flex-grow-1">
                    <div class="fw-bold text-truncate text-dark d-flex align-items-center gap-1">
                        <i class="bi bi-people-fill" style="color: ${teamColor}; font-size: 0.95rem;"></i>
                        <span class="text-truncate">${escapeHtml(team.name)}</span>
                    </div>
                    <div class="text-muted small text-truncate mt-1" style="font-size:0.75rem;">
                        <span class="badge bg-light text-secondary border px-1 py-0"><i class="bi bi-building me-1"></i>${escapeHtml(team.company_name)}</span>
                    </div>
                </div>
            </div>
        `;
        tr.appendChild(teamTd);

        // Colonnes des jours
        days.forEach(day => {
            const cellTd = document.createElement('td');
            let cellClasses = ['planning-drop-cell'];
            if (day.is_today) cellClasses.push('is-today-cell');
            if (day.is_weekend) cellClasses.push('is-weekend-cell');
            if (day.is_past) cellClasses.push('is-past-cell');
            cellTd.className = cellClasses.join(' ');
            cellTd.dataset.teamId = team.id;
            cellTd.dataset.date = day.date;
            if (day.is_past) {
                cellTd.dataset.isPast = 'true';
            }

            const membersOnDay = (team.days && team.days[day.date]) ? team.days[day.date] : [];

            membersOnDay.forEach(m => {
                const card = createPlanningMemberCard(m, team.id, day.date, team.can_edit, day.is_past);
                cellTd.appendChild(card);
            });

            tr.appendChild(cellTd);
        });

        tbody.appendChild(tr);
    });

    initPlanningDragAndDrop();
}

function createPlanningMemberCard(member, teamId, dateStr, canEdit, isPast) {
    const card = document.createElement('div');
    const absentClass = member.is_absent ? 'is-absent' : '';
    const pastClass = isPast ? 'is-past-member' : '';
    card.className = `planning-member-card ${absentClass} ${pastClass}`.trim();
    card.dataset.memberId = member.id;
    card.dataset.teamId = teamId;
    card.dataset.date = dateStr;
    card.dataset.memberName = member.name;

    const teamColor = getTeamColor(teamId);
    if (!member.is_absent && !isPast) {
        card.style.borderLeftColor = teamColor;
    }

    let absenceBadge = '';
    if (member.is_absent) {
        const reasonDisplay = (member.absence && member.absence.reason_display) ? member.absence.reason_display : "{% trans 'Absent'|escapejs %}";
        absenceBadge = `<span class="badge bg-danger text-white me-1" style="font-size:0.65rem;" title="${escapeHtml(member.absence?.comment || '')}"><i class="bi bi-person-x-fill me-1"></i>${escapeHtml(reasonDisplay)}</span>`;
    }

    let multiTeamBadge = '';
    if (member.is_multi_team) {
        const otherNames = (member.other_teams || []).map(t => t.name).join(', ');
        const multiTitle = otherNames ? `{% trans "Affecté à plusieurs équipes ce jour"|escapejs %} (${escapeHtml(otherNames)})` : `{% trans "Affecté à plusieurs équipes ce jour"|escapejs %}`;
        multiTeamBadge = `<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-1 py-0 me-1" style="font-size:0.65rem;" title="${multiTitle}"><i class="bi bi-diagram-3 me-1"></i>{% trans "Multi-équipes"|escapejs %}</span>`;
    }

    const titleAbsence = member.is_absent ? "{% trans "Modifier ou annuler l'absence"|escapejs %}" : "{% trans "Marquer absent"|escapejs %}";
    const titleUnassign = "{% trans 'Désassigner de cette équipe'|escapejs %}";

    let actionsHtml = '';
    if (canEdit && !isPast) {
        actionsHtml = `
        <div class="planning-card-actions">
            <button type="button" class="btn btn-sm btn-link p-0 text-muted btn-absence-toggle" title="${titleAbsence}" onclick="openAbsenceModal(${member.id}, '${escapeHtml(member.name)}', '${dateStr}', ${member.is_absent ? 'true' : 'false'}, '${escapeHtml(member.absence?.reason || 'conge')}', '${escapeHtml(member.absence?.comment || '')}')">
                <i class="bi ${member.is_absent ? 'bi-person-x-fill text-danger' : 'bi-person-check text-muted'}"></i>
            </button>
            <button type="button" class="btn btn-sm btn-link p-0 text-muted" title="${titleUnassign}" onclick="unassignMemberFromDate(${member.id}, '${dateStr}', ${teamId})">
                <i class="bi bi-x fs-6"></i>
            </button>
        </div>`;
    } else if (member.is_absent) {
        actionsHtml = `
        <div class="planning-card-actions">
            <i class="bi bi-person-x-fill text-danger" title="${escapeHtml(member.absence?.comment || '')}"></i>
        </div>`;
    }

    card.innerHTML = `
        <div class="planning-member-info" title="${escapeHtml(member.name)}">
            <span class="member-name-text fw-semibold">${escapeHtml(member.name)}</span>
            ${multiTeamBadge}
            ${absenceBadge}
        </div>
        ${actionsHtml}
    `;

    return card;
}

let _pendingPlanningAssign = null;

function executePlanningAssign(memberId, targetTeamId, targetDate, action) {
    postJSON(
        '/contracts/teams/planning/assign/',
        {
            member_id: parseInt(memberId),
            team_id: parseInt(targetTeamId),
            date: targetDate,
            action: action || 'move',
            scope: _planningState.assignScope || 'day',
        },
        function(resp) {
            loadPlanningData();
        },
        function(err) {
            alert(err);
        }
    );
}

function initPlanningDragAndDrop() {
    if (!CAN_EDIT_TEAMS) return;

    // Cartes de membres dans la grille draggables (uniquement sur les jours présents ou futurs)
    $('.planning-member-card:not(.is-past-member)').draggable({
        revert: 'invalid',
        cursor: 'grabbing',
        helper: 'clone',
        zIndex: 1000,
        opacity: 0.85,
        start: function(event, ui) {
            $(ui.helper).addClass('shadow-lg border-primary');
        }
    });

    // Cartes de membres du volet latéral draggables
    $('.sidebar-member-item').draggable({
        revert: 'invalid',
        cursor: 'grabbing',
        helper: 'clone',
        zIndex: 1000,
        opacity: 0.9,
        start: function(event, ui) {
            $(ui.helper).addClass('shadow-lg border-primary');
        }
    });

    // Cellules de dépôt (uniquement sur les jours présents ou futurs)
    $('.planning-drop-cell:not(.is-past-cell)').droppable({
        accept: '.planning-member-card:not(.is-past-member), .sidebar-member-item',
        hoverClass: 'drag-over',
        tolerance: 'pointer',
        drop: function(event, ui) {
            const memberId = parseInt(ui.draggable.data('memberId') || ui.draggable.data('member-id'));
            const memberName = ui.draggable.data('memberName') || ui.draggable.data('member-name') || ui.draggable.find('.member-name-text, .fw-semibold').first().text().trim();
            const targetTeamId = parseInt($(this).data('teamId') || $(this).data('team-id'));
            const targetDate = $(this).data('date');

            if (!memberId || !targetTeamId || !targetDate) return;

            // Vérifier si le membre est déjà planifié dans des équipes ce jour-là
            const otherAssignedTeams = [];
            let alreadyInTargetTeam = false;
            if (_planningState && _planningState.data && _planningState.data.teams) {
                _planningState.data.teams.forEach(t => {
                    if (t.days && t.days[targetDate]) {
                        const found = t.days[targetDate].some(m => m.id === memberId);
                        if (found) {
                            if (t.id === targetTeamId) {
                                alreadyInTargetTeam = true;
                            } else {
                                otherAssignedTeams.push(t);
                            }
                        }
                    }
                });
            }

            if (alreadyInTargetTeam) {
                // Déjà dans cette équipe ce jour-là
                return;
            }

            if (otherAssignedTeams.length > 0) {
                // Membre déjà dans une autre équipe : avertir et proposer Déplacer ou Ajouter aussi
                const otherNames = otherAssignedTeams.map(t => t.name).join(', ');
                const targetTeamObj = (_planningState.data.teams || []).find(t => t.id === targetTeamId);
                const targetName = targetTeamObj ? targetTeamObj.name : `Équipe #${targetTeamId}`;

                $('#multiTeamMemberName').text(memberName);
                $('#multiTeamDateDisplay').text(targetDate);
                $('#multiTeamExistingTeamName').text(otherNames);
                $('#multiTeamTargetTeamName').text(targetName);

                _pendingPlanningAssign = {
                    memberId: memberId,
                    targetTeamId: targetTeamId,
                    targetDate: targetDate
                };

                let scopeLabel = "{% trans 'Jour'|escapejs %}";
                if (_planningState.assignScope === 'week') scopeLabel = "{% trans 'Semaine complète'|escapejs %}";
                if (_planningState.assignScope === 'month') scopeLabel = "{% trans 'Mois complet'|escapejs %}";
                $('#multiTeamScopeDisplay').text(scopeLabel);

                const modalEl = document.getElementById('planningMultiTeamConfirmModal');
                const modal = new bootstrap.Modal(modalEl);
                modal.show();
            } else {
                // Pas encore assigné ce jour-là -> assignation directe
                executePlanningAssign(memberId, targetTeamId, targetDate, 'move');
            }
        }
    });
}

function renderPlanningSidebar(data) {
    const members = data.members || [];
    const sidebarContainer = document.getElementById('planning-sidebar-members');
    const roleSelect = document.getElementById('planning-role-filter');

    // Mettre à jour les rôles dans le filtre
    const rolesSet = new Set();
    members.forEach(m => {
        (m.roles || []).forEach(r => rolesSet.add(r));
    });

    const currentRole = roleSelect.value || getStoredSetting('role', '');
    roleSelect.innerHTML = '<option value="">{% trans "Tous les rôles"|escapejs %}</option>';
    Array.from(rolesSet).sort().forEach(r => {
        const opt = document.createElement('option');
        opt.value = r;
        opt.textContent = r;
        if (r === currentRole) opt.selected = true;
        roleSelect.appendChild(opt);
    });

    filterSidebarMembers();
}

function filterSidebarMembers() {
    const members = _planningState.members || [];
    const searchVal = ($('#planning-member-search').val() || '').toLowerCase().trim();
    const selectedRole = $('#planning-role-filter').val();
    const presenceFilter = $('#planning-presence-filter').val();

    const sidebarContainer = document.getElementById('planning-sidebar-members');
    sidebarContainer.innerHTML = '';

    let visibleCount = 0;

    members.forEach(m => {
        // Filtre recherche nom
        const nameMatch = !searchVal || m.name.toLowerCase().includes(searchVal) || (m.user_display && m.user_display.toLowerCase().includes(searchVal));
        if (!nameMatch) return;

        // Filtre rôle
        if (selectedRole && !(m.roles || []).includes(selectedRole)) return;

        // Filtre présence
        if (presenceFilter === 'present' && m.is_absent_on_anchor) return;
        if (presenceFilter === 'absent' && !m.is_absent_on_anchor) return;

        visibleCount++;

        const initials = m.name ? m.name.substring(0, 2).toUpperCase() : '??';
        const card = document.createElement('div');
        card.className = 'sidebar-member-item';
        card.dataset.memberId = m.id;
        card.dataset.memberName = m.name;

        card.innerHTML = `
            <div class="d-flex align-items-center gap-2 overflow-hidden">
                <div class="member-avatar-pill">${escapeHtml(initials)}</div>
                <div class="overflow-hidden">
                    <div class="fw-semibold text-truncate small text-dark">${escapeHtml(m.name)}</div>
                    <div class="text-muted small text-truncate" style="font-size:0.72rem;">${escapeHtml(m.user_display || '')}</div>
                </div>
            </div>
            <div class="d-flex align-items-center gap-1 flex-shrink-0">
                ${CAN_VIEW_MEMBER_HISTORY ? `
                    <button type="button" class="btn btn-sm btn-link p-0 text-muted btn-sidebar-member-history" data-member-id="${m.id}" title="{% trans "Historique du technicien"|escapejs %}">
                        <i class="bi bi-clock-history"></i>
                    </button>
                ` : ''}
                <i class="bi bi-grip-vertical text-muted"></i>
            </div>
        `;

        sidebarContainer.appendChild(card);
    });

    $('#planning-sidebar-count').text(visibleCount);
    initPlanningDragAndDrop();
}

function unassignMemberFromDate(memberId, dateStr, teamId) {
    postJSON(
        '/contracts/teams/planning/assign/',
        {
            member_id: parseInt(memberId),
            team_id: null,
            date: dateStr,
            unassign_team_id: teamId ? parseInt(teamId) : null,
            scope: _planningState.assignScope || 'day',
        },
        function(resp) {
            loadPlanningData();
        },
        function(err) {
            alert(err);
        }
    );
}

// ───────────────────────────────────────────────
// Modale Absence
// ───────────────────────────────────────────────
function openAbsenceModal(memberId, memberName, dateStr, isAbsent, reason, comment) {
    $('#absenceMemberId').val(memberId);
    $('#absenceDate').val(dateStr);
    $('#absenceMemberName').text(memberName);
    $('#absenceDateDisplay').text(dateStr);
    $('#absenceReason').val(reason || 'conge');
    $('#absenceComment').val(comment || '');
    $('#absenceModalError').addClass('d-none');

    if (isAbsent) {
        $('#btnRemoveAbsence').removeClass('d-none');
    } else {
        $('#btnRemoveAbsence').addClass('d-none');
    }

    new bootstrap.Modal(document.getElementById('absenceModal')).show();
}

function submitToggleAbsence(isAbsent) {
    const memberId = $('#absenceMemberId').val();
    const dateStr = $('#absenceDate').val();
    const reason = $('#absenceReason').val();
    const comment = $('#absenceComment').val();

    postJSON(
        '/contracts/teams/planning/absence/',
        {
            member_id: parseInt(memberId),
            date: dateStr,
            is_absent: isAbsent,
            reason: reason,
            comment: comment,
        },
        function(resp) {
            bootstrap.Modal.getInstance(document.getElementById('absenceModal')).hide();
            loadPlanningData();
        },
        function(err) {
            $('#absenceModalError').text(err).removeClass('d-none');
        }
    );
}

// ───────────────────────────────────────────────
// Modale Duplication & Duplication rapide
// ───────────────────────────────────────────────
function getTargetDuplicateDate(sourceDateStr, viewMode) {
    if (!sourceDateStr) return '';
    const parts = sourceDateStr.split('-');
    if (parts.length !== 3) return '';
    const srcYear = parseInt(parts[0], 10);
    const srcMonth = parseInt(parts[1], 10) - 1;
    const srcDay = parseInt(parts[2], 10);
    const d = new Date(srcYear, srcMonth, srcDay);

    let daysToAdd = 1;
    if (viewMode === 'work_week') {
        const dayOfWeek = d.getDay(); // 0 = Dim, 1 = Lun, ..., 5 = Ven, 6 = Sam
        if (dayOfWeek === 5) {
            daysToAdd = 3; // Vendredi -> Lundi
        } else if (dayOfWeek === 6) {
            daysToAdd = 2; // Samedi -> Lundi
        }
    }
    d.setDate(d.getDate() + daysToAdd);

    const nextYear = d.getFullYear();
    const nextMonth = String(d.getMonth() + 1).padStart(2, '0');
    const nextDay = String(d.getDate()).padStart(2, '0');
    return `${nextYear}-${nextMonth}-${nextDay}`;
}

function openDuplicateModal() {
    const todayStr = new Date().toISOString().split('T')[0];
    const srcDateStr = _planningState.anchorDate || todayStr;
    $('#dupSourceDate').val(srcDateStr);

    const targetDateStr = getTargetDuplicateDate(srcDateStr, _planningState.viewMode);
    $('#dupTargetDate').val(targetDateStr);

    $('#dupSourceWeek').val(srcDateStr);
    const parts = srcDateStr.split('-');
    const dWeek = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, parseInt(parts[2], 10));
    dWeek.setDate(dWeek.getDate() + 7);
    const nextWeekYear = dWeek.getFullYear();
    const nextWeekMonth = String(dWeek.getMonth() + 1).padStart(2, '0');
    const nextWeekDay = String(dWeek.getDate()).padStart(2, '0');
    $('#dupTargetWeek').val(`${nextWeekYear}-${nextWeekMonth}-${nextWeekDay}`);

    // Initialiser les mois source et cible
    const srcMonthVal = `${parts[0]}-${parts[1]}`;
    $('#dupSourceMonth').val(srcMonthVal);
    const dMonth = new Date(parseInt(parts[0], 10), parseInt(parts[1], 10) - 1, 1);
    dMonth.setMonth(dMonth.getMonth() + 1);
    const nextMonthYear = dMonth.getFullYear();
    const nextMonthVal = `${nextMonthYear}-${String(dMonth.getMonth() + 1).padStart(2, '0')}`;
    $('#dupTargetMonth').val(nextMonthVal);

    $('#dupModalAlert').addClass('d-none');
    new bootstrap.Modal(document.getElementById('duplicatePlanningModal')).show();
}

function openDuplicateModalForDay(dateStr) {
    openDuplicateModal();
    $('#dupSourceDate').val(dateStr);
    const targetDateStr = getTargetDuplicateDate(dateStr, _planningState.viewMode);
    $('#dupTargetDate').val(targetDateStr);
}

function quickDuplicateToNextDay(sourceDateStr) {
    const targetDateStr = getTargetDuplicateDate(sourceDateStr, _planningState.viewMode);
    if (!targetDateStr) return;

    postJSON(
        '/contracts/teams/planning/duplicate/',
        {
            mode: 'day',
            source_date: sourceDateStr,
            target_date: targetDateStr,
            copy_absences: true,
        },
        function(resp) {
            loadPlanningData();
        },
        function(err) {
            alert(err);
        }
    );
}

function submitDuplicatePlanning() {
    const mode = $('input[name="dupMode"]:checked').val();
    let sourceDate, targetDate;
    if (mode === 'month') {
        sourceDate = $('#dupSourceMonth').val();
        targetDate = $('#dupTargetMonth').val();
    } else if (mode === 'week') {
        sourceDate = $('#dupSourceWeek').val();
        targetDate = $('#dupTargetWeek').val();
    } else {
        sourceDate = $('#dupSourceDate').val();
        targetDate = $('#dupTargetDate').val();
    }
    const copyAbsences = $('#dupCopyAbsences').is(':checked');

    if (!sourceDate || !targetDate) {
        $('#dupModalAlert').text("{% trans 'Veuillez renseigner les dates source et cible.'|escapejs %}").removeClass('d-none');
        return;
    }

    $('#btnSubmitDuplicate').prop('disabled', true);

    postJSON(
        '/contracts/teams/planning/duplicate/',
        {
            mode: mode,
            source_date: sourceDate,
            target_date: targetDate,
            copy_absences: copyAbsences,
        },
        function(resp) {
            $('#btnSubmitDuplicate').prop('disabled', false);
            bootstrap.Modal.getInstance(document.getElementById('duplicatePlanningModal')).hide();
            loadPlanningData();
        },
        function(err) {
            $('#btnSubmitDuplicate').prop('disabled', false);
            $('#dupModalAlert').text(err).removeClass('d-none');
        }
    );
}

// ───────────────────────────────────────────────
// Modale Interventions assignées à une équipe (existant)
// ───────────────────────────────────────────────
let _currentTeamId = null;
let _currentTeamName = null;

function openTeamInterventionsModal(teamId, teamName) {
    _currentTeamId = teamId;
    _currentTeamName = teamName;

    document.getElementById('teamInterventionsModalTitle').textContent = teamName;
    const body = document.getElementById('teamInterventionsModalBody');
    const footer = document.getElementById('teamInterventionsModalFooter');
    body.innerHTML = `
        <div class="text-center py-5">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{% trans "Chargement..." %}</span>
            </div>
        </div>`;
    footer.textContent = '';

    new bootstrap.Modal(document.getElementById('teamInterventionsModal')).show();

    fetch(`/contracts/teams/${teamId}/interventions/`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => renderTeamInterventions(data, body, footer))
    .catch(() => {
        body.innerHTML = `<div class="alert alert-danger m-3">{% trans "Impossible de charger les interventions." %}</div>`;
    });
}

function renderTeamInterventions(data, body, footer) {
    const interventions = data.interventions || [];
    footer.textContent = `${interventions.length} {% trans "intervention(s)" %}`;

    if (interventions.length === 0) {
        body.innerHTML = `<div class="text-muted fst-italic p-4 text-center">{% trans "Aucune intervention assignée à cette équipe." %}</div>`;
        return;
    }

    let rows = '';
    for (const i of interventions) {
        const memberCell = i.assigned_member_name
            ? `<span class="text-muted small">${escapeHtml(i.assigned_member_name)}</span>`
            : `<span class="text-muted small fst-italic">—</span>`;

        const summaryBtn = `<button type="button"
            class="btn btn-sm btn-outline-secondary"
            title="{% trans 'Voir le résumé' %}"
            onclick="openTeamInterventionSummary('${escapeHtml(i.summary_url)}', '${escapeHtml(i.code)}')">
            <i class="bi bi-eye"></i>
        </button>`;

        rows += `<tr>
            <td class="text-nowrap">${summaryBtn}</td>
            <td class="text-nowrap"><a href="${escapeHtml(i.detail_url)}" target="_blank">${escapeHtml(i.code)}</a></td>
            <td>${escapeHtml(i.title)}</td>
            <td class="text-nowrap">${memberCell}</td>
            <td class="text-nowrap"><span class="badge bg-${escapeHtml(i.status_color)}">${escapeHtml(i.status_display)}</span></td>
        </tr>`;
    }

    body.innerHTML = `
        <table class="table table-hover table-sm align-middle mb-0">
            <thead class="table-light sticky-top">
                <tr>
                    <th></th>
                    <th>{% trans "Code" %}</th>
                    <th>{% trans "Titre" %}</th>
                    <th>{% trans "Membre assigné" %}</th>
                    <th>{% trans "Statut" %}</th>
                </tr>
            </thead>
            <tbody>${rows}</tbody>
        </table>`;
}

function openTeamInterventionSummary(summaryUrl, code) {
    const listModalEl = document.getElementById('teamInterventionsModal');
    const summaryModalEl = document.getElementById('teamInterventionSummaryModal');
    const summaryBody = document.getElementById('teamInterventionSummaryModalBody');
    const summaryLabel = document.getElementById('teamInterventionSummaryModalLabel');

    bootstrap.Modal.getInstance(listModalEl)?.hide();

    summaryLabel.textContent = `${summaryLabel.dataset.baseTitle} — ${code}`;
    summaryBody.innerHTML = `
        <div class="text-center py-4">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{% trans "Chargement..." %}</span>
            </div>
        </div>`;

    new bootstrap.Modal(summaryModalEl).show();

    fetch(summaryUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(r => {
        if (!r.ok) throw new Error('forbidden');
        return r.text();
    })
    .then(html => {
        summaryBody.innerHTML = html;
        initTeamSummaryCarousel(summaryBody);
    })
    .catch(() => {
        summaryBody.innerHTML = `<div class="alert alert-warning m-2">{% trans "Résumé non disponible." %}</div>`;
    });
}

function initTeamSummaryCarousel(container) {
    const carouselEl = container.querySelector('#summaryDocumentCarousel');
    if (!carouselEl) return;
    const thumbBtns = Array.from(container.querySelectorAll('.summary-thumbnail-btn'));
    const setActive = (idx) => thumbBtns.forEach((b, i) => b.classList.toggle('active', i === idx));
    carouselEl.addEventListener('slid.bs.carousel', e => setActive(e.to));
    thumbBtns.forEach((btn, idx) => btn.addEventListener('click', () => setActive(idx)));
}

document.addEventListener('DOMContentLoaded', function () {
    const backBtn = document.getElementById('teamInterventionSummaryBackBtn');
    if (backBtn) {
        backBtn.addEventListener('click', function () {
            bootstrap.Modal.getInstance(document.getElementById('teamInterventionSummaryModal'))?.hide();
            if (_currentTeamId !== null) {
                openTeamInterventionsModal(_currentTeamId, _currentTeamName);
            }
        });
    }
});

function openMemberHistoryModal(memberId) {
    if (!memberId || !CAN_VIEW_MEMBER_HISTORY) return;
    const modalEl = document.getElementById('memberHistoryModal');
    if (!modalEl || typeof bootstrap === 'undefined') return;

    const modal = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
    const spinner = document.getElementById('member-history-spinner');
    const content = document.getElementById('member-history-content');
    const titleName = document.getElementById('member-history-title-name');
    const cardName = document.getElementById('member-history-name-card');
    const cardCompany = document.getElementById('member-history-company-card');
    const teamsTbody = document.getElementById('member-history-teams-tbody');
    const itvsTbody = document.getElementById('member-history-interventions-tbody');

    if (spinner) spinner.classList.remove('d-none');
    if (content) content.classList.add('d-none');

    modal.show();

    fetch(`/interventions/calendar/member/${memberId}/history/`, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(res => {
        if (!res.ok) throw new Error('Network error');
        return res.json();
    })
    .then(data => {
        if (titleName) titleName.textContent = `{% trans "Historique de"|escapejs %} ${data.member.name}`;
        if (cardName) cardName.textContent = data.member.name;
        if (cardCompany) cardCompany.textContent = data.member.company || '—';

        if (teamsTbody) {
            teamsTbody.innerHTML = (data.team_history && data.team_history.length > 0)
                ? data.team_history.map(h => `
                    <tr>
                        <td><span class="fw-semibold">${escapeHtml(h.team_name)}</span></td>
                        <td>${escapeHtml(h.join_date || '—')}</td>
                        <td>${h.is_active ? `<span class="badge text-bg-success">{% trans "En poste"|escapejs %}</span>` : escapeHtml(h.leave_date || '—')}</td>
                    </tr>
                `).join('')
                : `<tr><td colspan="3" class="text-center text-muted py-3">{% trans "Aucun historique d'équipe"|escapejs %}</td></tr>`;
        }

        if (itvsTbody) {
            if (data.interventions && data.interventions.length > 0) {
                let lastDate = null;
                itvsTbody.innerHTML = data.interventions.map((itv, idx) => {
                    const isNewDate = itv.date !== lastDate;
                    lastDate = itv.date;
                    const borderStyle = (isNewDate && idx > 0) ? 'border-top: 2px solid #cbd5e1 !important;' : '';
                    return `
                        <tr style="${borderStyle}">
                            <td class="text-nowrap fw-semibold">${escapeHtml(itv.date)}</td>
                            <td><a href="${itv.detail_url}" target="_blank" class="fw-bold text-primary text-decoration-none">${escapeHtml(itv.code)}</a></td>
                            <td class="text-truncate" style="max-width: 180px;" title="${escapeHtml(itv.title)}">${escapeHtml(itv.title)}</td>
                            <td>${escapeHtml(itv.team_name)}</td>
                            <td><span class="badge bg-secondary">${escapeHtml(itv.status_display)}</span></td>
                        </tr>
                    `;
                }).join('');
            } else {
                itvsTbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted py-3">{% trans "Aucune intervention enregistrée"|escapejs %}</td></tr>`;
            }
        }

        if (spinner) spinner.classList.add('d-none');
        if (content) content.classList.remove('d-none');
    })
    .catch(err => {
        console.error(err);
        if (teamsTbody) teamsTbody.innerHTML = `<tr><td colspan="3" class="text-danger py-3 text-center">{% trans "Erreur de chargement"|escapejs %}</td></tr>`;
        if (spinner) spinner.classList.add('d-none');
        if (content) content.classList.remove('d-none');
    });
}

$(document).on('click', '.btn-sidebar-member-history', function(e) {
    e.preventDefault();
    e.stopPropagation();
    const memberId = $(this).data('member-id') || $(this).attr('data-member-id');
    if (memberId) {
        openMemberHistoryModal(memberId);
    }
});
</script>
{% endblock script %}