{% extends 'base.html.twig' %}

{% block title %}Ma charge · Sensipode{% endblock %}

{% import 'components/_ui.html.twig' as ui %}

{% block body %}
<main class="my-workload-page">
    {% set displayUnit = display_unit() %}
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="my-workload-flash my-workload-flash--{{ type }}">{{ message }}</div>
        {% endfor %}
    {% endfor %}

    {% if view %}
        <header class="page-context-bar my-workload-context-bar">
            {{ include('components/universe_subnav.html.twig', {universe:'charge'}) }}
            <nav class="context-period-nav" aria-label="Navigation semaine">
                <a href="{{ path('app_my_workload', {week: view.previousWeek|date('Y-m-d'), mode: view.mode, unit: displayUnit}) }}" aria-label="Semaine précédente">
                    <span class="material-symbols-outlined">chevron_left</span>
                </a>
                <strong>{{ view.weekLabel }}</strong>
                <a href="{{ path('app_my_workload', {week: view.nextWeek|date('Y-m-d'), mode: view.mode, unit: displayUnit}) }}" aria-label="Semaine suivante">
                    <span class="material-symbols-outlined">chevron_right</span>
                </a>
                <button type="button" class="context-date-jump" data-date-jump data-date-jump-url="{{ path('app_my_workload', {week: '__DATE__', mode: view.mode, unit: displayUnit}) }}" data-date-current="{{ view.weekStart|date('Y-m-d') }}" aria-label="Aller à une date"><span class="material-symbols-outlined" aria-hidden="true">calendar_month</span></button>
                <a aria-label="Aujourd’hui" class="context-today-link" href="{{ path('app_my_workload', {week: view.todayWeek|date('Y-m-d'), mode: view.mode, unit: displayUnit}) }}">Aujourd’hui</a>
            </nav>
            <div class="context-view-tabs" aria-label="Mode de travail">
                <a class="{{ view.mode == 'planifier' ? 'is-active' : '' }}" href="{{ path('app_my_workload', {week: view.weekStart|date('Y-m-d'), mode: 'planifier', unit: displayUnit}) }}">Planifier</a>
                <a class="{{ view.mode == 'declarer' ? 'is-active' : '' }}" href="{{ path('app_my_workload', {week: view.weekStart|date('Y-m-d'), mode: 'declarer', unit: displayUnit}) }}">Déclarer</a>
            </div>
            <span class="context-spacer"></span>
            {{ include('components/unit_menu.html.twig', { currentUnit: displayUnit, routeName: 'app_my_workload', routeParams: app.request.query.all|merge({'week': view.weekStart|date('Y-m-d'), 'mode': view.mode}) }) }}
            <details class="context-popover context-kpi-menu">
                <summary class="context-icon-button">
                    <span class="material-symbols-outlined">monitoring</span>
                    <span>Synthèse</span>
                </summary>
                <div class="context-kpi-strip">
                    {% if view.mode == 'declarer' %}
                        <div><span>CAF semaine</span><strong>{{ ui.hours(view.summary.capacityHours, displayUnit) }}</strong></div>
                        <div><span>Réalisé</span><strong>{{ ui.hours(view.summary.actualHours, displayUnit) }}</strong></div>
                        <div><span>Écart CAF</span><strong>{{ view.summary.actualGapHours > 0 ? '+' : '' }}{{ ui.hours(view.summary.actualGapHours, displayUnit) }}</strong></div>
                        <div><span>Déplacement</span><strong>{{ ui.hours(view.summary.actualTravelHours, displayUnit) }}</strong></div>
                    {% else %}
                        <div><span>Capacité</span><strong>{{ ui.hours(view.summary.capacityHours, displayUnit) }}</strong></div>
                        <div><span>Affecté</span><strong>{{ ui.hours(view.summary.affectedHours, displayUnit) }}</strong></div>
                        <div><span>Planifié</span><strong>{{ ui.hours(view.summary.plannedHours, displayUnit) }}</strong></div>
                        <div><span>Disponible</span><strong>{{ view.summary.availableHours < 0 ? '+' ~ ui.hours(0 - view.summary.availableHours, displayUnit) : ui.hours(view.summary.availableHours, displayUnit) }}</strong></div>
                    {% endif %}
                </div>
            </details>
            {% if view.mode == 'declarer' %}
                <form class="my-workload-validate-form" method="post">
                    <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                    <input type="hidden" name="action" value="validate_week">
                    <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                    <input type="hidden" name="mode" value="{{ view.mode }}">
                    <input type="hidden" name="unit" value="{{ displayUnit }}">
                    <button class="context-primary-action" type="submit">
                        <span class="material-symbols-outlined">task_alt</span>
                        <span>{{ view.summary.declarationStatus == 'valide' ? 'Revalider la semaine' : 'Valider la semaine' }}</span>
                    </button>
                </form>
            {% endif %}
        </header>

        <section class="my-workload-workbench {{ view.mode == 'declarer' ? 'my-workload-workbench--declare' : '' }} {{ view.selectedBlock ? 'has-detail' : 'is-detail-closed' }}">
            {% if view.mode == 'planifier' %}
            <details class="my-workload-backlog" open>
                <summary class="my-workload-backlog__head">
                    <span>À planifier</span>
                    <strong>{{ ui.hours(view.summary.unplacedHours, displayUnit) }} à placer</strong>
                </summary>
                {% for group in view.unplacedGroups %}
                    {% set hasFuture = group.futureItems is defined and group.futureItems|length > 0 %}
                    <section class="my-workload-backlog-group my-workload-backlog-group--{{ group.color }}{{ hasFuture ? ' has-future' : '' }}" data-backlog-group data-project-id="{{ group.projectId }}">
                        <div class="my-workload-backlog-group__head">
                            <span class="my-workload-backlog-group__title">
                                    <button type="button" class="my-workload-backlog-toggle" aria-expanded="true" aria-label="Replier/déplier {{ group.label }}" data-backlog-toggle>
                                        <span class="material-symbols-outlined" aria-hidden="true">expand_more</span>
                                    </button>
                                <strong>{{ group.label }}</strong>
                            </span>
                            {% if hasFuture %}
                                <span class="my-workload-backlog-group__hours" title="Reste à placer cette semaine / total sur le projet">{{ ui.hours(group.weekHours, displayUnit) }} <em>/</em> {{ ui.hours(group.totalHours, displayUnit) }}</span>
                            {% else %}
                                <span class="my-workload-backlog-group__hours">{{ ui.hours(group.hours, displayUnit) }} à placer</span>
                            {% endif %}
                        </div>
                        <div data-backlog-content>
                        {% for phase in group.phases %}
                            <div class="my-workload-backlog-phase"{{ not phase.hasCurrent ? ' data-backlog-future hidden' : '' }}>
                                <div class="my-workload-backlog-phase__title">{{ phase.label }}</div>
                                {% for item in phase.items %}
                                    <button type="button"
                                        class="my-workload-backlog-task{{ item.future ? ' my-workload-backlog-task--future' : '' }}"
                                        {{ item.future ? 'data-backlog-future hidden' : '' }}
                                        draggable="true"
                                        data-drag-kind="allocation"
                                        data-allocation-id="{{ item.allocationId }}"
                                        data-task="{{ item.task|e('html_attr') }}"
                                        data-hours="{{ item.remainingHours }}"
                                        data-default-hours="{{ item.defaultHours }}"
                                        data-fixed="{{ item.fixed ? '1' : '0' }}"
                                        title="{{ item.task }} — {{ item.periodTitle }}"
                                        aria-label="{{ item.task }} — {{ ui.hours(item.remainingHours, displayUnit) }} — {{ item.periodTitle }}"
                                    >
                                        <strong>{{ item.task }}</strong>
                                        <em>{{ ui.hours(item.remainingHours, displayUnit) }}</em>
                                        <span class="my-workload-week-badge">{{ item.periodLabel }}</span>
                                    </button>
                                {% endfor %}
                            </div>
                        {% endfor %}
                        <button type="button" class="my-workload-backlog-more" data-backlog-more hidden>Plus</button>
                        </div>
                    </section>
                {% else %}
                    <p class="my-workload-empty">Toute la charge affectée est placée.</p>
                {% endfor %}
                <div class="my-workload-helper">Glisser une tâche sur un jour pour la planifier.</div>
            </details>
            {% endif %}

            <section class="my-workload-calendar" aria-label="Planning semaine">
                <div class="my-workload-day-grid my-workload-day-grid--head">
                    {% for day in view.days %}
                        <article class="my-workload-day-head my-workload-day-head--{{ day.tone }} {{ day.isPast ? 'is-past' : '' }} {{ day.isToday ? 'is-today' : '' }}">
                            <div>
                                <strong>{{ day.label }} {{ day.date|date('d/m') }}</strong>
                                <span>Capacité {{ ui.hours(day.capacityHours, displayUnit) }}</span>
                            </div>
                            <div class="half-day-pair">
                                <div class="half-day-cell">
                                    <span>AM</span>
                                    <span class="presence-pill presence-pill--{{ day.morning|lower }}">{{ day.morning }}</span>
                                </div>
                                <div class="half-day-cell">
                                    <span>PM</span>
                                    <span class="presence-pill presence-pill--{{ day.afternoon|lower }}">{{ day.afternoon }}</span>
                                </div>
                            </div>
                            <dl>
                                {% if view.mode == 'declarer' %}
                                    <div><dt>Planifié</dt><dd>{{ ui.hours(day.plannedHours, displayUnit) }}</dd></div>
                                    <div><dt>Réalisé</dt><dd>{{ ui.hours(day.actualHours, displayUnit) }}</dd></div>
                                    <div class="{{ day.actualGapHours < -0.01 or day.actualGapHours > 0.01 ? 'is-risk' : '' }}">
                                        <dt>Écart CAF</dt>
                                        <dd>{{ day.actualGapHours > 0 ? '+' : '' }}{{ ui.hours(day.actualGapHours, displayUnit) }}</dd>
                                    </div>
                                    {% if day.actualTravelHours > 0 %}
                                        <div><dt>Déplac.</dt><dd>{{ ui.hours(day.actualTravelHours, displayUnit) }}</dd></div>
                                    {% endif %}
                                {% else %}
                                    <div><dt>Planifié</dt><dd>{{ ui.hours(day.plannedHours, displayUnit) }}</dd></div>
                                    <div>
                                        <dt>{{ day.availableHours < 0 ? 'Surcharge' : 'Disponible' }}</dt>
                                        <dd>{{ day.availableHours < 0 ? '+' ~ ui.hours(0 - day.availableHours, displayUnit) : ui.hours(day.availableHours, displayUnit) }}</dd>
                                    </div>
                                    {% if day.travelHours > 0 %}
                                        <div><dt>Déplac.</dt><dd>{{ ui.hours(day.travelHours, displayUnit) }}</dd></div>
                                    {% endif %}
                                    {% if day.fixedOverload > 0 %}
                                        <div class="is-risk"><dt>Fixe</dt><dd>+{{ ui.hours(day.fixedOverload, displayUnit) }}</dd></div>
                                    {% endif %}
                                {% endif %}
                            </dl>
                        </article>
                    {% endfor %}
                </div>

                <div class="my-workload-day-grid my-workload-day-grid--body">
                    {% for day in view.days %}
                        <article
                            class="my-workload-day-column my-workload-day-column--{{ day.tone }} {{ day.disabled ? 'is-disabled' : '' }} {{ day.isPast ? 'is-past' : '' }} {{ day.isToday ? 'is-today' : '' }}"
                            data-drop-day="{{ day.key }}"
                            data-drop-slot="day"
                            data-workload-drop
                            data-disabled="{{ day.disabled ? '1' : '0' }}"
                            data-can-morning="{{ day.canMorning ? '1' : '0' }}"
                            data-can-afternoon="{{ day.canAfternoon ? '1' : '0' }}"
                            data-available="{{ day.availableHours }}"
                            data-planned="{{ day.plannedHours }}"
                            data-limit="{{ day.dailyLimitHours }}"
                        >
                            {% if day.afternoon == 'OFF' or day.morning == 'OFF' %}
                                <span class="my-workload-off-pattern">{{ day.morning == 'OFF' and day.afternoon == 'OFF' ? 'OFF' : 'Présence partielle' }}</span>
                            {% endif %}
                            {% if view.mode == 'declarer' %}
                                {% if not day.disabled %}
                                    <button class="my-workload-add-slot my-workload-add-slot--top" type="button" data-add-day="{{ day.key }}" data-add-actual="1" data-can-morning="{{ day.canMorning ? '1' : '0' }}" data-can-afternoon="{{ day.canAfternoon ? '1' : '0' }}">+ Ajouter du temps</button>
                                {% endif %}
                                <div class="my-workload-declare-slots">
                                    {% for slotKey, slotLabel in {'morning': 'AM', 'afternoon': 'PM', 'day': 'Journée'} %}
                                        <section class="my-workload-declare-slot">
                                            <strong>{{ slotLabel }}</strong>
                                            {% for block in view.blocks %}
                                                {% if block.dayKey == day.key and block.slot == slotKey %}
                                                    <a
                                                        class="my-workload-block my-workload-block--{{ block.color }} {{ block.fixed ? 'is-fixed' : '' }} {{ block.isTravel ? 'is-travel' : '' }} {{ block.actualOnly ? 'is-actual-only' : '' }}"
                                                        href="{{ path('app_my_workload', {week: view.weekStart|date('Y-m-d'), block: block.id, mode: view.mode}) }}"
                                                    >
                                                        <span class="my-workload-block__meta">
                                                            {% if block.fixed %}
                                                                <span class="material-symbols-outlined" aria-hidden="true">lock</span>
                                                                Fixe
                                                            {% elseif block.isTravel %}
                                                                <span class="material-symbols-outlined" aria-hidden="true">directions_car</span>
                                                                Déplac.
                                                            {% elseif block.actualOnly %}
                                                                Non planifié
                                                            {% else %}
                                                                Déclarer
                                                            {% endif %}
                                                        </span>
                                                        <strong>{{ block.client }}</strong>
                                                        <small>{{ block.isTravel ? 'Déplacement' : block.task }}</small>
                                                        <span class="my-workload-block-time">
                                                            {% if block.actualOnly %}
                                                                Réalisé {{ ui.hours(block.actualHours, displayUnit) }}
                                                            {% else %}
                                                                Planifié {{ ui.hours(block.hours, displayUnit) }} · Réalisé {{ block.actualHours > 0 ? ui.hours(block.actualHours, displayUnit) : '—' }}
                                                            {% endif %}
                                                        </span>
                                                    </a>
                                                {% endif %}
                                            {% endfor %}
                                        </section>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="my-workload-slot-drops" aria-label="Zones de placement">
                                    <button type="button" data-workload-drop data-drop-day="{{ day.key }}" data-drop-slot="morning" {{ not day.canMorning ? 'disabled' : '' }}>AM</button>
                                    <button type="button" data-workload-drop data-drop-day="{{ day.key }}" data-drop-slot="afternoon" {{ not day.canAfternoon ? 'disabled' : '' }}>PM</button>
                                    <button type="button" data-workload-drop data-drop-day="{{ day.key }}" data-drop-slot="day" {{ day.disabled or not day.canMorning or not day.canAfternoon ? 'disabled' : '' }}>Jour</button>
                                </div>
                                {% for block in view.blocks %}
                                    {% if block.dayKey == day.key %}
                                        <a
                                            class="my-workload-block my-workload-block--{{ block.color }} {{ block.fixed ? 'is-fixed' : '' }} {{ block.isTravel ? 'is-travel' : '' }}"
                                            href="{{ path('app_my_workload', {week: view.weekStart|date('Y-m-d'), block: block.id, mode: view.mode}) }}"
                                            draggable="{{ block.editable and not block.fixed ? 'true' : 'false' }}"
                                            data-drag-kind="block"
                                            data-block-id="{{ block.blockId }}"
                                            data-task="{{ block.task|e('html_attr') }}"
                                            data-hours="{{ block.hours }}"
                                            data-fixed="{{ block.fixed ? '1' : '0' }}"
                                        >
                                            <span class="my-workload-block__meta">
                                                {% if block.fixed %}
                                                    <span class="material-symbols-outlined" aria-hidden="true">lock</span>
                                                    Fixe
                                                {% elseif block.isTravel %}
                                                    <span class="material-symbols-outlined" aria-hidden="true">directions_car</span>
                                                    Déplac.
                                                {% else %}
                                                    Dépl.
                                                {% endif %}
                                                · {{ block.slotLabel }}
                                            </span>
                                            <strong>{{ block.client }}</strong>
                                            <small>{{ block.isTravel ? 'Déplacement' : block.task }} · {{ ui.hours(block.hours, displayUnit) }}</small>
                                        </a>
                                    {% endif %}
                                {% endfor %}
                                {% if not day.disabled %}
                                    <button class="my-workload-add-slot" type="button" data-add-day="{{ day.key }}" data-can-morning="{{ day.canMorning ? '1' : '0' }}" data-can-afternoon="{{ day.canAfternoon ? '1' : '0' }}">+ Ajouter</button>
                                {% endif %}
                            {% endif %}
                        </article>
                    {% endfor %}
                </div>
            </section>

            {% if view.selectedBlock %}
                {% set block = view.selectedBlock %}
                <aside class="my-workload-detail my-workload-detail--{{ block.color }}">
                    <div class="my-workload-detail__head">
                        <span class="my-workload-detail__dot my-workload-color-dot--{{ block.color }}"></span>
                        <div>
                            <strong>{{ block.client }}</strong>
                            <span>{{ block.project }}</span>
                            <span>{{ block.task }}</span>
                        </div>
                        {% if block.fixed %}
                            <span class="my-workload-detail-lock material-symbols-outlined" aria-label="Bloc fixe">lock</span>
                        {% endif %}
                        <a href="{{ path('app_my_workload', {week: view.weekStart|date('Y-m-d'), mode: view.mode, unit: displayUnit}) }}" aria-label="Fermer"><span class="material-symbols-outlined" aria-hidden="true">close</span></a>
                    </div>
                    <section class="my-workload-detail-metrics">
                        {% if view.mode == 'declarer' and block.taskConsumption %}
                            <div><span>Affecté tâche</span><strong>{{ ui.hours(block.taskConsumption.assignedHours, displayUnit) }}</strong></div>
                            <div><span>Réalisé cumulé</span><strong>{{ ui.hours(block.taskConsumption.actualHours, displayUnit) }}</strong></div>
                            <div><span>Reste théorique</span><strong>{{ ui.hours(block.taskConsumption.remainingHours, displayUnit) }}</strong></div>
                            <div><span>Consommé</span><strong>{{ block.taskConsumption.consumedPercent }} %</strong></div>
                        {% else %}
                            <div><span>Affecté</span><strong>{{ ui.hours(block.assignedHours, displayUnit) }}</strong></div>
                            <div><span>Planifié</span><strong>{{ ui.hours(block.assignedHours - block.remainingHours, displayUnit) }}</strong></div>
                            <div><span>{{ view.mode == 'declarer' ? 'Réalisé' : 'Reste' }}</span><strong>{{ view.mode == 'declarer' ? ui.hours(block.actualHours, displayUnit) : ui.hours(block.remainingHours, displayUnit) }}</strong></div>
                            {% set blockDisplayHours = view.mode == 'declarer' and block.actualOnly ? block.actualHours : block.hours %}
                            <div><span>Bloc</span><strong>{{ ui.hours(blockDisplayHours, displayUnit) }}</strong></div>
                        {% endif %}
                    </section>
                    <section class="my-workload-detail-facts">
                        <div>
                            <span class="material-symbols-outlined" aria-hidden="true">calendar_today</span>
                            <span>Période</span>
                            <strong>{{ block.periodLabel }}</strong>
                        </div>
                        <div>
                            <span class="material-symbols-outlined" aria-hidden="true">{{ block.isTravel ? 'directions_car' : 'schedule' }}</span>
                            <span>Type</span>
                            <strong>{{ block.timeTypeLabel }}</strong>
                        </div>
                        <div>
                            <span class="material-symbols-outlined" aria-hidden="true">{{ block.fixed ? 'lock' : 'sync_alt' }}</span>
                            <span>Statut</span>
                            <strong>{{ block.fixed ? 'Fixe' : 'Déplaçable' }}</strong>
                        </div>
                        {% if block.recurring %}
                            <div>
                                <span class="material-symbols-outlined" aria-hidden="true">event_repeat</span>
                                <span>Récurrence</span>
                                <strong>Hebdomadaire</strong>
                            </div>
                        {% endif %}
                        {% if block.outOfPeriod %}
                            <p class="my-workload-warning">Cette charge sort de la période prévue.</p>
                        {% endif %}
                    </section>
                    {% if view.mode == 'declarer' %}
                        <section class="my-workload-detail-edit my-workload-detail-actual">
                            <h2>Modifier le temps réalisé</h2>
                            <div class="my-workload-detail-day-summary">
                                <strong>{{ block.periodLabel }}</strong>
                                <span>Planifié {{ block.actualOnly ? '—' : ui.hours(block.hours, displayUnit) }}</span>
                            </div>
                            <form method="post">
                                <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                                <input type="hidden" name="action" value="{{ block.actualOnly ? 'update_actual' : 'declare_block' }}">
                                <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                                <input type="hidden" name="mode" value="{{ view.mode }}">
                                <input type="hidden" name="unit" value="{{ displayUnit }}">
                                <input type="hidden" name="selected_block" value="{{ block.id }}">
                                {% if block.actualOnly %}
                                    <input type="hidden" name="declaration_id" value="{{ block.declarationId }}">
                                {% else %}
                                    <input type="hidden" name="block_id" value="{{ block.blockId }}">
                                {% endif %}
                                <label>Planifié
                                    <input value="{{ block.actualOnly ? 'Non planifié' : ui.hours(block.hours, displayUnit)|trim }}" disabled>
                                </label>
                                <label>Réalisé
                                    <input name="actual_hours" value="{{ (block.actualOnly or block.actualId is not null ? block.actualHours : block.hours)|number_format(1, '.', '') }}" inputmode="decimal">
                                </label>
                                <label>Jour
                                    <input value="{{ block.periodLabel }}" disabled>
                                </label>
                                <label>Type
                                    <input value="{{ block.timeTypeLabel }}" disabled>
                                </label>
                                <label class="my-workload-detail-comment">Commentaire
                                    <textarea name="comment" rows="3" placeholder="Ajouter un commentaire...">{{ block.actualComment }}</textarea>
                                </label>
                                <button type="submit"><span class="material-symbols-outlined" aria-hidden="true">check_circle</span> Enregistrer</button>
                            </form>
                        </section>
                        {% if block.consumptionLevels|default([]) is not empty %}
                            <section class="my-workload-consumption-levels">
                                <h2>Agrégation consommation</h2>
                                {% for level in block.consumptionLevels %}
                                    <div>
                                        <span>{{ level.level }}</span>
                                        <strong>{{ ui.hours(level.assignedHours, displayUnit) }} · {{ ui.hours(level.actualHours, displayUnit) }}</strong>
                                        <em class="{{ level.consumptionGapHours > 0.01 ? 'is-risk' : '' }}">{{ level.consumptionGapHours > 0 ? '+' : '' }}{{ ui.hours(level.consumptionGapHours, displayUnit) }}</em>
                                    </div>
                                {% endfor %}
                            </section>
                        {% endif %}
                    {% endif %}
                {% if block.projectId is not null %}
                        <section>
                            <h2>Couleur dans mon planning</h2>
                            <form class="my-workload-color-form" method="post">
                                <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                                <input type="hidden" name="action" value="color">
                                <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                                <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                                <input type="hidden" name="selected_block" value="{{ block.id }}">
                                <input type="hidden" name="project_id" value="{{ block.projectId }}">
                                {% for color in view.colorOptions %}
                                    <button type="submit" name="color" value="{{ color }}" class="my-workload-color-dot my-workload-color-dot--{{ color }} {{ block.color == color ? 'is-active' : '' }}" aria-label="Couleur {{ color }}"></button>
                                {% endfor %}
                            </form>
                        </section>
                    {% endif %}
                    {% if view.mode == 'planifier' and block.editable %}
                        <section class="my-workload-detail-edit">
                            <h2>Modifier</h2>
                            <form method="post">
                                <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                                <input type="hidden" name="action" value="update_block">
                                <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                                <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                                <input type="hidden" name="selected_block" value="{{ block.id }}">
                                <input type="hidden" name="block_id" value="{{ block.blockId }}">
                                <label>Durée {{ displayUnit == 'days' ? '(j)' : '(h:min)' }}
                                    <input name="hours" value="{{ displayUnit == 'days' ? (block.hours / 7.4)|number_format(8, '.', '')|trim('0', 'right')|trim('.', 'right') : ui.hm(block.hours, true) }}" inputmode="{{ displayUnit == 'days' ? 'decimal' : 'text' }}">
                                </label>
                                <label>Jour
                                    <div class="date-entry" data-date-entry>
                                        <input class="date-mask" placeholder="jj/mm/aaaa" inputmode="numeric" autocomplete="off" aria-label="Jour du bloc" value="{{ block.dayKey|date('d/m/Y') }}">
                                        <button class="date-picker-button" type="button" aria-label="Ouvrir le calendrier"></button>
                                        <input class="date-picker" type="date" name="day" value="{{ block.dayKey }}" aria-label="Choisir le jour" tabindex="-1" aria-hidden="true">
                                    </div>
                                </label>
                                <label>Position
                                    <select name="slot">
                                        <option value="day" {{ block.slot == 'day' ? 'selected' : '' }}>Journée</option>
                                        <option value="morning" {{ block.slot == 'morning' ? 'selected' : '' }}>AM</option>
                                        <option value="afternoon" {{ block.slot == 'afternoon' ? 'selected' : '' }}>PM</option>
                                    </select>
                                </label>
                                <label>Statut
                                    <select name="fixed">
                                        <option value="" {{ not block.fixed ? 'selected' : '' }}>Déplaçable</option>
                                        <option value="1" {{ block.fixed ? 'selected' : '' }}>Fixe</option>
                                    </select>
                                </label>
                                <button type="submit"><span class="material-symbols-outlined" aria-hidden="true">check_circle</span> Enregistrer</button>
                            </form>
                        </section>
                        <section>
                            <h2>Actions</h2>
                            <div class="my-workload-detail-actions">
                                <button type="button" class="my-workload-action-button" data-open-split>
                                    <span class="material-symbols-outlined" aria-hidden="true">content_cut</span>
                                    Fractionner
                                </button>
                                <form method="post">
                                    <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                                    <input type="hidden" name="action" value="toggle_lock">
                                    <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                                    <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                                    <input type="hidden" name="selected_block" value="{{ block.id }}">
                                    <input type="hidden" name="block_id" value="{{ block.blockId }}">
                                    <button type="submit">
                                        <span class="material-symbols-outlined" aria-hidden="true">{{ block.fixed ? 'lock_open' : 'lock' }}</span>
                                        {{ block.fixed ? 'Déverrouiller' : 'Verrouiller' }}
                                    </button>
                                </form>
                                <form method="post">
                                    <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                                    <input type="hidden" name="action" value="remove">
                                    <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                                    <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                                    <input type="hidden" name="block_id" value="{{ block.blockId }}">
                                    {% if block.recurring %}
                                        {# Série récurrente : portée de la suppression (celle-ci / les suivantes). #}
                                        <select name="remove_scope" class="my-workload-remove-scope" aria-label="Portée de la suppression">
                                            <option value="one">Cette occurrence</option>
                                            <option value="following">…et les suivantes</option>
                                        </select>
                                    {% endif %}
                                    <button type="submit">
                                        <span class="material-symbols-outlined" aria-hidden="true">delete</span>
                                        Retirer
                                    </button>
                                </form>
                                    {% if block.projectId is not null %}
                                    <a href="{{ path('app_project_planning', {project: block.projectId, mode: 'planning'}) }}">
                                        <span class="material-symbols-outlined" aria-hidden="true">open_in_new</span>
                                        Ouvrir projet
                                    </a>
                                {% endif %}
                            </div>
                        </section>
                    {% endif %}
                    <section class="my-workload-detail-context">
                        <dl>
                            <div><dt>Projet</dt><dd>{{ block.client }} — {{ block.project }}</dd></div>
                            <div><dt>Phase / étape</dt><dd>{{ block.phase }}{% if block.step != 'Sans étape' %} · {{ block.step }}{% endif %}</dd></div>
                            <div><dt>Jalon lié</dt><dd>{{ block.milestone ?: '-' }}</dd></div>
                        </dl>
                    </section>
                </aside>
            {% endif %}
        </section>

        {% if view.mode == 'planifier' and view.selectedBlock and view.selectedBlock.editable %}
            {% set block = view.selectedBlock %}
            <dialog class="my-workload-dialog my-workload-split-dialog" id="split-dialog" data-block-hours="{{ block.hours|number_format(1, '.', '') }}">
                <form method="post">
                    <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                    <input type="hidden" name="action" value="split">
                    <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                    <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                    <input type="hidden" name="block_id" value="{{ block.blockId }}">
                    <div class="my-workload-dialog__head">
                        <strong>Fractionner le bloc · {{ ui.hours(block.hours, displayUnit) }}</strong>
                        <button type="button" data-close-split><span class="material-symbols-outlined" aria-hidden="true">close</span></button>
                    </div>
                    <label>Nombre de parties
                        <select name="split_count" data-split-count>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
                    </label>
                    <div class="my-workload-split-rows" data-split-rows></div>
                    <div class="my-workload-dialog__actions">
                        <button type="button" data-auto-split>Répartir automatiquement</button>
                        <button type="button" data-close-split>Annuler</button>
                        <button type="submit">Fractionner</button>
                    </div>
                </form>
            </dialog>
        {% endif %}

        <dialog class="my-workload-dialog" id="workload-dialog">
            <form method="post" id="workload-action-form" data-mode="{{ view.mode }}">
                <input type="hidden" name="_csrf_token" value="{{ csrfToken }}">
                <input type="hidden" name="week" value="{{ view.weekStart|date('Y-m-d') }}">
                <input type="hidden" name="mode" value="{{ view.mode }}">
                        <input type="hidden" name="unit" value="{{ displayUnit }}">
                <input type="hidden" name="action" value="create_from_allocation">
                <input type="hidden" name="allocation_id" value="">
                <input type="hidden" name="block_id" value="">
                <input type="hidden" name="unlock" value="">
                <input type="hidden" name="internal_title" value="">

                <div class="my-workload-dialog__head">
                    <strong>{{ view.mode == 'declarer' ? 'Déclarer' : 'Planifier' }}</strong>
                    <button type="button" data-close-dialog><span class="material-symbols-outlined" aria-hidden="true">close</span></button>
                </div>
                <p class="my-workload-dialog-error" hidden></p>

                <label class="dialog-field dialog-field--action">Action
                    <select name="dialog_action">
                        {% if view.mode == 'declarer' %}
                            <option value="declare_unplanned_task">Ajouter du temps sur une tâche</option>
                            <option value="declare_internal_actual">Ajouter une activité interne</option>
                            <option value="declare_travel_actual">Ajouter un déplacement</option>
                        {% else %}
                            <option value="create_from_allocation">Planifier une tâche affectée</option>
                            <option value="distribute_allocation">Répartir une tâche affectée</option>
                            <option value="create_internal">Ajouter une activité interne</option>
                            <option value="create_travel">Ajouter un déplacement</option>
                        {% endif %}
                    </select>
                </label>
                <label class="dialog-field dialog-field--allocation">Tâche affectée
                    <select name="allocation_select">
                        {% if view.mode == 'planifier' %}
                            <optgroup label="Interne">
                                <option
                                    value="quick:team_meeting"
                                    data-quick-action="create_internal"
                                    data-internal-reference="internal_activity_family:vie_agence"
                                    data-hours="1.5"
                                    data-default-hours="1.5"
                                    data-fixed="1"
                                    data-internal-title="Réunion équipe"
                                    data-project-label="Sensipode — Vie agence"
                                >Réunion équipe · 1:30</option>
                            </optgroup>
                        {% endif %}
                        {% set allocationGroups = view.mode == 'declarer' ? view.assignmentGroups : view.unplacedGroups %}
                        {% for group in allocationGroups %}
                            <optgroup label="{{ group.label }}">
                                {% for item in group.items %}
                                    <option value="{{ item.allocationId }}" data-hours="{{ item.remainingHours }}" data-default-hours="{{ item.defaultHours }}" data-fixed="{{ item.fixed ? '1' : '0' }}" data-project-label="{{ group.label|e('html_attr') }}">{{ item.task }} · {{ ui.hours(item.remainingHours, displayUnit) }}{{ view.mode == 'declarer' ? ' affectées' : ' à placer' }}</option>
                                {% endfor %}
                            </optgroup>
                        {% endfor %}
                    </select>
                    <span class="my-workload-readonly-context" data-allocation-context></span>
                </label>
                <label class="dialog-field dialog-field--internal">Activité interne
                    <select name="internal_reference">
                        <option
                            value="internal_activity_family:vie_agence"
                            data-internal-title="Réunion équipe"
                            data-default-hours="1.5"
                            data-fixed="1"
                        >Réunion équipe</option>
                        {% for internal in view.internalOptions %}
                            <option value="{{ internal.value }}">{{ internal.label }}</option>
                        {% endfor %}
                    </select>
                </label>
                <label class="dialog-field dialog-field--project">Rattachement
                    <select name="travel_reference">
                        <optgroup label="Projets clients">
                        {% for option in view.travelOptions %}
                            {% if option.type == 'project' %}
                                <option value="{{ option.value }}">{{ option.label }}</option>
                            {% endif %}
                        {% endfor %}
                        </optgroup>
                        <optgroup label="Interne">
                        {% for option in view.travelOptions %}
                            {% if option.type == 'internal' %}
                                <option value="{{ option.value }}">{{ option.label|replace({'Interne · ': ''}) }}</option>
                            {% endif %}
                        {% endfor %}
                        </optgroup>
                    </select>
                </label>
                <label class="dialog-field dialog-field--day">Jour
                    {# Date-picker libre (même widget que partout). Le champ soumis (Y-m-d)
                       est le .date-picker natif ; le .date-mask (jj/mm/aaaa) n'est que l'UI.
                       Les jours de la semaine affichée sont fournis en JSON ci-dessous pour
                       la répartition et le drag-drop ; un jour hors semaine recharge sa dispo
                       en AJAX (voir app_my_workload_day_availability). #}
                    <div class="date-entry" data-date-entry data-workload-day>
                        <input class="date-mask" placeholder="jj/mm/aaaa" inputmode="numeric" autocomplete="off" aria-label="Jour" value="{{ view.days[0].date|date('d/m/Y') }}">
                        <button class="date-picker-button" type="button" aria-label="Ouvrir le calendrier"></button>
                        <input class="date-picker" type="date" name="day" value="{{ view.days[0].key }}" aria-label="Choisir le jour" tabindex="-1" aria-hidden="true">
                    </div>
                </label>
                <script type="application/json" data-workload-week-days>[{% for day in view.days %}{"key":"{{ day.key }}","label":"{{ day.label }} {{ day.date|date('d/m') }}","disabled":{{ day.disabled ? 'true' : 'false' }},"canMorning":{{ day.canMorning ? 'true' : 'false' }},"canAfternoon":{{ day.canAfternoon ? 'true' : 'false' }},"available":{{ day.availableHours }}}{{ not loop.last ? ',' : '' }}{% endfor %}]</script>
                <label class="dialog-field dialog-field--hours">{{ view.mode == 'declarer' ? 'Durée réalisée' : 'Durée' }}{{ displayUnit == 'days' ? ' (j)' : ' (h:min)' }}
                    <input name="hours" value="{{ displayUnit == 'days' ? '0.14' : '1:00' }}" inputmode="{{ displayUnit == 'days' ? 'decimal' : 'text' }}">
                </label>
                <label class="dialog-field dialog-field--slot">Position
                    <select name="slot">
                        <option value="day">Journée entière</option>
                        <option value="morning">AM</option>
                        <option value="afternoon">PM</option>
                    </select>
                </label>
                <label class="dialog-field dialog-field--fixed">Statut
                    <select name="fixed">
                        <option value="">Déplaçable</option>
                        <option value="1">Fixe</option>
                    </select>
                </label>
                {% if view.mode == 'planifier' %}
                    <label class="dialog-field dialog-field--repeat my-workload-checkbox">
                        <input type="checkbox" name="repeat_weekly" value="1">
                        <span>Répéter chaque semaine</span>
                    </label>
                    <label class="dialog-field dialog-field--repeat-until">Jusqu’au
                        <div class="date-entry" data-date-entry>
                            <input class="date-mask" placeholder="jj/mm/aaaa" inputmode="numeric" autocomplete="off" aria-label="Fin de récurrence" value="{{ view.weekStart|date_modify('+12 weeks')|date('d/m/Y') }}">
                            <button class="date-picker-button" type="button" aria-label="Ouvrir le calendrier"></button>
                            <input class="date-picker" type="date" name="repeat_until" value="{{ view.weekStart|date_modify('+12 weeks')|date('Y-m-d') }}" aria-label="Choisir la fin de récurrence" tabindex="-1" aria-hidden="true">
                        </div>
                    </label>
                {% endif %}
                <section class="my-workload-distribution" hidden>
                    <div class="my-workload-distribution__head">
                        <strong>Répartir <span data-distribution-total>{{ ui.hours(0, displayUnit) }}</span></strong>
                        <label>Nombre de blocs
                            <select name="distribution_count" data-distribution-count>
                                <option value="2">2</option>
                                <option value="3" selected>3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                            </select>
                        </label>
                        <button type="button" data-auto-distribute>Répartir automatiquement</button>
                    </div>
                    <p class="my-workload-readonly-context">La tâche détermine le projet. Chaque ligne crée un bloc planifié.</p>
                    <div class="my-workload-distribution-table-head" aria-hidden="true">
                        <span>#</span>
                        <span>Durée</span>
                        <span>Jour</span>
                        <span>Position</span>
                        <span></span>
                    </div>
                    <div class="my-workload-distribution-rows" data-distribution-rows></div>
                    <button type="button" data-add-distribution-row>+ Ligne</button>
                </section>
                <p class="my-workload-dialog-note my-workload-dialog-note--internal" hidden>
                    Les activités internes proviennent du référentiel Familles de temps internes + Cercles transverses.
                </p>
                <p class="my-workload-dialog-note my-workload-dialog-note--travel" hidden>
                    Le déplacement sera rattaché au projet ou à l’activité sélectionnée. Ce temps n’est pas comptabilisé dans le plafond de travail effectif.
                </p>
                <div class="my-workload-dialog__actions">
                    <button type="button" data-close-dialog>Annuler</button>
                    <button type="submit">{{ view.mode == 'declarer' ? 'Déclarer' : 'Planifier' }}</button>
                </div>
            </form>
        </dialog>
    {% else %}
        <section class="panel">
            <div class="panel-heading">
                <h1>Ma charge</h1>
                <p>Aucun collaborateur actif n’est disponible pour construire cette vue.</p>
            </div>
        </section>
    {% endif %}
</main>

{% if view %}
<script>
(() => {
    const dialog = document.getElementById('workload-dialog');
    const form = document.getElementById('workload-action-form');
    if (!dialog || !form) {
        return;
    }

    const actionInput = form.querySelector('input[name="action"]');
    const allocationInput = form.querySelector('input[name="allocation_id"]');
    const blockInput = form.querySelector('input[name="block_id"]');
    const unlockInput = form.querySelector('input[name="unlock"]');
    const internalTitleInput = form.querySelector('input[name="internal_title"]');
    const allocationSelect = form.querySelector('select[name="allocation_select"]');
    const internalSelect = form.querySelector('select[name="internal_reference"]');
    const travelSelect = form.querySelector('select[name="travel_reference"]');
    const dialogAction = form.querySelector('select[name="dialog_action"]');
    const dayEntry = form.querySelector('.dialog-field--day [data-date-entry]');
    // .date-picker natif (Y-m-d) = champ soumis « day » ; .date-mask = UI jj/mm/aaaa.
    const daySelect = form.querySelector('.dialog-field--day input[name="day"]');
    const dayMask = dayEntry?.querySelector('.date-mask');
    const hoursInput = form.querySelector('input[name="hours"]');
    const slotSelect = form.querySelector('select[name="slot"]');
    const fixedSelect = form.querySelector('select[name="fixed"]');
    const repeatWeeklyInput = form.querySelector('input[name="repeat_weekly"]');
    const errorBox = form.querySelector('.my-workload-dialog-error');
    const distribution = form.querySelector('.my-workload-distribution');
    const distributionRows = form.querySelector('[data-distribution-rows]');
    const distributionTotal = form.querySelector('[data-distribution-total]');
    const distributionCount = form.querySelector('[data-distribution-count]');
    const autoDistributeButton = form.querySelector('[data-auto-distribute]');
    const addDistributionRowButton = form.querySelector('[data-add-distribution-row]');
    const allocationContext = form.querySelector('[data-allocation-context]');
    const internalNote = form.querySelector('.my-workload-dialog-note--internal');
    const travelNote = form.querySelector('.my-workload-dialog-note--travel');
    const isDeclareMode = form.dataset.mode === 'declarer';
    const displayUnit = '{{ displayUnit }}';
    // Heures -> h:mm (minutes sur 2 chiffres), jours -> « x,xx j ». Aligné sur la
    // macro Twig ui.hours (affichage partout en h:mm).
    const formatDuration = (hours) => {
        if (displayUnit === 'days') {
            return `${(hours / 7.4).toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} j`;
        }
        const neg = hours < 0;
        const totalMin = Math.round(Math.abs(hours) * 60);
        const h = Math.floor(totalMin / 60);
        const m = totalMin % 60;
        return `${neg ? '-' : ''}${h}:${String(m).padStart(2, '0')}`;
    };

    // Valeur ÉDITABLE (dans un input) selon l'unité : jours -> décimal (point),
    // heures -> « H:MM ». Le back reconvertit en heures (cf cleanRawHours).
    const durationInputMode = displayUnit === 'days' ? 'decimal' : 'text';
    const formatDurationInput = (hours) => {
        const h = Number(hours) || 0;
        if (displayUnit === 'days') {
            return (h / 7.4).toFixed(8).replace(/0+$/, '').replace(/\.$/, '');
        }
        const totalMin = Math.round(Math.abs(h) * 60 * 10000) / 10000;
        const wholeHours = Math.floor(totalMin / 60);
        const minutes = (totalMin - wholeHours * 60).toFixed(4).replace(/0+$/, '').replace(/\.$/, '');
        return `${h < 0 ? '-' : ''}${wholeHours}:${Number(minutes) < 10 ? '0' : ''}${minutes}`;
    };
    const parseDurationInput = (value) => {
        const raw = String(value == null ? '' : value).trim().replace(',', '.');
        if (raw === '') return 0;
        if (displayUnit !== 'days' && raw.includes(':')) {
            const [a, b] = raw.split(':');
            return (parseFloat(a) || 0) + (parseFloat(b) || 0) / 60;
        }
        const n = parseFloat(raw) || 0;
        return displayUnit === 'days' ? n * 7.4 : n;
    };
    // Jours de la SEMAINE affichée (répartition + drag-drop), fournis en JSON.
    const days = (() => {
        try {
            return JSON.parse(document.querySelector('[data-workload-week-days]')?.textContent || '[]').map((d) => ({
                key: d.key,
                label: d.label,
                disabled: !!d.disabled,
                canMorning: !!d.canMorning,
                canAfternoon: !!d.canAfternoon,
                available: Math.max(0, parseFloat(d.available) || 0),
            }));
        } catch (_) {
            return [];
        }
    })();

    // Dispo par date (Y-m-d). La semaine affichée est pré-remplie ; un jour hors
    // semaine (date-picker libre) est chargé à la volée puis mémorisé.
    const availabilityCache = new Map();
    days.forEach((d) => availabilityCache.set(d.key, d));
    const currentDayInfo = () => availabilityCache.get(daySelect.value) || null;
    const isoToDisplay = (iso) => {
        const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso || '');
        return m ? `${m[3]}/${m[2]}/${m[1]}` : '';
    };
    // Fixe la date (met à jour le champ soumis ET l'UF jj/mm/aaaa).
    const setDay = (iso) => {
        if (!iso) {
            return;
        }
        daySelect.value = iso;
        if (dayMask) {
            dayMask.value = isoToDisplay(iso);
        }
    };
    const fetchDayAvailability = async (iso) => {
        if (!iso || availabilityCache.has(iso)) {
            return availabilityCache.get(iso) || null;
        }
        try {
            const response = await fetch(`{{ path('app_my_workload_day_availability') }}?day=${encodeURIComponent(iso)}`, {
                headers: { 'Accept': 'application/json' },
            });
            if (!response.ok) {
                throw new Error('http');
            }
            const info = await response.json();
            const normalized = {
                key: iso,
                label: isoToDisplay(iso),
                disabled: !!info.disabled,
                canMorning: !!info.canMorning,
                canAfternoon: !!info.canAfternoon,
                available: Math.max(0, parseFloat(info.available) || 0),
            };
            availabilityCache.set(iso, normalized);
            return normalized;
        } catch (_) {
            // Échec réseau : on n'empêche rien côté client, le serveur revalide.
            return null;
        }
    };
    let dragged = null;
    let pendingHours = 0;

    const setError = (message) => {
        errorBox.textContent = message;
        errorBox.hidden = message === '';
    };

    const setFieldActive = (selector, active) => {
        const field = form.querySelector(selector);
        if (!field) {
            return;
        }

        field.hidden = !active;
        field.querySelectorAll('input, select, textarea').forEach((control) => {
            if (control === dialogAction) {
                return;
            }

            control.disabled = !active;
        });
    };

    const refreshAllocationContext = (enabled = true) => {
        const selected = allocationSelect?.selectedOptions[0];
        allocationContext.textContent = enabled && !selected?.dataset.quickAction ? (selected?.dataset.projectLabel || '') : '';
    };

    const selectFirstAssignableAllocation = () => {
        if (!allocationSelect) {
            return false;
        }

        const firstAssignable = [...allocationSelect.options].find((option) => !option.dataset.quickAction);
        if (!firstAssignable) {
            return false;
        }

        allocationSelect.value = firstAssignable.value;
        return true;
    };

    const applyInternalChoice = () => {
        const selected = internalSelect?.selectedOptions[0];
        if (!selected) {
            return;
        }

        if (internalTitleInput) {
            internalTitleInput.value = selected.dataset.internalTitle || '';
        }
        if (hoursInput && selected.dataset.defaultHours) {
            hoursInput.value = formatDurationInput(Number(selected.dataset.defaultHours || 1));
        }
        if (fixedSelect && selected.dataset.fixed) {
            fixedSelect.value = selected.dataset.fixed === '1' ? '1' : '';
        }
    };

    const applyQuickAllocationChoice = () => {
        const selected = allocationSelect?.selectedOptions[0];
        const quickAction = selected?.dataset.quickAction || '';
        if (!quickAction) {
            if (internalTitleInput) {
                internalTitleInput.value = '';
            }

            return false;
        }

        dialogAction.value = quickAction;
        actionInput.value = quickAction;
        if (internalSelect && selected.dataset.internalReference) {
            const matchingInternal = [...internalSelect.options].find((option) => (
                option.value === selected.dataset.internalReference
                && (selected.dataset.internalTitle ? option.dataset.internalTitle === selected.dataset.internalTitle : true)
            ));
            if (matchingInternal) {
                internalSelect.value = matchingInternal.value;
                matchingInternal.selected = true;
            } else {
                internalSelect.value = selected.dataset.internalReference;
            }
        }
        if (internalTitleInput) {
            internalTitleInput.value = selected.dataset.internalTitle || '';
        }
        if (hoursInput && selected.dataset.defaultHours) {
            hoursInput.value = formatDurationInput(Number(selected.dataset.defaultHours || 1));
        }
        if (fixedSelect) {
            fixedSelect.value = selected.dataset.fixed === '1' ? '1' : '';
        }

        return true;
    };

    const renderDistributionForCount = (count) => {
        setDistributionRows(automaticDistributionRows(pendingHours || parseDurationInput(hoursInput.value) || 1, daySelect.value, count));
    };

    const syncFields = () => {
        const action = dialogAction.value;
        actionInput.value = action;
        const usesAllocation = ['create_from_allocation', 'distribute_allocation', 'declare_unplanned_task'].includes(action);
        const usesInternal = ['create_internal', 'declare_internal_actual'].includes(action);
        const usesTravel = ['create_travel', 'declare_travel_actual'].includes(action);
        const usesDistribution = action === 'distribute_allocation';

        if (usesAllocation && allocationSelect?.selectedOptions[0]?.dataset.quickAction) {
            selectFirstAssignableAllocation();
        }

        setFieldActive('.dialog-field--allocation', usesAllocation);
        setFieldActive('.dialog-field--internal', usesInternal);
        setFieldActive('.dialog-field--project', usesTravel);
        setFieldActive('.dialog-field--day', !usesDistribution);
        setFieldActive('.dialog-field--hours', !usesDistribution);
        setFieldActive('.dialog-field--slot', !usesDistribution);
        setFieldActive('.dialog-field--fixed', !isDeclareMode && !usesTravel && !usesDistribution);
        setFieldActive('.dialog-field--repeat', !isDeclareMode && usesInternal);
        setFieldActive('.dialog-field--repeat-until', !isDeclareMode && usesInternal && !!repeatWeeklyInput?.checked);
        distribution.hidden = action !== 'distribute_allocation';
        distribution.querySelectorAll('input, select, button').forEach((control) => {
            control.disabled = !usesDistribution;
        });
        allocationInput.value = usesAllocation && !allocationSelect?.selectedOptions[0]?.dataset.quickAction ? (allocationSelect?.value || '') : '';
        blockInput.value = '';
        unlockInput.value = '';
        if (!usesInternal && internalSelect) {
            internalSelect.selectedIndex = 0;
            if (internalTitleInput) {
                internalTitleInput.value = '';
            }
        } else if (usesInternal) {
            applyInternalChoice();
        }
        if (!usesTravel && travelSelect) {
            travelSelect.selectedIndex = 0;
        }
        internalNote.hidden = !usesInternal;
        travelNote.hidden = !usesTravel;
        refreshAllocationContext(usesAllocation);
    };

    const validSlot = () => {
        const info = currentDayInfo();
        if (!info) {
            // Dispo pas encore connue (jour hors semaine en cours de chargement) :
            // on laisse passer, le serveur revalide à l'enregistrement.
            return true;
        }
        if (info.disabled) {
            return false;
        }
        if (slotSelect.value === 'morning' && !info.canMorning) {
            return false;
        }
        if (slotSelect.value === 'afternoon' && !info.canAfternoon) {
            return false;
        }
        if (slotSelect.value === 'day' && (!info.canMorning || !info.canAfternoon)) {
            return false;
        }
        return true;
    };

    const distributionDayOptions = (selected) => days
        .filter((day) => !day.disabled)
        .map((day) => `<option value="${day.key}" ${day.key === selected ? 'selected' : ''}>${day.label}</option>`)
        .join('');

    const distributionSlotOptions = (selected, dayKey) => {
        const day = days.find((item) => item.key === dayKey) || days.find((item) => !item.disabled) || days[0];
        const options = [];

        if (day?.canMorning && day?.canAfternoon) {
            options.push(['day', 'Journée']);
        }
        if (day?.canMorning) {
            options.push(['morning', 'AM']);
        }
        if (day?.canAfternoon) {
            options.push(['afternoon', 'PM']);
        }

        return options.map(([value, label]) => `<option value="${value}" ${value === selected ? 'selected' : ''}>${label}</option>`).join('');
    };

    const renumberDistributionRows = () => {
        [...distributionRows.querySelectorAll('[data-distribution-index]')].forEach((index, position) => {
            index.textContent = String(position + 1);
        });
    };

    const addDistributionRow = (row = {}) => {
        const dayKey = row.day || daySelect.value;
        const wrapper = document.createElement('div');
        wrapper.className = 'my-workload-distribution-row';
        wrapper.innerHTML = `
            <span data-distribution-index></span>
            <input name="distribution_hours[]" value="${formatDurationInput(row.hours || 1)}" inputmode="${durationInputMode}">
            <select name="distribution_day[]">${distributionDayOptions(dayKey)}</select>
            <select name="distribution_slot[]">${distributionSlotOptions(row.slot || 'day', dayKey)}</select>
            <button type="button" aria-label="Retirer la ligne">×</button>
        `;
        const dayField = wrapper.querySelector('select[name="distribution_day[]"]');
        const slotField = wrapper.querySelector('select[name="distribution_slot[]"]');
        dayField.addEventListener('change', () => {
            slotField.innerHTML = distributionSlotOptions(slotField.value, dayField.value);
        });
        wrapper.querySelector('button').addEventListener('click', () => {
            wrapper.remove();
            renumberDistributionRows();
        });
        distributionRows.appendChild(wrapper);
        renumberDistributionRows();
    };

    const automaticDistributionRows = (hours, firstDay, wantedCount = null) => {
        let remaining = hours;
        const limit = wantedCount || parseInt(distributionCount?.value || '0', 10) || null;
        const orderedDays = [...days].sort((a, b) => {
            if (a.key === firstDay) {
                return -1;
            }
            if (b.key === firstDay) {
                return 1;
            }

            return a.key.localeCompare(b.key);
        });
        const rows = [];

        orderedDays.forEach((day) => {
            if (remaining <= 0.01 || day.disabled || day.available <= 0 || (limit !== null && rows.length >= limit)) {
                return;
            }

            const remainingSlots = limit !== null ? Math.max(1, limit - rows.length) : 1;
            const amount = limit !== null
                ? Math.min(remaining, remaining / remainingSlots, day.available || remaining)
                : Math.min(remaining, day.available);
            rows.push({
                day: day.key,
                slot: day.canMorning && day.canAfternoon ? 'day' : (day.canMorning ? 'morning' : 'afternoon'),
                hours: Math.round(amount * 10000) / 10000,
            });
            remaining = Math.round((remaining - amount) * 10000) / 10000;
        });

        if (remaining > 0.01) {
            const fallback = orderedDays.find((day) => !day.disabled) || orderedDays[0];
            if (limit !== null && rows.length >= limit && rows.length > 0) {
                rows[rows.length - 1].hours = Math.round((rows[rows.length - 1].hours + remaining) * 10000) / 10000;
            } else {
                rows.push({
                    day: fallback.key,
                    slot: fallback.canMorning && fallback.canAfternoon ? 'day' : (fallback.canMorning ? 'morning' : 'afternoon'),
                    hours: remaining,
                });
            }
        }

        return rows;
    };

    const setDistributionRows = (rows) => {
        distributionRows.replaceChildren();
        rows.forEach(addDistributionRow);
    };

    const openDialog = (options) => {
        setError('');
        pendingHours = parseFloat(options.totalHours || options.hours || '1');
        dialogAction.value = options.action || (isDeclareMode ? 'declare_unplanned_task' : (pendingHours > 8 ? 'distribute_allocation' : 'create_from_allocation'));
        actionInput.value = dialogAction.value;
        allocationInput.value = options.allocationId || '';
        blockInput.value = options.blockId || '';
        unlockInput.value = options.unlock ? '1' : '';
        if (allocationSelect && options.allocationId) {
            allocationSelect.value = options.allocationId;
        }
        if (!options.allocationId && allocationSelect) {
            const firstProjectOption = [...allocationSelect.options].find((option) => !option.dataset.quickAction);
            if (firstProjectOption) {
                allocationSelect.value = firstProjectOption.value;
            }
        }
        if (options.day) {
            setDay(options.day);
        }
        const info = currentDayInfo();
        if (info && !info.canMorning) {
            slotSelect.value = 'afternoon';
        } else if (info && !info.canAfternoon) {
            slotSelect.value = 'morning';
        } else {
            slotSelect.value = options.slot || 'day';
        }
        const available = info ? Math.max(0, info.available) : 0;
        const proposed = parseFloat(options.hours || '1');
        hoursInput.value = formatDurationInput(proposed);
        fixedSelect.value = fixedSelect ? (options.fixed ? '1' : '') : '';
        distributionTotal.textContent = formatDuration(pendingHours);
        if (dialogAction.value === 'distribute_allocation') {
            renderDistributionForCount(parseInt(distributionCount?.value || '3', 10));
        }
        syncFields();
        dialog.showModal();
    };

    // Repli de chaque projet et aperçu de cinq tâches ; état conservé entre semaines.
    (function () {
        const KEY = 'myWorkloadCollapsedProjects';
        let collapsed;
        try { collapsed = new Set(JSON.parse(localStorage.getItem(KEY) || '[]')); } catch (e) { collapsed = new Set(); }
        document.querySelectorAll('[data-backlog-group]').forEach((group) => {
            const id = group.dataset.projectId;
            const toggle = group.querySelector('[data-backlog-toggle]');
            const content = group.querySelector('[data-backlog-content]');
            const tasks = [...group.querySelectorAll('[data-drag-kind="allocation"]')];
            const more = group.querySelector('[data-backlog-more]');
            let expanded = false;
            const apply = () => {
                content.hidden = collapsed.has(id);
                toggle.setAttribute('aria-expanded', String(!content.hidden));
                toggle.querySelector('.material-symbols-outlined').textContent = content.hidden ? 'chevron_right' : 'expand_more';
                tasks.forEach((task, index) => { task.hidden = !expanded && index >= 5; });
                group.querySelectorAll('.my-workload-backlog-phase').forEach((phase) => {
                    phase.hidden = ![...phase.querySelectorAll('[data-drag-kind="allocation"]')].some((task) => !task.hidden);
                });
                more.hidden = tasks.length <= 5;
                more.textContent = expanded ? 'Moins' : 'Plus (' + (tasks.length - 5) + ')';
            };
            toggle.addEventListener('click', () => {
                if (collapsed.has(id)) { collapsed.delete(id); } else { collapsed.add(id); }
                try { localStorage.setItem(KEY, JSON.stringify([...collapsed])); } catch (e) {}
                apply();
            });
            more.addEventListener('click', () => { expanded = !expanded; apply(); });
            apply();
        });
        const panel = document.querySelector('.my-workload-backlog');
        if (panel) {
            const sizePanel = () => {
                const top = panel.getBoundingClientRect().top;
                panel.style.setProperty('--backlog-height', Math.max(200, window.innerHeight - Math.max(12, top) - 16) + 'px');
            };
            window.addEventListener('resize', sizePanel);
            window.addEventListener('scroll', sizePanel, {passive: true});
            sizePanel();
        }
    })();

    document.querySelectorAll('[data-drag-kind]').forEach((item) => {
        item.addEventListener('dragstart', (event) => {
            dragged = item.dataset;
            event.dataTransfer.effectAllowed = 'move';
            event.dataTransfer.setData('text/plain', item.dataset.task || '');
        });
    });

    document.querySelectorAll('[data-workload-drop]').forEach((dropTarget) => {
        dropTarget.addEventListener('dragover', (event) => {
            event.preventDefault();
            dropTarget.classList.add('is-drop-target');
        });
        dropTarget.addEventListener('dragleave', () => dropTarget.classList.remove('is-drop-target'));
        dropTarget.addEventListener('drop', (event) => {
            event.preventDefault();
            event.stopPropagation();
            dropTarget.classList.remove('is-drop-target');
            const dayKey = dropTarget.dataset.dropDay;
            const slot = dropTarget.dataset.dropSlot || 'day';
            const day = days.find((item) => item.key === dayKey);
            const slotUnavailable = !day || day.disabled || (slot === 'morning' && !day.canMorning) || (slot === 'afternoon' && !day.canAfternoon) || (slot === 'day' && (!day.canMorning || !day.canAfternoon));
            if (dropTarget.disabled || slotUnavailable) {
                setError('Journée indisponible.');
                dialog.showModal();
                return;
            }
            if (!dragged) {
                return;
            }
            if (dragged.dragKind === 'block') {
                form.dataset.directAction = 'move';
                actionInput.value = 'move';
                blockInput.value = dragged.blockId;
                unlockInput.value = '';
                setDay(dayKey);
                slotSelect.value = slot;
                daySelect.disabled = false;
                slotSelect.disabled = false;
                blockInput.disabled = false;
                unlockInput.disabled = false;
                form.requestSubmit();
                return;
            }
            openDialog({
                allocationId: dragged.allocationId,
                day: dayKey,
                slot,
                hours: dragged.defaultHours || dragged.hours,
                totalHours: dragged.hours,
                fixed: dragged.fixed === '1',
            });
        });
    });

    document.querySelectorAll('[data-add-day]').forEach((button) => {
        button.addEventListener('click', () => {
            openDialog({
                action: button.dataset.addActual === '1' ? 'declare_unplanned_task' : 'create_from_allocation',
                allocationId: allocationSelect?.value || '',
                day: button.dataset.addDay,
                slot: button.dataset.defaultSlot || 'day',
                hours: allocationSelect?.selectedOptions[0]?.dataset.defaultHours || '1',
            });
        });
    });

    allocationSelect?.addEventListener('change', () => {
        if (applyQuickAllocationChoice()) {
            syncFields();
            return;
        }

        allocationInput.value = allocationSelect.value;
        hoursInput.value = formatDurationInput(Number(allocationSelect.selectedOptions[0]?.dataset.defaultHours || parseDurationInput(hoursInput.value)));
        fixedSelect.value = allocationSelect.selectedOptions[0]?.dataset.fixed === '1' ? '1' : '';
        pendingHours = Number(allocationSelect.selectedOptions[0]?.dataset.hours) || parseDurationInput(hoursInput.value) || 1;
        distributionTotal.textContent = formatDuration(pendingHours);
        refreshAllocationContext();
        if (dialogAction.value === 'distribute_allocation') {
            renderDistributionForCount(parseInt(distributionCount?.value || '3', 10));
        }
    });
    internalSelect?.addEventListener('change', applyInternalChoice);
    autoDistributeButton.addEventListener('click', () => {
        renderDistributionForCount(parseInt(distributionCount?.value || '3', 10));
    });
    distributionCount?.addEventListener('change', () => {
        renderDistributionForCount(parseInt(distributionCount.value, 10) || 3);
    });
    addDistributionRowButton.addEventListener('click', () => {
        addDistributionRow({ day: daySelect.value, slot: slotSelect.value, hours: 1 });
    });
    dialogAction.addEventListener('change', () => {
        if (dialogAction.value === 'distribute_allocation' && distributionRows.children.length === 0) {
            renderDistributionForCount(parseInt(distributionCount?.value || '3', 10));
        }
        syncFields();
    });
    repeatWeeklyInput?.addEventListener('change', syncFields);
    slotSelect.addEventListener('change', () => setError(validSlot() ? '' : 'Journée indisponible.'));
    // Changement de jour (date-picker libre) : le calendrier custom émet
    // 'sensi:datechange' ; la saisie clavier émet 'change' au blur. On (re)charge la
    // dispo du jour si inconnue, on ajuste le créneau si une demi-journée est OFF,
    // puis on revalide.
    const onDayChanged = async () => {
        const iso = daySelect.value;
        if (iso && !availabilityCache.has(iso)) {
            await fetchDayAvailability(iso);
        }
        const info = currentDayInfo();
        if (info && !info.disabled) {
            if (!info.canMorning && slotSelect.value === 'morning') {
                slotSelect.value = info.canAfternoon ? 'afternoon' : 'day';
            } else if (!info.canAfternoon && slotSelect.value === 'afternoon') {
                slotSelect.value = info.canMorning ? 'morning' : 'day';
            }
        }
        setError(validSlot() ? '' : 'Journée indisponible.');
    };
    dayEntry?.addEventListener('sensi:datechange', onDayChanged);
    dayMask?.addEventListener('change', onDayChanged);
    daySelect.addEventListener('change', onDayChanged);
    form.addEventListener('submit', (event) => {
        if (dialogAction.value !== 'distribute_allocation' && !validSlot()) {
            event.preventDefault();
            setError('Journée indisponible.');
            return;
        }
        allocationInput.value = ['create_from_allocation', 'distribute_allocation', 'declare_unplanned_task'].includes(dialogAction.value) ? (allocationSelect?.value || '') : '';
        actionInput.value = form.dataset.directAction || dialogAction.value;
        delete form.dataset.directAction;
    });
    document.querySelectorAll('[data-close-dialog]').forEach((button) => {
        button.addEventListener('click', () => dialog.close());
    });

    const splitDialog = document.getElementById('split-dialog');
    if (splitDialog) {
        const splitRows = splitDialog.querySelector('[data-split-rows]');
        const splitCount = splitDialog.querySelector('[data-split-count]');
        const splitHours = parseFloat(splitDialog.dataset.blockHours || '0');
        const dayOptions = (selected) => days
            .filter((day) => !day.disabled)
            .map((day) => `<option value="${day.key}" ${day.key === selected ? 'selected' : ''}>${day.label}</option>`)
            .join('');
        const slotOptions = (selected, dayKey) => distributionSlotOptions(selected, dayKey);
        const splitRowsData = (count) => {
            const firstDay = days.find((day) => !day.disabled)?.key || days[0]?.key || '';
            const part = Math.floor((splitHours / count) * 10000) / 10000;
            const rows = Array.from({ length: count }, (_, index) => ({
                day: index === 0 ? daySelect.value : firstDay,
                slot: index === 0 ? slotSelect.value : 'day',
                hours: index === count - 1 ? Math.round((splitHours - part * (count - 1)) * 10000) / 10000 : part,
            }));

            return rows;
        };
        const renderSplitRows = (rows) => {
            splitRows.replaceChildren();
            rows.forEach((row, index) => {
                const wrapper = document.createElement('div');
                wrapper.className = 'my-workload-split-row';
                wrapper.innerHTML = `
                    <strong>Partie ${index + 1}</strong>
                    <input name="split_hours[]" value="${formatDurationInput(row.hours)}" inputmode="${durationInputMode}" aria-label="Durée partie ${index + 1}">
                    <select name="split_day[]" aria-label="Jour partie ${index + 1}">${dayOptions(row.day)}</select>
                    <select name="split_slot[]" aria-label="Position partie ${index + 1}">${slotOptions(row.slot, row.day)}</select>
                `;
                const rowDay = wrapper.querySelector('select[name="split_day[]"]');
                const rowSlot = wrapper.querySelector('select[name="split_slot[]"]');
                rowDay.addEventListener('change', () => {
                    rowSlot.innerHTML = slotOptions(rowSlot.value, rowDay.value);
                });
                splitRows.appendChild(wrapper);
            });
        };

        document.querySelector('[data-open-split]')?.addEventListener('click', () => {
            renderSplitRows(splitRowsData(parseInt(splitCount.value, 10) || 2));
            splitDialog.showModal();
        });
        splitCount.addEventListener('change', () => renderSplitRows(splitRowsData(parseInt(splitCount.value, 10) || 2)));
        splitDialog.querySelector('[data-auto-split]')?.addEventListener('click', () => renderSplitRows(splitRowsData(parseInt(splitCount.value, 10) || 2)));
        splitDialog.querySelectorAll('[data-close-split]').forEach((button) => button.addEventListener('click', () => splitDialog.close()));
    }
    syncFields();
})();
</script>
{% endif %}
{% endblock %}