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

@extends('layouts.apps')

@section('title', 'محادثة مع ' . ($liveChat->visitor_name ?? 'زائر'))

@section('content')
<div class="container-fluid p-4">
    <!-- Chat Header -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <a href="{{ route('livechat.index') }}" class="btn btn-outline-secondary me-3">
                        <i class="fas fa-arrow-right"></i>
                    </a>
                    <div class="avatar bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3"
                         style="width: 50px; height: 50px;">
                        {{ strtoupper(substr($liveChat->visitor_name ?? 'ز', 0, 1)) }}
                    </div>
                    <div>
                        <h5 class="mb-1">{{ $liveChat->visitor_name ?? 'زائر غير معروف' }}</h5>
                        <div class="text-muted">
                            <i class="fas fa-globe me-1"></i>
                            {{ $liveChat->facebookPage->name }}
                            <span class="mx-2">•</span>
                            <i class="fas fa-clock me-1"></i>
                            بدأت {{ $liveChat->started_at->diffForHumans() }}
                            @if($liveChat->isActive())
                                <span class="badge bg-success ms-2">نشطة</span>
                            @else
                                <span class="badge bg-secondary ms-2">مغلقة</span>
                            @endif
                        </div>
                    </div>
                </div>
                
                @if($liveChat->isActive())
                    <button class="btn btn-outline-danger" id="close-chat">
                        <i class="fas fa-times me-1"></i> إغلاق المحادثة
                    </button>
                @endif
            </div>
        </div>
    </div>

    <!-- Chat Messages -->
    <div class="row">
        <div class="col-md-8">
            <div class="card chat-container" style="height: 500px;">
                <div class="card-body d-flex flex-column p-0">
                    <!-- Messages Area -->
                    <div class="messages-area flex-grow-1 p-3" style="overflow-y: auto;" id="messages-container">
                        @foreach($liveChat->messages as $message)
                            <div class="message-item mb-3 {{ $message->isFromAdmin() ? 'admin-message' : 'visitor-message' }}">
                                <div class="d-flex {{ $message->isFromAdmin() ? 'justify-content-end' : 'justify-content-start' }}">
                                    <div class="message-bubble {{ $message->isFromAdmin() ? 'bg-primary text-white' : 'bg-light' }} p-2 rounded"
                                         style="max-width: 70%;">
                                        <div class="message-text">{{ $message->message }}</div>
                                        
                                        @if($message->attachments)
                                            <div class="attachments mt-2">
                                                @foreach($message->attachments as $attachment)
                                                    <div class="attachment-item mb-1">
                                                        @if(str_contains($attachment['type'], 'image'))
                                                            <img src="{{ Storage::url($attachment['path']) }}" 
                                                                 class="img-thumbnail" 
                                                                 style="max-width: 200px;" 
                                                                 alt="{{ $attachment['name'] }}">
                                                        @else
                                                            <a href="{{ Storage::url($attachment['path']) }}" 
                                                               class="btn btn-sm btn-outline-light" 
                                                               target="_blank">
                                                                <i class="fas fa-download me-1"></i>
                                                                {{ $attachment['name'] }}
                                                            </a>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endif
                                        
                                        <div class="message-time small mt-1 {{ $message->isFromAdmin() ? 'text-white-50' : 'text-muted' }}">
                                            <i class="fas fa-clock me-1"></i>
                                            {{ $message->created_at->format('H:i') }}
                                            @if($message->isFromAdmin())
                                                <i class="fas fa-user-tie ms-2"></i>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <!-- Message Input -->
                    @if($liveChat->isActive())
                        <div class="message-input border-top p-3">
                            <form id="message-form" enctype="multipart/form-data">
                                @csrf
                                <div class="input-group">
                                    <input type="text" class="form-control" id="message-input" 
                                           placeholder="اكتب رسالتك هنا..." maxlength="1000" required>
                                    <label class="btn btn-outline-secondary" for="attachment-input">
                                        <i class="fas fa-paperclip"></i>
                                    </label>
                                    <input type="file" id="attachment-input" name="attachments[]" 
                                           accept="image/*,.pdf,.doc,.docx" multiple style="display: none;">
                                    <button class="btn btn-primary" type="submit">
                                        <i class="fas fa-paper-plane"></i>
                                    </button>
                                </div>
                                
                                <!-- Attachment Preview -->
                                <div id="attachment-preview" class="mt-2" style="display: none;"></div>
                            </form>
                        </div>
                    @else
                        <div class="text-center p-3 border-top bg-light">
                            <i class="fas fa-lock text-muted me-2"></i>
                            <span class="text-muted">تم إغلاق هذه المحادثة</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Chat Info Sidebar -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        معلومات الزائر
                    </h6>
                </div>
                <div class="card-body">
                    <table class="table table-borderless table-sm">
                        <tr>
                            <td><strong>الاسم:</strong></td>
                            <td>{{ $liveChat->visitor_name ?? 'غير محدد' }}</td>
                        </tr>
                        @if($liveChat->visitor_email)
                            <tr>
                                <td><strong>البريد الإلكتروني:</strong></td>
                                <td>
                                    <a href="mailto:{{ $liveChat->visitor_email }}">
                                        {{ $liveChat->visitor_email }}
                                    </a>
                                </td>
                            </tr>
                        @endif
                        @if($liveChat->visitor_phone)
                            <tr>
                                <td><strong>رقم الهاتف:</strong></td>
                                <td>
                                    <a href="tel:{{ $liveChat->visitor_phone }}">
                                        {{ $liveChat->visitor_phone }}
                                    </a>
                                </td>
                            </tr>
                        @endif
                        <tr>
                            <td><strong>بدء المحادثة:</strong></td>
                            <td>{{ $liveChat->started_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        <tr>
                            <td><strong>آخر نشاط:</strong></td>
                            <td>{{ $liveChat->last_activity_at->diffForHumans() }}</td>
                        </tr>
                        <tr>
                            <td><strong>عدد الرسائل:</strong></td>
                            <td>{{ $liveChat->messages->count() }}</td>
                        </tr>
                        @if($liveChat->visitor_data)
                            @if(isset($liveChat->visitor_data['ip_address']))
                                <tr>
                                    <td><strong>عنوان IP:</strong></td>
                                    <td>{{ $liveChat->visitor_data['ip_address'] }}</td>
                                </tr>
                            @endif
                            @if(isset($liveChat->visitor_data['referrer']))
                                <tr>
                                    <td><strong>المرجع:</strong></td>
                                    <td>
                                        <small>{{ Str::limit($liveChat->visitor_data['referrer'], 30) }}</small>
                                    </td>
                                </tr>
                            @endif
                        @endif
                    </table>
                </div>
            </div>

            <!-- Quick Responses -->
            <div class="card mt-3">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-bolt me-2"></i>
                        ردود سريعة
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary btn-sm quick-response" 
                                data-message="مرحباً! كيف يمكنني مساعدتك؟">
                            مرحباً وترحيب
                        </button>
                        <button class="btn btn-outline-secondary btn-sm quick-response" 
                                data-message="شكراً لتواصلك معنا. سأقوم بالرد عليك في أقرب وقت.">
                            رد تلقائي
                        </button>
                        <button class="btn btn-outline-info btn-sm quick-response" 
                                data-message="هل تحتاج لمساعدة إضافية؟">
                            استفسار للمساعدة
                        </button>
                        <button class="btn btn-outline-success btn-sm quick-response" 
                                data-message="شكراً لك! تم حل مشكلتك بنجاح.">
                            إنهاء ناجح
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

    // الاستماع للرسائل الجديدة
    const chatChannel = pusher.subscribe(`chat.${chatId}`);
    
    chatChannel.bind('message.sent', function(data) {
        if (data.message.sender_type === 'visitor') {
            addMessageToChat(data.message);
            scrollToBottom();
        }
    });

    chatChannel.bind('chat.closed', function(data) {
        location.reload();
    });

    // إرسال رسالة
    $('#message-form').submit(function(e) {
        e.preventDefault();
        
        const message = $('#message-input').val().trim();
        const attachments = $('#attachment-input')[0].files;
        
        if (!message && attachments.length === 0) {
            return;
        }

        const formData = new FormData();
        formData.append('_token', '{{ csrf_token() }}');
        formData.append('message', message);
        
        for (let i = 0; i < attachments.length; i++) {
            formData.append('attachments[]', attachments[i]);
        }

        $.ajax({
            url: '{{ route("livechat.send", $liveChat) }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    addMessageToChat(response.message);
                    $('#message-input').val('');
                    $('#attachment-input').val('');
                    $('#attachment-preview').hide().empty();
                    scrollToBottom();
                }
            },
            error: function() {
                alert('حدث خطأ أثناء إرسال الرسالة');
            }
        });
    });

    // الردود السريعة
    $('.quick-response').click(function() {
        const message = $(this).data('message');
        $('#message-input').val(message).focus();
    });

    // معاينة المرفقات
    $('#attachment-input').change(function() {
        const files = this.files;
        const preview = $('#attachment-preview');
        
        if (files.length > 0) {
            preview.empty().show();
            
            Array.from(files).forEach(file => {
                const item = $(`
                    <div class="attachment-preview-item d-inline-block me-2 mb-2">
                        <div class="bg-light p-2 rounded border">
                            <small>${file.name}</small>
                            <div class="text-muted" style="font-size: 0.7rem;">
                                ${(file.size / 1024).toFixed(1)} KB
                            </div>
                        </div>
                    </div>
                `);
                preview.append(item);
            });
        } else {
            preview.hide().empty();
        }
    });

    // إغلاق المحادثة
    $('#close-chat').click(function() {
        if (confirm('هل أنت متأكد من إغلاق هذه المحادثة؟')) {
            $.post('{{ route("livechat.close", $liveChat) }}', {
                _token: '{{ csrf_token() }}'
            }).done(function(response) {
                if (response.success) {
                    location.reload();
                }
            }).fail(function() {
                alert('حدث خطأ أثناء إغلاق المحادثة');
            });
        }
    });

    function addMessageToChat(message) {
        const isAdmin = message.sender_type === 'admin';
        const messageHtml = `
            <div class="message-item mb-3 ${isAdmin ? 'admin-message' : 'visitor-message'}">
                <div class="d-flex ${isAdmin ? 'justify-content-end' : 'justify-content-start'}">
                    <div class="message-bubble ${isAdmin ? 'bg-primary text-white' : 'bg-light'} p-2 rounded" style="max-width: 70%;">
                        <div class="message-text">${message.message}</div>
                        <div class="message-time small mt-1 ${isAdmin ? 'text-white-50' : 'text-muted'}">
                            <i class="fas fa-clock me-1"></i>
                            الآن
                            ${isAdmin ? '<i class="fas fa-user-tie ms-2"></i>' : ''}
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        messagesContainer.append(messageHtml);
    }

    function scrollToBottom() {
        messagesContainer.scrollTop(messagesContainer[0].scrollHeight);
    }

    // تشغيل الصوت للرسائل الجديدة
    function playNotificationSound() {
        const audio = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmceAz2P0fLPfS4FIm/C7d2URQsVV+u46KdXFAVAneH10nNZEQM9jdXzzn4vBSRxxe7pjkgWKlHe6OOkaEUCTJrf+/JnGQU5jdj+z3QNFj6Dw+7nbjYKH1zr9d+VSg8PVaPg7fKkbGEWA3LA7vm6YCkC5vLp44AHDGfV';
        audio.play();
    }

    // التمرير إلى الأسفل عند التحميل
    scrollToBottom();

    // تحديث حالة القراءة
    setTimeout(() => {
        $.post('{{ route("livechat.show", $liveChat) }}/mark-read', {
            _token: '{{ csrf_token() }}'
        });
    }, 1000);
});
</script>
@endpush

@push('styles')
<style>
.chat-container {
    border: 1px solid #dee2e6;
}

.messages-area {
    background-color: #f8f9fa;
}

.message-bubble {
    border-radius: 15px !important;
    word-wrap: break-word;
}

.admin-message .message-bubble {
    border-bottom-right-radius: 5px !important;
}

.visitor-message .message-bubble {
    border-bottom-left-radius: 5px !important;
}

.message-input {
    background-color: white;
}

.attachment-preview-item {
    max-width: 150px;
}

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

.quick-response {
    text-align: right;
    font-size: 0.875rem;
}

#messages-container {
    scrollbar-width: thin;
    scrollbar-color: #dee2e6 transparent;
}

#messages-container::-webkit-scrollbar {
    width: 6px;
}

#messages-container::-webkit-scrollbar-track {
    background: transparent;
}

#messages-container::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 3px;
}
</style>
@endpush