{% extends 'sam/layout.html.twig' %}

{% block title %}{{ course.fullname }} - Formation - SAM{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Accordion: état fermé par défaut */
        .cd-accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .cd-accordion-content--open {
            max-height: none;
        }
        /* Rotation de la flèche */
        .cd-accordion-icon {
            transition: transform 0.3s ease;
        }
        .cd-accordion-icon--open {
            transform: rotate(90deg);
        }
    </style>
{% endblock %}

{% block sam_body %}
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# ══════════════════════════════════════════════════════════════
       BREADCRUMB
       ══════════════════════════════════════════════════════════════ #}
    {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
        showHome: false,
        items: [
            { label: 'Dashboard', href: path('app_sam_index') },
            { label: 'Formations', href: path('app_sam_courses') },
            { label: course.shortname }
        ],
        class: 'mb-6'
    } %}

    {# ══════════════════════════════════════════════════════════════
       PRÉ-CALCULS
       ══════════════════════════════════════════════════════════════ #}
    {% set totalTrackable = trackableActivities * enrolledCount %}
    {% set completionPct  = totalTrackable > 0 ? (totalCompletedActivities / totalTrackable * 100)|round : 0 %}
    {% set healthColor    = averageProgress >= 75 ? 'success' : (averageProgress > 0 ? 'warning' : 'error') %}
    {% set healthLabel    = averageProgress >= 75 ? 'Bonne progression' : (averageProgress > 0 ? 'En cours' : 'Pas commencé') %}

    {% set distCompleted  = 0 %}
    {% set distInProgress = 0 %}
    {% set distNotStarted = 0 %}
    {% for data in enrolledUsers %}
        {% if data.progress.percentage >= 75 %}{% set distCompleted = distCompleted + 1 %}
        {% elseif data.progress.percentage > 0 %}{% set distInProgress = distInProgress + 1 %}
        {% else %}{% set distNotStarted = distNotStarted + 1 %}
        {% endif %}
    {% endfor %}

    {% set atRiskList = [] %}
    {% set otherList  = [] %}
    {% for data in enrolledUsers %}
        {% if data.progress.percentage == 0 and not data.user.suspended %}
            {% set atRiskList = atRiskList|merge([data]) %}
        {% else %}
            {% set otherList = otherList|merge([data]) %}
        {% endif %}
    {% endfor %}
    {% set sortedUsers = atRiskList|merge(otherList) %}

    {# ══════════════════════════════════════════════════════════════
       HERO CARD
       ══════════════════════════════════════════════════════════════ #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-10">

        <div class="p-7">
            <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-6">

                {# Identité de la formation #}
                <div class="flex items-start gap-4 flex-1 min-w-0">
                    <div class="w-14 h-14 rounded-2xl bg-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'presentation-graph', size: '2xl', color: 'cohorts' } only %}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap mb-1">
                            <h1 class="text-2xl font-bold font-secondary text-gray-900">{{ course.fullname }}</h1>
                            {% if not course.visible %}
                                {% include '_atoms/badge/badge.html.twig' with { label: 'Masqué', variant: 'warning', size: 'sm' } %}
                            {% endif %}
                        </div>
                        <p class="text-sm text-gray-500 mb-3">
                            <code class="bg-gray-100 px-2 py-0.5 rounded text-gray-500 font-mono">{{ course.shortname }}</code>
                            &nbsp;·&nbsp; {{ sections|length }} section{{ sections|length != 1 ? 's' : '' }}
                            &nbsp;·&nbsp; {{ totalActivities }} activité{{ totalActivities != 1 ? 's' : '' }}
                        </p>
                        {% if courseCohorts|length > 0 %}
                            <div class="flex flex-wrap items-center gap-1.5">
                                <span class="text-sm text-gray-400 font-medium">Cohortes :</span>
                                {% for cohort in courseCohorts %}
                                    <a href="{{ path('app_sam_cohorts_detail', {id: cohort.moodleId}) }}" class="hover:opacity-75 transition-opacity">
                                        {% include '_atoms/badge/badge.html.twig' with { label: cohort.name, variant: 'cohorts', size: 'sm' } %}
                                    </a>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>

                {# Actions #}
                <div class="flex items-center gap-2 shrink-0">

                    {# Ouvrir sur Moodle #}
                    <a href="{{ company.moodleUrl|trim('/')|raw }}/course/view.php?id={{ course.moodleId }}"
                       target="_blank" rel="noopener"
                       class="inline-flex items-center gap-2 h-10 px-4 text-sm font-semibold rounded-lg bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                            <polyline points="15 3 21 3 21 9"/>
                            <line x1="10" y1="14" x2="21" y2="3"/>
                        </svg>
                        Ouvrir sur Moodle
                    </a>

                    {# Bouton sync #}
                    <button type="button"
                            id="syncCourseBtn"
                            class="inline-flex items-center gap-2 h-10 px-4 text-sm font-semibold rounded-lg bg-cohorts/10 text-cohorts hover:bg-cohorts/20 transition-all cursor-pointer disabled:opacity-50"
                            onclick="syncCourse({{ course.id }}, this);">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 4v6h-6M1 20v-6h6"/>
                            <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>
                        </svg>
                        Synchroniser
                    </button>

                </div>
            </div>

            {# KPI inline strip #}
            <div class="mt-6 pt-5 border-t border-gray-100 grid grid-cols-2 sm:grid-cols-4 gap-0 divide-x divide-gray-100">
                <div class="flex items-center gap-3 pr-4">
                    <div class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'md', color: 'muted' } only %}
                    </div>
                    <div>
                        <div class="text-xl font-bold text-gray-900">{{ enrolledCount }}</div>
                        <div class="text-sm text-gray-400">Inscrits</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 px-4">
                    <div class="w-9 h-9 rounded-lg bg-success/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'check-circle', size: 'md', color: 'success' } only %}
                    </div>
                    <div>
                        <div class="text-xl font-bold text-gray-900">{{ completionPct }}%</div>
                        <div class="text-sm text-gray-400">{{ totalCompletedActivities }}/{{ totalTrackable }} activités</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 px-4">
                    <div class="w-9 h-9 rounded-lg bg-warning/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'clock', size: 'md', color: 'warning' } only %}
                    </div>
                    <div>
                        <div class="text-xl font-bold text-gray-900">{{ totalTimeFormatted ?: '—' }}</div>
                        <div class="text-sm text-gray-400">Apprentissage</div>
                    </div>
                </div>
                <div class="flex items-center gap-3 pl-4">
                    <div class="w-9 h-9 rounded-lg bg-error/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'md', color: 'error' } only %}
                    </div>
                    <div>
                        <div class="text-xl font-bold {{ distNotStarted > 0 ? 'text-error' : 'text-gray-900' }}">{{ distNotStarted }}</div>
                        <div class="text-sm text-gray-400">Pas commencé</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# ══════════════════════════════════════════════════════════════
       SUIVI DES STAGIAIRES
       ══════════════════════════════════════════════════════════════ #}
    {% embed '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Suivi des stagiaires',
        subtitle: enrolledCount ~ ' inscrit' ~ (enrolledCount != 1 ? 's' : ''),
        icon: 'users',
        iconColor: 'cohorts'
    } %}
        {% block right %}
            {% include '_atoms/button/button.html.twig' with {
                label: 'Gérer',
                variant: 'cohorts',
                size: 'md',
                icon: 'settings',
                attr: {'onclick': 'openManageModal()'}
            } %}
        {% endblock %}
    {% endembed %}

    {% if enrolledUsers|length == 0 %}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm mb-8">
            {% include '_molecules/empty-state/empty-state.html.twig' with {
                title: 'Aucun inscrit',
                description: "Cette formation n'a pas encore de stagiaires inscrits.",
                icon: 'users', variant: 'minimal', size: 'sm'
            } %}
        </div>
    {% else %}

        {# ── Barre de recherche ── #}
        <div class="flex items-center gap-3 mb-3">
            <div class="relative flex-1">
                <svg class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                <input type="search" id="cd-user-search"
                       class="w-full pl-9 pr-4 py-2.5 text-sm bg-white border border-gray-200 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cohorts/30 focus:border-cohorts transition-colors"
                       placeholder="Rechercher un stagiaire par nom ou email…"
                       oninput="filterUsers()">
            </div>
            <span id="cd-user-count" class="text-sm text-gray-500 shrink-0 whitespace-nowrap"></span>
        </div>

        {# ── Tableau des inscrits ── #}
        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm mb-8 overflow-hidden">

            <div class="grid grid-cols-[2fr_1fr_0.8fr_1.2fr] gap-4 px-6 py-3 bg-gray-50 border-b border-gray-200 text-xs font-bold text-gray-500 uppercase tracking-wider">
                <span>Stagiaire</span>
                <span>Inscription</span>
                <span>Temps</span>
                <span class="text-center">Progression</span>
            </div>

            <div id="cd-user-list" class="max-h-[640px] overflow-y-auto">
            {% for data in sortedUsers %}
                {% set user     = data.user %}
                {% set progress = data.progress %}
                {% set isAtRisk = progress.percentage == 0 and not user.suspended %}
                {% set pColor   = progress.percentage >= 75 ? 'success' : (progress.percentage > 0 ? 'warning' : 'neutral') %}
                {% set initials = user.firstname|slice(0,1)|upper ~ user.lastname|slice(0,1)|upper %}

                <a href="{{ path('app_sam_users_detail', {id: user.moodleId}) }}"
                   data-user-row
                   data-search="{{ (user.fullname ~ ' ' ~ user.email)|lower }}"
                   class="grid grid-cols-[2fr_1fr_0.8fr_1.2fr] gap-4 items-center px-6 py-4 border-b border-gray-100 last:border-b-0 transition-colors group relative
                          {{ loop.index is odd ? 'bg-white' : 'bg-cohorts/3' }} hover:bg-cohorts/[0.07]">

                    {# Stagiaire #}
                    <div class="flex items-center gap-3 min-w-0">
                        {% include '_atoms/avatar/avatar.html.twig' with {
                            initials: initials,
                            size: 'md',
                            variant: user.suspended ? 'gray' : 'cohorts'
                        } only %}
                        <div class="min-w-0">
                            <div class="text-sm font-semibold text-gray-900 truncate group-hover:text-cohorts transition-colors">{{ user.fullname }}</div>
                            <div class="text-xs text-gray-400 truncate mt-0.5">{{ user.email }}</div>
                        </div>
                    </div>

                    {# Type d'inscription #}
                    <div>
                        {% if data.courseUser.isFromCohort() %}
                            {% include '_atoms/badge/badge.html.twig' with { label: 'Cohorte', variant: 'cohorts', size: 'sm' } %}
                        {% else %}
                            {% include '_atoms/badge/badge.html.twig' with { label: 'Manuel', variant: 'neutral', size: 'sm' } %}
                        {% endif %}
                    </div>

                    {# Temps passé sur la formation #}
                    <div class="text-sm text-gray-600">
                        {% set timeSpent = progress.time_spent ?? 0 %}
                        {% if timeSpent == 0 %}
                            <span class="text-gray-400">—</span>
                        {% elseif timeSpent < 3600 %}
                            {{ (timeSpent / 60)|round }} min
                        {% else %}
                            {% set h = (timeSpent / 3600)|round(0, 'floor') %}
                            {% set m = ((timeSpent % 3600) / 60)|round %}
                            {{ h }}h{% if m > 0 %} {{ m < 10 ? '0' ~ m : m }}min{% endif %}
                        {% endif %}
                    </div>

                    {# Progression — jauge circulaire #}
                    <div class="flex items-center justify-center gap-2.5">
                            {% set colorVar = pColor == 'success' ? '--color-success' : (pColor == 'warning' ? '--color-warning' : '--color-gray-300') %}
                            {% set offset   = (2 * 3.14159 * 24) * (100 - progress.percentage) / 100 %}
                            <svg width="60" height="60" viewBox="0 0 60 60" class="shrink-0">
                                <circle cx="30" cy="30" r="24" fill="none" stroke="#f3f4f6" stroke-width="4"/>
                                <circle cx="30" cy="30" r="24" fill="none"
                                        style="stroke: var({{ colorVar }})"
                                        stroke-width="4"
                                        stroke-linecap="round"
                                        stroke-dasharray="{{ 2 * 3.14159 * 24 }}"
                                        stroke-dashoffset="{{ offset }}"
                                        transform="rotate(-90 30 30)"/>
                                <text x="30" y="30" text-anchor="middle" dominant-baseline="central"
                                      font-size="12" font-weight="700"
                                      style="fill: var({{ colorVar }})">{{ progress.percentage|number_format(0) }}%</text>
                            </svg>
                    </div>

                </a>
            {% endfor %}
            </div>{# end #cd-user-list #}

            <div class="px-6 py-3 bg-gray-50 border-t border-gray-100 flex items-center justify-between">
                <span class="text-sm text-gray-500"><strong class="text-gray-700" id="cd-footer-count">{{ enrolledCount }}</strong> stagiaire{{ enrolledCount != 1 ? 's' : '' }}</span>
            </div>
        </div>
    {% endif %}

    {# ══════════════════════════════════════════════════════════════
       CONTENU DE LA FORMATION
       ══════════════════════════════════════════════════════════════ #}
    {% embed '_molecules/section-divider/section-divider.html.twig' with {
        title: 'Contenu de la formation',
        subtitle: sections|length ~ ' section' ~ (sections|length != 1 ? 's' : '') ~ ' · ' ~ totalActivities ~ ' activité' ~ (totalActivities != 1 ? 's' : ''),
        icon: 'book',
        iconColor: 'warning'
    } %}
        {% block right %}
            {% include '_molecules/expand-toggle/expand-toggle.html.twig' with {
                id: 'cd-toggle-all',
                onclick: 'toggleAllSections()'
            } %}
        {% endblock %}
    {% endembed %}

    <div class="space-y-3 mb-8">

        {% if sections|length == 0 %}
            <div class="bg-white rounded-2xl border border-gray-200 shadow-sm">
                {% include '_molecules/empty-state/empty-state.html.twig' with {
                    title: 'Aucune section',
                    description: 'Cette formation ne contient pas encore de sections.',
                    icon: 'book', variant: 'minimal', size: 'sm'
                } %}
            </div>
        {% else %}
            {% for section in sections %}
                {% set trackableCount = 0 %}
                {% for activity in section.activities %}
                    {% if activity.isTrackable %}{% set trackableCount = trackableCount + 1 %}{% endif %}
                {% endfor %}

                <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">

                    {# En-tête de section — cliquable #}
                    <button type="button"
                            class="w-full flex items-center gap-4 px-5 py-4 hover:bg-gray-50 transition-colors text-left"
                            onclick="toggleSection('sec-{{ section.id }}', this)">

                        {# Numéro de section #}
                        <div class="w-9 h-9 rounded-lg bg-cohorts/15 text-cohorts flex items-center justify-center shrink-0 text-sm font-bold">
                            {{ section.position }}
                        </div>

                        {# Titre + méta #}
                        <div class="flex-1 min-w-0">
                            <p class="text-base font-semibold text-gray-800">{{ section.name|default('Section ' ~ section.position) }}</p>
                            <p class="text-sm text-gray-500 mt-0.5">
                                {{ section.activities|length }} activité{{ section.activities|length != 1 ? 's' : '' }}
                                {% if trackableCount > 0 %}
                                    <span class="text-success font-medium">· {{ trackableCount }} suivie{{ trackableCount != 1 ? 's' : '' }}</span>
                                {% endif %}
                            </p>
                        </div>

                        {# Chevron — classe requise pour la rotation JS #}
                        <div class="cd-accordion-icon w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center shrink-0">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-gray-500">
                                <polyline points="9 18 15 12 9 6"/>
                            </svg>
                        </div>
                    </button>

                    {# Liste des activités — fermée par défaut #}
                    <div id="sec-{{ section.id }}" class="cd-accordion-content border-t border-gray-100">
                        {% if section.activities|length == 0 %}
                            <p class="px-5 py-4 text-sm text-gray-400 italic">Aucune activité dans cette section.</p>
                        {% else %}
                            {% for activity in section.activities %}
                                <div class="flex items-center gap-4 px-5 py-3.5 border-b border-gray-50 last:border-b-0
                                            {{ loop.index is odd ? 'bg-white' : 'bg-gray-50/50' }} hover:bg-blue-50/30 transition-colors">

                                    {# Icône du type — verte si suivi, grise sinon #}
                                    <div class="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
                                                {{ activity.isTrackable ? 'bg-success/15' : 'bg-gray-100 border border-gray-200' }}">
                                        {% include 'sam/_activity_icon.html.twig' with {type: activity.type, color: activity.isTrackable ? 'success' : 'gray-400'} only %}
                                    </div>

                                    {# Nom + type #}
                                    <div class="flex-1 min-w-0">
                                        <span class="text-sm font-medium text-gray-800 block truncate">{{ activity.name }}</span>
                                        <span class="text-xs text-gray-400 font-mono">{{ activity.type }}</span>
                                    </div>

                                    {# Badge suivi #}
                                    {% if activity.isTrackable %}
                                        <span class="shrink-0 text-xs font-semibold text-success bg-success/10 px-2.5 py-1 rounded-full">Suivi</span>
                                    {% else %}
                                        <span class="shrink-0 text-xs font-medium text-gray-400 bg-gray-100 px-2.5 py-1 rounded-full">Non suivi</span>
                                    {% endif %}

                                    {# Lien Moodle #}
                                    {% if activity.url %}
                                        <a href="{{ activity.url }}" target="_blank" rel="noopener"
                                           class="shrink-0 text-gray-400 hover:text-cohorts transition-colors"
                                           data-tooltip="Ouvrir sur Moodle">
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                                <polyline points="15 3 21 3 21 9"/>
                                                <line x1="10" y1="14" x2="21" y2="3"/>
                                            </svg>
                                        </a>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>


    {# ══════════════════════════════════════════════════════════════
       MODAL — Gérer les stagiaires
       ══════════════════════════════════════════════════════════════ #}
    <div class="fixed inset-0 z-50 items-center justify-center p-4"
         style="display:none"
         id="cd-manage-modal">
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" onclick="closeManageModal()"></div>

        <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-lg z-10 flex flex-col" style="max-height: 82vh">

            {# ── Header ── #}
            <div class="px-6 pt-5 pb-4 border-b border-gray-100 flex items-center justify-between shrink-0">
                <div class="flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-cohorts/10 flex items-center justify-center shrink-0">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'users', size: 'sm', color: 'cohorts' } only %}
                    </div>
                    <div>
                        <h2 class="text-base font-semibold text-gray-900">Gérer les stagiaires</h2>
                        <p class="text-xs text-gray-400 mt-0.5" id="cd-manage-subtitle"></p>
                    </div>
                </div>
                {% include '_atoms/close-button/close-button.html.twig' with {
                    attr: { onclick: 'closeManageModal()' }
                } only %}
            </div>

            {# ── Recherche ── #}
            <div class="px-4 py-3 border-b border-gray-100 shrink-0">
                <div class="relative">
                    <span class="absolute inset-y-0 left-3 flex items-center pointer-events-none text-gray-400">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
                    </span>
                    <input type="text"
                           id="cd-manage-search"
                           autocomplete="off"
                           placeholder="Rechercher un stagiaire…"
                           class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-xl focus:outline-none focus:border-cohorts focus:ring-2 focus:ring-cohorts/20 transition-all"
                           oninput="cdFilterList(this.value)">
                </div>
            </div>

            {# ── Liste (tous les stagiaires, inscrits pré-cochés) ── #}
            <div class="flex-1 overflow-y-auto min-h-0">
                <div id="cd-users-list" class="divide-y divide-gray-100">
                    <div class="flex items-center justify-center py-10 text-gray-400 text-sm">
                        <svg class="w-4 h-4 mr-2 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
                        Chargement…
                    </div>
                </div>
            </div>

            {# ── Panel confirmation suppression ── #}
            <div id="cd-confirm-state" class="hidden">
                {# Rendu par JS #}
            </div>

            {# ── Footer ── #}
            <div class="px-5 py-4 border-t border-gray-100 flex items-center justify-between shrink-0 bg-gray-50 rounded-b-2xl">
                <div class="flex items-center gap-3 text-xs">
                    <span id="cd-footer-adds"    class="text-success font-semibold hidden"></span>
                    <span id="cd-footer-removes" class="text-error font-semibold hidden"></span>
                </div>
                <div class="flex gap-2">
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Annuler', variant: 'ghost', size: 'sm',
                        attr: {'id': 'cd-manage-cancel-btn', 'onclick': 'closeManageModal()'}
                    } %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: 'Valider', variant: 'cohorts', size: 'sm',
                        disabled: true,
                        attr: {'id': 'cd-manage-btn', 'onclick': 'cdConfirmValidate()'}
                    } %}
                </div>
            </div>

        </div>
    </div>

</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        /**
         * Déplier / replier toutes les sections d'un coup
         * Utilise la molécule expand-toggle (_molecules/expand-toggle/expand-toggle.html.twig)
         */
        function toggleAllSections() {
            const btn      = document.getElementById('cd-toggle-all');
            const expanded = btn.dataset.expanded === 'true';
            const nowOpen  = !expanded;

            const contents = document.querySelectorAll('.cd-accordion-content');
            const sectionBtns = document.querySelectorAll('[onclick^="toggleSection"]');

            contents.forEach((content, i) => {
                const sBtn = sectionBtns[i];
                const icon = sBtn ? sBtn.querySelector('.cd-accordion-icon') : null;
                if (nowOpen) {
                    content.classList.add('cd-accordion-content--open');
                    content.style.maxHeight = 'none';
                    if (icon) icon.classList.add('cd-accordion-icon--open');
                } else {
                    content.style.maxHeight = content.scrollHeight + 'px';
                    requestAnimationFrame(() => { content.style.maxHeight = '0'; });
                    content.classList.remove('cd-accordion-content--open');
                    if (icon) icon.classList.remove('cd-accordion-icon--open');
                }
            });

            btn.dataset.expanded = nowOpen ? 'true' : 'false';
            document.getElementById('cd-toggle-all-label').textContent     = nowOpen ? 'Tout replier' : 'Tout déplier';
            document.getElementById('cd-toggle-all-icon-expand').classList.toggle('hidden', nowOpen);
            document.getElementById('cd-toggle-all-icon-collapse').classList.toggle('hidden', !nowOpen);
        }

        /**
         * Toggle section accordion — simple, sans dépendance Stimulus
         */
        function toggleSection(id, button) {
            const content = document.getElementById(id);
            const icon = button.querySelector('.cd-accordion-icon');
            if (!content) return;

            const isOpen = content.classList.contains('cd-accordion-content--open');

            if (isOpen) {
                content.style.maxHeight = content.scrollHeight + 'px';
                requestAnimationFrame(() => { content.style.maxHeight = '0'; });
                content.classList.remove('cd-accordion-content--open');
                if (icon) icon.classList.remove('cd-accordion-icon--open');
            } else {
                content.classList.add('cd-accordion-content--open');
                content.style.maxHeight = content.scrollHeight + 'px';
                if (icon) icon.classList.add('cd-accordion-icon--open');
                setTimeout(() => {
                    if (content.classList.contains('cd-accordion-content--open')) {
                        content.style.maxHeight = 'none';
                    }
                }, 300);
            }
        }

        /**
         * Recherche et filtre le tableau des inscrits
         */
        function filterUsers() {
            const query = document.getElementById('cd-user-search').value.toLowerCase().trim();
            const rows  = document.querySelectorAll('[data-user-row]');
            let visible = 0;
            rows.forEach(r => {
                const match = !query || r.dataset.search.includes(query);
                r.style.display = match ? '' : 'none';
                if (match) visible++;
            });
            const el = document.getElementById('cd-user-count');
            if (el) el.textContent = (query && visible < rows.length) ? `${visible} résultat${visible !== 1 ? 's' : ''} sur ${rows.length}` : '';
        }

        /**
         * Modal — Gérer les stagiaires
         * Charge tous les utilisateurs de l'entreprise, inscrits pré-cochés.
         */
        const CD_COURSE_ID = {{ course.id }};

        // IDs de référence (initialisés après chargement)
        let CD_INITIAL_IDS = new Set();
        let CD_COHORT_IDS  = new Set();
        let cdAllUsers     = [];
        let cdCurrentMap   = new Map(); // moodleId → { moodleId, fullname, email }

        const CHECK_ICON = `<svg class="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M20 6L9 17l-5-5"/></svg>`;

        function escapeHtml(s) {
            const d = document.createElement('div'); d.textContent = s; return d.innerHTML;
        }

        async function openManageModal() {
            document.getElementById('cd-confirm-state').classList.add('hidden');
            document.getElementById('cd-users-list').classList.remove('hidden');
            const searchInput = document.getElementById('cd-manage-search');
            if (searchInput) searchInput.value = '';
            document.getElementById('cd-manage-modal').style.display = 'flex';

            // Charger tous les utilisateurs de l'entreprise
            try {
                const r = await fetch(`/sam/formations/${CD_COURSE_ID}/users/all`, {
                    credentials: 'same-origin',
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
                });
                const d = await r.json();
                if (!d.success) throw new Error(d.message);

                cdAllUsers     = d.data.items;
                CD_INITIAL_IDS = new Set(cdAllUsers.filter(u => u.isEnrolled).map(u => u.moodleId));
                CD_COHORT_IDS  = new Set(cdAllUsers.filter(u => u.isFromCohort).map(u => u.moodleId));
                cdCurrentMap   = new Map(cdAllUsers.filter(u => u.isEnrolled).map(u => [u.moodleId, u]));

                cdRenderList();
                cdUpdateFooter();
            } catch (e) {
                document.getElementById('cd-users-list').innerHTML =
                    `<div class="flex flex-col items-center justify-center py-10 text-center px-6">
                        <p class="text-sm text-error">Impossible de charger les stagiaires</p>
                        <p class="text-xs text-gray-400 mt-1">${escapeHtml(e.message)}</p>
                    </div>`;
            }
        }

        function closeManageModal() {
            document.getElementById('cd-manage-modal').style.display = 'none';
        }

        // ── Rendu de la liste ─────────────────────────────────────────

        function cdRenderList() {
            const list = document.getElementById('cd-users-list');

            if (!cdAllUsers.length) {
                list.innerHTML = `<div class="flex flex-col items-center justify-center py-12 text-center">
                    <svg class="w-10 h-10 text-gray-200 mb-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
                    <p class="text-sm text-gray-400">Aucun stagiaire dans l'entreprise</p></div>`;
                return;
            }

            list.innerHTML = cdAllUsers.map(u => cdRowHtml(u.moodleId, u.fullname, u.email, u.suspended, u.isFromCohort)).join('');

            const enrolledCount = CD_INITIAL_IDS.size;
            document.getElementById('cd-manage-subtitle').textContent =
                `${enrolledCount} inscrit${enrolledCount > 1 ? 's' : ''} · ${cdAllUsers.length} au total`;
        }

        function cdRowHtml(moodleId, fullname, email, suspended, isFromCohort) {
            const initials  = fullname.split(' ').map(p => p[0] ?? '').slice(0,2).join('').toUpperCase();
            const isChecked = cdCurrentMap.has(moodleId);
            const locked    = isFromCohort;
            const rowBg     = isChecked ? 'bg-cohorts/[0.04]' : 'hover:bg-gray-50';
            const cbColor   = isChecked ? 'bg-cohorts border-cohorts' : 'border-gray-300 bg-white';
            const cbOpacity = locked ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
            const click     = locked ? '' : `onclick="cdToggle(${moodleId}, '${escapeHtml(fullname).replace(/'/g,"\\'")}', '${escapeHtml(email || '')}')"`;
            const badge     = isFromCohort ? `<span class="text-xs px-1.5 py-0.5 rounded-full bg-cohorts/10 text-cohorts shrink-0">Cohorte</span>` : '';

            return `<div class="flex items-center gap-3 px-4 py-2.5 transition-colors ${rowBg} ${cbOpacity}" ${click} data-manage-row="${moodleId}" data-search="${escapeHtml((fullname + ' ' + (email || '')).toLowerCase())}">
                <div class="w-5 h-5 rounded-md border-2 flex items-center justify-center shrink-0 transition-colors ${cbColor}">${isChecked ? CHECK_ICON : ''}</div>
                <div class="w-7 h-7 rounded-full bg-cohorts/10 text-cohorts flex items-center justify-center text-xs font-semibold shrink-0">${initials}</div>
                <div class="flex-1 min-w-0">
                    <div class="text-sm font-medium text-gray-900 truncate">${escapeHtml(fullname)}</div>
                    <div class="text-xs text-gray-400 truncate">${escapeHtml(email || '')}</div>
                </div>
                <div class="shrink-0 flex items-center gap-1">${badge}${suspended ? '<span class="text-xs px-1.5 py-0.5 rounded-full bg-gray-100 text-gray-500">Inactif</span>' : ''}</div>
            </div>`;
        }

        function cdFilterList(query) {
            const q = query.toLowerCase().trim();
            document.querySelectorAll('[data-manage-row]').forEach(row => {
                const name  = (row.dataset.search || '').toLowerCase();
                row.style.display = !q || name.includes(q) ? '' : 'none';
            });
        }

        function cdToggle(moodleId, fullname, email) {
            if (CD_COHORT_IDS.has(moodleId)) return;
            cdCurrentMap.has(moodleId) ? cdCurrentMap.delete(moodleId) : cdCurrentMap.set(moodleId, { moodleId, fullname, email });
            const row = document.querySelector(`[data-manage-row="${moodleId}"]`);
            if (row) {
                const isChecked = cdCurrentMap.has(moodleId);
                const cb = row.querySelector('div.rounded-md');
                if (cb) {
                    cb.className = `w-5 h-5 rounded-md border-2 flex items-center justify-center shrink-0 transition-colors ${isChecked ? 'bg-cohorts border-cohorts' : 'border-gray-300 bg-white'}`;
                    cb.innerHTML = isChecked ? CHECK_ICON : '';
                }
                row.classList.toggle('bg-cohorts/[0.04]', isChecked);
                row.classList.toggle('hover:bg-gray-50', !isChecked);
            }
            cdUpdateFooter();
        }

        // ── Footer ────────────────────────────────────────────────────

        function cdUpdateFooter() {
            let adds = 0, removes = 0;
            cdCurrentMap.forEach((u, id) => { if (!CD_INITIAL_IDS.has(id)) adds++; });
            CD_INITIAL_IDS.forEach(id => { if (!cdCurrentMap.has(id) && !CD_COHORT_IDS.has(id)) removes++; });

            const addsEl    = document.getElementById('cd-footer-adds');
            const removesEl = document.getElementById('cd-footer-removes');
            addsEl.textContent    = adds    > 0 ? `+${adds} ajout${adds > 1 ? 's' : ''}` : '';
            removesEl.textContent = removes > 0 ? `−${removes} suppression${removes > 1 ? 's' : ''}` : '';
            addsEl.classList.toggle('hidden', adds === 0);
            removesEl.classList.toggle('hidden', removes === 0);

            const btn = document.getElementById('cd-manage-btn');
            const hasChanges = adds > 0 || removes > 0;
            if (btn) {
                btn.disabled = !hasChanges;
                btn.classList.toggle('opacity-50', !hasChanges);
                btn.classList.toggle('cursor-not-allowed', !hasChanges);
                btn.classList.toggle('pointer-events-none', !hasChanges);
            }
        }

        // ── Validation ────────────────────────────────────────────────

        function cdConfirmValidate() {
            const toRemove = [];
            CD_INITIAL_IDS.forEach(id => {
                if (!cdCurrentMap.has(id) && !CD_COHORT_IDS.has(id)) {
                    const u = cdAllUsers.find(x => x.moodleId === id);
                    if (u) toRemove.push(u);
                }
            });

            if (toRemove.length > 0) {
                document.getElementById('cd-users-list').classList.add('hidden');
                const confirmDiv = document.getElementById('cd-confirm-state');
                confirmDiv.classList.remove('hidden');
                confirmDiv.innerHTML = `
                    <div class="p-6 space-y-5">
                        <div class="flex items-start gap-4 p-4 bg-error/[0.06] border border-error/20 rounded-xl">
                            <div class="w-8 h-8 rounded-lg bg-error/10 flex items-center justify-center shrink-0 mt-0.5">
                                <svg class="w-4 h-4 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
                                    <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-error">Action irréversible</p>
                                <p class="text-sm text-gray-600 mt-1">
                                    ${toRemove.length > 1
                                        ? `<strong>${toRemove.length} stagiaires</strong> vont être retirés du cours.`
                                        : `<strong>${escapeHtml(toRemove[0].fullname)}</strong> va être retiré du cours.`}
                                    Toute progression sera <strong>définitivement supprimée</strong>.
                                </p>
                            </div>
                        </div>
                        ${toRemove.length > 1 ? `
                        <div>
                            <p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Stagiaires concernés</p>
                            <div class="rounded-xl border border-gray-200 divide-y divide-gray-100 overflow-hidden max-h-48 overflow-y-auto">
                                ${toRemove.map(u => {
                                    const ini = u.fullname.split(' ').map(p => p[0] ?? '').slice(0,2).join('').toUpperCase();
                                    return `<div class="flex items-center gap-3 px-4 py-2.5">
                                        <div class="w-7 h-7 rounded-full bg-error/10 text-error flex items-center justify-center text-xs font-semibold shrink-0">${ini}</div>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-gray-800 truncate">${escapeHtml(u.fullname)}</p>
                                            <p class="text-xs text-gray-400 truncate">${escapeHtml(u.email || '')}</p>
                                        </div>
                                    </div>`;
                                }).join('')}
                            </div>
                        </div>` : ''}
                    </div>`;

                const btn    = document.getElementById('cd-manage-btn');
                const cancel = document.getElementById('cd-manage-cancel-btn');
                if (btn) {
                    btn.querySelector('span').textContent = 'Confirmer';
                    btn.onclick = cdExecuteChanges;
                    btn.disabled = false;
                    btn.classList.remove('opacity-50','cursor-not-allowed','pointer-events-none');
                }
                if (cancel) {
                    cancel.querySelector('span').textContent = 'Retour';
                    cancel.onclick = () => {
                        confirmDiv.classList.add('hidden');
                        document.getElementById('cd-users-list').classList.remove('hidden');
                        cancel.querySelector('span').textContent = 'Annuler';
                        cancel.onclick = closeManageModal;
                        btn.querySelector('span').textContent = 'Valider';
                        btn.onclick = cdConfirmValidate;
                        cdUpdateFooter();
                    };
                }
            } else {
                cdExecuteChanges();
            }
        }

        async function cdExecuteChanges() {
            const btn = document.getElementById('cd-manage-btn');
            if (btn) { btn.disabled = true; btn.querySelector('span').textContent = 'En cours…'; }

            let successAdds = 0, successRemoves = 0, errorMsg = null;

            for (const [id] of cdCurrentMap) {
                if (!CD_INITIAL_IDS.has(id)) {
                    try {
                        const r = await fetch(`/sam/formations/${CD_COURSE_ID}/enroll`, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, body: JSON.stringify({ userId: id }) });
                        const d = await r.json();
                        d.success ? successAdds++ : (errorMsg = d.message);
                    } catch { errorMsg = 'Erreur de connexion'; }
                }
            }

            for (const id of CD_INITIAL_IDS) {
                if (!cdCurrentMap.has(id) && !CD_COHORT_IDS.has(id)) {
                    try {
                        const r = await fetch(`/sam/formations/${CD_COURSE_ID}/unenroll/${id}`, { method: 'DELETE', credentials: 'same-origin', headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' } });
                        const d = await r.json();
                        d.success ? successRemoves++ : (errorMsg = d.message);
                    } catch { errorMsg = 'Erreur de connexion'; }
                }
            }

            closeManageModal();
            const total = successAdds + successRemoves;
            if (total > 0) {
                const parts = [];
                if (successAdds    > 0) parts.push(`${successAdds} inscrit${successAdds > 1 ? 's' : ''}`);
                if (successRemoves > 0) parts.push(`${successRemoves} retiré${successRemoves > 1 ? 's' : ''}`);
                window.showNotification?.('success', 'Modifications enregistrées', parts.join(' · ') + '.');
                setTimeout(() => window.location.reload(), 1200);
            } else {
                window.showNotification?.('error', 'Erreur', errorMsg ?? "Impossible d'appliquer les modifications.");
            }
        }

        document.addEventListener('keydown', e => { if (e.key === 'Escape') closeManageModal(); });

        /**
         * Sync formation
         */
        async function syncCourse(courseId, button) {
            button.disabled = true;
            const originalHtml = button.innerHTML;
            button.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="sam-spin"><path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg> Sync...`;
            try {
                const response = await fetch(`/sam/formations/${courseId}/sync`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
                    body: 'async=0'
                });
                const data = await response.json();
                button.disabled = false;
                button.innerHTML = originalHtml;
                if (data.success) {
                    if (typeof window.showNotification === 'function') {
                        window.showNotification('success', 'Synchronisation réussie', data.message || 'La formation a été synchronisée.');
                    }
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    if (typeof window.showNotification === 'function') {
                        window.showNotification('error', 'Erreur', data.message || 'Erreur lors de la synchronisation');
                    }
                }
            } catch (e) {
                button.disabled = false;
                button.innerHTML = originalHtml;
                if (typeof window.showNotification === 'function') {
                    window.showNotification('error', 'Erreur de connexion', 'Impossible de contacter le serveur.');
                }
            }
        }
    </script>
{% endblock %}