@extends('layouts.backend')
@section('title', 'Ruang Live Chat Customer')
@section('page_heading', 'CRM Layanan Pelanggan: Live Chat Room')
@section('content')
<div class="max-w-3xl bg-white border border-gray-200 rounded-xl shadow-sm flex flex-col h-[520px]">
    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-xl font-bold text-gray-800">
        💬 Berbicara dengan Member ID #{{ $pelangganId }}
    </div>

    <div class="flex-1 p-6 overflow-y-auto space-y-4 bg-slate-100">
        @foreach($chats as $chat)
        <div class="flex {{ $chat->pengirim == 'admin' ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-xs px-4 py-2.5 rounded-2xl text-sm shadow-sm 
                    {{ $chat->pengirim == 'admin' ? 'bg-slate-900 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none' }}">
                <p>{{ $chat->pesan }}</p>
            </div>
        </div>
        @endforeach
    </div>

    <form action="{{ route('chat.kirim') }}" method="POST" class="p-4 border-t border-gray-200 flex gap-2">
        @csrf
        <input type="hidden" name="pelanggan_id" value="{{ $pelangganId }}">
        <input type="hidden" name="pengirim" value="admin">
        <input type="text" name="pesan" required placeholder="Balas pesan member..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg outline-none text-sm focus:ring-1 focus:ring-slate-900">
        <button type="submit" class="bg-slate-900 text-white px-5 py-2 rounded-lg hover:bg-slate-800 font-bold text-sm transition">Balas</button>
    </form>
</div>
@endsection