@extends('admin.layout')
@section('title', $challenge->exists ? 'Edit Challenge' : 'New Challenge')

@section('content')
<div class="max-w-2xl">
    <a href="{{ route('admin.challenges.index') }}" class="text-sm text-slate-500 hover:underline">← Back</a>

    <form method="POST" action="{{ $challenge->exists ? route('admin.challenges.update', $challenge) : route('admin.challenges.store') }}"
          class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 mt-3 space-y-4">
        @csrf
        @if ($challenge->exists) @method('PUT') @endif

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium mb-1">Challenge Date</label>
                <input type="date" name="challenge_date"
                       value="{{ old('challenge_date', $challenge->exists ? $challenge->challenge_date->format('Y-m-d') : $challenge->challenge_date) }}"
                       required class="w-full rounded-md border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Category</label>
                <select name="category_id" required class="w-full rounded-md border border-slate-300 px-3 py-2">
                    @foreach ($categories as $c)
                        <option value="{{ $c->id }}" @selected(old('category_id', $challenge->category_id) == $c->id)>{{ $c->label }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Bonus XP</label>
                <input type="number" name="bonus_xp" value="{{ old('bonus_xp', $challenge->bonus_xp ?? 100) }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Bonus Coins</label>
                <input type="number" name="bonus_coins" value="{{ old('bonus_coins', $challenge->bonus_coins ?? 50) }}" required
                       class="w-full rounded-md border border-slate-300 px-3 py-2">
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium mb-1">Question Count (auto-picks random from category)</label>
            <input type="number" name="question_count" value="10" min="5" max="20"
                   class="w-full rounded-md border border-slate-300 px-3 py-2">
            <p class="text-xs text-slate-500 mt-1">Leave blank on edit to keep existing question selection.</p>
        </div>

        @if ($challenge->exists)
            <div class="bg-slate-50 rounded p-3 text-xs text-slate-600">
                Currently {{ count($challenge->question_ids ?? []) }} question(s) assigned.
            </div>
        @endif

        <div class="flex justify-end pt-4 border-t">
            <button class="bg-slate-900 text-white px-5 py-2 rounded-md">Save</button>
        </div>
    </form>
</div>
@endsection