@php
        $isEditWizard = $isEdit ?? false;
        $initialClientStr = (string) old('client_id', $initialClient ?? '');
        $initialProjectIdsArr = collect(old('selected_project_ids', $initialProjectIds ?? []))->map(fn ($id) => (string) $id)->unique()->values()->all();
        $initialBriefIdsArr = collect(old('selected_briefs', $initialBriefIds ?? []))->map(fn ($id) => (string) $id)->values()->all();
        $initialPricesArr = old('prices', $initialPrices ?? []);

        $projectsPayload = $projects->map(function ($project) {
            return [
                'id' => $project->id,
                'name' => $project->name,
                'client_id' => (int) ($project->client_id ?: $project->client?->id ?: 0),
                'client' => $project->client?->name,
                'briefs' => $project->briefs->map(function ($brief) {
                    $budgetTndTotal = (float) $brief->adPlatforms->sum('budget');
                    $isAdvertising = $brief->isAdvertisingBrief();
                    $estimatedCostTnd = (float) ($brief->estimated_price ?? 0);
                    if ($estimatedCostTnd <= 0 && $budgetTndTotal > 0) {
                        $estimatedCostTnd = $budgetTndTotal;
                    }
                    $suggestedTnd = ($isAdvertising && $estimatedCostTnd > 0)
                        ? round($estimatedCostTnd * \App\Models\Brief::ADVERTISING_SALE_HT_COST_MULTIPLIER, 3)
                        : 0.0;

                    return [
                        'id' => $brief->id,
                        'title' => $brief->title,
                        'status' => $brief->brifStatus?->name ?? '-',
                        'estimated_price' => (float) ($brief->estimated_price ?? 0),
                        'selling_price' => (float) ($brief->selling_price ?? 0),
                        'is_advertising' => $isAdvertising,
                        'advertising_budget_tnd_total' => round($budgetTndTotal, 3),
                        'suggested_invoice_ht_tnd' => $suggestedTnd,
                        'breakdown' => $brief->getCostBreakdown(),
                    ];
                })->values()->all(),
            ];
        })->values()->all();

        $clientsPayload = $projects
            ->map(fn ($project) => $project->client)
            ->filter()
            ->unique('id')
            ->values()
            ->map(fn ($client) => [
                'id' => (int) $client->id,
                'name' => (string) $client->name,
            ])->all();

        $prefillClientPayload = $prefillClient ?? null;
        if (is_array($prefillClientPayload) && isset($prefillClientPayload['id'])) {
            $prefillClientId = (int) $prefillClientPayload['id'];
            $alreadyListed = collect($clientsPayload)->contains(
                fn (array $client): bool => (int) $client['id'] === $prefillClientId
            );
            if (! $alreadyListed) {
                array_unshift($clientsPayload, [
                    'id' => $prefillClientId,
                    'name' => (string) ($prefillClientPayload['name'] ?? ''),
                ]);
            }
        }
    @endphp

    @if (! empty($prefillFromNotification) && ! empty($prefillProjectName))
        <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50/80 px-4 py-3 text-sm text-emerald-900">
            <p class="font-semibold">Demande prête à facturer</p>
            <p class="mt-1 text-emerald-800">
                La demande « {{ $prefillProjectName }} », le client et tous les briefs validés sont déjà sélectionnés avec les prix suggérés.
                Vérifiez les montants puis cliquez sur <strong>{{ $submitLabel ?? 'Générer' }}</strong>.
            </p>
        </div>
    @endif

    <div class="w-full rounded-xl border border-slate-200 bg-white p-5 shadow-sm"
          x-data="{
            selectedClient: @js($initialClientStr !== '' ? (string) $initialClientStr : ''),
            selectedProjectIds: @js($initialProjectIdsArr),
            clients: @js($clientsPayload),
            projects: @js($projectsPayload),
            selectedBriefIds: @js($initialBriefIdsArr),
            prices: @js($initialPricesArr),
            prefillClient: @js($prefillClientPayload),
            demandeSearchQuery: '',
            briefSearchQuery: '',
            
            modalOpen: false,
            activeBrief: null,
            init() {
                const initialClient = @js($initialClientStr);
                if (initialClient !== '') {
                    this.selectedClient = String(initialClient);
                }
                if (this.prefillClient?.id) {
                    const prefillId = String(this.prefillClient.id);
                    if (! this.clients.some((client) => String(client.id) === prefillId)) {
                        this.clients = [this.prefillClient, ...this.clients];
                    }
                    this.selectedClient = prefillId;
                }
                this.$nextTick(() => {
                    const selectEl = document.getElementById('client_id');
                    if (selectEl?.value) {
                        this.selectedClient = String(selectEl.value);
                    }
                });
            },
            formatCurrency(val) {
                return new Intl.NumberFormat('fr-TN', { style: 'currency', currency: 'TND' }).format(val);
            },
            formatUsd(val) {
                return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(Number(val ?? 0));
            },
            formatBreakdownSubtotal(item) {
                const cur = item.amount_currency || 'tnd';
                if (cur === 'usd') {
                    return this.formatUsd(item.total_cost);
                }
                return this.formatCurrency(item.total_cost);
            },
            formatEstimatedDisplay(brief) {
                if (!brief) {
                    return this.formatCurrency(0);
                }
                return this.formatCurrency(brief.estimated_price);
            },
            profitCompareBaseline(brief) {
                if (!brief) {
                    return 0;
                }
                if (brief.is_advertising && brief.estimated_price > 0) {
                    return brief.estimated_price;
                }
                if (!brief.is_advertising && brief.estimated_price > 0) {
                    return brief.estimated_price;
                }
                return 0;
            },
            formatTime(seconds) {
                let h = Math.floor(seconds / 3600);
                let m = Math.floor((seconds % 3600) / 60);
                let s = seconds % 60;
                return `${h}h ${m}m ${s}s`;
            },

            filteredProjects() {
                if (!this.selectedClient) return [];
                return this.projects.filter((project) => String(project.client_id) === String(this.selectedClient));
            },
            filteredProjectsForPicker() {
                const base = this.filteredProjects();
                const q = (this.demandeSearchQuery || '').trim().toLowerCase();
                if (!q) return base;
                const selected = new Set(this.selectedProjectIds.map(String));
                return base.filter((project) => {
                    if (selected.has(String(project.id))) return true;
                    return String(project.name || '').toLowerCase().includes(q);
                });
            },
            onClientChange() {
                this.selectedProjectIds = [];
                this.selectedBriefIds = [];
                this.demandeSearchQuery = '';
                this.briefSearchQuery = '';
            },
            invoiceLineBriefs() {
                const idSet = new Set(this.selectedProjectIds.map(String));
                const rows = [];
                this.projects.forEach((project) => {
                    if (!idSet.has(String(project.id))) return;
                    (project.briefs || []).forEach((brief) => {
                        rows.push({
                            ...brief,
                            project_id: project.id,
                            project_name: project.name,
                        });
                    });
                });
                rows.sort((a, b) => {
                    const byProject = String(a.project_name).localeCompare(String(b.project_name), 'fr');
                    if (byProject !== 0) return byProject;
                    return Number(a.id) - Number(b.id);
                });
                return rows;
            },
            invoiceLineBriefsFiltered() {
                const rows = this.invoiceLineBriefs();
                const q = (this.briefSearchQuery || '').trim().toLowerCase();
                if (!q) return rows;
                return rows.filter((brief) => {
                    const hay = [
                        brief.title,
                        brief.status,
                        brief.project_name,
                        String(brief.id),
                    ].join(' ').toLowerCase();
                    return hay.includes(q);
                });
            },
            findBriefById(briefId) {
                const id = String(briefId);
                for (const project of this.projects) {
                    const found = (project.briefs || []).find((b) => String(b.id) === id);
                    if (found) {
                        return { ...found, project_id: project.id, project_name: project.name };
                    }
                }
                return null;
            },
            toggleProjectId(projectId, checked) {
                const id = String(projectId);
                if (checked) {
                    if (!this.selectedProjectIds.includes(id)) {
                        this.selectedProjectIds.push(id);
                    }
                    return;
                }
                this.selectedProjectIds = this.selectedProjectIds.filter((x) => x !== id);
                const project = this.projects.find((p) => String(p.id) === id);
                if (!project || !project.briefs) return;
                project.briefs.forEach((b) => {
                    const bid = String(b.id);
                    this.selectedBriefIds = this.selectedBriefIds.filter((x) => x !== bid);
                });
            },
            isSelected(briefId) {
                return this.selectedBriefIds.includes(String(briefId));
            },
            toggleBrief(briefId, checked) {
                const id = String(briefId);
                if (checked) {
                    if (!this.selectedBriefIds.includes(id)) {
                        this.selectedBriefIds.push(id);
                        const brief = this.findBriefById(id);
                        if (brief && (!this.prices[id] || this.prices[id] === '0')) {
                            if (brief.is_advertising && brief.suggested_invoice_ht_tnd > 0) {
                                this.prices[id] = String(brief.suggested_invoice_ht_tnd);
                            } else if (brief.selling_price > 0) {
                                this.prices[id] = String(brief.selling_price);
                            } else if (brief.estimated_price > 0) {
                                this.prices[id] = String(brief.estimated_price);
                            }
                        }
                    }
                } else {
                    this.selectedBriefIds = this.selectedBriefIds.filter((value) => value !== id);
                }
            },
            allSelected() {
                const briefs = this.invoiceLineBriefsFiltered();
                if (briefs.length === 0) return false;
                return briefs.every((brief) => this.isSelected(brief.id));
            },
            toggleAll() {
                const briefs = this.invoiceLineBriefsFiltered();
                if (briefs.length === 0) return;
                if (this.allSelected()) {
                    briefs.forEach((brief) => this.toggleBrief(brief.id, false));
                    return;
                }
                briefs.forEach((brief) => this.toggleBrief(brief.id, true));
            }
          }">
        <form method="POST" action="{{ $formAction }}" class="space-y-5">
            @csrf
            @if(! empty($useMethodPut))
                @method('PUT')
            @endif

            <div class="grid gap-4 md:grid-cols-3">
                <div>
                    <label for="number" class="mb-1 block text-sm font-semibold text-slate-700">Numero facture</label>
                    <input id="number" name="number" type="text" required value="{{ old('number', $numberDefault) }}" class="w-full rounded-lg border border-rose-100 px-3 py-2.5 focus:border-[#E83646] focus:ring-[#E83646]">
                    <x-input-error :messages="$errors->get('number')" class="mt-2" />
                </div>

                <div>
                    <label for="invoice_date" class="mb-1 block text-sm font-semibold text-slate-700">Date de facture</label>
                    <input id="invoice_date" name="invoice_date" type="date" required value="{{ old('invoice_date', $invoiceDateDefault) }}" class="w-full rounded-lg border border-rose-100 px-3 py-2.5 focus:border-[#E83646] focus:ring-[#E83646]">
                    <x-input-error :messages="$errors->get('invoice_date')" class="mt-2" />
                </div>

                <div>
                    <label for="client_id" class="mb-1 block text-sm font-semibold text-slate-700">Client</label>
                    <select id="client_id" name="client_id" x-model="selectedClient" @change="onClientChange()" required class="w-full rounded-lg border border-rose-100 px-3 py-2.5 focus:border-[#E83646] focus:ring-[#E83646]">
                        <option value="">Sélectionner un client</option>
                        @foreach ($clientsPayload as $client)
                            <option value="{{ $client['id'] }}" @selected($initialClientStr !== '' && (string) $initialClientStr === (string) $client['id'])>
                                {{ $client['name'] }}
                            </option>
                        @endforeach
                    </select>
                    <x-input-error :messages="$errors->get('client_id')" class="mt-2" />
                </div>

                <div class="md:col-span-3">
                    <p class="mb-1 block text-sm font-semibold text-slate-700">Demandes clients</p>
                    <p class="mb-2 text-xs text-slate-500">Selectionnez une ou plusieurs demandes du meme client. Les briefs a facturer apparaitront ci-dessous.</p>
                    <template x-for="pid in selectedProjectIds" :key="'hidden-project-' + pid">
                        <input type="hidden" name="selected_project_ids[]" :value="pid">
                    </template>
                    <template x-if="!selectedClient">
                        <p class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-sm text-slate-500">Choisissez d abord un client.</p>
                    </template>
                    <template x-if="selectedClient && filteredProjects().length === 0">
                        <p class="rounded-lg border border-amber-100 bg-amber-50/60 px-3 py-2 text-sm text-amber-900">Aucune demande client pour ce client.</p>
                    </template>
                    <div x-show="selectedClient && filteredProjects().length > 0" class="space-y-2">
                        <div>
                            <label for="invoice_demande_search" class="sr-only">Rechercher une demande</label>
                            <input id="invoice_demande_search"
                                   type="search"
                                   x-model="demandeSearchQuery"
                                   placeholder="Rechercher une demande client..."
                                   autocomplete="off"
                                   class="w-full rounded-lg border border-rose-100 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus:border-[#E83646] focus:ring-[#E83646]">
                        </div>
                        <div class="max-h-48 space-y-1.5 overflow-y-auto rounded-lg border border-rose-100 bg-white p-2">
                        <template x-if="filteredProjectsForPicker().length === 0">
                            <p class="px-2 py-3 text-center text-sm text-slate-500">Aucune demande ne correspond a la recherche.</p>
                        </template>
                        <template x-for="project in filteredProjectsForPicker()" :key="'pick-' + project.id">
                            <label class="flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 transition hover:bg-rose-50/70">
                                <input type="checkbox"
                                       class="rounded border-slate-300 text-[#E83646] focus:ring-[#E83646]"
                                       :checked="selectedProjectIds.includes(String(project.id))"
                                       @change="toggleProjectId(project.id, $event.target.checked)">
                                <span class="text-sm font-medium text-slate-800" x-text="project.name"></span>
                            </label>
                        </template>
                        </div>
                    </div>
                    <x-input-error :messages="$errors->get('selected_project_ids')" class="mt-2" />
                </div>
            </div>

            <div class="mt-4 rounded-xl border border-rose-100 bg-rose-50/30 p-4">
                <p class="mb-3 rounded-lg border border-rose-100 bg-white px-3 py-2 text-xs text-slate-600">
                    Saisissez le <strong>prix de vente HT (TND)</strong> par brief. Sur la facture imprimée : <strong>une ligne par demande client</strong> (montant = somme des briefs). Le <strong>détail par brief</strong> figure dans l’annexe (impression optionnelle).
                </p>
                <div class="mb-3 flex items-center justify-between gap-3">
                    <h3 class="text-sm font-semibold text-slate-800">{{ $isEditWizard ? 'Briefs (non payes valides ou deja sur cette facture)' : 'Briefs (non payes)' }}</h3>
                    <button type="button"
                            @click="toggleAll()"
                            class="rounded-lg border border-rose-200 bg-white px-3 py-1.5 text-xs font-semibold text-[#E83646] transition hover:bg-rose-50"
                            :disabled="selectedProjectIds.length === 0 || invoiceLineBriefsFiltered().length === 0">
                        <span x-text="allSelected() ? 'Tout deselectionner' : 'Tout selectionner'"></span>
                    </button>
                </div>

                <template x-if="selectedProjectIds.length === 0">
                    <p class="rounded-lg bg-white px-3 py-2 text-sm text-slate-500">Selectionnez au moins une demande client pour afficher les briefs facturables.</p>
                </template>

                <template x-if="selectedProjectIds.length > 0 && invoiceLineBriefs().length === 0">
                    <p class="rounded-lg bg-white px-3 py-2 text-sm text-slate-500">{{ $isEditWizard ? 'Aucun brief disponible pour les demandes selectionnees.' : 'Aucun brief non paye (valide) pour les demandes selectionnees.' }}</p>
                </template>

                <template x-if="invoiceLineBriefs().length > 0">
                    <div class="space-y-3">
                        <div>
                            <label for="invoice_brief_search" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-slate-500">Rechercher un brief</label>
                            <input id="invoice_brief_search"
                                   type="search"
                                   x-model="briefSearchQuery"
                                   placeholder="Titre, statut, demande ou n° de brief..."
                                   autocomplete="off"
                                   class="w-full max-w-md rounded-lg border border-rose-100 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus:border-[#E83646] focus:ring-[#E83646]">
                        </div>
                        <template x-if="invoiceLineBriefsFiltered().length === 0">
                            <p class="rounded-lg border border-slate-100 bg-white px-3 py-2 text-sm text-slate-500">Aucun brief ne correspond a la recherche.</p>
                        </template>
                        <template x-if="invoiceLineBriefsFiltered().length > 0">
                            <div class="overflow-x-auto rounded-lg border border-rose-100 bg-white">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="border-b border-slate-200 bg-rose-50/40 text-left text-slate-600">
                                    <th class="px-3 py-2">Selection</th>
                                    <th class="px-3 py-2">Demande client</th>
                                    <th class="px-3 py-2">Brief</th>
                                    <th class="px-3 py-2">Statut</th>
                                    <th class="px-3 py-2">Coût estimé</th>
                                    <th class="px-3 py-2">Prix Devis</th>
                                    <th class="px-3 py-2">Prix vente HT (TND)</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100">
                                <template x-for="brief in invoiceLineBriefsFiltered()" :key="String(brief.project_id) + '-' + String(brief.id)">
                                    <tr :class="{
                                        'bg-rose-50 transition-colors': isSelected(brief.id) && prices[brief.id] && profitCompareBaseline(brief) > 0 && parseFloat(prices[brief.id]) < profitCompareBaseline(brief),
                                        'bg-emerald-50 transition-colors': isSelected(brief.id) && prices[brief.id] && profitCompareBaseline(brief) > 0 && parseFloat(prices[brief.id]) >= profitCompareBaseline(brief),
                                        'bg-white': !isSelected(brief.id)
                                    }">
                                        <td class="px-3 py-2">
                                            <input type="checkbox"
                                                   name="selected_briefs[]"
                                                   :value="brief.id"
                                                   :checked="isSelected(brief.id)"
                                                   @change="toggleBrief(brief.id, $event.target.checked)"
                                                   class="rounded border-slate-300 text-[#E83646] focus:ring-[#E83646]">
                                        </td>
                                        <td class="px-3 py-2 text-slate-600" x-text="brief.project_name"></td>
                                        <td class="px-3 py-2 font-medium text-slate-800" x-text="brief.title"></td>
                                        <td class="px-3 py-2 text-slate-600" x-text="brief.status"></td>
                                        <td class="px-3 py-2">
                                            <div class="flex items-center gap-2">
                                                <span class="font-semibold text-slate-600" x-text="formatEstimatedDisplay(brief)"></span>
                                                <template x-if="brief.breakdown && brief.breakdown.length > 0">
                                                    <button type="button" 
                                                            @click="activeBrief = brief; modalOpen = true"
                                                            class="text-slate-400 hover:text-[#E83646]" title="Voir le detail du cout">
                                                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                    </button>
                                                </template>
                                            </div>
                                        </td>
                                        <td class="px-3 py-2">
                                            <template x-if="brief.selling_price > 0">
                                                <span class="text-xs font-bold text-slate-500" x-text="formatCurrency(brief.selling_price)"></span>
                                            </template>
                                            <template x-if="!(brief.selling_price > 0)">
                                                <span class="text-xs text-slate-300">-</span>
                                            </template>
                                        </td>
                                        <td class="px-3 py-2">
                                            <div class="flex flex-col gap-1">
                                                <template x-if="brief.is_advertising && brief.suggested_invoice_ht_tnd > 0">
                                                    <p class="max-w-xs text-[10px] leading-tight text-amber-800" x-text="'Coût estimé ' + formatCurrency(brief.estimated_price) + ' × 2 → prix HT ' + formatCurrency(brief.suggested_invoice_ht_tnd) + ' (modifiable)'"></p>
                                                </template>
                                                <div class="flex items-center gap-2">
                                                <input type="number"
                                                       step="0.01"
                                                       min="0"
                                                       :name="`prices[${brief.id}]`"
                                                       x-model="prices[brief.id]"
                                                       :disabled="!isSelected(brief.id)"
                                                       placeholder="0.00"
                                                       class="w-36 rounded-lg border border-rose-100 px-2.5 py-1.5 text-sm focus:border-[#E83646] focus:ring-[#E83646] disabled:cursor-not-allowed disabled:bg-slate-100"
                                                       :class="{
                                                            'border-rose-300 bg-white text-rose-700': isSelected(brief.id) && prices[brief.id] && profitCompareBaseline(brief) > 0 && parseFloat(prices[brief.id]) < profitCompareBaseline(brief),
                                                            'border-emerald-300 bg-white text-emerald-700': isSelected(brief.id) && prices[brief.id] && profitCompareBaseline(brief) > 0 && parseFloat(prices[brief.id]) >= profitCompareBaseline(brief)
                                                       }">
                                                
                                                <!-- Profit/Loss indicator -->
                                                <template x-if="isSelected(brief.id) && prices[brief.id] && profitCompareBaseline(brief) > 0">
                                                    <div>
                                                        <template x-if="parseFloat(prices[brief.id]) < profitCompareBaseline(brief)">
                                                            <span class="text-rose-500" title="Perte par rapport au coût estimé">
                                                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
                                                            </span>
                                                        </template>
                                                        <template x-if="parseFloat(prices[brief.id]) >= profitCompareBaseline(brief)">
                                                            <span class="text-emerald-500" title="Profit par rapport au coût estimé">
                                                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" transform="rotate(180 10 10)"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
                                                            </span>
                                                        </template>
                                                    </div>
                                                </template>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                            </div>
                        </template>
                    </div>
                </template>
                <x-input-error :messages="$errors->get('selected_briefs')" class="mt-2" />
                <x-input-error :messages="$errors->get('items')" class="mt-2" />
            </div>

            <div class="flex items-center gap-2 pt-1">
                <button type="submit" class="rounded-lg bg-[#E83646] px-4 py-2 text-sm font-semibold text-white hover:bg-rose-600">{{ $submitLabel }}</button>
                <a href="{{ $cancelUrl }}" class="rounded-lg border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 hover:bg-slate-50">Annuler</a>
            </div>
        </form>

        <!-- Cost Breakdown Modal -->
        <template x-teleport="body">
            <div x-show="modalOpen" 
                 class="fixed inset-0 z-50 flex items-center justify-center p-4"
                 x-cloak>
                <div @click="modalOpen = false" class="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"></div>
                
                <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl bg-white shadow-2xl"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100">
                    
                    <div class="flex items-center justify-between border-b border-slate-100 bg-slate-50 px-6 py-4">
                        <h3 class="text-lg font-bold text-slate-900">Détail du coût interne</h3>
                        <button @click="modalOpen = false" class="text-slate-400 hover:text-slate-600">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>

                    <div class="p-6">
                        <div class="mb-4">
                            <p class="text-sm font-medium text-slate-500 uppercase tracking-wider">Brief</p>
                            <p class="text-lg font-bold text-slate-900" x-text="activeBrief?.title"></p>
                        </div>

                        <div class="overflow-hidden rounded-xl border border-slate-200">
                            <table class="w-full text-left text-sm">
                                <thead class="bg-slate-50 font-semibold text-slate-700">
                                    <tr>
                                        <th class="px-4 py-3">Employé</th>
                                        <th class="px-4 py-3">Temps passé</th>
                                        <th class="px-4 py-3">Taux Horaire</th>
                                        <th class="px-4 py-3 text-right">Sous-total</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100">
                                    <template x-for="item in activeBrief?.breakdown" :key="item.line_key || item.name">
                                        <tr>
                                            <td class="px-4 py-3 font-medium text-slate-900" x-text="item.name"></td>
                                            <td class="px-4 py-3 text-slate-600" x-text="formatTime(item.total_seconds)"></td>
                                            <td class="px-4 py-3 text-slate-500 text-xs" x-text="formatCurrency(item.hourly_rate) + '/h'"></td>
                                            <td class="px-4 py-3 text-right font-semibold text-slate-900" x-text="formatBreakdownSubtotal(item)"></td>
                                        </tr>
                                    </template>
                                </tbody>
                                <tfoot class="bg-rose-50/50 font-bold border-t border-rose-100">
                                    <tr>
                                        <td colspan="3" class="px-4 py-3 text-slate-700 text-right uppercase tracking-wider text-xs">Coût Interne Total</td>
                                        <td class="px-4 py-3 text-right text-[#E83646]" x-text="formatEstimatedDisplay(activeBrief)"></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="bg-slate-50 px-6 py-4 flex justify-end">
                        <button @click="modalOpen = false" class="rounded-lg bg-white border border-slate-200 px-4 py-2 text-sm font-bold text-slate-600 hover:bg-slate-100">Fermer</button>
                    </div>
                </div>
            </div>
        </template>
    </div>