@php
    $locale = app()->getLocale();
    $isRtl = $locale === 'ar';
@endphp

@extends('layouts.app')

@section('title', $isRtl ? 'الإعدادات' : 'Settings')

@section('content')
<div class="space-y-8">
    
    <!-- Header -->
    <div class="relative">
        <div class="absolute -top-10 {{ $isRtl ? '-right-10' : '-left-10' }} w-32 h-32 bg-gradient-to-br from-emerald-400/20 to-teal-400/20 rounded-full blur-3xl"></div>
        <div class="relative">
            <h1 class="text-3xl font-black text-slate-800">{{ $isRtl ? 'الإعدادات' : 'Settings' }}</h1>
            <p class="text-slate-500 mt-2">{{ $isRtl ? 'إدارة إعدادات النظام والتخصيصات' : 'Manage system settings and preferences' }}</p>
        </div>
    </div>
    
    <!-- Settings Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        
        <!-- General Settings -->
        <a href="{{ route('settings.general') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-emerald-400 hover:shadow-xl hover:shadow-emerald-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-emerald-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="settings" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'الإعدادات العامة' : 'General Settings' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'اسم الجيم، العنوان، العملة، المنطقة الزمنية' : 'Gym name, address, currency, timezone' }}</p>
            <div class="mt-4 flex items-center text-emerald-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'فتح الإعدادات' : 'Open Settings' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Users Management -->
        <a href="{{ route('settings.users') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-blue-400 hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-400 to-blue-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-blue-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="users" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'إدارة المستخدمين' : 'User Management' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إضافة وتعديل صلاحيات المستخدمين' : 'Add and edit user permissions' }}</p>
            <div class="mt-4 flex items-center text-blue-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة المستخدمين' : 'Manage Users' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Activity Log -->
        <a href="{{ route('settings.activity-log') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-violet-400 hover:shadow-xl hover:shadow-violet-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-violet-400 to-violet-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-violet-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="activity" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'سجل النشاط' : 'Activity Log' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'عرض جميع العمليات التي تمت على النظام' : 'View all system activities' }}</p>
            <div class="mt-4 flex items-center text-violet-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'عرض السجل' : 'View Log' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Gates Management -->
        <a href="{{ route('gates.index') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-teal-400 hover:shadow-xl hover:shadow-teal-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-teal-400 to-teal-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-teal-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="scan-line" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'إدارة البوابات' : 'Gate Management' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إعداد بوابات الدخول والخروج' : 'Configure entry and exit gates' }}</p>
            <div class="mt-4 flex items-center text-teal-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة البوابات' : 'Manage Gates' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Access Cards -->
        <a href="{{ route('access-cards.index') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-cyan-400 hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-cyan-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-cyan-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="credit-card" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'بطاقات الدخول' : 'Access Cards' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إدارة بطاقات دخول الأعضاء' : 'Manage member access cards' }}</p>
            <div class="mt-4 flex items-center text-cyan-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة البطاقات' : 'Manage Cards' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Renewal Requests -->
        <a href="{{ route('admin.renewal-requests.index') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-amber-400 hover:shadow-xl hover:shadow-amber-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-amber-400 to-amber-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-amber-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="smartphone" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'طلبات التجديد' : 'Renewal Requests' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'مراجعة طلبات التجديد عبر الموبايل' : 'Review mobile renewal requests' }}</p>
            <div class="mt-4 flex items-center text-amber-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'عرض الطلبات' : 'View Requests' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Expense Categories -->
        <a href="{{ route('expenses.categories') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-rose-400 hover:shadow-xl hover:shadow-rose-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-rose-400 to-rose-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-rose-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="folder" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'تصنيفات المصروفات' : 'Expense Categories' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إدارة تصنيفات المصروفات' : 'Manage expense categories' }}</p>
            <div class="mt-4 flex items-center text-rose-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة التصنيفات' : 'Manage Categories' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Product Categories -->
        <a href="{{ route('products.categories') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-orange-400 hover:shadow-xl hover:shadow-orange-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-orange-400 to-orange-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-orange-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="grid-3x3" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'تصنيفات المنتجات' : 'Product Categories' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إدارة تصنيفات المنتجات والمخزون' : 'Manage product categories' }}</p>
            <div class="mt-4 flex items-center text-orange-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة التصنيفات' : 'Manage Categories' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
        <!-- Backup -->
        <a href="{{ route('settings.backup') }}" 
           class="group bg-white rounded-3xl p-6 border-2 border-slate-200 hover:border-green-400 hover:shadow-xl hover:shadow-green-500/10 transition-all duration-300">
            <div class="w-16 h-16 bg-gradient-to-br from-green-400 to-green-600 rounded-2xl flex items-center justify-center mb-5 shadow-lg shadow-green-500/30 group-hover:scale-110 transition-transform">
                <i data-lucide="database" class="w-8 h-8 text-white"></i>
            </div>
            <h3 class="text-xl font-bold text-slate-800 mb-2">{{ $isRtl ? 'النسخ الاحتياطي' : 'Backup' }}</h3>
            <p class="text-slate-500 text-sm">{{ $isRtl ? 'إنشاء واستعادة نسخ احتياطية' : 'Create and restore backups' }}</p>
            <div class="mt-4 flex items-center text-green-600 font-medium text-sm opacity-0 group-hover:opacity-100 transition-opacity">
                <span>{{ $isRtl ? 'إدارة النسخ' : 'Manage Backups' }}</span>
                <i data-lucide="chevron-{{ $isRtl ? 'left' : 'right' }}" class="w-4 h-4 {{ $isRtl ? 'mr-1' : 'ml-1' }}"></i>
            </div>
        </a>
        
    </div>
    
    <!-- Quick Info Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
        
        <!-- System Info -->
        <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl p-6 text-white">
            <h3 class="font-bold mb-4 flex items-center gap-2">
                <i data-lucide="info" class="w-5 h-5 text-emerald-400"></i>
                {{ $isRtl ? 'معلومات النظام' : 'System Info' }}
            </h3>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-slate-400">{{ $isRtl ? 'الإصدار' : 'Version' }}</span>
                    <span class="font-mono">2.0.0</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">Laravel</span>
                    <span class="font-mono">10.x</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">PHP</span>
                    <span class="font-mono">8.3</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-slate-400">{{ $isRtl ? 'قاعدة البيانات' : 'Database' }}</span>
                    <span class="font-mono">SQLite</span>
                </div>
            </div>
        </div>
        
        <!-- Quick Stats -->
        <div class="bg-gradient-to-br from-emerald-500 to-teal-600 rounded-3xl p-6 text-white">
            <h3 class="font-bold mb-4 flex items-center gap-2">
                <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
                {{ $isRtl ? 'إحصائيات سريعة' : 'Quick Stats' }}
            </h3>
            <div class="space-y-3 text-sm">
                <div class="flex justify-between">
                    <span class="text-white/70">{{ $isRtl ? 'إجمالي الأعضاء' : 'Total Members' }}</span>
                    <span class="font-bold">{{ \App\Models\Member::count() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-white/70">{{ $isRtl ? 'اشتراكات نشطة' : 'Active Subscriptions' }}</span>
                    <span class="font-bold">{{ \App\Models\Subscription::where('status', 'active')->count() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-white/70">{{ $isRtl ? 'المدربين' : 'Trainers' }}</span>
                    <span class="font-bold">{{ \App\Models\Trainer::where('status', 'active')->count() }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-white/70">{{ $isRtl ? 'البوابات' : 'Gates' }}</span>
                    <span class="font-bold">{{ \App\Models\Gate::where('is_active', true)->count() }}</span>
                </div>
            </div>
        </div>
        
        <!-- Support -->
        <div class="bg-white rounded-3xl p-6 border-2 border-slate-200">
            <h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
                <i data-lucide="help-circle" class="w-5 h-5 text-blue-500"></i>
                {{ $isRtl ? 'الدعم والمساعدة' : 'Help & Support' }}
            </h3>
            <div class="space-y-3 text-sm">
                <a href="#" class="flex items-center gap-2 text-slate-600 hover:text-emerald-600 transition-colors">
                    <i data-lucide="book-open" class="w-4 h-4"></i>
                    {{ $isRtl ? 'دليل المستخدم' : 'User Guide' }}
                </a>
                <a href="#" class="flex items-center gap-2 text-slate-600 hover:text-emerald-600 transition-colors">
                    <i data-lucide="video" class="w-4 h-4"></i>
                    {{ $isRtl ? 'فيديوهات تعليمية' : 'Video Tutorials' }}
                </a>
                <a href="#" class="flex items-center gap-2 text-slate-600 hover:text-emerald-600 transition-colors">
                    <i data-lucide="message-circle" class="w-4 h-4"></i>
                    {{ $isRtl ? 'تواصل معنا' : 'Contact Support' }}
                </a>
                <a href="#" class="flex items-center gap-2 text-slate-600 hover:text-emerald-600 transition-colors">
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                    {{ $isRtl ? 'سجل التغييرات' : 'Changelog' }}
                </a>
            </div>
        </div>
        
    </div>
    
</div>

@push('scripts')
<script>
    lucide.createIcons();
</script>
@endpush
@endsection