<x-app-layout>
    <x-slot name="header">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Growth & Marketing</p>
            <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">Badges</h2>
        </div>
    </x-slot>

    <div class="space-y-6">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-black text-slate-950 dark:text-white">Create Badge</h3>
            <form method="POST" action="{{ route('admin.badges.store') }}" class="mt-4 grid gap-4 md:grid-cols-2">
                @csrf
                <x-text-input name="name" placeholder="Badge name" required />
                <x-text-input name="icon" placeholder="Icon or short label" />
                <x-text-input name="requirement_key" placeholder="Requirement key" />
                <x-text-input name="sort_order" type="number" value="10" required />
                <textarea name="description" rows="2" placeholder="Description" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white md:col-span-2"></textarea>
                <textarea name="requirement" rows="2" placeholder="Requirement text" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white md:col-span-2"></textarea>
                <label class="flex items-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300"><input type="checkbox" name="is_active" value="1" checked class="rounded border-gray-300 text-blue-600"> Active</label>
                <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white">Create Badge</button>
            </form>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            @foreach ($badges as $badge)
                <div class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <form method="POST" action="{{ route('admin.badges.update', $badge) }}" class="grid gap-3">
                        @csrf
                        @method('PATCH')
                        <div class="grid gap-3 md:grid-cols-2">
                            <x-text-input name="name" value="{{ $badge->name }}" required />
                            <x-text-input name="icon" value="{{ $badge->icon }}" />
                            <x-text-input name="requirement_key" value="{{ $badge->requirement_key }}" />
                            <x-text-input name="sort_order" type="number" value="{{ $badge->sort_order }}" required />
                        </div>
                        <textarea name="description" rows="2" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $badge->description }}</textarea>
                        <textarea name="requirement" rows="2" class="rounded-lg border-gray-300 bg-white text-slate-900 shadow-sm dark:border-slate-700 dark:bg-slate-900 dark:text-white">{{ $badge->requirement }}</textarea>
                        <label class="flex items-center gap-2 text-sm font-semibold text-slate-600 dark:text-slate-300"><input type="checkbox" name="is_active" value="1" @checked($badge->is_active) class="rounded border-gray-300 text-blue-600"> Active</label>
                        <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white">Update</button>
                    </form>
                    <form method="POST" action="{{ route('admin.badges.destroy', $badge) }}" class="mt-3" onsubmit="return confirm('Delete this badge?')">
                        @csrf
                        @method('DELETE')
                        <button class="rounded-lg bg-red-600 px-4 py-2 text-sm font-bold text-white">Delete</button>
                    </form>
                </div>
            @endforeach
        </section>
    </div>
</x-app-layout>
