@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'إدارة المكافآت' : 'Rewards Management')
@section('page_heading', app()->getLocale() === 'ar' ? 'إدارة المكافآت' : 'Rewards Management')
@section('skip_page_hero', true)

@php
    $isArabic = app()->getLocale() === 'ar';
    $statusLabels = [
        'pending' => $isArabic ? 'قيد المراجعة' : 'Pending',
        'approved' => $isArabic ? 'معتمد' : 'Approved',
        'rejected' => $isArabic ? 'مرفوض' : 'Rejected',
        'fulfilled' => $isArabic ? 'تم التسليم' : 'Fulfilled',
    ];
@endphp

@section('content')
<div x-data="{ createRewardOpen: false }" 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 Rewards and Redemptions' }}</h2>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'صفحة عرض مستقلة للمكافآت مع إضافة المكافأة من popup ومتابعة الطلبات في جدول مستقل.' : 'A dedicated rewards listing page with popup creation and a separate redemption management section.' }}</p>
            </div>
            <div class="flex flex-wrap items-start gap-3">
                <div class="rounded-2xl border border-surface-200 bg-white px-4 py-3 dark:border-surface-700 dark:bg-surface-900">
                    <p class="text-xs font-bold text-surface-500 dark:text-surface-400">{{ $isArabic ? 'إجمالي المكافآت' : 'Total Rewards' }}</p>
                    <p class="mt-1 text-2xl font-black text-surface-900 dark:text-white">{{ $rewards->count() }}</p>
                </div>
                <button type="button" @click="createRewardOpen = true" class="inline-flex h-11 items-center gap-2 self-center rounded-xl bg-brand-600 px-5 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-plus text-xs"></i>
                    <span>{{ $isArabic ? 'إضافة مكافأة' : 'Add Reward' }}</span>
                </button>
            </div>
        </div>
    </section>

    <section class="overflow-hidden 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>
        @if($rewards->isEmpty())
            <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>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-surface-200 dark:divide-surface-800">
                    <thead class="bg-surface-50/80 dark:bg-surface-800/40">
                        <tr class="text-right text-xs font-black uppercase tracking-[0.2em] text-surface-500 dark:text-surface-400">
                            <th class="px-6 py-4">{{ $isArabic ? 'اسم المكافأة' : 'Reward Name' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'تكلفة النقاط' : 'Points Cost' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الكمية' : 'Quantity' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'الحالة' : 'Status' }}</th>
                            <th class="px-6 py-4 text-left">{{ __('dashboard.Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-surface-200 dark:divide-surface-800">
                        @foreach($rewards as $reward)
                            <tr x-data="{ editRewardOpen: false }" class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                <td class="px-6 py-5">
                                    <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>
                                </td>
                                <td class="px-6 py-5 text-sm font-bold text-surface-700 dark:text-surface-200">{{ $reward->points_cost }}</td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">{{ $reward->quantity ?? ($isArabic ? 'غير محدود' : 'Unlimited') }}</td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold {{ $reward->is_active ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300' : 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300' }}">
                                        {{ $reward->is_active ? ($isArabic ? 'نشط' : 'Active') : ($isArabic ? 'غير نشط' : 'Inactive') }}
                                    </span>
                                </td>
                                <td class="px-6 py-5">
                                    <div class="flex items-center justify-end gap-2">
                                        <button type="button" @click="editRewardOpen = true" class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2.5 text-sm font-bold text-white transition hover:bg-brand-700">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                            <span>{{ __('dashboard.Edit') }}</span>
                                        </button>
                                        <form action="{{ route('admin.gamification.rewards.destroy', $reward) }}" method="POST" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this item?') }}')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="inline-flex items-center gap-2 rounded-2xl 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">
                                                <i class="fa-solid fa-trash"></i>
                                                <span>{{ __('dashboard.Delete') }}</span>
                                            </button>
                                        </form>
                                    </div>

                                    <div x-cloak x-show="editRewardOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
                                        <div x-cloak x-show="editRewardOpen" x-transition.opacity class="absolute inset-0 bg-surface-950/45" @click="editRewardOpen = false"></div>
                                        <form x-cloak x-show="editRewardOpen" x-transition action="{{ route('admin.gamification.rewards.update', $reward) }}" method="POST" class="relative z-10 w-full max-w-2xl overflow-hidden rounded-xl border border-surface-200 bg-white shadow-2xl dark:border-surface-800 dark:bg-surface-900">
                                            @csrf
                                            @method('PUT')
                                            <div class="border-b border-surface-200 bg-surface-50 px-6 py-5 dark:border-surface-800 dark:bg-surface-950/80">
                                                <div class="flex items-start justify-between gap-4">
                                                    <div>
                                                        <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'تعديل المكافأة' : 'Edit Reward' }}</h3>
                                                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $reward->name }}</p>
                                                    </div>
                                                    <button type="button" @click="editRewardOpen = false" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200 bg-white text-surface-500 transition hover:border-surface-300 hover:text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300 dark:hover:border-surface-600 dark:hover:text-white">
                                                        <i class="fa-solid fa-xmark"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="space-y-5 px-6 py-6">
                                                <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>
                                                <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">{{ $reward->description }}</textarea>
                                                <div class="grid gap-4 sm:grid-cols-2">
                                                    <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>
                                                <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>
                                            </div>
                                            <div class="flex flex-col-reverse gap-3 border-t border-surface-200 bg-surface-50 px-6 py-5 sm:flex-row sm:items-center sm:justify-end dark:border-surface-800 dark:bg-surface-950/80">
                                                <button type="button" @click="editRewardOpen = false" class="inline-flex items-center justify-center rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">{{ __('dashboard.Cancel') }}</button>
                                                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">{{ $isArabic ? 'حفظ التغييرات' : 'Save Changes' }}</button>
                                            </div>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    <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 ? 'طلبات الاستبدال' : 'Redemption Requests' }}</h2>
        </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-brand-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-brand-700">{{ $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>
    </section>

    <div x-cloak x-show="createRewardOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
        <div x-cloak x-show="createRewardOpen" x-transition.opacity class="absolute inset-0 bg-surface-950/45" @click="createRewardOpen = false"></div>
        <form x-cloak x-show="createRewardOpen" x-transition action="{{ route('admin.gamification.rewards.store') }}" method="POST" class="relative z-10 w-full max-w-2xl overflow-hidden rounded-xl border border-surface-200 bg-white shadow-2xl dark:border-surface-800 dark:bg-surface-900">
            @csrf
            <div class="border-b border-surface-200 bg-surface-50 px-6 py-5 dark:border-surface-800 dark:bg-surface-950/80">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <h3 class="text-lg font-black text-surface-900 dark:text-white">{{ $isArabic ? 'إضافة مكافأة جديدة' : 'Add New Reward' }}</h3>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'أدخل بيانات المكافأة ثم احفظها لتظهر في قائمة العرض.' : 'Enter the reward details and save it to appear in the listing.' }}</p>
                    </div>
                    <button type="button" @click="createRewardOpen = false" class="inline-flex h-10 w-10 items-center justify-center rounded-xl border border-surface-200 bg-white text-surface-500 transition hover:border-surface-300 hover:text-surface-900 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-300 dark:hover:border-surface-600 dark:hover:text-white">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
            </div>
            <div class="space-y-5 px-6 py-6">
                <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" placeholder="{{ $isArabic ? 'اسم المكافأة' : 'Reward Name' }}" required>
                <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" placeholder="{{ $isArabic ? 'الوصف' : 'Description' }}"></textarea>
                <div class="grid gap-4 sm:grid-cols-2">
                    <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" placeholder="{{ $isArabic ? 'تكلفة النقاط' : 'Points Cost' }}" required>
                    <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" placeholder="{{ $isArabic ? 'الكمية' : 'Quantity' }}">
                </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>
            </div>
            <div class="flex flex-col-reverse gap-3 border-t border-surface-200 bg-surface-50 px-6 py-5 sm:flex-row sm:items-center sm:justify-end dark:border-surface-800 dark:bg-surface-950/80">
                <button type="button" @click="createRewardOpen = false" class="inline-flex items-center justify-center rounded-xl border border-surface-200 bg-white px-4 py-2 text-sm font-bold text-surface-700 transition hover:bg-surface-50 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-200 dark:hover:bg-surface-800">{{ __('dashboard.Cancel') }}</button>
                <button type="submit" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">{{ $isArabic ? 'إضافة المكافأة' : 'Create Reward' }}</button>
            </div>
        </form>
    </div>
</div>
@endsection