@php
    $thresholdMeta = [
        'stale_opportunity_days' => ['icon' => 'clock', 'uses' => __('Stale reminders and every count of stale opportunities.')],
        'dormant_account_days' => ['icon' => 'arrow-trending-down', 'uses' => __('Account Development: an account with no order for this long is put up for a dormant review. Nothing changes its lifecycle by itself.')],
        'deleted_recovery_days' => ['icon' => 'archive-box-x-mark', 'uses' => __('Recently Deleted: how long a deleted record can still be restored there.')],
        'import_undo_days' => ['icon' => 'arrow-up-tray', 'uses' => __('Client profile imports: how long an import can be undone, provided nobody has worked its records.')],
        'response_owner_alert_hours' => ['icon' => 'clock', 'uses' => __('Response Times: a new enquiry with no call, email or message logged this long after it arrived alerts its owner. Counted in working hours.')],
        'response_director_alert_hours' => ['icon' => 'bell-alert', 'uses' => __('Response Times: the same, this long after arrival, alerts the directors. Counted in working hours.')],
        'reorder_prompt_weeks' => ['icon' => 'arrow-path', 'uses' => __('Reorder Predictions: the relationship owner gets a task this long before a client\'s next order is expected. A change applies from the next morning\'s run to every prediction nobody has been prompted about yet.')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        @include('livewire.crm.settings.partials.nav', ['current' => 'crm.settings.index'])

        <x-page-header :title="__('CRM Settings')" />

        <x-card class="p-5">
            <h2 class="text-base font-semibold text-slate-900">{{ __('Lead form connection') }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ __('Meta Lead Ads, Google lead forms, or a connector such as Zapier or Make posts to this address. A post without the token is refused and is not kept. Posts then show on Incoming Leads, and an enquiry is opened through the usual path.') }}</p>
            <div class="mt-4 space-y-3" x-data="{ copied: null }">
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Address') }}</p>
                    <div class="mt-1 flex items-center gap-2">
                        <input type="text" readonly value="{{ $leadEndpoint }}" class="block w-full rounded-xl border-slate-200 bg-slate-50 text-xs text-slate-700" />
                        <button type="button" class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800" x-on:click="navigator.clipboard.writeText(@js($leadEndpoint)); copied = 'url'; setTimeout(() => copied = null, 2000)">
                            <span x-show="copied !== 'url'">{{ __('Copy') }}</span>
                            <span x-show="copied === 'url'" x-cloak>{{ __('Copied') }}</span>
                        </button>
                    </div>
                </div>
                <div>
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Token') }}</p>
                    <div class="mt-1 flex items-center gap-2">
                        <input type="text" readonly value="{{ $leadToken }}" class="block w-full rounded-xl border-slate-200 bg-slate-50 font-mono text-xs text-slate-700" />
                        <button type="button" class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800" x-on:click="navigator.clipboard.writeText(@js($leadToken)); copied = 'token'; setTimeout(() => copied = null, 2000)">
                            <span x-show="copied !== 'token'">{{ __('Copy') }}</span>
                            <span x-show="copied === 'token'" x-cloak>{{ __('Copied') }}</span>
                        </button>
                    </div>
                    <p class="mt-2 text-xs text-slate-500">{{ __('Send it as Authorization: Bearer, or as the header X-BillPro-Token. The token is fixed for this workspace.') }}</p>
                </div>
            </div>
            <ol class="mt-4 list-decimal space-y-1 pl-5 text-sm text-slate-600">
                <li>{{ __('Copy the address and the token.') }}</li>
                <li>{{ __('In Meta, Google, Zapier or Make, send each new lead here as JSON, with the token on the request.') }}</li>
                <li>{{ __('Include a name. A company, email, phone and message are used when they are present.') }}</li>
                <li>{{ __('Set the enquiry rota so the new enquiry has an owner. With no rota, it follows the enquiry owner on this page.') }}</li>
            </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">{{ __('Thresholds') }}</h2>
                <p class="text-xs text-slate-400">{{ __('A change applies from now on. Nothing already recorded is altered.') }}</p>
            </div>

            <form wire:submit="saveThresholds">
                <div class="divide-y divide-slate-100">
                    @foreach ($rows as $key => $row)
                        <div wire:key="threshold-{{ $key }}" class="grid grid-cols-1 gap-3 p-4 sm:grid-cols-12 sm:items-center sm:p-5">
                            <div class="flex items-start gap-3 sm:col-span-8">
                                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                                    <x-icon :name="$thresholdMeta[$key]['icon']" class="h-5 w-5" />
                                </span>
                                <div>
                                    <x-label for="threshold-{{ $key }}" value="{{ __($row['label']) }}" />
                                    <p class="mt-0.5 text-xs text-slate-500">{{ $thresholdMeta[$key]['uses'] }}</p>
                                </div>
                            </div>
                            <div class="sm:col-span-4">
                                <div class="flex items-center gap-2">
                                    <x-input id="threshold-{{ $key }}" type="number" min="{{ $row['min'] }}" max="{{ $row['max'] }}" step="1" class="block w-28 text-right tabular-nums" wire:model="thresholds.{{ $key }}" />
                                    <span class="text-sm text-slate-500">{{ __($row['unit']) }}</span>
                                    @if ((int) ($thresholds[$key] ?? 0) !== $row['default'])
                                        <button type="button" wire:click="resetThreshold('{{ $key }}')" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">{{ __('Default is :n', ['n' => $row['default']]) }}</button>
                                    @endif
                                </div>
                                <x-input-error for="thresholds.{{ $key }}" class="mt-2" />
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="flex justify-end border-t border-slate-100 px-4 py-3 sm:px-5">
                    <x-button type="submit" wire:loading.attr="disabled" wire:target="saveThresholds">
                        <span wire:loading.remove wire:target="saveThresholds">{{ __('Save thresholds') }}</span>
                        <span wire:loading wire:target="saveThresholds">{{ __('Saving…') }}</span>
                    </x-button>
                </div>
            </form>
        </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">{{ __('Notifications') }}</h2>
                <p class="text-xs text-slate-400">
                    {{ __('What the CRM tells people, through the bell, the Action Centre and phone alerts. Each person turns phone alerts on for themselves under') }}
                    <a href="{{ route('notifications.index') }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Notifications and app') }}</a>.
                </p>
            </div>

            <form wire:submit="saveEnquiryOwner" class="grid grid-cols-1 gap-3 border-b border-slate-100 p-4 sm:grid-cols-12 sm:items-end sm:p-5">
                <div class="sm:col-span-8">
                    <x-label for="enquiryOwnerId" value="{{ __('Enquiry owner') }}" />
                    <p class="mt-0.5 text-xs text-slate-500">{{ __('Owns every enquiry from the public request form, normally the Marketing Officer. With nobody named, enquiries go to :name, the company owner.', ['name' => $fallbackName ?? __('the company owner')]) }}</p>
                    <select id="enquiryOwnerId" wire:model="enquiryOwnerId" class="mt-2 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Nobody named: the company owner') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="enquiryOwnerId" class="mt-2" />
                </div>
                <div class="sm:col-span-4 sm:text-right">
                    <x-button type="submit" wire:loading.attr="disabled" wire:target="saveEnquiryOwner">{{ __('Save enquiry owner') }}</x-button>
                </div>
            </form>

            <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">{{ __('Notice') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Who is told') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('When') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @foreach ($notices as $notice)
                            <tr wire:key="notice-{{ $loop->index }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-3 text-sm font-medium text-slate-900">
                                    <span class="flex items-center gap-2">
                                        <x-icon :name="$notice['icon']" class="h-4 w-4 text-slate-400" />
                                        {{ __($notice['what']) }}
                                    </span>
                                </td>
                                <td class="px-3 lg:px-4 py-3 text-sm text-slate-600">{{ __($notice['who']) }}</td>
                                <td class="px-3 lg:px-4 py-3 text-sm text-slate-500">{{ __($notice['when']) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </x-card>
    </div>
</div>