@extends('layouts.app')
@section('title', $submission->title)

@push('head')
<style>
    .explain-doc { color: rgb(51 65 85); font-size: 14px; line-height: 1.7; }
    .dark .explain-doc { color: rgb(203 213 225); }

    .explain-doc > * + * { margin-top: 0.85rem; }

    .explain-doc h1, .explain-doc h2, .explain-doc h3, .explain-doc h4 {
        color: rgb(15 23 42); font-weight: 600; line-height: 1.3;
        margin-top: 1.75rem; margin-bottom: 0.5rem;
    }
    .dark .explain-doc h1, .dark .explain-doc h2, .dark .explain-doc h3, .dark .explain-doc h4 { color: rgb(241 245 249); }
    .explain-doc h1 { font-size: 1.375rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgb(226 232 240); }
    .dark .explain-doc h1 { border-color: rgb(51 65 85); }
    .explain-doc h2 { font-size: 1.125rem; }
    .explain-doc h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(71 85 105); }
    .dark .explain-doc h3 { color: rgb(148 163 184); }
    .explain-doc h4 { font-size: 0.9375rem; color: rgb(71 85 105); }
    .dark .explain-doc h4 { color: rgb(148 163 184); }
    .explain-doc > h1:first-child, .explain-doc > h2:first-child,
    .explain-doc > h3:first-child, .explain-doc > h4:first-child { margin-top: 0; }

    .explain-doc p { text-align: justify; hyphens: auto; }

    .explain-doc strong, .explain-doc b { color: rgb(15 23 42); font-weight: 600; }
    .dark .explain-doc strong, .dark .explain-doc b { color: rgb(241 245 249); }

    .explain-doc a { color: rgb(79 70 229); text-decoration: underline; text-underline-offset: 2px; }
    .dark .explain-doc a { color: rgb(165 180 252); }
    .explain-doc a:hover { color: rgb(67 56 202); }
    .dark .explain-doc a:hover { color: rgb(199 210 254); }

    .explain-doc ul, .explain-doc ol { padding-inline-start: 1.5rem; margin: 0.5rem 0; }
    .explain-doc ul { list-style: disc; }
    .explain-doc ol { list-style: decimal; }
    .explain-doc li { margin: 0.25rem 0; }
    .explain-doc li::marker { color: rgb(148 163 184); }

    .explain-doc blockquote {
        border-inline-start: 3px solid rgb(203 213 225);
        padding: 0.25rem 0 0.25rem 1rem; margin: 0.75rem 0;
        color: rgb(71 85 105); font-style: italic;
    }
    .dark .explain-doc blockquote { border-color: rgb(51 65 85); color: rgb(148 163 184); }

    .explain-doc code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.85em;
        background: rgb(241 245 249); color: rgb(15 23 42);
        padding: 0.1rem 0.35rem; border-radius: 0.25rem;
    }
    .dark .explain-doc code { background: rgb(30 41 59); color: rgb(241 245 249); }
    .explain-doc pre {
        background: rgb(15 23 42); color: rgb(241 245 249);
        padding: 0.75rem 1rem; border-radius: 0.5rem; overflow-x: auto;
        font-size: 0.8125rem; line-height: 1.55;
    }
    .explain-doc pre code { background: transparent; color: inherit; padding: 0; }

    .explain-doc hr { border: 0; border-top: 1px solid rgb(226 232 240); margin: 1.25rem 0; }
    .dark .explain-doc hr { border-color: rgb(51 65 85); }

    .explain-doc table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; margin: 0.75rem 0; }
    .explain-doc th, .explain-doc td { border: 1px solid rgb(226 232 240); padding: 0.5rem 0.625rem; text-align: start; vertical-align: top; }
    .dark .explain-doc th, .dark .explain-doc td { border-color: rgb(51 65 85); }
    .explain-doc th { background: rgb(248 250 252); font-weight: 600; color: rgb(15 23 42); }
    .dark .explain-doc th { background: rgb(30 41 59); color: rgb(241 245 249); }
    .explain-doc tbody tr:nth-child(even) { background: rgb(248 250 252 / 0.6); }
    .dark .explain-doc tbody tr:nth-child(even) { background: rgb(30 41 59 / 0.4); }

    .explain-doc img { max-width: 100%; height: auto; border-radius: 0.5rem; }
</style>
@endpush

@section('content')
@php
    // Allow ?analysis=ID to view any past analysis for this submission.
    // Falls back to the most recent run.
    $requestedAnalysisId = request()->integer('analysis');
    $latest = $requestedAnalysisId
        ? ($submission->analyses->firstWhere('id', $requestedAnalysisId) ?? $submission->analyses->first())
        : $submission->analyses->first();
    $isViewingLatest = ! $latest || $latest->id === $submission->analyses->first()?->id;
    $grouped = collect($types)->groupBy(fn ($t) => $t['group'] ?? 'general', true);

    // Build a status timeline
    $timeline = collect([
        ['key' => 'received',  'label' => __('Received'),       'icon' => 'inbox',    'at' => $submission->created_at],
        ['key' => 'seen',      'label' => __('Seen'),           'icon' => 'eye',      'at' => $submission->seen_at],
        ['key' => 'analysing', 'label' => __('Analysing'),      'icon' => 'sparkles', 'at' => $latest?->started_at],
        ['key' => 'ready',     'label' => __('Analysis ready'), 'icon' => 'check',    'at' => $latest?->finished_at && in_array($latest->status, [\App\Models\FileAnalysis::STATUS_DONE, \App\Models\FileAnalysis::STATUS_AWAITING_REVISION], true) ? $latest->finished_at : null],
        ['key' => 'sent',      'label' => __('Sent to client'), 'icon' => 'send',     'at' => $submission->sent_at],
        ['key' => 'opened',    'label' => __('Opened by client'),'icon' => 'open',    'at' => $submission->opened_at],
        ['key' => 'evaluated', 'label' => __('Evaluated'),      'icon' => 'star',     'at' => $submission->evaluated_at],
    ]);

    $extIconColor = match (strtolower($submission->extension ?? '')) {
        'pdf'         => 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300',
        'xlsx', 'xls' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300',
        'csv', 'tsv'  => 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
        'doc', 'docx' => 'bg-sky-100 text-sky-700 dark:bg-sky-900/30 dark:text-sky-300',
        'json'        => 'bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-300',
        default       => 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
    };

    $isRunning = $latest && in_array($latest->status, [\App\Models\FileAnalysis::STATUS_PENDING, \App\Models\FileAnalysis::STATUS_RUNNING], true);
    // "Request only" submissions arrive with no file attached — the uploader
    // asked the firm to source the data themselves. The admin must attach a
    // file (or import from an integration) before any analysis can run.
    $isFileless = empty($submission->path);
    $uploaderIntegrations = $uploaderIntegrations ?? collect();

    // Pre-select the analysis type the client requested when they uploaded:
    //  - 'forecast' / 'valuation' submissions default to that high-level type
    //  - 'analysis' submissions default to the first requested sub-type, if any
    $initialAnalysisType = match ($submission->analysis_type) {
        \App\Models\FileSubmission::TYPE_FORECAST  => 'forecast',
        \App\Models\FileSubmission::TYPE_VALUATION => 'valuation',
        default => (is_array($submission->requested_analysis_types ?? null) && count($submission->requested_analysis_types))
            ? (string) $submission->requested_analysis_types[0]
            : '',
    };
@endphp

@if($isRunning)
    <meta http-equiv="refresh" content="6">
@endif

