@extends('layout.app')
@section('content')
    <style>
        .chat-messages-wrapper {
            height: 400px; /* Fixed height */
            overflow-y: auto;
            background: #f8f8f8; /* Optional: gives visual context */
            padding: 10px;
        }

        .chating-list {
            display: flex;
            flex-direction: column;
            gap: 12px; /* spacing between messages */
        }

        .chating-content p {
            min-height: 20px; /* ensure space even if content is empty */
            margin: 0;
        }
        .user-chat-tabing-list li.active {
            background-color: #f0f4ff;
            border-left: 4px solid #3e94e7;
        }

    </style>
    <meta name="user-id" content="{{ auth()->id() }}">
    <section class="sign-sec">
        <div class="container">
            <div class="row align-items-center">
                <div class="chat-sec p-50">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-4 col-md-12 pr-0">
                                <div class="suggestion-card chat-card" style="height: 628px">
                                    <div class="d-flex">
                                        <h2>Message</h2>
                                        <div class="setting-flex">
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenuButton" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-cog"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="javascript:;">Action</a>
                                                    <a class="dropdown-item" href="javascript:;">Another action</a>
                                                    <a class="dropdown-item" href="javascript:;">Something else here</a>
                                                </div>
                                            </div>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary dropdown-toggle" type="button"
                                                        id="dropdownMenuButton" data-toggle="dropdown"
                                                        aria-haspopup="true" aria-expanded="false">
                                                    <i class="far fa-ellipsis-v"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item" href="javascript:;">Action</a>
                                                    <a class="dropdown-item" href="javascript:;">Another action</a>
                                                    <a class="dropdown-item" href="javascript:;">Something else here</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="user-chat-tabing-list">
                                        @foreach($friendsData as $friendData)
                                            @php
                                                $friend = $friendData->user;
                                                $lastMessage = $friendData->last_message;
                                            @endphp
                                            <li data-friendid="{{ $friend->id }}">
                                                <div class="user-profile chat-user-profile user-chat-image-and-title">
                                                    <div class="user-profile-img">
                                                        <img
                                                            src="{{ $friend->getFirstMediaUrl('profile_image') }}"
                                                            alt="{{ $friend->name }}">
                                                        <div class="user-sign"></div>
                                                    </div>
                                                    <div class="user-profile-content">
                                                        <h6 class="mb-10">{{ $friend->name }}</h6>
                                                        <p class="priamry-para userchat-para">
                                                            {{ $lastMessage ? \Illuminate\Support\Str::limit($lastMessage->message, 30) : 'Say Hi' }}
                                                        </p>
                                                    </div>
                                                    <p class="primary-para chat-time">
                                                        {{ $lastMessage ? $lastMessage->created_at->diffForHumans() : '' }}
                                                    </p>

                                                    @if($lastMessage && $lastMessage->sender_id != auth()->id() && $lastMessage->is_read === 0)
                                                        <span class="chat-noti">1</span>
                                                    @endif
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>

                                </div>
                            </div>

                            <div class="col-lg-8 col-md-12 pl-0">
                                <div class="chat-box-2" style="width: 1000px!important;">
                                    <div class="no-chat-selected text-center py-5" style="display: block;">
                                        <h4>👋 Message a Friend</h4>
                                        <p>Select a user from the left to begin your conversation! Please be respectful
                                            with your words and donot use any abusive language </p>
                                    </div>

                                    <div class="box-61 showfirst" id="chat-view" style="display: none;">
                                        <div class="user-profile chat-user-profile chat-user-profile2 mb-20">
                                            <div class="user-profile-img">
                                                <img style="display: none;" src="#" alt="">
                                                <div style="display: none;" class="user-sign"></div>
                                            </div>
                                            <div class="user-profile-content">
                                                <h6></h6>
                                                <p></p>
                                            </div>
                                        </div>
                                        <div class="chat-messages-wrapper" style="max-height: 400px; overflow-y: auto;">

                                            <ul class="chating-list" id="chat-messages">
                                                <li class="text-center text-muted">
                                                    <div class="user-profile chat-user-profile chating-box">
                                                        <div class="chating-profile-img">
                                                            <img style="display: none;" src="#" alt="">
                                                        </div>
                                                        <div class="chating-content">
                                                            <p style="display: none;"></p>
                                                            <span></span>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="text-center text-muted">
                                                    <div
                                                        class="user-profile chat-user-profile chating-box right-side-chat">
                                                        <div class="chating-content">
                                                            <div>
                                                                <p style="display: none;"></p>
                                                            </div>
                                                            <div>
                                                                <p style="display: none;"></p>
                                                            </div>
                                                            <div>
                                                                <p style="display: none;"></p>
                                                            </div>
                                                            <span></span>
                                                        </div>
                                                        <div class="chating-profile-img">
                                                            <img style="display: none;" src="#" alt="">
                                                        </div>
                                                    </div>
                                                </li>


                                            </ul>
                                        </div>
                                        <div class="chat-field-and-btn">
                                            <div class="chat-field-and-btn-wrap">
                                                <div class="chat-field">
                                                    <input type="hidden" name="receiver_id" data-id="">
                                                    <input type="text" id="message-input" placeholder="Type a Message"
                                                           required>


                                                    <div class="chat-field-icon emoji-icon">
                                                        <i class="far fa-pencil"></i>
                                                    </div>
                                                </div>
                                                <div class="chat-btn">
                                                    <button id="send-btn" class="themeBtn" type="button">Send <i
                                                            class="fab fa-telegram-plane"></i></button>

                                                </div>
                                            </div>
                                            {{--                                            <div class="chat-icons">--}}
                                            {{--                                                <i class="fas fa-smile"></i>--}}
                                            {{--                                                <i class="fas fa-camera"></i>--}}
                                            {{--                                                <i class="far fa-paperclip"></i>--}}
                                            {{--                                            </div>--}}
                                        </div>

                                    </div>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@push('script')
    <script>
        function loadFriendChat(friendLi) {
            // Highlight selected
            document.querySelectorAll('.user-chat-tabing-list li').forEach(li => li.classList.remove('active'));
            friendLi.classList.add('active');

            document.querySelector('.no-chat-selected').style.display = 'none';
            document.getElementById('chat-view').style.display = 'block';

            const friendId = friendLi.getAttribute('data-friendid');
            const friendName = friendLi.querySelector('.user-profile-content h6').textContent.trim();
            const friendImg = friendLi.querySelector('.user-profile-img img').src;

            const receiverInput = document.querySelector('input[name="receiver_id"]');
            receiverInput.setAttribute('data-id', friendId);
            receiverInput.value = friendId;

            const chatHeader = document.querySelector('.chat-box-2 .box-61');
            const chatHeaderImg = chatHeader.querySelector('.chat-user-profile2 .user-profile-img img');
            const chatHeaderName = chatHeader.querySelector('.chat-user-profile2 .user-profile-content h6');
            const chatHeaderStatus = chatHeader.querySelector('.chat-user-profile2 .user-profile-content p');

            if (chatHeaderImg) chatHeaderImg.src = friendImg;
            if (chatHeaderName) chatHeaderName.textContent = friendName;
            if (chatHeaderStatus) chatHeaderStatus.textContent = 'Online';

            chatHeader.classList.remove('d-none');
            chatHeader.classList.add('showfirst');

            fetch(`{{ asset('/chat/messages/') }}/${friendId}`)
                .then(res => res.json())
                .then(messages => {
                    let html = '';

                    messages.forEach(msg => {
                        const paragraphs = msg.message.split('\n').filter(p => p.trim() !== '');
                        if (msg.type === 'left') {
                            html += `
                        <li>
                            <div style="display: flex; gap: 10px;">
                                <div class="chating-profile-img">
                                    <img src="${msg.profile_image}" alt="${msg.name}" style="width: 50px; height: 58px; border-radius: 33px;">
                                </div>
                                <div style="background: #EFEFEF; color: #000; padding: 10px 15px; border-radius: 10px; max-width: 70%; text-align: left;">
                                    <div class="chating-content">
                                        ${paragraphs.map(p => `<p>${p}</p>`).join('')}
                                        <span>${msg.time}</span>
                                    </div>
                                </div>
                            </div>
                        </li>`;
                        } else {
                            html += `
                        <li>
                            <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px;">
                                <div style="background: #3e94e7; color: #fff; padding: 10px 15px; border-radius: 10px; max-width: 70%; text-align: right;">
                                    ${paragraphs.map(p => `<div><p style="margin: 0; color: white!important;">${p}</p></div>`).join('')}
                                    <span style="font-size: 12px; color: #e0e0e0;">${msg.time}</span>
                                </div>
                                <div style="width: 40px; height: 40px; flex-shrink: 0;">
                                    <img src="${msg.profile_image}" alt="${msg.name}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
                                </div>
                            </div>
                        </li>`;
                        }
                    });

                    document.querySelector('.chating-list').innerHTML = html;
                    scrollChatToBottom();
                });
        }
        document.querySelectorAll('.user-chat-tabing-list li').forEach(item => {
            item.addEventListener('click', function () {
                const friendId = this.getAttribute('data-friendid');
                if (friendId) {
                    localStorage.setItem('currentReceiverId', friendId);
                    location.reload();

                }
            });
        });
        window.addEventListener('DOMContentLoaded', function () {
            const storedFriendId = localStorage.getItem('currentReceiverId');
            if (storedFriendId) {
                const friendLi = document.querySelector(`.user-chat-tabing-list li[data-friendid="${storedFriendId}"]`);
                if (friendLi) {
                    loadFriendChat(friendLi);
                }
            }
        });
        document.getElementById('send-btn').addEventListener('click', function () {
            const messageInput = document.getElementById('message-input');
            const receiverInput = document.querySelector('input[name="receiver_id"]');
            const message = messageInput.value.trim();
            const receiverId = receiverInput.value;


            if (message === '') return;

            fetch('{{ route('chat.send') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    message: message,
                    receiver_id: receiverId
                })
            })
                .then(response => response.json())
                .then(msg => {
                    let previousSenderType = null;
                    // Append the new message to chat
                    const paragraphs = msg.message.split('\n').filter(p => p.trim() !== '');

                    const html = `
       <li>
                                                <div  style="display: flex;  gap: 10px;">

                                                    <div class="chating-profile-img">
                <img src="${msg.profile_image}" alt="${msg.name}" style="width: 50px;
    height: 58px;
    border-radius: 33px;">
                                                    </div>
<div style="background: #EFEFEF; color: #fff; padding: 10px 15px; border-radius: 10px; max-width: 70%; text-align: left;">
                                                    <div class="chating-content">
                                                        ${paragraphs.map(p => `<p>${p}</p>`).join('')}
                <span>${msg.time}</span>
                                                    </div>
                                                </div>
</div>
                                            </li>`;
                    document.getElementById('chat-messages').insertAdjacentHTML('beforeend', html);
                    messageInput.value = '';

                    scrollChatToBottom();
                });
        });
        function scrollChatToBottom() {
            const chatWrapper = document.querySelector('.chat-messages-wrapper');
            if (chatWrapper) {
                chatWrapper.scrollTop = chatWrapper.scrollHeight;
            }
        }
    </script>
    <script src="https://js.pusher.com/7.2/pusher.min.js"></script>

    <script>
        Pusher.logToConsole = true;
        var pusher = new Pusher('24f43d89d41e2b9cbce1', {
            cluster: 'ap2'
        });

        const currentUserId = parseInt(document.querySelector('meta[name="user-id"]').content);
        const storedReceiverId = parseInt(localStorage.getItem('currentReceiverId'));
        const receiverId = !isNaN(storedReceiverId) ? storedReceiverId : null;

        if (currentUserId && receiverId) {
            const sortedIds = [currentUserId, receiverId].sort((a, b) => a - b);
            const channel = pusher.subscribe(`chat.${sortedIds[0]}${sortedIds[1]}`);

            channel.bind('message.sent', function (data) {
                const msg = data.message;

                if (msg.sender_id == currentUserId) return;
                if (msg.receiver_id != currentUserId || msg.sender_id != receiverId) {
                    return; // Not intended for this inbox
                }
                const paragraphs = msg.message.split('\n');

                let html = `
        <li>
            <div style="display: flex; justify-content: flex-end; align-items: flex-end; gap: 10px;">
                  <div style="background: #3e94e7; color: #000; padding: 10px 15px; border-radius: 10px; max-width: 70%; text-align: left;">
                    ${paragraphs.map(p => `<div><p style="margin: 0; color: white!important;">${p}</p></div>`).join('')}
                    <span style="font-size: 12px; color: #e0e0e0;">${msg.time}</span>
                </div>
                        <div style="width: 40px; height: 40px; flex-shrink: 0;"><img src="${msg.profile_image}" alt="${msg.name}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;"></div>

            </div>
        </li>`;

                document.getElementById('chat-messages').insertAdjacentHTML('beforeend', html);
                scrollChatToBottom();
            });


        }


    </script>

@endpush