@extends('layouts.app')

@section('content')
<div class="page-content-wrapper">
    @include("layouts.partials.validate_alert")

    <div class="container-fluid py-3">
        <div class="card shadow-sm border-0" style="max-width: 600px; margin:auto;">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Chat dengan {{ $otherUser->nama }}</h5>
                <a href="{{ route('users.list') }}" class="text-white text-decoration-none">← Kembali</a>
            </div>

            <!-- Area pesan -->
            <div id="chat-body" class="card-body p-3" style="height: calc(100vh - 220px); overflow-y: auto; background: #f9f9f9;">
                @foreach($messages as $msg)
                    <div class="mb-3 {{ $msg->sender_id == auth()->id() ? 'text-end' : '' }}">
                        <div class="d-inline-block px-3 py-2 rounded-3
                            {{ $msg->sender_id == auth()->id() ? 'bg-primary text-white' : 'bg-white border' }}">
                            {{ $msg->message }}
                        </div>
                        <div>
                            <small class="text-muted">{{ $msg->created_at->format('H:i') }}</small>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Form input -->
            <div class="card-footer bg-white border-top position-sticky bottom-0">
                <form action="{{ route('chat.send', $conversation->id) }}" method="POST" class="d-flex gap-2">
                    @csrf
                    <input type="text" name="message" class="form-control" placeholder="Ketik pesan..." required autocomplete="off">
                    <button class="btn btn-primary px-4">Kirim</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Auto scroll ke bawah --}}
<script>
    const chatBody = document.getElementById('chat-body');
    chatBody.scrollTop = chatBody.scrollHeight;
</script>
@endsection