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

@section('title', 'نظام الدردشة')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="flex flex-col lg:flex-row h-screen">
        
   {{-- قائمة جانبية للمحادثات والمستخدمين --}}
<div id="sidebar" class="w-full lg:w-1/3 xl:w-1/4 bg-white dark:bg-gray-800 border-b lg:border-b-0 lg:border-l border-gray-200 dark:border-gray-700 flex flex-col">
    
    {{-- رأس القائمة الجانبية --}}
    <div class="p-3 sm:p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between mb-3 sm:mb-4">
            <h1 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white">الدردشة</h1>
            <button id="refreshBtn" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                </svg>
            </button>
        </div>
        
        {{-- شريط البحث --}}
        <div class="relative">
            <input type="text" 
                   id="searchUsers" 
                   placeholder="ابحث عن مستخدم..."
                   class="w-full px-3 sm:px-4 py-2 pr-10 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white">
            <svg class="absolute right-3 top-2.5 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
        </div>
    </div>

    {{-- تبويبات المحادثات والمستخدمين --}}
    <div class="flex border-b border-gray-200 dark:border-gray-700">
        <button class="tab-btn flex-1 px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm font-medium text-blue-600 border-b-2 border-blue-600 dark:text-blue-400 dark:border-blue-400 transition-colors" data-tab="conversations">
            المحادثات
        </button>
        <button class="tab-btn flex-1 px-3 sm:px-4 py-2 sm:py-3 text-xs sm:text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" data-tab="users">
            المستخدمين
        </button>
    </div>

    {{-- المحادثات الحالية --}}
    <div id="conversationsTab" class="tab-content flex-1 overflow-y-auto">
        <div id="chatRoomsList" class="space-y-1 p-2">
            @forelse($chatRooms as $room)
                <div class="chat-room-item flex items-center p-2 sm:p-3 rounded-lg transition-colors
                            {{ $room->other_user_status === 'blocked' || $room->other_user_status === 'disabled' ? 'opacity-60 cursor-not-allowed' : 'hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer' }}
                            {{ $room->unread_count > 0 ? 'bg-blue-50 dark:bg-blue-900/20' : '' }}"
                     data-room-id="{{ $room->id }}"
                     data-status="{{ $room->other_user_status ?? 'enabled' }}"
                     onclick="handleRoomClick({{ $room->id }}, '{{ $room->other_user_status ?? 'enabled' }}')">
                    
                    {{-- Avatar --}}
                    <div class="relative ml-2 sm:ml-3 flex-shrink-0">
                        <img src="{{ $room->display_avatar ?: asset('images/default-avatar.png') }}" 
                             alt="{{ $room->display_name }}" 
                             class="w-10 h-10 sm:w-12 sm:h-12 rounded-full object-cover {{ $room->other_user_status !== 'enabled' ? 'grayscale' : '' }}">
                        
                        {{-- Online Status - يظهر فقط للمُفعّلين --}}
                        @if($room->is_online && $room->other_user_status === 'enabled')
                            <span class="absolute bottom-0 left-0 w-2.5 h-2.5 sm:w-3 sm:h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></span>
                        @endif
                    </div>
                    
                    {{-- Chat Info --}}
                    <div class="flex-1 min-w-0 mr-2">
                        <div class="flex items-center justify-between mb-1">
                            <h3 class="text-xs sm:text-sm font-medium text-gray-900 dark:text-white truncate">
                                {{ $room->display_name }}
                            </h3>
                            
                            {{-- Unread Badge - يظهر فقط للمُفعّلين --}}
                            @if($room->unread_count > 0 && $room->other_user_status === 'enabled')
                                <span class="inline-flex items-center justify-center px-1.5 sm:px-2 py-0.5 sm:py-1 text-xs font-bold leading-none text-white bg-red-500 rounded-full flex-shrink-0">
                                    {{ $room->unread_count > 9 ? '9+' : $room->unread_count }}
                                </span>
                            @endif
                        </div>
                        
                        {{-- Last Message or Status Badge --}}
                        <div class="flex items-center gap-2">
                            @if($room->other_user_status === 'blocked')
                                <div class="flex items-center text-xs text-red-600 dark:text-red-400 font-medium">
                                    <svg class="w-3 h-3 ml-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd"/>
                                    </svg>
                                    <span class="truncate">محظور من المحادثة</span>
                                </div>
                            @elseif($room->other_user_status === 'disabled')
                                <div class="flex items-center text-xs text-yellow-600 dark:text-yellow-400 font-medium">
                                    <svg class="w-3 h-3 ml-1 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                                    </svg>
                                    <span class="truncate">المحادثة معطلة</span>
                                </div>
                            @elseif($room->lastMessage)
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 truncate">
                                        @if($room->lastMessage->sender_id === auth()->id())
                                            <span class="text-gray-500">أنت: </span>
                                        @endif
                                        {{ $room->lastMessage->display_content ?? Str::limit($room->lastMessage->content, 30) }}
                                    </p>
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
                                        {{ $room->lastMessage->created_at->diffForHumans() }}
                                    </p>
                                </div>
                            @else
                                <p class="text-xs sm:text-sm text-gray-400 dark:text-gray-500 italic truncate">
                                    لا توجد رسائل بعد
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="flex flex-col items-center justify-center py-8 sm:py-12 text-center px-4">
                    <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-400 dark:text-gray-600 mb-3 sm:mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                    </svg>
                    <p class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mb-2">لا توجد محادثات بعد</p>
                    <p class="text-xs sm:text-sm text-gray-400 dark:text-gray-500">ابدأ محادثة جديدة من تبويب المستخدمين</p>
                </div>
            @endforelse
        </div>
    </div>

    {{-- قائمة المستخدمين --}}
    <div id="usersTab" class="tab-content flex-1 overflow-y-auto hidden">
        <div id="usersList" class="space-y-1 p-2">
            {{-- Loading State --}}
            <div class="flex justify-center py-8">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>
