{{-- resources/views/general/posts/permissions.blade.php --}}
@extends($layout)

@section('title', 'إدارة صلاحيات المنشورات')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 pb-8">
    <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 py-4 sm:py-6">
        
        {{-- Page Header --}}
        <div class="mb-4 sm:mb-6">
            <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-2">إدارة صلاحيات المنشورات</h1>
            <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400">تحكم في صلاحيات النشر للأعضاء</p>
        </div>

        {{-- Statistics Cards --}}
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6 sm:mb-8">
            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-gray-300 dark:hover:border-gray-600 transition">
                <div class="flex items-center gap-3">
                    <div class="p-2 sm:p-3 rounded-lg bg-gray-100 dark:bg-gray-700 flex-shrink-0">
                        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                        </svg>
                    </div>
                    <div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">إجمالي</dt>
                        <dd class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">{{ $permissionStats['total_users'] }}</dd>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-green-300 dark:hover:border-green-700 transition">
                <div class="flex items-center gap-3">
                    <div class="p-2 sm:p-3 rounded-lg bg-green-100 dark:bg-green-900/20 flex-shrink-0">
                        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">مسموح</dt>
                        <dd class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">{{ $permissionStats['allowed_users'] }}</dd>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-red-300 dark:hover:border-red-700 transition">
                <div class="flex items-center gap-3">
                    <div class="p-2 sm:p-3 rounded-lg bg-red-100 dark:bg-red-900/20 flex-shrink-0">
                        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-12.728 12.728m0-12.728l12.728 12.728"/>
                        </svg>
                    </div>
                    <div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">محظورين</dt>
                        <dd class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">{{ $permissionStats['banned_users'] }}</dd>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-4 hover:border-yellow-300 dark:hover:border-yellow-700 transition">
                <div class="flex items-center gap-3">
                    <div class="p-2 sm:p-3 rounded-lg bg-yellow-100 dark:bg-yellow-900/20 flex-shrink-0">
                        <svg class="h-5 w-5 sm:h-6 sm:w-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                        </svg>
                    </div>
                    <div>
                        <dt class="text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400">معطلين</dt>
                        <dd class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">{{ $permissionStats['disabled_users'] }}</dd>
                    </div>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 mb-4 sm:mb-6">
            <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
                <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">فلترة المستخدمين</h3>
            </div>
            <div class="p-4 sm:p-6">
                <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">الحالة</label>
                        <select name="status" class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="">جميع الحالات</option>
                            <option value="allowed" {{ request('status') === 'allowed' ? 'selected' : '' }}>مسموح</option>
                            <option value="banned" {{ request('status') === 'banned' ? 'selected' : '' }}>محظور</option>
                            <option value="disabled" {{ request('status') === 'disabled' ? 'selected' : '' }}>معطل</option>
                        </select>
                    </div>
                    
                    <div>
                        <label class="block text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">البحث</label>
                        <input type="text" name="search" value="{{ request('search') }}" placeholder="البحث..."
                               class="w-full border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    </div>
                    
                    <div class="flex items-end">
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg text-sm transition-colors">
                            تطبيق الفلتر
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Users Cards Grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5">
            @forelse($users as $user)
                @php
                    $permission = $user->postPermission;
                    $canPost = $permission ? $permission->canCreatePost() : true;
                    $isBanned = $permission ? $permission->is_banned : false;
                @endphp
                
                <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden hover:border-gray-300 dark:hover:border-gray-600 transition-all">
                    <div class="p-4 sm:p-5">
                        <!-- User Header -->
                        <div class="flex items-start gap-3 mb-4">
                            <div class="relative flex-shrink-0">
                                <img src="{{ $user->avatar_url }}" 
                                     alt="{{ $user->name }}" 
                                     class="w-12 h-12 sm:w-14 sm:h-14 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700">
                                @if($user->is_online ?? false)
                                    <div class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></div>
                                @endif
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <h4 class="text-sm sm:text-base font-semibold text-gray-900 dark:text-white truncate">
                                    {{ $user->name }}
                                </h4>
                                <p class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate">
                                    {{ $user->email }}
                                </p>
                                
                                <!-- Role Badge -->
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs font-medium mt-1
                                    @if($user->hasRole('super-admin')) bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400
                                    @elseif($user->hasRole('moderator')) bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400
                                    @elseif($user->hasRole('official-member')) bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400
                                    @else bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300
                                    @endif">
                                    {{ $user->role_name }}
                                </span>
                            </div>
                            
                            <!-- Status Badge -->
                            @if($isBanned)
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400 border border-red-200 dark:border-red-800 flex-shrink-0">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-12.728 12.728m0-12.728l12.728 12.728"/>
                                    </svg>
                                    محظور
                                </span>
                            @elseif(!$canPost)
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-yellow-50 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800 flex-shrink-0">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                    </svg>
                                    معطل
                                </span>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-400 border border-green-200 dark:border-green-800 flex-shrink-0">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    مسموح
                                </span>
                            @endif
                        </div>
                        
                        <!-- Ban Info -->
                        @if($permission && $permission->banned_at)
                            <div class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
                                <div class="flex items-center gap-2 text-xs text-red-700 dark:text-red-400">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span>تاريخ الحظر: {{ $permission->banned_at->format('Y/m/d') }}</span>
                                </div>
                                @if($permission->bannedBy)
                                    <div class="text-xs text-red-600 dark:text-red-400 mt-1">
                                        بواسطة: {{ $permission->bannedBy->name }}
                                    </div>
                                @endif
                            </div>
                        @endif
                        
                        <!-- Actions -->
                        <div class="flex items-center justify-center gap-1 sm:gap-2 pt-4 border-t border-gray-100 dark:border-gray-700">
                            @if($isBanned)
                                {{-- إلغاء الحظر --}}
                                <button onclick="unbanUser('{{ $user->id }}')" 
                                        class="p-2 sm:p-2.5 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors group relative"
                                        title="إلغاء الحظر">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">إلغاء الحظر</span>
                                </button>
                            @else
                                {{-- حظر --}}
                                <button onclick="banUser('{{ $user->id }}')" 
                                        class="p-2 sm:p-2.5 text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors group relative"
                                        title="حظر">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-12.728 12.728m0-12.728l12.728 12.728"/>
                                    </svg>
                                    <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">حظر</span>
                                </button>
                            @endif
                            
                            @if($canPost)
                                {{-- تعطيل النشر --}}
                                <button onclick="togglePermission('{{ $user->id }}', false)" 
                                        class="p-2 sm:p-2.5 text-orange-600 hover:text-orange-700 hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors group relative"
                                        title="تعطيل النشر">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
                                    </svg>
                                    <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">تعطيل النشر</span>
                                </button>
                            @else
                                {{-- تفعيل النشر --}}
                                <button onclick="togglePermission('{{ $user->id }}', true)" 
                                        class="p-2 sm:p-2.5 text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors group relative"
                                        title="تفعيل النشر">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">تفعيل النشر</span>
                                </button>
                            @endif
                            
                            @if($permission && $permission->ban_reason)
                                {{-- عرض السبب --}}
                                <button onclick="showBanReason('{{ addslashes($permission->ban_reason) }}')" 
                                        class="p-2 sm:p-2.5 text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors group relative"
                                        title="عرض السبب">
                                    <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    <span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 bg-gray-900 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">عرض السبب</span>
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-span-full bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-10 sm:p-16 text-center">
                    <svg class="mx-auto h-16 w-16 text-gray-400 dark:text-gray-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">لا توجد مستخدمين</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">لم يتم العثور على مستخدمين تطابق معايير البحث</p>
                </div>
            @endforelse
        </div>
        
        {{-- Pagination --}}
        @if($users->hasPages())
            <div class="mt-6 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 px-4 sm:px-6 py-4">
                {{ $users->appends(request()->query())->links() }}
            </div>
        @endif
    </div>
