{{-- resources/views/livechat/index.blade.php --}}

@extends('layouts.apps')

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

@section('content')
<div class="container-fluid p-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">الدردشة المباشرة</h1>
            <p class="text-muted">إدارة المحادثات المباشرة مع العملاء</p>
        </div>
        
        <!-- Page Filter -->
        <form method="GET" class="d-flex gap-2">
            <select name="page_id" class="form-select" onchange="this.form.submit()">
                <option value="">جميع الصفحات</option>
                @foreach($pages as $page)
                    <option value="{{ $page->id }}" {{ $pageId == $page->id ? 'selected' : '' }}>
                        {{ $page->name }}
                    </option>
                @endforeach
            </select>
        </form>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <i class="fas fa-comments fa-2x mb-2"></i>
                    <h4 class="mb-0">{{ $activeChats->count() }}</h4>
                    <small>محادثات نشطة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                    <h4 class="mb-0">{{ $closedChats->count() }}</h4>
                    <small>محادثات مغلقة اليوم</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <i class="fas fa-envelope fa-2x mb-2"></i>
                    <h4 class="mb-0">{{ $activeChats->sum(fn($chat) => $chat->getUnreadMessagesCount()) }}</h4>
                    <small>رسائل غير مقروءة</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <h4 class="mb-0">{{ $activeChats->unique('visitor_id')->count() }}</h4>
                    <small>زوار متصلون</small>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Active Chats -->
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-comment-dots text-success me-2"></i>
                        المحادثات النشطة
                    </h5>
                    <span class="badge bg-success">{{ $activeChats->count() }}</span>
                </div>
                <div class="card-body p-0">
                    @forelse($activeChats as $chat)
                        <div class="chat-item border-bottom p-3 {{ $chat->getUnreadMessagesCount() > 0 ? 'bg-light' : '' }}" 
                             data-chat-id="{{ $chat->id }}">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="d-flex align-items-start">
                                    <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                                         style="width: 40px; height: 40px;">
                                        {{ strtoupper(substr($chat->visitor_name ?? 'الزائر', 0, 1)) }}
                                    </div>
                                    <div>
                                        <h6 class="mb-1">
                                            {{ $chat->visitor_name ?? 'زائر غير معروف' }}
                                            @if($chat->getUnreadMessagesCount() > 0)
                                                <span class="badge bg-danger rounded-pill ms-2">
                                                    {{ $chat->getUnreadMessagesCount() }}
                                                </span>
                                            @endif
                                        </h6>
                                        @if($chat->latestMessage)
                                            <p class="text-muted mb-1 small">
                                                {{ Str::limit($chat->latestMessage->message, 60) }}
                                            </p>
                                        @endif
                                        <div class="small text-muted">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $chat->last_activity_at->diffForHumans() }}
                                            <span class="mx-2">•</span>
                                            <i class="fas fa-globe me-1"></i>
                                            {{ $chat->facebookPage->name }}
                                        </div>
                                    </div>
                                </div>
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
                                            data-bs-toggle="dropdown">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a class="dropdown-item" href="{{ route('livechat.show', $chat) }}">
                                                <i class="fas fa-eye me-2"></i> عرض المحادثة
                                            </a>
                                        </li>
                                        <li>
                                            <button class="dropdown-item text-danger close-chat" 
                                                    data-chat-id="{{ $chat->id }}">
                                                <i class="fas fa-times me-2"></i> إغلاق المحادثة
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-5">
                            <i class="fas fa-comment-slash fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">لا توجد محادثات نشطة</h5>
                            <p class="text-muted">ستظهر المحادثات الجديدة هنا تلقائياً</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Recent Closed Chats -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-history text-muted me-2"></i>
                        محادثات مغلقة مؤخراً
                    </h5>
                </div>
                <div class="card-body p-0" style="max-height: 400px; overflow-y: auto;">
                    @forelse($closedChats as $chat)
                        <div class="border-bottom p-3">
                            <div class="d-flex align-items-start">
                                <div class="avatar bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                                     style="width: 35px; height: 35px; font-size: 0.8rem;">
                                    {{ strtoupper(substr($chat->visitor_name ?? 'ز', 0, 1)) }}
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1 small">{{ $chat->visitor_name ?? 'زائر غير معروف' }}</h6>
                                    <div class="small text-muted">
                                        <i class="fas fa-clock me-1"></i>
                                        {{ $chat->closed_at->diffForHumans() }}
                                        <br>
                                        <i class="fas fa-stopwatch me-1"></i>
                                        المدة: {{ $chat->duration }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="text-center py-4">
                            <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                            <p class="text-muted small">لا توجد محادثات مغلقة</p>
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">إحصائيات سريعة</h6>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-2">
                            <div class="bg-light p-2 rounded">
                                <small class="text-muted">متوسط وقت الاستجابة</small>
                                <div class="fw-bold">2 دقيقة</div>
                            </div>
                        </div>
                        <div class="col-6 mb-2">
                            <div class="bg-light p-2 rounded">
                                <small class="text-muted">معدل الرضا</small>
                                <div class="fw-bold text-success">94%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- إشعار الرسائل الجديدة -->
<div id="notification-container" class="position-fixed" style="top: 20px; right: 20px; z-index: 9999;">
</div>
@endsection

@push('scripts')
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
<script>
$(document).ready(function() {
    // إعداد Pusher
    const pusher = new Pusher('{{ config("broadcasting.connections.pusher.key") }}', {
        cluster: '{{ config("broadcasting.connections.pusher.options.cluster") }}'
    });

    // الاستماع للمحادثات الجديدة
    const adminChannel = pusher.subscribe('admin.{{ auth()->id() }}');
    
    adminChannel.bind('chat.new', function(data) {
        showNotification('محادثة جديدة من ' + (data.chat.visitor_name || 'زائر'), 'success');
        // تحديث قائمة المحادثات
        setTimeout(() => {
            location.reload();
        }, 2000);
    });

    adminChannel.bind('message.sent', function(data) {
        if (data.message.sender_type === 'visitor') {
            showNotification('رسالة جديدة من ' + data.message.sender_name, 'info');
            updateChatItem(data.chat.id, data.message);
        }
    });

    // إغلاق المحادثة
    $('.close-chat').click(function() {
        const chatId = $(this).data('chat-id');
        const chatItem = $(`.chat-item[data-chat-id="${chatId}"]`);
        
        if (confirm('هل أنت متأكد من إغلاق هذه المحادثة؟')) {
            $.post(`/livechat/${chatId}/close`, {
                _token: '{{ csrf_token() }}'
            }).done(function(response) {
                if (response.success) {
                    chatItem.fadeOut();
                    showNotification('تم إغلاق المحادثة', 'success');
                }
            }).fail(function() {
                showNotification('حدث خطأ أثناء إغلاق المحادثة', 'error');
            });
        }
    });

    function showNotification(message, type = 'info') {
        const notification = $(`
            <div class="alert alert-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} alert-dismissible fade show" role="alert">
                <i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'exclamation-triangle' : 'info-circle'} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        $('#notification-container').append(notification);
        
        setTimeout(() => {
            notification.fadeOut(() => notification.remove());
        }, 5000);
    }

    function updateChatItem(chatId, message) {
        const chatItem = $(`.chat-item[data-chat-id="${chatId}"]`);
        if (chatItem.length) {
            // تحديث آخر رسالة
            chatItem.find('.text-muted.mb-1').text(message.message.substring(0, 60) + '...');
            
            // إضافة/تحديث badge الرسائل غير المقروءة
            let badge = chatItem.find('.badge.bg-danger');
            if (badge.length) {
                const currentCount = parseInt(badge.text()) || 0;
                badge.text(currentCount + 1);
            } else {
                chatItem.find('h6').append('<span class="badge bg-danger rounded-pill ms-2">1</span>');
            }
            
            // تمييز المحادثة
            chatItem.addClass('bg-light');
            
            // نقل المحادثة إلى الأعلى
            chatItem.parent().prepend(chatItem);
        }
    }

    // تحديث الوقت كل دقيقة
    setInterval(() => {
        $('.chat-item [data-bs-toggle="tooltip"]').each(function() {
            // يمكن إضافة تحديث الوقت هنا
        });
    }, 60000);
});
</script>
@endpush

@push('styles')
<style>
.chat-item {
    transition: all 0.3s ease;
    cursor: pointer;
}

.chat-item:hover {
    background-color: #f8f9fa !important;
}

.avatar {
    font-size: 0.875rem;
    font-weight: 600;
}

.badge.bg-danger {
    font-size: 0.7rem;
}

.dropdown-toggle::after {
    display: none;
}

#notification-container .alert {
    min-width: 300px;
    margin-bottom: 10px;
}
</style>
@endpush