@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'النقاط والأوسمة والمكافآت' : 'Points, Badges & Rewards')
@section('page_heading', app()->getLocale() === 'ar' ? 'النقاط والأوسمة والمكافآت' : 'Points, Badges & Rewards')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $criteriaLabels = [
        'total_points' => $isArabic ? 'إجمالي النقاط' : 'Total points',
        'assignment_submissions' => $isArabic ? 'عدد الواجبات المسلمة' : 'Assignment submissions',
        'quiz_completions' => $isArabic ? 'عدد الاختبارات المكتملة' : 'Quiz completions',
        'completed_materials' => $isArabic ? 'المواد المكتملة' : 'Completed materials',
        'certificates_count' => $isArabic ? 'عدد الشهادات' : 'Certificates count',
    ];
    $statusLabels = [
        'pending' => $isArabic ? 'قيد المراجعة' : 'Pending',
        'approved' => $isArabic ? 'معتمد' : 'Approved',
        'rejected' => $isArabic ? 'مرفوض' : 'Rejected',
        'fulfilled' => $isArabic ? 'تم التسليم' : 'Fulfilled',
    ];
    $activeRulesCount = $rules->where('is_active', true)->count();
    $activeBadgesCount = $badges->where('is_active', true)->count();
    $activeRewardsCount = $rewards->where('is_active', true)->count();
    $pendingRedemptionsCount = $redemptions->where('status', 'pending')->count();
@endphp

