@extends('layouts.app')

@section('content')
    <div class="row">
        <div class="col-4" style="border-right: 1px solid red;">
            @include('conversations',['conversations' => $conversations,])
        </div>
        <div class="col-8">
            <div id="chat">
                <div id="messages">
                    @if($messages)
                        @foreach ($messages as $message)
                            <div class="message mb-3" style="{{$message->sender_id == \Illuminate\Support\Facades\Auth::id()? 'background: #0d6efd69; text-align:right' : 'background: #bfcadb'}}">
                                <strong>{{ $message->sender->email }}:</strong> {{ $message->message }}
                            </div>
                        @endforeach
                    @endif
                </div>
                <form id="message-form">
                    <input type="hidden" id="conversation_id" value="{{ $conversationId }}">
                    <input type="text" id="message" placeholder="Type your message...">
                    <button type="submit">Send</button>
                </form>
            </div>
        </div>
    </div>

    <script>
        window.Laravel = {!! json_encode([
        'user' => auth()->check() ? auth()->user()->id : null,
    ]) !!};
    </script>
@endsection