@php
    $tabMeta = [
        'start' => ['label' => __('Your first week'), 'icon' => 'check-circle'],
        'rules' => ['label' => __('The three rules'), 'icon' => 'book-open'],
        'example' => ['label' => __('Worked example'), 'icon' => 'light-bulb'],
        'access' => ['label' => __('Who may do what'), 'icon' => 'key'],
    ];

    // The worked example: one sale, start to finish. People are illustrative.
    $example = [
        ['stage' => 'prospect', 'title' => __('The list'), 'who' => __('Farai, director'),
            'body' => __('Farai loads a list of 100 NGOs as a Joint portfolio and assigns it to Rudo, the BD and Partnerships Officer. Nothing is in the pipeline yet: every organisation waits in the work queue as Not started.')],
        ['stage' => 'prospect', 'title' => __('Pulled into the pipeline'), 'who' => __('Rudo'),
            'body' => __('Rudo pulls Harare Health Partners from the queue. That opens one opportunity at Prospect with a dated next action: "Call the procurement officer, Thursday". Farai is its originator, because the list was theirs, and that never changes. Rudo is the owner. Because the portfolio is Joint, Farai is also added as a collaborator (Sponsor).')],
        ['stage' => 'contacted', 'title' => __('First call'), 'who' => __('Rudo'),
            'body' => __('Rudo calls and logs it with the outcome: "Annual conference in November, send capability profile". A logged outreach with an outcome is what lets the opportunity move to Contacted. Logging asks for the next action, so it is never left without one.')],
        ['stage' => 'meeting', 'title' => __('Meeting'), 'who' => __('Rudo and Farai'),
            'body' => __('Rudo books a meeting; Farai joins, as the Joint mode expects. The meeting note records the need and the actions, and each action becomes a task for a named person.')],
        ['stage' => 'requirement', 'title' => __('The need'), 'who' => __('Rudo'),
            'body' => __('300 delegate packs: branded notebooks, lanyards and four pull-up banners, delivered by 20 November. Recording that need moves it to Requirement Identified.')],
        ['stage' => 'qualified', 'title' => __('Qualified, after one refusal'), 'who' => __('Rudo'),
            'body' => __('Rudo tries to move it to Qualified and is told exactly what is missing: "Record the budget, or say why it is unknown in the budget note." The donor has not shared the budget, so Rudo writes that in the budget note. With need, contact, scope, timeframe, budget note and a dated next step all in, it moves. It is counted as qualified once, on this first entry, however often it moves later.')],
        ['stage' => 'proposal', 'title' => __('The quote'), 'who' => __('Administration'),
            'body' => __('Rudo requests a quote. Administration gets the task, prices it in Quotes and sends it; officers request and follow up quotes but do not price them. The sent quote is linked, so the opportunity can move to Proposal or Quotation.')],
        ['stage' => 'negotiation', 'title' => __('Negotiation'), 'who' => __('Rudo and a director'),
            'body' => __('The client asks for 10% off. Discounts, credit terms and delivery-date exceptions need a director\'s recorded approval, so Rudo asks and Farai approves on the record. Moving to Follow-up or Negotiation asks for the decision still outstanding: "Donor to approve the revised quote".')],
        ['stage' => 'negotiation', 'title' => __('Accepted, awaiting confirmation'), 'who' => __('The client'),
            'body' => __('The client accepts the quote on the portal. That acceptance is stored as evidence and the card shows Accepted, awaiting confirmation. It is NOT won yet: an accepted quote, an invoice or a deposit alone never wins a deal.')],
        ['stage' => 'won', 'title' => __('Won'), 'who' => __('Administration'),
            'body' => __('Administration confirms the job and links it. Only now, with the acceptance and the confirmed job, does the opportunity become Won.')],
    ];
