@extends('layouts.landing-page')
@section('content')
<div class="container mx-auto py-8">
    <div class="bg-gray-800 rounded-lg p-6 max-w-xl mx-auto">
        <h2 class="text-xl font-bold text-white mb-4">Live Chat Antar User</h2>

        <div class="mb-4">
            <label class="text-white">ID Anda:</label>
            <input type="text" id="userId" value="{{ auth()->id() }}" readonly
                class="w-full px-3 py-2 rounded bg-gray-200 text-gray-700">
        </div>

        <div class="mb-4">
            <label class="text-white">Kirim ke ID User:</label>
            <input type="text" id="toUserId" class="w-full px-3 py-2 rounded bg-gray-200 text-gray-700"
                placeholder="Contoh: 2" required>
        </div>

        <form id="chat-form" class="flex space-x-2">
            <input type="text" id="msg" class="flex-1 px-3 py-2 rounded text-gray-800" placeholder="Ketik pesan..."
                required>
            <button type="submit"
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded">Kirim</button>
        </form>

        <div id="chat-box" class="mt-6 bg-gray-900 p-4 rounded h-64 overflow-y-scroll text-white text-sm">
            <ul id="output" class="space-y-1"></ul>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
<script>
    // const socket = io("https://playlistmusic.co.id/chatserver"); //hosting
    const socket = io("{{ $socket_url }}"); //local

    let userId = $('#userId').val();

    socket.on("connect", () => {
        socket.emit("register", userId);
        console.log("Terhubung sebagai:", userId);
    });

    $('#chat-form').on('submit', function (e) {
        e.preventDefault();

        const toUserId = $('#toUserId').val();
        const msg = $('#msg').val();

        if (toUserId && msg) {
            socket.emit("send_message", {
                fromUserId: userId,
                toUserId: toUserId,
                message: msg
            });

            tampilkan(`Saya ke ${toUserId}: ${msg}`, 'me');
            $('#msg').val('');
        }
    });

    socket.on("receive_message", function (data) {
        tampilkan(`Dari ${data.fromUserId}: ${data.message}`, 'other');
    });

    function tampilkan(text, type) {
        const li = document.createElement("li");
        li.textContent = text;
        li.className = type === 'me' ? 'text-green-400' : 'text-yellow-300';
        document.getElementById("output").appendChild(li);
        document.getElementById("chat-box").scrollTop = document.getElementById("chat-box").scrollHeight;
    }
</script>
@endpush