</div>

<script>
// معالجة الضغط على المحادثة
function handleRoomClick(roomId, status) {
    // التحقق من حالة المستخدم
    if (status === 'blocked') {
        showBlockedAlert('blocked');
        return;
    }
    
    if (status === 'disabled') {
        showBlockedAlert('disabled');
        return;
    }
    
    // فتح المحادثة العادية
    selectRoom(roomId);
}

// عرض تنبيه للمستخدمين المحظورين/المعطلين
function showBlockedAlert(status) {
    if (status === 'blocked') {
        // استخدم Alert بسيط أو SweetAlert
        alert('هذا المستخدم محظور من نظام الدردشة. لا يمكن إرسال رسائل له.');
        
        // أو إذا كان عندك SweetAlert:
        // Swal.fire({
        //     icon: 'error',
        //     title: 'مستخدم محظور',
        //     text: 'هذا المستخدم محظور من نظام الدردشة. لا يمكن إرسال رسائل له.',
        //     confirmButtonText: 'حسناً',
        //     confirmButtonColor: '#dc2626'
        // });
    } else if (status === 'disabled') {
        alert('المحادثة معطلة لهذا المستخدم حالياً. لا يمكن إرسال رسائل له.');
        
        // أو SweetAlert:
        // Swal.fire({
        //     icon: 'warning',
        //     title: 'محادثة معطلة',
        //     text: 'المحادثة معطلة لهذا المستخدم حالياً. لا يمكن إرسال رسائل له.',
        //     confirmButtonText: 'حسناً',
        //     confirmButtonColor: '#f59e0b'
        // });
    }
}
</script>


        {{-- منطقة الدردشة الرئيسية --}}
        <div class="flex-1 flex flex-col dark:bg-gray-800 lg:min-h-0">
            
            {{-- حالة عدم وجود محادثة مختارة --}}
            <div id="noChatSelected" class="flex-1 flex items-center justify-center p-4">
                <div class="text-center max-w-md">
                    <svg class="mx-auto h-10 w-10 sm:h-12 sm:w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                    </svg>
                    <h3 class="mt-2 text-sm sm:text-base font-medium text-gray-900 dark:text-white">اختر محادثة للبدء</h3>
                    <p class="mt-1 text-xs sm:text-sm text-gray-500 dark:text-gray-400">اختر محادثة من القائمة أو ابدأ محادثة جديدة مع أحد المستخدمين</p>
                </div>
            </div>

            {{-- منطقة الدردشة النشطة --}}
            <div id="activeChatArea" class="hidden flex-1 flex flex-col min-h-0">
                
                {{-- رأس الدردشة --}}
                <div id="chatHeader" class="p-3 sm:p-4 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 flex-shrink-0">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center min-w-0 flex-1">
                            <button id="backToListBtn" class="lg:hidden p-2 ml-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                </svg>
                            </button>
                            <div class="relative ml-2 sm:ml-3 flex-shrink-0">
                                <img id="chatUserAvatar" src="" alt="" class="w-8 h-8 sm:w-10 sm:h-10 rounded-full object-cover">
                                <span id="chatUserStatus" class="absolute bottom-0 left-0 w-2.5 h-2.5 sm:w-3 sm:h-3 border-2 border-white dark:border-gray-800 rounded-full hidden"></span>
                            </div>
                            <div class="min-w-0 flex-1">
                                <h3 id="chatUserName" class="text-sm sm:text-lg font-medium text-gray-900 dark:text-white truncate"></h3>
                                <p id="chatUserLastSeen" class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 truncate"></p>
                            </div>
                        </div>
                        <button id="closeChatBtn" class="hidden lg:block p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                </div>

                {{-- منطقة الرسائل --}}
                <div id="messagesArea" class="flex-1 overflow-y-auto p-3 sm:p-4 space-y-3 sm:space-y-4 bg-gray-50 dark:bg-gray-900">
                    {{-- سيتم إضافة الرسائل هنا عبر JavaScript --}}
                </div>

            {{-- منطقة كتابة الرسائل - MOBILE OPTIMIZED --}}
