@php
    $editing = (bool) $report;
    $title = $editing ? 'Edit report' : 'New report';
@endphp
<x-layouts.app :title="$title" :subtitle="$editing ? $definition->displayName() : 'Pick a data source, choose columns, group, filter and chart — then save.'"
               :breadcrumbs="array_filter(['Reports' => route('reports.index'), ($editing ? $definition->displayName() : null) => $editing ? route('reports.show', $report) : null, $title => null], fn ($v, $k) => $k !== '', ARRAY_FILTER_USE_BOTH)">
    <x-slot:actions>
        <a href="{{ $editing ? route('reports.show', $report) : route('reports.index') }}" class="btn btn-secondary">Cancel</a>
    </x-slot:actions>

    @if ($editing && $definition->warnings)
        <div class="mb-5 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
            <div class="flex items-start gap-3">
                <x-heroicon-o-exclamation-triangle class="mt-0.5 h-5 w-5 shrink-0" />
                <div>
                    <p class="font-medium">Imported legacy settings were cleaned up — saving stores the corrected version:</p>
                    <ul class="mt-1 list-disc space-y-0.5 pl-5">@foreach ($definition->warnings as $w)<li>{{ $w }}</li>@endforeach</ul>
                </div>
            </div>
        </div>
    @endif

    <div x-data="reportBuilder(window.__reportBuilderConfig)" x-cloak class="space-y-6">
        {{-- Stepper --}}
        <nav class="card overflow-x-auto px-3 py-3">
            <ol class="flex min-w-max items-center gap-1">
                <template x-for="(st, i) in steps" :key="st.key">
                    <li class="flex items-center">
                        <button type="button" @click="go(i)"
                                class="group flex items-center gap-2.5 rounded-xl px-3 py-2 text-left transition"
                                :class="step === i ? 'bg-brand-50 ring-1 ring-brand-200 dark:bg-brand-500/10 dark:ring-brand-500/30' : 'hover:bg-ink-50 dark:hover:bg-ink-800'">
                            <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold transition"
                                  :class="stepHasError(i) ? 'bg-rose-500 text-white' : (step === i ? 'bg-brand-500 text-ink-950' : (i < step ? 'bg-emerald-500 text-white' : 'bg-ink-100 text-ink-500 dark:bg-ink-800'))">
                                <template x-if="i < step && !stepHasError(i)"><x-heroicon-m-check class="h-4 w-4" /></template>
                                <span x-show="!(i < step && !stepHasError(i))" x-text="i + 1"></span>
                            </span>
                            <span class="leading-tight">
                                <span class="block text-sm font-medium" :class="step === i ? 'text-ink-900 dark:text-white' : 'text-ink-600 dark:text-ink-300'" x-text="st.title"></span>
                                <span class="block text-[11px] text-ink-400" x-text="st.hint()"></span>
                            </span>
                        </button>
                        <x-heroicon-m-chevron-right x-show="i < steps.length - 1" class="mx-1 h-4 w-4 shrink-0 text-ink-300" />
                    </li>
                </template>
            </ol>
        </nav>

        <form @submit.prevent="save()" class="card" novalidate>
            <div class="card-body min-h-[420px]">

                {{-- STEP 1: source & type --}}
                <section x-show="step === 0" class="space-y-8">
                    <div>
                        <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Data source</h3>
                        <p class="mb-3 text-xs text-ink-500">The module the report is based on. Only these modules can be reported on.</p>
                        <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                            <template x-for="m in modules" :key="m.key">
                                <button type="button" @click="selectModule(m.key)"
                                        class="relative rounded-2xl border p-4 text-left transition"
                                        :class="s.module === m.key ? 'border-brand-500 bg-brand-50/60 ring-4 ring-brand-500/10 dark:bg-brand-500/10' : 'border-ink-200 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-700 dark:hover:bg-ink-800'">
                                    <span class="flex items-center justify-between">
                                        <span class="font-semibold text-ink-900 dark:text-white" x-text="m.label"></span>
                                        <span class="flex h-5 w-5 items-center justify-center rounded-full border-2" :class="s.module === m.key ? 'border-brand-500 bg-brand-500' : 'border-ink-300'">
                                            <span class="h-1.5 w-1.5 rounded-full bg-white" x-show="s.module === m.key"></span>
                                        </span>
                                    </span>
                                    <span class="mt-1 block text-xs text-ink-500" x-text="m.description"></span>
                                    <span class="mt-2 block text-[11px] text-ink-400" x-text="m.columns.filter(c => c.table === m.key).length + ' columns'"></span>
                                </button>
                            </template>
                        </div>
                        <p class="form-error" x-show="err('module')" x-text="err('module')"></p>
                    </div>

                    <div x-show="module && module.related.length">
                        <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Related modules</h3>
                        <p class="mb-3 text-xs text-ink-500">Join related records to add their columns (e.g. the loan record and the assigned user of an activity).</p>
                        <div class="flex flex-wrap gap-2">
                            <template x-for="r in (module ? module.related : [])" :key="r.key">
                                <label class="inline-flex cursor-pointer items-center gap-2 rounded-xl border px-3 py-2 text-sm transition"
                                       :class="s.related.includes(r.key) ? 'border-brand-500 bg-brand-50 dark:bg-brand-500/10' : 'border-ink-200 hover:bg-ink-50 dark:border-ink-700 dark:hover:bg-ink-800'">
                                    <input type="checkbox" class="form-checkbox" :checked="s.related.includes(r.key)" @change="toggleRelated(r.key)">
                                    <span x-text="r.label"></span>
                                </label>
                            </template>
                        </div>
                        <p class="form-error" x-show="err('related')" x-text="err('related')"></p>
                    </div>

                    <div>
                        <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Report type</h3>
                        <p class="mb-3 text-xs text-ink-500">How the records are presented.</p>
                        <div class="grid gap-3 md:grid-cols-3">
                            <template x-for="t in reportTypes" :key="t.key">
                                <button type="button" @click="s.type = t.key"
                                        class="rounded-2xl border p-4 text-left transition"
                                        :class="s.type === t.key ? 'border-brand-500 bg-brand-50/60 ring-4 ring-brand-500/10 dark:bg-brand-500/10' : 'border-ink-200 hover:bg-ink-50 dark:border-ink-700 dark:hover:bg-ink-800'">
                                    <span class="font-semibold text-ink-900 dark:text-white" x-text="t.label"></span>
                                    <span class="mt-1 block text-xs text-ink-500" x-text="t.description"></span>
                                </button>
                            </template>
                        </div>
                    </div>
                </section>

                {{-- STEP 2: columns --}}
                <section x-show="step === 1" class="space-y-6">
                    <div class="grid gap-5 lg:grid-cols-2">
                        <div class="flex flex-col rounded-2xl border border-ink-200 dark:border-ink-700">
                            <div class="flex items-center justify-between gap-2 border-b border-ink-100 p-3 dark:border-ink-800">
                                <div class="relative flex-1">
                                    <x-heroicon-o-magnifying-glass class="pointer-events-none absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-ink-400" />
                                    <input type="search" x-model="colSearch" placeholder="Search available columns…" class="form-input form-input-sm pl-9">
                                </div>
                                <button type="button" class="btn btn-ghost btn-sm" @click="addAllVisible()" title="Add all visible columns">Add all</button>
                            </div>
                            <div class="h-[420px] overflow-y-auto p-2">
                                <template x-for="grp in availableGrouped" :key="grp.module">
                                    <div class="mb-2">
                                        <div class="sticky top-0 z-[1] bg-white/95 px-2 py-1.5 text-[10px] font-semibold tracking-wider text-ink-400 uppercase backdrop-blur dark:bg-ink-900/95" x-text="grp.module"></div>
                                        <template x-for="c in grp.columns" :key="c.key">
                                            <button type="button" @click="addColumn(c.key)"
                                                    class="group flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm text-ink-700 hover:bg-brand-50 dark:text-ink-200 dark:hover:bg-ink-800">
                                                <span class="w-6 text-center text-[10px] font-bold text-ink-400" x-text="typeIcon(c.type)"></span>
                                                <span class="flex-1 truncate" x-text="c.label"></span>
                                                <x-heroicon-m-plus-circle class="h-4 w-4 text-ink-300 group-hover:text-brand-600" />
                                            </button>
                                        </template>
                                    </div>
                                </template>
                                <p x-show="!availableGrouped.length" class="p-6 text-center text-sm text-ink-400">No more columns.</p>
                            </div>
                        </div>

                        <div class="flex flex-col rounded-2xl border border-ink-200 dark:border-ink-700">
                            <div class="flex items-center justify-between border-b border-ink-100 p-3 dark:border-ink-800">
                                <div class="text-sm font-semibold text-ink-900 dark:text-white">Selected columns <span class="badge badge-amber ml-1" x-text="s.columns.length"></span></div>
                                <button type="button" class="btn btn-ghost btn-sm" @click="s.columns = []" x-show="s.columns.length">Clear</button>
                            </div>
                            <ol class="h-[420px] space-y-1 overflow-y-auto p-2">
                                <template x-for="(key, i) in s.columns" :key="key">
                                    <li draggable="true" @dragstart="dragIndex = i" @dragend="dragIndex = null" @dragover.prevent="dragOver(i)"
                                        class="flex items-center gap-2 rounded-xl border bg-white px-2 py-1.5 text-sm transition dark:bg-ink-900"
                                        :class="dragIndex === i ? 'border-brand-400 opacity-60 shadow-lg' : 'border-ink-200 dark:border-ink-700'">
                                        <x-heroicon-m-bars-3 class="h-4 w-4 shrink-0 cursor-grab text-ink-300" />
                                        <span class="w-5 text-right text-xs tabular-nums text-ink-400" x-text="i + 1"></span>
                                        <span class="flex-1 truncate text-ink-800 dark:text-ink-100" x-text="label(key)"></span>
                                        <button type="button" class="btn-icon h-7 w-7" @click="move(i, -1)" :disabled="i === 0" title="Move up"><x-heroicon-m-arrow-up class="h-3.5 w-3.5" /></button>
                                        <button type="button" class="btn-icon h-7 w-7" @click="move(i, 1)" :disabled="i === s.columns.length - 1" title="Move down"><x-heroicon-m-arrow-down class="h-3.5 w-3.5" /></button>
                                        <button type="button" class="btn-icon h-7 w-7 hover:!text-rose-600" @click="s.columns.splice(i, 1)" title="Remove"><x-heroicon-m-x-mark class="h-4 w-4" /></button>
                                    </li>
                                </template>
                                <li x-show="!s.columns.length" class="flex h-full flex-col items-center justify-center text-center text-sm text-ink-400">
                                    <x-heroicon-o-view-columns class="mb-2 h-8 w-8" /> Click columns on the left to add them.<br>Drag to reorder.
                                </li>
                            </ol>
                            <p class="form-error px-3 pb-2" x-show="errPrefix('columns')" x-text="errPrefix('columns')"></p>
                        </div>
                    </div>

                    <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_180px]">
                        <div>
                            <label class="form-label">Sort records by</label>
                            <select x-model="s.sort_column" class="form-input">
                                <option value="">— default order —</option>
                                <template x-for="c in columns" :key="c.key"><option :value="c.key" x-text="label(c.key)" :selected="s.sort_column === c.key"></option></template>
                            </select>
                            <p class="form-error" x-show="err('sort_column')" x-text="err('sort_column')"></p>
                        </div>
                        <div>
                            <label class="form-label">Direction</label>
                            <select x-model="s.sort_direction" class="form-input"><option value="asc">Ascending</option><option value="desc">Descending</option></select>
                        </div>
                    </div>
                </section>

                {{-- STEP 3: grouping & totals --}}
                <section x-show="step === 2" class="space-y-8">
                    <div x-show="s.type !== 'tabular'" class="grid gap-4 md:grid-cols-2">
                        <div class="rounded-2xl border border-ink-200 p-4 dark:border-ink-700">
                            <h3 class="text-sm font-semibold text-ink-900 dark:text-white" x-text="s.type === 'matrix' ? 'Row headings' : 'Group records by'"></h3>
                            <p class="mb-3 text-xs text-ink-500">Each distinct value becomes a group with its own subtotals.</p>
                            <div class="grid grid-cols-[minmax(0,1fr)_130px] gap-2">
                                <select x-model="s.group_column" class="form-input">
                                    <option value="">— choose a column —</option>
                                    <template x-for="c in columns" :key="c.key"><option :value="c.key" x-text="label(c.key)" :selected="s.group_column === c.key"></option></template>
                                </select>
                                <select x-model="s.group_direction" class="form-input"><option value="asc">A → Z</option><option value="desc">Z → A</option></select>
                            </div>
                            <p class="form-error" x-show="err('group_column')" x-text="err('group_column')"></p>
                        </div>
                        <div x-show="s.type === 'matrix'" class="rounded-2xl border border-ink-200 p-4 dark:border-ink-700">
                            <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Column headings</h3>
                            <p class="mb-3 text-xs text-ink-500">Values of this column become the matrix columns (largest {{ \App\Services\Reports\ReportRunner::MAX_MATRIX_COLUMNS }} shown).</p>
                            <div class="grid grid-cols-[minmax(0,1fr)_130px] gap-2">
                                <select x-model="s.matrix_column" class="form-input">
                                    <option value="">— choose a column —</option>
                                    <template x-for="c in columns" :key="c.key"><option :value="c.key" x-text="label(c.key)" :selected="s.matrix_column === c.key"></option></template>
                                </select>
                                <select x-model="s.matrix_direction" class="form-input"><option value="asc">A → Z</option><option value="desc">Z → A</option></select>
                            </div>
                            <p class="form-error" x-show="err('matrix_column')" x-text="err('matrix_column')"></p>
                            <label class="form-label mt-3">Cell value</label>
                            <select x-model="s.matrix_measure" class="form-input">
                                <template x-for="m in measures" :key="m.key"><option :value="m.key" x-text="m.label" :selected="s.matrix_measure === m.key"></option></template>
                            </select>
                            <p class="form-error" x-show="err('matrix_measure')" x-text="err('matrix_measure')"></p>
                        </div>
                    </div>
                    <div x-show="s.type === 'tabular'" class="rounded-2xl bg-ink-50 p-4 text-sm text-ink-600 dark:bg-ink-800/50 dark:text-ink-300">
                        <x-heroicon-o-information-circle class="mr-1 inline h-4 w-4" /> Tabular reports list records without grouping. Choose <strong>Summary</strong> or <strong>Matrix</strong> in step 1 to group them.
                    </div>

                    <div>
                        <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Columns to total</h3>
                        <p class="mb-3 text-xs text-ink-500">Totals are calculated over all matching records (and per group for summary reports).</p>
                        <div x-show="numericColumns.length" class="table-wrap rounded-2xl border border-ink-200 dark:border-ink-700">
                            <table class="table table-compact">
                                <thead><tr><th>Numeric column</th><th class="text-center">Sum</th><th class="text-center">Average</th><th class="text-center">Lowest</th><th class="text-center">Largest</th></tr></thead>
                                <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                                <template x-for="c in numericColumns" :key="c.key">
                                    <tr>
                                        <td><span x-text="label(c.key)"></span> <span x-show="s.columns.includes(c.key)" class="badge badge-gray ml-1">shown</span></td>
                                        <template x-for="fn in ['sum','avg','min','max']" :key="fn">
                                            <td class="text-center"><input type="checkbox" class="form-checkbox" :checked="s.aggregates[fn].includes(c.key)" @change="toggleAgg(fn, c.key)"></td>
                                        </template>
                                    </tr>
                                </template>
                                </tbody>
                            </table>
                        </div>
                        <p x-show="!numericColumns.length" class="text-sm text-ink-400">This module has no numeric columns.</p>
                        <p class="form-error" x-show="errPrefix('aggregates')" x-text="errPrefix('aggregates')"></p>
                    </div>
                </section>

                {{-- STEP 4: filters --}}
                <section x-show="step === 3" class="space-y-4">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div>
                            <h3 class="text-sm font-semibold text-ink-900 dark:text-white">Advanced filters</h3>
                            <p class="text-xs text-ink-500">Only records matching the filters are included. <strong>AND</strong> binds tighter than <strong>OR</strong>: <code class="text-[11px]">A AND B OR C</code> means <code class="text-[11px]">(A AND B) OR C</code>.</p>
                        </div>
                        <button type="button" class="btn btn-secondary btn-sm" @click="addFilter()" :disabled="s.filters.length >= 30"><x-heroicon-m-plus class="h-4 w-4" /> Add filter</button>
                    </div>

                    <template x-for="(f, i) in s.filters" :key="f.uid">
                        <div>
                            <div x-show="i > 0" class="flex justify-center py-1">
                                <div class="inline-flex overflow-hidden rounded-full border border-ink-200 text-[11px] font-bold dark:border-ink-700">
                                    <button type="button" class="px-3 py-1 transition" :class="f.join !== 'OR' ? 'bg-ink-900 text-white dark:bg-brand-500 dark:text-ink-950' : 'text-ink-500 hover:bg-ink-50 dark:hover:bg-ink-800'" @click="f.join = 'AND'">AND</button>
                                    <button type="button" class="px-3 py-1 transition" :class="f.join === 'OR' ? 'bg-violet-600 text-white' : 'text-ink-500 hover:bg-ink-50 dark:hover:bg-ink-800'" @click="f.join = 'OR'">OR</button>
                                </div>
                            </div>
                            <div class="rounded-2xl border p-3 transition" :class="errPrefix('filters.' + i) ? 'border-rose-300 bg-rose-50/40 dark:border-rose-500/40 dark:bg-rose-500/5' : 'border-ink-200 dark:border-ink-700'">
                                <div class="grid gap-2 md:grid-cols-[minmax(0,1.2fr)_minmax(0,0.9fr)_minmax(0,1.6fr)_auto]">
                                    <div>
                                        <select x-model="f.field" @change="fieldChanged(f)" class="form-input form-input-sm">
                                            <option value="">— field —</option>
                                            <template x-for="grp in columnsGrouped" :key="grp.module">
                                                <optgroup :label="grp.module">
                                                    <template x-for="c in grp.columns" :key="c.key"><option :value="c.key" x-text="c.label" :selected="f.field === c.key"></option></template>
                                                </optgroup>
                                            </template>
                                        </select>
                                        <p class="form-error" x-show="err('filters.' + i + '.field')" x-text="err('filters.' + i + '.field')"></p>
                                    </div>
                                    <div>
                                        <select x-model="f.operator" class="form-input form-input-sm" :disabled="!f.field">
                                            <template x-for="o in operatorsFor(f.field)" :key="o.key"><option :value="o.key" x-text="o.label" :selected="f.operator === o.key"></option></template>
                                        </select>
                                        <p class="form-error" x-show="err('filters.' + i + '.operator')" x-text="err('filters.' + i + '.operator')"></p>
                                    </div>
                                    <div>
                                        {{-- list: chips + suggestions --}}
                                        <div x-show="opMode(f.operator) === 'list'">
                                            <div class="flex min-h-[34px] flex-wrap items-center gap-1 rounded-lg border border-ink-200 bg-white px-2 py-1 focus-within:border-brand-500 dark:border-ink-700 dark:bg-ink-900">
                                                <template x-for="(v, vi) in csv(f.value)" :key="vi + v">
                                                    <span class="inline-flex items-center gap-1 rounded-md bg-brand-100 px-1.5 py-0.5 text-xs text-brand-900">
                                                        <span x-text="v"></span>
                                                        <button type="button" @click="removeValue(f, vi)" class="text-brand-700 hover:text-rose-600">&times;</button>
                                                    </span>
                                                </template>
                                                <input type="text" x-model="f._draft" :list="'pick-' + f.uid" class="min-w-[90px] flex-1 border-0 bg-transparent p-0.5 text-xs focus:ring-0 focus:outline-none"
                                                       :placeholder="csv(f.value).length ? 'add another…' : (isDateField(f.field) ? 'YYYY-MM-DD, then Enter' : 'value, then Enter')"
                                                       @keydown.enter.prevent="addValue(f)" @keydown="if ($event.key === ',') { $event.preventDefault(); addValue(f) }" @blur="addValue(f)"
                                                       @keydown.backspace="if (!f._draft) removeValue(f, csv(f.value).length - 1)">
                                                <datalist :id="'pick-' + f.uid"><template x-for="p in (picklists[f.field] || [])" :key="p"><option :value="p"></option></template></datalist>
                                            </div>
                                            <p class="form-hint" x-show="['is', &quot;isn't&quot;].includes(f.operator)">Matches <em>any</em> of the values. Leave empty to match blank values.</p>
                                        </div>
                                        <input x-show="['single','days'].includes(opMode(f.operator))" x-model="f.value"
                                               :type="opMode(f.operator) === 'days' || fieldType(f.field) === 'number' ? 'number' : (isDateField(f.field) ? 'date' : 'text')"
                                               :placeholder="opMode(f.operator) === 'days' ? 'number of days' : 'value'" class="form-input form-input-sm">
                                        <div x-show="opMode(f.operator) === 'range'" class="flex items-center gap-2">
                                            <input :type="isDateField(f.field) ? 'date' : 'number'" :value="rangePart(f, 0)" @input="setRangePart(f, 0, $event.target.value)" class="form-input form-input-sm" placeholder="from">
                                            <span class="text-xs text-ink-400">and</span>
                                            <input :type="isDateField(f.field) ? 'date' : 'number'" :value="rangePart(f, 1)" @input="setRangePart(f, 1, $event.target.value)" class="form-input form-input-sm" placeholder="to">
                                        </div>
                                        <p x-show="opMode(f.operator) === 'none'" class="py-1.5 text-xs text-ink-400">No value needed.</p>
                                        <p class="form-error" x-show="err('filters.' + i + '.value')" x-text="err('filters.' + i + '.value')"></p>
                                    </div>
                                    <div class="flex items-start justify-end">
                                        <button type="button" class="btn-icon hover:!text-rose-600" @click="s.filters.splice(i, 1)" title="Remove filter"><x-heroicon-o-trash class="h-4 w-4" /></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <div x-show="!s.filters.length" class="rounded-2xl border border-dashed border-ink-300 p-10 text-center dark:border-ink-700">
                        <x-heroicon-o-funnel class="mx-auto h-8 w-8 text-ink-300" />
                        <p class="mt-2 text-sm text-ink-500">No filters — the report includes every record of the module.</p>
                        <button type="button" class="btn btn-secondary btn-sm mt-3" @click="addFilter()"><x-heroicon-m-plus class="h-4 w-4" /> Add filter</button>
                    </div>
                </section>

                {{-- STEP 5: chart --}}
                <section x-show="step === 4" class="space-y-6">
                    <label class="flex cursor-pointer items-center gap-3">
                        <input type="checkbox" class="form-checkbox" x-model="s.chart.enabled" @change="if (s.chart.enabled && !s.chart.x_axis) s.chart.x_axis = s.group_column || ''">
                        <span>
                            <span class="block text-sm font-semibold text-ink-900 dark:text-white">Show a chart on the report</span>
                            <span class="block text-xs text-ink-500">Charts group the matching records by a column (largest 50 categories).</span>
                        </span>
                    </label>
                    <div x-show="s.chart.enabled" class="space-y-5">
                        <div>
                            <span class="form-label">Chart type</span>
                            <div class="grid grid-cols-2 gap-2 sm:grid-cols-4 lg:grid-cols-7">
                                <template x-for="(lbl, key) in chartTypes" :key="key">
                                    <button type="button" @click="s.chart.type = key" class="rounded-xl border px-3 py-3 text-center text-xs font-medium transition"
                                            :class="s.chart.type === key ? 'border-brand-500 bg-brand-50 text-ink-900 ring-4 ring-brand-500/10 dark:bg-brand-500/10 dark:text-white' : 'border-ink-200 text-ink-600 hover:bg-ink-50 dark:border-ink-700 dark:text-ink-300 dark:hover:bg-ink-800'">
                                        <span class="mb-1 block text-lg" x-text="chartGlyph(key)"></span><span x-text="lbl"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                        <div class="grid gap-4 md:grid-cols-3">
                            <div>
                                <label class="form-label">Category (X-axis)</label>
                                <select x-model="s.chart.x_axis" class="form-input">
                                    <option value="">— choose —</option>
                                    <template x-for="c in columns" :key="c.key"><option :value="c.key" x-text="label(c.key)" :selected="s.chart.x_axis === c.key"></option></template>
                                </select>
                                <p class="form-error" x-show="err('chart.x_axis')" x-text="err('chart.x_axis')"></p>
                            </div>
                            <div>
                                <label class="form-label">Value (Y-axis)</label>
                                <select x-model="s.chart.measure" class="form-input">
                                    <template x-for="m in measures" :key="m.key"><option :value="m.key" x-text="m.label" :selected="s.chart.measure === m.key"></option></template>
                                </select>
                                <p class="form-error" x-show="err('chart.measure')" x-text="err('chart.measure')"></p>
                            </div>
                            <div x-show="['column','bar','line','area'].includes(s.chart.type)">
                                <label class="form-label">Split into series by <span class="text-ink-400">(optional)</span></label>
                                <select x-model="s.chart.series" class="form-input">
                                    <option value="">— none —</option>
                                    <template x-for="c in columns" :key="c.key"><option :value="c.key" x-text="label(c.key)" :selected="s.chart.series === c.key"></option></template>
                                </select>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- STEP 6: details --}}
                <section x-show="step === 5" class="max-w-2xl space-y-5">
                    <div>
                        <label class="form-label" for="r-name">Report name <span class="text-rose-500">*</span></label>
                        <input id="r-name" x-model="s.name" maxlength="255" class="form-input" placeholder="e.g. INQ generated by location">
                        <p class="form-error" x-show="err('name')" x-text="err('name')"></p>
                    </div>
                    <div>
                        <label class="form-label" for="r-desc">Description</label>
                        <textarea id="r-desc" x-model="s.description" maxlength="255" rows="3" class="form-input" placeholder="What is this report for?"></textarea>
                        <p class="form-error" x-show="err('description')" x-text="err('description')"></p>
                    </div>
                    <div>
                        <label class="form-label">Folder</label>
                        <div class="flex gap-2">
                            <select x-model="s.folder_id" class="form-input">
                                <option value="">Unfiled</option>
                                <template x-for="fo in folders" :key="fo.id"><option :value="fo.id" x-text="fo.name" :selected="s.folder_id === fo.id"></option></template>
                            </select>
                            <button type="button" class="btn btn-secondary shrink-0" @click="newFolderOpen = !newFolderOpen"><x-heroicon-m-folder-plus class="h-4 w-4" /> New</button>
                        </div>
                        <div x-show="newFolderOpen" x-collapse class="mt-2 flex gap-2">
                            <input x-model="newFolder" maxlength="100" class="form-input" placeholder="New folder name" @keydown.enter.prevent="createFolder()">
                            <button type="button" class="btn btn-brand shrink-0" @click="createFolder()" :disabled="!newFolder.trim()">Create</button>
                        </div>
                        <p class="form-error" x-show="err('folder_id') || folderError" x-text="err('folder_id') || folderError"></p>
                    </div>
                </section>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-3 border-t border-ink-100 px-5 py-4 dark:border-ink-800">
                <button type="button" class="btn btn-secondary" @click="go(step - 1)" :disabled="step === 0"><x-heroicon-m-arrow-left class="h-4 w-4" /> Back</button>
                <div class="flex items-center gap-2">
                    <span class="hidden text-xs text-rose-600 sm:inline" x-show="Object.keys(errors).length">Please fix the highlighted steps.</span>
                    <button type="button" class="btn btn-secondary" x-show="step < steps.length - 1" @click="go(step + 1)">Next <x-heroicon-m-arrow-right class="h-4 w-4" /></button>
                    <button type="submit" class="btn btn-brand" :disabled="saving">
                        <svg x-show="saving" class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" class="opacity-25"/><path d="M4 12a8 8 0 018-8" stroke="currentColor" stroke-width="3" class="opacity-75"/></svg>
                        <x-heroicon-m-check x-show="!saving" class="h-4 w-4" />
                        {{ $editing ? 'Save & run' : 'Create & run' }}
                    </button>
                </div>
            </div>
        </form>

        {{-- Live preview --}}
        <div class="card">
            <div class="card-header">
                <div>
                    <h2 class="card-title flex items-center gap-2"><x-heroicon-o-eye class="h-4 w-4 text-brand-500" /> Live preview</h2>
                    <p class="mt-0.5 text-xs text-ink-500">
                        <span x-show="preview.data && !preview.error"><strong class="text-ink-700 dark:text-ink-200" x-text="Number(preview.data?.count || 0).toLocaleString()"></strong> matching records · first 10 shown</span>
                        <span x-show="!preview.data && !preview.error">First 10 matching records with the current settings.</span>
                    </p>
                </div>
                <div class="flex items-center gap-3">
                    <label class="flex items-center gap-2 text-xs text-ink-500"><input type="checkbox" class="form-checkbox" x-model="preview.auto"> Auto-refresh</label>
                    <button type="button" class="btn btn-secondary btn-sm" @click="refreshPreview()" :disabled="preview.loading">
                        <x-heroicon-m-arrow-path class="h-4 w-4" ::class="preview.loading && 'animate-spin'" /> Refresh
                    </button>
                </div>
            </div>
            <div class="relative">
                <div x-show="preview.loading" class="absolute inset-0 z-[2] flex items-center justify-center bg-white/60 dark:bg-ink-900/60"><span class="text-xs text-ink-500">Loading…</span></div>
                <p x-show="preview.error" class="p-5 text-sm text-rose-600" x-text="preview.error"></p>
                <div x-show="preview.data && preview.data.groups && preview.data.groups.length" class="flex flex-wrap gap-1.5 border-b border-ink-100 px-5 py-3 dark:border-ink-800">
                    <span class="text-xs text-ink-500">Groups:</span>
                    <template x-for="g in (preview.data?.groups || [])" :key="g.label"><span class="badge badge-amber"><span x-text="g.label"></span> · <span x-text="g.count.toLocaleString()"></span></span></template>
                </div>
                <div class="table-wrap" x-show="preview.data && !preview.error">
                    <table class="table table-compact">
                        <thead><tr><template x-for="c in (preview.data?.columns || [])" :key="c.key"><th x-text="c.label"></th></template></tr></thead>
                        <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        <template x-for="(row, ri) in (preview.data?.rows || [])" :key="ri">
                            <tr><template x-for="(v, ci) in row" :key="ci"><td class="max-w-[220px] truncate" x-text="v === '' ? '—' : v"></td></template></tr>
                        </template>
                        <tr x-show="preview.data && !preview.data.rows.length"><td :colspan="preview.data?.columns.length || 1" class="py-6 text-center text-ink-400">No records match.</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            window.__reportBuilderConfig = @json($config);

            function reportBuilder(config) {
                const stepKeys = [
                    ['module', 'related', 'type'],
                    ['columns', 'sort_column', 'sort_direction'],
                    ['group_column', 'group_direction', 'matrix_column', 'matrix_direction', 'matrix_measure', 'aggregates'],
                    ['filters'],
                    ['chart'],
                    ['name', 'description', 'folder_id'],
                ];
                const AGG = { sum: 'Sum', avg: 'Average', min: 'Lowest', max: 'Largest' };
                const uid = () => 'f' + Math.random().toString(36).slice(2);

                return {
                    s: config.state,
                    modules: config.modules,
                    operators: config.operators,
                    chartTypes: config.chartTypes,
                    folders: config.folders,
                    urls: config.urls,
                    step: 0,
                    steps: [],
                    errors: {},
                    saving: false,
                    colSearch: '',
                    dragIndex: null,
                    picklists: {},
                    newFolderOpen: false,
                    newFolder: '',
                    folderError: '',
                    preview: { loading: false, data: null, error: '', auto: true, timer: null },
                    reportTypes: [
                        { key: 'tabular', label: 'Tabular', description: 'A plain list of records with optional totals.' },
                        { key: 'summary', label: 'Summary', description: 'Records grouped by a column with counts, subtotals and a chart.' },
                        { key: 'matrix', label: 'Matrix', description: 'A cross-tab: one column grouped down, another across, with totals.' },
                    ],

                    init() {
                        this.s.filters.forEach((f) => { f._draft = ''; this.loadPicklist(f.field); });
                        this.steps = [
                            { key: 'source', title: 'Source', hint: () => this.module ? this.module.label : '' },
                            { key: 'columns', title: 'Columns', hint: () => this.s.columns.length + ' selected' },
                            { key: 'grouping', title: 'Grouping & totals', hint: () => this.s.type === 'tabular' ? (this.aggCount() ? this.aggCount() + ' totals' : 'optional') : (this.s.group_column ? this.label(this.s.group_column) : 'required') },
                            { key: 'filters', title: 'Filters', hint: () => this.s.filters.length ? this.s.filters.length + ' filter(s)' : 'none' },
                            { key: 'chart', title: 'Chart', hint: () => this.s.chart.enabled ? (this.chartTypes[this.s.chart.type] || '') : 'off' },
                            { key: 'details', title: 'Details', hint: () => this.s.name ? this.s.name.slice(0, 22) : 'name & folder' },
                        ];
                        this.$watch('s', () => this.schedulePreview());
                        this.refreshPreview();
                    },

                    get module() { return this.modules.find((m) => m.key === this.s.module) || null; },
                    get columns() {
                        if (!this.module) return [];
                        const tables = [this.s.module, ...this.s.related];
                        return this.module.columns.filter((c) => tables.includes(c.table));
                    },
                    get colMap() { return Object.fromEntries(this.columns.map((c) => [c.key, c])); },
                    get columnsGrouped() { return this.group(this.columns); },
                    get availableGrouped() {
                        const q = this.colSearch.trim().toLowerCase();
                        return this.group(this.columns.filter((c) => !this.s.columns.includes(c.key) && (!q || c.label.toLowerCase().includes(q) || c.column.toLowerCase().includes(q))));
                    },
                    get numericColumns() { return this.columns.filter((c) => c.type === 'number'); },
                    get measures() {
                        const out = [{ key: 'count', label: 'Record count' }];
                        for (const [fn, lbl] of Object.entries(AGG)) {
                            this.numericColumns.forEach((c) => out.push({ key: fn + ':' + c.key, label: lbl + ' of ' + this.label(c.key) }));
                        }
                        return out;
                    },

                    group(cols) {
                        const groups = [];
                        cols.forEach((c) => {
                            let g = groups.find((x) => x.module === c.module);
                            if (!g) groups.push(g = { module: c.module, columns: [] });
                            g.columns.push(c);
                        });
                        return groups;
                    },
                    label(key) {
                        const c = this.colMap[key];
                        if (!c) return key;
                        return c.table === this.s.module ? c.label : c.label + ' (' + c.module + ')';
                    },
                    fieldType(key) { return this.colMap[key]?.type || 'string'; },
                    isDateField(key) { return ['date', 'datetime'].includes(this.fieldType(key)); },
                    typeIcon(t) { return { number: '#', date: 'D', datetime: 'DT' }[t] || 'Aa'; },
                    chartGlyph(k) { return { column: '▮▮', bar: '☰', line: '⟋', area: '◢', pie: '◔', donut: '◎', funnel: '▽' }[k] || '▮'; },
                    aggCount() { return Object.values(this.s.aggregates).reduce((n, a) => n + a.length, 0); },
                    csv(v) { return String(v ?? '').split(',').map((x) => x.trim()).filter((x) => x !== ''); },

                    go(i) { if (i >= 0 && i < this.steps.length) { this.step = i; window.scrollTo({ top: 0, behavior: 'smooth' }); } },

                    selectModule(key) {
                        if (this.s.module === key) return;
                        this.s.module = key;
                        this.s.related = [];
                        this.prune();
                        if (!this.s.columns.length) this.s.columns = [...(this.module.defaults || [])];
                    },
                    toggleRelated(key) {
                        this.s.related = this.s.related.includes(key) ? this.s.related.filter((r) => r !== key) : [...this.s.related, key];
                        this.prune();
                    },
                    prune() {
                        const ok = (k) => !!this.colMap[k];
                        this.s.columns = this.s.columns.filter(ok);
                        this.s.filters = this.s.filters.filter((f) => !f.field || ok(f.field));
                        for (const fn of Object.keys(this.s.aggregates)) this.s.aggregates[fn] = this.s.aggregates[fn].filter((k) => ok(k) && this.colMap[k].type === 'number');
                        for (const k of ['sort_column', 'group_column', 'matrix_column']) if (this.s[k] && !ok(this.s[k])) this.s[k] = '';
                        if (this.s.chart.x_axis && !ok(this.s.chart.x_axis)) this.s.chart.x_axis = '';
                        if (this.s.chart.series && !ok(this.s.chart.series)) this.s.chart.series = '';
                        const measureOk = (m) => m === 'count' || ok(m.split(':')[1]);
                        if (!measureOk(this.s.chart.measure)) this.s.chart.measure = 'count';
                        if (!measureOk(this.s.matrix_measure)) this.s.matrix_measure = 'count';
                    },

                    addColumn(key) { if (!this.s.columns.includes(key) && this.s.columns.length < 60) this.s.columns.push(key); },
                    addAllVisible() { this.availableGrouped.flatMap((g) => g.columns).forEach((c) => this.addColumn(c.key)); },
                    move(i, d) {
                        const j = i + d;
                        if (j < 0 || j >= this.s.columns.length) return;
                        const cols = [...this.s.columns];
                        [cols[i], cols[j]] = [cols[j], cols[i]];
                        this.s.columns = cols;
                    },
                    dragOver(i) {
                        if (this.dragIndex === null || this.dragIndex === i) return;
                        const cols = [...this.s.columns];
                        const [moved] = cols.splice(this.dragIndex, 1);
                        cols.splice(i, 0, moved);
                        this.s.columns = cols;
                        this.dragIndex = i;
                    },
                    toggleAgg(fn, key) {
                        const a = this.s.aggregates[fn];
                        this.s.aggregates[fn] = a.includes(key) ? a.filter((k) => k !== key) : [...a, key];
                    },

                    operatorsFor(field) { const t = this.fieldType(field); return this.operators.filter((o) => o.types.includes(t)); },
                    opMode(op) { return this.operators.find((o) => o.key === op)?.mode || 'list'; },
                    addFilter() { this.s.filters.push({ uid: uid(), field: '', operator: 'is', value: '', join: 'AND', _draft: '' }); },
                    fieldChanged(f) {
                        if (!this.operatorsFor(f.field).some((o) => o.key === f.operator)) f.operator = this.operatorsFor(f.field)[0]?.key || 'is';
                        this.loadPicklist(f.field);
                    },
                    async loadPicklist(field) {
                        if (!field || this.picklists[field] !== undefined || this.fieldType(field) !== 'string') return;
                        this.picklists[field] = [];
                        try {
                            const res = await window.axios.get(this.urls.picklist.replace('__FIELD__', encodeURIComponent(field)));
                            this.picklists[field] = Array.isArray(res.data) ? res.data.slice(0, 300) : [];
                        } catch (e) { /* suggestions are optional */ }
                    },
                    addValue(f) {
                        const parts = this.csv(f._draft);
                        if (!parts.length) { f._draft = ''; return; }
                        const vals = this.csv(f.value);
                        parts.forEach((p) => { if (!vals.includes(p)) vals.push(p); });
                        f.value = vals.join(',');
                        f._draft = '';
                    },
                    removeValue(f, i) { const v = this.csv(f.value); if (i < 0) return; v.splice(i, 1); f.value = v.join(','); },
                    rangePart(f, i) { return String(f.value ?? '').split(',')[i]?.trim() || ''; },
                    setRangePart(f, i, val) { const p = [this.rangePart(f, 0), this.rangePart(f, 1)]; p[i] = val; f.value = p.join(','); },

                    payload() {
                        const s = this.s;
                        return {
                            name: s.name, description: s.description, folder_id: s.folder_id || null,
                            module: s.module, related: s.related, type: s.type, columns: s.columns,
                            sort_column: s.sort_column || null, sort_direction: s.sort_direction,
                            group_column: s.type !== 'tabular' ? (s.group_column || null) : null, group_direction: s.group_direction,
                            matrix_column: s.type === 'matrix' ? (s.matrix_column || null) : null, matrix_direction: s.matrix_direction, matrix_measure: s.matrix_measure,
                            aggregates: s.aggregates,
                            filters: s.filters.filter((f) => f.field).map((f) => ({ field: f.field, operator: f.operator, value: this.opMode(f.operator) === 'none' ? '' : String(f.value ?? '') + (f._draft ? ',' + f._draft : ''), join: f.join || 'AND' })),
                            chart: { enabled: !!s.chart.enabled, type: s.chart.type, x_axis: s.chart.x_axis || null, measure: s.chart.measure, series: s.chart.series || null },
                        };
                    },

                    err(key) { return this.errors[key]?.[0] || ''; },
                    errPrefix(prefix) { const k = Object.keys(this.errors).find((e) => e === prefix || e.startsWith(prefix + '.')); return k ? this.errors[k][0] : ''; },
                    stepHasError(i) { return Object.keys(this.errors).some((e) => stepKeys[i].some((p) => e === p || e.startsWith(p + '.'))); },

                    async save() {
                        this.s.filters.forEach((f) => this.addValue(f));
                        this.saving = true;
                        this.errors = {};
                        try {
                            const res = await window.axios({ url: this.urls.save, method: this.urls.method, data: this.payload() });
                            window.location = res.data.redirect;
                        } catch (e) {
                            this.saving = false;
                            if (e.response?.status === 422) {
                                this.errors = e.response.data.errors || {};
                                const first = stepKeys.findIndex((_, i) => this.stepHasError(i));
                                if (first >= 0) this.go(first);
                                window.toast('Please check the highlighted fields.', 'error');
                            } else {
                                window.toast(e.response?.data?.message || 'The report could not be saved.', 'error');
                            }
                        }
                    },

                    schedulePreview() {
                        if (!this.preview.auto) return;
                        clearTimeout(this.preview.timer);
                        this.preview.timer = setTimeout(() => this.refreshPreview(), 900);
                    },
                    async refreshPreview() {
                        if (!this.s.columns.length) { this.preview.data = null; this.preview.error = 'Select at least one column to see a preview.'; return; }
                        this.preview.loading = true;
                        try {
                            const res = await window.axios.post(this.urls.preview, this.payload());
                            this.preview.data = res.data;
                            this.preview.error = '';
                        } catch (e) {
                            const errs = e.response?.data?.errors;
                            this.preview.error = errs ? 'Preview unavailable: ' + Object.values(errs)[0][0] : (e.response?.status === 429 ? 'Too many previews — wait a moment.' : (e.response?.data?.message || 'Preview unavailable.'));
                        } finally {
                            this.preview.loading = false;
                        }
                    },

                    async createFolder() {
                        const name = this.newFolder.trim();
                        if (!name) return;
                        this.folderError = '';
                        try {
                            const res = await window.axios.post(this.urls.folder, { folder_name: name });
                            this.folders.push(res.data);
                            this.folders.sort((a, b) => a.name.localeCompare(b.name));
                            this.s.folder_id = res.data.id;
                            this.newFolder = '';
                            this.newFolderOpen = false;
                            window.toast('Folder created.');
                        } catch (e) {
                            this.folderError = e.response?.data?.errors?.folder_name?.[0] || 'The folder could not be created.';
                        }
                    },
                };
            }
        </script>
    @endpush
</x-layouts.app>