@php
    use App\Models\Work;

    $categories = Work::categories();
    $selectedCategory = old('category', $work->category);
@endphp

<div class="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-[1.6fr_1fr]">
    <div class="rounded-2xl border border-line bg-surface p-5">
        <div class="space-y-4">
            <div>
                <label for="title" class="field-label">শিরোনাম <span class="text-danger">*</span></label>
                <input id="title" name="title" type="text" required maxlength="150" value="{{ old('title', $work->title) }}" class="field-input" data-preview-title>
                <x-field-error name="title"/>
            </div>

            <div>
                <label for="description" class="field-label">বিবরণ <span class="text-danger">*</span></label>
                <textarea id="description" name="description" rows="3" required maxlength="2000" class="field-input" data-preview-description>{{ old('description', $work->description) }}</textarea>
                <x-field-error name="description"/>
            </div>

            <div>
                <label for="category" class="field-label">ধরন <span class="text-danger">*</span></label>
                <select id="category" name="category" class="field-input" required data-preview-category>
                    @foreach ($categories as $key => $label)
                        <option value="{{ $key }}" @selected($selectedCategory === $key)>{{ $label }}</option>
                    @endforeach
                </select>
                <x-field-error name="category"/>
            </div>

            <div>
                <label for="url" class="field-label">গন্তব্য লিংক <span class="text-danger">*</span></label>
                <input id="url" name="url" type="url" required maxlength="500" value="{{ old('url', $work->url) }}" class="field-input" placeholder="https://example.com/...">
                <p class="mt-1.5 text-xs leading-relaxed text-ink-muted">শুধু http বা https লিংক গ্রহণ করা হবে।</p>
                <x-field-error name="url"/>
            </div>

            <div>
                <label for="display_order" class="field-label">প্রদর্শন ক্রম</label>
                <input id="display_order" name="display_order" type="number" min="0" max="9999" value="{{ old('display_order', $work->display_order ?? 0) }}" class="field-input">
                <p class="mt-1.5 text-xs leading-relaxed text-ink-muted">ছোট সংখ্যা আগে দেখানো হবে।</p>
                <x-field-error name="display_order"/>
            </div>

            <input type="hidden" name="is_active" value="0">
            <label class="flex items-center gap-2 text-sm font-medium">
                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $work->is_active)) class="h-4 w-4 rounded border-line bg-surface-raised text-gold focus:ring-gold">
                এখনই প্রকাশ করুন
            </label>
            <x-field-error name="is_active"/>
        </div>

        <div class="mt-5 flex flex-wrap gap-2">
            <button type="submit" class="btn-primary sm:w-auto sm:px-6">{{ $submitLabel }}</button>
            <a href="{{ route('admin.works.index') }}" class="btn-secondary sm:w-auto sm:px-6">বাতিল</a>
        </div>
    </div>

    <div>
        <p class="field-label">ব্যবহারকারী প্রিভিউ</p>

        <div class="mt-2 flex items-center gap-3 rounded-2xl border border-line bg-surface p-4">
            <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-panel-border bg-panel text-gold" aria-hidden="true">
                @foreach (array_merge(array_keys($categories), ['link']) as $icon)
                    <x-icon :name="$icon" data-preview-icon="{{ $icon }}" class="h-6 w-6 {{ $icon === 'link' ? '' : 'hidden' }}"/>
                @endforeach
            </span>

            <div class="min-w-0 flex-1">
                <h3 class="font-bold leading-snug" data-preview-title-text>{{ old('title', $work->title) ?: 'কাজের শিরোনাম' }}</h3>
                <p class="mt-0.5 text-sm leading-relaxed text-ink-muted" data-preview-description-text>{{ old('description', $work->description) ?: 'কাজের সংক্ষিপ্ত বিবরণ এখানে দেখাবে।' }}</p>
            </div>

            <x-icon name="arrow-right" class="h-5 w-5 shrink-0 text-gold"/>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const titleInput = document.querySelector('[data-preview-title]');
            const descriptionInput = document.querySelector('[data-preview-description]');
            const categoryInput = document.querySelector('[data-preview-category]');
            const titleText = document.querySelector('[data-preview-title-text]');
            const descriptionText = document.querySelector('[data-preview-description-text]');
            const icons = document.querySelectorAll('[data-preview-icon]');

            const refresh = () => {
                if (titleInput && titleText) {
                    titleText.textContent = titleInput.value.trim() || 'কাজের শিরোনাম';
                }

                if (descriptionInput && descriptionText) {
                    descriptionText.textContent = descriptionInput.value.trim() || 'কাজের সংক্ষিপ্ত বিবরণ এখানে দেখাবে।';
                }

                if (categoryInput) {
                    icons.forEach((icon) => {
                        icon.classList.toggle('hidden', icon.dataset.previewIcon !== categoryInput.value);
                    });
                }
            };

            [titleInput, descriptionInput, categoryInput].forEach((field) => {
                field?.addEventListener('input', refresh);
                field?.addEventListener('change', refresh);
            });

            refresh();
        });
    </script>
@endpush