<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">Emotion Tags</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">
            <form method="POST" action="{{ route('admin.emotion-tags.store') }}" class="grid gap-4 md:grid-cols-4">
                @csrf
                <x-text-input name="name" placeholder="Emotion name" required />
                <x-text-input name="description" placeholder="Description" />
                <x-text-input name="sort_order" type="number" value="10" required />
                <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 md:col-span-4">Create Emotion Tag</button>
            </form>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            @foreach ($tags as $tag)
                <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.emotion-tags.update', $tag) }}" class="grid gap-3">
                        @csrf
                        @method('PATCH')
                        <x-text-input name="name" value="{{ $tag->name }}" required />
                        <x-text-input name="description" value="{{ $tag->description }}" />
                        <x-text-input name="sort_order" type="number" value="{{ $tag->sort_order }}" required />
                        <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($tag->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.emotion-tags.destroy', $tag) }}" class="mt-3" onsubmit="return confirm('Delete this emotion tag?')">
                        @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>
