@extends('backend.layouts.admin.app')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js";
  import { getFirestore, collection, addDoc, query, orderBy, onSnapshot, serverTimestamp }
  from "https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js";

  const firebaseConfig = {
  apiKey: "AIzaSyD8yaAtFYqvxhc8pzhz4J1xPgnAEUYPcik",
  authDomain: "capable-door-463909-v9.firebaseapp.com",
  projectId: "capable-door-463909-v9",
  storageBucket: "capable-door-463909-v9.firebasestorage.app",
  messagingSenderId: "811049235028",
  appId: "1:811049235028:web:63c7dca47bd9e819cc73c1"
};
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app, 'test');
  const chatCollection = collection(db, "chats");
  // Enable Firebase Authentication
// Global variables for chat functionality
window.currentUserId = '{{ $currentUserId }}';
window.currentUserName = '{{ Auth::user()->name ?? "Unknown User" }}';
window.firebaseChat = null;
</script>

<!-- Content Header (Page header) -->
<section class="content-header">
  <ol class="breadcrumb">
    <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_664_24080)">
      <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
      </g>
      <defs>
      <clipPath id="clip0_664_24080">
      <rect width="18" height="18" fill="white"/>
      </clipPath>
      </defs>
      </svg></a></li>
    <li class="active">Chats</li>
  </ol>
  <div class="d-flex justify-content-between align-items-center flex-wrap">
    <h1>{{$title}}</h1>
  </div>
</section>

