@php
    $tabMeta = [
        'programme' => ['label' => __('Referrals'), 'icon' => 'user-plus'],
        'reviews' => ['label' => __('Reviews'), 'icon' => 'star'],
        'settings' => ['label' => __('Settings'), 'icon' => 'cog-6-tooth'],
    ];
    $money = fn (?float $amount): string => $amount === null
        ? __('Not available')
        : $currency.' '.number_format($amount, 2);
    $metrics = [
        ['label' => __('Referred enquiries'), 'value' => number_format($summary['enquiries']), 'icon' => 'user-plus', 'accent' => '#4f46e5', 'sub' => __('From personal links')],
        ['label' => __('Won value'), 'value' => $money($summary['won_value']), 'icon' => 'banknotes', 'accent' => '#059669', 'sub' => __('Confirmed and paid in full')],
        ['label' => __('Rewards credited'), 'value' => $currency.' '.number_format($summary['rewards'], 2), 'icon' => 'gift', 'accent' => '#d97706', 'sub' => __('Customer credit, after approval')],
        ['label' => __('Review links offered'), 'value' => number_format($summary['reviews_offered']), 'icon' => 'star', 'accent' => '#0284c7', 'sub' => __(':count below 4 stars, no link', ['count' => number_format($summary['reviews_withheld'])])],
        ['label' => __('Review links opened'), 'value' => number_format($summary['reviews_clicked']), 'icon' => 'arrow-up-right', 'accent' => '#7c3aed', 'sub' => __('Times the Google link was opened')],
    ];
    $tz = config('app.display_timezone');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <x-page-header :title="__('Referrals')" />

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        @if ($tab === 'programme')
            @if ($canIssue)
                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Give a contact their link') }}</h2>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Each contact has one personal link. People who use it are recorded as their referrals.') }}</p>
                    <div class="relative mt-4 max-w-md">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="contactSearch"
                               placeholder="{{ __('Search contacts') }}"
                               class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    @if ($contacts->isNotEmpty())
                        <ul class="mt-3 divide-y divide-slate-100 rounded-xl border border-slate-200">
                            @foreach ($contacts as $contact)
                                <li wire:key="contact-{{ $contact->id }}" class="flex items-center justify-between gap-3 px-3 py-2.5">
                                    <div class="min-w-0">
                                        <p class="truncate text-sm font-medium text-slate-900">{{ $contact->name }}</p>
                                        <p class="truncate text-xs text-slate-400">{{ $contact->customer?->name }}</p>
                                    </div>
                                    @if ($contact->referralLink)
                                        <span class="shrink-0 text-xs text-slate-400">{{ $contact->referralLink->is_active ? __('Link is on') : __('Link is off') }}</span>
                                    @else
                                        <button type="button" wire:click="issueLink({{ $contact->id }})" class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Create link') }}</button>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </x-card>
            @endif

            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Referrers') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Who shared a link, the enquiries it brought in, the value of jobs paid in full, and the credit a director has approved') }}</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Referrer') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Enquiries') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Won value') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Rewards credited') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($summary['by_referrer'] as $row)
                                <tr wire:key="referrer-{{ $row['contact_id'] }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm lg:px-4">
                                        <p class="font-medium text-slate-900">{{ $row['name'] }}</p>
                                        @if ($row['organisation'])
                                            <p class="text-xs text-slate-400">{{ $row['organisation'] }}</p>
                                        @endif
                                        @if ($row['token'])
                                            <p class="mt-1 break-all text-xs text-slate-500">{{ route('crm.referral-link', $row['token']) }}</p>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">{{ number_format($row['enquiries']) }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">{{ $money($row['won_value']) }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">{{ $currency }} {{ number_format($row['rewards'], 2) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-12">
                                        <x-empty-state icon="user-plus" :title="__('No referrals yet')"
                                            :message="__('When a contact shares their link and someone asks for work, it is listed here.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>

            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Referred enquiries') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Credit is issued only after the job is confirmed and paid in full, and only when a director approves it') }}</p>
                    </div>
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="search"
                               placeholder="{{ __('Search…') }}"
                               class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Referrer') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Enquiry') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Won value') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Reward') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($referrals as $referral)
                                @php
                                    $value = in_array($referral->status, ['won', 'rewarded'], true)
                                        ? app(\App\Services\Crm\Referrals\ReferralProgramme::class)->jobValueBase($referral->job)
                                        : null;
                                @endphp
                                <tr wire:key="referral-{{ $referral->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $referral->referrer?->name ?? __('Unknown contact') }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">
                                        @if ($referral->opportunity)
                                            <a href="{{ route('crm.opportunities.show', $referral->opportunity_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $referral->opportunity->title }}</a>
                                        @else
                                            {{ $referral->customer?->name ?? __('Not available') }}
                                        @endif
                                        <p class="text-xs text-slate-400">{{ $referral->created_at?->timezone($tz)->format('j M Y') }}</p>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        <x-badge :color="['enquiry' => 'sky', 'won' => 'amber', 'rewarded' => 'emerald', 'declined' => 'slate'][$referral->status] ?? 'slate'">
                                            {{ \App\Models\Crm\Referral::STATUSES[$referral->status] ?? $referral->status }}
                                        </x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">
                                        {{ in_array($referral->status, ['won', 'rewarded'], true) ? $money($value) : __('Not available') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-700 lg:px-4">
                                        @if ($referral->credit)
                                            {{ $referral->credit->currency_code }} {{ number_format((float) $referral->credit->amount, 2) }}
                                        @elseif ($referral->status === 'won')
                                            {{ __('Waiting for a director') }}
                                        @else
                                            {{ __('Not available') }}
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                        @if ($isDirector && in_array($referral->status, ['enquiry', 'won'], true))
                                            <div class="flex items-center justify-end gap-3">
                                                @if ($referral->status === 'won')
                                                    <button type="button" wire:click="openApproval({{ $referral->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Approve') }}</button>
                                                @endif
                                                <button type="button" wire:click="decline({{ $referral->id }})" wire:confirm="{{ __('Decline this referral? No credit will be issued.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Decline') }}</button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="user-plus" :title="__('No referred enquiries')"
                                            :message="__('Enquiries that arrive through a personal link are listed here.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $referrals->links() }}
                </div>
            </x-card>

            @if ($canIssue && $links->isNotEmpty())
                <x-card class="overflow-hidden">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Links') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Turning a link off stops new enquiries. Ones already recorded stay on the list.') }}</p>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-slate-100">
                            <thead>
                                <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Contact') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Link') }}</th>
                                    <th class="whitespace-nowrap px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                                    <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($links as $link)
                                    <tr wire:key="link-{{ $link->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $link->contact?->name ?? __('Unknown contact') }}</td>
                                        <td class="px-3 py-4 text-sm text-slate-500 lg:px-4"><span class="break-all">{{ route('crm.referral-link', $link->token) }}</span></td>
                                        <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                            <x-badge :color="$link->is_active ? 'emerald' : 'slate'">{{ $link->is_active ? __('On') : __('Off') }}</x-badge>
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                            <button type="button" wire:click="setLinkActive({{ $link->id }}, {{ $link->is_active ? 'false' : 'true' }})" class="text-indigo-600 hover:text-indigo-800">
                                                {{ $link->is_active ? __('Turn off') : __('Turn on') }}
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif

        @elseif ($tab === 'reviews')
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Google review requests') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('The lowest of quality, turnaround and service decides. 4 or 5 stars may see the Google link, once per job. 1 to 3 stars go to the owner and a director, and the link is not shown. Nothing is offered in return.') }}</p>
                    </div>
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="search"
                               placeholder="{{ __('Search…') }}"
                               class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Job') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Client') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 text-right lg:px-4">{{ __('Lowest score') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 lg:px-4">{{ __('Offered') }}</th>
                                <th class="whitespace-nowrap px-3 py-3.5 lg:px-4">{{ __('Opened') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($reviews as $review)
                                <tr wire:key="review-{{ $review->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $review->job?->job_number ?? __('Not available') }}</td>
                                    <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">{{ $review->customer?->name ?? __('Not available') }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">{{ $review->rating }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        <x-badge :color="['offered' => 'sky', 'clicked' => 'emerald', 'withheld' => 'rose'][$review->status] ?? 'slate'">
                                            {{ \App\Models\Crm\ReviewRequest::STATUSES[$review->status] ?? $review->status }}
                                        </x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $review->offered_at?->timezone($tz)->format('j M Y') ?? __('Not available') }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $review->clicked_at?->timezone($tz)->format('j M Y') ?? __('Not available') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="star" :title="__('No review requests yet')"
                                            :message="__('When a client rates a delivered job, the outcome is listed here. A blank Google review link in Settings means no link is offered.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $reviews->links() }}
                </div>
            </x-card>

        @else
            <x-card class="p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Review link and referral reward') }}</h2>
                <p class="mt-1 text-sm text-slate-500">{{ __('Directors set both. The Google link is offered only after a 4 or 5 star rating, and never with a reward. The referral reward is customer credit, and it is credited only when a director approves a confirmed, paid job.') }}</p>

                <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="googleReviewUrl" value="{{ __('Google review link') }}" />
                        <x-input id="googleReviewUrl" type="url" class="mt-1 block w-full" wire:model="googleReviewUrl" placeholder="https://" :disabled="! $isDirector" />
                        <x-input-error for="googleReviewUrl" class="mt-2" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('Leave this blank and no review link is offered, even for a 5 star rating.') }}</p>
                    </div>
                    <div>
                        <x-label for="ruleType" value="{{ __('Referral reward') }}" />
                        <select id="ruleType" wire:model="ruleType" @disabled(! $isDirector) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="fixed">{{ __('Fixed amount') }} ({{ $currency }})</option>
                            <option value="percent">{{ __('Percentage of the paid job') }}</option>
                        </select>
                        <x-input-error for="ruleType" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="ruleValue" value="{{ $ruleType === 'percent' ? __('Percentage') : __('Amount') }}" />
                        <x-input id="ruleValue" type="number" step="0.01" min="0.01" class="mt-1 block w-full" wire:model="ruleValue" :disabled="! $isDirector" />
                        <x-input-error for="ruleValue" class="mt-2" />
                    </div>
                </div>

                @if ($isDirector)
                    <div class="mt-5 flex justify-end">
                        <x-button type="button" wire:click="saveSettings" wire:loading.attr="disabled" wire:target="saveSettings">
                            <span wire:loading.remove wire:target="saveSettings">{{ __('Save') }}</span>
                            <span wire:loading wire:target="saveSettings">{{ __('Saving…') }}</span>
                        </x-button>
                    </div>
                @else
                    <p class="mt-4 text-sm text-slate-500">{{ __('Only a director can change these.') }}</p>
                @endif
            </x-card>
        @endif

        <x-dialog-modal wire:model.live="showApproval">
            <x-slot name="title">{{ __('Approve referral reward') }}</x-slot>
            <x-slot name="content">
                <p>{{ __('This credits the referrer\'s organisation. It is customer credit, not cash, and it is not a reward for a review.') }}</p>
                @if ($approving)
                    <p class="mt-2 font-medium text-slate-900">{{ $approving->referrer?->name }}</p>
                @endif
                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="rewardType" value="{{ __('Reward') }}" />
                        <select id="rewardType" wire:model.live="rewardType" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="fixed">{{ __('Fixed amount') }} ({{ $currency }})</option>
                            <option value="percent">{{ __('Percentage of the paid job') }}</option>
                        </select>
                        <x-input-error for="rewardType" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="rewardValue" value="{{ $rewardType === 'percent' ? __('Percentage') : __('Amount') }}" />
                        <x-input id="rewardValue" type="number" step="0.01" min="0.01" class="mt-1 block w-full" wire:model.live="rewardValue" />
                        <x-input-error for="rewardValue" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button type="button" wire:click="$set('showApproval', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-button type="button" wire:click="approve" wire:loading.attr="disabled" wire:target="approve" class="ms-3">
                    <span wire:loading.remove wire:target="approve">{{ __('Credit the reward') }}</span>
                    <span wire:loading wire:target="approve">{{ __('Crediting…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    </div>
</div>