@extends('layouts.app')
@section('title', 'Chat')
@section('page-title', $conversation->title ?? 'Conversation')
@section('content')
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden" style="height: 70vh; display: flex; flex-direction: column;">
    <div class="flex-1 overflow-y-auto p-6 space-y-4" id="messages">
        @foreach($messages->reverse() as $msg)
        <div class="{{ $msg->sender_id === auth()->id() ? 'text-right' : 'text-left' }}">
            <div class="inline-block max-w-md {{ $msg->sender_id === auth()->id() ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-800' }} rounded-xl px-4 py-2">
                @if($msg->sender_id !== auth()->id())
                <p class="text-xs font-semibold mb-1 text-gray-500">{{ $msg->sender->name ?? 'Unknown' }}</p>
                @endif
                <p class="text-sm">{{ $msg->content }}</p>
                <p class="text-xs mt-1 {{ $msg->sender_id === auth()->id() ? 'text-blue-200' : 'text-gray-400' }}">{{ $msg->created_at->format('h:i A') }}</p>
            </div>
        </div>
        @endforeach
    </div>
    <div class="border-t border-gray-100 p-4">
        <form method="POST" action="{{ route('communication.chat.send', $conversation) }}" class="flex gap-3">
            @csrf
            <input type="text" name="content" placeholder="Type a message..." required autofocus class="flex-1 border border-gray-300 rounded-lg px-4 py-2">
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Send</button>
        </form>
    </div>
</div>
<script>document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;</script>
@endsection