<!-- Main content -->
<section class="content">
  @include('backend.layouts.alert')
  <!-- Default box -->
  <div class="row">
    <div class="col-md-12">
      <div class="border rounded-4 overflow-hidden">
          <div class="row">
            <div class="col-md-6 col-xl-4 border-end pe-0">
              <ul class="nav nav-tabs profile-tabs chat-tabs justify-content-between" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active fs-16" id="All-tab" data-bs-toggle="tab" data-bs-target="#All" type="button" role="tab" aria-controls="All" aria-selected="true">All</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link fs-16" id="Unread-tab" data-bs-toggle="tab" data-bs-target="#Unread" type="button" role="tab" aria-controls="Unread" aria-selected="false">Unread <span class="notification-value position-static">{{ 0 }}</span></button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link fs-16" id="Read-tab" data-bs-toggle="tab" data-bs-target="#Read" type="button" role="tab" aria-controls="Read" aria-selected="false">Read</button>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="All" role="tabpanel" aria-labelledby="All-tab">
                  <ul class="chat-list">
                    @forelse($allChats as $chat)
                    <li class="chat-item" data-chat-id="{{ $chat->chatId }}" data-is-group="{{ $chat->isGroup ? 'true' : 'false' }}" data-chat-name="{{ $chat->displayName }}" data-chat-data="{{ json_encode($chat) }}">
                      <div class="d-flex justify-content-between">
                        <div class="d-flex align-items-center">
                          <!-- Profile Picture -->
                          @if($chat->profilePicUrl)
                            <img src="{{ $chat->profilePicUrl }}" alt="{{ $chat->displayName }}" class="rounded-circle me-2" style="width: 40px; height: 40px; object-fit: cover;">
                          @else
                            <div class="rounded-circle me-2 d-flex align-items-center justify-content-center bg-primary text-white" style="width: 40px; height: 40px;">
                              {{ strtoupper(substr($chat->displayName, 0, 1)) }}
                        </div>
                          @endif
                          
                        <div class="">
                            <div class="text-black fs-15 fw-semibold mb-1">
                              {{ $chat->displayName }}
                              @if($chat->isOnline)
                                <span class="badge bg-success ms-1" style="width: 8px; height: 8px; border-radius: 50%;"></span>
                              @endif
                        </div>
                            <div class="text-gray fs-13">
                              @if($chat->lastMessageSenderName && $chat->isGroup)
                                <strong>{{ $chat->lastMessageSenderName }}:</strong> 
                              @endif
                              {{ $chat->lastMessage }}
                        </div>
                      </div>
                        </div>
                        <div class="text-gray fs-13">
                          @if($chat->lastMessageTime)
                            {{ \Carbon\Carbon::parse($chat->lastMessageTime)->format('h:i A') }}
                          @endif
                          @if($chat->unreadCount > 0)
                            <span class="badge bg-primary ms-1">{{ $chat->unreadCount }}</span>
                          @endif
                        </div>
                      </div>
                    </li>
                    @empty
                    <li>No chats found.</li>
                    @endforelse
                  </ul>
                </div>
                <div class="tab-pane fade" id="Unread" role="tabpanel" aria-labelledby="Unread-tab">
                  <ul class="chat-list">
                    @forelse($unreadChats as $chat)
                    <li class="chat-item" data-chat-id="{{ $chat->chatId }}" data-is-group="{{ $chat->isGroup ? 'true' : 'false' }}" data-chat-name="{{ $chat->displayName }}" data-chat-data="{{ json_encode($chat) }}">
                      <div class="d-flex justify-content-between">
                        <div class="d-flex align-items-center">
                          <!-- Profile Picture -->
                          @if($chat->profilePicUrl)
                            <img src="{{ $chat->profilePicUrl }}" alt="{{ $chat->displayName }}" class="rounded-circle me-2" style="width: 40px; height: 40px; object-fit: cover;">
                          @else
                            <div class="rounded-circle me-2 d-flex align-items-center justify-content-center bg-primary text-white" style="width: 40px; height: 40px;">
                              {{ strtoupper(substr($chat->displayName, 0, 1)) }}
                        </div>
                          @endif
                          
                        <div class="">
                            <div class="text-black fs-15 fw-semibold mb-1">
                              {{ $chat->displayName }}
                              @if($chat->isOnline)
                                <span class="badge bg-success ms-1" style="width: 8px; height: 8px; border-radius: 50%;"></span>
                              @endif
                        </div>
                            <div class="text-gray fs-13">
                              @if($chat->lastMessageSenderName && $chat->isGroup)
                                <strong>{{ $chat->lastMessageSenderName }}:</strong> 
                              @endif
                              {{ $chat->lastMessage }}
                        </div>
                      </div>
                        </div>
                        <div class="text-gray fs-13">
                          @if($chat->lastMessageTime)
                            {{ \Carbon\Carbon::parse($chat->lastMessageTime)->format('h:i A') }}
                          @endif
                          @if($chat->unreadCount > 0)
                            <span class="badge bg-primary ms-1">{{ $chat->unreadCount }}</span>
                          @endif
                        </div>
                      </div>
                    </li>
                    @empty
                    <li>No unread chats.</li>
                    @endforelse
                  </ul>
                </div>
                <div class="tab-pane fade" id="Read" role="tabpanel" aria-labelledby="Read-tab">
                  <ul class="chat-list">
                    @forelse($readChats as $chat)
                    <li class="chat-item" data-chat-id="{{ $chat->chatId }}" data-is-group="{{ $chat->isGroup ? 'true' : 'false' }}" data-chat-name="{{ $chat->displayName }}" data-chat-data="{{ json_encode($chat) }}">
                      <div class="d-flex justify-content-between">
                        <div class="d-flex align-items-center">
                          <!-- Profile Picture -->
                          @if($chat->profilePicUrl)
                            <img src="{{ $chat->profilePicUrl }}" alt="{{ $chat->displayName }}" class="rounded-circle me-2" style="width: 40px; height: 40px; object-fit: cover;">
                          @else
                            <div class="rounded-circle me-2 d-flex align-items-center justify-content-center bg-primary text-white" style="width: 40px; height: 40px;">
                              {{ strtoupper(substr($chat->displayName, 0, 1)) }}
                        </div>
                          @endif
                          
                        <div class="">
                            <div class="text-black fs-15 fw-semibold mb-1">
                              {{ $chat->displayName }}
                              @if($chat->isOnline)
                                <span class="badge bg-success ms-1" style="width: 8px; height: 8px; border-radius: 50%;"></span>
                              @endif
                        </div>
                            <div class="text-gray fs-13">
                              @if($chat->lastMessageSenderName && $chat->isGroup)
                                <strong>{{ $chat->lastMessageSenderName }}:</strong> 
                              @endif
                              {{ $chat->lastMessage }}
                        </div>
                      </div>
                        </div>
                        <div class="text-gray fs-13">
                          @if($chat->lastMessageTime)
                            {{ \Carbon\Carbon::parse($chat->lastMessageTime)->format('h:i A') }}
                          @endif
                          @if($chat->unreadCount > 0)
                            <span class="badge bg-primary ms-1">{{ $chat->unreadCount }}</span>
                          @endif
                        </div>
                      </div>
                    </li>
                    @empty
                    <li>No read chats.</li>
                    @endforelse
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-md-6 col-xl-8 ps-0 chat-bg">
              <!-- Chat Header -->
              <div class="p-3 d-flex justify-content-between bg-white align-items-center flex-wrap" id="chat-header">
                <div class="fs-17 fw-bold text-black" id="chat-title">
                  Select a chat to start messaging
                  </div>
                <span class="in-progress-tag" id="chat-status" style="display: none;">In Progress</span>
              </div>
              
              <!-- Chat Messages Area -->
              <div class="chat-scroll">
                <div class="p-3 pt-5" id="chat-messages">
                  <!-- Messages will be loaded here dynamically -->
                  <div class="text-center text-muted">
                    <p>Select a chat from the left to view messages</p>
                  </div>
                </div>
              </div>
              
              <!-- Chat Input Area -->
              <div class="p-3 position-relative" id="chat-input-area" style="display: none;">
                  <button class="chat-btn position-absolute chat-plus-icon">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.99969 1.54199C14.6651 1.54199 18.4585 5.33462 18.4587 10C18.4587 14.6655 14.6652 18.459 9.99969 18.459C5.33432 18.4588 1.54169 14.6654 1.54169 10C1.54186 5.33473 5.33443 1.54217 9.99969 1.54199ZM9.99969 1.79199C5.47381 1.79217 1.79186 5.47412 1.79169 10C1.79169 14.526 5.4737 18.2088 9.99969 18.209C14.5258 18.209 18.2087 14.5261 18.2087 10C18.2085 5.47401 14.5257 1.79199 9.99969 1.79199Z" fill="#292D32" stroke="#6C757D"/>
                    <path d="M6.66669 9.875H13.3337C13.3637 9.87509 13.395 9.88753 13.4206 9.91309C13.4461 9.9387 13.4587 9.96992 13.4587 10C13.4587 10.0301 13.4461 10.0613 13.4206 10.0869C13.395 10.1125 13.3637 10.1249 13.3337 10.125H6.66669C6.63654 10.125 6.60542 10.1126 6.57977 10.0869C6.55413 10.0613 6.54169 10.0301 6.54169 10C6.54169 9.96985 6.55413 9.93873 6.57977 9.91309C6.60542 9.88744 6.63654 9.875 6.66669 9.875Z" fill="#292D32" stroke="#6C757D"/>
                    <path d="M10 13.9587C9.65833 13.9587 9.375 13.6753 9.375 13.3337V6.66699C9.375 6.32533 9.65833 6.04199 10 6.04199C10.3417 6.04199 10.625 6.32533 10.625 6.66699V13.3337C10.625 13.6753 10.3417 13.9587 10 13.9587Z" fill="#292D32"/>
                    </svg>
                  </button>

                  <input type="text" class="form-control chat-input rounded-1 border-1" id="message-input" placeholder="Enter message"/>
                  <button class="chat-btn position-absolute chat-submit-icon" id="send-message-btn">
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M15.0583 7.09154L7.92498 3.52487C3.13331 1.12487 1.16664 3.09153 3.56664 7.8832L4.29164 9.3332C4.49998 9.7582 4.49998 10.2499 4.29164 10.6749L3.56664 12.1165C1.16664 16.9082 3.12498 18.8749 7.92498 16.4749L15.0583 12.9082C18.2583 11.3082 18.2583 8.69153 15.0583 7.09154ZM12.3666 10.6249H7.86664C7.52498 10.6249 7.24164 10.3415 7.24164 9.99987C7.24164 9.6582 7.52498 9.37487 7.86664 9.37487H12.3666C12.7083 9.37487 12.9916 9.6582 12.9916 9.99987C12.9916 10.3415 12.7083 10.6249 12.3666 10.6249Z" fill="#007AFF"/>
                    </svg>
                  </button>
                </div>
            </div>
          </div>
      </div>
    </div>
  </div>
  <!-- /.box -->
