<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">Discipline Score Rules</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.discipline-score-rules.store') }}" class="grid gap-4 md:grid-cols-5">
                @csrf
                <x-text-input name="key" placeholder="rule_key" required />
                <x-text-input name="name" placeholder="Rule name" required />
                <x-text-input name="points" type="number" value="10" required />
                <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-5">Create Rule</button>
            </form>
        </section>

        <section class="grid gap-4 xl:grid-cols-2">
            @foreach ($rules as $rule)
                <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.discipline-score-rules.update', $rule) }}" class="grid gap-3">
                        @csrf
                        @method('PATCH')
                        <x-text-input name="key" value="{{ $rule->key }}" required />
                        <x-text-input name="name" value="{{ $rule->name }}" required />
                        <div class="grid gap-3 sm:grid-cols-3">
                            <x-text-input name="points" type="number" value="{{ $rule->points }}" required />
                            <x-text-input name="sort_order" type="number" value="{{ $rule->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($rule->is_active) class="rounded border-gray-300 text-blue-600"> Active</label>
                        </div>
                        <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.discipline-score-rules.destroy', $rule) }}" class="mt-3" onsubmit="return confirm('Delete this score rule?')">
                        @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>