@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="__('Help')">
            <a href="{{ route('knowledge.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="book-open" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Glossary') }}
                </x-secondary-button>
            </a>
        </x-page-header>

        <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 === 'start')
            <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">{{ __('Your first week') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Each step ticks itself when you have done it in the CRM.') }}</p>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="h-2 w-40 overflow-hidden rounded-full bg-slate-100">
                            <div class="h-full rounded-full bg-emerald-500 transition-all" style="width: {{ $required > 0 ? round($done / $required * 100) : 0 }}%"></div>
                        </div>
                        <span class="text-sm font-semibold tabular-nums text-slate-700">{{ __(':done of :total', ['done' => $done, 'total' => $required]) }}</span>
                    </div>
                </div>
                <ol class="divide-y divide-slate-100">
                    @foreach ($steps as $step)
                        <li wire:key="step-{{ $step['key'] }}" class="flex items-start gap-3 p-4 sm:px-5">
                            <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full {{ $step['done'] ? 'bg-emerald-500 text-white' : 'border border-slate-300 bg-white text-slate-400' }}">
                                @if ($step['done'])
                                    <x-icon name="check" class="h-3.5 w-3.5" />
                                @else
                                    <span class="text-[11px] font-semibold">{{ $loop->iteration }}</span>
                                @endif
                            </span>
                            <div class="min-w-0 flex-1">
                                <p class="text-sm font-medium {{ $step['done'] ? 'text-slate-500' : 'text-slate-900' }}">
                                    {{ $step['label'] }}
                                    @if ($step['optional'])
                                        <span class="ms-1 text-xs font-normal text-slate-400">{{ __('optional') }}</span>
                                    @endif
                                </p>
                                <p class="mt-0.5 text-xs text-slate-500">{{ $step['hint'] }}</p>
                            </div>
                            @unless ($step['done'])
                                <a href="{{ route($step['route'], $step['params']) }}" wire:navigate class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Go') }}</a>
                            @endunless
                        </li>
                    @endforeach
                </ol>
            </x-card>
        @endif

        @if ($tab === 'rules')
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <x-card class="p-5">
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600"><x-icon name="user-group" class="h-5 w-5" /></span>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('1. Ownership') }}</h2>
                    </div>
                    <ul class="mt-4 space-y-3 text-sm text-slate-600">
                        <li><span class="font-semibold text-slate-800">{{ __('Originator') }}</span>: {{ __('who brought it in. Set once and never changed, not even by a handover.') }}</li>
                        <li><span class="font-semibold text-slate-800">{{ __('Owner') }}</span>: {{ __('who is responsible now. Always exactly one. It changes only when a handover is accepted, or when a director reassigns it with a reason.') }}</li>
                        <li><span class="font-semibold text-slate-800">{{ __('Collaborators') }}</span>: {{ __('anyone helping, as Sponsor, Support or Technical.') }}</li>
                        <li>{{ __('A handover keeps the sender as owner until the recipient accepts, so nothing is ever unowned.') }}</li>
                        <li>{{ __('Reports show originated, managed and supported side by side. They overlap on purpose and are never added together: a sale is counted once.') }}</li>
                        <li>{{ __('Everyone can see who owns every organisation and opportunity, so two people never chase the same client.') }}</li>
                    </ul>
                </x-card>

                <x-card class="p-5">
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600"><x-icon name="clipboard-document-check" class="h-5 w-5" /></span>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('2. Qualification') }}</h2>
                    </div>
                    <p class="mt-4 text-sm text-slate-600">{{ __('An opportunity is Qualified only when all six are recorded. The CRM refuses the move and names what is missing.') }}</p>
                    <ol class="mt-3 list-decimal space-y-1.5 ps-5 text-sm text-slate-600">
                        <li>{{ __('The specific need') }}</li>
                        <li>{{ __('A contact at the organisation') }}</li>
                        <li>{{ __('Products, or the quantity and scope') }}</li>
                        <li>{{ __('A timeframe: delivery date, expected close or tender deadline') }}</li>
                        <li>{{ __('The budget, or a note saying why it is unknown') }}</li>
                        <li>{{ __('A dated next step') }}</li>
                    </ol>
                    <p class="mt-3 text-sm text-slate-600">{{ __('The same checklist is needed for Proposal, Negotiation and Won, so a repeat client can go straight to a quote once it is complete. It counts as qualified once, on first entry.') }}</p>
                </x-card>

                <x-card class="p-5">
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-600"><x-icon name="trophy" class="h-5 w-5" /></span>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('3. Won') }}</h2>
                    </div>
                    <ul class="mt-4 space-y-3 text-sm text-slate-600">
                        <li>{{ __('Won needs two things: the client\'s acceptance on record, and the job Administration has confirmed, linked.') }}</li>
                        <li>{{ __('A client accepting on the portal is the evidence, not the win. The card shows Accepted, awaiting confirmation until the job is linked.') }}</li>
                        <li>{{ __('A quote, an invoice or a part payment on its own never wins a deal.') }}</li>
                        <li>{{ __('The confirmed, invoiced and received figures are read from the job, invoices and payments. Nobody types them in.') }}</li>
                        <li>{{ __('Commission still comes from the job\'s sales rep and the commission rules. The CRM roles do not create commission.') }}</li>
                    </ul>
                </x-card>
            </div>

            <x-card class="p-5">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Also worth knowing') }}</h2>
                <ul class="mt-3 grid grid-cols-1 gap-2 text-sm text-slate-600 md:grid-cols-2">
                    <li>{{ __('Every open opportunity has a dated next action. Completing a task or logging an activity asks for the next one.') }}</li>
                    <li>{{ __('Stages are progress, not a sequence. Moving back a stage, or reopening a closed one, needs a written reason.') }}</li>
                    <li>{{ __('Lost needs a loss reason. Deferred needs a reason and a future review date, and leaves the pipeline totals.') }}</li>
                    <li>{{ __('An unknown value is left blank and shown as Not estimated, never as zero.') }}</li>
                </ul>
                <a href="{{ route('crm.settings.stages') }}" wire:navigate class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-800">
                    {{ __('Every stage and its rule') }} <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                </a>
            </x-card>
        @endif

        @if ($tab === 'example')
            <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">{{ __('One sale, start to finish') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Delegate packs for an NGO conference. The names are made up; the rules are the real ones.') }}</p>
                </div>
                <ol class="relative space-y-0 p-4 sm:p-5">
                    @foreach ($example as $step)
                        <li wire:key="example-{{ $loop->index }}" class="relative flex gap-4 pb-6 last:pb-0">
                            @unless ($loop->last)
                                <span class="absolute left-4 top-9 h-[calc(100%-2.25rem)] w-px bg-slate-200" aria-hidden="true"></span>
                            @endunless
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full {{ $step['stage'] === 'won' ? 'bg-emerald-500 text-white' : 'bg-indigo-50 text-indigo-700' }} text-xs font-bold">{{ $loop->iteration }}</span>
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <h3 class="text-sm font-semibold text-slate-900">{{ $step['title'] }}</h3>
                                    <x-badge :color="$step['stage'] === 'won' ? 'emerald' : 'sky'">{{ __(\App\Models\Opportunity::STAGES[$step['stage']]) }}</x-badge>
                                    <span class="text-xs text-slate-400">{{ $step['who'] }}</span>
                                </div>
                                <p class="mt-1 text-sm text-slate-600">{{ $step['body'] }}</p>
                            </div>
                        </li>
                    @endforeach
                </ol>
            </x-card>

            <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">{{ __('How it is counted') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('One sale, counted once in company totals, with each person credited for their part.') }}</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 lg:px-4 py-3.5">{{ __('View') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Who it credits') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Why') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white text-sm">
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Originated') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Farai') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('The list was theirs. Fixed for good.') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Managed') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Rudo') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('The owner when it was won.') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Supported') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Farai') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('A collaborator, because the portfolio is Joint.') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Company total') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('One sale') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('The three views overlap and are never added together.') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Commission') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('The job\'s sales rep') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Unchanged by the CRM roles.') }}</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 p-4 text-sm text-slate-600 sm:p-5">
                    {{ __('Had Rudo gone on leave half way, a handover to Tendai would have kept Rudo the owner until Tendai accepted. Tendai would then be credited under Managed; Farai would still be the originator.') }}
                </div>
            </x-card>
        @endif

        @if ($tab === 'access')
            <x-card class="p-5">
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600"><x-icon name="key" class="h-5 w-5" /></span>
                    <div class="text-sm text-slate-600">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Your access') }}</h2>
                        <p class="mt-1">
                            {{ __('Role: :role.', ['role' => $roleName]) }}
                            @if ($seesTeam)
                                {{ __('You see and manage everyone\'s CRM records.') }}
                            @elseif ($canManage)
                                {{ __('You see everyone\'s records and manage your own and those shared with you.') }}
                            @else
                                {{ __('You can see the CRM but not change it.') }}
                            @endif
                        </p>
                        <p class="mt-1 text-slate-500">{{ __('Roles and each person\'s access are set by the administrator under Users.') }}</p>
                        @if ($isSuperAdmin)
                            <a href="{{ route('admin.users.index') }}" class="mt-2 inline-flex items-center gap-1 font-medium text-indigo-600 hover:text-indigo-800">{{ __('Open Users') }} <x-icon name="arrow-right" class="h-3.5 w-3.5" /></a>
                        @endif
                    </div>
                </div>
            </x-card>

            <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">{{ __('The rule') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Each person manages their own records. Directors and super admins see and manage everyone\'s.') }}</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 lg:px-4 py-3.5">{{ __('Who') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Sees') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Manages') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white text-sm">
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Directors and super admins') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Everything') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Everyone\'s records; approve discounts, credit terms and delivery exceptions; set targets; reassign; merge; restore') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('BD officers') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Every organisation and opportunity, and who owns it') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Their own records and those shared with them; request and follow up quotes, never price them') }}</td></tr>
                            <tr><td class="px-3 lg:px-4 py-3 font-medium text-slate-900">{{ __('Administration') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Everything in the CRM') }}</td><td class="px-3 lg:px-4 py-3 text-slate-600">{{ __('Organisations, quotes, confirming and linking jobs, handovers sent to them') }}</td></tr>
                        </tbody>
                    </table>
                </div>
                <div class="border-t border-slate-100 p-4 text-xs text-slate-500 sm:p-5">
                    {{ __('"Work across the whole team" is what lets someone manage everyone\'s records. Importing, exporting, merging, reassigning, campaigns and targets are each ticked separately.') }}
                </div>
            </x-card>
        @endif
    </div>
</div>