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

@section('content')
<style>
.popup-menu {
    position: absolute;
    bottom: 45px; /* adjust based on your button position */
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    padding: 4px 0;
    z-index: 100;
    animation: fadeIn 0.15s ease-in-out;
}

.popup-menu button {
    background: none;
    border: none;
    padding: 8px 16px;
    text-align: left;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
}

.popup-menu button:hover {
    background-color: #f5f5f5;
}

.attachment-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f1f1;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 6px;
}
.attachment-preview span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.attachment-preview .remove {
    cursor: pointer;
    color: #888;
    font-weight: bold;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

    </style>

    <!-- 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" style="display:none"></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">
                    <input type="hidden" id="active-job" value="">
                    <div class="tab-pane fade show active" id="All" role="tabpanel" aria-labelledby="All-tab">
                    <ul class="chat-list">
                        
                    </ul>
                    </div>
                    <div class="tab-pane fade" id="Unread" role="tabpanel" aria-labelledby="Unread-tab">
                        <ul class="chat-list">
                            <li>
                        </ul>
                    </div>
                    <div class="tab-pane fade" id="Read" role="tabpanel" aria-labelledby="Read-tab">
                        <ul class="chat-list">
                            <li>
                            {{-- <div class="d-flex justify-content-between">
                                <div class="">
                                <div class="text-black fs-15 fw-semibold mb-1">Job #12345</div>
                                <div class="text-gray fs-13">Job #12345</div>
                                </div>
                                <div class="text-gray fs-13">07:35 PM</div>
                            </div> --}}
                            </li>
                        </ul>
                    </div>
                </div>
                </div>
                <div class="col-md-6 col-xl-8 ps-0 chat-bg">
                <div class="p-3 d-flex justify-content-between bg-white align-items-center flex-wrap" id="chat-box-header">
                    {{-- <div class="fs-17 fw-bold text-black">
                    Job #12346
                    <span class="fw-bold bg-body-tertiary fs-13 d-inline-block px-3 py-1 rounded-4 ms-2">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M6.1064 7.74634C6.0864 7.74634 6.07307 7.74634 6.05307 7.74634C6.01973 7.73967 5.97307 7.73967 5.93307 7.74634C3.99973 7.68634 2.53973 6.16634 2.53973 4.29301C2.53973 2.38634 4.09307 0.833008 5.99973 0.833008C7.9064 0.833008 9.45973 2.38634 9.45973 4.29301C9.45307 6.16634 7.9864 7.68634 6.1264 7.74634C6.11973 7.74634 6.11307 7.74634 6.1064 7.74634ZM5.99973 1.83301C4.6464 1.83301 3.53973 2.93967 3.53973 4.29301C3.53973 5.62634 4.57973 6.69967 5.9064 6.74634C5.9464 6.73967 6.03307 6.73967 6.11973 6.74634C7.4264 6.68634 8.45307 5.61301 8.45973 4.29301C8.45973 2.93967 7.35307 1.83301 5.99973 1.83301Z" fill="black"/>
                        <path d="M13.2615 5.23438C13.1495 6.37745 12.2243 7.26993 11.0584 7.33105L11.0467 7.32715H11.0535L11.0672 7.32617C12.3034 7.25837 13.27 6.24265 13.2733 5L13.2615 5.23438Z" fill="black" stroke="black"/>
                        <path d="M6.11307 15.0337C4.80641 15.0337 3.49307 14.7003 2.49974 14.0337C1.57307 13.4203 1.06641 12.5803 1.06641 11.667C1.06641 10.7537 1.57307 9.90699 2.49974 9.28699C4.49974 7.96033 7.73974 7.96033 9.72641 9.28699C10.6464 9.90033 11.1597 10.7403 11.1597 11.6537C11.1597 12.567 10.6531 13.4137 9.72641 14.0337C8.72641 14.7003 7.41974 15.0337 6.11307 15.0337ZM3.05307 10.127C2.41307 10.5537 2.06641 11.1003 2.06641 11.6737C2.06641 12.2403 2.41974 12.787 3.05307 13.207C4.71307 14.3203 7.51307 14.3203 9.17307 13.207C9.81307 12.7803 10.1597 12.2337 10.1597 11.6603C10.1597 11.0937 9.80641 10.547 9.17307 10.127C7.51307 9.02033 4.71307 9.02033 3.05307 10.127Z" fill="black"/>
                        <path d="M12.2264 13.8333C11.9931 13.8333 11.7864 13.6733 11.7397 13.4333C11.6864 13.16 11.8597 12.9 12.1264 12.84C12.5464 12.7533 12.9331 12.5867 13.2331 12.3533C13.6131 12.0667 13.8197 11.7067 13.8197 11.3267C13.8197 10.9467 13.6131 10.5867 13.2397 10.3067C12.9464 10.08 12.5797 9.92001 12.1464 9.82001C11.8797 9.76001 11.7064 9.49335 11.7664 9.22001C11.8264 8.95335 12.0931 8.78001 12.3664 8.84001C12.9397 8.96668 13.4397 9.19335 13.8464 9.50668C14.4664 9.97335 14.8197 10.6333 14.8197 11.3267C14.8197 12.02 14.4597 12.68 13.8397 13.1533C13.4264 13.4733 12.9064 13.7067 12.3331 13.82C12.2931 13.8333 12.2597 13.8333 12.2264 13.8333Z" fill="black"/>
                        </svg>
                        5 Members</span>
                    </div> --}}
                    {{-- <span class="in-progress-tag">In Progress</span> --}}
                </div>
                <div class="chat-scroll">
                    <div class="p-3 pt-5">
                        {{-- <div class="message-receive mb-3">
                            <div class="text-gray fs-13 mb-1">
                            <div class="chat-user-name">Bruce Wayne </div>
                            <span class="chat-dot"></span>
                            12:45 PM
                            </div>
                            <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >
                            <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">Insights of Lading</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>
                            I have some insights that could change our approach.
                            </div>
                        </div> --}}
                    </div>
                </div>
                <div class="p-3 position-relative">
                    <div id="attachmentBox" style="display: none; margin-bottom: 6px;"></div>

                    <button class="chat-btn position-absolute  chat-plus-icon" id="plusBtn">
                        <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>

                    <div class="popup-menu" id="popupMenu">
                        <button id="chooseImageBtn">Choose Image</button>
                        <button id="choosePdfBtn">Choose PDF</button>

                        <!-- Hidden file inputs -->
                        <input type="file" id="imageInput" accept="image/*" style="display:none">
                        <input type="file" id="pdfInput" accept="application/pdf" style="display:none">
                    </div>
                    <input type="text" class="form-control chat-input rounded-1 border-1 " placeholder="Enter message" id="messageInput"/>
                    <button class="chat-btn position-absolute chat-submit-icon" id="sendBtn">
                        <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>
{{-- @dd($firebaseCredentials['apiKey']) --}}
    <script type="module">
        import { FirebaseChat } from "{{ asset('js/firebase-chat.js') }}";


            // Laravel Auth user from Blade
           
            const currentUserId = "{{$currentUser->id}}";
            const currentUserName = "{{$currentUser->name}}";
            const role = "{{ $role }}";
            const firestoreDbId = "{{ config('firebase.database') }}";

            // Query param job to preselect chat
            const desiredJobId = new URLSearchParams(window.location.search).get('job');
            let desiredJobTried = false;
            function trySelectDesiredJob(){
                if (!desiredJobId || desiredJobTried) return;
                const el = document.querySelector(`.group-job[data-job="${desiredJobId}"]`);
                if (el){
                    el.click();
                    desiredJobTried = true;
                }
            }

            // Firebase Config
            const firebaseConfig = {
                apiKey: "{{ $firebaseCredentials['apiKey'] }}",
                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"
            };

            // Init Firebase via helper
            FirebaseChat.init(firebaseConfig, firestoreDbId, { userId: currentUserId, userName: currentUserName, role });

            // Build the job list from Firestore chats that include the current user
            (async function populateJobsFromFirestore(){
                const list = document.querySelector('#All .chat-list');
                if (!list) return;
                list.innerHTML = '';
                try{
                    const chats = await FirebaseChat.listGroupChatsForUser(currentUserId);
                    chats.forEach((c) => {
                        const jobId = c.jobId || (c.id || '').replace('group_job','');
                        if (!jobId) return;
                        const li = document.createElement('li');
                        li.className = 'group-job';
                        li.setAttribute('data-job', String(jobId));
                        li.innerHTML = `
                            <div class="d-flex justify-content-between">
                                <div class="">
                                <div class="text-black fs-15 fw-semibold mb-1 jobId">Job #${jobId}</div>
                                <div class="text-gray fs-13 message-text"></div>
                                </div>
                                <div class="text-gray fs-13 message-time"></div>
                            </div>
                        `;
                        list.appendChild(li);
                    });
                    // Now start watchers for this filtered list
                    startJobWatchers();
                    // Try to auto-select desired job if provided
                    setTimeout(trySelectDesiredJob, 200);
                }catch(err){ console.error('Failed to load chats:', err); }
            })();

         /* ==========================================================
         Kotlin → JS Conversion
         Function names, structure, and Firestore keys preserved
         ========================================================== */
        async function getUserChats(userId) {
            return FirebaseChat.subscribeUserChats(userId, (change) => {
                if (change.type === 'added' || change.type === 'modified') {
                    console.log('Chat updated:', change.data);
                }
                if (change.type === 'removed') {
                    console.log('Chat removed:', change.id);
                }
            });
        }

        async function getMessages(chatId) {
            return FirebaseChat.subscribeMessages(chatId, (messages) => {
                renderMessages(messages);
            }, 'asc');
        }

        async function sendMessage(chatId, senderId, senderName, messageText, attachmentUrl = "", documentName = "") {
            await FirebaseChat.sendMessage(chatId, senderId, senderName, messageText, attachmentUrl, documentName);
        }

        async function createChatIfNotExists(message, attachmentUrl = "", documentName = "") {
            const jobId = document.getElementById('active-job').value;
            const jobUsers = JSON.parse(document.getElementById('job-users').value);
            const chatId = await FirebaseChat.createChatIfNotExists(jobId, jobUsers, message, attachmentUrl, documentName);
            return chatId;
        }

        function markAsRead(messageId) {
            if (!activeChatId) return;
            FirebaseChat.markAsRead(activeChatId, messageId, currentUserId).catch(err => console.error('Error updating readBy:', err));
        }

        async function getGroupChat(groupJob) {
            return FirebaseChat.getGroupChat(groupJob);
        }

        async function resetUnreadStatus(jobId){
            try{
                const { doc, setDoc, serverTimestamp } = await import('https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js');
                const db = FirebaseChat.db;
                const chatId = 'group_job' + String(jobId);
                const statusRef = doc(db, 'Chats', chatId, 'UserChatStatus', String(currentUserId));
                await setDoc(statusRef, { unreadCount: 0, lastReadMessageTime: serverTimestamp() }, { merge: true });
            }catch(_){ /* ignore */ }
        }

        function watchJob(jobId){
            const chatId = 'group_job' + jobId;
            if (jobUnsubs[chatId]){ jobUnsubs[chatId](); }
            jobUnsubs[chatId] = FirebaseChat.subscribeLatestMessage(jobId, (lastMsg) => {
                updateAllItem(jobId, lastMsg || null);
                const ts = lastMsg && lastMsg.timestamp ? (lastMsg.timestamp.seconds || 0) : 0;
                jobLatestTs[jobId] = ts;
                sortAllJobListByLatest();
                if (!firstSnapReceived[jobId]){
                    firstSnapReceived[jobId] = true;
                    if (pendingFirstSnap.has(String(jobId))) pendingFirstSnap.delete(String(jobId));
                    // Try select desired job first
                    trySelectDesiredJob();
                    if (!desiredJobTried) {
                        maybeSelectInitialJob();
                    }
                }
                // Message-driven preview update stays, but unread state now comes from UserChatStatus
            });

            // Subscribe to UserChatStatus for this job and current user
            if (jobStatusUnsubs[jobId]) { try { jobStatusUnsubs[jobId](); } catch (_) {} }
            jobStatusUnsubs[jobId] = FirebaseChat.subscribeUserChatStatus(jobId, currentUserId, (status) => {
                let count = (status && typeof status.unreadCount === 'number') ? status.unreadCount : 0;
                const isActive = String(activeChatId) === String('group_job' + jobId);
                if (isActive && count > 0) {
                    try { resetUnreadStatus(jobId); } catch(_) {}
                    count = 0; // suppress locally for immediate UI update
                }
                jobUnreadCounts[jobId] = count;
                const isUnread = count > 0;
                if (isUnread){
                    unreadJobs.add(jobId);
                    readJobs.delete(jobId);
                } else {
                    unreadJobs.delete(jobId);
                    readJobs.add(jobId);
                }
                // Highlight preview text bold for unread in all visible lists
                const affectedLis = document.querySelectorAll(`.group-job[data-job="${jobId}"] .message-text`);
                affectedLis.forEach((el)=>{
                    el.style.fontWeight = isUnread ? '700' : '';
                    if (isUnread){
                        el.classList.add('text-black');
                        el.classList.remove('text-gray');
                    } else {
                        el.classList.add('text-gray');
                        el.classList.remove('text-black');
                    }
                });
                renderReadUnreadLists();
            });
        }

        function renderMessages(messages) {
            const container = document.getElementById("messagesContainer");
            container.innerHTML = "";
            messages.forEach(msg => {
                const div = document.createElement("div");
                div.textContent = `${msg.senderName}: ${msg.message}`;
                container.appendChild(div);
            });
        }

        /* ==========================================
        Example usage
        ========================================== */
        let activeChatId = null;

        // Store selected files
        var selectedFiles = [];
        // Keep a single active messages listener
        let messagesUnsub = null;
        // Store users for the currently selected chat
        let currentChatUsers = [];
        
        // Function to send message (extracted to avoid code duplication)
        async function sendMessageHandler() {
            // user interaction: prevent any auto-select switching
            autoSelectEnabled = false;
            initialSelectionDone = true;
            const messageInput = document.getElementById("messageInput");
            const message = messageInput.value.trim();
            // if (!message) return;
            if (!message && selectedFiles.length === 0) {
                return;
            }

            // Block oversized files (> 10 MB)
            try {
                const MAX_BYTES = 10 * 1024 * 1024;
                for (let f of selectedFiles) {
                    if (f && typeof f.size === 'number' && f.size > MAX_BYTES) {
                        // alert("You can't send file larger than 10 MB");
                        toastr.error("You can't send file larger than 10 MB");
                        return;
                    }
                }
            } catch (_) {}

            if (!activeChatId) {
                activeChatId = await createChatIfNotExists(message);
                console.log(activeChatId);
                
                // getMessages(activeChatId);
            }

            // Handle file uploads if any files are selected
            let attachmentUrl = "";
            let documentName = "";
            
            if (selectedFiles.length > 0) {
                let url = role == 'admin' ? "{{ route('admin.chats.upload-file') }}" : "{{ route('transporter.chats.upload-file') }}"
                const jobId = document.getElementById('active-job').value;
                if (jobId) {
                    for (let file of selectedFiles) {
                        // Safety check before upload as well
                        if (file && file.size && file.size > 10 * 1024 * 1024) {
                            alert("You can't send file larger than 10 MB");
                            return;
                        }
                        const formData = new FormData();
                        formData.append('file', file);
                        formData.append('job_id', jobId);
                        
                        try {
                            const response = await fetch(url, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                                },
                                body: formData
                            });
                            
                            const result = await response.json();
                            if (result.success) {
                                attachmentUrl = result.attachement_url;
                                documentName = result.file_name;
                            } else {
                                console.error('File upload failed:', result.message);
                            }
                        } catch (error) {
                            console.error('Error uploading file:', error);
                        }
                    }
                }
            }
                console.log(attachmentUrl);
                
            // Send message with attachment details
            await sendMessage(activeChatId, currentUserId, currentUserName, message, attachmentUrl, documentName);

            // Fire push notification for other participants
            (async () => {
                try {
                    const notifyUrl = role == 'admin' ? "{{ route('admin.chats.send-notification') }}" : "{{ route('transporter.chats.send-notification') }}";
                    // Prefer already loaded users; fallback to fetching chat users
                    let users = Array.isArray(currentChatUsers) ? currentChatUsers : [];
                    if ((!users || users.length === 0) && activeChatId) {
                        try {
                            const chatData = await getGroupChat(activeChatId);
                            users = (chatData && Array.isArray(chatData.users)) ? chatData.users : [];
                        } catch(_) {}
                    }
                    const recipients = (users || []).map(String).filter((id) => id && id !== String(currentUserId));
                    if (recipients.length === 0) return;
                    const chatName = `Job #${document.getElementById('active-job').value || ''}`.trim();
                    await fetch(notifyUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({
                            user_ids: recipients.join(','),
                            sender_id: String(currentUserId),
                            chat_id: String(activeChatId || ''),
                            chat_name: chatName,
                            message: String(message || '').slice(0, 200)
                        })
                    }).catch(() => {});
                } catch(_) { }
            })();
            messageInput.value = "";
            
            // Clear selected files and attachment preview
            selectedFiles = [];
            attachmentBox.style.display = 'none';
            imageInput.value = '';
            pdfInput.value = '';
        }

        // Send message on button click
        document.getElementById("sendBtn").addEventListener("click", sendMessageHandler);

        // Send message on Enter key press
        document.getElementById("messageInput").addEventListener("keydown", (event) => {
            if (event.key === "Enter" && !event.shiftKey) {
                event.preventDefault(); // Prevent form submit/new line
                sendMessageHandler();
            }
        });

        // Also handle Enter globally to send attachment-only when input isn't focused
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && !event.shiftKey) {
                // If the message input is focused, its own handler will run
                if (event.target === document.getElementById('messageInput')) return;
                // If there are files selected, allow Enter to send
                if (Array.isArray(selectedFiles) && selectedFiles.length > 0) {
                    event.preventDefault();
                    sendMessageHandler();
                }
            }
        });

        // Start listening to chats for current user
        getUserChats(currentUserId);

        // ================= Read/Unread tabs data =================
        const jobUnsubs = {};
        const unreadJobs = new Set();
        const readJobs = new Set();
        const allJobIds = [];
        const firstSnapReceived = {};
        let pendingFirstSnap = new Set();
        let initialSelectionDone = false;
        const jobLatestTs = {};
        let autoSelectEnabled = true;
        const jobStatusUnsubs = {};
        const jobUnreadCounts = {};

        function formatTimeFromTimestamp(ts){
            try{
                if (!ts) return '';
                const d = ts.seconds ? new Date(ts.seconds * 1000) : new Date(ts);
                return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            }catch(_){ return ''; }
        }

        function updateAllItem(jobId, lastMsg){
            const li = document.querySelector(`.group-job[data-job="${jobId}"]`);
            if (!li) return;
            const textEl = li.querySelector('.message-text');
            const timeEl = li.querySelector('.message-time');
            if (textEl){
                const body = lastMsg ? (lastMsg.attachment_url && lastMsg.documentName ? lastMsg.documentName : (lastMsg.message || '')) : '';
                const isYou = lastMsg && String(lastMsg.senderId) === String(currentUserId);
                const name = isYou ? 'You' : (lastMsg && lastMsg.senderName ? String(lastMsg.senderName) : 'Unknown');
                let preview = lastMsg ? (name + (body ? (': ' + body) : '')) : '';
                const MAX_PREVIEW_LEN = 70;
                if (preview && preview.length > MAX_PREVIEW_LEN) {
                    preview = preview.slice(0, MAX_PREVIEW_LEN - 1) + '…';
                }
                textEl.textContent = preview;
            }
            if (timeEl){
                timeEl.textContent = lastMsg ? formatTimeFromTimestamp(lastMsg.timestamp) : '';
            }
        }

        function sortAllJobListByLatest(){
            const list = document.querySelector('#All .chat-list');
            if (!list) return;
            const items = Array.from(list.querySelectorAll('.group-job[data-job]'));
            items.sort((a,b) => {
                const ja = a.getAttribute('data-job');
                const jb = b.getAttribute('data-job');
                const ta = jobLatestTs[ja] ?? 0;
                const tb = jobLatestTs[jb] ?? 0;
                return tb - ta; // desc
            });
            items.forEach(el => list.appendChild(el));
        }

        function renderReadUnreadLists(){
            const unreadList = document.querySelector('#Unread .chat-list');
            const readList = document.querySelector('#Read .chat-list');
            if (unreadList){ unreadList.innerHTML = ''; }
            if (readList){ readList.innerHTML = ''; }

            // Update badge
            const badge = document.querySelector('button#Unread-tab .notification-value');
            if (badge){
                const totalUnread = Object.values(jobUnreadCounts).reduce((sum, val) => {
                    const n = Number(val);
                    return sum + (isNaN(n) ? 0 : n);
                }, 0);
                if (totalUnread > 0){
                    badge.textContent = String(totalUnread);
                    badge.style.display = '';
                } else {
                    badge.textContent = '';
                    badge.style.display = 'none';
                }
            }

            // Helper to render item by reusing text/time from All list
            function createItem(jobId){
                const allLi = document.querySelector(`.group-job[data-job="${jobId}"]`);
                const jobText = allLi ? allLi.querySelector('.jobId')?.textContent || `Job #${jobId}` : `Job #${jobId}`;
                const preview = allLi ? allLi.querySelector('.message-text')?.textContent || '' : '';
                const time = allLi ? allLi.querySelector('.message-time')?.textContent || '' : '';
                const li = document.createElement('li');
                li.className = 'group-job';
                li.setAttribute('data-job', jobId);
                li.innerHTML = `
                    <div class="d-flex justify-content-between">
                        <div class="">
                            <div class="text-black fs-15 fw-semibold mb-1 jobId">${jobText}</div>
                            <div class="text-gray fs-13 message-text">${preview}</div>
                        </div>
                        <div class="text-gray fs-13 message-time">${time}</div>
                    </div>
                `;
                return li;
            }

            // Sort by latest timestamp desc
            const sortedUnread = Array.from(unreadJobs).sort((a,b)=> (jobLatestTs[b]??0) - (jobLatestTs[a]??0));
            const sortedRead = Array.from(readJobs).sort((a,b)=> (jobLatestTs[b]??0) - (jobLatestTs[a]??0));

            if (unreadList){
                sortedUnread.forEach((jobId) => {
                    const el = createItem(jobId);
                    const preview = el.querySelector('.message-text');
                    if (preview){
                        preview.style.fontWeight = '700';
                        preview.classList.add('text-black');
                        preview.classList.remove('text-gray');
                    }
                    unreadList.appendChild(el);
                });
            }
            if (readList){
                sortedRead.forEach((jobId) => {
                    const el = createItem(jobId);
                    const preview = el.querySelector('.message-text');
                    if (preview){
                        preview.style.fontWeight = '';
                        preview.classList.add('text-gray');
                        preview.classList.remove('text-black');
                    }
                    readList.appendChild(el);
                });
            }
        }

        function startJobWatchers(){
            allJobIds.length = 0;
            document.querySelectorAll('.group-job[data-job]').forEach((el) => {
                const jobId = el.getAttribute('data-job');
                if (jobId){
                    allJobIds.push(String(jobId));
                    watchJob(jobId);
                }
            });
            pendingFirstSnap = new Set(allJobIds);
            // fallback: if no messages exist for any job, select the last item after a short delay
            setTimeout(() => { maybeSelectInitialJob(true); }, 1200);
        }

        function maybeSelectInitialJob(allowFallback = false){
            if (!autoSelectEnabled) return;
            if (initialSelectionDone) return;
            // wait until first snapshot comes for all jobs
            if (pendingFirstSnap.size > 0 && !allowFallback) return;
            let pickJobId = null;
            let maxTs = -1;
            Object.keys(jobLatestTs).forEach((jid) => {
                const t = jobLatestTs[jid] ?? 0;
                if (t > maxTs){ maxTs = t; pickJobId = jid; }
            });
            if (!pickJobId && allowFallback){
                const items = document.querySelectorAll('.group-job[data-job]');
                if (items.length){ pickJobId = String(items[items.length - 1].getAttribute('data-job')); }
            }
            if (pickJobId){
                const el = document.querySelector(`.group-job[data-job="${pickJobId}"]`);
                if (el){
                    el.click();
                    initialSelectionDone = true;
                    autoSelectEnabled = false;
                }
            }
        }

        function filterJobsToExistingChats(){
            const items = Array.from(document.querySelectorAll('.group-job[data-job]'));
            const checks = items.map(async (li) => {
                const jobId = li.getAttribute('data-job');
                const chatId = 'group_job' + String(jobId);
                try {
                    const data = await FirebaseChat.getGroupChat(chatId);
                    if (!data) {
                        li.remove();
                    }
                } catch (_) {
                    try { li.remove(); } catch (_) {}
                }
            });
            return Promise.all(checks);
        }

        filterJobsToExistingChats().then(() => { startJobWatchers(); });

        function loadGroupMessages(groupId) {
            let messageContent = '';

            // Unsubscribe previous listener if any
            if (typeof messagesUnsub === 'function') {
                try { messagesUnsub(); } catch (_) {}
                messagesUnsub = null;
            }

            const chatContainer = $(".chat-scroll .p-3");
            chatContainer.empty(); // clear old messages

            // Track last date shown at bottom to insert separators correctly when appending
            let lastDateTextBottom = '';

            (async () => {
                const { collection, getDocs, query, orderBy, limit, startAfter, onSnapshot } = await import('https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js');
                const db = FirebaseChat.db;
                const messagesRef = collection(db, 'Chats', groupId, 'Messages');

                const state = {
                    cursor: null,
                    isLoading: false,
                    hasMore: true,
                    loadedIds: new Set(),
                    newestTs: 0
                };

                function buildMessageHtml(msg, timeStr){
                    let html = '';
                    if (String(msg.senderId) === String(currentUserId)) {
                        // Sender message
                        // Add file attachment if present
                        if (msg.attachment_url && msg.documentName) {
                            const isImage = /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(String(msg.documentName || ''));
                            if (isImage) {
                                const captionHtml = msg.message ? ('<div style="margin-top:8px;">' + msg.message + '</div>') : '';
                                html = `
                                    <div class="message-sender mb-3">
                                        <div class="text-gray fs-13 mb-1">
                                            <div class="chat-user-name">${msg.senderName}</div>
                                            <span class="chat-dot"></span>
                                            ${timeStr}
                                        </div>
                                        <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black">
                                            <a href="${msg.attachment_url}" target="_blank" rel="noopener">
                                                <img src="${msg.attachment_url}" alt="${msg.documentName}" style="max-width:260px;max-height:260px;border-radius:8px;display:block;">
                                            </a>
                                            ${captionHtml}
                                        </div>
                                    </div>`;
                            } else {
                                html = `
                                    <div class="message-sender mb-3">
                                    <div class="text-gray fs-13 mb-1">
                                    <div class="chat-user-name">${msg.senderName}</div>
                                    <span class="chat-dot"></span>
                                    ${timeStr}
                                    </div>
                                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >
                                    <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">${msg.documentName}</div>
                                        </div>
                                        <div class="ml-2">
                                        <a href="${msg.attachment_url}" target="_blank" rel="noopener" class="btn btn-link p-0 ms-2" title="View">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 4C5.45455 4 2.04545 7.27273 1 10C2.04545 12.7273 5.45455 16 10 16C14.5455 16 17.9545 12.7273 19 10C17.9545 7.27273 14.5455 4 10 4Z" stroke="#007AFF"/>
                                        <circle cx="10" cy="10" r="3" stroke="#007AFF"/>
                                        </svg>
                                        </a>
                                        </div>
                                    </div>
                                    ${msg.message}
                                    </div>
                                </div>
                                </div>`
                            }
                        }
                        else {
                            html = `
                            <div class="message-sender mb-3">
                                <div class="text-gray fs-13 mb-1">
                                    <div class="chat-user-name chat-receiver-name">${msg.senderName}</div>
                                    <span class="chat-dot"></span>
                                    ${timeStr}
                                </div>
                                <div class="bg-ligt-primary p-3 fs-13 rounded-4 rounded-top-end-0 d-inline-block text-black sender-message-content">
                                    ${msg.message}
                                </div>
                            </div>
                            `
                        }
                    } else {
                        // Receiver message
                        
                        // Add file attachment if present
                        if (msg.attachment_url && msg.documentName) {
                            const isImage = /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(String(msg.documentName || ''));
                            if (isImage) {
                                const captionHtml = msg.message ? ('<div style="margin-top:8px;">' + msg.message + '</div>') : '';
                                html = `
                                    <div class="message-receive mb-3">
                                        <div class="text-gray fs-13 mb-1">
                                            <div class="chat-user-name">${msg.senderName}</div>
                                            <span class="chat-dot"></span>
                                            ${timeStr}
                                        </div>
                                        <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black">
                                            <a href="${msg.attachment_url}" target="_blank" rel="noopener">
                                                <img src="${msg.attachment_url}" alt="${msg.documentName}" style="max-width:260px;max-height:260px;border-radius:8px;display:block;">
                                            </a>
                                            ${captionHtml}
                                        </div>
                                    </div>`;
                            } else {
                                html = `
                                    <div class="message-receive mb-3">
                                    <div class="text-gray fs-13 mb-1">
                                    <div class="chat-user-name">${msg.senderName}</div>
                                    <span class="chat-dot"></span>
                                    ${timeStr}
                                    </div>
                                    <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black" >
                                    <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">${msg.documentName}</div>
                                        </div>
                                        <div class="ml-2">
                                        <a href="${msg.attachment_url}" target="_blank" rel="noopener" class="btn btn-link p-0 ms-2" title="View">
                                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M10 4C5.45455 4 2.04545 7.27273 1 10C2.04545 12.7273 5.45455 16 10 16C14.5455 16 17.9545 12.7273 19 10C17.9545 7.27273 14.5455 4 10 4Z" stroke="#007AFF"/>
                                        <circle cx="10" cy="10" r="3" stroke="#007AFF"/>
                                        </svg>
                                        </a>
                                        </div>
                                    </div>
                                    ${msg.message}
                                    </div>
                                </div>
                                </div>
                                `
                            }
                        }
                        else {
                            html = `
                            <div class="message-receive mb-3">
                                <div class="text-gray fs-13 mb-1">
                                    <div class="chat-user-name chat-sender-name">${msg.senderName}</div>
                                    <span class="chat-dot"></span>
                                    ${timeStr}
                                </div>
                                <div class="bg-white p-3 fs-13 rounded-4 rounded-top-strat-0 d-inline-block text-black receiver-message-content">
                                    ${msg.message}
                                </div>
                            </div>`
                        }
                    }

                    // Mark as read only when chat is visible and focused
                    const alreadyRead = Array.isArray(msg.readBy) && msg.readBy.map(String).includes(String(currentUserId));
                    const canMarkNow = String(activeChatId) === String(groupId) && !document.hidden && document.hasFocus();
                    if (canMarkNow && msg.id && String(msg.senderId) !== String(currentUserId) && !alreadyRead) {
                        FirebaseChat.markAsRead(groupId, msg.id, currentUserId).catch(err => console.error('Error updating readBy:', err));
                    }

                    return html;
                }

                async function fetchPage(){
                    if (state.isLoading || !state.hasMore) return;
                    state.isLoading = true;
                    let q = query(messagesRef, orderBy('timestamp', 'desc'), limit(20));
                    if (state.cursor) {
                        q = query(messagesRef, orderBy('timestamp', 'desc'), startAfter(state.cursor), limit(20));
                    }
                    const snap = await getDocs(q);
                    const docs = snap.docs;
                    if (docs.length === 0) {
                        state.hasMore = false;
                        state.isLoading = false;
                        return;
                    }
                    state.cursor = docs[docs.length - 1];

                    const messages = docs.map(d => ({ id: d.id, ...d.data() }));
                    const isFirst = state.loadedIds.size === 0;

                    // Build HTML in ascending order for correct chronology
                    let chunkHtml = '';
                    let localLastDate = null;
                    messages.reverse().forEach((msg) => {
                        if (state.loadedIds.has(msg.id)) return;
                        state.loadedIds.add(msg.id);
                        const timeStr = msg.timestamp ? new Date(msg.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
                        const dateText = msg.timestamp ? new Date(msg.timestamp.seconds * 1000).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) : '';
                        if (!localLastDate || (dateText && dateText !== localLastDate)) {
                            chunkHtml += `
                                <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">${dateText}</span></div>
                                </div>
                            `;
                            localLastDate = dateText;
                        }
                        chunkHtml += buildMessageHtml(msg, timeStr);
                        const ts = (msg.timestamp && msg.timestamp.seconds) ? msg.timestamp.seconds : 0;
                        if (ts > state.newestTs) state.newestTs = ts;
                    });

                    if (isFirst) {
                        chatContainer.append(chunkHtml);
                        $(".chat-scroll").scrollTop($(".chat-scroll")[0].scrollHeight);
                        lastDateTextBottom = localLastDate || lastDateTextBottom;
                    } else {
                        const scrollEl = $(".chat-scroll")[0];
                        const prevHeight = scrollEl.scrollHeight;
                        chatContainer.prepend(chunkHtml);
                        const newHeight = scrollEl.scrollHeight;
                        scrollEl.scrollTop = newHeight - prevHeight + scrollEl.scrollTop;
                    }

                    state.isLoading = false;
                }

                // Initial load (last 20)
                await fetchPage();

                // Load more on scroll-up near top
                $(".chat-scroll").off('scroll.paginate').on('scroll.paginate', async function(){
                    if (this.scrollTop <= 50) {
                        await fetchPage();
                    }
                });

                // Minimal realtime: listen for the single newest message and append if it's new
                try {
                    const latestQ = query(messagesRef, orderBy('timestamp', 'desc'), limit(1));
                    messagesUnsub = onSnapshot(latestQ, (snapshot) => {
                        snapshot.forEach((d) => {
                            const msg = { id: d.id, ...d.data() };
                            const ts = (msg.timestamp && msg.timestamp.seconds) ? msg.timestamp.seconds : 0;
                            if (state.loadedIds.has(msg.id) || ts <= state.newestTs) return;
                            state.loadedIds.add(msg.id);
                            state.newestTs = Math.max(state.newestTs, ts);
                            const timeStr = msg.timestamp ? new Date(msg.timestamp.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
                            const dateText = msg.timestamp ? new Date(msg.timestamp.seconds * 1000).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' }) : '';
                            let addHtml = '';
                            if (dateText && dateText !== lastDateTextBottom) {
                                addHtml += `
                                    <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">${dateText}</span></div>
                                    </div>
                                `;
                                lastDateTextBottom = dateText;
                            }
                            addHtml += buildMessageHtml(msg, timeStr);
                            chatContainer.append(addHtml);
                            $(".chat-scroll").scrollTop($(".chat-scroll")[0].scrollHeight);
                        });
                    });
                } catch(_) {}
            })();
        }

        $(document).on('click', '.group-job', async function(){
            let job = $(this).data('job');
            $('#active-job').val(job);
            let groupJob = 'group_job'+job

            // mark selection
            $('.group-job').removeClass('active');
            $(this).addClass('active');

            // set activeChatId so sending uses this chat
            activeChatId = groupJob;
            try {
                localStorage.removeItem('activeChatId');
                localStorage.setItem('activeChatId', String(activeChatId));
            } catch (_) {}

            // user interaction: prevent auto-select switching afterwards
            autoSelectEnabled = false;
            initialSelectionDone = true;

            // Wait for the function to finish
            let chatData = await getGroupChat(groupJob);
            
            
            // Now chatData contains the return value
            // if (chatData) {
                let totalMembers = chatData ?  chatData.users.length : '';
                currentChatUsers = (chatData && Array.isArray(chatData.users)) ? chatData.users : [];

                $('#chat-box-header').html(
                `<div class="fs-17 fw-bold text-black">
                        Job #${job}
                        <span class="fw-bold bg-body-tertiary fs-13 d-inline-block px-3 py-1 rounded-4 ms-2">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.1064 7.74634C6.0864 7.74634 6.07307 7.74634 6.05307 7.74634C6.01973 7.73967 5.97307 7.73967 5.93307 7.74634C3.99973 7.68634 2.53973 6.16634 2.53973 4.29301C2.53973 2.38634 4.09307 0.833008 5.99973 0.833008C7.9064 0.833008 9.45973 2.38634 9.45973 4.29301C9.45307 6.16634 7.9864 7.68634 6.1264 7.74634C6.11973 7.74634 6.11307 7.74634 6.1064 7.74634ZM5.99973 1.83301C4.6464 1.83301 3.53973 2.93967 3.53973 4.29301C3.53973 5.62634 4.57973 6.69967 5.9064 6.74634C5.9464 6.73967 6.03307 6.73967 6.11973 6.74634C7.4264 6.68634 8.45307 5.61301 8.45973 4.29301C8.45973 2.93967 7.35307 1.83301 5.99973 1.83301Z" fill="black"/>
                            <path d="M13.2615 5.23438C13.1495 6.37745 12.2243 7.26993 11.0584 7.33105L11.0467 7.32715H11.0535L11.0672 7.32617C12.3034 7.25837 13.27 6.24265 13.2733 5L13.2615 5.23438Z" fill="black" stroke="black"/>
                            <path d="M6.11307 15.0337C4.80641 15.0337 3.49307 14.7003 2.49974 14.0337C1.57307 13.4203 1.06641 12.5803 1.06641 11.667C1.06641 10.7537 1.57307 9.90699 2.49974 9.28699C4.49974 7.96033 7.73974 7.96033 9.72641 9.28699C10.6464 9.90033 11.1597 10.7403 11.1597 11.6537C11.1597 12.567 10.6531 13.4137 9.72641 14.0337C8.72641 14.7003 7.41974 15.0337 6.11307 15.0337ZM3.05307 10.127C2.41307 10.5537 2.06641 11.1003 2.06641 11.6737C2.06641 12.2403 2.41974 12.787 3.05307 13.207C4.71307 14.3203 7.51307 14.3203 9.17307 13.207C9.81307 12.7803 10.1597 12.2337 10.1597 11.6603C10.1597 11.0937 9.80641 10.547 9.17307 10.127C7.51307 9.02033 4.71307 9.02033 3.05307 10.127Z" fill="black"/>
                            <path d="M12.2264 13.8333C11.9931 13.8333 11.7864 13.6733 11.7397 13.4333C11.6864 13.16 11.8597 12.9 12.1264 12.84C12.5464 12.7533 12.9331 12.5867 13.2331 12.3533C13.6131 12.0667 13.8197 11.7067 13.8197 11.3267C13.8197 10.9467 13.6131 10.5867 13.2397 10.3067C12.9464 10.08 12.5797 9.92001 12.1464 9.82001C11.8797 9.76001 11.7064 9.49335 11.7664 9.22001C11.8264 8.95335 12.0931 8.78001 12.3664 8.84001C12.9397 8.96668 13.4397 9.19335 13.8464 9.50668C14.4664 9.97335 14.8197 10.6333 14.8197 11.3267C14.8197 12.02 14.4597 12.68 13.8397 13.1533C13.4264 13.4733 12.9064 13.7067 12.3331 13.82C12.2931 13.8333 12.2597 13.8333 12.2264 13.8333Z" fill="black"/>
                            </svg>
                            ${totalMembers} Members</span>
                            </div>
                        <span class="" id="job-status-pill" style="display:none;"></span>
                        `
                )

                // Update status dynamically
                updateJobStatus(job);

                loadGroupMessages(groupJob);
            // }

            // Reset unread count for current user in a job's chat (real-time badge clearing)
            async function resetUnreadStatus(jobId){
                try{
                    const { doc, setDoc, serverTimestamp } = await import('https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js');
                    const db = FirebaseChat.db;
                    const chatId = 'group_job' + String(jobId);
                    const statusRef = doc(db, 'Chats', chatId, 'UserChatStatus', String(currentUserId));
                    await setDoc(statusRef, { unreadCount: 0, lastReadMessageTime: serverTimestamp() }, { merge: true });
                }catch(_){ /* ignore */ }
            }

            // Clear unread immediately on opening the chat
            try { resetUnreadStatus(job); } catch(_) {}

        });

        // Clear local activeChatId on page unload or navigation away
        window.addEventListener('beforeunload', ()=>{ try { localStorage.removeItem('activeChatId'); } catch(_) {} });
    
    const plusBtn = document.getElementById('plusBtn');
    const popupMenu = document.getElementById('popupMenu');
    const chooseImageBtn = document.getElementById('chooseImageBtn');
    const choosePdfBtn = document.getElementById('choosePdfBtn');
    const imageInput = document.getElementById('imageInput');
    const pdfInput = document.getElementById('pdfInput');
    const attachmentBox = document.getElementById('attachmentBox');
    const messageInput = document.getElementById('messageInput');

    // Toggle popup
    plusBtn.addEventListener('click', () => {
        popupMenu.style.display = popupMenu.style.display === 'block' ? 'none' : 'block';
    });

    // Close popup if clicking outside
    document.addEventListener('click', (event) => {
        if (!plusBtn.contains(event.target) && !popupMenu.contains(event.target)) {
            popupMenu.style.display = 'none';
        }
    });

    // Trigger hidden file input when option is clicked
    chooseImageBtn.addEventListener('click', () => {
        imageInput.click();
        popupMenu.style.display = 'none';
    });

    choosePdfBtn.addEventListener('click', () => {
        pdfInput.click();
        popupMenu.style.display = 'none';
    });


    function showAttachment(file, type) {
        const sizeKB = Math.max(1, Math.round((file.size || 0) / 1024));
        const isImage = type.toLowerCase() === 'image';
        let objectUrl = '';
        const thumb = isImage
            ? `<img src="${(objectUrl = URL.createObjectURL(file))}" alt="preview" style="width:44px;height:44px;object-fit:cover;border-radius:8px;display:block;">`
            : `
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="4" y="3" width="16" height="18" rx="2" ry="2" stroke="#6C757D" fill="#F1F3F5"/>
                <path d="M8 9h8" stroke="#6C757D"/>
                <path d="M8 13h8" stroke="#6C757D"/>
                <path d="M8 17h5" stroke="#6C757D"/>
            </svg>`;

        attachmentBox.innerHTML = `
            <div style="display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:8px 10px;box-shadow:0 2px 6px rgba(0,0,0,0.06);max-width:320px;">
                <div style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:8px;overflow:hidden;flex-shrink:0;">${thumb}</div>
                <div style="min-width:0;flex:1 1 auto;">
                    <div style="font-weight:600;color:#222;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" title="${file.name}">${file.name}</div>
                    <div style="font-size:12px;color:#6c757d;">${isImage ? 'Image' : 'PDF'} • ${sizeKB} KB</div>
                </div>
                <button type="button" class="attachment-remove" aria-label="Remove" style="margin-left:8px;border:none;background:transparent;color:#888;font-size:18px;line-height:1;cursor:pointer;">&times;</button>
            </div>
        `;
        // Show as an overlay above the input without shifting icons
        attachmentBox.style.display = 'block';
        attachmentBox.style.position = 'absolute';
        attachmentBox.style.bottom = '56px';
        attachmentBox.style.zIndex = '20';

        const removeBtn = attachmentBox.querySelector('.attachment-remove');
        removeBtn.addEventListener('click', () => {
            attachmentBox.style.display = 'none';
            attachmentBox.innerHTML = '';
            if (objectUrl) { try { URL.revokeObjectURL(objectUrl); } catch (_) {} }
            selectedFiles = [];
            imageInput.value = '';
            pdfInput.value = '';
            messageInput.focus();
        });
    }

    // Image selection
    imageInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file) {
            if (file.size && file.size > 10 * 1024 * 1024) {
                // alert("You can't send file larger than 10 MB");
                toastr.error("You can't send file larger than 10 MB");
                selectedFiles = [];
                imageInput.value = '';
                attachmentBox.style.display = 'none';
                attachmentBox.innerHTML = '';
                return;
            }
            selectedFiles = [file];
            showAttachment(file, 'Image');
            // Ensure Enter key sends even without text
            try { messageInput.focus(); } catch (_) {}
        }
    });

    // PDF selection
    pdfInput.addEventListener('change', (event) => {
        const file = event.target.files[0];
        if (file) {
            if (file.size && file.size > 10 * 1024 * 1024) {
                // alert("You can't send file larger than 10 MB");
                toastr.error("You can't send file larger than 10 MB");
                selectedFiles = [];
                pdfInput.value = '';
                attachmentBox.style.display = 'none';
                attachmentBox.innerHTML = '';
                return;
            }
            selectedFiles = [file];
            showAttachment(file, 'PDF');
            // Ensure Enter key sends even without text
            try { messageInput.focus(); } catch (_) {}
        }
    });

    // Function to download files
    async function downloadFile(filePath, originalName) {
        let url = role == 'admin' ? "{{ route('admin.chats.download-file') }}" : "{{ route('transporter.chats.download-file') }}"
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ path: filePath, original_name: originalName || '' })
            });
            const result = await response.json();
            if (!result.success || !result.url) {
                alert(result.message || 'Failed to prepare download');
                return;
            }

            const link = document.createElement('a');
            link.href = result.url;
            link.download = originalName || '';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } catch (e) {
            console.error('Download error:', e);
            alert('Failed to download file');
        }
    }

    // Delegate download click
    document.addEventListener('click', function(e){
        const btn = e.target.closest('.download-file-btn');
        if (!btn) return;
        e.preventDefault();
        const filePath = btn.getAttribute('data-path');
        const name = btn.getAttribute('data-name');
        if (filePath) {
            downloadFile(filePath, name);
        }
    });

    // Update job status pill in header
    function updateJobStatus(jobId){
        const pill = document.getElementById('job-status-pill');
        if (!pill) return;
        const statusUrl = role == 'admin' ? "{{ route('admin.chats.job-status') }}" : "{{ route('transporter.chats.job-status') }}";
        $.ajax({
            url: statusUrl,
            method: 'GET',
            data: { job_id: jobId },
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).done(function(data){
            if (data && data.success){
                pill.style.display = '';
                const labelLower = (data.status_label || '').toLowerCase();
                pill.textContent = (data.status_label || '').replace(/\b\w/g, function(c){ return c.toUpperCase(); });
                pill.classList.remove('bg-success','bg-warning','bg-secondary');
                if (labelLower === 'completed') pill.classList.add('completed-tag');
                else if (labelLower === 'in progress') pill.classList.add('in-progress-tag');
                else pill.classList.add('pending-tag');
            } else {
                pill.style.display = 'none';
            }
        }).fail(function(){
            pill.style.display = 'none';
        });
    }

    // Open Members modal when members pill is clicked (no markup change)
    document.addEventListener('click', function(e){
        const pill = e.target.closest('#chat-box-header span.bg-body-tertiary');
        if (!pill) return;
        // Show modal quickly, then populate with names
        populateMembersList(['Loading...']);
        showMembersModal();
        fetchUserNamesByIds(currentChatUsers || [])
            .then((names) => populateMembersList(names))
            .catch(() => populateMembersList([]));
    });

    function resolveUserName(user){
        if (!user) return 'Unknown';
        if (typeof user === 'string') return user;
        if (typeof user === 'object'){
            return user.name || user.userName || user.displayName || user.full_name || user.email || String(user.id || user.user_id || 'Unknown');
        }
        return String(user);
    }

    function toTitleCase(value){
        try {
            const s = String(value || '').replace(/_/g, ' ');
            return s.toLowerCase().replace(/\b\w/g, function(c){ return c.toUpperCase(); });
        } catch(_) { return String(value || ''); }
    }

    function populateMembersList(users){
        const list = document.getElementById('membersList');
        if (!list) return;
        list.innerHTML = '';
        const arr = Array.isArray(users) ? users : [];
        if (arr.length === 0){
            const li = document.createElement('li');
            li.textContent = 'No members found';
            list.appendChild(li);
            return;
        }
        arr.forEach((u) => {
            const li = document.createElement('li');
            li.className = 'py-1';
            let displayText = '';
            if (typeof u === 'string') {
                displayText = toTitleCase(u);
            } else if (u && typeof u === 'object') {
                const nameRaw = u.name || resolveUserName(u) || 'Unknown';
                const typeRaw = u.userType || '';
                const name = toTitleCase(nameRaw);
                const type = toTitleCase(typeRaw);
                displayText = type ? `${name} (${type})` : `${name}`;
            } else {
                displayText = toTitleCase(resolveUserName(u));
            }
            li.textContent = displayText;
            list.appendChild(li);
        });
    }

    function showMembersModal(){
        const el = document.getElementById('membersModal');
        if (!el) return;
        try {
            if (window.bootstrap && window.bootstrap.Modal){
                const m = window.bootstrap.Modal.getOrCreateInstance(el);
                m.show();
            } else if (window.$ && typeof window.$('#membersModal').modal === 'function'){
                window.$('#membersModal').modal('show');
            } else {
                el.style.display = 'block';
            }
        } catch(_){
            el.style.display = 'block';
        }
    }

    async function fetchUserNamesByIds(userIds){
        try{
            const ids = Array.isArray(userIds) ? Array.from(new Set(userIds.map(String))).filter(Boolean) : [];
            if (ids.length === 0) return [];
            const { collection, getDocs, query, where } = await import('https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js');
                    const db = FirebaseChat.db;
            const usersRef = collection(db, 'Users');
            const chunkSize = 10; // Firestore 'in' supports up to 10 values
            const idToInfo = new Map();
            for (let i = 0; i < ids.length; i += chunkSize){
                const chunk = ids.slice(i, i + chunkSize);
                try{
                    const q = query(usersRef, where('__name__', 'in', chunk));
                    const snap = await getDocs(q);
                    snap.forEach((d)=>{
                        const data = d.data() || {};
                        const name = data.name || data.userName || data.displayName || data.full_name || data.email || '';
                        const userType = data.userType || '';
                        idToInfo.set(String(d.id), { name, userType });
                    });
                }catch(_){ /* ignore this chunk on error */ }
            }
            // Preserve order; return objects with name and userType
            return ids.map(id => {
                const info = idToInfo.get(String(id)) || {};
                const name = (info.name && String(info.name).trim()) ? String(info.name) : 'Unknown';
                const userType = info.userType ? String(info.userType) : '';
                return { name, userType };
            });
        }catch(_){
            return [];
        }
    }
    </script>

    <!-- Members Modal (hidden, no changes to existing UI) -->
    <div class="modal fade" id="membersModal" tabindex="-1" aria-labelledby="membersModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="membersModalLabel">Members</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul id="membersList" class="list-unstyled mb-0"></ul>
                </div>
            </div>
        </div>
    </div>
 
    @endsection