@php
    $dayNames = [1 => __('Mon'), 2 => __('Tue'), 3 => __('Wed'), 4 => __('Thu'), 5 => __('Fri'), 6 => __('Sat'), 7 => __('Sun')];
    $companyDayText = collect($companyDays)->map(fn (int $d) => $dayNames[$d])->implode(', ');
    $metrics = [
        ['label' => __('On the rota'), 'value' => number_format($stats['on_rota']), 'icon' => 'users', 'accent' => '#6366f1', 'sub' => __('Taking enquiries')],
        ['label' => __('Available now'), 'value' => number_format($stats['available']), 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => $isOpenNow ? __('During working hours') : __('For the next working day')],
        ['label' => __('Shared by the rota'), 'value' => number_format($stats['rota']), 'icon' => 'arrow-path', 'accent' => '#0ea5e9', 'sub' => __('Enquiries this month')],
        ['label' => __('Went to the fallback'), 'value' => number_format($stats['fallback']), 'icon' => 'inbox-arrow-down', 'accent' => '#f59e0b', 'sub' => __('Nobody on the rota available')],
    ];
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $viaColors = ['rota' => 'indigo', 'rule' => 'violet', 'fallback' => 'amber'];
@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.rota'])

        <x-page-header :title="__('Enquiry Rota')" />

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        {{-- Who gets the next one --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Who gets the next enquiry') }}</h2>
                    <p class="text-xs text-slate-400">
                        @if ($isOpenNow)
                            {{ __('Worked out as if an enquiry arrived now, during working hours: attendance counts.') }}
                        @elseif ($nextOpen)
                            {{ __('Outside working hours: an enquiry now is judged on :when, when it will be answered. Days and leave count; attendance is not known yet.', ['when' => $nextOpen->format('l j M, H:i')]) }}
                        @else
                            {{ __('No working days are set in HR settings, so the working clock never runs.') }}
                        @endif
                    </p>
                </div>
                <div class="flex flex-col gap-2 sm:flex-row">
                    <select wire:model.live="trySource" aria-label="{{ __('As if from this source') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any source') }}</option>
                        @foreach ($sourceLabels as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <select wire:model.live="trySector" aria-label="{{ __('As if from this sector') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any sector') }}</option>
                        @foreach ($sectorLabels as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="flex flex-col gap-2 p-4 sm:flex-row sm:items-center sm:gap-4 sm:p-5">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                    <x-icon name="user-plus" class="h-5 w-5" />
                </span>
                <div class="min-w-0">
                    <p class="text-sm text-slate-900">
                        <span class="font-semibold">{{ \App\Models\User::query()->whereKey($choice->userId)->value('name') }}</span>
                        <x-badge :color="$viaColors[$choice->via] ?? 'slate'" class="ml-1">{{ __(\App\Models\Crm\EnquiryRotaMember::ASSIGNED_VIA[$choice->via]) }}</x-badge>
                    </p>
                    <p class="text-sm text-slate-500">{{ $choice->reason }}</p>
                </div>
            </div>
            <p class="border-t border-slate-100 px-4 py-3 text-xs text-slate-500 sm:px-5">
                {{ __('When nobody on the rota is available the enquiry goes to the enquiry owner, :name.', ['name' => $fallbackName]) }}
                @if ($fallbackIsTeamOwner)
                    {{ __('No enquiry owner is named, so that is the team owner.') }}
                @endif
                <a href="{{ route('crm.settings.index') }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Change it on CRM Settings') }}</a>
            </p>
        </x-card>

        {{-- The rota --}}
        <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">{{ __('The rota, in turn order') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Each enquiry goes to the next available person after whoever had the last one. People with routing get matching enquiries first and still take their turn at the rest. Company working days: :days.', ['days' => $companyDayText ?: __('none set')]) }}</p>
                </div>
                @if ($canManage)
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-start">
                        <div>
                            <select wire:model="newUserId" aria-label="{{ __('Person to add') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Add someone…') }}</option>
                                @foreach ($candidates as $person)
                                    <option value="{{ $person->id }}">{{ $person->name }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="newUserId" class="mt-1" />
                        </div>
                        <x-button type="button" wire:click="addMember" wire:loading.attr="disabled" wire:target="addMember">
                            <x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('Add to rota') }}
                        </x-button>
                    </div>
                @endif
            </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">
                            @if ($canManage)
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Order') }}</th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Person') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Takes enquiries on') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Routed to them first') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Right now') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Assigned') }}</th>
                            @if ($canManage)
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($members as $member)
                            @php
                                $own = ! empty($member->working_days);
                                $days = $workingDays($member);
                                $routing = collect((array) ($member->sources ?? []))->map(fn ($v) => $sourceLabels[$v] ?? $v)
                                    ->merge(collect((array) ($member->sectors ?? []))->map(fn ($v) => $sectorLabels[$v] ?? $v));
                                $now = $availability[$member->id];
                            @endphp
                            <tr wire:key="member-{{ $member->id }}" class="transition hover:bg-slate-50/70 {{ $member->is_active ? '' : 'bg-slate-50/40' }}">
                                @if ($canManage)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm text-slate-400">
                                        <div class="flex items-center gap-1">
                                            <button type="button" wire:click="move({{ $member->id }}, -1)" @disabled($loop->first) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move up') }}">
                                                <x-icon name="arrow-up" class="h-3.5 w-3.5" />
                                            </button>
                                            <button type="button" wire:click="move({{ $member->id }}, 1)" @disabled($loop->last) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move down') }}">
                                                <x-icon name="arrow-down" class="h-3.5 w-3.5" />
                                            </button>
                                        </div>
                                    </td>
                                @endif
                                <td class="px-3 lg:px-4 py-3 text-sm">
                                    <span class="font-medium {{ $member->is_active ? 'text-slate-900' : 'text-slate-400' }}">{{ $member->user?->name ?? __('Unknown') }}</span>
                                    @if ($choice->member?->id === $member->id)
                                        <x-badge color="indigo" class="ml-1">{{ __('Next') }}</x-badge>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-3 text-sm text-slate-600">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach ($days as $d)
                                            <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs font-medium text-slate-600">{{ $dayNames[$d] }}</span>
                                        @endforeach
                                    </div>
                                    <p class="mt-1 text-xs text-slate-400">{{ $own ? __('Their own days') : __('Company working days') }}</p>
                                </td>
                                <td class="px-3 lg:px-4 py-3 text-sm text-slate-600">{{ $routing->isEmpty() ? __('Nothing: shares everything in turn') : $routing->implode(', ') }}</td>
                                <td class="px-3 lg:px-4 py-3 text-sm">
                                    @if ($now['available'])
                                        <x-badge color="emerald">{{ __('Available') }}</x-badge>
                                    @else
                                        <x-badge color="slate">{{ __('Skipped') }}</x-badge>
                                    @endif
                                    <p class="mt-1 text-xs text-slate-500">{{ $now['reason'] }}</p>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-600">
                                    {{ number_format($member->assigned_count) }}
                                    <p class="text-xs text-slate-400">{{ $member->last_assigned_at ? __('Last :when', ['when' => $member->last_assigned_at->diffForHumans()]) : __('None yet') }}</p>
                                </td>
                                @if ($canManage)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" wire:click="edit({{ $member->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Days and routing') }}</button>
                                            <button type="button" wire:click="toggle({{ $member->id }})" class="{{ $member->is_active ? 'text-amber-600 hover:text-amber-800' : 'text-emerald-600 hover:text-emerald-800' }} transition">
                                                {{ $member->is_active ? __('Pause') : __('Resume') }}
                                            </button>
                                            <button type="button" wire:click="remove({{ $member->id }})" wire:confirm="{{ __('Take them off the rota? Enquiries they own stay theirs.') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                        </div>
                                    </td>
                                @endif
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ $canManage ? 7 : 5 }}" class="px-6 py-12">
                                    <x-empty-state icon="arrow-path" :title="__('Nobody on the rota')"
                                        :message="__('Until someone is added, every new enquiry goes to the enquiry owner, :name.', ['name' => $fallbackName])" class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>

        <x-card class="p-5">
            <h2 class="text-base font-semibold text-slate-900">{{ __('How "working" is decided') }}</h2>
            <ul class="mt-3 list-disc space-y-1.5 pl-5 text-sm text-slate-600">
                <li>{{ __('Their days: the days set for them here, or the company working days from HR settings. A part-time officer set to Monday to Wednesday only receives enquiries on those days.') }}</li>
                <li>{{ __('Approved leave covering the day, or part-day leave covering the hour the enquiry arrives.') }}</li>
                <li>{{ __('Attendance, during working hours, when the clock is in use: clocked in counts; clocked out or ruled absent does not; someone not in yet is only skipped once their clock-in grace has passed. People who do not use the clock are judged on days and leave only.') }}</li>
                <li>{{ __('Out of hours, an enquiry is judged on the next working day, since that is when it will be answered.') }}</li>
                <li>{{ __('Paused, suspended or removed people are skipped.') }}</li>
            </ul>
        </x-card>
    </div>

    @if ($canManage && $editing)
        <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
            <x-slot name="title">{{ __('Days and routing for :name', ['name' => $editing->user?->name]) }}</x-slot>
            <x-slot name="content">
                <div class="space-y-5">
                    <div>
                        <x-label value="{{ __('Takes enquiries on') }}" />
                        <p class="text-xs text-slate-500">{{ __('Leave all unticked to follow the company working days (:days).', ['days' => $companyDayText ?: __('none set')]) }}</p>
                        <div class="mt-2 flex flex-wrap gap-2">
                            @foreach ($dayNames as $iso => $name)
                                <label wire:key="day-{{ $iso }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $iso }}" wire:model="days" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ $name }}
                                </label>
                            @endforeach
                        </div>
                        <x-input-error for="days" class="mt-2" />
                    </div>
                    <div>
                        <x-label value="{{ __('Sources routed to them first') }}" />
                        <div class="mt-2 flex flex-wrap gap-2">
                            @foreach ($sourceLabels as $value => $label)
                                <label wire:key="source-{{ $value }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $value }}" wire:model="sources" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        <x-input-error for="sources" class="mt-2" />
                    </div>
                    <div>
                        <x-label value="{{ __('Sectors routed to them first') }}" />
                        <p class="text-xs text-slate-500">{{ __('Matched on the organisation\'s sector, so it applies when an enquiry comes from an organisation already on record.') }}</p>
                        <div class="mt-2 flex flex-wrap gap-2">
                            @foreach ($sectorLabels as $value => $label)
                                <label wire:key="sector-{{ $value }}" class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 bg-white px-3 py-1.5 text-sm text-slate-600 transition has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $value }}" wire:model="sectors" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ $label }}
                                </label>
                            @endforeach
                        </div>
                        <x-input-error for="sectors" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showForm', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ __('Save') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>