@extends('layouts.app')

@section('content')
<div class="container">
    <h2>Live Help Desk</h2>
    <div id="chat-box" class="border p-3 mb-3" style="height: 300px; overflow-y: auto;">
        @foreach ($messages as $message)
            <div class="mb-2">
                <strong>{{ $message->is_admin ? 'Admin' : 'You' }}:</strong> {{ $message->message }}
            </div>
        @endforeach
    </div>

    <div>
        <input type="text" id="chat-input" class="form-control" placeholder="Type a message...">
        <button id="send-btn" class="btn btn-primary mt-2">Send</button>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/laravel-echo/1.11.1/echo.iife.min.js"></script>

<script>
    const chatBox = document.getElementById('chat-box');
    const chatInput = document.getElementById('chat-input');
    const sendBtn = document.getElementById('send-btn');

    window.Echo = new Echo({
        broadcaster: 'reverb',
    });

    window.Echo.channel('help-desk')
        .listen('.message.sent', (e) => {
            const messageElement = document.createElement('div');
            messageElement.innerHTML = `<strong>${e.message.is_admin ? 'Admin' : 'User'}:</strong> ${e.message.message}`;
            chatBox.appendChild(messageElement);
            chatBox.scrollTop = chatBox.scrollHeight;
        });

    sendBtn.addEventListener('click', function () {
        axios.post("{{ route('help.desk.send') }}", {
            message: chatInput.value
        }).then(response => {
            chatInput.value = "";
        }).catch(error => {
            console.error(error);
        });
    });
</script>
@endsection