@use('App\Modules\Support\Models\SupportTicket')
<x-layouts.admin title="Support">
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <nav class="flex flex-wrap gap-2 text-sm" aria-label="Ticket status">
            @foreach (SupportTicket::STATUSES + ['all' => 'All'] as $value => $label)
                <a href="{{ route('admin.support.index', ['status' => $value]) }}" @class([
                    'rounded-full px-3 py-1',
                    'bg-rose-600 text-white' => $status === $value,
                    'border border-slate-200 bg-white text-slate-600' => $status !== $value,
                ])>{{ $label }}{{ isset($counts[$value]) ? ' ('.$counts[$value].')' : '' }}</a>
            @endforeach
            <a href="{{ route('admin.support.index', ['status' => $status, 'mine' => 1]) }}" class="rounded-full border border-slate-200 bg-white px-3 py-1 text-slate-600">Assigned to me</a>
        </nav>
        <form method="GET" role="search">
            <input type="hidden" name="status" value="{{ $status }}">
            <label for="q" class="sr-only">Search</label>
            <input id="q" name="q" value="{{ request('q') }}" placeholder="Number, subject or email" class="w-64 rounded-lg border border-slate-300 px-3 py-2 text-sm">
        </form>
    </div>

    <ul class="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200 bg-white">
        @forelse ($tickets as $ticket)
            <li>
                <a href="{{ route('admin.support.show', $ticket) }}" class="flex flex-wrap items-center justify-between gap-3 px-4 py-3 hover:bg-slate-50">
                    <span>
                        <span class="font-medium text-slate-900">{{ $ticket->number }} · {{ $ticket->subject }}</span>
                        <span class="block text-xs text-slate-500">{{ $ticket->user->email }} · {{ SupportTicket::CATEGORIES[$ticket->category] ?? $ticket->category }} · {{ $ticket->assignee?->name ?? 'Unassigned' }}</span>
                    </span>
                    <span class="text-xs text-slate-500">{{ $ticket->last_activity_at?->diffForHumans() }}</span>
                </a>
            </li>
        @empty
            <li class="px-4 py-10 text-center text-sm text-slate-500">No tickets.</li>
        @endforelse
    </ul>
    <div class="mt-4">{{ $tickets->links() }}</div>
</x-layouts.admin>