@extends('layouts.app')

@php
    $isEdit = isset($document);
    $selectedScope = old('access_scope', $document->access_scope ?? 'global');
    $selectedRegions = old('region_ids', $isEdit ? $document->regions->pluck('id')->all() : []);
    $selectedCountries = old('country_ids', $isEdit ? $document->countries->pluck('id')->all() : []);
    $selectedOems = old('oem_ids', $isEdit ? $document->oems->pluck('id')->all() : []);
    $selectedUsers = old('user_ids', $isEdit ? $document->users->pluck('id')->all() : []);
@endphp

@section('title', ($isEdit ? 'Edit' : 'Upload') . ' document · DocShare')
@section('section', 'Document workspace')
@section('subtitle', $isEdit ? 'Update metadata, permissions, and lifecycle settings.' : 'Add a protected document to your library with the right controls.')

@section('content')
<div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
    <div>
        <a href="{{ route('admin.documents.index') }}" class="inline-flex items-center gap-2 text-sm font-semibold text-teal-700 transition hover:text-teal-900">&larr; Back to documents</a>
        <div class="mt-5 flex items-center gap-3">
            <div class="grid h-12 w-12 place-items-center rounded-2xl bg-teal-50 text-teal-700">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M13 2v7h7M8 13h8M8 17h6"/></svg>
            </div>
            <div><div class="eyebrow">{{ $isEdit ? 'Edit document' : 'New document' }}</div><h1 class="display mt-1 text-3xl font-bold tracking-tight text-slate-900">{{ $isEdit ? 'Refine document settings' : 'Add a document' }}</h1></div>
        </div>
        <p class="mt-3 max-w-2xl text-slate-500">{{ $isEdit ? 'Keep document information, access rules, and publishing dates accurate.' : 'Upload once, then control exactly who can see, print, or download it.' }}</p>
    </div>
    <div class="flex items-center gap-2 self-start rounded-full border border-slate-200 bg-white px-3 py-2 text-xs font-semibold text-slate-500 shadow-sm sm:self-auto"><span class="h-2 w-2 rounded-full bg-emerald-500"></span> All changes are protected</div>
</div>

@if($errors->any())
    <div class="mt-7 flex gap-3 rounded-2xl border border-red-200 bg-red-50 p-5 text-red-800" role="alert">
        <svg class="mt-0.5 h-5 w-5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16h.01"/></svg>
        <div><p class="font-semibold">Please review the form</p><ul class="mt-1 list-disc space-y-1 pl-5 text-sm">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
    </div>
@endif

