@extends('layouts.merchant')

@section('title', 'Сообщения — Кабинет продавца')

@section('content')
<h1 class="mb-5 text-2xl font-extrabold tracking-tight text-[var(--color-ink)]">Сообщения</h1>

@if ($rows->isEmpty())
    <div class="rounded-[var(--radius-lg)] border border-dashed border-[var(--color-line)] bg-white p-10 text-center text-[var(--color-muted)]">
        Пока нет диалогов с покупателями.
    </div>
@else
    <div class="max-w-2xl divide-y divide-[var(--color-line)] overflow-hidden rounded-[var(--radius-lg)] bg-white shadow-[var(--shadow-card)]">
        @foreach ($rows as $row)
            <a href="{{ $row['url'] }}" class="flex items-center gap-4 px-5 py-4 hover:bg-[var(--color-primary-soft)]">
                <div class="grid h-11 w-11 shrink-0 place-items-center rounded-full bg-[var(--color-primary-soft)] font-extrabold text-[var(--color-primary)]">
                    {{ mb_substr($row['name'], 0, 1) }}
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center justify-between gap-2">
                        <span class="truncate font-bold text-[var(--color-ink)]">{{ $row['name'] }}</span>
                        <span class="shrink-0 text-xs text-[var(--color-muted)]">{{ $row['time'] }}</span>
                    </div>
                    <div class="truncate text-sm text-[var(--color-slate)]">{{ $row['last'] ?? 'Нет сообщений' }}</div>
                </div>
                @if ($row['unread'] > 0)
                    <span class="grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-[var(--color-primary)] px-1.5 text-xs font-bold text-white">{{ $row['unread'] }}</span>
                @endif
            </a>
        @endforeach
    </div>
@endif
@endsection