@extends('layouts.app')
@section('page-title', 'Request a Change')

@section('content')

<div class="mb-7">
    <h1 class="page-title">Request a Change</h1>
    <p class="page-subtitle">Submit a change request for a controlled document</p>
</div>

<div class="card p-6">

    @if($documents->isEmpty())
        <div class="empty-state py-12">
            <div class="empty-state-icon">
                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                          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>
            </div>
            <p class="font-semibold text-surface-500">No controlled documents assigned to you</p>
            <p class="mt-1 text-xs text-surface-400">You can only request changes for controlled documents in your assigned folders.</p>
        </div>
    @else
        @php
            $docData = $documents->map(function ($d) {
                // Build breadcrumb path: top → mid → folder
                $folder = $d->folder;
                $crumbs = collect();
                $node = $folder;
                while ($node) {
                    $crumbs->prepend($node->name);
                    $node = $node->parent ?? null;
                }
                $path = $crumbs->implode(' / ');

                // File extension from file_name or mime_type
                $ext = $d->file_name
                    ? strtoupper(pathinfo($d->file_name, PATHINFO_EXTENSION))
                    : 'FILE';

                // Badge color class
                $extLower = strtolower($ext);
                $badge = match(true) {
                    $extLower === 'pdf'                    => 'bg-red-100 text-red-700',
                    in_array($extLower, ['doc','docx'])    => 'bg-blue-100 text-blue-700',
                    in_array($extLower, ['xls','xlsx'])    => 'bg-emerald-100 text-emerald-700',
                    in_array($extLower, ['ppt','pptx'])    => 'bg-orange-100 text-orange-700',
                    default                                => 'bg-surface-100 text-surface-600',
                };

                return [
                    'id'     => $d->id,
                    'title'  => $d->title,
                    'docNum' => $d->doc_number,
                    'ver'    => 'v' . $d->version,
                    'path'   => $path,
                    'ext'    => $ext ?: 'FILE',
                    'badge'  => $badge,
                    'search' => strtolower($d->title . ' ' . $d->doc_number . ' ' . $d->version . ' ' . $path),
                ];
            })->values()->all();
        @endphp

        <form method="POST" action="{{ route('change-requests.store') }}" class="space-y-5">
            @csrf

            {{-- Document picker --}}
            <div class="relative"
                 x-data="changeRequestDocPicker(@js($docData), @js(old('document_id', '')))"
                 @click.outside="closePicker(false)"
                 @focusin.window="if (open && !$el.contains($event.target)) closePicker(false)">

                <label class="form-label" id="doc-picker-label">
                    Select Document <span class="text-red-500">*</span>
                </label>
                <input type="hidden" name="document_id" x-model="selId" />

                {{-- Trigger button --}}
                <button type="button"
                        x-ref="dtrigger"
                        role="combobox"
                        aria-haspopup="listbox"
                        :aria-expanded="open.toString()"
                        aria-labelledby="doc-picker-label"
                        @keydown.escape.prevent="closePicker(false)"
                        @keydown.arrow-down.prevent="moveActive(1)"
                        @keydown.arrow-up.prevent="moveActive(-1)"
                        @keydown.enter.prevent="open ? selectActive() : openPicker()"
                        @keydown.space.prevent="open ? selectActive() : openPicker()"
                        @keydown.tab="closePicker(false)"
                        @click="open ? closePicker(false) : openPicker()"
                        class="flex min-h-[52px] w-full items-center gap-3 rounded-xl border border-surface-200 bg-white px-3 py-2.5 text-left shadow-sm transition-all duration-150 focus:outline-none focus-visible:ring-4 focus-visible:ring-primary-500/10 {{ $errors->has('document_id') ? 'border-red-400' : '' }}"
                        :class="open ? 'border-primary-500' : 'hover:border-surface-300 hover:shadow-md'">

                    {{-- Placeholder state --}}
                    <template x-if="!selId">
                        <span class="flex flex-1 items-center gap-3">
                            <span class="flex h-8 w-10 shrink-0 items-center justify-center rounded-lg bg-surface-100 text-[10px] font-bold text-surface-400">FILE</span>
                            <span class="text-sm text-surface-400">Select a document...</span>
                        </span>
                    </template>

                    {{-- Selected state --}}
                    <template x-if="selId">
                        <span class="flex flex-1 min-w-0 items-center gap-3">
                            <span class="flex h-8 w-10 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold"
                                  :class="selBadge" x-text="selExt"></span>
                            <span class="min-w-0">
                                <span x-text="selTitle" class="block truncate text-sm font-semibold text-surface-900"></span>
                                <span x-text="selPath" class="block truncate text-xs text-surface-400"></span>
                            </span>
                        </span>
                    </template>

                    {{-- Chevron --}}
                    <svg class="h-4 w-4 shrink-0 text-surface-400 transition-transform duration-200"
                         :class="open ? 'rotate-180' : ''"
                         fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>

                {{-- Dropdown --}}
                <div x-show="open"
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     class="absolute left-0 right-0 z-50 mt-1 overflow-hidden rounded-2xl border border-surface-200 bg-white shadow-2xl"
                     style="display:none;">

                    {{-- Search --}}
                    <div class="border-b border-surface-50 p-3">
                        <div class="flex items-center gap-2.5 rounded-xl border border-surface-200 bg-surface-50 px-3.5 py-2">
                            <svg class="h-3.5 w-3.5 shrink-0 text-surface-400" fill="none" viewBox="0 0 24 24"
                                 stroke="currentColor" stroke-width="2.5">
                                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                            </svg>
                            <input type="text"
                                   x-ref="dsearch"
                                   x-model="query"
                                   @input="onQueryChange()"
                                   placeholder="Search documents..."
                                   @keydown.escape.prevent="closePicker(true)"
                                   @keydown.arrow-down.prevent="moveActive(1)"
                                   @keydown.arrow-up.prevent="moveActive(-1)"
                                   @keydown.enter.prevent="selectActive()"
                                   @keydown.tab="closePicker(false)"
                                   class="flex-1 bg-transparent text-sm text-surface-900 outline-none placeholder:text-surface-400" />
                            <button x-show="query" type="button"
                                    @click.stop="query = ''; onQueryChange()"
                                    class="flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-surface-200 text-[10px] font-bold text-surface-500 hover:bg-surface-300">&times;</button>
                        </div>
                    </div>

                    {{-- List --}}
                    <div class="max-h-72 overflow-y-auto p-2" role="listbox">

                        {{-- Header --}}
                        <div class="mb-1 flex items-center gap-2 rounded-lg bg-primary-50 px-3 py-1.5">
                            <div class="h-[6px] w-[6px] shrink-0 rounded-full bg-primary-400"></div>
                            <span class="text-[10px] font-extrabold uppercase tracking-wider text-primary-600">Controlled Documents</span>
                            <span class="ml-auto text-[10px] font-semibold text-primary-500 opacity-70" x-text="filtered.length"></span>
                        </div>

                        <template x-for="doc in filtered" :key="doc.id">
                            <button type="button"
                                    data-doc-option
                                    :data-doc-id="doc.id"
                                    role="option"
                                    :aria-selected="String(selId) === String(doc.id)"
                                    @click="pick(doc)"
                                    class="flex w-full cursor-pointer items-center gap-3 rounded-xl border-none px-3 py-2.5 text-left transition-colors duration-100 hover:bg-surface-50"
                                    :class="[
                                        String(selId) === String(doc.id) ? 'bg-primary-50/60' : '',
                                        activeIndex >= 0 && visibleOptions[activeIndex] === $el ? 'ring-2 ring-inset ring-primary-200' : ''
                                    ]">

                                {{-- File badge --}}
                                <span class="flex h-8 w-10 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold"
                                      :class="doc.badge" x-text="doc.ext"></span>

                                {{-- Title + path --}}
                                <span class="min-w-0 flex-1">
                                    <span class="block truncate text-sm font-semibold text-surface-900" x-text="doc.title"></span>
                                    <span class="mt-0.5 block truncate text-xs text-surface-400" x-text="doc.path"></span>
                                </span>

                                {{-- Doc number + version --}}
                                <span class="shrink-0 text-right" x-show="doc.docNum || doc.ver">
                                    <span class="block font-mono text-[11px] font-semibold text-surface-600" x-text="doc.docNum"></span>
                                    <span class="block font-mono text-[10px] text-surface-400" x-text="doc.ver"></span>
                                </span>

                                {{-- Check --}}
                                <svg x-show="String(selId) === String(doc.id)"
                                     class="h-4 w-4 shrink-0 text-primary-600"
                                     fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                                </svg>
                            </button>
                        </template>

                        {{-- Empty search state --}}
                        <div x-show="!hasMatches" class="flex flex-col items-center gap-2 px-3 py-8 text-center">
                            <svg class="h-8 w-8 text-surface-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9.5 9.5l5 5m0-5l-5 5M12 21a9 9 0 100-18 9 9 0 000 18z"/>
                            </svg>
                            <p class="text-xs text-surface-400">No documents match "<span x-text="query" class="font-medium text-surface-500"></span>"</p>
                        </div>
                    </div>
                </div>

                @error('document_id')
                    <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Description --}}
            <div>
                <label for="description" class="form-label">Describe the Change Needed <span class="text-red-500">*</span></label>
                <textarea name="description" id="description" rows="5"
                          placeholder="Explain what needs to be changed and why..."
                          class="form-input {{ $errors->has('description') ? 'form-input-error' : '' }}">{{ old('description') }}</textarea>
                @error('description')
                    <p class="mt-1.5 text-xs text-red-600">{{ $message }}</p>
                @enderror
                <p class="mt-1.5 text-xs text-surface-400">Be as specific as possible — section numbers, current wording, and what you'd like changed.</p>
            </div>

            <div class="flex items-center justify-end gap-3 border-t border-surface-100 pt-5">
                <a href="{{ route('change-requests.index') }}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-primary">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                    </svg>
                    Submit Request
                </button>
            </div>
        </form>
    @endif

</div>

@endsection