@extends('admin.layout')
@section('title', 'Percakapan')
@section('subtitle', 'Chat customer ↔ mitra dan pesan dari admin')

@section('content')
    <x-flash />

    <div class="flex items-center justify-end mb-4">
        <a href="{{ route('admin.conversations.create') }}"
           class="px-4 py-2.5 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
            + Kirim Pesan
        </a>
    </div>

    <div class="bg-white rounded-2xl border border-line overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                    <tr>
                        <th class="text-left font-semibold px-5 py-3">Jenis</th>
                        <th class="text-left font-semibold px-5 py-3">Customer</th>
                        <th class="text-left font-semibold px-5 py-3">Mitra</th>
                        <th class="text-left font-semibold px-5 py-3">Topik / Order</th>
                        <th class="text-left font-semibold px-5 py-3">Pesan</th>
                        <th class="text-left font-semibold px-5 py-3">Terakhir</th>
                        <th class="px-5 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-line">
                    @forelse ($conversations as $c)
                        <tr class="hover:bg-canvas transition">
                            <td class="px-5 py-3">
                                @if ($c->admin_id)
                                    <x-badge color="orange">Dari Admin</x-badge>
                                @else
                                    <x-badge color="gray">Customer ↔ Mitra</x-badge>
                                @endif
                            </td>
                            <td class="px-5 py-3 font-semibold">{{ $c->customer?->name ?? '—' }}</td>
                            <td class="px-5 py-3">{{ $c->mitra?->name ?? '—' }}</td>
                            <td class="px-5 py-3 text-sub">{{ $c->topic ?? ($c->order?->code ? 'Order '.$c->order->code : '—') }}</td>
                            <td class="px-5 py-3"><x-badge color="blue">{{ $c->messages_count }}</x-badge></td>
                            <td class="px-5 py-3 text-sub whitespace-nowrap">{{ $c->last_message_at?->format('d M Y, H:i') ?? '—' }}</td>
                            <td class="px-5 py-3 text-right"><a href="{{ route('admin.conversations.show', $c) }}" class="text-brand font-semibold hover:text-brand-dark">Buka ›</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-5 py-8 text-center text-sub">Belum ada percakapan.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <x-pagination :paginator="$conversations" unit="percakapan" />
@endsection