@php
    $stageColour = fn (string $stage): string => match ($stage) {
        'won' => 'emerald',
        'lost' => 'rose',
        'deferred' => 'amber',
        'qualified', 'proposal', 'negotiation' => 'indigo',
        default => 'sky',
    };
    $today = now(config('app.display_timezone'))->startOfDay();
@endphp

<div class="space-y-4">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h3 class="text-base font-semibold text-slate-900">{{ __('Opportunities') }}</h3>
            <p class="text-xs text-slate-400">
                {{ __(':open open, :won won, :lost lost', ['open' => $counts['open'], 'won' => $counts['won'], 'lost' => $counts['lost']]) }}
            </p>
        </div>
        @if ($canOpen)
            <a href="{{ route('crm.opportunities.create', ['customer' => $organisation->id]) }}" wire:navigate>
                <x-button type="button"><x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('Open opportunity') }}</x-button>
            </a>
        @endif
    </div>

    <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
        <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">{{ __('Opportunity') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Stage') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Owner') }}</th>
                        <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Estimated value') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Next action') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($opportunities as $opportunity)
                        <tr wire:key="org-opportunity-{{ $opportunity->id }}" class="transition hover:bg-slate-50/70">
                            <td class="px-3 py-4 text-sm lg:px-4">
                                <a href="{{ route('crm.opportunities.show', $opportunity) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $opportunity->title }}</a>
                                @if ($opportunity->originator && $opportunity->originator_id !== $opportunity->owner_id)
                                    <p class="text-xs text-slate-400">{{ __('Brought in by :name', ['name' => $opportunity->originator->name]) }}</p>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                <x-badge :color="$stageColour($opportunity->stage)">{{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}</x-badge>
                            </td>
                            <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $opportunity->owner?->name ?? __('Not available') }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums lg:px-4">
                                @if ($opportunity->estimated_value === null)
                                    <span class="text-slate-400">{{ __('Not estimated') }}</span>
                                @else
                                    <span class="font-semibold text-slate-900">{{ $opportunity->currency_code }} {{ number_format((float) $opportunity->estimated_value, 2) }}</span>
                                @endif
                            </td>
                            <td class="px-3 py-4 text-sm lg:px-4">
                                @if ($opportunity->isOpen() && $opportunity->next_action)
                                    <span class="text-slate-700">{{ $opportunity->next_action }}</span>
                                    @if ($opportunity->next_action_due)
                                        <span class="block whitespace-nowrap text-xs {{ $opportunity->next_action_due->lt($today) ? 'font-semibold text-rose-600' : 'text-slate-400' }}">
                                            {{ $opportunity->next_action_due->lt($today) ? __('Overdue since :date', ['date' => $opportunity->next_action_due->format('j M Y')]) : __('Due :date', ['date' => $opportunity->next_action_due->format('j M Y')]) }}
                                        </span>
                                    @endif
                                @elseif ($opportunity->isOpen())
                                    <span class="font-medium text-amber-700">{{ __('No next action') }}</span>
                                @else
                                    <span class="text-slate-400">{{ __('Closed') }}</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-10">
                                <x-empty-state icon="flag" :title="__('No opportunities yet')"
                                    :message="__('An opportunity is opened when there is a real chance of business, with an owner and a dated next action.')"
                                    class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($opportunities->hasPages())
            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $opportunities->onEachSide(1)->links() }}
            </div>
        @endif
    </div>
</div>