<div class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 flex-shrink-0" 
     style="padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom));">
    <form id="messageForm" class="flex items-center gap-2" style="min-height: 44px;">
        <input type="hidden" id="currentRoomId">
        
        {{-- زر المرفق --}}
        <button type="button" id="attachBtn" 
                class="flex-shrink-0 w-11 h-11 flex items-center justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition"
                style="min-width: 44px; min-height: 44px;">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
            </svg>
        </button>
        <input type="file" id="fileInput" class="hidden" accept="image/*,audio/*,*/*">

        {{-- حقل الإدخال --}}
        <textarea id="messageInput" 
                  placeholder="اكتب رسالتك..." 
                  rows="1"
                  class="flex-1 px-3 py-2.5 text-base border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white resize-none"
                  style="max-height: 120px; min-height: 44px; line-height: 1.5;"></textarea>
        
        {{-- زر الإرسال --}}
        <button type="submit" 
                class="flex-shrink-0 w-11 h-11 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
                style="min-width: 44px; min-height: 44px;">
            <svg class="w-6 h-6 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
            </svg>
        </button>
    </form>
    
    {{-- معاينة الملف --}}
    <div id="filePreview" class="hidden mt-3 p-3 bg-gray-100 dark:bg-gray-700 rounded-lg">
        <div class="flex items-center justify-between gap-2">
            <div class="flex items-center gap-2 min-w-0 flex-1">
                <div id="filePreviewContent" class="flex-shrink-0"></div>
                <div class="min-w-0 flex-1">
                    <p id="fileName" class="text-sm font-medium text-gray-900 dark:text-white truncate"></p>
                    <p id="fileSize" class="text-xs text-gray-500 dark:text-gray-400"></p>
                </div>
            </div>
            <button id="removeFileBtn" 
                    class="flex-shrink-0 p-2 text-red-500 hover:text-red-700"
                    style="min-width: 36px; min-height: 36px;">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>
</div>

            </div>
        </div>
    </div>
</div>

<style>
    /* CRITICAL MOBILE FIX */
#messageInput {
    -webkit-appearance: none;
    appearance: none;
    font-size: 16px !important; /* يمنع الزوم في iOS */
}

@media (max-width: 767px) {
    #messageForm {
        width: 100%;
    }
    
    #messageInput {
        font-size: 16px !important;
        -webkit-text-size-adjust: 100%;
    }
    
    /* تثبيت Input Area */
    #activeChatArea > div:last-child {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}

/* Fix للكيبورد في iOS */
@supports (-webkit-touch-callout: none) {
    #activeChatArea {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* إضافة بعض التحسينات للموبايل */
@media (max-width: 1023px) {
    #sidebar.chat-active {
        display: none;
    }
    
    #activeChatArea {
        height: 100vh;
        position: fixed;  /* إضافة هذا */
        top: 0;          /* إضافة هذا */
        left: 0;         /* إضافة هذا */
        right: 0;        /* إضافة هذا */
        z-index: 50;     /* إضافة هذا */
    }
}

/* تحسين scroll للمحادثات */
#messagesArea::-webkit-scrollbar {
    width: 6px;
}

#messagesArea::-webkit-scrollbar-track {
    background: transparent;
}

#messagesArea::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

#messagesArea::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
}

/* تحسين النصوص الطويلة */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

