@props([
    'pendingPlans',
    'pendingCount' => 0,
])

@php
    $pendingPlans = $pendingPlans ?? collect();
    $pendingCount = (int) $pendingCount;
@endphp

<x-dashboard.widget-card
    title="Prospecting Plans Pending Approval"
    :subtitle="$pendingCount === 1 ? '1 plan awaiting your approval' : $pendingCount.' plans awaiting your approval'"
>
    @if ($pendingPlans->isEmpty())
        <p class="text-sm text-gray-500 py-2">
            No prospecting plans are waiting for approval.
        </p>
    @else
        <ul class="divide-y divide-gray-100 rounded-lg border border-gray-100 overflow-hidden">
            @foreach ($pendingPlans as $plan)
                @php
                    $salesperson = trim(($plan->user?->name ?? '').' '.($plan->user?->surname ?? ''));
                @endphp
                <li class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 py-2.5 bg-white hover:bg-gray-50/80">
                    <div class="min-w-0">
                        <p class="text-sm font-medium text-gray-900 truncate" title="{{ $plan->title }}">
                            {{ $plan->title }}
                        </p>
                        <p class="mt-0.5 text-xs text-gray-600">
                            <span class="font-medium text-gray-700">{{ $salesperson !== '' ? $salesperson : '—' }}</span>
                            <span class="text-gray-400">&middot;</span>
                            {{ $plan->periodLabel() }}
                            @if ($plan->submitted_at)
                                <span class="text-gray-400">&middot;</span>
                                {{ $plan->submitted_at->format('d M Y') }}
                            @endif
                        </p>
                    </div>
                    <span class="shrink-0 inline-flex self-start rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-800">
                        Pending
                    </span>
                </li>
            @endforeach
        </ul>
        @if ($pendingCount > $pendingPlans->count())
            <p class="mt-2 text-xs text-gray-500">
                Showing {{ $pendingPlans->count() }} of {{ number_format($pendingCount) }} pending.
            </p>
        @endif
    @endif

    <x-slot:actions>
        @can('prospecting-plans.view-team')
            <a
                href="{{ route('team-prospecting-plans.index') }}"
                class="inline-flex items-center text-xs font-medium text-red-600 hover:text-red-700"
            >
                Review plans
            </a>
        @endcan
    </x-slot:actions>
</x-dashboard.widget-card>