@extends('layouts.main_dashboard.app')

@section('title', app()->getLocale() === 'ar' ? 'إدارة الأوسمة' : 'Badges Management')
@section('page_heading', app()->getLocale() === 'ar' ? 'إدارة الأوسمة' : 'Badges Management')
@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',
    ];
@endphp

@section('content')
<div x-data="{ createBadgeOpen: 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 Badges' }}</h2>
                <p class="max-w-3xl text-sm leading-7 text-surface-500 dark:text-surface-400">{{ $isArabic ? 'صفحة عرض مستقلة للأوسمة مع إضافة الوسام من نافذة منبثقة، واعتماد الصور بدل الأيقونات.' : 'A dedicated listing page for badges with popup creation and image-based badge visuals instead of icons.' }}</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 Badges' }}</p>
                    <p class="mt-1 text-2xl font-black text-surface-900 dark:text-white">{{ $badges->count() }}</p>
                </div>
                <button type="button" @click="createBadgeOpen = 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 Badge' }}</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 ? 'قائمة الأوسمة' : 'Badges List' }}</h2>
        </div>
        @if($badges->isEmpty())
            <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>
        @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 ? 'الصورة' : 'Image' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'اسم الوسام' : 'Badge Name' }}</th>
                            <th class="px-6 py-4">{{ $isArabic ? 'المعيار' : 'Criteria' }}</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($badges as $badge)
                            <tr x-data="{ editBadgeOpen: false }" class="transition hover:bg-surface-50/80 dark:hover:bg-surface-800/20">
                                <td class="px-6 py-5">
                                    <div class="flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl border border-surface-200 bg-brand-50 dark:border-surface-700 dark:bg-brand-500/10">
                                        @if($badge->image_path)
                                            <img src="{{ asset('storage/' . $badge->image_path) }}" alt="{{ $badge->name }}" class="h-full w-full object-cover">
                                        @else
                                            <span class="text-sm font-black text-brand-700 dark:text-brand-300">{{ \Illuminate\Support\Str::limit($badge->name, 2, '') }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-5">
                                    <p class="text-sm font-black text-surface-900 dark:text-white">{{ $badge->name }}</p>
                                    <p class="mt-1 text-xs text-surface-500 dark:text-surface-400">#{{ $badge->id }}</p>
                                </td>
                                <td class="px-6 py-5 text-sm text-surface-600 dark:text-surface-300">
                                    {{ $criteriaLabels[$badge->criteria_type] ?? $badge->criteria_type }} · {{ $badge->criteria_value }}
                                </td>
                                <td class="px-6 py-5">
                                    <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-bold {{ $badge->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' }}">
                                        {{ $badge->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="editBadgeOpen = 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.badges.destroy', $badge) }}" 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="editBadgeOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
                                        <div x-cloak x-show="editBadgeOpen" x-transition.opacity class="absolute inset-0 bg-surface-950/45" @click="editBadgeOpen = false"></div>
                                        <form x-cloak x-show="editBadgeOpen" x-transition action="{{ route('admin.gamification.badges.update', $badge) }}" method="POST" enctype="multipart/form-data" 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 Badge' }}</h3>
                                                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $badge->name }}</p>
                                                    </div>
                                                    <button type="button" @click="editBadgeOpen = 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="{{ $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>
                                                <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">{{ $badge->description }}</textarea>
                                                <input type="file" name="image" accept="image/png,image/jpeg,image/webp" 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 class="grid gap-4 sm:grid-cols-2">
                                                    <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>
                                                </div>
                                                <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>
                                                <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>
                                            <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="editBadgeOpen = 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>

    <div x-cloak x-show="createBadgeOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
        <div x-cloak x-show="createBadgeOpen" x-transition.opacity class="absolute inset-0 bg-surface-950/45" @click="createBadgeOpen = false"></div>
        <form x-cloak x-show="createBadgeOpen" x-transition action="{{ route('admin.gamification.badges.store') }}" method="POST" enctype="multipart/form-data" 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 Badge' }}</h3>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $isArabic ? 'ارفع صورة الوسام وحدد شرط الاستحقاق ثم احفظ.' : 'Upload a badge image, choose its criteria, and save it.' }}</p>
                    </div>
                    <button type="button" @click="createBadgeOpen = 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 ? 'اسم الوسام' : 'Badge 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>
                <input type="file" name="image" accept="image/png,image/jpeg,image/webp" 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 class="grid gap-4 sm:grid-cols-2">
                    <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" placeholder="{{ $isArabic ? 'لون مساعد' : 'Accent Color' }}" required>
                    <input type="hidden" name="icon" value="badge">
                    <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>
                <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" placeholder="{{ $isArabic ? 'قيمة الشرط' : 'Criteria Value' }}" required>
                <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>
            </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="createBadgeOpen = 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 Badge' }}</button>
            </div>
        </form>
    </div>
</div>
@endsection