@extends('layouts.public')

@section('title', __('Sellers & agents'))
@section('meta_description', __('The agents, brokers and companies listing property on ABACO INFRA.'))

@section('content')
    <x-page-hero :title="__('Sellers & agents')"
                 :eyebrow="__('Who you are dealing with')"
                 :subtitle="__('Verified sellers carry a badge. It means we have checked their identity.')" />

    <div class="container-page py-10">
        <form method="GET" class="mb-8 flex flex-wrap items-end gap-3">
            <div class="min-w-0 flex-1">
                <label for="q" class="form-label">{{ __('Search by name') }}</label>
                <input id="q" type="search" name="q" value="{{ request('q') }}" class="form-input">
            </div>

            <x-form.select name="type" :label="__('Kind')" :options="$types" :value="request('type')"
                           :placeholder="__('Any')" class="w-full sm:w-56" />

            <x-form.checkbox name="verified" :checked="request()->boolean('verified')"
                             :label="__('Verified only')" class="pb-2.5" />

            <button type="submit" class="btn btn-outline">{{ __('Search') }}</button>
        </form>

        @if ($profiles->isEmpty())
            <x-empty-state icon="users" :title="__('No sellers match that')"
                           :message="__('Try a different name, or clear the filters.')" />
        @else
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 3xl:grid-cols-4" data-reveal-group>
                @foreach ($profiles as $profile)
                    <a href="{{ route('sellers.show', $profile) }}"
                       class="flex items-start gap-4 rounded-xl border border-border bg-surface p-5 transition hover:shadow-card"
                       data-reveal-child>
                        @if ($profile->logo)
                            <img src="{{ thumb_url($profile->logo) }}" alt=""
                                 class="size-12 shrink-0 rounded-lg object-cover">
                        @else
                            <span class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-surface-muted font-display text-sm font-bold text-text-secondary">
                                {{ $profile->displayInitials() }}
                            </span>
                        @endif

                        <div class="min-w-0">
                            <h2 class="flex items-center gap-1.5 font-display text-base font-semibold text-text">
                                <span class="truncate">{{ $profile->display_name }}</span>

                                @if ($profile->isVerified())
                                    <x-icon name="shield" class="size-4 shrink-0 text-success" />
                                    <span class="sr-only">{{ __('Verified') }}</span>
                                @endif
                            </h2>

                            <p class="mt-0.5 text-xs text-text-muted">{{ $profile->type->label() }}</p>

                            @if ($profile->headline)
                                <p class="mt-1.5 line-clamp-2 text-sm text-text-secondary">{{ $profile->headline }}</p>
                            @endif

                            <p class="mt-2 text-xs text-text-muted">
                                {{ trans_choice('One listing|:count listings', $profile->listing_count, ['count' => $profile->listing_count]) }}
                            </p>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-10">{{ $profiles->links() }}</div>
        @endif
    </div>
@endsection