@php($tabs = ['all' => __('All'), 'pending' => __('Pending'), 'completed' => __('Completed'), 'expired' => __('Expired')])
<x-admin.layout :title="__('Referrals')">
    <x-admin.page-header :title="__('Referrals')" :subtitle="__('Users who joined with a referral code. Both sides are rewarded after the new user\'s first completed ride.')" />

    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3">
        <div class="min-w-0 xl:col-span-2">
            <x-admin.tabs :tabs="$tabs" :current="$status" :counts="$counts->put('all', $counts->sum())->all()" />

            <x-admin.card :padding="false">
                <form method="GET" class="flex flex-wrap items-end gap-3 border-b border-gray-200 p-4 dark:border-gray-800">
                    @if ($status !== 'all')<input type="hidden" name="status" value="{{ $status }}">@endif
                    <div class="min-w-56 flex-1">
                        <x-admin.input name="search" :value="request('search')" :placeholder="__('Name, phone or referral code')" />
                    </div>
                    <x-admin.button type="submit" variant="secondary" icon="magnifying-glass">{{ __('Search') }}</x-admin.button>
                    @if (request()->filled('search'))
                        <x-admin.button variant="ghost" :href="route('admin.referrals.index', ['status' => $status === 'all' ? null : $status])">{{ __('Reset') }}</x-admin.button>
                    @endif
                </form>

                @if ($referrals->isEmpty())
                    <x-admin.empty :message="__('No referrals here yet.')" icon="gift" />
                @else
                    <div class="overflow-x-auto">
                        <table class="table-base">
                            <thead><tr><th>{{ __('Invited by') }}</th><th>{{ __('New user') }}</th><th class="!text-end">{{ __('Rewards') }}</th><th>{{ __('Status') }}</th><th>{{ __('Joined') }}</th></tr></thead>
                            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                @foreach ($referrals as $referral)
                                    <tr>
                                        <td><x-admin.user-link :user="$referral->referrer" /><span class="block font-mono text-xs text-gray-400">{{ $referral->referral_code }}</span></td>
                                        <td><x-admin.user-link :user="$referral->referred" /></td>
                                        <td class="text-end text-sm tabular-nums">
                                            {{ money($referral->referrer_reward) }} + {{ money($referral->referred_reward) }}
                                            @if ($referral->rewarded_at)<span class="block text-xs text-gray-400">{{ __('Paid :date', ['date' => $referral->rewarded_at->toFormattedDateString()]) }}</span>@endif
                                        </td>
                                        <td><x-admin.status :value="$referral->status" /></td>
                                        <td class="whitespace-nowrap text-sm">{{ $referral->created_at->toFormattedDateString() }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="border-t border-gray-200 px-4 py-3 dark:border-gray-800">{{ $referrals->links() }}</div>
                @endif
            </x-admin.card>
        </div>

        <div class="space-y-6">
            <x-admin.stat :label="__('Rewards paid')" :value="money($rewardsPaid)" icon="gift" :hint="__(':count rewarded referrals', ['count' => number_format($counts['completed'] ?? 0)])" />

            <form method="POST" action="{{ route('admin.referrals.settings') }}" class="space-y-4">
                @csrf @method('PUT')
                @include('admin.settings.partials.groups', ['groups' => $groups, 'readonly' => ! $canEdit, 'compact' => true])
                @if ($canEdit)
                    <div class="flex justify-end"><x-admin.button type="submit" icon="check">{{ __('Save rewards') }}</x-admin.button></div>
                @endif
            </form>
        </div>
    </div>
</x-admin.layout>