<script>
// إضافة JavaScript لإدارة الانتقال بين القائمة والدردشة على الموبايل
document.addEventListener('DOMContentLoaded', function() {
    const backToListBtn = document.getElementById('backToListBtn');
    const sidebar = document.getElementById('sidebar');
    const activeChatArea = document.getElementById('activeChatArea');
    const chatRoomItems = document.querySelectorAll('.chat-room-item');
    
// عند فتح محادثة على الموبايل
chatRoomItems.forEach(item => {
    item.addEventListener('click', function() {
        if (window.innerWidth < 1024) {
            sidebar.classList.add('chat-active');
            activeChatArea.style.display = 'flex'; // إضافة هذا
        }
    });
});
    // العودة للقائمة على الموبايل
// العودة للقائمة على الموبايل
if (backToListBtn) {
    backToListBtn.addEventListener('click', function() {
        sidebar.classList.remove('chat-active');
        activeChatArea.style.display = 'none'; // تغيير هذا
        document.getElementById('noChatSelected').classList.remove('hidden');
    });
}
    
    // تحديث حجم textarea تلقائياً
    const messageInput = document.getElementById('messageInput');
    if (messageInput) {
        messageInput.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = Math.min(this.scrollHeight, 120) + 'px';
        });
    }
});
</script>

{{-- Modal لعرض الصور والملفات --}}
<div id="mediaModal" 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-4xl max-h-full overflow-auto">
        <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
            <h3 id="modalTitle" class="text-lg font-medium text-gray-900 dark:text-white">معاينة الملف</h3>
            <button id="closeModalBtn" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>
        <div id="modalContent" class="p-4">
            {{-- محتوى الملف سيظهر هنا --}}
        </div>
    </div>
</div>

{{-- توضيح عند عدم إمكانية الوصول للشات --}}
@if(!auth()->user()->chatPermission || !auth()->user()->chatPermission->canAccessChat())
    <div class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md">
            <div class="text-center">
                <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                </svg>
                <h3 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">نظام الدردشة غير متاح</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    عذراً، نظام الدردشة غير متاح لك حالياً. 
                    يرجى التواصل مع الإدارة لمزيد من المعلومات.
                </p>
                <div class="mt-4">
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">
                        العودة للرئيسية
                    </a>
                </div>
            </div>
        </div>
    </div>
@endif

<style>
.tab-btn.active {
    color: #3B82F6;
    border-bottom-color: #3B82F6;
}

.dark .tab-btn.active {
    color: #60A5FA;
    border-bottom-color: #60A5FA;
}

.message-bubble {
    max-width: 70%;
    word-wrap: break-word;
}

.message-time {
    font-size: 0.75rem;
    opacity: 0.7;
}

.typing-indicator {
    display: flex;
    padding: 20px;
}

.typing-indicator span {
    height: 10px;
    width: 10px;
    float: left;
    margin: 0 1px;
    background-color: #9E9EA1;
    display: block;
    border-radius: 50%;
    opacity: 0.4;
    animation: 1s blink ease-in-out infinite both;
}

.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
    0%, 80%, 100% { 
        transform: scale(0);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1);
        opacity: 1;
    }
}
</style>

<script>
class ChatSystem {
constructor() {
    this.currentRoomId = null;
    this.lastMessageId = null;
    this.pollingInterval = null;
    this.users = [];
    
    // تحويل البيانات بشكل صحيح
    const rawRooms = @json($chatRooms);
    this.chatRooms = Array.isArray(rawRooms) ? rawRooms : Object.values(rawRooms);
    
    console.log('تم تحميل الغرف:', this.chatRooms); // للتأكد
    
    this.init();
}
    init() {
        this.bindEvents();
        this.loadUsers();
        this.startPolling();
    }

