@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">

    <div class="container">
        @php
            $otherUser = $conversation->otherUser();
        @endphp
        @if($otherUser)
            <h1>Conversation avec {{ $otherUser->name }}</h1>
        @else
            <h1>Conversation avec un utilisateur inconnu</h1>
        @endif
        <div id="messages">
            @foreach($messages as $message)
                <div class="message {{ $message->sender_id == auth()->id() ? 'sent' : 'received' }}">
                    <p>{{ $message->content }}</p>
                </div>
            @endforeach
        </div>
        <form id="message-form">
            @csrf
            <input type="hidden" name="conversation_id" value="{{ $conversation->id }}">
            <input type="hidden" name="type" value="text"> <!-- Ajouter le type de message -->
            <input type="text" name="content" placeholder="Type a message..." required>
            <button type="submit">Send</button>
        </form>
    </div>

</div>

@endsection

@section('scripts')
<!-- Les scripts spécifiques à cette vue enfant vont ici -->
<script>
    $(document).ready(function() {
        $('#message-form').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            $.ajax({
                url: '/root/messages',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                success: function(data) {
                    if (data.errors) {
                        // Gérer les erreurs de validation
                        console.error(data.errors);
                    } else if (data.error) {
                        // Gérer les autres erreurs
                        console.error(data.error);
                    } else {
                        let messagesDiv = $('#messages');
                        let messageDiv = $('<div>').addClass('message sent').html(`<p>${data.content}</p>`);
                        messagesDiv.append(messageDiv);
                        $('#message-form')[0].reset();
                    }
                },
                error: function(error) {
                    console.error('Error:', error);
                }
            });
        });

        Echo.private(`conversation.${{ $conversation->id }}`)
            .listen('MessageSent', (e) => {
                let messagesDiv = $('#messages');
                let messageDiv = $('<div>').addClass('message received').html(`<p>${e.message.content}</p>`);
                messagesDiv.append(messageDiv);

                // Afficher une notification pop-up
                if (Notification.permission === 'granted') {
                    new Notification('Nouveau message', {
                        body: e.message.content,
                    });
                } else if (Notification.permission !== 'denied') {
                    Notification.requestPermission().then(permission => {
                        if (permission === 'granted') {
                            new Notification('Nouveau message', {
                                body: e.message.content,
                            });
                        }
                    });
                }
            });
    });
</script>
@endsection