@extends('staff.layout')

@section('content')

{{-- <div class="chat-body-container">
    <div class="chat-messages" id="chat-messages">
        @foreach($messages as $msg)
            <div class="message {{ $msg->staff_id ? 'sent' : 'received' }}">
                <div class="message-content">
                    {{ $msg->message }}
                </div>
                <div class="message-meta">
                    <span>{{ \Carbon\Carbon::parse($msg->timestamp)->format('h:i A') }}</span>
                </div>
            </div>
        @endforeach
    </div>

    <div class="chat-input-area">
        <input type="text" id="message-input" placeholder="Type a message...">
        <button id="send-button">
            <i class="fas fa-paper-plane"></i>
            <span id="sending-indicator" class="hidden">Sending...</span>
        </button>
    </div>
</div> --}}


<div class="chat-body-container" data-recipient="{{ $lead->phone }}">
    <div class="chat-messages" id="chat-messages">
        @foreach($messages as $msg)
            <div class="message {{ $msg->staff_id ? 'sent' : 'received' }}">
                <div class="message-content">
                    {{ $msg->message }}
                </div>
                <div class="message-meta">
                    <span>{{ \Carbon\Carbon::parse($msg->timestamp)->format('h:i A') }}</span>
                </div>
            </div>
        @endforeach
    </div>

    <div class="chat-input-area">
        <input type="text" id="message-input" placeholder="Type a message...">
        <button id="send-button">
            <i class="fas fa-paper-plane"></i>
            <span id="sending-indicator" class="hidden">Sending...</span>
        </button>
    </div>
</div>

<style>
    /* New container for alignment */
    .chat-body-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 120px); /* Adjust based on your header/footer height */
        max-width: 700px;
        width: 100%;
        margin: 0 auto; /* This centers the chat body horizontally */
        background-color: #e5ddd5;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    /* Rest of the styles are unchanged but are now correctly scoped */
    .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .message {
        display: flex;
        max-width: 75%;
        flex-direction: column;
        padding: 8px 12px;
        border-radius: 18px;
        font-size: 14px;
        position: relative;
        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    }

    .message.sent {
        background-color: #dcf8c6;
        align-self: flex-end;
        border-top-right-radius: 4px;
    }

    .message.received {
        background-color: #fff;
        align-self: flex-start;
        border-top-left-radius: 4px;
    }

    .message-content {
        word-wrap: break-word;
        color: #111b21;
    }

    .message-meta {
        font-size: 10px;
        color: #888;
        margin-top: 4px;
        align-self: flex-end;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .chat-input-area {
        display: flex;
        padding: 10px;
        background-color: #f0f0f0;
        border-top: 1px solid #ccc;
    }

    .chat-input-area input {
        flex: 1;
        padding: 10px 15px;
        border: none;
        border-radius: 20px;
        font-size: 16px;
        outline: none;
    }

    .chat-input-area button {
        background-color: #075e54;
        color: white;
        border: none;
        border-radius: 50%;
        width: 44px;
        height: 44px;
        margin-left: 10px;
        cursor: pointer;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }

    .chat-input-area button:hover {
        background-color: #054c44;
    }

    .hidden {
        display: none;
    }

    /* --- MOBILE RESPONSIVENESS --- */
    @media (max-width: 768px) {
        .chat-body-container {
            /* Full width on smaller screens */
            width: 100%;
            max-width: none;
            height: 100vh; /* Takes full height on mobile */
            border-radius: 0;
            box-shadow: none;
        }

        .chat-messages {
            padding-bottom: 70px; /* Add space for the fixed input area */
        }
    }
</style>

{{-- <script>
    document.addEventListener('DOMContentLoaded', () => {
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const sendingIndicator = document.getElementById('sending-indicator');

        function addMessage(text, isSent) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(isSent ? 'sent' : 'received');

            const content = document.createElement('div');
            content.classList.add('message-content');
            content.textContent = text;

            const meta = document.createElement('div');
            meta.classList.add('message-meta');

            const timestampSpan = document.createElement('span');
            const now = new Date();
            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            timestampSpan.textContent = timeString;
            
            meta.appendChild(timestampSpan);
            
            messageDiv.appendChild(content);
            messageDiv.appendChild(meta);
            chatMessages.appendChild(messageDiv);
            
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        async function sendMessage() {
            const messageText = messageInput.value.trim();
            if (messageText === '') return;

            addMessage(messageText, true);

            messageInput.value = '';
            sendButton.disabled = true;
            sendingIndicator.classList.remove('hidden');

            try {
                // This is where you'd make your actual AJAX call.
                await new Promise(resolve => setTimeout(resolve, 1000));
                
                sendingIndicator.classList.add('hidden');
                sendButton.disabled = false;
                
            } catch (error) {
                console.error('Error sending message:', error);
                sendingIndicator.textContent = 'Failed!';
                setTimeout(() => {
                    sendingIndicator.textContent = 'Sending...';
                    sendingIndicator.classList.add('hidden');
                    sendButton.disabled = false;
                }, 2000);
            }
        }

        sendButton.addEventListener('click', sendMessage);

        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

      
    });
</script> --}}

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const chatBodyContainer = document.querySelector('.chat-body-container');
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const sendingIndicator = document.getElementById('sending-indicator');

        // Get the recipient's phone number from the data attribute
        const recipientPhoneNumber = chatBodyContainer.dataset.recipient;

        function addMessage(text, isSent) {
            const messageDiv = document.createElement('div');
            messageDiv.classList.add('message');
            messageDiv.classList.add(isSent ? 'sent' : 'received');

            const content = document.createElement('div');
            content.classList.add('message-content');
            content.textContent = text;

            const meta = document.createElement('div');
            meta.classList.add('message-meta');

            const timestampSpan = document.createElement('span');
            const now = new Date();
            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            timestampSpan.textContent = timeString;

            meta.appendChild(timestampSpan);

            messageDiv.appendChild(content);
            messageDiv.appendChild(meta);
            chatMessages.appendChild(messageDiv);

            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        async function sendMessage() {
            const messageText = messageInput.value.trim();
            if (messageText === '') return;

            // Add the message to the UI instantly
            addMessage(messageText, true);

            messageInput.value = '';
            sendButton.disabled = true;
            sendingIndicator.classList.remove('hidden');

            try {
                // Make the AJAX call to your Laravel backend
                const response = await fetch('/api/whatsapp/send-message', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                    },
                    body: JSON.stringify({
                        recipient: recipientPhoneNumber,
                        message: messageText
                    })
                });

                if (!response.ok) {
                    throw new Error(`Server responded with status: ${response.status}`);
                }

                const result = await response.json();
                console.log('Message sent successfully:', result);

            } catch (error) {
                console.error('Error sending message:', error);
                sendingIndicator.textContent = 'Failed!';
                setTimeout(() => {
                    sendingIndicator.textContent = 'Sending...';
                    sendingIndicator.classList.add('hidden');
                    sendButton.disabled = false;
                }, 2000);
            } finally {
                sendingIndicator.classList.add('hidden');
                sendButton.disabled = false;
            }
        }

        sendButton.addEventListener('click', sendMessage);

        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    });
</script>

@endsection