@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 data-auth-id="{{ Auth::user()->id }}" class="text-orange">Chat - <small>{{ Auth::user()->name }}</small></h4>
            <a href="#" class="message-action" id="delete-conversation" style="display: none;"><i class="ti-trash"></i> Supprimer Conversation</a>
        </div>

        <div class="messages-container-inner">

            <!-- Utilisateurs Start -->
            <div class="dash-msg-inbox">
                <ul>
                    @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>
            <!-- Utilisateurs End -->

            <!-- Affichage des messages ici -->
            <div id="display-message-form" class="dash-msg-content" style="display: none;">

            </div>
            <!-- Affichage des messages ici -->

            <!-- Si aucune conversation -->
            <div id="no-conversation" class="dash-msg-content">

                <div class="row">
                    <div class="col-4"></div>
                    <div class="col-4">
                        <img src="{{ URL::to('assets/img/empty-chat-bg.png') }}" alt="" height="300" width="300" />
                    </div>
                    <div class="col-4"></div>
                </div>

            </div>
            <!-- Si aucune conversation -->

        </div>
    </div>

</div>

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script>
    // Demander la permission pour les notifications dès que l'utilisateur arrive sur la page
    if (Notification.permission !== 'granted') {
        Notification.requestPermission();
    }

</script>
<script>
    // Récupérer l'identifiant de la conversation
    let conversationId = $('#conversation_id').val();

    // Écouter les événements diffusés sur la chaîne de la conversation
    window.Echo.channel('chat.' + conversationId)
        .listen('MessageSent', (e) => {
            // Vérifier si l'utilisateur est l'expéditeur du message
            let isSender = e.message.sender_id === {{ auth()->user()->id }};

            // Créer la structure HTML du message
            let messageDiv = $('<div>')
                .addClass('message-plunch ' + (isSender ? 'me' : ''))
                .html(`
                    <div class="dash-msg-avatar">
                        <img src="${isSender ? '{{ asset('assets/img/user-5.png') }}' : e.message.sender.avatar}" alt="" />
                    </div>
                    <div class="dash-msg-text">
                        <p>${e.message.content}</p>
                    </div>
                `);

            // Ajouter le message au conteneur de messages
            $('#display-message-form').append(messageDiv);

            // Faire défiler automatiquement le conteneur de messages vers le bas
            $('#display-message-form').scrollTop($('#display-message-form').prop("scrollHeight"));

            // Si le message est reçu d'un autre utilisateur, afficher une notification popup
            if (!isSender) {
                showNotification(e.message.sender.name, e.message.content);
            }
        });

    function showNotification(senderName, message) {
        if (Notification.permission === 'granted') {
            new Notification(senderName, { body: message });
        } else if (Notification.permission !== 'denied') {
            Notification.requestPermission().then(permission => {
                if (permission === 'granted') {
                    new Notification(senderName, { body: message });
                }
            });
        }
    }

</script>
<script>
    function sendNewChatMessage() {
        let content = $('#content').val().trim();
        let conversationId = $('#conversation_id').val();

        if (content === "") {
            alert('Veuillez entrer un message.');
            return;
        }

        $.ajax({
            url: '/root/messages',
            method: 'POST',
            data: {
                conversation_id: conversationId,
                content: content,
                type: 'text',
                _token: '{{ csrf_token() }}'
            },
            success: function(data) {
                let isSender = data.sender_id === {{ auth()->user()->id }};
                let messagesDiv = $('#display-message-form');

                // Ajout du nouveau message dans l'interface
                let messageDiv = $('<div>')
                    .addClass('message-plunch ' + (isSender ? 'me' : ''))
                    .html(`
                        <div class="dash-msg-avatar">
                            <img src="${isSender ? '{{ asset('assets/img/user-5.png') }}' : data.sender.avatar}" alt="" />
                        </div>
                        <div class="dash-msg-text">
                            <p>${data.content}</p>
                        </div>
                    `);

                messagesDiv.prepend(messageDiv);
                $('#content').val('');
                // Scroller vers le bas pour afficher le dernier message
                messagesDiv.scrollTop(messagesDiv.prop("scrollHeight"));
            },
            error: function(error) {
                console.error('Erreur:', error);
                alert('Une erreur est survenue lors de l\'envoi du message.');
            }
        });
    }

    $(document).ready(function() {
        $('.conversation').on('click', function(e) {
            e.preventDefault();
            let userId = $(this).data('id');

            $.ajax({
                url: '/root/chat/store',
                method: 'POST',
                data: {
                    user_id: userId,
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    // Mise à jour de l'interface après le clic sur une conversation
                    $('#no-conversation').hide();
                    $('#display-message-form').show();
                    $('#delete-conversation').show();
                    $('#conversation_id').val(data.conversation.id);
                    $('#receiver_id').val(userId);

                    let messagesDiv = $('#display-message-form');
                    messagesDiv.empty();

                    data.messages.forEach(function(message) {
                        let isSender = message.sender_id === {{ auth()->user()->id }};
                        let messageDiv = $('<div>')
                            .addClass('message-plunch ' + (isSender ? 'me' : ''))
                            .html(`
                                <div class="dash-msg-avatar">
                                    <img src="${isSender ? '{{ asset('assets/img/user-5.png') }}' : message.sender.avatar}" alt="" />
                                </div>
                                <div class="dash-msg-text">
                                    <p>${message.content}</p>
                                </div>
                            `);
                        messagesDiv.append(messageDiv);
                    });

                    // Scroller vers le bas pour voir les anciens messages
                    messagesDiv.scrollTop(messagesDiv.prop("scrollHeight"));

                    // Ajouter la zone de texte pour envoyer un nouveau message
                    messagesDiv.append(`
                        <div class="message-reply">
                            <input type="hidden" id="conversation_id" value="${data.conversation.id}" />
                            <textarea cols="40" rows="3" id="content" class="form-control with-light" placeholder="Votre Message"></textarea>
                            <button type="submit" class="btn btn-primary" onclick="sendNewChatMessage()">Envoyer Message</button>
                        </div>
                    `);
                },
                error: function(error) {
                    console.error('Erreur:', error);
                }
            });
        });
    });
</script>

@endsection