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

@section('title', 'تفاصيل صلاحية الشات - ' . $chatPermission->user->name)

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        
        {{-- Page Header --}}
        <div class="mb-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
                        تفاصيل صلاحية الشات
                    </h1>
                    <p class="text-gray-600 dark:text-gray-400">
                        معلومات مفصلة حول صلاحية الوصول لنظام الدردشة
                    </p>
                </div>
                <a href="{{ route('chat.management.index') }}" 
                   class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white font-medium rounded-lg transition duration-200">
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    العودة للقائمة
                </a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            {{-- معلومات المستخدم --}}
            <div class="lg:col-span-2">
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات المستخدم</h3>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-6">
                            <div class="flex-shrink-0">
                                <img class="h-20 w-20 rounded-full object-cover" 
                                     src="{{ $chatPermission->user->avatar ? Storage::url($chatPermission->user->avatar) : asset('images/default-avatar.png') }}" 
                                     alt="{{ $chatPermission->user->name }}">
                            </div>
                            <div class="mr-6">
                                <h4 class="text-xl font-bold text-gray-900 dark:text-white">
                                    {{ $chatPermission->user->name }}
                                </h4>
                                <p class="text-gray-600 dark:text-gray-400">
                                    {{ $chatPermission->user->email }}
                                </p>
                                <div class="mt-2">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if($chatPermission->user->hasRole('super-admin'))
                                            bg-purple-100 text-purple-800 dark:bg-purple-900/50 dark:text-purple-200
                                        @elseif($chatPermission->user->hasRole('advisor'))
                                            bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200
                                        @elseif($chatPermission->user->hasRole('moderator'))
                                            bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200
                                        @elseif($chatPermission->user->hasRole('official-member'))
                                            bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200
                                        @else
                                            bg-gray-100 text-gray-800 dark:bg-gray-900/50 dark:text-gray-200
                                        @endif
                                    ">
                                        {{ $chatPermission->user->roles->first()?->display_name ?? 'عضو بيتا' }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">الجنس</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                    {{ $chatPermission->user->gender === 'male' ? 'ذكر' : 'أنثى' }}
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">تاريخ الانضمام</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                    {{ $chatPermission->user->joined_at ? $chatPermission->user->joined_at->format('Y/m/d') : 'غير محدد' }}
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">حالة الحساب</dt>
                                <dd class="mt-1">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                        @if($chatPermission->user->account_status === 'active')
                                            bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200
                                        @elseif($chatPermission->user->account_status === 'suspended')
                                            bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-200
                                        @else
                                            bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200
                                        @endif
                                    ">
                                        {{ $chatPermission->user->account_status_text }}
                                    </span>
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">آخر نشاط</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                    {{ $chatPermission->user->last_activity ? $chatPermission->user->last_activity->diffForHumans() : 'لم يدخل بعد' }}
                                </dd>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- حالة صلاحية الشات --}}
            <div>
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">حالة صلاحية الشات</h3>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            {{-- حالة التفعيل --}}
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">الشات مفعل</span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $chatPermission->chat_enabled ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200' }}
                                ">
                                    {{ $chatPermission->chat_enabled ? 'نعم' : 'لا' }}
                                </span>
                            </div>

                            {{-- حالة الحظر --}}
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">محظور</span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $chatPermission->is_blocked ? 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200' : 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' }}
                                ">
                                    {{ $chatPermission->is_blocked ? 'نعم' : 'لا' }}
                                </span>
                            </div>

                            {{-- إمكانية الوصول --}}
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">يمكنه الوصول للشات</span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                    {{ $chatPermission->canAccessChat() ? 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200' : 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200' }}
                                ">
                                    {{ $chatPermission->canAccessChat() ? 'نعم' : 'لا' }}
                                </span>
                            </div>
                        </div>

                        {{-- إجراءات سريعة --}}
                        <div class="mt-6 space-y-3">
                            @if($chatPermission->canAccessChat())
                                <button onclick="toggleChatAccess({{ $chatPermission->user_id }}, false)" 
                                        class="w-full inline-flex items-center justify-center px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" 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.728L5.636 5.636m12.728 12.728L5.636 5.636"></path>
                                    </svg>
                                    تعطيل الشات
                                </button>
                            @else
                                <button onclick="toggleChatAccess({{ $chatPermission->user_id }}, true)" 
                                        class="w-full inline-flex items-center justify-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" 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"></path>
                                    </svg>
                                    تفعيل الشات
                                </button>
                            @endif

                            @if($chatPermission->is_blocked)
                                <button onclick="unblockUser({{ $chatPermission->user_id }})" 
                                        class="w-full inline-flex items-center justify-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
                                    </svg>
                                    إلغاء الحظر
                                </button>
                            @else
                                <button onclick="blockUser({{ $chatPermission->user_id }}, '{{ $chatPermission->user->name }}')" 
                                        class="w-full inline-flex items-center justify-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition duration-200">
                                    <svg class="w-5 h-5 ml-2" 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.728L5.636 5.636m12.728 12.728L5.636 5.636"></path>
                                    </svg>
                                    حظر من الشات
                                </button>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- معلومات إضافية --}}
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
                    <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">معلومات إضافية</h3>
                    </div>
                    <div class="p-6">
                        <div class="space-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">تاريخ إنشاء الصلاحية</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                    {{ $chatPermission->created_at->format('Y/m/d H:i') }}
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">آخر تحديث</dt>
                                <dd class="mt-1 text-sm text-gray-900 dark:text-white">
                                    {{ $chatPermission->updated_at->format('Y/m/d H:i') }}
                                </dd>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- تفاصيل الحظر --}}
        @if($chatPermission->is_blocked)
            <div class="mt-6">
                <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-600 rounded-lg">
                    <div class="px-6 py-4 border-b border-red-200 dark:border-red-600">
                        <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">تفاصيل الحظر</h3>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <dt class="text-sm font-medium text-red-700 dark:text-red-300">تاريخ الحظر</dt>
                                <dd class="mt-1 text-sm text-red-900 dark:text-red-100">
                                    {{ $chatPermission->blocked_at ? $chatPermission->blocked_at->format('Y/m/d H:i') : 'غير محدد' }}
                                </dd>
                            </div>
                            <div>
                                <dt class="text-sm font-medium text-red-700 dark:text-red-300">محظور بواسطة</dt>
                                <dd class="mt-1 text-sm text-red-900 dark:text-red-100">
                                    {{ $chatPermission->blockedBy ? $chatPermission->blockedBy->name : 'غير محدد' }}
                                </dd>
                            </div>
                            @if($chatPermission->blocked_reason)
                                <div class="md:col-span-2">
                                    <dt class="text-sm font-medium text-red-700 dark:text-red-300">سبب الحظر</dt>
                                    <dd class="mt-1 text-sm text-red-900 dark:text-red-100">
                                        {{ $chatPermission->blocked_reason }}
                                    </dd>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>

