@extends('layouts.frontend')
@section('title', 'Hubungi Customer Service')
@section('content')
<div class="max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col h-[500px]">
    <div class="px-6 py-4 border-b border-gray-200 bg-gray-50 rounded-t-2xl font-bold text-gray-800 flex items-center space-x-2">
        <span class="w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse"></span>
        <span>Live Chat Layanan Mega Mart CRM</span>
    </div>

    <!-- Area Bubble Chat -->
    <div class="flex-1 p-6 overflow-y-auto space-y-4 bg-slate-50">
        @forelse($chats as $chat)
        <div class="flex {{ $chat->pengirim == 'pelanggan' ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-xs px-4 py-2.5 rounded-2xl text-sm shadow-sm 
                    {{ $chat->pengirim == 'pelanggan' ? 'bg-blue-600 text-white rounded-tr-none' : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none' }}">
                <p>{{ $chat->pesan }}</p>
                <span class="block text-[10px] text-right mt-1 opacity-70">{{ $chat->created_at->format('H:i') }}</span>
            </div>
        </div>
        @empty
        <p class="text-center text-gray-400 text-xs mt-12 font-medium">Belum ada riwayat pesan. Tulis pesan di bawah untuk memulai obrolan.</p>
        @endforelse
    </div>

    <!-- Form Input Kirim Pesan -->
    <form action="{{ route('chat.kirim') }}" method="POST" class="p-4 border-t border-gray-200 flex gap-2 bg-white rounded-b-2xl">
        @csrf
        <input type="hidden" name="pelanggan_id" value="{{ session('pelanggan_id') }}">
        <input type="hidden" name="pengirim" value="pelanggan">
        <input type="text" name="pesan" required placeholder="Tulis keluhan atau pertanyaan Anda disini..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg outline-none text-sm focus:ring-1 focus:ring-blue-600">
        <button type="submit" class="bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700 font-semibold text-sm transition">Kirim</button>
    </form>
</div>
@endsection