@extends('layouts.app') <!-- Extending the master layout -->

@section('content') <!-- Defining the content section -->
<div class="page-container">
    <div class="row">
        <div class="col-12">
            <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column">
                <div class="flex-grow-1">
                    <h4 class="fs-18 text-uppercase fw-bold m-0">{{ __('messages.chat') }}</h4>
                </div>
            </div><!-- end card header -->
        </div>
    </div> <!-- end row-->
    <div class="row">
       <div class="col">
       <div class="card">
                    <div class="chat d-flex">
                        <div class="offcanvas-xxl offcanvas-start" tabindex="-1" id="chatUserList" aria-labelledby="chatUserListLabel">
                            <div id="chat-user-list" class="collapse collapse-horizontal show">
                                <div class="chat-user-list border-end">
                                  
                                    <!-- Contact list -->
                                    <div class="d-flex flex-column">
                                        <div class="users-list position-relative list-scroll" data-simplebar>

                                            <div class="px-3 py-2">
                                                <div class="app-search py-1">
                                                    <input type="text" class="form-control border-light bg-light bg-opacity-50 rounded-2" placeholder="Search something here...">
                                                    <i class="app-search-icon ti ti-search text-muted fs-16"></i>
                                                </div>
                                            </div>


                                            <div class="d-flex align-items-center px-3 py-2 bg-body-secondary position-sticky top-0 z-1">
                                                <iconify-icon icon="solar:chat-line-bold-duotone" class="fs-18 text-muted"></iconify-icon>
                                                <h5 class="mb-0 ms-1 fw-semibold fs-14">All Messages</h5>
                                            </div><!-- end chat-title -->

                                            <a href="javascript:void(0);" class="text-body d-block">
                                            <div id="chat-user-list-container"></div>

                                            </a><!-- end chat-user -->

                                           
                                          
                                        </div>
                                    </div>
                                    <!-- End Contact list -->
                                </div>
                            </div>
                        </div>

                        <div class="chat-content card border-0 rounded-0 shadow-none mb-0">
                            <div class="card-header py-2 px-3 border-bottom">
                                <div class="d-flex align-items-center justify-content-between py-1">
                                    <div class="d-flex align-items-center gap-2">

                                        <a href="#" class="btn btn-sm btn-icon btn-soft-primary d-none d-xl-flex me-2" data-bs-toggle="collapse" data-bs-target="#chat-user-list" aria-expanded="true">
                                            <i class="ti ti-chevrons-left fs-20"></i>
                                        </a>

                                        <button class="btn btn-sm btn-icon btn-ghost-light text-dark d-xl-none d-flex" type="button" data-bs-toggle="offcanvas" data-bs-target="#chatUserList" aria-controls="chatUserList">
                                            <i class="ti ti-menu-2 fs-20"></i>
                                        </button>

                                        <img src="assets/images/users/avatar-5.jpg" class="avatar-lg rounded-circle" alt="">

                                        <div>
                                            <h5 class="my-0 lh-base">
                                                <a href="#" class="text-reset">James Zavel</a>
                                            </h5>
                                            <p class="mb-0 text-muted">
                                                <small class="ti ti-circle-filled text-success"></small> Active
                                            </p>
                                        </div>
                                    </div>

                                 
                                </div>
                            </div>

                            <div>
                                <div class="chat-scroll p-3" data-simplebar>
                                <ul class="chat-list" id="admin-message-list" data-apps-chat="messages-list">
                                <li class="text-center text-muted py-5" id="no-client-message">
                                    No client selected
                                </li>
                            </ul>

                                </div>

                                <div class="p-3 border-top position-sticky bottom-0 w-100 mb-0">
                                    <form class="row align-items-center g-2" name="chat-form" id="chat-form">

                                     
                                        <div class="col">
                                            <input type="text" name="message" id="message-input" class="form-control" placeholder="Type Message..." required disabled>
                                        </div>

                                        <div class="col-sm-auto">
                                            <div class="d-flex align-items-center gap-1">
                                                <button type="submit" disabled id="send-btn" class="btn btn-icon btn-success"><i class='ti ti-send'></i></button>
                                            </div>
                                        </div> <!-- end col -->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
       </div> 
    </div> <!-- end row-->
