@extends('rocketchat.app')

@section('content')
<div id="app">
    <div>
        <h2>Rocket.Chat Integration</h2>
        <div class="mb-3">
            <input type="text" class="form-control" v-model="channelName" placeholder="Channel Name">
            <button class="btn btn-primary mt-2" @click="createChannel">Create Channel</button>
        </div>
        <div class="mb-3">
            <button class="btn btn-secondary" @click="listUsers">List Users</button>
            <ul>
                <li v-for="user in users" :key="user._id">@{{ user.username }}</li>
            </ul>
        </div>
        <div class="mb-3">
            <input type="text" class="form-control" v-model="roomId" placeholder="Room ID">
            <input type="text" class="form-control mt-2" v-model="message" placeholder="Message">
            <button class="btn btn-success mt-2" @click="sendMessage">Send Message</button>
        </div>
        <div class="mb-3">
            <button class="btn btn-info" @click="getMessages">Get Messages</button>
            <ul>
                <li v-for="msg in messages" :key="msg._id">@{{ msg.msg }}</li>
            </ul>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            channelName: '',
            roomId: '',
            message: '',
            users: [],
            messages: []
        },
        methods: {
            createChannel() {
                axios.post('/rocketchat/create-channel', { name: this.channelName })
                    .then(response => {
                        console.log(response.data);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            listUsers() {
                axios.get('/rocketchat/list-users')
                    .then(response => {
                        this.users = response.data.users;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            sendMessage() {
                axios.post('/rocketchat/send-message', { room_id: this.roomId, message: this.message })
                    .then(response => {
                        console.log(response.data);
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            getMessages() {
                axios.get(`/rocketchat/get-messages/${this.roomId}`)
                    .then(response => {
                        this.messages = response.data.messages;
                    })
                    .catch(error => {
                        console.error(error);
                    });
            }
        }
    });
</script>
@endsection