{% 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 --- */
    .planning-toolbar {
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 10px 14px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .planning-layout {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

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

    .planning-sidebar-wrapper {
        width: 300px;
        flex: 0 0 300px;
        background: #ffffff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04);
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 170px);
        display: flex;
        flex-direction: column;
    }

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

    .planning-sidebar-body {
        padding: 10px 14px;
        overflow-y: auto;
        flex: 1 1 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;
    }

    /* 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 py-3">

    <!-- En-tête avec titre & onglets -->
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <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">
                                        <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 'Déplacer vers une autre équipe' %}"
                                                onclick="openMoveMemberModal({{ member.id }}, '{{ member.name|escapejs }}', {{ team.id }})">
                                            <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-{{ 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="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>
                    </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 "Changement d'équipe immédiat" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-3">
                <p class="mb-2">
                    {% trans "Ce déplacement modifie l'équipe de" %} <strong id="immediateMoveMemberName"></strong> {% trans "immédiatement 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">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btnCancelImmediateMove" data-bs-dismiss="modal">
                    {% trans "Annuler" %}
                </button>
                <button type="button" class="btn btn-sm btn-warning fw-semibold" id="btnConfirmImmediateMove">
                    <i class="bi bi-check2 me-1"></i>{% trans "Confirmer le changement immédiat" %}
                </button>
            </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">
                        <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>
                </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="text" 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="text" 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="text" 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="text" class="form-control form-control-sm" id="dupTargetWeek">
                        </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 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>
</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 %};

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 Confirmer de la modale d'avertissement
    $('#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 },
            function(resp) {
                updateCounters();
                updateEmptyPlaceholders();
            },
            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;
        }
    });

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

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

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

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
// ───────────────────────────────────────────────
let _planningState = {
    anchorDate: new Date().toISOString().split('T')[0],
    viewMode: 'week',
    companyId: '',
    data: null,
    members: [],
    flatpickrInstance: null,
};

// Initialisation au chargement de la page
document.addEventListener('DOMContentLoaded', function() {
    // 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;
                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];
        _planningState.flatpickrInstance.setDate(_planningState.anchorDate);
        loadPlanningData();
    });
    $('#btn-refresh-planning').on('click', function() {
        loadPlanningData();
    });

    // Changement de mode de vue (5j / 7j / 14j)
    $('#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');
        loadPlanningData();
    });

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

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

    // Chargement automatique lors du premier clic sur l'onglet Planification
    let planningLoadedOnce = false;
    $('#tab-planning-btn').on('shown.bs.tab', function() {
        if (!planningLoadedOnce) {
            planningLoadedOnce = true;
            loadPlanningData();
        }
    });

    // Mode duplication modal switch
    $('input[name="dupMode"]').on('change', function() {
        if ($(this).val() === 'week') {
            $('#dupSectionDay').addClass('d-none');
            $('#dupSectionWeek').removeClass('d-none');
        } else {
            $('#dupSectionDay').removeClass('d-none');
            $('#dupSectionWeek').addClass('d-none');
        }
    });

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

function navigatePlanningDate(direction) {
    const d = new Date(_planningState.anchorDate);
    const step = _planningState.viewMode === 'two_weeks' ? 14 : 7;
    d.setDate(d.getDate() + (direction * step));
    _planningState.anchorDate = d.toISOString().split('T')[0];
    _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.' %}");
    });
}

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

        th.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
                <div class="flex-grow-1 text-center">
                    <div class="small text-uppercase ${day.is_past ? 'text-muted opacity-75' : 'text-muted'}" style="font-size:0.75rem;">${escapeHtml(day.day_short)}</div>
                    <div class="fw-bold fs-6 ${day.is_past ? 'text-muted' : ''}">${escapeHtml(day.day_num)}</div>
                    ${day.is_today ? `<span class="badge bg-primary text-white mt-1" style="font-size:0.65rem;">{% trans "Aujourd'hui"|escapejs %}</span>` : ''}
                    ${day.is_past ? `<span class="badge bg-light text-muted border mt-1" style="font-size:0.62rem;"><i class="bi bi-clock-history me-1"></i>{% trans "Passé"|escapejs %}</span>` : ''}
                </div>
                ${CAN_EDIT_TEAMS ? `
                <div class="dropdown">
                    <button class="btn btn-sm btn-link text-muted p-0 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" title="{% trans 'Options de la journée'|escapejs %}"></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>{% trans "Dupliquer cette journée…"|escapejs %}
                            </a>
                        </li>
                    </ul>
                </div>` : ''}
            </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>`;
    }

    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}')">
                <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>
            ${absenceBadge}
        </div>
        ${actionsHtml}
    `;

    return card;
}

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 = ui.draggable.data('memberId');
            const targetTeamId = $(this).data('teamId');
            const targetDate = $(this).data('date');

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

            postJSON(
                '/contracts/teams/planning/assign/',
                {
                    member_id: parseInt(memberId),
                    team_id: parseInt(targetTeamId),
                    date: targetDate,
                },
                function(resp) {
                    loadPlanningData();
                },
                function(err) {
                    alert(err);
                }
            );
        }
    });
}

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;
    roleSelect.innerHTML = '<option value="">{% trans "Tous les rôles" %}</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;

        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>
            <i class="bi bi-grip-vertical text-muted"></i>
        `;

        sidebarContainer.appendChild(card);
    });

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

function unassignMemberFromDate(memberId, dateStr) {
    postJSON(
        '/contracts/teams/planning/assign/',
        {
            member_id: parseInt(memberId),
            team_id: null,
            date: dateStr,
        },
        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
// ───────────────────────────────────────────────
function openDuplicateModal() {
    const todayStr = new Date().toISOString().split('T')[0];
    $('#dupSourceDate').val(_planningState.anchorDate || todayStr);

    const d = new Date(_planningState.anchorDate || todayStr);
    d.setDate(d.getDate() + 1);
    $('#dupTargetDate').val(d.toISOString().split('T')[0]);

    $('#dupSourceWeek').val(_planningState.anchorDate || todayStr);
    const dWeek = new Date(_planningState.anchorDate || todayStr);
    dWeek.setDate(dWeek.getDate() + 7);
    $('#dupTargetWeek').val(dWeek.toISOString().split('T')[0]);

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

function openDuplicateModalForDay(dateStr) {
    openDuplicateModal();
    $('#dupSourceDate').val(dateStr);
    const d = new Date(dateStr);
    d.setDate(d.getDate() + 1);
    $('#dupTargetDate').val(d.toISOString().split('T')[0]);
}

function submitDuplicatePlanning() {
    const mode = $('input[name="dupMode"]:checked').val();
    const sourceDate = mode === 'week' ? $('#dupSourceWeek').val() : $('#dupSourceDate').val();
    const targetDate = mode === 'week' ? $('#dupTargetWeek').val() : $('#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);
            }
        });
    }
});
</script>
{% endblock script %}