@php
$assetPath = 'frontend_assets';
@endphp
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasChat" aria-labelledby="offcanvasChatLabel" style="width: 500px; max-width: 100%;">
 
    <div class="offcanvas-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-2">
            <h1 class="section-title mb-0">{{ webTrans('chat', 'header') }}</h1>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
 
    <div class="offcanvas-body d-flex flex-column custom-scrollbar bg-white" id="chatContainer">
 
        <div class="chat-feed d-flex flex-column" id="chatFeed">
            <!-- Messages will be loaded here -->
        </div>
 
        <div id="adminAwayAlert" class="chat-message admin-msg mb-4 d-none">
            <small class="text-muted d-block mb-1">Admin</small>
            <div class="msg-bubble away-alert-bubble d-flex align-items-center p-2">
                <img src="{{ asset($assetPath . '/images/warning.png') }}" class="me-1">
                <p class="mb-0 fw-semibold text-danger">Admin is away, will be replied shortly</p>
            </div>
            <span id="awayAlertTime" class="msg-time mt-1"></span>
        </div>
 
    </div>
 
    <div class="offcanvas-footer p-3">
        <div class="input-group align-items-center rounded-3" style="border: 1px solid #dadaf1; box-shadow: 0px 1px 4px 0px #BABABA40; background: #FBFBFB;">
            <input type="text" id="chatMessageInput" class="form-control border-0 bg-transparent shadow-none" placeholder="{{ webTrans('type_your_message', 'header') }}">
            <button id="sendChatMessage" class="btn rounded-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; background-color: #E30613;">
                <img src="{{ asset($assetPath . '/images/Plain3.png') }}">
            </button>
        </div>
    </div>
 
</div>
 
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const chatFeed = document.getElementById('chatFeed');
        const chatContainer = document.getElementById('chatContainer');
        const messageInput = document.getElementById('chatMessageInput');
        const sendBtn = document.getElementById('sendChatMessage');
        const offcanvasChat = document.getElementById('offcanvasChat');
 
        let pollingInterval = null;
 
        // Load messages when offcanvas is shown
        offcanvasChat.addEventListener('shown.bs.offcanvas', function() {
            loadMessages();
            startPolling();
        });
 
        offcanvasChat.addEventListener('hidden.bs.offcanvas', function() {
            stopPolling();
        });
 
        function startPolling() {
            if (pollingInterval) clearInterval(pollingInterval);
            pollingInterval = setInterval(loadMessages, 10000); // Poll every 10 seconds
        }
 
        function stopPolling() {
            if (pollingInterval) {
                clearInterval(pollingInterval);
                pollingInterval = null;
            }
        }
 
        function loadMessages() {
            fetch("{{ route('frontend.chat.messages') }}")
                .then(response => response.json())
                .then(data => {
                    renderMessages(data.messages);
                    updateAdminStatus(data.admin_online);
                });
        }
 
        function updateAdminStatus(isOnline) {
            const awayAlert = document.getElementById('adminAwayAlert');
            const awayAlertTime = document.getElementById('awayAlertTime');
 
            if (isOnline) {
                awayAlert.classList.add('d-none');
            } else {
                // Show away alert
                awayAlert.classList.remove('d-none');
               
                // Update time if not already set or every load
                const now = new Date();
                const timeString = now.toLocaleDateString('en-GB', {
                    day: '2-digit',
                    month: '2-digit',
                    year: 'numeric'
                }).replace(/\//g, '-') + ' ' + now.toLocaleTimeString('en-US', {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                });
                awayAlertTime.innerText = timeString;
            }
        }
 
        function renderMessages(messages) {
            chatFeed.innerHTML = '';
            messages.forEach(msg => {
                const msgHtml = `
                    <div class="chat-message ${msg.is_user ? 'user-msg' : 'admin-msg'} mb-4">
                        ${!msg.is_user ? `<small class="text-muted d-block mb-1">Admin</small>` : ''}
                        <div class="msg-bubble ${msg.is_user ? 'text-end' : ''}">
                            <p class="mb-0 fw-semibold">${msg.message}</p>
                            <span class="msg-time">${msg.time}</span>
                        </div>
                    </div>
                `;
                chatFeed.insertAdjacentHTML('beforeend', msgHtml);
            });
            scrollToBottom();
        }
 
        function scrollToBottom() {
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }
 
        let isSending = false;
        function sendMessage() {
            if (isSending) return;
            const message = messageInput.value.trim();
            if (!message) return;

            isSending = true;
            sendBtn.disabled = true;

            fetch("{{ route('frontend.chat.send') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        message: message
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        messageInput.value = '';
                        loadMessages();
                    }
                    isSending = false;
                    sendBtn.disabled = false;
                })
                .catch(error => {
                    console.error('Error:', error);
                    isSending = false;
                    sendBtn.disabled = false;
                });
        }
 
        sendBtn.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
 
        // Expose a function to send product enquiry
        window.sendProductEnquiry = function(productName, productCode) {
            const text = "Hi, I have an enquiry regarding this product: " + productName + " (Code: " + productCode + ")";
            messageInput.value = text;
 
            // Auto-send it removed to allow user review
            // sendMessage();
 
            // Open the offcanvas if it's not already open
            const instance = bootstrap.Offcanvas.getInstance(offcanvasChat) || new bootstrap.Offcanvas(offcanvasChat);
            instance.show();
        };
    });
</script>