</div>
@push('scripts')
<script>
let selectedUserId = null;
let pollingInterval = null;

function startPolling(chatType, userId) {
    if (pollingInterval) clearInterval(pollingInterval);

    pollingInterval = setInterval(() => {
        fetchAndRenderMessages(chatType, userId, false); // no scroll or force
    }, 5000); // every 5 sec
}

function fetchAndRenderMessages(chatType, userId, scrollToBottom = true) {
    fetch(`/coffee/chat/messages/${chatType}/${userId}`)
        .then(res => res.json())
        .then(messages => {
            const messageList = document.getElementById('admin-message-list');
            const noClientMsg = document.getElementById('no-client-message');
            const input = document.getElementById('message-input');
            const sendBtn = document.getElementById('send-btn');

            if (noClientMsg) noClientMsg.remove();

            input.disabled = false;
            sendBtn.disabled = false;

            // Optional: avoid full render if same message count
            if (messageList.children.length === messages.length) return;

            messageList.innerHTML = '';

            if (messages.length === 0) {
                messageList.innerHTML = `<li class="text-center text-muted py-5">No messages yet</li>`;
                return;
            }

            messages.forEach((msg, index) => {
                const isAdmin = msg.sender_type === 'admin';
                const avatar = isAdmin ? 'avatar-1.jpg' : 'avatar-5.jpg';
                const name = isAdmin ? 'You' : msg.user.name || 'Client';

                const messageBubble = `
                    <li class="chat-group ${isAdmin ? 'odd' : ''}" id="msg-${index}">
                        <img src="/assets/images/users/${avatar}" class="avatar-sm rounded-circle" alt="${name}" />
                        <div class="chat-body">
                            <div>
                                <h6 class="d-inline-flex">${name}</h6>
                                <h6 class="d-inline-flex text-muted">${new Date(msg.created_at).toLocaleTimeString()}</h6>
                            </div>
                            <div class="chat-message" style="background-color: ${isAdmin ? '#000' : '#e4e2e2'}; color: ${isAdmin ? '#fff' : '#333'}; padding: 12px 15px; border-radius: 10px;">
                                <p style="margin: 0;">${msg.message}</p>
                            </div>
                        </div>
                    </li>`;
                messageList.innerHTML += messageBubble;
            });

            if (scrollToBottom) {
                messageList.scrollTop = messageList.scrollHeight;
            }
        });
}

function loadAdminMessages(chatType, userId) {
    selectedUserId = userId;
    fetchAndRenderMessages(chatType, userId);
    startPolling(chatType, userId);
}

function loadChatUsers() {
    fetch(`/coffee/chat/users`)
        .then(res => res.json())
        .then(users => {
            const container = document.getElementById('chat-user-list-container');
            container.innerHTML = '';

            users.forEach(user => {
                container.innerHTML += `
                    <a href="javascript:void(0);" class="text-body d-block" onclick="loadAdminMessages('trainer', ${user.user_id})">
                        <div class="chat-users ${user.unread ? 'bg-light-warning' : ''}">
                            <div class="avatar-md chat-avatar-online">
                                <img src="${user.avatar}" class="img-fluid rounded-circle" alt="${user.name}" />
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h5 class="mt-0 mb-0 fs-13">
                                    <span class="float-end text-muted fs-12">${user.time}</span>
                                    ${user.name}
                                </h5>
                                <p class="mt-1 mb-0 text-muted lh-1">
                                    <span class="w-75 d-inline-block text-truncate overflow-hidden">${user.last_message}</span>
                                </p>
                            </div>
                        </div>
                    </a>
                `;
            });
        });
}

document.addEventListener('DOMContentLoaded', loadChatUsers);

document.getElementById('chat-form').addEventListener('submit', function (e) {
    e.preventDefault();

    const input = document.getElementById('message-input');
    const message = input.value.trim();

    if (!message || !selectedUserId) return;

    fetch(`{{ route('coffee.chat.send') }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            chat_type: 'trainer',
            user_id: selectedUserId,
            message: message
        })
    })
    .then(res => res.json())
    .then(response => {
        input.value = '';
        fetchAndRenderMessages('trainer', selectedUserId); // just fetch new msg, don't reset poll
    });
});
</script>
@endpush


@endsection