{{-- @extends('admin.template.layout')

@section('conteudo')
    <div class="conteudo-chat">
        <div class="chat-pagination shadow rounded">
            <div class="row h-100">

                <!-- Lista de usuários -->
                <div class="col-md-3 bg-gradient p-3 text-white rounded-start">
                    <h4 class="mb-4"> Usuários</h4>
                    <ul class="list-group list-group-flush">
                        @foreach ($users as $user)
                            <li class="list-group-item bg-transparent border-0 px-0">
                                <button class="badge bg-light text-dark w-100 py-2 user-item" data-id="{{ $user->id }}">
                                    {{ $user->name }}
                                </button>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <!-- Área de chat -->
                <div class="col-md-9 d-flex flex-column p-4 bg-white rounded-end">
                    <div id="messages" class="flex-grow-1 overflow-auto mb-3"></div>

                    <!-- Campo de entrada -->
                    <form id="chat-form" class="d-flex">
                        <input type="text" id="message-input" class="form-control me-2"
                            placeholder="Digite sua mensagem...">
                        <button type="submit" class="btn btn-primary">Enviar</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
@endsection


<script>
    const userId = {{ auth()->id() }};
    let selectedUser = null;

    window.Echo = new Echo({
        broadcaster: 'reverb',
        key: @json(config('reverb.app_key')),
        wsHost: @json(config('reverb.host', '127.0.0.1')),
        wsPort: @json(config('reverb.port', 6001)),
        forceTLS: false,
        disableStats: true,
    });

    // Seleciona usuário
    document.querySelectorAll('.user-item').forEach(btn => {
        btn.addEventListener('click', async () => {
            selectedUser = btn.dataset.id;
            loadMessages();
            listenChannel(selectedUser);
        });
    });

    // Buscar mensagens
    async function loadMessages() {
        let res = await fetch(`/chat/${selectedUser}/messages`);
        let messages = await res.json();
        let container = document.getElementById('messages');
        container.innerHTML = '';
        messages.forEach(msg => {
            appendMessage(msg);
        });
    }

    // Enviar mensagem
    document.getElementById('chat-form').addEventListener('submit', async e => {
        e.preventDefault();
        let input = document.getElementById('message-input');
        let content = input.value.trim();
        if (!content || !selectedUser) return;
        let res = await fetch(`/chat/${selectedUser}/messages`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                content
            })
        });
        let msg = await res.json();
        appendMessage(msg);
        input.value = '';
    });

    // Exibir mensagem
    function appendMessage(msg) {
        let div = document.createElement('div');
        div.classList.add('mb-2');
        if (msg.sender_id == userId) {
            div.classList.add('text-end');
            div.innerHTML = `<div class="send p-3 rounded w-75 ms-auto bg-primary text-white">${msg.content}</div>`;
        } else {
            div.innerHTML = `<div class="receive p-3 rounded w-75 bg-light">${msg.content}</div>`;
        }
        document.getElementById('messages').appendChild(div);
    }

    // Escutar canal
    function listenChannel(user) {
        Echo.channel(`chat.${user}`).listen('MessageSent', (e) => {
            if (e.message.sender_id == user) {
                appendMessage(e.message);
            }
        });
    }
</script> --}}