@php
    $num = fn ($v): string => rtrim(rtrim(number_format((float) $v, 2), '0'), '.');
@endphp

<div id="business-development">
    <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">{{ __('Business development targets') }}</h2>
                <p class="text-xs text-slate-400">{{ __('Per officer and period, from each Performance Agreement. A target counts once someone other than the officer approves it; after that it is revised, never overwritten.') }}</p>
            </div>
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                <select wire:model.live="officerFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Every officer') }}</option>
                    @foreach ($members as $member)
                        <option value="{{ $member->id }}">{{ $member->name }}</option>
                    @endforeach
                </select>
                @if ($canSet)
                    <x-button type="button" wire:click="create">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Set a target') }}
                    </x-button>
                @endif
            </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">{{ __('Officer') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Measure') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Period') }}</th>
                        <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Target') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('In force') }}</th>
                        <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                        <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 bg-white">
                    @forelse ($rows as $row)
                        @php($t = $row['target'])
                        <tr wire:key="crm-target-{{ $t->id }}" class="transition hover:bg-slate-50/70">
                            <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $t->user?->name ?? __('Not available') }}</td>
                            <td class="px-3 py-4 text-sm text-slate-700 lg:px-4">
                                {{ __($metrics[$t->metric] ?? $t->metric) }}
                                @if (in_array($t->metric, $notMeasured, true))
                                    <span class="block text-xs text-slate-400">{{ __('Actual not measured yet') }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ __($periods[$t->period] ?? ucfirst($t->period)) }}</td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums font-semibold text-slate-900 lg:px-4">
                                {{ $num($t->value) }}{{ $t->metric === 'crm_record_completeness' ? '%' : '' }}
                                @if ($t->revision > 1)
                                    <span class="block text-[11px] font-normal text-slate-400">{{ __('Revision :n', ['n' => $t->revision]) }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                {{ $t->effective_from->format('j M Y') }}
                                {{ __('to') }}
                                {{ $t->effective_to?->format('j M Y') ?? __('open') }}
                            </td>
                            <td class="px-3 py-4 text-sm lg:px-4">
                                @if ($row['status'] === 'draft')
                                    <x-badge color="amber">{{ $statuses['draft'] }}</x-badge>
                                @elseif ($row['ended'])
                                    <x-badge color="slate">{{ __('Ended') }}</x-badge>
                                @else
                                    <x-badge color="emerald">{{ $statuses['approved'] }}</x-badge>
                                @endif
                                @if ($t->approver)
                                    <span class="mt-1 block text-xs text-slate-400">{{ __('by :name', ['name' => $t->approver->name]) }}</span>
                                @endif
                                @if ($row['pendingRevision'])
                                    <span class="mt-1 block whitespace-nowrap text-xs text-amber-600">
                                        {{ __('Revision to :value from :date awaiting approval', ['value' => $num($row['pendingRevision']->value), 'date' => $row['pendingRevision']->effective_from->format('j M Y')]) }}
                                    </span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                <div class="flex items-center justify-end gap-3">
                                    @php($approvable = $row['status'] === 'draft' ? $t : $row['pendingRevision'])
                                    @if ($approvable)
                                        @can('approve', $approvable)
                                            <button type="button" wire:click="approve({{ $approvable->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Approve') }}</button>
                                        @endcan
                                    @endif
                                    @if ($canSet && ! $row['pendingRevision'] && ! $row['ended'])
                                        <button type="button" wire:click="edit({{ $t->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ $row['status'] === 'draft' ? __('Edit') : __('Revise') }}</button>
                                    @endif
                                    @if ($t->revision > 1 || $row['pendingRevision'])
                                        <button type="button" wire:click="history({{ $t->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('History') }}</button>
                                    @endif
                                    @if ($canSet && $row['status'] === 'draft')
                                        <button type="button" wire:click="discard({{ $t->id }})" wire:confirm="{{ __('Discard this target? It was never approved.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Discard') }}</button>
                                    @endif
                                    @if ($row['pendingRevision'] && $canSet)
                                        <button type="button" wire:click="discard({{ $row['pendingRevision']->id }})" wire:confirm="{{ __('Discard the revision? The current target stays in force.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Discard revision') }}</button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-6 py-12">
                                <x-empty-state icon="flag" :title="__('No business development targets')"
                                    :message="__('Directors set each officer\'s targets from their Performance Agreement. Until then the Performance screen shows actuals with no target.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $rows])
    </x-card>

    @if ($canSet)
        <x-dialog-modal wire:model.live="showForm" maxWidth="xl">
            <x-slot name="title">
                @if ($revisingId)
                    {{ __('Revise a target') }}
                @elseif ($editingId)
                    {{ __('Change a target awaiting approval') }}
                @else
                    {{ __('Set a business development target') }}
                @endif
            </x-slot>
            <x-slot name="content">
                @if ($revising)
                    <p class="mb-4 rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-800">
                        {{ __('The current target of :value stays in force until this revision is approved. Approving it closes the current one the day before the revision starts.', ['value' => $num($revising->value)]) }}
                    </p>
                @endif
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="crm_target_user" :value="__('Officer')" />
                        <select id="crm_target_user" wire:model="user_id" @disabled($revisingId) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50 disabled:text-slate-500">
                            <option value="">{{ __('Choose…') }}</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="user_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="crm_target_metric" :value="__('Measure')" />
                        <select id="crm_target_metric" wire:model="metric" @disabled($revisingId) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50 disabled:text-slate-500">
                            <option value="">{{ __('Choose…') }}</option>
                            @foreach ($metrics as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}{{ in_array($key, $notMeasured, true) ? ' ('.__('not measured yet').')' : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="metric" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="crm_target_period" :value="__('Period')" />
                        <select id="crm_target_period" wire:model="period" @disabled($revisingId) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50 disabled:text-slate-500">
                            @foreach ($periods as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="period" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="crm_target_value" :value="__('Target for each period')" />
                        <x-input id="crm_target_value" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="value" placeholder="{{ __('From the Performance Agreement') }}" />
                        <x-input-error for="value" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="crm_target_from" :value="__('In force from')" />
                        <x-input id="crm_target_from" type="date" class="mt-1 block w-full" wire:model="effective_from" />
                        <x-input-error for="effective_from" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="crm_target_to" :value="__('Until (optional)')" />
                        <x-input id="crm_target_to" type="date" class="mt-1 block w-full" wire:model="effective_to" />
                        <x-input-error for="effective_to" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="crm_target_note" :value="$revisingId ? __('Why is it being revised?') : __('Note (optional)')" />
                        <textarea id="crm_target_note" rows="2" wire:model="revision_note" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="revision_note" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button type="button" wire:click="closeModals">{{ __('Cancel') }}</x-secondary-button>
                <x-button type="button" class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ $revisingId ? __('Save revision') : __('Save') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    <x-dialog-modal wire:model.live="showHistory" maxWidth="2xl">
        <x-slot name="title">{{ __('Target history') }}</x-slot>
        <x-slot name="content">
            <ol class="space-y-3">
                @foreach ($history as $version)
                    <li wire:key="history-{{ $version->id }}" class="rounded-xl border border-slate-200 p-3 text-sm">
                        <div class="flex flex-wrap items-center justify-between gap-2">
                            <span class="font-semibold text-slate-900">{{ __('Revision :n', ['n' => $version->revision]) }}: {{ $num($version->value) }}</span>
                            @if ($version->approved_at)
                                <x-badge color="emerald">{{ __('Approved :date by :name', ['date' => $version->approved_at->timezone(config('app.display_timezone'))->format('j M Y'), 'name' => $version->approver?->name ?? __('Not available')]) }}</x-badge>
                            @else
                                <x-badge color="amber">{{ $statuses['draft'] }}</x-badge>
                            @endif
                        </div>
                        <p class="mt-1 text-xs text-slate-500">
                            {{ __('In force :from to :to. Set by :name.', ['from' => $version->effective_from->format('j M Y'), 'to' => $version->effective_to?->format('j M Y') ?? __('open'), 'name' => $version->creator?->name ?? __('Not available')]) }}
                        </p>
                        @if ($version->revision_note)
                            <p class="mt-1 text-xs text-slate-700">{{ $version->revision_note }}</p>
                        @endif
                    </li>
                @endforeach
            </ol>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button type="button" wire:click="closeModals">{{ __('Close') }}</x-secondary-button>
        </x-slot>
    </x-dialog-modal>
</div>