@php
    use App\Models\Task;

    $categories = Task::categories();
    $selectedCategory = old('category', $task->category ?? Task::CATEGORY_ADS);
@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', $task->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', $task->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="link_url" class="field-label">গন্তব্য লিংক</label>
                <input id="link_url" name="link_url" type="url" maxlength="500" value="{{ old('link_url', $task->link_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="link_url"/>
            </div>

            <div>
                <label for="instructions" class="field-label">নির্দেশনা</label>
                <textarea id="instructions" name="instructions" rows="3" maxlength="5000" class="field-input">{{ old('instructions', $task->instructions) }}</textarea>
                <x-field-error name="instructions"/>
            </div>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <div>
                    <label for="reward_amount" class="field-label">পুরস্কার (৳) <span class="text-danger">*</span></label>
                    <input id="reward_amount" name="reward_amount" type="number" step="0.01" min="0" required value="{{ old('reward_amount', $task->reward_amount) }}" class="field-input">
                    <x-field-error name="reward_amount"/>
                </div>

                <div>
                    <label for="estimated_minutes" class="field-label">আনুমানিক সময় (মিনিট) <span class="text-danger">*</span></label>
                    <input id="estimated_minutes" name="estimated_minutes" type="number" min="1" max="1440" required value="{{ old('estimated_minutes', $task->estimated_minutes) }}" class="field-input">
                    <x-field-error name="estimated_minutes"/>
                </div>

                <div>
                    <label for="daily_limit" class="field-label">দৈনিক সীমা <span class="text-danger">*</span></label>
                    <input id="daily_limit" name="daily_limit" type="number" min="1" max="100" required value="{{ old('daily_limit', $task->daily_limit ?? 10) }}" class="field-input">
                    <x-field-error name="daily_limit"/>
                </div>
            </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', $task->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', $task->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"/>

            <input type="hidden" name="published" value="0">
            <label class="flex items-center gap-2 text-sm font-medium">
                <input type="checkbox" name="published" value="1" @checked(old('published', $task->published_at !== null)) class="h-4 w-4 rounded border-line bg-surface-raised text-gold focus:ring-gold">
                এখনই প্রকাশ করুন
            </label>
            <x-field-error name="published"/>
        </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.tasks.index') }}" class="btn-secondary sm:w-auto sm:px-6">বাতিল</a>
        </div>
    </div>

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

        <div class="mt-2 rounded-2xl border border-sky-200 bg-sky-50 p-3 shadow-sm">
            <div class="flex items-center justify-between gap-2">
                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-sky-100 text-sky-600" aria-hidden="true">
                    @foreach (array_merge(array_keys($categories), ['link']) as $icon)
                        <x-icon :name="$icon" data-preview-icon="{{ $icon }}" class="h-5 w-5 {{ $icon === $selectedCategory ? '' : 'hidden' }}"/>
                    @endforeach
                </span>
                <span class="inline-flex items-center rounded-full bg-orange-500 px-2 py-0.5 text-[10px] font-bold text-white">এখানে চাপ দিন</span>
            </div>

            <div class="mt-3 flex h-14 items-center justify-center rounded-xl bg-blue-600 text-white">
                <x-icon name="play" class="h-7 w-7"/>
            </div>

            <h3 class="mt-3 text-sm font-bold leading-snug text-slate-900" data-preview-title-text>{{ old('title', $task->title) ?: 'বিজ্ঞাপন দেখুন' }}</h3>
            <p class="mt-1 text-xs leading-relaxed text-slate-500" data-preview-description-text>{{ old('description', $task->description) ?: 'বিজ্ঞাপনটি দেখুন এবং নির্দেশনা অনুসরণ করুন' }}</p>
        </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