{{-- Block User Modal --}}
<div id="blockUserModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
    <div class="bg-white dark:bg-gray-800 rounded-lg max-w-md w-full mx-4">
        <div class="p-6">
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">حظر المستخدم من الدردشة</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                هل أنت متأكد من حظر المستخدم <span id="blockUserName" class="font-medium"></span> من نظام الدردشة؟
            </p>
            
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">سبب الحظر (اختياري)</label>
                <textarea id="blockReason" 
                          class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 dark:bg-gray-700 dark:text-white"
                          rows="3" 
                          placeholder="اكتب سبب الحظر..."></textarea>
            </div>
            
            <div class="flex justify-end space-x-2">
                <button onclick="closeBlockModal()" 
                        class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition duration-200">
                    إلغاء
                </button>
                <button onclick="confirmBlockUser()" 
                        class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition duration-200">
                    حظر المستخدم
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentBlockUserId = null;

// Toggle Chat Access
async function toggleChatAccess(userId, enabled) {
    try {
        const response = await fetch('/chat-management/toggle-access', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                user_id: userId,
                enabled: enabled
            })
        });

        const data = await response.json();
        
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message, 'error');
        }
    } catch (error) {
        console.error('خطأ:', error);
        showAlert('حدث خطأ في العملية', 'error');
    }
}

// Block User
function blockUser(userId, userName) {
    currentBlockUserId = userId;
    document.getElementById('blockUserName').textContent = userName;
    document.getElementById('blockUserModal').classList.remove('hidden');
}

function closeBlockModal() {
    currentBlockUserId = null;
    document.getElementById('blockUserModal').classList.add('hidden');
    document.getElementById('blockReason').value = '';
}

async function confirmBlockUser() {
    if (!currentBlockUserId) return;
    
    const reason = document.getElementById('blockReason').value.trim();
    
    try {
        const response = await fetch('/chat-management/block-user', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                user_id: currentBlockUserId,
                reason: reason
            })
        });

        const data = await response.json();
        
        if (data.success) {
            showAlert(data.message, 'success');
            closeBlockModal();
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message, 'error');
        }
    } catch (error) {
        console.error('خطأ:', error);
        showAlert('حدث خطأ في العملية', 'error');
    }
}

// Unblock User
async function unblockUser(userId) {
    if (!confirm('هل أنت متأكد من إلغاء حظر هذا المستخدم؟')) return;
    
    try {
        const response = await fetch('/chat-management/unblock-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
            })
        });

        const data = await response.json();
        
        if (data.success) {
            showAlert(data.message, 'success');
            setTimeout(() => location.reload(), 1000);
        } else {
            showAlert(data.message, 'error');
        }
    } catch (error) {
        console.error('خطأ:', error);
        showAlert('حدث خطأ في العملية', 'error');
    }
}

// Show Alert Function
function showAlert(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg ${
        type === 'error' ? 'bg-red-500 text-white' : 
        type === 'success' ? 'bg-green-500 text-white' : 
        'bg-blue-500 text-white'
    }`;
    alertDiv.textContent = message;
    
    document.body.appendChild(alertDiv);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 4000);
}
</script>
@endsection