{{-- HERO --}}
<div class="card mb-4 sm:mb-6 lg:mb-8 overflow-hidden relative">
    <div class="relative p-4 sm:p-6 flex flex-col gap-4 sm:gap-5">
        <div class="flex items-start justify-between gap-3 flex-wrap">
            <div class="flex items-start gap-3 sm:gap-4 min-w-0 flex-1">
                <div class="shrink-0 w-12 h-12 sm:w-14 sm:h-14 lg:w-16 lg:h-16 rounded-2xl flex items-center justify-center text-base sm:text-lg font-bold uppercase shadow-sm ring-1 ring-black/5 {{ $extIconColor }}">
                    {{ strtoupper($submission->extension ?? '?') }}
                </div>
                <div class="min-w-0 flex-1">
                    <a href="{{ route('tenant.submissions.index') }}" class="text-xs text-slate-500 hover:text-brand-600 inline-flex items-center gap-1 transition">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                        {{ __('Inbox') }}
                    </a>
                    <h1 class="text-lg sm:text-2xl lg:text-3xl font-bold mt-1 leading-tight break-words">{{ $submission->title }}</h1>
                    <p class="text-[11px] sm:text-xs lg:text-sm text-slate-500 font-mono mt-0.5 break-all sm:truncate">{{ $submission->original_name }} · {{ $submission->humanSize() }}</p>
                </div>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium {{ $submission->statusBadgeClass() }}">
                    @if($isRunning)
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-amber-500"></span>
                        </span>
                    @endif
                    {{ $submission->statusLabel() }}
                </span>
            </div>
        </div>

        {{-- Quick action bar --}}
        <div class="flex items-center gap-1.5 sm:gap-2 flex-wrap">
            @unless($isFileless)
                <a href="{{ route('tenant.submissions.download', $submission) }}" class="btn-secondary text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg>
                    {{ __('Download') }}
                </a>

                <button type="button" x-data x-on:click="$dispatch('open-analysis')" class="btn-primary text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <x-icon name="sparkles" class="w-4 h-4"/>
                    {{ __('Run analysis') }}
                </button>
            @else
                <a href="#attach-source" class="btn-primary text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                    {{ __('Attach source data') }}
                </a>
            @endunless

            @if($isRunning)
                <button type="button" x-data x-on:click="$dispatch('open-abort')"
                        class="btn-secondary !border-rose-300 !text-rose-600 hover:!bg-rose-50 dark:hover:!bg-rose-900/20 text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m5-9a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14z"/></svg>
                    {{ __('Abort analysis') }}
                </button>
            @endif

            @if($latest && $latest->status === \App\Models\FileAnalysis::STATUS_AWAITING_REVISION)
                <a href="{{ route('tenant.analyses.review', $latest) }}"
                   class="btn-primary !bg-indigo-600 hover:!bg-indigo-700 text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                    {{ __('Review &amp; send') }}
                </a>
            @endif

            @if($latest && in_array($latest->status, [\App\Models\FileAnalysis::STATUS_DONE, \App\Models\FileAnalysis::STATUS_AWAITING_REVISION], true))
                <a href="{{ route('tenant.analyses.compare', $latest) }}"
                   class="btn-secondary text-xs sm:text-sm inline-flex items-center gap-1.5">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3v18h18M7 14l4-4 4 4 5-7"/></svg>
                    {{ __('Compare') }}
                </a>
            @endif

            <form method="POST" action="{{ route('tenant.submissions.duplicate', $submission) }}" class="inline">
                @csrf
                <button class="btn-secondary text-xs sm:text-sm inline-flex items-center gap-1.5" title="{{ __('Duplicate this analysis with the same settings') }}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16h8V8H8v8zM5 12V5a2 2 0 012-2h7"/></svg>
                    {{ __('Duplicate') }}
                </button>
            </form>

            @if($submission->client_id)
                <a href="{{ route('tenant.clients.show', $submission->client_id) }}"
                   class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 hover:bg-slate-200 dark:hover:bg-slate-700 transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                    {{ optional($submission->client)->name ?: __('Client') }}
                </a>
            @endif

            @if($latest && $latest->status === \App\Models\FileAnalysis::STATUS_DONE
                && $submission->status === \App\Models\FileSubmission::STATUS_READY)
                <form method="POST" action="{{ route('tenant.submissions.send', $submission) }}">
                    @csrf
                    <button class="btn-primary !bg-emerald-600 hover:!bg-emerald-700 text-xs sm:text-sm inline-flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                        {{ __('Send to client') }}
                    </button>
                </form>
            @endif

            @if($submission->evaluation)
                <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs
                             {{ $submission->evaluation === 'good' ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-200'
                              : ($submission->evaluation === 'bad' ? 'bg-rose-100 text-rose-800 dark:bg-rose-900/30 dark:text-rose-200'
                              : 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-200') }}">
                    @if($submission->evaluation === 'good') 👍 @elseif($submission->evaluation === 'bad') 👎 @else ✏️ @endif
                    {{ ucfirst(str_replace('_',' ', $submission->evaluation)) }}
                </span>
            @endif
        </div>

        {{-- Timeline --}}
        <div class="-mx-1 px-1 overflow-x-auto">
            <ol class="flex items-center gap-1 min-w-max">
                @foreach($timeline as $i => $step)
                    @php
                        $done = (bool) $step['at'];
                        $isLast = $i === $timeline->count() - 1;
                    @endphp
                    <li class="flex items-center">
                        <div class="flex flex-col items-center">
                            <div class="w-7 h-7 rounded-full flex items-center justify-center text-[11px] font-bold
                                        {{ $done ? 'bg-emerald-500 text-white shadow-sm shadow-emerald-500/40' : 'bg-slate-200 text-slate-500 dark:bg-slate-800 dark:text-slate-500' }}">
                                @if($done)
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                @else
                                    {{ $i + 1 }}
                                @endif
                            </div>
                            <div class="mt-1 text-[10px] sm:text-xs text-slate-600 dark:text-slate-300 font-medium whitespace-nowrap">{{ $step['label'] }}</div>
                            <div class="text-[10px] text-slate-400 whitespace-nowrap">
                                {{ $step['at'] ? \Illuminate\Support\Carbon::parse($step['at'])->diffForHumans() : '—' }}
                            </div>
                        </div>
                        @unless($isLast)
                            <div class="w-6 sm:w-12 h-0.5 mt-[-22px] mx-1 {{ $done ? 'bg-emerald-500' : 'bg-slate-200 dark:bg-slate-800' }}"></div>
                        @endunless
                    </li>
                @endforeach
            </ol>
        </div>
    </div>
</div>

@php
    $kpiCatalogue = [
        __('Profitability') => ['Gross margin', 'Operating margin', 'Net margin', 'EBITDA', 'EBITDA margin', 'ROA', 'ROE', 'ROIC'],
        __('Liquidity & solvency') => ['Current ratio', 'Quick ratio', 'Cash ratio', 'Working capital', 'Debt-to-equity', 'Debt-to-assets', 'Interest coverage', 'Gearing'],
        __('Efficiency & activity') => ['DSO', 'DPO', 'DIO', 'Cash conversion cycle', 'Asset turnover', 'Inventory turnover'],
        __('Cash-flow analysis') => ['Operating cash flow', 'Free cash flow', 'FCF margin', 'Cash conversion ratio'],
        __('Growth & valuation') => ['Revenue growth', 'CAGR', 'Net income growth', 'EBITDA growth'],
        __('Risk & default models') => ['Altman Z-score', 'Beneish M-score', 'Piotroski F-score'],
    ];
    $allKpis = collect($kpiCatalogue)->flatten()->values()->all();
    $typeLabels = array_merge(
        collect($types)->mapWithKeys(fn ($t, $k) => [$k => __($t['label'])])->all(),
        [
            'forecast'  => __('Financial forecast'),
            'valuation' => __('Enterprise valuation'),
        ],
    );
@endphp
{{-- ANALYSE MODAL — 2-step wizard --}}
@php
    $forwardItems = [
        'forecast'  => ['label' => __('Financial forecast'),    'description' => __('Multi-year P&L, cash and KPIs with scenario branches.')],
        'valuation' => ['label' => __('Enterprise valuation'),  'description' => __('Triangulated value (DCF, multiples, comparables).')],
    ];
    $typeSections = [
        ['key' => 'forward', 'title' => __('Forward-looking'), 'items' => $forwardItems],
    ];
    foreach ($grouped as $groupKey => $items) {
        $typeSections[] = [
            'key'   => $groupKey,
            'title' => __($groups[$groupKey] ?? $groupKey),
            'items' => collect($items)->map(fn ($t) => ['label' => __($t['label']), 'description' => __($t['description'] ?? '')])->all(),
        ];
    }
    $languages = ['en' => 'EN', 'fr' => 'FR', 'nl' => 'NL', 'de' => 'DE', 'ar' => 'AR', 'es' => 'ES'];
@endphp
<div x-data="{
        open:false,
        submitting:false,
        step: 1,
        types: @js(array_values(array_filter([$initialAnalysisType]))),
        kpis: [],
        maxKpisToLlm: {{ (int) config('finance_analyses.max_kpis_to_llm', 8) }},
        instructions: '',
        language: '{{ app()->getLocale() }}',
        allKpis: @js($allKpis),
        typeLabels: @js($typeLabels),
        descs: @js(array_merge(
            collect($types)->mapWithKeys(fn($t,$k)=>[$k=>__($t['description'])])->all(),
            [
                'forecast'  => __('Multi-year P&L, cash and KPIs with scenario branches.'),
                'valuation' => __('Triangulated value (DCF, multiples, comparables).'),
            ]
        )),
        favs: @js([
            'analysis_types' => $tenantFavorites['analysis_types'] ?? [],
            'kpis'           => $tenantFavorites['kpis']           ?? [],
        ]),
        q1: '',
        q2: '',
        favBusy: {},
        toggleType(t){ const i=this.types.indexOf(t); if(i===-1) this.types.push(t); else this.types.splice(i,1); },
        removeType(t){ const i=this.types.indexOf(t); if(i!==-1) this.types.splice(i,1); },
        toggleKpi(k){ const i=this.kpis.indexOf(k); if(i===-1) this.kpis.push(k); else this.kpis.splice(i,1); },
        removeKpi(k){ const i=this.kpis.indexOf(k); if(i!==-1) this.kpis.splice(i,1); },
        selectAllKpis(){ this.kpis = [...this.allKpis]; },
        clearKpis(){ this.kpis = []; },
        isFav(kind, key){ return (this.favs[kind] || []).includes(key); },
        async toggleFavorite(kind, key){
            const busyKey = kind + ':' + key;
            if (this.favBusy[busyKey]) return;
            this.favBusy[busyKey] = true;
            // Optimistic update — flip locally first so the star reacts instantly.
            const list = [...(this.favs[kind] || [])];
            const idx = list.indexOf(key);
            if (idx === -1) list.push(key); else list.splice(idx, 1);
            this.favs = { ...this.favs, [kind]: list };
            try {
                const token = document.querySelector('meta[name=csrf-token]')?.getAttribute('content') || '';
                const res = await fetch(@js(route('tenant.favorites.toggle')), {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ kind, key }),
                });
                if (res.ok) {
                    const data = await res.json();
                    if (data && data.favorites) this.favs = data.favorites;
                } else {
                    // Roll back on failure.
                    const list2 = [...(this.favs[kind] || [])];
                    const idx2 = list2.indexOf(key);
                    if (idx2 === -1) list2.push(key); else list2.splice(idx2, 1);
                    this.favs = { ...this.favs, [kind]: list2 };
                }
            } catch (e) {
                // Network error — silent rollback (already flipped optimistically).
            } finally {
                this.favBusy[busyKey] = false;
            }
        },
        matchesQ1(key){
            const q = (this.q1 || '').trim().toLowerCase();
            if (!q) return true;
            const label = (this.typeLabels[key] || '').toLowerCase();
            const desc  = (this.descs[key] || '').toLowerCase();
            return label.includes(q) || desc.includes(q) || key.toLowerCase().includes(q);
        },
        matchesQ2(kpi){
            const q = (this.q2 || '').trim().toLowerCase();
            if (!q) return true;
            return (kpi || '').toLowerCase().includes(q);
        },
        dragIndex: null,
        moveKpi(from, to){
            if (from === null || from === undefined) return;
            if (to < 0 || to >= this.kpis.length) return;
            if (from === to) return;
            const next = [...this.kpis];
            const [item] = next.splice(from, 1);
            next.splice(to, 0, item);
            this.kpis = next;
        },
        get canContinue(){ return this.types.length > 0; },
        get startLabel(){
            if (this.types.length <= 1) return @js(__('Start analysis'));
            return @js(__('Start :n analyses')).replace(':n', this.types.length);
        }
     }" x-on:open-analysis.window="
        open = true; step = 1;
        if ($event.detail) {
            if (Array.isArray($event.detail.types)) this.types = [...$event.detail.types];
            else if ($event.detail.type) this.types = [$event.detail.type];
            if (Array.isArray($event.detail.kpis)) this.kpis = [...$event.detail.kpis];
            if (typeof $event.detail.instructions === 'string') this.instructions = $event.detail.instructions;
            if ($event.detail.language) this.language = $event.detail.language;
        }
     ">
    <div x-show="open" x-cloak x-transition.opacity x-on:keydown.escape.window="open = false"
         class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/60 backdrop-blur-sm"
         style="display:none">
        <div class="card w-[min(100%,40rem)] rounded-2xl overflow-hidden flex flex-col max-h-[90vh] shadow-2xl"
             x-on:click.outside="open = false">
            <form method="POST" action="{{ route('tenant.submissions.analyse', $submission) }}" class="flex flex-col min-h-0"
                  x-on:submit.prevent="
                      if (submitting) return;
                      submitting = true;
                      const form = $event.target;
                      const fd = new FormData(form);
                      try {
                          fetch(form.action, {
                              method: 'POST', body: fd, credentials: 'same-origin',
                              headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json, text/html' },
                              keepalive: true,
                          }).catch(() => {});
                      } catch (e) {}
                      open = false;
                      setTimeout(() => { window.location.reload(); }, 600);
                  ">
                @csrf
                <input type="hidden" name="requested_kpis" :value="kpis.join(', ')">
                <input type="hidden" name="language" :value="language">
                <template x-for="t in types" :key="t">
                    <input type="hidden" name="analysis_types[]" :value="t">
                </template>

                {{-- ─── HEADER ─────────────────────────────────────────────── --}}
                <div class="px-5 py-3.5 border-b border-slate-200/70 dark:border-slate-800 flex items-center gap-3">
                    <div class="w-9 h-9 rounded-xl bg-brand-100 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300 flex items-center justify-center shrink-0">
                        <x-icon name="sparkles" class="w-4 h-4"/>
                    </div>
                    <div class="min-w-0 flex-1">
                        <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100 leading-tight">{{ __('Run analysis') }}</h3>
                        <p class="text-[11px] text-slate-500 truncate">{{ $submission->original_name ?? $submission->title }}</p>
                    </div>
                    {{-- step indicator --}}
                    <div class="hidden sm:flex items-center gap-1.5 mr-1">
                        <template x-for="i in [1,2]" :key="i">
                            <div class="flex items-center gap-1.5">
                                <div :class="step === i ? 'bg-brand-600 text-white' : (step > i ? 'bg-emerald-500 text-white' : 'bg-slate-200 dark:bg-slate-800 text-slate-500')"
                                     class="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold transition">
                                    <template x-if="step > i">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                    </template>
                                    <template x-if="step <= i"><span x-text="i"></span></template>
                                </div>
                                <template x-if="i === 1">
                                    <div :class="step === 1 ? 'h-px w-6 bg-slate-300 dark:bg-slate-700' : 'h-px w-6 bg-emerald-400'"></div>
                                </template>
                            </div>
                        </template>
                    </div>
                    <button type="button" x-on:click="open = false" class="text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 p-1 -mr-1" aria-label="Close">
                        <x-icon name="x" class="w-5 h-5"/>
                    </button>
                </div>

                {{-- ─── STEP 1 — pick analysis type(s) ─────────────────────── --}}
                <div x-show="step === 1" class="px-5 py-4 space-y-4 overflow-y-auto">
                    <div>
                        <h4 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ __('What kind of analysis do you want to run?') }}</h4>
                        <p class="text-[11px] text-slate-500 mt-0.5">{{ __('Pick one or several. Each runs independently and is billed separately.') }}</p>
                    </div>

                    {{-- Search input — filters cards across all sections in real time --}}
                    <div class="relative">
                        <svg class="w-3.5 h-3.5 text-slate-400 absolute start-2.5 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
                        <input type="text" x-model="q1"
                               placeholder="{{ __('Search analyses…') }}"
                               class="form-input text-xs w-full ps-8 pe-7 py-1.5">
                        <button type="button" x-show="q1.length" x-cloak x-on:click="q1 = ''"
                                class="absolute end-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200" aria-label="{{ __('Clear') }}">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                        </button>
                    </div>

                    {{-- ★ Favorites pinned at the top — only when there's at least one fav and no active search --}}
                    <div x-show="!q1.trim() && favs.analysis_types.length" x-cloak>
                        <div class="text-[10px] font-semibold uppercase tracking-wider text-amber-500 mb-2 flex items-center gap-1">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                            {{ __('Favorites') }}
                            <span class="text-amber-400/70 font-normal" x-text="'(' + favs.analysis_types.length + ')'"></span>
                        </div>
                        <div class="grid sm:grid-cols-2 gap-2">
                            <template x-for="favKey in favs.analysis_types" :key="'fav-type-'+favKey">
                                <button type="button" x-on:click="toggleType(favKey)"
                                        :class="types.includes(favKey)
                                            ? 'border-brand-500 bg-brand-50/70 dark:bg-brand-900/20 ring-2 ring-brand-500/15'
                                            : 'border-slate-200 dark:border-slate-800 hover:border-brand-300 dark:hover:border-brand-700 hover:bg-slate-50 dark:hover:bg-slate-900/40'"
                                        class="group relative text-start p-3 rounded-xl border transition flex flex-col gap-1 min-h-[72px]">
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="text-[12px] font-semibold text-slate-900 dark:text-slate-100 leading-snug" x-text="typeLabels[favKey] || favKey"></div>
                                        <div class="flex items-center gap-1 shrink-0">
                                            <span x-on:click.stop="toggleFavorite('analysis_types', favKey)"
                                                  class="p-0.5 -m-0.5 cursor-pointer text-amber-500 hover:text-amber-600" :aria-label="@js(__('Unfavorite'))" role="button" tabindex="0"
                                                  x-on:keydown.enter.prevent.stop="toggleFavorite('analysis_types', favKey)">
                                                <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                                            </span>
                                            <div :class="types.includes(favKey) ? 'bg-brand-600 border-brand-600' : 'border-slate-300 dark:border-slate-600 group-hover:border-brand-400'"
                                                 class="w-4 h-4 rounded-full border-2 mt-0.5 flex items-center justify-center transition">
                                                <svg x-show="types.includes(favKey)" x-cloak class="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" d="M5 13l4 4L19 7"/></svg>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-[10.5px] text-slate-500 dark:text-slate-400 leading-snug" x-text="descs[favKey] || ''"></div>
                                </button>
                            </template>
                        </div>
                    </div>

                    <div class="space-y-4">
                        @foreach($typeSections as $section)
                            <div x-show="@js(array_keys($section['items'])).some(k => matchesQ1(k))">
                                <div class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 mb-2">{{ $section['title'] }}</div>
                                <div class="grid sm:grid-cols-2 gap-2">
                                    @foreach($section['items'] as $key => $item)
                                        <button type="button" x-on:click="toggleType(@js($key))"
                                                x-show="matchesQ1(@js($key))"
                                                :class="types.includes(@js($key))
                                                    ? 'border-brand-500 bg-brand-50/70 dark:bg-brand-900/20 ring-2 ring-brand-500/15'
                                                    : 'border-slate-200 dark:border-slate-800 hover:border-brand-300 dark:hover:border-brand-700 hover:bg-slate-50 dark:hover:bg-slate-900/40'"
                                                class="group relative text-start p-3 rounded-xl border transition flex flex-col gap-1 min-h-[72px]">
                                            <div class="flex items-start justify-between gap-2">
                                                <div class="text-[12px] font-semibold text-slate-900 dark:text-slate-100 leading-snug">{{ $item['label'] }}</div>
                                                <div class="flex items-center gap-1 shrink-0">
                                                    <span x-on:click.stop="toggleFavorite('analysis_types', @js($key))"
                                                          :class="isFav('analysis_types', @js($key)) ? 'text-amber-500 hover:text-amber-600' : 'text-slate-300 dark:text-slate-600 hover:text-amber-500'"
                                                          class="p-0.5 -m-0.5 cursor-pointer transition" :aria-label="isFav('analysis_types', @js($key)) ? @js(__('Unfavorite')) : @js(__('Favorite'))" role="button" tabindex="0"
                                                          x-on:keydown.enter.prevent.stop="toggleFavorite('analysis_types', @js($key))">
                                                        <svg class="w-3.5 h-3.5" :fill="isFav('analysis_types', @js($key)) ? 'currentColor' : 'none'" stroke="currentColor" viewBox="0 0 20 20" stroke-width="1.5"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                                                    </span>
                                                    <div :class="types.includes(@js($key)) ? 'bg-brand-600 border-brand-600' : 'border-slate-300 dark:border-slate-600 group-hover:border-brand-400'"
                                                         class="w-4 h-4 rounded-full border-2 mt-0.5 flex items-center justify-center transition">
                                                        <svg x-show="types.includes(@js($key))" x-cloak class="w-2.5 h-2.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" d="M5 13l4 4L19 7"/></svg>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-[10.5px] text-slate-500 dark:text-slate-400 leading-snug">{{ $item['description'] }}</div>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Empty-state for an active search with no matches --}}
                    <div x-show="q1.trim() && @js(collect($typeSections)->flatMap(fn ($s) => array_keys($s['items']))->values()->all()).every(k => !matchesQ1(k))" x-cloak
                         class="text-center py-6 text-[11px] text-slate-400">
                        {{ __('No analysis matches your search.') }}
                    </div>
                </div>

                {{-- ─── STEP 2 — refine & launch ───────────────────────────── --}}
                <div x-show="step === 2" x-cloak class="px-5 py-4 space-y-4 overflow-y-auto">

                    {{-- Selected types recap (clickable to go back) --}}
                    <button type="button" x-on:click="step = 1"
                            class="w-full text-start p-3 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-300 dark:hover:border-brand-700 transition flex items-start gap-2.5">
                        <div class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 flex items-center justify-center shrink-0">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-[10px] uppercase tracking-wider text-slate-400">{{ __('Selected') }}</div>
                            <div class="text-xs font-medium text-slate-700 dark:text-slate-200 mt-0.5 flex flex-wrap gap-1">
                                <template x-for="t in types" :key="t">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-200 text-[11px]" x-text="typeLabels[t] || t"></span>
                                </template>
                            </div>
                        </div>
                        <span class="text-[11px] text-slate-400 shrink-0 self-center">{{ __('Edit') }}</span>
                    </button>

                    {{-- Language --}}
                    <div>
                        <label class="block text-xs font-medium text-slate-600 dark:text-slate-300 mb-1.5">{{ __('Report language') }}</label>
                        <div class="grid grid-cols-6 gap-1 p-1 bg-slate-100 dark:bg-slate-900/60 rounded-lg">
                            @foreach($languages as $code => $label)
                                <button type="button" x-on:click="language = @js($code)"
                                        :class="language === @js($code) ? 'bg-white dark:bg-slate-700 text-slate-900 dark:text-white shadow-sm' : 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'"
                                        class="text-[11px] font-semibold py-1.5 rounded-md transition">{{ $label }}</button>
                            @endforeach
                        </div>
                    </div>

                    {{-- KPIs (collapsed by default unless already chosen) --}}
                    <details class="group" :open="kpis.length > 0">
                        <summary class="cursor-pointer list-none flex items-center justify-between p-3 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-300 dark:hover:border-brand-700 transition">
                            <div class="flex items-center gap-2.5 min-w-0">
                                <div class="w-8 h-8 rounded-lg bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 flex items-center justify-center shrink-0">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13l4-4 4 4 4-4 4 4M3 17l4-4 4 4 4-4 4 4"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <div class="text-xs font-semibold text-slate-900 dark:text-slate-100 flex items-center gap-1.5">
                                        {{ __('Specific KPIs') }}
                                        <span x-show="kpis.length" x-cloak class="px-1.5 py-0.5 rounded-full text-[10px] bg-violet-100 dark:bg-violet-900/40 text-violet-700 dark:text-violet-200" x-text="kpis.length + ' ' + @js(__('selected'))"></span>
                                        <span x-show="!kpis.length" class="text-[10px] text-slate-400 font-normal">({{ __('optional — auto-picked if empty') }})</span>
                                    </div>
                                </div>
                            </div>
                            <svg class="w-4 h-4 transition group-open:rotate-180 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <div class="mt-2 space-y-2.5 px-1">
                            <div class="flex items-center justify-between gap-2">
                                <div x-show="kpis.length > maxKpisToLlm" x-cloak
                                     class="flex items-center gap-1.5 text-[10px] text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/40 rounded-md px-2 py-1">
                                    <svg class="w-3 h-3 shrink-0" 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.01M12 2a10 10 0 100 20 10 10 0 000-20z"/></svg>
                                    <span x-text="@js(__('Only the top :n by priority are processed to keep cost flat.')).replace(':n', maxKpisToLlm)"></span>
                                </div>
                                <div class="flex items-center gap-2 ms-auto">
                                    <button type="button" x-on:click="selectAllKpis()" x-bind:disabled="kpis.length === allKpis.length"
                                            class="text-[10px] font-medium text-brand-600 hover:underline disabled:text-slate-400 disabled:no-underline disabled:cursor-not-allowed">{{ __('Select all') }}</button>
                                    <span class="text-slate-300 dark:text-slate-700">·</span>
                                    <button type="button" x-on:click="clearKpis()" x-bind:disabled="!kpis.length"
                                            class="text-[10px] font-medium text-slate-500 hover:text-rose-600 hover:underline disabled:text-slate-400 disabled:no-underline disabled:cursor-not-allowed">{{ __('Clear') }}</button>
                                </div>
                            </div>
                            <div x-show="kpis.length" x-cloak class="space-y-1">
                                <p class="text-[10px] text-slate-400 leading-snug">{{ __('Drag (or use the arrows) to rank by priority — top = highest priority.') }}</p>
                                <ul class="space-y-1" x-on:dragover.prevent x-on:drop.prevent>
                                    <template x-for="(k, idx) in kpis" :key="k">
                                        <li draggable="true"
                                            x-on:dragstart="dragIndex = idx; $event.dataTransfer.effectAllowed = 'move'; $event.dataTransfer.setData('text/plain', String(idx))"
                                            x-on:dragend="dragIndex = null"
                                            x-on:dragover.prevent="$event.dataTransfer.dropEffect = 'move'"
                                            x-on:drop.prevent="moveKpi(dragIndex, idx); dragIndex = null"
                                            :class="dragIndex === idx ? 'opacity-40 ring-1 ring-brand-400' : 'hover:border-brand-300 dark:hover:border-brand-700'"
                                            class="flex items-center gap-1.5 ps-1.5 pe-1 py-1 rounded-lg bg-white dark:bg-slate-900/40 border border-slate-200 dark:border-slate-800 transition cursor-move select-none">
                                            <span class="w-5 h-5 rounded-full bg-brand-600 text-white text-[10px] font-bold flex items-center justify-center shrink-0 tabular-nums" x-text="idx + 1"></span>
                                            <svg class="w-3 h-3 text-slate-300 dark:text-slate-600 hidden sm:block shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                                                <circle cx="7" cy="4" r="1.5"/><circle cx="13" cy="4" r="1.5"/>
                                                <circle cx="7" cy="10" r="1.5"/><circle cx="13" cy="10" r="1.5"/>
                                                <circle cx="7" cy="16" r="1.5"/><circle cx="13" cy="16" r="1.5"/>
                                            </svg>
                                            <span class="flex-1 text-[11px] text-slate-700 dark:text-slate-200 truncate" x-text="k"></span>
                                            <div class="flex sm:hidden items-center gap-0.5 shrink-0">
                                                <button type="button" x-on:click="moveKpi(idx, idx - 1)" :disabled="idx === 0"
                                                        class="p-1 text-slate-400 hover:text-brand-600 disabled:opacity-30" aria-label="{{ __('Move up') }}">
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 15l7-7 7 7"/></svg>
                                                </button>
                                                <button type="button" x-on:click="moveKpi(idx, idx + 1)" :disabled="idx === kpis.length - 1"
                                                        class="p-1 text-slate-400 hover:text-brand-600 disabled:opacity-30" aria-label="{{ __('Move down') }}">
                                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
                                                </button>
                                            </div>
                                            <button type="button" x-on:click="removeKpi(k)" class="p-1 text-slate-400 hover:text-rose-600 shrink-0" aria-label="{{ __('Remove') }}">
                                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                                            </button>
                                        </li>
                                    </template>
                                </ul>
                            </div>
                            {{-- Search input — filters chips across all categories in real time --}}
                            <div class="relative">
                                <svg class="w-3.5 h-3.5 text-slate-400 absolute start-2.5 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
                                <input type="text" x-model="q2"
                                       placeholder="{{ __('Search KPIs…') }}"
                                       class="form-input text-xs w-full ps-8 pe-7 py-1.5">
                                <button type="button" x-show="q2.length" x-cloak x-on:click="q2 = ''"
                                        class="absolute end-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 dark:hover:text-slate-200" aria-label="{{ __('Clear') }}">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>

                            <div class="border border-slate-200/70 dark:border-slate-800 rounded-lg p-2 max-h-44 overflow-y-auto space-y-2">
                                {{-- ★ Favorites pinned at the top — only when there's at least one fav and no active search --}}
                                <div x-show="!q2.trim() && favs.kpis.length" x-cloak>
                                    <div class="flex items-center justify-between mb-1">
                                        <div class="text-[10px] font-semibold uppercase text-amber-500 flex items-center gap-1">
                                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                                            {{ __('Favorites') }}
                                            <span class="text-amber-400/70 font-normal" x-text="'(' + favs.kpis.length + ')'"></span>
                                        </div>
                                        <button type="button"
                                                x-on:click="favs.kpis.forEach(k => { if (!kpis.includes(k)) kpis.push(k); })"
                                                class="text-[9px] text-slate-400 hover:text-brand-600">{{ __('Add all') }}</button>
                                    </div>
                                    <div class="flex flex-wrap gap-1">
                                        <template x-for="favKpi in favs.kpis" :key="'fav-kpi-'+favKpi">
                                            <span class="inline-flex items-center rounded-full text-[11px] border transition overflow-hidden"
                                                  :class="kpis.includes(favKpi) ? 'bg-brand-600 text-white border-brand-600' : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-brand-400'">
                                                <button type="button" x-on:click="toggleKpi(favKpi)" class="px-2 py-0.5" x-text="favKpi"></button>
                                                <button type="button" x-on:click.stop="toggleFavorite('kpis', favKpi)"
                                                        class="px-1.5 py-0.5 text-amber-300 hover:text-amber-100" :aria-label="@js(__('Unfavorite'))">
                                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                                                </button>
                                            </span>
                                        </template>
                                    </div>
                                </div>

                                @foreach($kpiCatalogue as $cat => $list)
                                    <div x-show="@js($list).some(k => matchesQ2(k))">
                                        <div class="flex items-center justify-between mb-1">
                                            <div class="text-[10px] font-semibold uppercase text-slate-400">{{ $cat }}</div>
                                            <button type="button"
                                                    x-on:click="
                                                        const cat = @js($list);
                                                        const allIn = cat.every(k => kpis.includes(k));
                                                        if (allIn) kpis = kpis.filter(k => !cat.includes(k));
                                                        else cat.forEach(k => { if (!kpis.includes(k)) kpis.push(k); });
                                                    "
                                                    class="text-[9px] text-slate-400 hover:text-brand-600">
                                                <span x-text="@js($list).every(k => kpis.includes(k)) ? @js(__('Clear')) : @js(__('All'))"></span>
                                            </button>
                                        </div>
                                        <div class="flex flex-wrap gap-1">
                                            @foreach($list as $kpi)
                                                <span x-show="matchesQ2(@js($kpi))"
                                                      class="inline-flex items-center rounded-full text-[11px] border transition overflow-hidden"
                                                      :class="kpis.includes(@js($kpi)) ? 'bg-brand-600 text-white border-brand-600' : 'bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-brand-400'">
                                                    <button type="button" x-on:click="toggleKpi(@js($kpi))" class="px-2 py-0.5">{{ $kpi }}</button>
                                                    <button type="button" x-on:click.stop="toggleFavorite('kpis', @js($kpi))"
                                                            :class="isFav('kpis', @js($kpi))
                                                                    ? (kpis.includes(@js($kpi)) ? 'text-amber-300 hover:text-amber-100' : 'text-amber-500 hover:text-amber-600')
                                                                    : (kpis.includes(@js($kpi)) ? 'text-white/50 hover:text-amber-200' : 'text-slate-300 dark:text-slate-600 hover:text-amber-500')"
                                                            class="px-1.5 py-0.5 transition" :aria-label="isFav('kpis', @js($kpi)) ? @js(__('Unfavorite')) : @js(__('Favorite'))">
                                                        <svg class="w-3 h-3" :fill="isFav('kpis', @js($kpi)) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.957a1 1 0 00.95.69h4.16c.969 0 1.371 1.24.588 1.81l-3.366 2.446a1 1 0 00-.364 1.118l1.287 3.957c.3.921-.755 1.688-1.539 1.118l-3.366-2.445a1 1 0 00-1.176 0l-3.366 2.445c-.783.57-1.838-.197-1.539-1.118l1.287-3.957a1 1 0 00-.364-1.118L2.072 9.384c-.783-.57-.38-1.81.588-1.81h4.16a1 1 0 00.95-.69l1.286-3.957z"/></svg>
                                                    </button>
                                                </span>
                                            @endforeach
                                        </div>
                                    </div>
                                @endforeach

                                {{-- Empty-state for an active search with no matches --}}
                                <div x-show="q2.trim() && !allKpis.some(k => matchesQ2(k))" x-cloak
                                     class="text-center py-3 text-[11px] text-slate-400">
                                    {{ __('No KPI matches your search.') }}
                                </div>
                            </div>
                        </div>
                    </details>

                    {{-- Extra instructions --}}
                    <details class="group" :open="instructions.length > 0">
                        <summary class="cursor-pointer list-none flex items-center justify-between p-3 rounded-xl border border-slate-200 dark:border-slate-800 hover:border-brand-300 dark:hover:border-brand-700 transition">
                            <div class="flex items-center gap-2.5 min-w-0">
                                <div class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 flex items-center justify-center shrink-0">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h2m-1-2v18M5 12h14"/></svg>
                                </div>
                                <div class="min-w-0">
                                    <div class="text-xs font-semibold text-slate-900 dark:text-slate-100">
                                        {{ __('Extra instructions') }}
                                        <span x-show="!instructions.length" class="text-[10px] text-slate-400 font-normal ms-1">({{ __('optional') }})</span>
                                        <span x-show="instructions.length" x-cloak class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200 ms-1">{{ __('Set') }}</span>
                                    </div>
                                </div>
                            </div>
                            <svg class="w-4 h-4 transition group-open:rotate-180 text-slate-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                        </summary>
                        <textarea name="instructions" rows="3" x-model="instructions" class="form-input text-xs w-full mt-2"
                                  placeholder="{{ __('Focus on Q1, ignore intercompany lines…') }}"></textarea>
                    </details>

                    {{-- Summary card --}}
                    <div class="rounded-xl bg-gradient-to-br from-brand-50 to-violet-50 dark:from-brand-900/20 dark:to-violet-900/20 border border-brand-100 dark:border-brand-900/40 p-3 flex items-center gap-2.5">
                        <svg class="w-4 h-4 text-brand-600 dark:text-brand-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        <p class="text-[11px] text-slate-700 dark:text-slate-200 leading-snug">
                            <span x-text="types.length"></span> {{ __('analysis') }}<span x-show="types.length > 1">{{ __('s') }}</span>
                            · <span x-text="kpis.length"></span> {{ __('KPIs') }}
                            · <span x-text="language.toUpperCase()"></span>
                            <span class="text-slate-500 dark:text-slate-400">— {{ __('runs in background, you\'ll be notified when done.') }}</span>
                        </p>
                    </div>
                </div>

                {{-- ─── FOOTER ─────────────────────────────────────────────── --}}
                <div class="px-5 py-3 border-t border-slate-200/70 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-900/40 flex items-center justify-between gap-2">
                    {{-- step 1 footer --}}
                    <template x-if="step === 1">
                        <div class="flex w-full items-center justify-between gap-2">
                            <button type="button" x-on:click="open = false" class="btn-secondary text-xs">{{ __('Cancel') }}</button>
                            <div class="flex items-center gap-2">
                                <span class="text-[11px] text-slate-500 hidden sm:inline">
                                    <span x-show="types.length" x-cloak><span x-text="types.length"></span> {{ __('selected') }}</span>
                                    <span x-show="!types.length">{{ __('Pick at least one type') }}</span>
                                </span>
                                <button type="button" x-on:click="step = 2" x-bind:disabled="!canContinue"
                                        class="btn-primary text-xs disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1">
                                    {{ __('Continue') }}
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/></svg>
                                </button>
                            </div>
                        </div>
                    </template>
                    {{-- step 2 footer --}}
                    <template x-if="step === 2">
                        <div class="flex w-full items-center justify-between gap-2">
                            <button type="button" x-on:click="step = 1" class="btn-secondary text-xs inline-flex items-center gap-1">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/></svg>
                                {{ __('Back') }}
                            </button>
                            <button type="submit" class="btn-primary text-xs disabled:opacity-60 disabled:cursor-not-allowed inline-flex items-center gap-1.5"
                                    x-bind:disabled="submitting || !types.length">
                                <svg x-show="!submitting" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                                <svg x-show="submitting" x-cloak class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/><path fill="currentColor" class="opacity-75" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
                                <span x-show="!submitting" x-text="startLabel"></span>
                                <span x-show="submitting" x-cloak>{{ __('Starting…') }}</span>
                            </button>
                        </div>
                    </template>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ABORT CONFIRMATION MODAL --}}
<div x-data="{ open:false }" x-on:open-abort.window="open = true">
    <div x-show="open" x-cloak x-transition.opacity
         class="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-slate-900/60 backdrop-blur-sm"
         style="display:none">
        <div class="card w-[min(100%,26rem)] rounded-2xl overflow-hidden" x-on:click.outside="open = false" x-on:keydown.escape.window="open = false">
            <form method="POST" action="{{ route('tenant.submissions.abort', $submission) }}">
                @csrf
                <div class="px-5 py-4 flex items-start gap-3">
                    <div class="w-10 h-10 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-300 flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 4h.01M4.93 19h14.14a2 2 0 001.74-3l-7.07-12a2 2 0 00-3.48 0L3.2 16a2 2 0 001.73 3z"/></svg>
                    </div>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-base">{{ __('Are you sure you want to abort this analysis?') }}</h3>
                        <p class="text-sm text-slate-500 mt-1">{{ __('This will stop the running analysis and mark the submission as abandoned.') }}</p>
                    </div>
                </div>
                <div class="px-5 py-3 border-t border-slate-200/70 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-900/40 flex items-center justify-end gap-2">
                    <button type="button" x-on:click="open = false" class="btn-secondary text-xs">{{ __('Cancel') }}</button>
                    <button type="submit" class="btn-primary !bg-rose-600 hover:!bg-rose-700 text-xs inline-flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m5-9a2 2 0 012 2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14z"/></svg>
                        {{ __('Yes, abort') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 lg:gap-6">
    <div class="lg:col-span-2 space-y-4 sm:space-y-5 lg:space-y-6 min-w-0">
        @if($isFileless)
            <div id="attach-source" x-data="{ tab: '{{ $uploaderIntegrations->isNotEmpty() ? 'integration' : 'upload' }}' }"
                 class="card overflow-hidden border-amber-200 dark:border-amber-900/40">
                <div class="px-4 sm:px-6 py-3 bg-amber-50/70 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-900/40 flex items-start gap-3">
                    <div class="w-8 h-8 rounded-lg bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-200 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M5 19a2 2 0 01-1.732-3l7-12a2 2 0 013.464 0l7 12A2 2 0 0119 19H5z"/></svg>
                    </div>
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold text-amber-900 dark:text-amber-100">{{ __('No file attached') }}</h3>
                        <p class="text-xs text-amber-800/80 dark:text-amber-200/80 mt-0.5">{{ __('The client requested an analysis without uploading a file. Attach a document or pull the data from one of their connected accounting integrations to unblock the analysis.') }}</p>
                    </div>
                </div>

                <div class="px-4 sm:px-6 pt-3 flex items-center gap-1 border-b border-slate-200/70 dark:border-slate-800">
                    <button type="button" @click="tab = 'upload'"
                            :class="tab === 'upload' ? 'border-slate-900 dark:border-slate-100 text-slate-900 dark:text-slate-100' : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'"
                            class="px-3 py-2 text-xs sm:text-sm font-medium border-b-2 -mb-px inline-flex items-center gap-1.5 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M12 12V3m0 0L8 7m4-4l4 4"/></svg>
                        {{ __('Upload a file') }}
                    </button>
                    <button type="button" @click="tab = 'integration'"
                            :class="tab === 'integration' ? 'border-slate-900 dark:border-slate-100 text-slate-900 dark:text-slate-100' : 'border-transparent text-slate-500 hover:text-slate-700 dark:hover:text-slate-300'"
                            class="px-3 py-2 text-xs sm:text-sm font-medium border-b-2 -mb-px inline-flex items-center gap-1.5 transition">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        {{ __('Pull from integration') }}
                        @if($uploaderIntegrations->isNotEmpty())
                            <span class="ms-1 inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1 rounded-full bg-slate-100 dark:bg-slate-800 text-[10px] font-mono">{{ $uploaderIntegrations->count() }}</span>
                        @endif
                    </button>
                </div>

                {{-- Upload tab --}}
                <div x-show="tab === 'upload'" x-cloak class="p-4 sm:p-6">
                    <form method="POST" action="{{ route('tenant.submissions.attach-file', $submission) }}" enctype="multipart/form-data" class="space-y-3">
                        @csrf
                        <label class="form-label">{{ __('Document') }}</label>
                        <input type="file" name="file" required class="form-input file:me-3 file:rounded-md file:border-0 file:bg-slate-100 dark:file:bg-slate-800 file:px-3 file:py-1.5 file:text-xs file:font-medium file:text-slate-700 dark:file:text-slate-200">
                        <p class="text-[11px] text-slate-500">{{ __('Accepted: PDF, Excel, CSV, JSON, Word, images. Max 50 MB.') }}</p>
                        @error('file')<p class="form-error">{{ $message }}</p>@enderror
                        <div class="flex justify-end pt-2">
                            <button class="btn-primary text-sm">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                {{ __('Attach file') }}
                            </button>
                        </div>
                    </form>
                </div>

                {{-- Integration tab --}}
                <div x-show="tab === 'integration'" x-cloak class="p-4 sm:p-6">
                    @if($uploaderIntegrations->isEmpty())
                        <div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-slate-50/60 dark:bg-slate-900/40 px-4 py-6 text-center">
                            <p class="text-sm text-slate-600 dark:text-slate-300">{{ __(':name has not connected an accounting integration yet.', ['name' => $submission->uploader?->name ?? __('This client')]) }}</p>
                            <p class="text-xs text-slate-500 mt-1">{{ __('Ask them to connect Billit, Odoo or Exact Online from their workspace, or upload the file manually here.') }}</p>
                        </div>
                    @else
                        <form method="POST" action="{{ route('tenant.submissions.attach-integration', $submission) }}" class="space-y-3">
                            @csrf
                            <div>
                                <label class="form-label">{{ __('Source integration') }}</label>
                                <select name="integration_id" required class="form-select">
                                    @foreach($uploaderIntegrations as $itg)
                                        <option value="{{ $itg->id }}">
                                            {{ $itg->providerLabel() }}@if($itg->label && $itg->label !== $itg->providerLabel()) — {{ $itg->label }}@endif
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <label class="form-label">{{ __('Period from') }}</label>
                                    <input type="date" name="period_from" required value="{{ $submission->requested_period_start?->toDateString() }}" class="form-input">
                                </div>
                                <div>
                                    <label class="form-label">{{ __('Period to') }}</label>
                                    <input type="date" name="period_to" required value="{{ $submission->requested_period_end?->toDateString() }}" class="form-input">
                                </div>
                            </div>
                            @error('integration_id')<p class="form-error">{{ $message }}</p>@enderror
                            @error('period_from') <p class="form-error">{{ $message }}</p>@enderror
                            @error('period_to')   <p class="form-error">{{ $message }}</p>@enderror
                            <div class="flex justify-end pt-2">
                                <button class="btn-primary text-sm">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h5M20 20v-5h-5M4 9a8 8 0 0114-4M20 15a8 8 0 01-14 4"/></svg>
                                    {{ __('Pull data') }}
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        @endif

        @if(!empty($submission->requested_analysis_types))
            <div class="card-pad">
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <x-icon name="sparkles" class="w-4 h-4"/>
                    </div>
                    <div class="min-w-0 flex-1">
                        <h3 class="text-sm font-semibold mb-1">{{ __('Client asked for') }}</h3>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach($submission->requested_analysis_types as $rt)
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200">
                                    {{ isset($types[$rt]) ? __($types[$rt]['label']) : $rt }}
                                </span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @php
            $methodCatalog   = config('analysis_methods', []);
            $valuationLabels = $methodCatalog['valuation_methods'] ?? [];
            $forecastLabels  = $methodCatalog['forecast_methods']  ?? [];
            $methodLabel = function (string $code) use ($submission, $valuationLabels, $forecastLabels) {
                if ($submission->analysis_type === \App\Models\FileSubmission::TYPE_VALUATION
                    && isset($valuationLabels[$code]['label'])) return __($valuationLabels[$code]['label']);
                if ($submission->analysis_type === \App\Models\FileSubmission::TYPE_FORECAST
                    && isset($forecastLabels[$code]['label']))  return __($forecastLabels[$code]['label']);
                return $code;
            };
        @endphp

        @if(in_array($submission->analysis_type, [\App\Models\FileSubmission::TYPE_FORECAST, \App\Models\FileSubmission::TYPE_VALUATION], true) && !empty($submission->methods))
            <div class="card-pad">
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300 flex items-center justify-center shrink-0">
                        <x-icon name="sparkles" class="w-4 h-4"/>
                    </div>
                    <div class="min-w-0 flex-1">
                        <h3 class="text-sm font-semibold mb-1">
                            {{ $submission->analysis_type === \App\Models\FileSubmission::TYPE_VALUATION
                                ? __('Valuation methods requested by the client')
                                : __('Forecast methods requested by the client') }}
                        </h3>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach($submission->methods as $code)
                                @php $w = data_get($submission->method_weights, $code); @endphp
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs bg-brand-50 dark:bg-brand-900/20 border border-brand-200 dark:border-brand-800 text-brand-800 dark:text-brand-200">
                                    {{ $methodLabel($code) }}
                                    @if($w !== null)
                                        <span class="text-[10px] font-mono opacity-70">{{ rtrim(rtrim(number_format((float) $w, 2, '.', ''), '0'), '.') }}%</span>
                                    @endif
                                </span>
                            @endforeach
                        </div>
                        @if(!empty($submission->method_weights))
                            @php $sum = array_sum(array_map('floatval', (array) $submission->method_weights)); @endphp
                            <p class="text-[11px] text-slate-500 mt-1.5">
                                {{ __('Total weight: :p%', ['p' => rtrim(rtrim(number_format($sum, 2, '.', ''), '0'), '.')]) }}
                            </p>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        @if($submission->note)
            <div class="card-pad">
                <div class="flex items-start gap-3">
                    <div class="w-8 h-8 rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 flex items-center justify-center shrink-0">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8M8 8h6m4 12a4 4 0 004-4V8a4 4 0 00-4-4H6a4 4 0 00-4 4v8a4 4 0 004 4h6l4 4z"/></svg>
                    </div>
                    <div class="min-w-0">
                        <h3 class="text-sm font-semibold mb-1">{{ __('Client note') }}</h3>
                        <p class="text-sm text-slate-700 dark:text-slate-200 whitespace-pre-line">{{ $submission->note }}</p>
                    </div>
                </div>
            </div>
        @endif

        @if($latest)
            <div class="card overflow-hidden">
                <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-slate-200/70 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 bg-slate-50 dark:bg-slate-900/40">
                    <div class="min-w-0">
                        <h2 class="font-semibold text-base sm:text-lg flex items-center gap-2 min-w-0">
                            <x-icon name="sparkles" class="w-4 h-4 sm:w-5 sm:h-5 text-brand-600 shrink-0"/>
                            <span class="truncate">{{ __($latest->typeLabel()) }}</span>
                        </h2>
                        <p class="text-[11px] sm:text-xs text-slate-500 mt-0.5 flex flex-wrap items-center gap-x-1.5 gap-y-0.5">
                            <span>{{ __('Status') }}:</span>
                            <span class="font-medium
                                {{ $latest->status === 'done' ? 'text-emerald-600' :
                                   ($latest->status === 'failed' ? 'text-rose-600' : 'text-amber-600') }}">{{ __($latest->status) }}</span>
                            @if($latest->finished_at) <span>·</span> <span>{{ $latest->finished_at->diffForHumans() }}</span> @endif
                        </p>
                    </div>
                    <div class="flex items-center gap-1.5 sm:gap-2 text-[11px] sm:text-xs flex-wrap">
                        @if($latest->tokens_used)
                            <span class="px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 tabular-nums">
                                {{ number_format($latest->tokens_used) }} {{ __('tokens') }}
                            </span>
                        @endif
                        @if($latest->language)
                            <span class="px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 uppercase font-mono">{{ $latest->language }}</span>
                        @endif
                    </div>
                </div>

                <div class="p-4 sm:p-5 lg:p-6 space-y-4 sm:space-y-5">
                    @if(!empty($latest->requested_kpis) || $latest->instructions)
                        <div class="p-3 rounded-lg bg-slate-50 dark:bg-slate-900/40 border border-slate-200/70 dark:border-slate-800 text-xs">
                            @if(!empty($latest->requested_kpis))
                                <div class="flex flex-wrap items-center gap-1">
                                    <strong class="me-1">{{ __('Requested KPIs') }}:</strong>
                                    @foreach($latest->requested_kpis as $k)
                                        <span class="inline-block px-2 py-0.5 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700">{{ __($k) }}</span>
                                    @endforeach
                                </div>
                            @endif
                            @if($latest->instructions)
                                <div class="mt-2 text-justify hyphens-auto"><strong>{{ __('Instructions') }}:</strong> {{ $latest->instructions }}</div>
                            @endif
                        </div>
                    @endif

                    @if($latest->status === \App\Models\FileAnalysis::STATUS_FAILED)
                        <div class="p-4 rounded-xl bg-rose-50 dark:bg-rose-900/20 text-rose-800 dark:text-rose-200 text-sm border border-rose-200 dark:border-rose-900/40">
                            <div class="flex items-start gap-2">
                                <svg class="w-5 h-5 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 4h.01M4.93 19h14.14a2 2 0 001.74-3l-7.07-12a2 2 0 00-3.48 0L3.2 16a2 2 0 001.73 3z"/></svg>
                                <div>
                                    <div class="font-semibold">{{ __('Analysis failed') }}</div>
                                    <div class="mt-0.5">{{ $latest->error }}</div>
                                </div>
                            </div>
                        </div>
                    @elseif(in_array($latest->status, [\App\Models\FileAnalysis::STATUS_DONE, \App\Models\FileAnalysis::STATUS_AWAITING_REVISION], true))
                        @if($latest->status === \App\Models\FileAnalysis::STATUS_AWAITING_REVISION)
                            <div class="flex items-start gap-3 p-4 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 text-sm">
                                <svg class="w-5 h-5 shrink-0 mt-0.5 text-slate-400 dark:text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                                <div class="flex-1">
                                    <div class="font-semibold text-slate-900 dark:text-slate-100">{{ __('Ready for your review') }}</div>
                                    <div class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('The analysis is ready. Edit the summary, KPIs and charts before sending — or send as-is.') }}</div>
                                </div>
                                <a href="{{ route('tenant.analyses.review', $latest) }}"
                                   class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 dark:bg-slate-100 dark:hover:bg-white text-white dark:text-slate-900 text-xs font-semibold">
                                    {{ __('Open review') }}
                                </a>
                            </div>
                        @endif

                        @if($latest->summary)
                            <div class="relative p-4 sm:p-5 rounded-xl bg-white dark:bg-slate-900/60 border border-brand-100 dark:border-brand-900/40">
                                <div class="absolute top-3 end-3 text-brand-300/50 dark:text-brand-700/50">
                                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
                                </div>
                                <div class="text-[11px] uppercase tracking-wider font-semibold text-brand-700 dark:text-brand-300 mb-2">{{ __('Executive summary') }}</div>
                                <p class="text-sm sm:text-[15px] leading-relaxed text-slate-700 dark:text-slate-100 text-justify hyphens-auto">{{ $latest->summary }}</p>
                            </div>
                        @endif

                        @if(!empty($latest->kpis))
                            <div>
                                <div class="flex items-center justify-between mb-2.5">
                                    <div class="text-[11px] sm:text-xs uppercase tracking-wider font-semibold text-slate-500 dark:text-slate-400">{{ __('Key indicators') }}</div>
                                    <div class="text-[10px] sm:text-xs text-slate-400 tabular-nums">{{ count($latest->kpis) }}</div>
                                </div>
                                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-2.5 sm:gap-3">
                                    @foreach($latest->kpis as $kpi)
                                        @php
                                            $trend = $kpi['trend'] ?? null;
                                            $trendCls = $trend === 'up' ? 'text-emerald-700 bg-emerald-50 dark:bg-emerald-900/30 dark:text-emerald-300'
                                                      : ($trend === 'down' ? 'text-rose-700 bg-rose-50 dark:bg-rose-900/30 dark:text-rose-300'
                                                      : ($trend === 'flat' ? 'text-slate-600 bg-slate-100 dark:bg-slate-800 dark:text-slate-300' : ''));
                                            $trendLabel = $trend === 'up' ? __('up') : ($trend === 'down' ? __('down') : ($trend === 'flat' ? __('flat') : ''));
                                        @endphp
                                        <div class="group p-3.5 sm:p-4 rounded-xl border border-slate-200/70 dark:border-slate-800 bg-white dark:bg-slate-900/40 hover:border-brand-400 hover:shadow-md hover:-translate-y-0.5 transition-all relative overflow-hidden">
                                            <div class="relative">
                                                <div class="flex items-start justify-between gap-2">
                                                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 font-medium leading-snug line-clamp-2">{{ $kpi['label'] ?? '' }}</div>
                                                    @if($trend)
                                                        <span class="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-medium shrink-0 {{ $trendCls }}">
                                                            @if($trend === 'up') ↑ @elseif($trend === 'down') ↓ @else → @endif
                                                            {{ $trendLabel }}
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="mt-1.5 font-bold text-lg sm:text-xl lg:text-2xl text-slate-900 dark:text-white tabular-nums break-words leading-tight">
                                                    {{ $kpi['value'] ?? '—' }}<span class="text-xs text-slate-400 ms-1 font-normal">{{ $kpi['unit'] ?? '' }}</span>
                                                </div>
                                                @if(!empty($kpi['comment']))
                                                    <div class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed line-clamp-3 text-justify hyphens-auto">{{ $kpi['comment'] }}</div>
                                                @endif
                                                @if(!empty($kpi['chart']) && is_array($kpi['chart']))
                                                    <div class="mt-2.5 -mx-1 overflow-x-auto">
                                                        {!! \App\Services\Charting\ChartRenderer::render(
                                                            (string) ($kpi['chart']['type'] ?? ''),
                                                            (array)  ($kpi['chart']['series'] ?? []),
                                                            [
                                                                'categories' => array_values((array) ($kpi['chart']['categories'] ?? [])),
                                                                'width'      => 280,
                                                                'height'     => 110,
                                                            ],
                                                        ) !!}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        @if($latest->explanation_html)
                            <details class="group rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden" open>
                                <summary class="cursor-pointer list-none px-4 sm:px-5 py-3 bg-slate-50 dark:bg-slate-900/40 text-sm font-semibold flex items-center justify-between gap-2 hover:bg-slate-100 dark:hover:bg-slate-900/60 transition">
                                    <span class="flex items-center gap-2 min-w-0">
                                        <svg class="w-4 h-4 shrink-0 text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                        <span class="truncate text-slate-900 dark:text-slate-100">{{ __('Detailed explanation') }}</span>
                                    </span>
                                    <svg class="w-4 h-4 text-slate-400 transition group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </summary>
                                <div class="explain-doc px-4 sm:px-6 lg:px-8 py-5 sm:py-6 bg-white dark:bg-slate-900 overflow-x-auto"
                                     dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                                    {!! $latest->explanation_html !!}
                                </div>
                            </details>
                        @endif
                    @else
                        <div class="flex items-center gap-3 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/40 text-amber-800 dark:text-amber-200 text-sm">
                            <svg class="animate-spin w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <circle cx="12" cy="12" r="10" stroke-width="3" class="opacity-25"/>
                                <path d="M4 12a8 8 0 018-8" stroke-width="3" class="opacity-75" stroke-linecap="round"/>
                            </svg>
                            <div>
                                <div class="font-semibold">{{ __('Analysis is running…') }}</div>
                                <div class="text-xs opacity-80">{{ __('This page refreshes automatically. You can leave it.') }}</div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @elseif(! $isFileless)
            <div class="card-pad text-center py-10">
                <div class="mx-auto w-16 h-16 rounded-2xl bg-brand-50 dark:bg-brand-900/20 text-brand-600 dark:text-brand-300 flex items-center justify-center mb-3">
                    <x-icon name="sparkles" class="w-7 h-7"/>
                </div>
                <h3 class="font-semibold">{{ __('No analysis yet') }}</h3>
                <p class="text-sm text-slate-500 mt-1 mb-4">{{ __('Pick an analysis type and the KPIs you want — the system takes it from there.') }}</p>
                <button type="button" x-data x-on:click="$dispatch('open-analysis')" class="btn-primary text-sm inline-flex items-center gap-1.5">
                    <x-icon name="sparkles" class="w-4 h-4"/> {{ __('Run analysis') }}
                </button>
            </div>
        @endif

        @if($analyses->count() > 1)
            <div class="card overflow-hidden">
                <div class="px-4 sm:px-6 py-3 border-b border-slate-200/70 dark:border-slate-800 flex items-center justify-between gap-2">
                    <h3 class="font-semibold text-sm">{{ __('Previous analyses') }}</h3>
                    @unless($isViewingLatest)
                        <a href="{{ route('tenant.submissions.show', $submission) }}" class="text-xs text-brand-600 hover:underline">{{ __('View latest') }}</a>
                    @endunless
                </div>
                <ul class="divide-y divide-slate-100 dark:divide-slate-800">
                    @foreach($analyses as $a)
                        @php $isCurrent = $latest && $a->id === $latest->id; @endphp
                        <li>
                            <a href="{{ route('tenant.submissions.show', $submission) }}?analysis={{ $a->id }}"
                               class="px-4 sm:px-6 py-3 flex items-center justify-between text-sm gap-3 transition
                                      {{ $isCurrent ? 'bg-brand-50/70 dark:bg-brand-900/20 border-s-2 border-brand-500' : 'hover:bg-slate-50/60 dark:hover:bg-slate-800/40' }}">
                                <div class="min-w-0 flex-1">
                                    <div class="font-medium truncate flex items-center gap-2">
                                        {{ __($a->typeLabel()) }}
                                        @if($isCurrent)
                                            <span class="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded bg-brand-600 text-white">{{ __('Viewing') }}</span>
                                        @endif
                                    </div>
                                    <div class="text-xs text-slate-500">
                                        <span class="font-medium {{ $a->status === 'done' ? 'text-emerald-600' : ($a->status === 'failed' ? 'text-rose-600' : 'text-amber-600') }}">{{ __($a->status) }}</span>
                                        · {{ $a->created_at?->diffForHumans() }}
                                        @if($a->language) · <span class="uppercase">{{ $a->language }}</span> @endif
                                        @if($a->trigger) · {{ __('by') }} {{ $a->trigger->name }} @endif
                                    </div>
                                </div>
                                <span class="text-xs text-slate-400 shrink-0">{{ $a->tokens_used ? number_format($a->tokens_used).' tk' : '' }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    <aside class="space-y-4 sm:space-y-5 lg:sticky lg:top-6 lg:self-start min-w-0">
        <div class="card overflow-hidden">
            <div class="px-4 py-3 border-b border-slate-200/70 dark:border-slate-800">
                <h3 class="text-sm font-semibold">{{ __('File details') }}</h3>
            </div>
            <dl class="px-4 py-3 text-xs space-y-2">
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Disk') }}</dt><dd class="font-mono">{{ $submission->disk }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Type') }}</dt><dd class="font-mono">.{{ $submission->extension }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Size') }}</dt><dd>{{ $submission->humanSize() }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('MIME') }}</dt><dd class="font-mono truncate max-w-[10rem]" title="{{ $submission->mime }}">{{ $submission->mime }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Received') }}</dt><dd>{{ $submission->created_at?->diffForHumans() }}</dd></div>
                @if($submission->seen_at)<div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Seen') }}</dt><dd>{{ $submission->seen_at->diffForHumans() }}</dd></div>@endif
                @if($submission->sent_at)<div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Sent') }}</dt><dd>{{ $submission->sent_at->diffForHumans() }}</dd></div>@endif
                @if($submission->opened_at)<div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Opened') }}</dt><dd>{{ $submission->opened_at->diffForHumans() }}</dd></div>@endif
            </dl>
        </div>

        @if($submission->uploader)
            <div class="card overflow-hidden">
                <div class="px-4 py-3 border-b border-slate-200/70 dark:border-slate-800">
                    <h3 class="text-sm font-semibold">{{ __('Client') }}</h3>
                </div>
                <div class="p-4 flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-brand-100 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300 flex items-center justify-center font-semibold text-sm uppercase">
                        {{ \Illuminate\Support\Str::of($submission->uploader->name)->substr(0, 1) }}
                    </div>
                    <div class="min-w-0">
                        <div class="font-medium text-sm truncate">{{ $submission->uploader->name }}</div>
                        <a href="mailto:{{ $submission->uploader->email }}" class="text-xs text-slate-500 hover:text-brand-600 truncate block">{{ $submission->uploader->email }}</a>
                    </div>
                </div>
            </div>
        @endif

        @if($submission->evaluated_at)
            @php
                $evalLabel = match($submission->evaluation) {
                    'good'         => __('Looks good'),
                    'bad'          => __('Not relevant'),
                    'needs_update' => __('Needs update'),
                    default        => ucfirst(str_replace('_',' ', (string) $submission->evaluation)),
                };
                $needsUpdate = $submission->evaluation === 'needs_update';
                // Pre-fill the modal with the latest analysis params plus the client's feedback.
                $rerunPayload = $needsUpdate && $latest ? [
                    'type'         => $latest->analysis_type,
                    'kpis'         => $latest->requested_kpis ?: [],
                    'language'     => $latest->language,
                    'instructions' => trim(
                        '['.__('Client feedback').'] '.($submission->evaluation_comment ?: __('Needs update'))
                        .($latest->instructions ? "\n\n".__('Previous instructions').": ".$latest->instructions : '')
                    ),
                ] : null;
            @endphp
            <div class="card overflow-hidden">
                <div class="px-4 py-3 border-b border-slate-200/70 dark:border-slate-800">
                    <h3 class="text-sm font-semibold">{{ __('Client evaluation') }}</h3>
                </div>
                <div class="p-4 text-sm space-y-2">
                    <div class="text-2xl">
                        @if($submission->evaluation === 'good') 👍
                        @elseif($submission->evaluation === 'bad') 👎
                        @else ✏️
                        @endif
                        <span class="text-sm font-medium align-middle ms-1">{{ $evalLabel }}</span>
                    </div>
                    @if($submission->evaluation_comment)
                        <blockquote class="text-xs text-slate-600 dark:text-slate-300 italic border-s-2 border-brand-400 ps-3">
                            "{{ $submission->evaluation_comment }}"
                        </blockquote>
                    @endif
                    <div class="text-[11px] text-slate-400">{{ $submission->evaluated_at->diffForHumans() }}</div>

                    @if($needsUpdate && $latest)
                        <div class="pt-2">
                            <button type="button"
                                    x-data
                                    x-on:click="$dispatch('open-analysis', @js($rerunPayload))"
                                    class="btn-primary text-xs w-full inline-flex items-center justify-center gap-1.5">
                                <x-icon name="sparkles" class="w-3.5 h-3.5"/>
                                {{ __('Re-run with this feedback') }}
                            </button>
                            <p class="text-[10px] text-slate-400 mt-1.5 leading-snug">
                                {{ __('Opens the analysis form pre-filled with the previous parameters and the client comment as instructions.') }}
                            </p>
                        </div>
                    @endif
                </div>
            </div>
        @endif
    </aside>
</div>
@endsection