</section>

<script type="text/javascript">
  $(document).ready(function() {
    let currentChatId = null;
    let currentUserId = '{{ $currentUserId }}';
    
    // Initialize Firebase Chat
    if (typeof firebase !== 'undefined' && typeof FirebaseChat !== 'undefined') {
      window.firebaseChat = new FirebaseChat();
      window.firebaseChat.init(currentUserId);
      console.log('Firebase Chat initialized successfully');
    } else {
      console.error('Firebase or FirebaseChat not available');
    }
    
    // Chat item click handler
    $(document).on('click', '.chat-item', function() {
        const chatId = $(this).data('chat-id');
        const chatName = $(this).data('chat-name');
        const chatData = $(this).data('chat-data');
        
        // Update active state
        $('.chat-item').removeClass('active');
        $(this).addClass('active');
        
        // Update chat header
        $('#chat-title').text(chatName);
        $('#chat-status').show();
        
        // Show input area
        $('#chat-input-area').show();
        
        // Store current chat ID
        currentChatId = chatId;
        
        // Set current chat in Firebase Chat
        if (window.firebaseChat && window.firebaseChat.isInitialized && firebase.auth().currentUser) {
            window.firebaseChat.setCurrentChat(chatId);
            
            // Start listening to real-time messages
            window.firebaseChat.listenToChatMessages(chatId, handleRealTimeMessage);
            
            // Mark messages as read
            window.firebaseChat.markAsRead(chatId);
        }
        
        // Load messages for this chat
        loadChatMessages(chatId);
    });
    
    // Function to load chat messages
    function loadChatMessages(chatId) {
    $.ajax({
            url: '{{ route("admin.chats.messages") }}',
      type: 'GET',
      data: {
                chat_id: chatId,
                _token: '{{ csrf_token() }}'
      },
      success: function(response) {
                console.log('Raw response:', response);
                
                let messages = [];
                
                if (response && response.success) {
                    // Handle different possible response formats
                    if (Array.isArray(response.messages)) {
                        messages = response.messages;
                    } else if (response.messages && Array.isArray(response.messages.data)) {
                        messages = response.messages.data;
                    } else if (typeof response.messages === 'object' && response.messages !== null) {
                        // Convert object to array if needed
                        messages = Object.values(response.messages);
                    }
                }
                
                console.log('Processed messages:', messages);
                displayMessages(messages);
            },
            error: function(xhr, status, error) {
                console.error('Error loading messages:', error);
                console.error('Response:', xhr.responseText);
                displayMessages([]);
            }
        });
    }
    
    // Function to display messages
    function displayMessages(messages) {
        console.log('displayMessages called with:', messages);
        
        const messagesContainer = $('#chat-messages');
        
        // Ensure messages is an array
        if (!Array.isArray(messages)) {
            console.error('Messages is not an array:', messages);
            messages = [];
        }
        
        if (messages.length === 0) {
            messagesContainer.html('<div class="text-center text-muted"><p>No messages yet</p></div>');
            return;
        }
        
        let messagesHtml = '';
        let currentDate = '';
        
        messages.forEach(function(message) {
            // Handle timestamp conversion
            let messageDate, messageTime;
            
            try {
                if (message.timestamp) {
                    const timestamp = new Date(message.timestamp);
                    messageDate = timestamp.toLocaleDateString();
                    messageTime = timestamp.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                } else {
                    messageDate = 'Unknown Date';
                    messageTime = 'Unknown Time';
                }
            } catch (e) {
                console.error('Error parsing timestamp:', message.timestamp);
                messageDate = 'Unknown Date';
                messageTime = 'Unknown Time';
            }
            
            // Add date separator if date changes
            if (messageDate !== currentDate) {
                messagesHtml += `
                    <div class="chat-message-date position-relative mb-4">
                        <div class="chat-message-date-inner">
                            <span class="text-gray fs-13 d-inline-block chat-bg">${messageDate}</span>
                        </div>
                    </div>
                `;
                currentDate = messageDate;
            }
            
            const isOwnMessage = message.senderId === currentUserId;
            
            if (isOwnMessage) {
                // Own message (right side)
                messagesHtml += `
                    <div class="message-sender mb-3">
                        <div class="text-gray fs-13 mb-1">
                            <div class="chat-user-name">${message.senderName || 'Unknown'}</div>
                            <span class="chat-dot"></span> 
                            ${messageTime}
                        </div>
                        <div class="bg-ligt-primary p-3 fs-13 rounded-4 rounded-top-end-0 d-inline-block text-black" data-message-id="${message.messageId}">
                            ${formatMessageContent(message)}
                        </div>
                    </div>
                `;
            } else {
                // Other person's message (left side)
                messagesHtml += `
                    <div class="message-receive mb-3">
                        <div class="text-gray fs-13 mb-1">
                            <div class="chat-user-name">${message.senderName || 'Unknown'}</div>
                            <span class="chat-dot"></span> 
                            ${messageTime}
                        </div>
                        <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" data-message-id="${message.messageId}">
                            ${formatMessageContent(message)}
                        </div>
                    </div>
                `;
            }
        });
        
        messagesContainer.html(messagesHtml);
        
        // Scroll to bottom
        const chatScroll = $('.chat-scroll');
        chatScroll.scrollTop(chatScroll[0].scrollHeight);
    }
    
    // Function to format message content based on type
    function formatMessageContent(message) {
        console.log('formatMessageContent called with:', message);
        // Handle both messageType and type properties
        const messageType = message.messageType || message.type || 'text';
        console.log('Using message type:', messageType);
        
        switch (messageType) {
            case 'image':
                return `<img src="${message.message}" alt="Image" class="img-fluid rounded" style="max-width: 200px;">`;
            case 'file':
                return `
                    <div class="d-flex p-3 rounded-3 border-light bg-light-gray mb-2 align-items-center justify-content-between">
                        <div class="d-flex align-items-center">  
                            <div class="">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M15 22.75H9C3.57 22.75 1.25 20.43 1.25 15V9C1.25 3.57 3.57 1.25 9 1.25H14C14.41 1.25 14.75 1.59 14.75 2C14.75 2.41 14.41 2.75 14 2.75H9C4.39 2.75 2.75 4.39 2.75 9V15C2.75 19.61 4.39 21.25 9 21.25H15C19.61 21.25 21.25 19.61 21.25 15V10C21.25 9.59 21.59 9.25 22 9.25C22.41 9.25 22.75 9.59 22.75 10V15C22.75 20.43 20.43 22.75 15 22.75Z" fill="#8E8E93"/>
                                    <path d="M13.9072 1.77051C13.9884 1.73577 14.0974 1.74898 14.1846 1.83203L22.1768 9.82422C22.2461 9.89376 22.2676 10.007 22.2305 10.0938C22.1876 10.1935 22.0959 10.25 22 10.25H18C16.3361 10.25 15.3152 9.92344 14.6963 9.30469C14.0774 8.68577 13.75 7.6641 13.75 6V2C13.7502 1.89358 13.8152 1.80582 13.8926 1.77539L13.9004 1.77344L13.9072 1.77051ZM14.25 6C14.25 7.29018 14.4061 8.29851 15.0537 8.94629C15.7015 9.59406 16.7097 9.75 18 9.75H21.3975L20.5439 8.89648L15.1035 3.45703L14.25 2.60352V6Z" fill="#8E8E93" stroke="#8E8E93"/>
                                    <path d="M13 13.75H7C6.59 13.75 6.25 13.41 6.25 13C6.25 12.59 6.59 12.25 7 12.25H13C13.41 12.25 13.75 12.59 13.75 13C13.75 13.41 13.41 13.75 13 13.75Z" fill="#8E8E93"/>
                                    <path d="M11 17.75H7C6.59 17.75 6.25 17.41 6.25 17C6.25 16.59 6.59 16.25 7 16.25H11C11.41 16.25 11.75 16.59 11.75 17C11.75 17.41 11.41 17.75 11 17.75Z" fill="#8E8E93"/>
                                </svg>
                            </div>
                            <div class="fs-13 fw-semibold text-black ms-2">${message.message}</div>
                        </div>
                        <div class="">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.7167 18.5412H7.28332C3.19165 18.5412 1.44165 16.7912 1.44165 12.6996V12.5912C1.44165 8.89124 2.89998 7.10791 6.16665 6.79957C6.49998 6.77457 6.81665 7.02457 6.84998 7.36624C6.88332 7.70791 6.63332 8.01624 6.28332 8.04957C3.66665 8.29124 2.69165 9.52457 2.69165 12.5996V12.7079C2.69165 16.0996 3.89165 17.2996 7.28332 17.2996H12.7167C16.1083 17.2996 17.3083 16.0996 17.3083 12.7079V12.5996C17.3083 9.50791 16.3166 8.27457 13.65 8.04957C13.3083 8.01624 13.05 7.71624 13.0833 7.37457C13.1166 7.03291 13.4083 6.77457 13.7583 6.80791C17.075 7.09124 18.5583 8.88291 18.5583 12.6079V12.7162C18.5583 16.7912 16.8083 18.5412 12.7167 18.5412Z" fill="#007AFF"/>
                                <path d="M10 1.54199C10.0301 1.54199 10.0613 1.55443 10.0869 1.58008C10.1126 1.60572 10.125 1.63684 10.125 1.66699V12.4004C10.125 12.4699 10.0699 12.5254 10 12.5254C9.96987 12.5254 9.93872 12.5129 9.91309 12.4873C9.88746 12.4617 9.87502 12.4305 9.875 12.4004V1.66699C9.875 1.63684 9.88744 1.60572 9.91309 1.58008C9.93873 1.55443 9.96985 1.54199 10 1.54199Z" fill="#007AFF" stroke="#007AFF"/>
                                <path d="M9.99997 13.9585C9.84164 13.9585 9.68331 13.9002 9.55831 13.7752L6.76664 10.9835C6.52497 10.7419 6.52497 10.3419 6.76664 10.1002C7.0083 9.85853 7.40831 9.85853 7.64997 10.1002L9.99997 12.4502L12.35 10.1002C12.5916 9.85853 12.9916 9.85853 13.2333 10.1002C13.475 10.3419 13.475 10.7419 13.2333 10.9835L10.4416 13.7752C10.3166 13.9002 10.1583 13.9585 9.99997 13.9585Z" fill="#007AFF"/>
                            </svg>
                        </div>
                    </div>
                `;
            default:
                return message.message;
        }
    }
    
    // Send message functionality
    $('#send-message-btn').click(function() {
        sendMessage();
    });
    
    $('#message-input').keypress(function(e) {
        if (e.which === 13) { // Enter key
            sendMessage();
        }
    });
    
    function sendMessage() {
        const message = $('#message-input').val().trim();
        if (!message || !currentChatId) {
            console.log('Cannot send message: message =', message, 'currentChatId =', currentChatId);
            return;
        }
        
        console.log('Attempting to send message:', message, 'to chat:', currentChatId);
        console.log('Firebase Chat initialized:', window.firebaseChat && window.firebaseChat.isInitialized);
        console.log('Firebase Auth state:', firebase.auth().currentUser);
        
        // Check if Firebase is authenticated
        if (firebase.auth().currentUser) {
            console.log('Firebase authenticated, trying Firebase first...');
            // Try Firebase first, fallback to AJAX
            if (window.firebaseChat && window.firebaseChat.isInitialized) {
                console.log('Using Firebase to send message...');
                window.firebaseChat.sendMessage(currentChatId, message, 'text')
                    .then((messageData) => {
                        console.log('Message sent via Firebase:', messageData);
                        $('#message-input').val('');
                        
                        // Add message to UI immediately
                        const newMessage = {
                            messageId: messageData.messageId,
                            senderId: messageData.senderId,
                            senderName: messageData.senderName,
                            message: messageData.message,
                            messageType: messageData.type,
                            timestamp: messageData.timestamp,
                            readBy: messageData.readBy
                        };
                        
                        console.log('Adding message to UI:', newMessage);
                        // Add to messages display
                        addMessageToUI(newMessage);
                    })
                    .catch((error) => {
                        console.error('Firebase send failed, trying AJAX:', error);
                        console.error('Error details:', error.code, error.message);
                        sendMessageViaAjax(message);
                    });
            } else {
                console.log('Firebase Chat not available, using AJAX fallback...');
                sendMessageViaAjax(message);
            }
        } else {
            console.log('Firebase not authenticated, using AJAX fallback...');
            sendMessageViaAjax(message);
        }
    }
    
    // AJAX fallback for sending messages
    function sendMessageViaAjax(message) {
        console.log('Sending message via AJAX fallback...');
        
        // Get CSRF token from meta tag or form
        let csrfToken = $('meta[name="csrf-token"]').attr('content');
        if (!csrfToken) {
            csrfToken = $('input[name="_token"]').val();
        }
        if (!csrfToken) {
            csrfToken = '{{ csrf_token() }}';
        }
        
        console.log('Using CSRF token:', csrfToken ? 'Found' : 'Not found');
        
        $.ajax({
            url: '{{ route("admin.chats.send-message") }}',
            type: 'POST',
            data: {
                chat_id: currentChatId,
                message: message,
                message_type: 'text',
                _token: csrfToken
            },
            headers: {
                'X-CSRF-TOKEN': csrfToken,
                'X-Requested-With': 'XMLHttpRequest'
            },
            success: function(response) {
                console.log('AJAX response:', response);
                if (response.success) {
                    console.log('Message sent via AJAX successfully');
                    $('#message-input').val('');
                    // Reload messages to show the new one
                    loadChatMessages(currentChatId);
                } else {
                    console.error('Failed to send message via AJAX:', response.message);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX send error:', error);
                console.error('Status:', status);
                console.error('Response:', xhr.responseText);
                
                // If it's a CSRF token mismatch, try to refresh the page
                if (xhr.status === 419) {
                    console.error('CSRF token mismatch, page may have expired');
                    alert('Session expired. Please refresh the page and try again.');
                }
            }
        });
    }
    
    // Handle real-time message updates from Firebase
    function handleRealTimeMessage(type, messageData) {
        console.log('Real-time message update:', type, messageData);
        
        switch (type) {
            case 'new_message':
                console.log('Adding new message from real-time update:', messageData);
                addMessageToUI(messageData);
                break;
            case 'message_updated':
                console.log('Updating message from real-time update:', messageData);
                updateMessageInUI(messageData);
                break;
            case 'message_deleted':
                console.log('Removing message from real-time update:', messageData);
                removeMessageFromUI(messageData);
                break;
        }
    }
    
    // Add new message to UI
    function addMessageToUI(messageData) {
        console.log('addMessageToUI called with:', messageData);
        const messagesContainer = $('#chat-messages');
        const isOwnMessage = messageData.senderId === currentUserId;
        
        console.log('isOwnMessage:', isOwnMessage, 'currentUserId:', currentUserId, 'messageData.senderId:', messageData.senderId);
        
        // Handle timestamp
        let messageTime = 'Unknown Time';
        try {
            if (messageData.timestamp) {
                console.log('Raw timestamp:', messageData.timestamp);
                let timestamp;
                
                // Handle Firebase Timestamp objects
                if (messageData.timestamp.toDate) {
                    timestamp = messageData.timestamp.toDate();
                } else if (messageData.timestamp.seconds) {
                    // Handle Firestore timestamp format
                    timestamp = new Date(messageData.timestamp.seconds * 1000);
                } else {
                    // Handle regular date strings
                    timestamp = new Date(messageData.timestamp);
                }
                
                console.log('Parsed timestamp:', timestamp);
                messageTime = timestamp.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
                console.log('Formatted time:', messageTime);
            }
        } catch (e) {
            console.error('Error parsing timestamp:', messageData.timestamp, e);
        }
        
        let messageHtml = '';
        if (isOwnMessage) {
            messageHtml = `
                <div class="message-sender mb-3">
                    <div class="text-gray fs-13 mb-1">
                        <div class="chat-user-name">${messageData.senderName || 'Unknown'}</div>
                        <span class="chat-dot"></span> 
                        ${messageTime}
                    </div>
                    <div class="bg-ligt-primary p-3 fs-13 rounded-4 rounded-top-end-0 d-inline-block text-black">
                        ${formatMessageContent(messageData)}
                    </div>
                </div>
            `;
        } else {
            messageHtml = `
                <div class="message-receive mb-3">
                    <div class="text-gray fs-13 mb-1">
                        <div class="chat-user-name">${messageData.senderName || 'Unknown'}</div>
                        <span class="chat-dot"></span> 
                        ${messageTime}
                    </div>
                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black">
                        ${formatMessageContent(messageData)}
                    </div>
                </div>
            `;
        }
        
        console.log('Generated message HTML:', messageHtml);
        console.log('Messages container found:', messagesContainer.length > 0);
        console.log('Messages container HTML before append:', messagesContainer.html().substring(0, 200) + '...');
        
        messagesContainer.append(messageHtml);
        
        console.log('Message HTML appended successfully');
        console.log('Messages container HTML after append:', messagesContainer.html().substring(0, 200) + '...');
        
        // Scroll to bottom
        const chatScroll = $('.chat-scroll');
        console.log('Chat scroll element found:', chatScroll.length > 0);
        if (chatScroll.length > 0) {
            console.log('Scrolling to bottom...');
            chatScroll.scrollTop(chatScroll[0].scrollHeight);
            console.log('Scroll completed');
        } else {
            console.error('Chat scroll element not found!');
        }
    }
    
    // Update message in UI
    function updateMessageInUI(messageData) {
        // Find and update the message with matching messageId
        const messageElement = $(`[data-message-id="${messageData.messageId}"]`);
        if (messageElement.length > 0) {
            // Update the message content
            const contentElement = messageElement.find('.bg-ligt-primary, .bg-white');
            contentElement.html(formatMessageContent(messageData));
        }
    }
    
    // Remove message from UI
    function removeMessageFromUI(messageId) {
        $(`[data-message-id="${messageId}"]`).remove();
    }
    
    // Update chat unread count in the list
    function updateChatUnreadCount(chatId, unreadCount) {
        const chatItem = $(`.chat-item[data-chat-id="${chatId}"]`);
        const badge = chatItem.find('.badge');
        
        if (unreadCount > 0) {
            if (badge.length > 0) {
                badge.text(unreadCount);
            } else {
                chatItem.find('.text-gray.fs-13').append(`<span class="badge bg-primary ms-1">${unreadCount}</span>`);
            }
        } else {
            badge.remove();
        }
    }
    
    // Cleanup Firebase listeners when page unloads
    $(window).on('beforeunload', function() {
        if (window.firebaseChat) {
            window.firebaseChat.cleanup();
        }
    });
    
    // Test Firebase connection
    if (typeof firebase !== 'undefined') {
        console.log('Firebase initialized successfully');
        console.log('Firebase config:', firebaseConfig);
        
        // Test Firestore connection - check if we can access the collection
        db.collection('Chats').limit(1).get()
            .then((snapshot) => {
                console.log('Firebase configuration loaded successfully');
                console.log('Firebase Firestore is available');
                console.log('Chats collection test successful, found', snapshot.size, 'documents');
                
                        // Test if we can access a specific chat that the current user should have access to
        if (snapshot.size > 0) {
            const firstChat = snapshot.docs[0];
            const chatData = firstChat.data();
            const users = chatData.users || [];
            console.log('First chat users:', users);
            console.log('Current user ID:', currentUserId);
            console.log('User has access to this chat:', users.includes(currentUserId));
            
            // Test if we can read messages from this chat
            const chatId = firstChat.id;
            console.log('Testing read access to messages for chat:', chatId);
            firebase.firestore().collection('Chats').doc(chatId).collection('Messages').limit(1).get()
                .then((messageSnapshot) => {
                    console.log('Client can read messages:', messageSnapshot.size, 'messages found');
                })
                .catch((error) => {
                    console.error('Client cannot read messages:', error);
                });
        }
            })
            .catch((error) => {
                console.error('Firebase connection test failed:', error);
                console.error('Error code:', error.code);
                console.error('Error message:', error.message);
            });
    } else {
        console.error('Firebase not loaded');
    }
  });
</script>

@endsection