@php
    use Carbon\Carbon;
    use Illuminate\Support\Str;
@endphp

@extends('layouts.root')

@section('styles')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
@endsection

@section('root-content')

<div class="dashboard-widg-bar d-block">

    <!-- Convershion -->
    <div class="messages-container margin-top-0">
        <div class="messages-headline">
            <h4>Chat Jobbo</h4>
            <a href="#" class="message-action"><i class="ti-trash"></i> Aucune Conversation</a>
        </div>

        <div class="messages-container-inner">
            <!-- Messages -->
            <div class="dash-msg-inbox">
                <ul id="conversations-list">
                    @foreach($utilisateurs as $user)
                        <li class="conversation" data-id="{{ $user->id }}">
                            <a href="#">
                                <div class="dash-msg-avatar">
                                    <img src="{{ $user->avatar }}" alt="" />

                                    @if($user->online == 1)
                                    <span class="_user_status online"></span>
                                    @else
                                    <span class="_user_status offline"></span>
                                    @endif
                                </div>
                                <div class="message-by">
                                    <div class="message-by-headline">
                                        <h5>{{ $user->name }}</h5>
                                        <span>{{ $user->role }}</span>
                                    </div>
                                    <p>{{ $user->email }}</p>
                                </div>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
            <!-- Messages / End -->

            <!-- Message Content -->
            <div class="dash-msg-content">
                <div id="messages">
                    <div class="row">
                        <div class="col-4"></div>
                        <div class="col-4">
                            <img src="{{ URL::to('assets/img/empty-chat-bg.png') }}" alt="" />
                            <p>Aucune conversation pour le moment</p>
                        </div>
                        <div class="col-4"></div>
                    </div>

                </div>
            </div>
            <!-- Message Content -->
        </div>
    </div>

</div>

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script>
    // Initialise Ably avec votre clé API
    var ably = new Ably.Realtime('tuGd5g.wZZg8A:YOnQb4VFZ-JylkGgBmXoejxskJT5_3CRlGoNin0u-Ws');

    // Récupère le nom du canal depuis l'input
    var channelName = document.getElementById('channelInput').value;
    var channel = ably.channels.get(channelName);

    var messagesDiv = document.getElementById('dash-msg-content');
    var senderName = document.getElementById('senderName');
    var senderAvatar = document.getElementById('senderAvatar');
    var messageInput = document.getElementById('messageInput');

    // Abonnez-vous à l'événement du canal
    channel.subscribe('messageEvent', function(message) {
        // Évitez d'ajouter des messages en double en nettoyant les anciens messages si nécessaire
        if (message.data.sender !== 'local') {
            var messageElement = document.createElement('div');
            messageElement.className = 'message-plunch';

            var avatarElement = document.createElement('div');
            avatarElement.className = 'dash-msg-avatar';
            var avatarImg = document.createElement('img');
            avatarImg.src = 'assets/img/user-5.png'; // Avatar par défaut pour les autres utilisateurs
            avatarElement.appendChild(avatarImg);

            var textElement = document.createElement('div');
            textElement.className = 'dash-msg-text';
            var messageText = document.createElement('p');
            messageText.textContent = message.data.text; // Affiche uniquement le texte
            textElement.appendChild(messageText);

            messageElement.appendChild(avatarElement);
            messageElement.appendChild(textElement);

            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight; // Assure que le défilement vers le bas est activé
        }
    });

    // Fonction pour envoyer un message
    function sendMessage() {
        var message = messageInput.value.trim();
        var name = senderName.value;
        var avatar = senderAvatar.value;

        if (message !== '') {
            // Publie le message dans le canal
            channel.publish('messageEvent', {
                name: name,
                text: message,
                sender: 'local'
            });

            // Crée un élément pour le message envoyé
            var messageElement = document.createElement('div');
            messageElement.className = 'message-plunch me';

            var avatarElement = document.createElement('div');
            avatarElement.className = 'dash-msg-avatar';
            var avatarImg = document.createElement('img');
            avatarImg.src = avatar;
            avatarElement.appendChild(avatarImg);

            var textElement = document.createElement('div');
            textElement.className = 'dash-msg-text';
            var messageText = document.createElement('p');
            messageText.textContent = message; // Affiche uniquement le texte
            textElement.appendChild(messageText);

            messageElement.appendChild(avatarElement);
            messageElement.appendChild(textElement);

            messagesDiv.appendChild(messageElement);
            messagesDiv.scrollTop = messagesDiv.scrollHeight; // Assure que le défilement vers le bas est activé

            // Efface le champ de saisie
            messageInput.value = '';
        }
    }
</script>
@endsection