{{--
    La page Rapport — voir le docblock de `ReportBuilder` pour le raisonnement.
    Deux colonnes sur desktop, comme la page Élément : la composition à gauche,
    les réglages qui valent pour tout le rapport à droite, dans une carte
    collante.

    ► **Le piège de la grille**, déjà corrigé une fois sur la page Élément : une
      piste `1fr` déborde si son enfant direct n'a pas `min-w-0`. Les blocs
      contiennent des menus et des titres longs — sans ça, la carte de droite
      part hors de l'écran sur une fenêtre de 1 280 px.
--}}
@php
    $blocker = $this->blocker();
    $scope = $this->scope();
@endphp

<x-filament-panels::page>
    @vite(['resources/js/report-blocks.js'])

    {{-- Deux onglets qui n'ont rien à voir : composer un rapport à la demande,
         régler des récapitulatifs récurrents — même patron que
         `WorkspaceSettings::$activeTab`. --}}
    <div class="mb-5 flex flex-wrap items-center gap-1 border-b border-gray-200 dark:border-white/10">
        @foreach (['composer' => ['Composer', 'heroicon-o-document-chart-bar'], 'recaps' => ['Récapitulatifs', 'heroicon-o-envelope']] as $cle => [$libelle, $icone])
            <button
                type="button"
                wire:click="setTab('{{ $cle }}')"
                @class([
                    'inline-flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-semibold -mb-px',
                    'border-primary-600 text-primary-600 dark:border-primary-400 dark:text-primary-400' => $activeTab === $cle,
                    'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200' => $activeTab !== $cle,
                ])
            >
                <x-filament::icon :icon="$icone" class="h-4 w-4" />
                {{ $libelle }}
            </button>
        @endforeach
    </div>

    @if ($activeTab === 'recaps')
        @include('filament.app.pages.partials.report-recaps')
    @endif

    @if ($activeTab === 'composer')
    <div class="grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">

        {{-- ============================ Composition ============================ --}}
        <div class="flex min-w-0 flex-col gap-1" x-data="reportBlocks">

            {{-- Périmètre. En tête, parce que c'est ce qui décide de tout le reste.
                 Les deux menus sont là même quand la page arrive avec un périmètre :
                 le bouton « Rapport » d'un projet n'est qu'un raccourci vers cet
                 écran, et on doit pouvoir changer d'avis sans repartir d'ailleurs. --}}
            <div class="text-sm font-semibold text-gray-950 dark:text-white">Périmètre</div>
            <x-filament::section>
            <div class="flex flex-wrap items-start justify-between gap-3">
                <div class="flex min-w-0 flex-1 flex-col gap-2">
                    <span class="block text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Projet</span>

                    <div class="flex flex-wrap items-center gap-2">
                        <select
                            wire:change="chooseProject($event.target.value)"
                            class="min-w-0 max-w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                            aria-label="Projet couvert"
                        >
                            <option value="">Choisir un projet…</option>
                            @foreach ($this->selectableProjects() as $selectable)
                                <option value="{{ $selectable->code }}" @selected($this->project()?->id === $selectable->id)>
                                    {{ $selectable->name }}
                                </option>
                            @endforeach
                        </select>

                        @if ($this->selectableRoots()->isNotEmpty())
                            <select
                                wire:change="chooseElement($event.target.value)"
                                class="min-w-0 max-w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                                aria-label="Chantier couvert"
                            >
                                <option value="">Tout le projet</option>
                                @foreach ($this->selectableRoots() as $root)
                                    <option value="{{ $root->code }}" @selected($this->elementCode === $root->code)>
                                        {{ $root->title }}
                                    </option>
                                @endforeach
                            </select>
                        @endif
                    </div>

                @if ($scope !== null)
                <div class="flex flex-col gap-1.5">
                    <label for="report-depth" class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">
                        Profondeur
                    </label>
                    <select
                        id="report-depth"
                        wire:model.live="depth"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                    >
                        @foreach ($this->reportDepths() as $option)
                            <option value="{{ $option->value }}">{{ $option->label() }}</option>
                        @endforeach
                    </select>
                </div>

                @php($children = $this->selectableChildren())
                @if ($children->isNotEmpty())
                <div class="flex flex-col gap-1.5">
                    <div class="flex items-baseline justify-between gap-2">
                        <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Éléments couverts</span>
                        @if ($this->selectedElementIds !== [])
                            <button type="button" wire:click="selectAllElements" class="text-xs text-primary-600 hover:underline dark:text-primary-400">
                                Tout reprendre
                            </button>
                        @endif
                    </div>

                    {{-- Les enfants directs seulement : ce qui se trouve sous un
                         élément retenu est décidé par la profondeur, pas par une
                         case. Une liste de 163 lignes ne serait pas utilisable. --}}
                    <div class="flex max-h-56 flex-col gap-1 overflow-y-auto rounded-lg border border-gray-100 p-2 dark:border-white/5">
                        @foreach ($children as $child)
                            <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
                                <input
                                    type="checkbox"
                                    class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                    @checked($this->selectedElementIds === [] || $this->isElementSelected($child->id))
                                    wire:click="toggleElement({{ $child->id }})"
                                />
                                <span class="min-w-0 truncate">{{ $child->title }}</span>
                            </label>
                        @endforeach
                    </div>

                    <span class="text-xs text-gray-400 dark:text-gray-500">
                        {{ $this->selectedElementIds === []
                            ? 'Tous les éléments du premier niveau.'
                            : count($this->selectedElementIds).' élément(s) sur '.$children->count().'.' }}
                    </span>
                </div>
                @endif
                <span class="block text-xs text-gray-400 dark:text-gray-500">
                    {{ $this->scopeCount() }} élément(s) couvert(s) · {{ $this->reportRangeLabel() }}
                </span>
                @else
                    <span class="block text-xs text-gray-400 dark:text-gray-500">
                        Un rapport couvre un projet, ou l'un de ses chantiers. Le bloc Portefeuille, lui, couvre tous les projets actifs.
                    </span>
                @endif
                </div>

                
            </div>
            </x-filament::section>

            {{-- Les blocs. --}}
            <div class="mt-4 text-sm font-semibold text-gray-950 dark:text-white">Contenu du rapport</div>
            <div class="flex flex-col gap-3" data-report-blocks>
                @foreach ($this->blocks as $index => $raw)
                    @php($block = $this->block($index))
                    @continue($block === null)

                    <div
                        wire:key="block-{{ $index }}-{{ $block->type->value }}"
                        data-report-block="{{ $index }}"
                        class="group rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900"
                    >
                        <div class="flex items-start gap-3">
                            {{-- Poignée : seul point de saisie, sinon tout clic dans un menu amorcerait un glissement. --}}
                            <button
                                type="button"
                                data-report-block-handle
                                class="mt-1.5 cursor-grab text-gray-400 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                                aria-label="Déplacer le bloc"
                            >
                                <x-filament::icon icon="heroicon-m-bars-3" class="h-4 w-4" />
                            </button>

                            <div class="flex min-w-0 flex-1 flex-col gap-2">
                                <div class="flex flex-wrap items-center gap-2">
                                    <x-filament::icon :icon="$block->type->icon()" class="h-4 w-4 shrink-0 text-gray-700 dark:text-gray-300" />
                                    <input
                                        type="text"
                                        wire:model.blur="blocks.{{ $index }}.title"
                                        placeholder="{{ $block->type->label() }}"
                                        class="min-w-0 flex-1 border-1 rounded-full bg-transparent px-2 py-1 text-sm font-semibold border-gray-400 text-gray-950 placeholder:font-normal placeholder:text-gray-400 focus:ring-0 dark:text-white"
                                        aria-label="Titre du bloc"
                                    />
                                </div>

                                {{--
                                    La ligne de résumé : c'est elle qui permet de relire un
                                    rapport de six blocs sans ouvrir un seul menu.
                                --}}
                                

                                {{-- Les réglages du bloc, propres à son type. --}}
                                <div class="flex flex-wrap w-full items-baseline gap-2 pt-1 justify-between">
                                    @if ($block->type === \App\Services\Reporting\ReportBlockType::Planning)
                                        {{-- Ni « Rendu » ni « Échelle » : le premier découle du
                                             **format** (Gantt dessiné en PowerPoint, tableau daté
                                             en Word et Excel), la seconde de la **période**
                                             (`DateRange::suggestedScale()`). Une année à l'échelle
                                             du jour donnait 365 colonnes illisibles. --}}
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Découpage</span>
                                            <x-report.select :index="$index" option="page_mode" label="Découpage" :choices="['chantier' => 'Une page par chantier', 'fill' => 'Remplir les pages']" />
                                        </div>
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Affichage</span>
                                            <x-report.select :index="$index" option="depth" label="Détail" :choices="['all' => 'Tout', 'summary' => 'Chantiers et jalons']" />    
                                        </div>
                                        
                                    @endif

                                    @if ($block->type === \App\Services\Reporting\ReportBlockType::Elements)
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Rendu</span>
                                            {{-- « Liste » retirée : elle n'apportait rien qu'un
                                                 tableau sans en-tête. Le Kanban, lui, est une
                                                 autre lecture des mêmes données — dessiné en
                                                 PowerPoint, en tableau ailleurs. --}}
                                            <x-report.select :index="$index" option="layout" label="Mise en forme" :choices="['table' => 'Tableau', 'kanban' => 'Kanban']" />
                                        </div>
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Découpage</span>
                                            <x-report.select :index="$index" option="page_mode" label="Découpage" :choices="['all' => 'Tout ensemble', 'chantier' => 'Par chantier']" />
                                        </div>
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Statuts</span>
                                            {{-- « Tous » n'est pas l'absence de filtre déguisée : c'est
                                                 le seul choix qui a du sens sous un Kanban, dont
                                                 l'intérêt est justement de répartir les éléments
                                                 entre les statuts. Sans lui, un Kanban « Terminés »
                                                 n'aurait qu'une colonne remplie. --}}
                                            <x-report.select :index="$index" option="filter" label="Filtre" :choices="['all' => 'Tous', 'completed' => 'Terminés', 'blocked' => 'Bloqués', 'to_validate' => 'À valider', 'late' => 'En retard', 'upcoming' => 'À venir']" />
                                         </div>
                                    @endif

                                    @if ($block->type->hasTypeFilter())
                                        {{-- Vide = tous, même règle que la sélection d'éléments et les
                                             pages du Focus ; le dernier type coché ne se décoche pas. --}}
                                        <div class="flex w-full flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Types d'éléments</span>
                                            <div class="flex flex-wrap gap-x-4 gap-y-1">
                                                @php($selectedTypes = array_filter(array_keys($this->elementTypeFilters()), fn ($t) => $this->isBlockTypeSelected($index, $t)))
                                                @foreach ($this->elementTypeFilters() as $typeCode => $typeLabel)
                                                    @php($isTypeSelected = $this->isBlockTypeSelected($index, $typeCode))
                                                    <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
                                                        <input
                                                            type="checkbox"
                                                            id="block-type-{{ $index }}-{{ $typeCode }}"
                                                            class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                                            @checked($isTypeSelected)
                                                            @disabled($isTypeSelected && count($selectedTypes) === 1)
                                                            wire:click="toggleBlockType({{ $index }}, '{{ $typeCode }}')"
                                                        />
                                                        {{ $typeLabel }}
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    @if ($block->type->needsTarget())
                                         <div class="flex flex-col gap-1 w-full">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Focus sur</span>
                                        <select
                                            wire:model.live="blocks.{{ $index }}.target_element_id"
                                            class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white"
                                            aria-label="Chantier mis en avant"
                                        >
                                            <option value="">{{ $scope?->label() ?? 'Le périmètre du rapport' }}</option>
                                            @foreach ($this->focusTargets() as $element)
                                                <option value="{{ $element->id }}">{{ str_repeat('— ', (int) $element->getAttribute('focus_depth')) }}{{ $element->title }}</option>
                                            @endforeach
                                        </select>
                                         </div>

                                        {{-- Les pages du tableau de bord, enregistrées avec la recette.
                                             Toutes cochées par défaut ; la dernière ne se décoche pas. --}}
                                        <div class="flex w-full flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Pages</span>
                                            <div class="flex flex-wrap gap-x-4 gap-y-1">
                                                @php($selectedPages = array_filter($this->focusPages($index), fn ($p) => $this->isFocusPageSelected($index, $p->value)))
                                                @foreach ($this->focusPages($index) as $page)
                                                    @php($isSelected = $this->isFocusPageSelected($index, $page->value))
                                                    <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
                                                        <input
                                                            type="checkbox"
                                                            id="focus-page-{{ $index }}-{{ $page->value }}"
                                                            class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                                            @checked($isSelected)
                                                            {{-- La dernière page cochée ne se décoche pas : un Focus sans page ne produirait rien. --}}
                                                            @disabled($isSelected && count($selectedPages) === 1)
                                                            wire:click="toggleFocusPage({{ $index }}, '{{ $page->value }}')"
                                                        />
                                                        {{ $page->label() }}
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                    @if ($block->type->hasPeriod())
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Période</span>
                                            <select
                                                wire:model.live="blocks.{{ $index }}.period"
                                                class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white"
                                                aria-label="Période du bloc"
                                            >
                                            
                                                @foreach ($this->blockPeriods() as $period)
                                                    <option value="{{ $period->value }}">{{ $period->label() }}</option>
                                                @endforeach
                                            </select>
                                            @if ($block->period->needsDates())
                                            <span class="text-sm text-gray-400 uppercase dark:text-gray-500">De</span>
                                            <input type="date" wire:model.live="blocks.{{ $index }}.from" aria-label="Début de la période du bloc"
                                                class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                                            <span class="text-sm text-gray-400 uppercase dark:text-gray-500">A</span>
                                            <input type="date" wire:model.live="blocks.{{ $index }}.to" aria-label="Fin de la période du bloc"
                                                class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                                            @else
                                            <div class="flex w-full justify-center">
                                                <p class="text-xs justify-center text-gray-400 dark:text-gray-500">
                                                    {{ ucfirst($this->blockRangeLabel($index)) }}
                                                </p>
                                            </div>
                                            @endif
                                        </div>
                                        {{-- Le périmètre du bloc, sur le modèle de sa période :
                                             « Hérite du rapport » par défaut, une surcharge si
                                             on la demande. --}}
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Profondeur</span>
                                             <select
                                            wire:model.live="blocks.{{ $index }}.depth"
                                            class="rounded-lg border-gray-200 py-1 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white"
                                            aria-label="Profondeur du bloc"
                                        >
                                            @foreach ($this->blockDepths() as $option)
                                                <option value="{{ $option->value }}">{{ $option->label() }}</option>
                                            @endforeach
                                        </select>
                                        </div>
                                        @if ($scope !== null && $this->selectableChildren()->isNotEmpty())
                                        <div class="flex flex-col gap-1">
                                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Sélection</span>
                                            <x-filament::dropdown placement="bottom-start" width="xs">
                                                <x-slot name="trigger">
                                                    <button type="button" class="rounded-lg border border-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5">
                                                        {{ $block->elementIds === []
                                                            ? 'Éléments du rapport'
                                                            : count($block->elementIds).' élément(s)' }}
                                                    </button>
                                                </x-slot>
                                                <div class="flex max-h-56 flex-col gap-1 overflow-y-auto p-2">
                                                    @foreach ($this->selectableChildren() as $child)
                                                        <label class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
                                                            <input
                                                                type="checkbox"
                                                                class="h-3.5 w-3.5 shrink-0 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                                                                @checked($this->isBlockElementSelected($index, $child->id))
                                                                wire:click="toggleBlockElement({{ $index }}, {{ $child->id }})"
                                                            />
                                                            <span class="min-w-0 truncate">{{ $child->title }}</span>
                                                        </label>
                                                    @endforeach
                                                    @if ($block->elementIds !== [])
                                                        <button type="button" wire:click="resetBlockElements({{ $index }})" class="mt-1 text-left text-xs text-primary-600 hover:underline dark:text-primary-400">
                                                            Reprendre ceux du rapport
                                                        </button>
                                                    @endif
                                                </div>
                                            </x-filament::dropdown>
                                        </div>
                                        @endif
                                        
                                    @endif
                                </div>
                            </div>

                            {{-- Motif déjà en place partout : la croix n'apparaît qu'au survol. --}}
                            <button
                                type="button"
                                wire:click="removeBlock({{ $index }})"
                                class="text-gray-300 opacity-0 transition group-hover:opacity-100 hover:text-danger-500 dark:text-gray-600"
                                aria-label="Retirer le bloc"
                            >
                                <x-filament::icon icon="heroicon-m-x-mark" class="h-4 w-4" />
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Ajout d'un bloc. --}}
            <x-filament::dropdown placement="bottom-start" width="xs">
                <x-slot name="trigger">
                    <x-filament::button color="gray" icon="heroicon-m-plus" class="w-fit">
                        Ajouter un bloc
                    </x-filament::button>
                </x-slot>
                <x-filament::dropdown.list>
                    @foreach ($this->blockTypes() as $type)
                        <x-filament::dropdown.list.item wire:click="addBlock('{{ $type->value }}')" :icon="$type->icon()">
                            {{ $type->label() }}
                        </x-filament::dropdown.list.item>
                    @endforeach
                </x-filament::dropdown.list>
            </x-filament::dropdown>

        </div>

        {{-- ============================= Carte méta ============================= --}}
        <div class="min-w-0 lg:sticky lg:top-20 lg:self-start">
            @if ($this->configurations()->isNotEmpty())
                    <x-filament::dropdown placement="bottom-end" width="xs">
                        <x-slot name="trigger">
                            <x-filament::button color="gray" size="sm" icon="heroicon-m-bookmark" class="w-full mb-4">
                                Modèles
                            </x-filament::button>
                        </x-slot>
                        <x-filament::dropdown.list>
                            @foreach ($this->configurations() as $configuration)
                                <x-filament::dropdown.list.item wire:click="loadConfiguration({{ $configuration->id }})">
                                    {{ $configuration->name }}
                                </x-filament::dropdown.list.item>
                            @endforeach
                        </x-filament::dropdown.list>
                    </x-filament::dropdown>
                @endif
            <div class="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">

                <div class="flex flex-col gap-1.5">
                    <label for="report-name" class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Titre</label>
                    <input
                        id="report-name"
                        type="text"
                        wire:model.blur="name"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                    />
                    {{-- L'horodatage est ajouté à la génération et non ici : un champ
                         qui se réécrit pendant qu'on tape est pire que le doublon
                         de noms qu'il évite. Le dire suffit. --}}
                    <span class="text-xs text-gray-400 dark:text-gray-500">
                        La date et l'heure sont ajoutées au nom du document&nbsp;: <span class="tabular-nums">_{{ now()->format('Ymd_Hi') }}</span>
                    </span>
                    @error('name')
                        <span class="text-xs text-danger-600 dark:text-danger-400">{{ $message }}</span>
                    @enderror
                </div>

                <div class="flex flex-col gap-1.5">
                    <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Format</span>
                    <div class="flex flex-wrap gap-1.5">
                    
                        @foreach ($this->formats() as $value => $label)

                            <button
                                type="button"
                                wire:click="$set('format', '{{ $value }}')"
                                @class([
                                    'rounded-full border px-3 py-1 text-xs font-semibold transition',
                                    'border-primary-500 bg-primary-50 text-primary-700 dark:bg-primary-500/10 dark:text-primary-300' => $this->format === $value,
                                    'border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5' => $this->format !== $value,
                                ])
                                @style([
                                    'background-color: '.$this->formats_colors()[$value].'; color: #FFFFFF; border-color: '.$this->formats_colors()[$value]  => $this->format === $value,
                                    'color: '.$this->formats_colors()[$value]. '; border-color: '.$this->formats_colors()[$value] => $this->format != $value,
                                ])
                            >
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>
                </div>

                <div class="flex flex-col gap-1.5">
                    <label for="report-period" class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">
                        Période du rapport
                    </label>
                    <select
                        id="report-period"
                        wire:model.live="defaultPeriod"
                        class="w-full rounded-lg border-gray-200 text-sm dark:border-white/10 dark:bg-gray-900 dark:text-white"
                    >
                        @foreach ($this->reportPeriods() as $period)
                            <option value="{{ $period->value }}">{{ $period->label() }}</option>
                        @endforeach
                    </select>

                    @if ($this->defaultPeriod === \App\Services\Reporting\ReportPeriod::Custom->value)
                        <div class="grid grid-cols-2 gap-2">
                            <input type="date" wire:model.live="defaultFrom" aria-label="Début de la période"
                                class="w-full rounded-lg border-gray-200 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                            <input type="date" wire:model.live="defaultTo" aria-label="Fin de la période"
                                class="w-full rounded-lg border-gray-200 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white" />
                        </div>
                    @endif

                    {{-- Les blocs qui héritent liront celle-ci : la montrer résolue évite
                         d'avoir à générer le document pour savoir ce qu'elle vaut. --}}
                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ $this->reportRangeLabel() }}</span>
                </div>

                <div class="flex flex-col gap-2">
                    <label class="flex items-start gap-2 text-sm text-gray-700 dark:text-gray-200">
                        <input
                            type="checkbox"
                            wire:model.live="saveToDocuments"
                            class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5"
                        />
                        <span>
                            Enregistrer dans les documents
                            <span class="block text-xs text-gray-400 dark:text-gray-500">
                                @if ($this->saveToDocuments)
                                    {{ $scope !== null
                                        ? 'Le rapport sera rattaché au périmètre ci-dessous.'
                                        : 'Le rapport ira dans vos documents personnels.' }}
                                @else
                                    Le rapport sera seulement téléchargé, sans être conservé.
                                @endif
                            </span>
                        </span>
                    </label>
                </div>

                @if ($this->saveToDocuments)
                <div class="flex flex-col gap-1.5">
                    <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Rattachement</span>

                    <div class="flex flex-col gap-1">
                        @foreach ($this->attachableProjects()->whereIn('id', $this->attachProjectIds) as $project)
                            <div class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300">
                                <x-filament::icon icon="heroicon-m-folder" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                                <span class="min-w-0 flex-1 truncate">{{ $project->name }}</span>
                                <button type="button" wire:click="detachProject({{ $project->id }})" class="text-gray-300 hover:text-danger-500" aria-label="Détacher {{ $project->name }}">
                                    <x-filament::icon icon="heroicon-m-x-mark" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                        @endforeach

                        @foreach ($this->attachableElements()->whereIn('id', $this->attachElementIds) as $element)
                            <div class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-300">
                                <x-filament::icon icon="heroicon-m-squares-2x2" class="h-3.5 w-3.5 shrink-0 text-gray-400" />
                                <span class="min-w-0 flex-1 truncate">{{ $element->title }}</span>
                                <button type="button" wire:click="detachElement({{ $element->id }})" class="text-gray-300 hover:text-danger-500" aria-label="Détacher {{ $element->title }}">
                                    <x-filament::icon icon="heroicon-m-x-mark" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                        @endforeach
                    </div>

                    <select
                        wire:change="attachElement($event.target.value); $event.target.value = ''"
                        class="w-full rounded-lg border-gray-200 text-xs dark:border-white/10 dark:bg-gray-900 dark:text-white"
                        aria-label="Rattacher à un élément"
                    >
                        <option value="">Rattacher à un élément…</option>
                        @foreach ($this->attachableElements() as $element)
                            <option value="{{ $element->id }}">{{ $element->code }} — {{ $element->title }}</option>
                        @endforeach
                    </select>

                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        Sans rattachement, le rapport n'apparaît que dans vos documents.
                    </p>
                </div>
                @endif

                <div class="flex flex-col gap-2 border-t border-gray-100 pt-4 dark:border-white/5">
                    @if ($blocker !== null)
                        <p class="text-xs text-warning-600 dark:text-warning-400">{{ $blocker }}</p>
                    @endif

                    <x-filament::button
                        wire:click="generate"
                        wire:loading.attr="disabled"
                        wire:target="generate"
                        :disabled="$blocker !== null"
                        icon="heroicon-m-document-arrow-down"
                    >
                        <span wire:loading.remove wire:target="generate">{{ $this->saveToDocuments ? 'Générer' : 'Générer et télécharger' }}</span>
                        <span wire:loading wire:target="generate">Génération…</span>
                    </x-filament::button>

                    @if ($this->lastDocument() !== null)
                        <div class="flex flex-col gap-1.5">
                            <span class="text-[11px] font-bold tracking-wide text-gray-600 uppercase dark:text-gray-300">Dernier rapport</span>
                            <a
                                href="{{ route('documents.open', $this->lastDocument()) }}"
                                target="_blank"
                                class="flex items-center gap-1.5 text-sm font-medium text-primary-600 hover:underline dark:text-primary-400"
                            >
                                <x-filament::icon icon="heroicon-m-arrow-down-tray" class="h-4 w-4 shrink-0" />
                                <span class="min-w-0 truncate">{{ $this->lastDocument()->title }}</span>
                            </a>
                            <span class="text-xs text-gray-400 dark:text-gray-500">{{ $this->lastDocument()->humanFileSize() }}</span>
                        </div>
                    @endif

                    <div class="flex items-center gap-2 border-t border-gray-100 pt-3 dark:border-white/5">
                        <x-filament::button color="gray" size="sm" wire:click="saveConfiguration" wire:loading.attr="disabled" class="w-full">
                            Enregistrer la modèle
                        </x-filament::button>

                        @if ($this->configurationId !== null)
                            <x-filament::button
                                color="danger"
                                outlined
                                size="sm"
                                icon="heroicon-o-trash"
                                wire:click="deleteConfiguration({{ $this->configurationId }})"
                                wire:confirm="Souhaitez)vous réellement supprimer ce modèle ?"
                            >
                                 
                            </x-filament::button>
                        @endif
                    </div>

                    <label class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <input type="checkbox" wire:model.live="isShared" class="h-4 w-4 rounded border-gray-300 text-primary-600 dark:border-white/20 dark:bg-white/5" />
                        Partager le modèle avec l'espace
                    </label>
                </div>

                

            </div>
        </div>

    </div>
    @endif
</x-filament-panels::page>