@extends('layout')

@section('h4-page', __('chats'))

@section('contents')
    {{-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOMlt3d5HO3F2X71XZLf1My4qXYebf6bT0Zqjtf" crossorigin="anonymous"> --}}
    <style>
        /* html,
                    body {
                        overflow: hidden;
                    } */
    </style>
    <div class="chats">
        <div class="row">
            <div class="col-md-4 noti">
                <div class="form-group has-search">
                    <input type="text" class="form-control searchNameChannel" id="searchNameChannel" placeholder=""
                        onchange="allChannelBymember()">
                    <span class="fa fa-search form-control-feedback"></span>
                </div>

                <div id="namelist" class="chatlist">
                    <div class="nameuser text-center">{{ __('No data') }}</div>
                </div>
            </div>

            <div class="col-md-8 m-0 p-0">
                <div class="chatbox h-100" id="chatbox">

                    <div class="chatbox-header d-flex align-items-center">
                        <img src="{{ asset('img/default-profile.png') }}" alt="User Image" id="image-header"
                            class="me-2 border-radius" style="object-fit: cover;width: 50px; height: 50px;">
                        <div id="fullname-header" class="flex-grow-1">{{ __('Full name') }}</div>
                        <input type="hidden" id="channelIdData">
                        <input type="hidden" id="sender">
                    </div>

                    <div id="chatboxDetail" class="chatboxDetail"></div>
                    {{-- <div>
                        <img src="{{ asset('img/image-plus.png') }}" alt="icon">
                        <img src="{{ asset('img/smiley-happy.png') }}" alt="icon">
                    </div> --}}


                    {{-- <div class="chatboxFooter d-flex align-items-center">
                        <textarea class="form-control me-2" id="inputMessageUser" rows="2" placeholder="Type your message..."></textarea>
                        <span class="send-icon" id="sendMessageUser" onclick="sendMessage()">
                            <i class="fas fa-paper-plane"></i>
                        </span>
                    </div> --}}

                    <!-- Preview  -->
                    <div id="previewTray" class="preview-tray" title="Drag & drop images here"></div>
                    <div class="chatboxFooter">
                        <div class="d-flex align-items-center gap-2 mb-2">
                            <!-- ปุ่มเลือกภาพ -->
                            <button type="button" class="btn btn-add-img" id="btnPickImages" title="Add images">
                                <img src="{{ asset('img/image-plus.png') }}" alt="icon" class="img-icon">
                            </button>
                            <div class="emoji-container">
                                <button type="button" class="btn btn-add-img" id="btnEmojiLib">
                                    <img src="{{ asset('img/smiley-happy.png') }}" alt="icon" class="img-icon">
                                </button>
                                <emoji-picker id="emojiLib" class="d-none"></emoji-picker>
                            </div>

                            <input type="file" id="imagePicker" accept="image/*" multiple hidden>
                        </div>
                        <textarea class="form-control input-message flex-grow-1" id="inputMessageUser" rows="2"
                            placeholder='Type your message...'></textarea>
                        <div class="d-flex align-items-center gap-2">
                            <button class="btn btn-send ms-auto d-flex align-items-center gap-2" id="sendMessageUser"
                                onclick="sendMessage()">
                                <span class="spinner-border spinner-border-sm d-none" role="status"></span>
                                <span class="btn-text">{{ __('Send') }}</span>

                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <meta name="_token" content="{{ csrf_token() }}">
    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js"></script>
    <script>
        const btnEmojiLib = document.getElementById('btnEmojiLib');
        const emojiLib = document.getElementById('emojiLib');
        const inputMessageUser = document.getElementById('inputMessageUser');

        // toggle picker
        btnEmojiLib.addEventListener('click', (e) => {
            e.stopPropagation(); // กัน event bubble
            emojiLib.classList.toggle('d-none');
        });

        // เมื่อเลือก emoji
        emojiLib.addEventListener('emoji-click', (e) => {
            inputMessageUser.value += e.detail.unicode;
            // emojiLib.classList.add('d-none'); // ปิดหลังเลือก
        });

        // ปิดเมื่อคลิกนอก picker
        document.addEventListener('click', (e) => {
            if (!emojiLib.contains(e.target) && !btnEmojiLib.contains(e.target)) {
                emojiLib.classList.add('d-none');
            }
        });
    </script>
    <script>
        const MAX_SIZE_MB = 5;
        const MAX_IMAGES = 3;
        const imagePicker = document.getElementById('imagePicker');
        const btnPickImages = document.getElementById('btnPickImages');
        const previewTray = document.getElementById('previewTray');

        // เก็บไฟล์ที่ค้างส่ง
        let pendingFiles = [];
        btnPickImages.addEventListener('click', () => imagePicker.click());
        imagePicker.addEventListener('change', (e) => addFiles([...e.target.files]));

        // Drag & drop ลง previewTray
        // ;['dragenter','dragover'].forEach(evt =>
        //     previewTray.addEventListener(evt, (e) => { e.preventDefault(); previewTray.classList.add('dragover'); })
        // );
        // ;['dragleave','drop'].forEach(evt =>
        //     previewTray.addEventListener(evt, (e) => { e.preventDefault(); previewTray.classList.remove('dragover'); })
        // );
        // previewTray.addEventListener('drop', (e) => {
        //     const files = [...e.dataTransfer.files].filter(f => f.type.startsWith('image/'));
        //     addFiles(files);
        // });

        function addFiles(files) {
            const selected = files.slice(0);
            const rejected = [];

            // ตรวจสอบจำนวนรูปที่มีอยู่แล้ว + รูปใหม่
            const totalAfterAdding = pendingFiles.length + selected.length;

            if (pendingFiles.length >= MAX_IMAGES) {
                Swal.fire('เกินจำนวนที่กำหนด', `สามารถเลือกได้สูงสุด ${MAX_IMAGES} รูปเท่านั้น`, 'warning');
                return;
            }

            if (totalAfterAdding > MAX_IMAGES) {
                const remainingSlots = MAX_IMAGES - pendingFiles.length;
                Swal.fire('เกินจำนวนที่กำหนด', `สามารถเลือกเพิ่มได้อีก ${remainingSlots} รูปเท่านั้น`, 'warning');
                selected.splice(remainingSlots);
            }

            selected.forEach((file) => {
                if (!file.type.startsWith('image/')) {
                    rejected.push(`${file.name}: ไม่ใช่ไฟล์ภาพ`);
                    return;
                }
                if (file.size > MAX_SIZE_MB * 1024 * 1024) {
                    rejected.push(`${file.name}: เกิน ${MAX_SIZE_MB}MB`);
                    return;
                }
                if (pendingFiles.length < MAX_IMAGES) {
                    const id = crypto.randomUUID();
                    const urlObject = URL.createObjectURL(file);
                    pendingFiles.push({
                        file,
                        id,
                        urlObject
                    });
                    renderPreviewItem({
                        id,
                        urlObject
                    });
                }
            });

            if (rejected.length) {
                Swal.fire('ไฟล์ไม่ถูกต้อง', rejected.join('<br>'), 'warning');
            }

            updatePreviewTrayVisibility();
            imagePicker.value = ''; // reset
        }

        function renderPreviewItem({
            id,
            urlObject
        }) {
            const item = document.createElement('div');
            item.className = 'preview-item';
            item.id = `preview-${id}`;
            item.innerHTML = `
                <img src="${urlObject}" alt="preview">
                <div class="remove" title="Remove">&times;</div>
                <div class="bar" id="bar-${id}"></div>
            `;
            item.querySelector('.remove').addEventListener('click', () => removePendingFile(id));
            previewTray.appendChild(item);
        }

        function removePendingFile(id) {
            const idx = pendingFiles.findIndex(f => f.id === id);
            if (idx !== -1) {
                URL.revokeObjectURL(pendingFiles[idx].urlObject);
                pendingFiles.splice(idx, 1);
            }
            const el = document.getElementById(`preview-${id}`);
            if (el) el.remove();
            updatePreviewTrayVisibility();
        }

        function updatePreviewTrayVisibility() {
            if (pendingFiles.length > 0) previewTray.classList.add('active');
            else previewTray.classList.remove('active');
        }
    </script>

    <script>
        let channel_id = document.getElementById("channelIdData").value;
        let sender = '{{ auth()->user()->id }}';
        let chatbox = document.getElementById("chatbox");
        let socket;
        let channelsAll = [];
        let isReconnecting = false;
        // let messageQueue = [];
        const chatboxDetail = document.getElementById("chatboxDetail");
        const observer = new MutationObserver(() => {
            chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
        });

        // observer.observe(chatboxDetail, {
        //     childList: true,
        //     subtree: true
        // });
        // ฟังก์ชัน scroll ไปล่างสุด
        function scrollToBottom() {
            chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
        }

        // ใช้ event โหลดรูป
        chatboxDetail.querySelectorAll("img").forEach(img => {
            img.addEventListener("load", scrollToBottom);
        });

        // เรียกตอนแรกด้วย (เผื่อไม่มีรูป)
        scrollToBottom();


        function templateAllChannel(data) {
            console.log(data)
            const notificationCount = data.not_read > 99 ? '99+' : data.not_read;
            return `
            <div class="nameuser d-flex align-items-center" id="${data.slug}" data-id="${data.slug}" onclick="ChannelById('${data.slug}')"
             style="position: relative;">
            <div>
                <img src="${data.image}" alt="Avatar" class="border-radius" style="width: 50px; height: 50px;">
            </div>
            <div class="w-100 content ms-3 d-flex justify-content-between">
                <div>
                    <p class="username fw-bold mb-1">${data.name}</p>
                    <p class="text-mute text-last-message mb-1 ">${JSON.parse(data.last_message) ?? ''}</p>
                </div>
                
                <p class="time text-muted me-2" style="font-size: 0.85rem;">${data.time}</p>
                ${data.unread ? '<span class="unread-dot"></span>' : ''}
            </div>
            <div style="position: absolute; top:0; right:0;">
                ${data.not_read > 0 ? `<span class="notification" id="chat_count_by_user_getAll">${notificationCount}</span>` : ''}
            </div>
        </div>
            `;
        }


        // Load channels by member
        function allChannelBymember() {
            const name = $('#searchNameChannel').val();
            const url = "/chat/allChannelBymember?user_id=" + sender + (name ? "&name=" + name : "");

            $.ajax({
                url: url,
                type: 'GET',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: (response) => {
                    console.log(response);
                    channelsAll = response.channels;
                    const namelist = document.getElementById("namelist");
                    namelist.innerHTML = '';
                    channelsAll.forEach(element => {
                        namelist.innerHTML += templateAllChannel(element);
                    });
                },
                error: () => {
                    Swal.fire('Error', 'Cannot load channels.', 'error');
                }
            });
        }
        const intervalID = setInterval(checkChannelById, 5000);

        function checkChannelById() {
            const name = $('#searchNameChannel').val();
            const url = "/chat/checkChannelById";
            $.ajax({
                url: url,
                type: 'GET',
                success: (response) => {
                    let chatnamefirst = document.querySelector('.nameuser');
                    if (chatnamefirst.dataset.id != response) {
                        allChannelBymember();
                    }
                },
                error: () => {
                    Swal.fire('Error', 'Cannot load channels.', 'error');
                }
            });
        }

        function ChannelById(id) {
            const selectedChannel = channelsAll.find(element => element.slug === id);
            if (!selectedChannel) return;
            const channelDiv = document.getElementById(id);
            const chatboxHeader = document.querySelector('.chatbox-header');
            const chatboxFooter = document.querySelector('.chatboxFooter');
            const chatboxDetail = document.getElementById('chatboxDetail');
            document.getElementById("chatbox").classList.remove("d-none");
            chatboxFooter.classList.add('active');
            chatboxHeader.classList.add('active');
            chatboxDetail.classList.remove('no-chat');
            chatboxDetail.classList.add('active-chat');
            // document.getElementById("chatbox").classList.remove("d-none");
            document.getElementById("image-header").src = selectedChannel.image;
            document.getElementById("fullname-header").textContent = selectedChannel.name;
            channel_id = id;
            $.ajax({
                url: '{{ route('chat.readAllUser') }}',
                type: 'POST',
                data: {
                    'id': id,
                    '_token': '{{ csrf_token() }}',
                },
                success: (response) => {
                    const chat_count = channelDiv.querySelector("#chat_count_by_user_getAll");
                    if (chat_count) {
                        chat_count.remove();
                    }

                },
                error: (error) => {
                    console.error(error);
                }
            });

            if (socket && socket.readyState === WebSocket.OPEN) {
                joinChannel();
            } else {
                initializeSocket();
            }
        }


        function initializeSocket() {
            socket = new WebSocket('{{ env('APP_CHAT_SOCKET') }}');

            socket.onopen = () => {
                console.log('WebSocket connected');
                joinChannel();
                // processMessageQueue();
            };

            socket.onmessage = (event) => handleSocketMessage(JSON.parse(event.data));

            socket.onerror = (error) => console.error('WebSocket error:', error);

            socket.onclose = () => {
                console.log('WebSocket closed. Attempting to reconnect...');
                if (!isReconnecting) {
                    isReconnecting = true;
                    setTimeout(() => initializeSocket(), 3000);
                }
            };
        }


        function joinChannel() {
            const joinMessage = {
                type: 'join',
                channel_id: channel_id,
                sender: sender
            };
            socket.send(JSON.stringify(joinMessage));
            isReconnecting = false;
        }


        function handleSocketMessage(data) {
            console.log('handleSocketMessage', data);
            let datenow = new Date();
            let datetemp = '';
            let message = 'today';

            if (data.history) {
                chatboxDetail.innerHTML = '';
                data.history.forEach((msg) => {
                    var simple_date = msg.created ? new Date(msg.created) : new Date();
                    if (formatDate(simple_date) != datetemp) {
                        message = formatDateMessage(formatDate(simple_date));
                        checkMessageDay(message);
                        displayMessage(msg.message, msg.seed, msg.type2, msg)
                        datetemp = formatDate(simple_date);
                    } else {
                        displayMessage(msg.message, msg.seed, msg.type2, msg)
                    }
                });
                chatboxDetail.querySelectorAll("img").forEach(img => {
                    img.addEventListener("load", scrollToBottom);
                });
                scrollToBottom();
            } else if (data.sender && (data.message || data.group_id)) {
                if (data.channel_id == channel_id) {
                    displayMessage(data.message, data.seed, (data.group_id ? 'image' : 'text') ?? 'text', data);
                    chatboxDetail.querySelectorAll("img").forEach(img => {
                        img.addEventListener("load", scrollToBottom);
                    });
                    scrollToBottom();
                } else {
                    allChannelBymember();
                }

            } else if (data.error) {
                console.error(data.error);
            }
        }

        function formatDate(date) {
            const day = date.getDate();
            const month = date.getMonth() + 1;
            const year = date.getFullYear();
            return `${year}-${month}-${day}`;
        }

        function formatTime24Hour(date) {
            const hours = date.getHours();
            const minutes = date.getMinutes();

            // Add leading zero if hours or minutes are less than 10
            const formattedHours = hours < 10 ? `0${hours}` : hours;
            const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes;

            return `${formattedHours}:${formattedMinutes}`;
        }

        function formatDateMessage(input) {
            console.log('input', input)
            const [year, month, day] = input.split('-');
            const date = new Date(year, month - 1, day);
            const today = new Date();

            // รีเซ็ตเวลาให้เป็นเที่ยงคืน (เพื่อเช็คเฉพาะวันที่)
            today.setHours(0, 0, 0, 0);
            date.setHours(0, 0, 0, 0);

            // สร้าง yesterday
            const yesterday = new Date(today);
            yesterday.setDate(today.getDate() - 1);

            if (date.getTime() === today.getTime()) {
                return "today";
            } else if (date.getTime() === yesterday.getTime()) {
                return "yesterday";
            } else {
                console.log(date)
                // ใช้ Intl.DateTimeFormat เพื่อฟอร์แมทเป็น 6 Sep 2025
                let local = '{{ app()->getLocale() }}';
                local = local == 'th' ? 'th-TH' : 'en-GB';
                return new Intl.DateTimeFormat(local, {
                    day: "numeric",
                    month: "short",
                    year: "numeric"
                }).format(date);
            }
        }

        function checkMessageDay(message) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('d-flex');
            messageDiv.classList.add('justify-content-center');
            const messageContent = document.createElement('div');
            messageContent.textContent = message;
            messageContent.classList.add('time-text');
            messageDiv.appendChild(messageContent);
            chatboxDetail.appendChild(messageDiv);
        }

        function displayMessage(message, seed, type = 'text', msg) {
            let datenow = new Date();
            if (type == 'text') {
                const messageDiv = document.createElement('div');
                messageDiv.classList.add('message', 'd-flex', seed === 1 ? 'justify-content-end' : 'justify-content-start');
                if (msg.status == 0) {
                    const messageContent = document.createElement('div');
                    messageContent.setAttribute('data-id', msg.id);
                    messageContent.classList.add(seed === 1 ? 'my-message' : 'their-message');
                    messageContent.classList.add('cancel-message');
                    messageContent.textContent = 'You has unsend message.';
                    messageContent.style.textAlign = 'center';
                    messageContent.style.width = 'max-content';
                    messageContent.style.padding = '0 15px';
                    messageContent.style.fontWeight = '300';
                    messageContent.style.fontSize = '12px';
                    messageContent.style.borderRadius = '10px';
                    messageDiv.classList.remove('justify-content-end', 'justify-content-start');
                    messageDiv.classList.add('justify-content-center');
                    messageDiv.appendChild(messageContent);
                    chatboxDetail.appendChild(messageDiv);
                    chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
                } else {
                    const messageContent = document.createElement('div');
                    messageContent.setAttribute('data-id', msg.id);
                    messageContent.classList.add(seed === 1 ? 'my-message' : 'their-message');
                    messageContent.textContent = message;

                    if (seed === 1) {
                        const messageFooter = document.createElement('div');
                        messageFooter.classList.add('message-footer', 'd-flex', 'flex-column', 'align-items-end',
                            'justify-content-end', seed === 1 ?
                            'justify-content-end' : 'justify-content-start');
                        // เวลา
                        const timeSpan = document.createElement('span');
                        timeSpan.classList.add('message-time');
                        timeSpan.textContent = msg.created ? formatTime24Hour(new Date(msg.created)) : formatTime24Hour(
                            datenow);
                        // จุดสามจุด
                        const menuDots = document.createElement('span');
                        menuDots.classList.add('message-menu');
                        menuDots.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="gray" viewBox="0 0 16 16">
                        <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                    </svg>
                    `;
                        menuDots.addEventListener('click', (e) => {
                            e.stopPropagation();
                            showContextMenu(e, msg.id);
                        });

                        messageFooter.appendChild(menuDots);
                        messageFooter.appendChild(timeSpan);
                        messageDiv.appendChild(messageFooter);
                        messageDiv.appendChild(messageContent);
                    } else {
                        // เวลา
                        const timeSpan = document.createElement('span');
                        timeSpan.classList.add('message-time');
                        timeSpan.textContent = msg.created ? formatTime24Hour(new Date(msg.created)) : formatTime24Hour(
                            datenow);
                        const messageFooter = document.createElement('div');
                        messageFooter.classList.add('message-footer', 'd-flex', 'flex-column', 'align-items-end',
                            'justify-content-end', seed === 1 ?
                            'justify-content-end' : 'justify-content-start');
                        messageDiv.appendChild(messageContent);

                        messageFooter.appendChild(timeSpan);
                        messageDiv.appendChild(messageFooter);

                    }


                    chatboxDetail.appendChild(messageDiv);
                    chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
                    // handleEvnetClickMyMessage();
                }
            } else {
                if (Array.isArray((msg.file_url ?? msg.items))) {
                    const messageDiv = document.createElement('div');
                    messageDiv.classList.add('d-flex');
                    let isFirstImage = true;

                    // ตรวจสอบว่ามี unsent message หรือไม่
                    const hasUnsent = msg.items.some(element => element.status == 0);

                    if (hasUnsent) {
                        msg.items.some(element => {
                            if (element.status == 0) {
                                const messageContent = document.createElement('div');
                                messageDiv.classList.add('message', 'd-flex', element.seed === 1 ?
                                    'justify-content-end' : 'justify-content-start');
                                messageContent.classList.add(element.seed === 1 ? 'my-message' : 'their-message');
                                messageContent.classList.add('cancel-message');
                                messageContent.textContent = 'You has unsend message.';
                                messageContent.style.textAlign = 'center';
                                messageContent.style.width = 'max-content';
                                messageContent.style.padding = '0 15px';
                                messageContent.style.fontWeight = '300';
                                messageContent.style.fontSize = '12px';
                                messageContent.style.borderRadius = '10px';
                                messageDiv.classList.remove('justify-content-end', 'justify-content-start');
                                messageDiv.classList.add('justify-content-center');

                                messageDiv.appendChild(messageContent);
                                chatboxDetail.appendChild(messageDiv);
                                chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
                                return true;
                            }
                        });
                    } else {
                        // กรองเฉพาะรูปที่ไม่ได้ถูก unsend
                        const validImages = msg.items.filter(element => element.status !== 0);
                        const totalImages = validImages.length;

                        // สร้าง array ของ URL รูปภาพสำหรับ modal
                        const imageUrls = validImages.map(element => element.file_url);

                        messageDiv.classList.add('message', 'd-flex', validImages[0].seed === 1 ?
                            'justify-content-end' : 'justify-content-start');

                        const messageContent = document.createElement('div');
                        messageContent.classList.add('img')
                        messageContent.classList.add(validImages[0].seed === 1 ? 'my-message' : 'their-message');
                        messageContent.setAttribute('data-group-id', msg.group_id);

                        // สร้าง container สำหรับรูปภาพ
                        const imageContainer = document.createElement('div');

                        if (totalImages === 1) {
                            // แสดงรูปเดี่ยว
                            imageContainer.style.display = 'block';
                            const messageImage = document.createElement('img');
                            messageImage.src = validImages[0].file_url;
                            messageImage.classList.add('img-doc');
                            messageImage.style.borderRadius = '10px';
                            messageImage.style.cursor = 'pointer';
                            messageImage.addEventListener('click', () => {
                                openImageModal(validImages[0].file_url);
                            });

                            imageContainer.appendChild(messageImage);
                        } else if (totalImages === 2) {
                            // แสดง 2 รูปในแถวเดียว
                            imageContainer.style.display = 'flex';
                            imageContainer.style.gap = '4px';
                            validImages.forEach((element, index) => {
                                const messageImage = document.createElement('img');
                                messageImage.src = element.file_url;
                                messageImage.classList.add('img-doc');
                                messageImage.style.borderRadius = '10px';
                                messageImage.style.cursor = 'pointer';
                                messageImage.addEventListener('click', () => {
                                    openImageModal(element.file_url, imageUrls, index);
                                });
                                imageContainer.appendChild(messageImage);
                            });
                        } else if (totalImages >= 3) {
                            // แสดงแบบ grid สำหรับ 3 รูปขึ้นไป
                            imageContainer.style.display = 'grid';
                            imageContainer.style.gap = '4px';
                            if (totalImages % 2 === 1) {
                                // จำนวนคี่: 2 รูปบนแถวแรก, ที่เหลือแถวล่าง
                                imageContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
                                // รูป 2 รูปแรกในแถวบน
                                for (let i = 0; i < 2 && i < totalImages; i++) {
                                    const messageImage = document.createElement('img');
                                    messageImage.src = validImages[i].file_url;
                                    messageImage.classList.add('img-doc');
                                    messageImage.style.width = '100%';
                                    messageImage.style.height = '150px';
                                    messageImage.style.objectFit = 'cover';
                                    messageImage.style.borderRadius = '10px';
                                    messageImage.style.cursor = 'pointer';
                                    messageImage.addEventListener('click', () => {
                                        openImageModal(validImages[i].file_url, imageUrls, i);
                                    });
                                    imageContainer.appendChild(messageImage);
                                }
                                // รูปที่เหลือในแถวล่าง
                                if (totalImages > 2) {
                                    const bottomRowContainer = document.createElement('div');
                                    bottomRowContainer.style.gridColumn = '1 / -1';
                                    bottomRowContainer.style.display = 'flex';
                                    bottomRowContainer.style.gap = '4px';

                                    const remainingImages = totalImages - 2;
                                    const imageWidth = `${100 / remainingImages}%`;

                                    for (let i = 2; i < totalImages; i++) {
                                        const messageImage = document.createElement('img');
                                        messageImage.src = validImages[i].file_url;
                                        messageImage.classList.add('img-doc');
                                        messageImage.style.width = imageWidth;
                                        messageImage.style.height = '150px';
                                        messageImage.style.objectFit = 'cover';
                                        messageImage.style.borderRadius = '10px';
                                        messageImage.style.cursor = 'pointer';
                                        messageImage.addEventListener('click', () => {
                                            openImageModal(validImages[i].file_url, imageUrls, i);
                                        });
                                        bottomRowContainer.appendChild(messageImage);
                                    }

                                    imageContainer.appendChild(bottomRowContainer);
                                }
                            } else {
                                // จำนวนคู่: แสดงแบบ grid 2 คอลัมน์
                                imageContainer.style.gridTemplateColumns = 'repeat(2, 1fr)';
                                validImages.forEach((element, index) => {
                                    const messageImage = document.createElement('img');
                                    messageImage.src = element.file_url;
                                    messageImage.classList.add('img-doc');
                                    messageImage.style.width = '100%';
                                    messageImage.style.height = '150px';
                                    messageImage.style.objectFit = 'cover';
                                    messageImage.style.borderRadius = '10px';
                                    messageImage.style.cursor = 'pointer';
                                    messageImage.addEventListener('click', () => {
                                        openImageModal(element.file_url, imageUrls, index);
                                    });
                                    imageContainer.appendChild(messageImage);
                                });
                            }
                        }

                        messageContent.appendChild(imageContainer);
                        if (validImages[0].seed === 1) {
                            const messageFooter = document.createElement('div');
                            messageFooter.classList.add('message-footer', 'd-flex', 'flex-column', 'align-items-center',
                                validImages[0].seed === 1 ? 'justify-content-end' : 'justify-content-start');
                            // เวลา
                            const timeSpan = document.createElement('span');
                            timeSpan.classList.add('message-time');
                            timeSpan.textContent = msg.created ? formatTime24Hour(new Date(msg.created)) : formatTime24Hour(
                                datenow);

                            const menuDots = document.createElement('span');
                            menuDots.classList.add('message-menu');
                            menuDots.innerHTML = `
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="gray" viewBox="0 0 16 16">
                                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                                </svg>
                            `;
                            menuDots.addEventListener('click', (e) => {
                                e.stopPropagation();
                                showContextMenu(e, validImages[0].id, msg.group_id);
                            });
                            messageFooter.appendChild(menuDots);
                            messageFooter.appendChild(timeSpan);
                            messageDiv.appendChild(messageFooter);
                            messageDiv.appendChild(messageContent);
                        } else {
                            const timeSpan = document.createElement('span');
                            timeSpan.classList.add('message-time');
                            timeSpan.textContent = msg.created ? formatTime24Hour(new Date(msg.created)) : formatTime24Hour(
                                datenow);
                            const messageFooter = document.createElement('div');
                            messageFooter.classList.add('message-footer', 'd-flex', 'flex-column', 'align-items-end',
                                'justify-content-end', seed === 1 ?
                                'justify-content-end' : 'justify-content-start');
                            messageDiv.appendChild(messageContent);

                            messageFooter.appendChild(timeSpan);
                            messageDiv.appendChild(messageFooter);
                        }

                        chatboxDetail.appendChild(messageDiv);
                        chatboxDetail.scrollTop = chatboxDetail.scrollHeight;
                    }
                } else {

                }
            }
        }

        function openImageModal(imageUrl, imageUrls = [], currentIndex = 0) {
            let index = currentIndex;

            const modal = document.createElement('div');
            modal.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.9);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            `;

            // ปุ่มปิด (Close)
            const closeBtn = document.createElement('span');
            closeBtn.innerHTML = '&times;';
            closeBtn.style.cssText = `
                position: absolute;
                top: 15px;
                right: 25px;
                color: white;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            `;
            closeBtn.addEventListener('click', () => document.body.removeChild(modal));
            modal.appendChild(closeBtn);

            // ปุ่ม Prev
            const prevBtn = document.createElement('span');
            prevBtn.innerHTML = '&#10094;';
            prevBtn.style.cssText = `
                position: absolute;
                top: 50%;
                left: 20px;
                color: white;
                font-size: 30px;
                font-weight: bold;
                cursor: pointer;
                user-select: none;
                transform: translateY(-50%);
            `;
            prevBtn.addEventListener('click', showPrevImage);
            modal.appendChild(prevBtn);

            // ปุ่ม Next
            const nextBtn = document.createElement('span');
            nextBtn.innerHTML = '&#10095;';
            nextBtn.style.cssText = `
                position: absolute;
                top: 50%;
                right: 20px;
                color: white;
                font-size: 30px;
                font-weight: bold;
                cursor: pointer;
                user-select: none;
                transform: translateY(-50%);
            `;
            nextBtn.addEventListener('click', showNextImage);
            modal.appendChild(nextBtn);

            // element รูป
            const img = document.createElement('img');
            img.src = imageUrl;
            img.style.cssText = `
                max-width: 90%;
                max-height: 90%;
                object-fit: contain;
                border-radius: 10px;
            `;
            modal.appendChild(img);

            document.body.appendChild(modal);

            // ฟังก์ชันเปลี่ยนรูป
            function showImage(i) {
                index = i;
                img.src = imageUrls[index];
            }

            function showPrevImage() {
                if (imageUrls.length > 1) {
                    index = (index - 1 + imageUrls.length) % imageUrls.length;
                    showImage(index);
                }
            }

            function showNextImage() {
                if (imageUrls.length > 1) {
                    index = (index + 1) % imageUrls.length;
                    showImage(index);
                }
            }

            // ใช้ปุ่มคีย์บอร์ดเลื่อน
            document.addEventListener('keydown', keyHandler);

            function keyHandler(e) {
                if (e.key === "ArrowLeft") showPrevImage();
                if (e.key === "ArrowRight") showNextImage();
                if (e.key === "Escape") document.body.removeChild(modal);
            }

            // ลบ event ตอนปิด modal
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    document.body.removeChild(modal);
                    document.removeEventListener('keydown', keyHandler);
                }
            });
        }


        function showContextMenu(e, messageId, groupId = null) {
            const oldMenu = document.querySelector('.context-menu');
            if (oldMenu) oldMenu.remove();
            const menu = document.createElement('div');
            menu.classList.add('context-menu');
            if (groupId) {
                menu.innerHTML = `
            <div class="context-item" data-id="${groupId}">
                <span>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="8" cy="8" r="7.5" stroke="#CC0000"/>
                        <path d="M11.5 9.866V9.4C11.5 8.627 10.873 8 10.1 8H5.434M6.834 9.867L5.297 8.33a.5.5 0 010-.66L6.834 6.133"
                            stroke="#CC0000" stroke-linecap="round"/>
                    </svg>
                    Unsend Message
                </span>
            </div>`;
            } else {
                menu.innerHTML = `
            <div class="context-item" data-id="${messageId}">
                <span>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="8" cy="8" r="7.5" stroke="#CC0000"/>
                        <path d="M11.5 9.866V9.4C11.5 8.627 10.873 8 10.1 8H5.434M6.834 9.867L5.297 8.33a.5.5 0 010-.66L6.834 6.133"
                            stroke="#CC0000" stroke-linecap="round"/>
                    </svg>
                    Unsend Message
                </span>
            </div>`;
            }


            const footer = e.currentTarget.closest('.message-footer');
            footer.appendChild(menu);
            if (groupId) {
                menu.querySelector('.context-item').addEventListener('click', (ev) => {
                    ev.stopPropagation();
                    handleEvnetClickMyMessage(groupId);
                    menu.remove();
                });
            } else {
                menu.querySelector('.context-item').addEventListener('click', (ev) => {
                    ev.stopPropagation();
                    handleEvnetClickMyMessages(messageId);
                    menu.remove();
                });
            }
            document.addEventListener('click', () => menu.remove(), {
                once: true
            });
        }

        function setLoading(isLoading) {
            const btn = document.getElementById('sendMessageUser');
            const spinner = btn.querySelector('.spinner-border');
            if (isLoading) {
                btn.disabled = true;
                spinner.classList.remove('d-none');
            } else {
                btn.disabled = false;
                spinner.classList.add('d-none');
            }
        }

        function sendMessage() {
            const messageInput = document.getElementById('inputMessageUser');
            const message = messageInput.value.trim();
            console.log('ข้อความ ', message);
            console.log(pendingFiles);
            setLoading(true);
            if (message) {
                const messageData = {
                    channel_id: channel_id,
                    sender: sender,
                    message: message || null,
                    seed: 1,
                    type: 'message',
                    file_url: null,
                    type2: 'text' // type : { text , image , video , file , link }
                };

                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(JSON.stringify(messageData));
                } else {
                    // messageQueue.push(messageData);
                    if (!isReconnecting) initializeSocket();
                }
                messageInput.value = '';
            }

            if (pendingFiles.length > 0) {
                let formDataImage = new FormData();
                pendingFiles.forEach(file => {
                    formDataImage.append('files[]', file.file);
                })
                formDataImage.append('folder', 'chat');
                $.ajax({
                    url: '/api/chat/uploads',
                    type: 'POST',
                    data: formDataImage,
                    contentType: false,
                    processData: false,
                    success: (response) => {
                        if (response.ok) {
                            const items = response.items.map(u => ({
                                'type2': 'image',
                                'file_url': u.public_url,
                                'seed': 1
                            }));
                            // const items = [{'type2': 'image', file_url: "https://cleanmate-bangkok.s3.ap-southeast-1.amazonaws.com/chat/nextjs-icon-svgrepo-com-15fee3a5-38a9-4db3-8aa9-e0ac78d0e7b3.png", seed: 1}
                            //     ,{'type2': 'image', file_url: "https://cleanmate-bangkok.s3.ap-southeast-1.amazonaws.com/chat/480681653-1679410849339758-4607075941775454276-n-bcffbed1-d086-4515-a9fd-265b55808db5.jpeg", seed: 1}
                            // ]
                            const messageData = {
                                channel_id: channel_id,
                                sender: sender,
                                message: null,
                                items: items,
                                seed: 1,
                                type: 'message',
                                // type2: 'image' // type : { text , image , video , file , link }
                            };

                            if (socket.readyState === WebSocket.OPEN) {
                                socket.send(JSON.stringify(messageData));
                            } else {
                                // messageQueue.push(messageData);
                                console.log("Socket not connected. Queueing message...", !isReconnecting);
                                if (!isReconnecting) initializeSocket();
                            }
                            pendingFiles = [];
                            $('#previewTray').html('');
                            updatePreviewTrayVisibility();
                            setTimeout(() => {
                                setLoading(false);
                            }, 200);
                        }
                    },
                    error: (error) => {
                        console.error(error);
                        setTimeout(() => {
                            setLoading(false);
                        }, 200);

                    }
                });
            } else {
                setTimeout(() => {
                    setLoading(false);
                }, 200);

            }
        }



        // function processMessageQueue() {
        //     while (messageQueue.length > 0) {
        //         socket.send(JSON.stringify(messageQueue.shift()));
        //     }
        // }


        document.getElementById("inputMessageUser").addEventListener("keypress", function(event) {
            if (event.key === "Enter") {
                if (event.shiftKey) {

                } else {
                    event.preventDefault();
                    sendMessage();
                }
            }
        });

        document.addEventListener("DOMContentLoaded", () => {
            allChannelBymember();
            initializeSocket();
        });

        function handleEvnetClickMyMessages(messageId) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want cancel message ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "api/chat/cancelMessage",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            chat_channel_id: channel_id,
                            message_id: messageId,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then(() => {
                                const msgEl = document.querySelector(
                                    `[data-id="${messageId}"]`);
                                if (msgEl) {
                                    const messageDiv = msgEl.closest('.message');
                                    msgEl.classList.add('cancel-message');
                                    msgEl.textContent = 'You has unsend message.';
                                    msgEl.style.textAlign = 'center';
                                    msgEl.style.width = 'max-content';
                                    msgEl.style.padding = '0 15px';
                                    msgEl.style.fontWeight = '300';
                                    msgEl.style.fontSize = '12px';
                                    msgEl.style.borderRadius = '10px';
                                    if (messageDiv) {
                                        messageDiv.classList.remove('justify-content-end',
                                            'justify-content-start');
                                        messageDiv.classList.add('justify-content-center');
                                        const messageFooter = messageDiv.querySelector(
                                            '.message-footer');
                                        if (messageFooter) {
                                            messageFooter.remove();
                                        }
                                    }
                                }
                            });
                        },
                        error: function() {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            });
        }

        function handleEvnetClickMyMessage(group_id) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want cancel message group ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "api/chat/cancelMessageByGroupId",
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            chat_channel_id: channel_id,
                            group_id: group_id,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then(() => {
                                // Find all message elements with this group_id
                                document.querySelectorAll(`[data-group-id="${group_id}"]`)
                                    .forEach(msgEl => {
                                        const messageDiv = msgEl.closest('.message');
                                        msgEl.classList.add('cancel-message');
                                        msgEl.classList.remove('my-message',
                                            'their-message', 'img');
                                        msgEl.innerHTML = 'You has unsend message.';
                                        msgEl.style.textAlign = 'center';
                                        msgEl.style.width = 'max-content';
                                        msgEl.style.padding = '0 15px';
                                        msgEl.style.fontWeight = '300';
                                        msgEl.style.fontSize = '12px';
                                        msgEl.style.borderRadius = '10px';
                                        msgEl.style.background = '#EBEBEB';
                                        msgEl.style.color = '#AAAAAA';
                                        if (messageDiv) {
                                            messageDiv.classList.remove(
                                                'justify-content-end',
                                                'justify-content-start');
                                            messageDiv.classList.add(
                                                'justify-content-center');
                                            const messageFooter = messageDiv.querySelector(
                                                '.message-footer');
                                            if (messageFooter) {
                                                messageFooter.remove();
                                            }
                                        }
                                    });
                            });
                        },
                        error: function() {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            });
        }
    </script>
@endsection