<form id="document-form" method="post" enctype="multipart/form-data" action="{{ $isEdit ? route('admin.documents.update', $document) : route('admin.documents.store') }}" class="mt-8">
    @csrf
    @if($isEdit) @method('put') @endif
    <div class="grid gap-7 xl:grid-cols-[minmax(0,1fr)_320px]">
        <div class="min-w-0 space-y-7">

            @if(!$isEdit)
            <section class="surface overflow-hidden">
                <div class="border-b border-slate-100 px-6 py-5 sm:px-7">
                    <div class="flex items-start gap-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-blue-50 text-blue-700 text-sm font-bold">01</span>
                        <div><h2 class="display text-lg font-bold text-slate-900">Upload protected file</h2><p class="mt-1 text-sm text-slate-500">PDF, Word, or Excel files up to 100 MB.</p></div>
                    </div>
                </div>
                <div class="p-6 sm:p-7">
                    <label id="drop-zone" for="file-input" class="group flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/70 px-6 py-10 text-center transition hover:border-teal-400 hover:bg-teal-50/40">
                        <span class="grid h-14 w-14 place-items-center rounded-2xl bg-white text-teal-700 shadow-sm ring-1 ring-slate-100">
                            <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 16V4M8 8l4-4 4 4M5 14v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>
                        </span>
                        <span class="mt-4 text-sm font-bold text-slate-800">Drop your document here, or <span class="text-teal-700">browse files</span></span>
                        <span class="mt-2 text-xs text-slate-400">Supported: PDF, DOC, DOCX, XLS, XLSX &middot; Max 100 MB</span>
                        <span id="file-name" class="mt-3 hidden rounded-lg bg-teal-50 px-3 py-2 text-sm font-semibold text-teal-800"></span>
                    </label>
                    <input id="file-input" name="file" type="file" required accept=".pdf,.doc,.docx,.xls,.xlsx" class="sr-only">
                </div>
            </section>
            @else
            <section class="surface overflow-hidden p-6 sm:p-7">
                <div class="flex items-start gap-4">
                    <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-emerald-50 text-emerald-700"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M13 2v7h7M8 13h8M8 17h5"/></svg></span>
                    <div class="min-w-0">
                        <p class="text-xs font-bold uppercase tracking-wider text-emerald-700">Current protected file</p>
                        <p class="mt-1 truncate font-semibold text-slate-800">{{ $document->currentVersion?->original_filename ?? 'File unavailable' }}</p>
                        <p class="mt-1 text-sm text-slate-500">Version {{ $document->currentVersion?->version ?? '—' }} &middot; {{ $document->currentVersion?->file_size ? number_format($document->currentVersion->file_size / 1048576, 2).' MB' : 'Size unavailable' }}</p>
                    </div>
                </div>
                <p class="mt-5 rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">To replace the file, save changes first and upload a new version from the document list.</p>
            </section>
            @endif

            <section class="surface overflow-hidden">
                <div class="border-b border-slate-100 px-6 py-5 sm:px-7">
                    <div class="flex items-start gap-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-teal-50 text-teal-700 text-sm font-bold">{{ $isEdit ? '01' : '02' }}</span>
                        <div><h2 class="display text-lg font-bold text-slate-900">Document information</h2><p class="mt-1 text-sm text-slate-500">Use clear identifiers so your team can find this document quickly.</p></div>
                    </div>
                </div>
                <div class="grid gap-5 p-6 sm:grid-cols-2 sm:p-7">
                    <label class="block text-sm font-semibold text-slate-700">Document ID <span class="text-red-500">*</span>
                        <input id="document-id" name="document_id" value="{{ old('document_id', $document->document_id ?? '') }}" required placeholder="e.g. ENG-MAN-001" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                    </label>
                    <label class="block text-sm font-semibold text-slate-700">Version <span class="text-red-500">*</span>
                        <input id="version" name="version" value="{{ old('version', $document->version ?? '') }}" required placeholder="e.g. 1.0" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                    </label>
                    <label class="block text-sm font-semibold text-slate-700 sm:col-span-2">Document title <span class="text-red-500">*</span>
                        <input id="title" name="title" value="{{ old('title', $document->title ?? '') }}" required placeholder="Give this document a descriptive name" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                    </label>
                    <label class="block text-sm font-semibold text-slate-700">Category <span class="text-red-500">*</span>
                        <select id="category" name="category_id" required class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                            <option value="">Select a category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @selected(old('category_id', $document->category_id ?? '') == $category->id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-sm font-semibold text-slate-700">Publication status
                        <select id="status" name="status" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                            @foreach(['draft','pending_review','published','archived','expired'] as $st)
                                <option value="{{ $st }}" @selected(old('status', $document->status ?? 'draft') === $st)>{{ str_replace('_',' ',ucfirst($st)) }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-sm font-semibold text-slate-700 sm:col-span-2">Description <span class="font-normal text-slate-400">(optional)</span>
                        <textarea id="description" name="description" rows="4" placeholder="Briefly explain what this document contains and who it is for..." class="form-input mt-2 w-full resize-y rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">{{ old('description', $document->description ?? '') }}</textarea>
                    </label>
                </div>
            </section>

            <section class="surface overflow-hidden">
                <div class="border-b border-slate-100 px-6 py-5 sm:px-7">
                    <div class="flex items-start gap-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-violet-50 text-violet-700 text-sm font-bold">{{ $isEdit ? '02' : '03' }}</span>
                        <div><h2 class="display text-lg font-bold text-slate-900">Access scope</h2><p class="mt-1 text-sm text-slate-500">Choose who should be able to discover this document.</p></div>
                    </div>
                </div>
                <div class="p-6 sm:p-7">
                    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach([['global','Everyone','All active users can access it.'],['region','Regions','Limit by business region.'],['country','Countries','Limit to selected countries.'],['oem','OEMs','Share with OEM partners.'],['users','Specific users','Choose individual accounts.']] as [$scope,$label,$desc])
                        <label class="relative cursor-pointer">
                            <input type="radio" name="access_scope" value="{{ $scope }}" @checked($selectedScope === $scope) class="peer sr-only scope-option">
                            <span class="flex h-full min-h-[86px] flex-col rounded-2xl border border-slate-200 bg-white p-4 transition peer-checked:border-teal-500 peer-checked:bg-teal-50/60 peer-checked:ring-2 peer-checked:ring-teal-500/10 hover:border-teal-300">
                                <span class="text-sm font-bold text-slate-800">{{ $label }}</span>
                                <span class="mt-1 text-xs leading-5 text-slate-500">{{ $desc }}</span>
                            </span>
                        </label>
                        @endforeach
                    </div>

                    <div id="scope-help" class="mt-5 rounded-xl border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
                        <span class="font-semibold">Global access:</span> no additional audience selection is required.
                    </div>

                    <div id="scope-panels" class="mt-5 space-y-4">
                        @foreach([['region_ids','Regions','region',$regions,$selectedRegions],['country_ids','Countries','country',$countries,$selectedCountries],['oem_ids','OEMs','oem',$oems,$selectedOems],['user_ids','Users','users',$users,$selectedUsers]] as [$name,$label,$scope,$items,$selected])
                        <div data-scope-panel="{{ $scope }}" class="hidden rounded-2xl border border-slate-200 bg-slate-50/60 p-4 sm:p-5">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <div>
                                    <label class="text-sm font-bold text-slate-800">{{ $label }}</label>
                                    <p class="mt-0.5 text-xs text-slate-500">Select one or more {{ strtolower($label) }} with access.</p>
                                </div>
                                <div class="flex flex-wrap items-center gap-2">
                                    <span data-picker-count="{{ $name }}" class="rounded-full bg-teal-50 px-2.5 py-1 text-xs font-bold text-teal-700">0 selected</span>
                                    <button type="button" data-picker-all="{{ $name }}" class="rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-600 transition hover:border-teal-300 hover:text-teal-700">Select all</button>
                                    <button type="button" data-picker-clear="{{ $name }}" class="rounded-lg border border-slate-200 bg-white px-2.5 py-1 text-xs font-semibold text-slate-600 transition hover:border-red-200 hover:text-red-600">Clear</button>
                                </div>
                            </div>
                            <input type="search" data-picker-search="{{ $name }}" placeholder="Search {{ strtolower($label) }}…" class="mt-3 w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm outline-none transition focus:border-teal-500 focus:ring-4 focus:ring-teal-500/10">
                            <div data-picker="{{ $name }}" class="mt-3 grid max-h-60 grid-cols-1 gap-2 overflow-y-auto pr-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
                                @foreach($items as $item)
                                <label data-picker-item class="group flex cursor-pointer items-center gap-3 rounded-xl border border-slate-200 bg-white px-3 py-2.5 transition hover:border-teal-300 has-[:checked]:border-teal-500 has-[:checked]:bg-teal-50/70 has-[:checked]:ring-1 has-[:checked]:ring-teal-500/30">
                                    <input type="checkbox" name="{{ $name }}[]" value="{{ $item->id }}" @checked(in_array($item->id, $selected)) class="peer sr-only">
                                    <span class="grid h-5 w-5 flex-none place-items-center rounded-md border border-slate-300 bg-white transition peer-checked:border-teal-600 peer-checked:bg-teal-600">
                                        <svg class="h-3 w-3 text-white opacity-0 transition peer-checked:opacity-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><path d="M20 6 9 17l-5-5"/></svg>
                                    </span>
                                    <span class="min-w-0 flex-1">
                                        <span class="block truncate text-sm font-semibold text-slate-700">{{ $item->name }}</span>
                                        @if(($item->code ?? null) !== null)<span class="block text-[11px] font-bold uppercase tracking-wide text-slate-400">{{ $item->code }}</span>@endif
                                        @if(($item->email ?? null) !== null)<span class="block truncate text-[11px] text-slate-400">{{ $item->email }}</span>@endif
                                    </span>
                                </label>
                                @endforeach
                            </div>
                            <p data-picker-empty="{{ $name }}" class="mt-3 hidden rounded-lg bg-white px-3 py-4 text-center text-xs text-slate-400">No {{ strtolower($label) }} match your search.</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>

            <section class="surface overflow-hidden">
                <div class="border-b border-slate-100 px-6 py-5 sm:px-7">
                    <div class="flex items-start gap-3">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-amber-50 text-amber-700 text-sm font-bold">{{ $isEdit ? '03' : '04' }}</span>
                        <div><h2 class="display text-lg font-bold text-slate-900">Permissions &amp; lifecycle</h2><p class="mt-1 text-sm text-slate-500">Set customer actions and automate document availability.</p></div>
                    </div>
                </div>
                <div class="p-6 sm:p-7">
                    <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Customer permissions</p>
                    <div class="mt-3 grid gap-3 sm:grid-cols-3">
                        @foreach(['can_view'=>'View','can_print'=>'Print','can_download'=>'Download'] as $permName=>$permLabel)
                        <label class="flex cursor-pointer items-center justify-between rounded-xl border border-slate-200 bg-white p-4 transition hover:border-teal-300">
                            <span class="flex items-center gap-3">
                                <span class="grid h-8 w-8 place-items-center rounded-lg bg-slate-100 text-slate-500"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6Z"/><circle cx="12" cy="12" r="2"/></svg></span>
                                <span class="text-sm font-semibold text-slate-700">{{ $permLabel }}</span>
                            </span>
                            <span class="relative">
                                <input type="checkbox" name="{{ $permName }}" value="1" @checked(old($permName, $document->$permName ?? ($permName === 'can_view'))) class="peer sr-only">
                                <span class="block h-6 w-11 rounded-full bg-slate-200 transition peer-checked:bg-teal-600"></span>
                                <span class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition peer-checked:translate-x-5"></span>
                            </span>
                        </label>
                        @endforeach
                    </div>

                    <div class="mt-7 grid gap-5 sm:grid-cols-2">
                        <label class="block text-sm font-semibold text-slate-700">Publish date <span class="font-normal text-slate-400">(optional)</span>
                            <input type="datetime-local" name="publish_at" value="{{ old('publish_at', $isEdit && $document->publish_at ? $document->publish_at->format('Y-m-d\TH:i') : '') }}" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                        </label>
                        <label class="block text-sm font-semibold text-slate-700">Expiry date <span class="font-normal text-slate-400">(optional)</span>
                            <input type="datetime-local" name="expires_at" value="{{ old('expires_at', $isEdit && $document->expires_at ? $document->expires_at->format('Y-m-d\TH:i') : '') }}" class="form-input mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">
                        </label>
                    </div>

                    <label class="mt-5 block text-sm font-semibold text-slate-700">Internal notes <span class="font-normal text-slate-400">(optional)</span>
                        <textarea name="notes" rows="3" placeholder="Add notes for administrators only..." class="form-input mt-2 w-full resize-y rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm">{{ old('notes', $document->notes ?? '') }}</textarea>
                    </label>
                </div>
            </section>

            <div class="flex flex-col-reverse gap-3 border-t border-slate-200 pt-6 sm:flex-row sm:items-center sm:justify-between">
                <a href="{{ route('admin.documents.index') }}" class="btn-secondary inline-flex justify-center text-sm">Cancel</a>
                <button type="submit" class="btn-primary inline-flex items-center justify-center gap-2 px-6">{{ $isEdit ? 'Save changes' : 'Upload &amp; save' }} <span>&rarr;</span></button>
            </div>
        </div>

        <aside class="xl:sticky xl:top-6 xl:self-start">
            <section class="surface overflow-hidden">
                <div class="bg-[#0d1b2a] px-5 py-5 text-white">
                    <p class="text-xs font-bold uppercase tracking-[.16em] text-teal-300">Live summary</p>
                    <h2 id="summary-title" class="display mt-2 truncate text-xl font-bold">Untitled document</h2>
                    <p id="summary-id" class="mt-1 text-xs text-slate-400">No document ID yet</p>
                </div>
                <div class="space-y-5 p-5">
                    <div>
                        <p class="text-xs font-bold uppercase tracking-wider text-slate-400">Setup progress</p>
                        <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-100">
                            <div id="progress-bar" class="h-full w-1/4 rounded-full bg-teal-500 transition-all"></div>
                        </div>
                        <p id="progress-text" class="mt-2 text-xs text-slate-500">1 of 5 items complete</p>
                    </div>
                    <div class="space-y-3 border-t border-slate-100 pt-5">
                        <div class="flex items-center justify-between text-sm"><span class="text-slate-500">Category</span><span id="summary-category" class="truncate font-semibold text-slate-800">Not selected</span></div>
                        <div class="flex items-center justify-between text-sm"><span class="text-slate-500">Version</span><span id="summary-version" class="font-semibold text-slate-800">&mdash;</span></div>
                        <div class="flex items-center justify-between text-sm"><span class="text-slate-500">Status</span><span id="summary-status" class="rounded-full bg-slate-100 px-2.5 py-1 text-xs font-bold capitalize text-slate-600">Draft</span></div>
                        <div class="flex items-center justify-between text-sm"><span class="text-slate-500">Audience</span><span id="summary-scope" class="font-semibold capitalize text-teal-700">Everyone</span></div>
                        <div class="flex items-center justify-between text-sm"><span class="text-slate-500">File</span><span id="summary-file" class="max-w-[170px] truncate font-semibold text-slate-800">Not uploaded</span></div>
                    </div>
                    <div class="rounded-xl bg-teal-50 p-4"><p class="text-xs leading-5 text-teal-900">You can change status and access rules later from the documents workspace.</p></div>
                </div>
            </section>
        </aside>
    </div>
</form>
@endsection

@push('head')
<style>
    .form-input { transition: border-color .2s, box-shadow .2s, background-color .2s; }
    .form-input:focus { outline: none; border-color: #14a3a6; background: #fff; box-shadow: 0 0 0 4px rgba(20,163,166,.1); }
    #drop-zone.is-dragging { border-color: #147d92; background: #ecfeff; }
</style>
@endpush

@push('scripts')
<script>
(() => {
    const form = document.getElementById('document-form');
    const fileInput = document.getElementById('file-input');
    const dropZone = document.getElementById('drop-zone');
    const fileName = document.getElementById('file-name');
    const scopeHelp = document.getElementById('scope-help');

    const scopeLabels = { global:'Everyone', region:'Selected regions', country:'Selected countries', oem:'Selected OEMs', users:'Specific users' };
    const scopeDesc = {
        global: '<span class="font-semibold">Global access:</span> no additional audience selection is required.',
        region: '<span class="font-semibold">Regional access:</span> choose one or more regions below.',
        country: '<span class="font-semibold">Country access:</span> choose one or more countries below.',
        oem: '<span class="font-semibold">OEM access:</span> choose one or more OEM partners below.',
        users: '<span class="font-semibold">Individual access:</span> choose the users who should receive access.'
    };

    const setFile = (file) => {
        if (!file) return;
        fileName.textContent = file.name + ' \u00B7 ' + (file.size / 1048576).toFixed(2) + ' MB';
        fileName.classList.remove('hidden');
        document.getElementById('summary-file').textContent = file.name;
    };

    if (fileInput) {
        fileInput.addEventListener('change', () => setFile(fileInput.files[0]));
        ['dragenter', 'dragover'].forEach(e => dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.classList.add('is-dragging'); }));
        ['dragleave', 'drop'].forEach(e => dropZone.addEventListener(e, ev => { ev.preventDefault(); dropZone.classList.remove('is-dragging'); }));
        dropZone.addEventListener('drop', e => { const f = e.dataTransfer.files[0]; if (f) { fileInput.files = e.dataTransfer.files; setFile(f); } });
    }

    const scopeLabelWithCount = (scope) => {
        const panel = document.querySelector('[data-scope-panel="' + scope + '"]');
        const n = panel ? panel.querySelectorAll('input[type="checkbox"]:checked').length : 0;
        return scopeLabels[scope] + (scope !== 'global' && n ? ' (' + n + ')' : '');
    };

    const updateScope = () => {
        const sel = document.querySelector('.scope-option:checked')?.value || 'global';
        scopeHelp.innerHTML = scopeDesc[sel];
        document.getElementById('summary-scope').textContent = scopeLabelWithCount(sel);
        document.querySelectorAll('[data-scope-panel]').forEach(p => p.classList.toggle('hidden', p.dataset.scopePanel !== sel));
    };
    document.querySelectorAll('.scope-option').forEach(i => i.addEventListener('change', updateScope));

    const refreshPicker = (grid) => {
        const name = grid.dataset.picker;
        const boxes = grid.querySelectorAll('input[type="checkbox"]');
        const checked = grid.querySelectorAll('input[type="checkbox"]:checked');
        const badge = document.querySelector('[data-picker-count="' + name + '"]');
        if (badge) badge.textContent = checked.length + ' of ' + boxes.length + ' selected';
        document.getElementById('summary-scope').textContent = scopeLabelWithCount(document.querySelector('.scope-option:checked')?.value || 'global');
    };
    document.querySelectorAll('[data-picker]').forEach(refreshPicker);
    form.addEventListener('change', (e) => {
        const grid = e.target.closest('[data-picker]');
        if (grid) refreshPicker(grid);
    });

    document.querySelectorAll('[data-picker-search]').forEach(input => {
        input.addEventListener('input', () => {
            const grid = document.querySelector('[data-picker="' + input.dataset.pickerSearch + '"]');
            const q = input.value.trim().toLowerCase();
            let visible = 0;
            grid.querySelectorAll('[data-picker-item]').forEach(item => {
                const hit = !q || item.textContent.toLowerCase().includes(q);
                item.classList.toggle('hidden', !hit);
                if (hit) visible++;
            });
            document.querySelector('[data-picker-empty="' + input.dataset.pickerSearch + '"]')?.classList.toggle('hidden', visible > 0);
        });
    });

    document.querySelectorAll('[data-picker-all]').forEach(btn => btn.addEventListener('click', () => {
        const grid = document.querySelector('[data-picker="' + btn.dataset.pickerAll + '"]');
        grid.querySelectorAll('[data-picker-item]:not(.hidden) input[type="checkbox"]').forEach(c => { c.checked = true; });
        refreshPicker(grid);
    }));

    document.querySelectorAll('[data-picker-clear]').forEach(btn => btn.addEventListener('click', () => {
        const grid = document.querySelector('[data-picker="' + btn.dataset.pickerClear + '"]');
        grid.querySelectorAll('input[type="checkbox"]').forEach(c => { c.checked = false; });
        refreshPicker(grid);
    }));

    const updateSummary = () => {
        const t = document.getElementById('title')?.value.trim();
        const id = document.getElementById('document-id')?.value.trim();
        const v = document.getElementById('version')?.value.trim();
        const cat = document.getElementById('category');
        const st = document.getElementById('status');
        document.getElementById('summary-title').textContent = t || 'Untitled document';
        document.getElementById('summary-id').textContent = id || 'No document ID yet';
        document.getElementById('summary-version').textContent = v || '\u2014';
        document.getElementById('summary-category').textContent = cat?.selectedOptions[0]?.text || 'Not selected';
        const stText = st?.selectedOptions[0]?.text || 'Draft';
        const sEl = document.getElementById('summary-status');
        sEl.textContent = stText;
        const val = st?.value;
        sEl.className = 'rounded-full px-2.5 py-1 text-xs font-bold capitalize ' + (val === 'published' ? 'bg-emerald-50 text-emerald-700' : (val === 'archived' || val === 'expired') ? 'bg-amber-50 text-amber-700' : 'bg-slate-100 text-slate-600');
        const done = [t, id, v, cat?.value].filter(x => x).length + 1;
        const pct = Math.min(100, Math.round((done / 5) * 100));
        document.getElementById('progress-bar').style.width = pct + '%';
        document.getElementById('progress-text').textContent = Math.min(5, done) + ' of 5 setup items complete';
    };

    form.querySelectorAll('input:not([type=file]):not([type=hidden]), select, textarea').forEach(f => f.addEventListener('input', updateSummary));
    form.querySelectorAll('select').forEach(f => f.addEventListener('change', updateSummary));
    updateScope();
    updateSummary();
})();
</script>
@endpush