</div>

{{-- Ban Reason Modal --}}
<div id="banReasonModal" class="fixed inset-0 bg-black/50 dark:bg-black/70 hidden z-50 flex items-center justify-center p-4">
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 max-w-md w-full">
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white">سبب الحظر</h3>
        </div>
        <div class="px-4 sm:px-6 py-4">
            <p id="banReasonText" class="text-sm sm:text-base text-gray-700 dark:text-gray-300"></p>
        </div>
        <div class="px-4 sm:px-6 py-3 sm:py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end">
            <button onclick="closeBanReasonModal()" class="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg text-sm font-medium transition-colors">
                إغلاق
            </button>
        </div>
    </div>
</div>

{{-- Scripts --}}
<script>
function banUser(userId) {
    const reason = prompt('سبب الحظر من النشر:');
    if (reason !== null && reason.trim() !== '') {
        fetch('/posts-management/ban-user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ user_id: userId, reason: reason })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ في العملية');
        });
    }
}

function unbanUser(userId) {
    if (confirm('هل أنت متأكد من إلغاء حظر هذا المستخدم من النشر؟')) {
        fetch('/posts-management/unban-user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ user_id: userId })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ في العملية');
        });
    }
}

function togglePermission(userId, canPost) {
    const action = canPost ? 'تفعيل' : 'تعطيل';
    if (confirm(`هل أنت متأكد من ${action} صلاحية النشر لهذا المستخدم؟`)) {
        fetch('/posts-management/toggle-permission', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ user_id: userId, can_post: canPost })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('حدث خطأ في العملية');
        });
    }
}

function showBanReason(reason) {
    document.getElementById('banReasonText').textContent = reason;
    document.getElementById('banReasonModal').classList.remove('hidden');
}

function closeBanReasonModal() {
    document.getElementById('banReasonModal').classList.add('hidden');
}

// Close modal when clicking outside
document.getElementById('banReasonModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeBanReasonModal();
    }
});
</script>
@endsection