@section('content')
<div class="space-y-8">
    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
            <div class="space-y-2">
                <h2 class="text-2xl font-black tracking-tight text-surface-900 dark:text-white">
                    {{ $isArabic ? 'إدارة النقاط والأوسمة والمكافآت' : 'Manage Points, Badges, and Rewards' }}
                </h2>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">
                    {{ $isArabic ? 'تم فصل كل جزء في مساحة مستقلة لتسهيل ضبط قواعد النقاط، إنشاء الأوسمة، إدارة المكافآت، ومتابعة طلبات الاستبدال بدون تداخل.' : 'Each area is separated into its own workspace so point rules, badges, rewards, and redemption requests can be managed without overlap.' }}
                </p>
            </div>

            <div class="flex flex-wrap gap-2">
                <a href="#points-section" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-xs font-bold uppercase tracking-[0.2em] text-surface-700 transition hover:border-surface-300 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                    {{ $isArabic ? 'النقاط' : 'Points' }}
                </a>
                <a href="#badges-section" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-xs font-bold uppercase tracking-[0.2em] text-surface-700 transition hover:border-surface-300 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                    {{ $isArabic ? 'الأوسمة' : 'Badges' }}
                </a>
                <a href="#rewards-section" class="inline-flex items-center gap-2 rounded-xl border border-surface-200 bg-white px-4 py-2.5 text-xs font-bold uppercase tracking-[0.2em] text-surface-700 transition hover:border-surface-300 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200">
                    {{ $isArabic ? 'المكافآت' : 'Rewards' }}
                </a>
                <a href="#redemptions-section" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2.5 text-xs font-bold uppercase tracking-[0.2em] text-white transition hover:bg-brand-700">
                    {{ $isArabic ? 'طلبات الاستبدال' : 'Redemptions' }}
                </a>
            </div>
        </div>
    </section>

    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'قواعد النقاط النشطة' : 'Active Point Rules' }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $activeRulesCount }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'الأوسمة النشطة' : 'Active Badges' }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $activeBadgesCount }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'المكافآت النشطة' : 'Active Rewards' }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $activeRewardsCount }}</p>
        </article>
        <article class="rounded-xl border border-surface-200 bg-white p-5 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <p class="text-sm font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'طلبات قيد المراجعة' : 'Pending Redemptions' }}</p>
            <p class="mt-3 text-3xl font-black text-surface-900 dark:text-white">{{ $pendingRedemptionsCount }}</p>
        </article>
    </section>

    <section id="points-section" class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قواعد النقاط' : 'Point Rules' }}</h2>
            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'كل قاعدة في صف مستقل لتحديث الاسم، النقاط، وحالة التفعيل.' : 'Each rule is isolated in its own row for editing name, points, and activation status.' }}</p>
        </div>
        <div class="divide-y divide-surface-200 dark:divide-surface-800">
            @foreach($rules as $rule)
                <form action="{{ route('admin.gamification.rules.update', $rule) }}" method="POST" class="grid gap-4 px-6 py-5 lg:grid-cols-[minmax(0,1.2fr)_9rem_8rem_auto] lg:items-end">
                    @csrf
                    @method('PUT')
                    <div>
                        <label class="mb-2 block text-xs font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'النشاط' : 'Activity' }}</label>
                        <input type="text" name="name" value="{{ $rule->name }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                        <p class="mt-2 text-xs text-surface-500 dark:text-surface-400">{{ $rule->action_key }}</p>
                    </div>
                    <div>
                        <label class="mb-2 block text-xs font-black uppercase tracking-[0.24em] text-surface-400">{{ $isArabic ? 'النقاط' : 'Points' }}</label>
                        <input type="number" min="0" name="points" value="{{ $rule->points }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                    </div>
                    <div class="rounded-2xl border border-surface-200 px-4 py-3 dark:border-surface-700">
                        <label class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                            <input type="checkbox" name="is_active" value="1" {{ $rule->is_active ? 'checked' : '' }}>
                            <span>{{ $isArabic ? 'نشط' : 'Active' }}</span>
                        </label>
                    </div>
                    <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-surface-900 px-4 py-2 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-white dark:text-surface-900 dark:hover:bg-surface-100">
                        {{ $isArabic ? 'حفظ التعديل' : 'Save Changes' }}
                    </button>
                </form>
            @endforeach
        </div>
    </section>

    <section id="badges-section" class="grid gap-6 xl:grid-cols-[minmax(19rem,0.85fr)_minmax(0,1.15fr)]">
        <div class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إضافة وسام جديد' : 'Create Badge' }}</h2>
            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'نموذج مستقل لإنشاء وسام جديد دون التأثير على قائمة الأوسمة الحالية.' : 'A separate form for creating a badge without mixing it with the current list.' }}</p>
            <form action="{{ route('admin.gamification.badges.store') }}" method="POST" class="mt-5 space-y-4">
                @csrf
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'اسم الوسام' : 'Badge Name' }}</label>
                    <input type="text" name="name" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الوصف' : 'Description' }}</label>
                    <textarea name="description" rows="3" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"></textarea>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الأيقونة' : 'Icon' }}</label>
                        <input type="text" name="icon" value="fa-award" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'اللون' : 'Color' }}</label>
                        <input type="text" name="color" value="#2563eb" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                    </div>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'نوع الشرط' : 'Criteria Type' }}</label>
                        <select name="criteria_type" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                            @foreach($criteriaLabels as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'قيمة الشرط' : 'Criteria Value' }}</label>
                        <input type="number" min="1" name="criteria_value" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                    </div>
                </div>
                <label class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                    <input type="checkbox" name="is_active" value="1" checked>
                    <span>{{ $isArabic ? 'تفعيل الوسام مباشرة' : 'Activate badge immediately' }}</span>
                </label>
                <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    {{ $isArabic ? 'إضافة الوسام' : 'Create Badge' }}
                </button>
            </form>
        </div>

        <div class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قائمة الأوسمة' : 'Badges List' }}</h2>
            </div>
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @forelse($badges as $badge)
                    <div class="px-6 py-5">
                        <form action="{{ route('admin.gamification.badges.update', $badge) }}" method="POST" class="space-y-4">
                            @csrf
                            @method('PUT')
                            <div class="flex items-start justify-between gap-4">
                                <div class="flex items-center gap-4">
                                    <div class="flex h-12 w-12 items-center justify-center rounded-2xl text-white" style="background-color: {{ $badge->color }}">
                                        <i class="fa-solid {{ $badge->icon }}"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm font-black text-surface-900 dark:text-white">{{ $badge->name }}</p>
                                        <p class="text-xs text-surface-500 dark:text-surface-400">{{ $criteriaLabels[$badge->criteria_type] ?? $badge->criteria_type }} · {{ $badge->criteria_value }}</p>
                                    </div>
                                </div>
                                <span class="rounded-full bg-surface-100 px-3 py-1 text-[11px] font-black text-surface-600 dark:bg-surface-800 dark:text-surface-300">#{{ $badge->id }}</span>
                            </div>
                            <div class="grid gap-4 md:grid-cols-2">
                                <input type="text" name="name" value="{{ $badge->name }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                                <input type="text" name="icon" value="{{ $badge->icon }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                            </div>
                            <textarea name="description" rows="2" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ $badge->description }}</textarea>
                            <div class="grid gap-4 md:grid-cols-3">
                                <input type="text" name="color" value="{{ $badge->color }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                                <select name="criteria_type" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                                    @foreach($criteriaLabels as $value => $label)
                                        <option value="{{ $value }}" {{ $badge->criteria_type === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                <input type="number" min="1" name="criteria_value" value="{{ $badge->criteria_value }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                            </div>
                            <div class="flex flex-wrap items-center justify-between gap-3">
                                <label class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                                    <input type="checkbox" name="is_active" value="1" {{ $badge->is_active ? 'checked' : '' }}>
                                    <span>{{ $isArabic ? 'نشط' : 'Active' }}</span>
                                </label>
                                <div class="flex flex-wrap gap-2">
                                    <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-surface-900 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-white dark:text-surface-900 dark:hover:bg-surface-100">
                                        {{ $isArabic ? 'تحديث' : 'Update' }}
                                    </button>
                                </div>
                            </div>
                        </form>
                        <form action="{{ route('admin.gamification.badges.destroy', $badge) }}" method="POST" class="mt-3">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-red-50 px-4 py-2.5 text-sm font-bold text-red-600 transition hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20">
                                {{ $isArabic ? 'حذف الوسام' : 'Delete Badge' }}
                            </button>
                        </form>
                    </div>
                @empty
                    <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">
                        {{ $isArabic ? 'لا توجد أوسمة مضافة حتى الآن.' : 'No badges have been created yet.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section id="rewards-section" class="grid gap-6 xl:grid-cols-[minmax(19rem,0.85fr)_minmax(0,1.15fr)]">
        <div class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إضافة مكافأة جديدة' : 'Create Reward' }}</h2>
            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إدارة إنشاء المكافآت منفصلة عن قائمة التعديل حتى تبقى الواجهة أوضح.' : 'Reward creation is separated from the management list to keep the interface cleaner.' }}</p>
            <form action="{{ route('admin.gamification.rewards.store') }}" method="POST" class="mt-5 space-y-4">
                @csrf
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'اسم المكافأة' : 'Reward Name' }}</label>
                    <input type="text" name="name" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                </div>
                <div>
                    <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الوصف' : 'Description' }}</label>
                    <textarea name="description" rows="3" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"></textarea>
                </div>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'تكلفة النقاط' : 'Points Cost' }}</label>
                        <input type="number" min="1" name="points_cost" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                    </div>
                    <div>
                        <label class="mb-2 block text-sm font-bold text-surface-700 dark:text-surface-200">{{ $isArabic ? 'الكمية' : 'Quantity' }}</label>
                        <input type="number" min="1" name="quantity" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                    </div>
                </div>
                <label class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                    <input type="checkbox" name="is_active" value="1" checked>
                    <span>{{ $isArabic ? 'تفعيل المكافأة مباشرة' : 'Activate reward immediately' }}</span>
                </label>
                <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    {{ $isArabic ? 'إضافة المكافأة' : 'Create Reward' }}
                </button>
            </form>
        </div>

        <div class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'قائمة المكافآت' : 'Rewards List' }}</h2>
            </div>
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @forelse($rewards as $reward)
                    <div class="px-6 py-5">
                        <form action="{{ route('admin.gamification.rewards.update', $reward) }}" method="POST" class="space-y-4">
                            @csrf
                            @method('PUT')
                            <div class="flex items-start justify-between gap-4">
                                <div>
                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $reward->name }}</p>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $reward->description ?: ($isArabic ? 'بدون وصف إضافي.' : 'No extra description.') }}</p>
                                </div>
                                <span class="rounded-full bg-surface-100 px-3 py-1 text-[11px] font-black text-surface-600 dark:bg-surface-800 dark:text-surface-300">#{{ $reward->id }}</span>
                            </div>
                            <div class="grid gap-4 md:grid-cols-3">
                                <input type="text" name="name" value="{{ $reward->name }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                                <input type="number" min="1" name="points_cost" value="{{ $reward->points_cost }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" required>
                                <input type="number" min="1" name="quantity" value="{{ $reward->quantity }}" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" placeholder="{{ $isArabic ? 'غير محدود' : 'Unlimited' }}">
                            </div>
                            <textarea name="description" rows="2" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">{{ $reward->description }}</textarea>
                            <div class="flex flex-wrap items-center justify-between gap-3">
                                <div class="flex flex-wrap items-center gap-3">
                                    <label class="inline-flex items-center gap-2 text-sm font-bold text-surface-700 dark:text-surface-200">
                                        <input type="checkbox" name="is_active" value="1" {{ $reward->is_active ? 'checked' : '' }}>
                                        <span>{{ $isArabic ? 'نشط' : 'Active' }}</span>
                                    </label>
                                    <span class="rounded-full bg-surface-100 px-3 py-1 text-xs font-bold text-surface-600 dark:bg-surface-800 dark:text-surface-300">
                                        {{ $isArabic ? 'محجوز/مستخدم' : 'Reserved' }}: {{ $reward->reserved_count }}
                                    </span>
                                </div>
                                <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-surface-900 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-white dark:text-surface-900 dark:hover:bg-surface-100">
                                    {{ $isArabic ? 'تحديث' : 'Update' }}
                                </button>
                            </div>
                        </form>
                        <form action="{{ route('admin.gamification.rewards.destroy', $reward) }}" method="POST" class="mt-3">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-red-50 px-4 py-2.5 text-sm font-bold text-red-600 transition hover:bg-red-100 dark:bg-red-500/10 dark:text-red-300 dark:hover:bg-red-500/20">
                                {{ $isArabic ? 'حذف المكافأة' : 'Delete Reward' }}
                            </button>
                        </form>
                    </div>
                @empty
                    <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">
                        {{ $isArabic ? 'لا توجد مكافآت مضافة حتى الآن.' : 'No rewards have been created yet.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    <section id="redemptions-section" class="grid gap-6 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
        <div class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'طلبات الاستبدال' : 'Redemption Requests' }}</h2>
                <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'كل طلب في مساحة مستقلة لتغيير الحالة وتسجيل الملاحظات.' : 'Each redemption is isolated for status updates and internal notes.' }}</p>
            </div>
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @forelse($redemptions as $redemption)
                    <form action="{{ route('admin.gamification.redemptions.update', $redemption) }}" method="POST" class="space-y-4 px-6 py-5">
                        @csrf
                        @method('PUT')
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div>
                                <p class="text-sm font-black text-surface-900 dark:text-white">{{ $redemption->user?->name }}</p>
                                <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $redemption->reward?->name }} · {{ $redemption->points_cost }} {{ $isArabic ? 'نقطة' : 'pts' }}</p>
                            </div>
                            <span class="rounded-full bg-surface-100 px-3 py-1 text-xs font-black text-surface-700 dark:bg-surface-800 dark:text-surface-200">{{ $statusLabels[$redemption->status] ?? $redemption->status }}</span>
                        </div>
                        <div class="grid gap-4 md:grid-cols-[13rem_minmax(0,1fr)_auto]">
                            <select name="status" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white">
                                @foreach($statusLabels as $value => $label)
                                    @if($value !== 'pending')
                                        <option value="{{ $value }}" {{ $redemption->status === $value ? 'selected' : '' }}>{{ $label }}</option>
                                    @endif
                                @endforeach
                            </select>
                            <textarea name="notes" rows="2" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" placeholder="{{ $isArabic ? 'ملاحظات داخلية' : 'Internal notes' }}">{{ $redemption->notes }}</textarea>
                            <button type="submit" class="inline-flex items-center justify-center rounded-xl bg-surface-900 px-4 py-3 text-sm font-bold text-white transition hover:bg-surface-800 dark:bg-white dark:text-surface-900 dark:hover:bg-surface-100">
                                {{ $isArabic ? 'تحديث الطلب' : 'Update Request' }}
                            </button>
                        </div>
                    </form>
                @empty
                    <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">
                        {{ $isArabic ? 'لا توجد طلبات استبدال حديثة.' : 'No recent redemption requests.' }}
                    </div>
                @endforelse
            </div>
        </div>

        <div class="rounded-xl border border-surface-200 bg-white shadow-sm dark:border-surface-800 dark:bg-surface-900">
            <div class="border-b border-surface-200 bg-surface-50/80 px-6 py-5 dark:border-surface-800 dark:bg-surface-800/30">
                <h2 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'آخر حركات النقاط' : 'Recent Point Transactions' }}</h2>
            </div>
            <div class="divide-y divide-surface-200 dark:divide-surface-800">
                @forelse($recentTransactions as $transaction)
                    <article class="flex items-center justify-between gap-3 px-6 py-4">
                        <div>
                            <p class="text-sm font-black text-surface-900 dark:text-white">{{ $transaction->user?->name }}</p>
                            <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">{{ $transaction->action_key }}</p>
                        </div>
                        <span class="text-sm font-black {{ $transaction->points >= 0 ? 'text-emerald-600 dark:text-emerald-300' : 'text-red-600 dark:text-red-300' }}">
                            {{ $transaction->points >= 0 ? '+' : '' }}{{ $transaction->points }}
                        </span>
                    </article>
                @empty
                    <div class="px-6 py-16 text-center text-sm text-surface-500 dark:text-surface-400">
                        {{ $isArabic ? 'لا توجد حركات نقاط حديثة.' : 'No recent point transactions.' }}
                    </div>
                @endforelse
            </div>
        </div>
    </section>
</div>
@endsection