@use('App\Enums\TrialRequestStatus')
@use('App\Support\LocalizedDate')

<div>
    <div class="flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black">درخواست‌های ثبت‌شده از سایت</h1>
            <p class="mt-1 text-sm text-limoc-muted">
                @if ($newCount > 0)
                    <span class="font-bold text-limoc-green ltr-numerals">{{ $newCount }}</span> درخواست بررسی‌نشده.
                @else
                    همه درخواست‌ها بررسی شده‌اند.
                @endif
            </p>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            <input type="search" wire:model.live.debounce.400ms="search" placeholder="نام، موبایل، کسب‌وکار یا شهر"
                   class="min-w-0 rounded-lg border-limoc-border bg-white text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft sm:w-72">

            <select wire:model.live="status"
                    class="rounded-lg border-limoc-border bg-white text-sm focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                <option value="">همه وضعیت‌ها</option>
                @foreach ($statuses as $case)
                    <option value="{{ $case->value }}">{{ $case->label() }}</option>
                @endforeach
            </select>
        </div>
    </div>

    <div class="mt-6 space-y-3">
        @forelse ($requests as $request)
            <article class="rounded-xl border border-limoc-border bg-white p-4">
                <div class="flex flex-wrap items-start justify-between gap-3">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="font-bold">{{ $request->business_name }}</h2>

                            @php($badge = match ($request->status) {
                                TrialRequestStatus::New => 'bg-limoc-honey text-limoc-ink',
                                TrialRequestStatus::Contacted => 'bg-limoc-sand text-limoc-green',
                                TrialRequestStatus::Converted => 'bg-limoc-lime-soft text-limoc-green',
                                TrialRequestStatus::Rejected => 'bg-limoc-border text-limoc-muted',
                            })
                            <span class="rounded-full px-2.5 py-0.5 text-xs font-bold {{ $badge }}">
                                {{ $request->status->label() }}
                            </span>
                        </div>

                        <p class="mt-1 text-sm text-limoc-muted">
                            {{ $request->name }}
                            —
                            <a href="tel:{{ $request->mobile }}" class="ltr-numerals font-medium text-limoc-green hover:underline">{{ $request->mobile }}</a>
                            @if ($request->email)
                                — <a href="mailto:{{ $request->email }}" class="text-limoc-green hover:underline">{{ $request->email }}</a>
                            @endif
                        </p>

                        <p class="mt-1 text-xs text-limoc-muted">
                            {{-- A middle dot renders as a small circle in Yekan Bakh FaNum and is
                                 indistinguishable from ۰ next to Persian digits, so "فروشگاه · ۶ تا ۱۵"
                                 reads as ۰۶. Persian comma is unambiguous and idiomatic here. --}}
                            {{ $request->activityLabel() }}، {{ $request->teamSizeLabel() }}، {{ $request->city }}
                            — ثبت در {{ LocalizedDate::format($request->created_at, true) }}
                        </p>

                        @if ($request->note)
                            <p class="mt-2 rounded-lg bg-limoc-cream p-2.5 text-sm leading-7">{{ $request->note }}</p>
                        @endif
                    </div>

                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        <select wire:change="setStatus({{ $request->id }}, $event.target.value)"
                                class="rounded-lg border-limoc-border bg-white text-xs focus:border-limoc-green-soft focus:ring-limoc-green-soft">
                            @foreach ($statuses as $case)
                                <option value="{{ $case->value }}" @selected($request->status === $case)>{{ $case->label() }}</option>
                            @endforeach
                        </select>

                        <a href="{{ route('admin.accounts', ['name' => $request->name, 'mobile' => $request->mobile, 'workspace' => $request->business_name]) }}"
                           class="rounded-lg bg-limoc-yellow px-3 py-2 text-xs font-bold transition hover:bg-limoc-green hover:text-white">
                            ساخت حساب
                        </a>
                    </div>
                </div>
            </article>
        @empty
            <p class="rounded-xl border border-dashed border-limoc-border bg-white p-8 text-center text-sm text-limoc-muted">
                درخواستی با این فیلترها پیدا نشد.
            </p>
        @endforelse
    </div>

    <div class="mt-6">{{ $requests->links() }}</div>
</div>