    bindEvents() {
        // تبديل التبويبات
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.addEventListener('click', (e) => this.switchTab(e.target.dataset.tab));
        });

        // البحث في المستخدمين
        document.getElementById('searchUsers').addEventListener('input', (e) => {
            this.searchUsers(e.target.value);
        });

        // النقر على غرفة محادثة
        document.addEventListener('click', (e) => {
            const roomItem = e.target.closest('.chat-room-item');
            if (roomItem) {
                this.openChatRoom(roomItem.dataset.roomId);
            }
        });

        // النقر على مستخدم لبدء محادثة
        document.addEventListener('click', (e) => {
            const userItem = e.target.closest('.user-item');
            if (userItem) {
                this.startChatWithUser(userItem.dataset.userId);
            }
        });

        // إرسال رسالة
        document.getElementById('messageForm').addEventListener('submit', (e) => {
            e.preventDefault();
            this.sendMessage();
        });

        // رفع ملف
        document.getElementById('attachBtn').addEventListener('click', () => {
            document.getElementById('fileInput').click();
        });

        document.getElementById('fileInput').addEventListener('change', (e) => {
            this.handleFileSelect(e.target.files[0]);
        });

        // إزالة الملف المحدد
        document.getElementById('removeFileBtn').addEventListener('click', () => {
            this.removeSelectedFile();
        });

        // إغلاق الدردشة
        document.getElementById('closeChatBtn').addEventListener('click', () => {
            this.closeChatRoom();
        });

        // تحديث تلقائي
        document.getElementById('refreshBtn').addEventListener('click', () => {
            this.refreshData();
        });

        // إغلاق المودال
        document.getElementById('closeModalBtn').addEventListener('click', () => {
            this.closeModal();
        });

        // تغيير حجم textarea تلقائياً
        document.getElementById('messageInput').addEventListener('input', (e) => {
            this.autoResizeTextarea(e.target);
        });

        // إرسال بالضغط على Enter
        document.getElementById('messageInput').addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.sendMessage();
            }
        });
    }

    switchTab(tabName) {
        // تحديث أزرار التبويبات
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('active', 'text-blue-600', 'border-blue-600', 'dark:text-blue-400', 'dark:border-blue-400');
            btn.classList.add('text-gray-500', 'hover:text-gray-700', 'dark:text-gray-400', 'dark:hover:text-gray-200');
        });

        const activeBtn = document.querySelector(`[data-tab="${tabName}"]`);
        activeBtn.classList.add('active', 'text-blue-600', 'border-blue-600', 'dark:text-blue-400', 'dark:border-blue-400');
        activeBtn.classList.remove('text-gray-500', 'hover:text-gray-700', 'dark:text-gray-400', 'dark:hover:text-gray-200');

        // تحديث المحتوى
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });

        document.getElementById(tabName + 'Tab').classList.remove('hidden');

        if (tabName === 'users' && this.users.length === 0) {
            this.loadUsers();
        }
    }

    async loadUsers() {
        try {
            const response = await fetch('/chat/users');
            const data = await response.json();
            
            if (data.success) {
                this.users = data.users;
                this.renderUsers();
            }
        } catch (error) {
            console.error('خطأ في جلب المستخدمين:', error);
        }
    }

    renderUsers(filteredUsers = null) {
        const users = filteredUsers || this.users;
        const usersList = document.getElementById('usersList');
        
        usersList.innerHTML = users.map(user => `
            <div class="user-item flex items-center p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
                 data-user-id="${user.id}">
                <div class="relative ml-3">
                    <img src="${user.avatar || '/images/default-avatar.png'}" 
                         alt="${user.name}" 
                         class="w-12 h-12 rounded-full object-cover">
                    ${user.is_online ? 
                        '<span class="absolute bottom-0 left-0 w-3 h-3 bg-green-500 border-2 border-white dark:border-gray-800 rounded-full"></span>' : 
                        '<span class="absolute bottom-0 left-0 w-3 h-3 bg-gray-400 border-2 border-white dark:border-gray-800 rounded-full"></span>'
                    }
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="text-sm font-medium text-gray-900 dark:text-white truncate">${user.name}</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        ${user.is_online ? 'متصل الآن' : `آخر ظهور ${user.last_activity || 'غير محدد'}`}
                    </p>
                    <p class="text-xs text-blue-600 dark:text-blue-400">${this.getRoleDisplayName(user.role)}</p>
                </div>
            </div>
        `).join('');
    }

    getRoleDisplayName(role) {
        const roles = {
            'super-admin': 'الإدارة العليا',
            'advisor': 'مستشار الفريق',
            'moderator': 'مشرف',
            'official-member': 'عضو رسمي',
            'member': 'عضو بيتا'
        };
        return roles[role] || 'عضو';
    }

    searchUsers(query) {
        if (!query.trim()) {
            this.renderUsers();
            return;
        }

        const filteredUsers = this.users.filter(user => 
            user.name.toLowerCase().includes(query.toLowerCase()) ||
            user.email.toLowerCase().includes(query.toLowerCase())
        );
        
        this.renderUsers(filteredUsers);
    }

    async startChatWithUser(userId) {
        try {
            const response = await fetch('/chat/start-chat', {
                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) {
                this.openChatRoom(data.chat_room.id);
                this.switchTab('conversations');
            } else {
                this.showAlert(data.message, 'error');
            }
        } catch (error) {
            console.error('خطأ في بدء المحادثة:', error);
            this.showAlert('حدث خطأ في بدء المحادثة', 'error');
        }
    }

    async openChatRoom(roomId) {
        this.currentRoomId = roomId;
        
        // إخفاء حالة عدم وجود محادثة وإظهار منطقة الدردشة
        document.getElementById('noChatSelected').classList.add('hidden');
        document.getElementById('activeChatArea').classList.remove('hidden');
        
        // تحديث معرف الغرفة
        document.getElementById('currentRoomId').value = roomId;
        
        // تحديث رأس الدردشة
        this.updateChatHeader(roomId);
        
        // جلب الرسائل
        await this.loadMessages(roomId);
        
        // تحديث حالة المحادثة في القائمة الجانبية
        this.updateChatRoomSelection(roomId);
    }

updateChatHeader(roomId) {
    const room = this.chatRooms.find(r => r.id == roomId);
    
    if (room) {
        const avatarElement = document.getElementById('chatUserAvatar');
        
        // ✅ استخدم المسار بالظبط زي ما جاي من Backend
        let avatarSrc = room.display_avatar || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(room.display_name || 'User') + '&background=random';
        
        console.log('🖼️ الصورة:', avatarSrc);
        console.log('📦 الغرفة:', room);
        
        avatarElement.src = avatarSrc;
        
        // ✅ منع الـ loop - استخدم avatar من CDN كـ fallback
        avatarElement.onerror = function() {
            // ❌ لو فشل، بلاش تحاول تاني!
            if (!this.src.includes('ui-avatars.com')) {
                console.error('❌ فشل تحميل:', this.src);
                this.src = 'https://ui-avatars.com/api/?name=' + encodeURIComponent(room.display_name || 'User') + '&background=0ea5e9&color=fff&bold=true';
                // ✅ امسح الـ onerror عشان ميعملش loop
                this.onerror = null;
            }
        };
        
        document.getElementById('chatUserName').textContent = room.display_name;
        
        const statusElement = document.getElementById('chatUserStatus');
        if (room.is_online) {
            statusElement.classList.remove('hidden', 'bg-gray-400');
            statusElement.classList.add('bg-green-500');
            document.getElementById('chatUserLastSeen').textContent = 'متصل الآن';
        } else {
            statusElement.classList.remove('hidden', 'bg-green-500');
            statusElement.classList.add('bg-gray-400');
            document.getElementById('chatUserLastSeen').textContent = 'غير متصل';
        }
    } else {
        console.error('❌ لم يتم العثور على الغرفة:', roomId);
    }
}

    async loadMessages(roomId, page = 1) {
        try {
            const response = await fetch(`/chat/rooms/${roomId}/messages?page=${page}`);
            const data = await response.json();
            
            if (data.success) {
                this.renderMessages(data.messages);
                this.scrollToBottom();
            }
        } catch (error) {
            console.error('خطأ في جلب الرسائل:', error);
        }
    }

    renderMessages(messages) {
        const messagesArea = document.getElementById('messagesArea');
        const currentUserId = {{ auth()->id() }};
        
        messagesArea.innerHTML = messages.map(message => {
            const isOwn = message.sender_id === currentUserId;
            const alignClass = isOwn ? 'justify-end' : 'justify-start';
            const bubbleClass = isOwn ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white';
            
            return `
                <div class="flex ${alignClass}">
                    <div class="message-bubble ${bubbleClass} rounded-lg px-4 py-2 shadow-sm max-w-xs lg:max-w-md">
                        ${this.renderMessageContent(message)}
                        <div class="message-time mt-1 text-right">
                            ${message.formatted_time}
                            ${isOwn && message.can_delete ? `
                                <button class="delete-message-btn mr-2 text-red-400 hover:text-red-600" data-message-id="${message.id}">
                                    <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                    </svg>
                                </button>
                            ` : ''}
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        // ربط أحداث حذف الرسائل
        document.querySelectorAll('.delete-message-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                this.deleteMessage(e.target.closest('.delete-message-btn').dataset.messageId);
            });
        });
    }

    renderMessageContent(message) {
        switch (message.message_type) {
            case 'text':
                return `<p>${this.escapeHtml(message.content)}</p>`;
            
            case 'image':
                return `
                    <div class="cursor-pointer" onclick="chatSystem.showImageModal('${message.file_url}', '${message.file_name}')">
                        <img src="${message.file_url}" alt="${message.file_name}" class="max-w-full h-auto rounded">
                        <p class="text-sm mt-1">${message.file_name}</p>
                    </div>
                `;
            
            case 'audio':
                return `
                    <div class="flex items-center space-x-2">
                        <audio controls class="max-w-full">
                            <source src="${message.file_url}" type="audio/mpeg">
                            متصفحك لا يدعم تشغيل الملفات الصوتية
                        </audio>
                        <p class="text-sm">${message.file_name}</p>
                    </div>
                `;
            
            case 'file':
                return `
                    <div class="flex items-center space-x-2 p-2 bg-gray-100 dark:bg-gray-600 rounded">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        <div>
                            <p class="text-sm font-medium">${message.file_name}</p>
                            <p class="text-xs">${message.file_size}</p>
                        </div>
                        <a href="${message.file_url}" download class="text-blue-500 hover:text-blue-700">
                            <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                            </svg>
                        </a>
                    </div>
                `;
            
            default:
                return `<p>${message.content || 'رسالة غير مدعومة'}</p>`;
        }
    }

    async sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const fileInput = document.getElementById('fileInput');
        const roomId = this.currentRoomId;
        
        if (!roomId) return;
        
        const messageText = messageInput.value.trim();
        const file = fileInput.files[0];
        
        if (!messageText && !file) return;
        
        const formData = new FormData();
        
        if (file) {
            formData.append('message_type', this.getFileType(file));
            formData.append('file', file);
        } else {
            formData.append('message_type', 'text');
            formData.append('content', messageText);
        }
        
        try {
            const response = await fetch(`/chat/rooms/${roomId}/send`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            });
            
            const data = await response.json();
            
            if (data.success) {
                // إضافة الرسالة فوراً للواجهة
                this.addMessageToUI(data.message);
                
                // تنظيف النموذج
                messageInput.value = '';
                fileInput.value = '';
                this.removeSelectedFile();
                this.autoResizeTextarea(messageInput);
                
                this.scrollToBottom();
            } else {
                this.showAlert(data.message, 'error');
            }
        } catch (error) {
            console.error('خطأ في إرسال الرسالة:', error);
            this.showAlert('حدث خطأ في إرسال الرسالة', 'error');
        }
    }

    getFileType(file) {
        if (file.type.startsWith('image/')) return 'image';
        if (file.type.startsWith('audio/')) return 'audio';
        return 'file';
    }

    addMessageToUI(message) {
        const messagesArea = document.getElementById('messagesArea');
        const currentUserId = {{ auth()->id() }};
        const isOwn = message.sender_id === currentUserId;
        const alignClass = isOwn ? 'justify-end' : 'justify-start';
        const bubbleClass = isOwn ? 'bg-blue-600 text-white' : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white';
        
        const messageElement = document.createElement('div');
        messageElement.className = `flex ${alignClass}`;
        messageElement.innerHTML = `
            <div class="message-bubble ${bubbleClass} rounded-lg px-4 py-2 shadow-sm max-w-xs lg:max-w-md">
                ${this.renderMessageContent(message)}
                <div class="message-time mt-1 text-right">
                    ${message.formatted_time}
                    ${isOwn && message.can_delete ? `
                        <button class="delete-message-btn mr-2 text-red-400 hover:text-red-600" data-message-id="${message.id}">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                            </svg>
                        </button>
                    ` : ''}
                </div>
            </div>
        `;
        
        messagesArea.appendChild(messageElement);
        
        // ربط حدث حذف الرسالة
        const deleteBtn = messageElement.querySelector('.delete-message-btn');
        if (deleteBtn) {
            deleteBtn.addEventListener('click', (e) => {
                this.deleteMessage(e.target.closest('.delete-message-btn').dataset.messageId);
            });
        }
    }

    async deleteMessage(messageId) {
        if (!confirm('هل أنت متأكد من حذف هذه الرسالة؟')) return;
        
        try {
            const response = await fetch(`/chat/messages/${messageId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                // إزالة الرسالة من الواجهة أو تحديثها
                this.loadMessages(this.currentRoomId);
                this.showAlert('تم حذف الرسالة بنجاح', 'success');
            } else {
                this.showAlert(data.message, 'error');
            }
        } catch (error) {
            console.error('خطأ في حذف الرسالة:', error);
        }
    }

    handleFileSelect(file) {
        if (!file) return;
        
        // التحقق من حجم الملف (10MB حد أقصى)
        if (file.size > 10 * 1024 * 1024) {
            this.showAlert('حجم الملف كبير جداً. الحد الأقصى 10 ميجابايت', 'error');
            return;
        }
        
        this.showFilePreview(file);
    }

    showFilePreview(file) {
        const preview = document.getElementById('filePreview');
        const content = document.getElementById('filePreviewContent');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        
        fileName.textContent = file.name;
        fileSize.textContent = this.formatFileSize(file.size);
        
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = (e) => {
                content.innerHTML = `<img src="${e.target.result}" alt="معاينة" class="w-12 h-12 object-cover rounded ml-3">`;
            };
            reader.readAsDataURL(file);
        } else {
            content.innerHTML = `
                <div class="w-12 h-12 bg-gray-200 dark:bg-gray-600 rounded flex items-center justify-center ml-3">
                    <svg class="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
            `;
        }
        
        preview.classList.remove('hidden');
    }

    removeSelectedFile() {
        document.getElementById('fileInput').value = '';
        document.getElementById('filePreview').classList.add('hidden');
    }

    formatFileSize(bytes) {
        if (bytes === 0) return '0 بايت';
        const k = 1024;
        const sizes = ['بايت', 'كيلوبايت', 'ميجابايت', 'جيجابايت'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    showImageModal(imageUrl, imageName) {
        const modal = document.getElementById('mediaModal');
        const title = document.getElementById('modalTitle');
        const content = document.getElementById('modalContent');
        
        title.textContent = imageName || 'صورة';
        content.innerHTML = `<img src="${imageUrl}" alt="${imageName}" class="max-w-full h-auto">`;
        
        modal.classList.remove('hidden');
    }

    closeModal() {
        document.getElementById('mediaModal').classList.add('hidden');
    }

    closeChatRoom() {
        this.currentRoomId = null;
        document.getElementById('activeChatArea').classList.add('hidden');
        document.getElementById('noChatSelected').classList.remove('hidden');
        
        // إزالة التحديد من قائمة المحادثات
        document.querySelectorAll('.chat-room-item').forEach(item => {
            item.classList.remove('bg-blue-100', 'dark:bg-blue-900');
        });
    }

    updateChatRoomSelection(roomId) {
        // إزالة التحديد من جميع المحادثات
        document.querySelectorAll('.chat-room-item').forEach(item => {
            item.classList.remove('bg-blue-100', 'dark:bg-blue-900');
        });
        
        // إضافة التحديد للمحادثة الحالية
        const selectedRoom = document.querySelector(`[data-room-id="${roomId}"]`);
        if (selectedRoom) {
            selectedRoom.classList.add('bg-blue-100', 'dark:bg-blue-900');
        }
    }

    autoResizeTextarea(textarea) {
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    }

    scrollToBottom() {
        const messagesArea = document.getElementById('messagesArea');
        messagesArea.scrollTop = messagesArea.scrollHeight;
    }

    startPolling() {
        this.pollingInterval = setInterval(() => {
            this.checkForUpdates();
        }, 3000); // فحص كل 3 ثواني
    }

    async checkForUpdates() {
        if (!this.currentRoomId) return;
        
        try {
            const response = await fetch(`/chat/updates?last_check=${new Date().toISOString()}`);
            const data = await response.json();
            
            if (data.success && data.new_messages.length > 0) {
                // إضافة الرسائل الجديدة
                data.new_messages.forEach(message => {
                    if (message.chat_room_id == this.currentRoomId) {
                        this.addMessageToUI(message);
                    }
                });
                
                this.scrollToBottom();
            }
            
            // تحديث عدد الرسائل غير المقروءة
            this.updateUnreadCounts(data.unread_count);
            
        } catch (error) {
            console.error('خطأ في فحص التحديثات:', error);
        }
    }

    updateUnreadCounts(totalUnread) {
        // يمكن إضافة تحديث للعدادات هنا
    }

    refreshData() {
        this.loadUsers();
        if (this.currentRoomId) {
            this.loadMessages(this.currentRoomId);
        }
    }

    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();
        }, 3000);
    }

    escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}

// تشغيل نظام الشات عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', () => {
    window.chatSystem = new ChatSystem();
});
</script>
@endsection