@php
    $tz = config('app.display_timezone');
    $tabMeta = [
        'year' => ['label' => __('Rolling 12 months'), 'icon' => 'calendar'],
        'outreach' => ['label' => __('Upcoming Outreach'), 'icon' => 'megaphone'],
        'unconfirmed' => ['label' => __('Dates to confirm'), 'icon' => 'question-mark-circle'],
        'starter' => ['label' => __('Starter set'), 'icon' => 'sparkles'],
    ];
    $cards = [
        ['key' => 'year', 'label' => __('Next 12 months'), 'value' => $counts['year'], 'icon' => 'calendar', 'accent' => '#d97706', 'sub' => __('Entries on the calendar')],
        ['key' => 'outreach', 'label' => __('Outreach open'), 'value' => $counts['open'], 'icon' => 'megaphone', 'accent' => '#ea580c', 'sub' => __('Windows open now')],
        ['key' => 'outreach', 'label' => __('Opening soon'), 'value' => $counts['soon'], 'icon' => 'clock', 'accent' => '#6366f1', 'sub' => __('Within :weeks weeks', ['weeks' => \App\Services\Crm\Calendar\CommercialCalendarService::UPCOMING_WEEKS])],
        ['key' => 'unconfirmed', 'label' => __('Dates to confirm'), 'value' => $counts['unconfirmed'], 'icon' => 'question-mark-circle', 'accent' => '#64748b', 'sub' => __('Not yet checked')],
    ];
    $statusColor = ['planned' => 'sky', 'in_outreach' => 'orange', 'done' => 'emerald', 'cancelled' => 'slate'];
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';

    // An unconfirmed entry is shown by its month only: its day is not known.
    $when = function (\App\Models\Crm\CalendarEvent $e) use ($tz): string {
        $start = $e->all_day ? $e->starts_at : $e->starts_at->copy()->timezone($tz);

        if (! $e->is_confirmed) {
            return __('Around :month', ['month' => $start->format('F Y')]);
        }

        $text = $start->format($e->all_day ? 'D j M Y' : 'D j M Y, H:i');

        if ($e->ends_at !== null) {
            $end = $e->all_day ? $e->ends_at : $e->ends_at->copy()->timezone($tz);

            if ($end->format('Y-m-d') !== $start->format('Y-m-d')) {
                $text .= ' to '.$end->format('j M Y');
            } elseif (! $e->all_day) {
                $text .= ' to '.$end->format('H:i');
            }
        }

        return $text;
    };
@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="__('Commercial Calendar')">
            <a href="{{ route('crm.calendar') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="calendar-days" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Combined calendar') }}
                </x-secondary-button>
            </a>
            @if ($canCreate)
                <x-button type="button" wire:click="create">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New entry') }}
                </x-button>
            @endif
        </x-page-header>

        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($cards as $m)
                <button type="button" wire:click="switchTab('{{ $m['key'] }}')" class="text-left">
                    <x-card class="group relative flex h-full 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;">{{ number_format($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>
                </button>
            @endforeach
        </section>

        <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 === 'year')
            <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">{{ __('Rolling 12 months') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('From :from to :to. Yearly entries are carried forward automatically and need their new date confirmed.', ['from' => $today->format('j M Y'), 'to' => $today->copy()->addMonths(12)->format('j M Y')]) }}</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">{{ __('When') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Event or opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Outreach starts') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Owner') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($months as $month => $entries)
                                <tr wire:key="month-{{ $month }}" class="bg-slate-50/40">
                                    <td colspan="6" class="px-3 lg:px-4 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">
                                        {{ \Illuminate\Support\Carbon::parse($month.'-01')->format('F Y') }}
                                    </td>
                                </tr>
                                @foreach ($entries as $e)
                                    @include('livewire.crm.commercial-calendar.partials.row', ['e' => $e])
                                @endforeach
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="calendar" :title="__('Nothing on the commercial calendar yet')"
                                            :message="__('Add the fairs, seasons and tender windows your buyers plan around, or start from the proposed starter set.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $monthPage])
            </x-card>
        @elseif ($tab === 'outreach')
            <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">{{ __('Upcoming Outreach') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Windows open now, and those opening in the next :weeks weeks. When a window opens its owner gets a task.', ['weeks' => \App\Services\Crm\Calendar\CommercialCalendarService::UPCOMING_WEEKS]) }}</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">{{ __('Outreach') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Event or opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Takes place') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Owner') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Task') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($upcoming as $e)
                                @php $isOpen = $e->outreach_starts_on->lte($today); @endphp
                                <tr wire:key="upcoming-{{ $e->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if (! $e->is_confirmed)
                                            <x-badge color="slate">{{ __('Confirm the date first') }}</x-badge>
                                        @elseif ($isOpen)
                                            <x-badge color="orange">{{ __('Open now') }}</x-badge>
                                        @else
                                            <span class="text-slate-700">{{ __('Opens :date', ['date' => $e->outreach_starts_on->format('D j M')]) }}</span>
                                            <span class="block text-xs text-slate-400">{{ trans_choice('{1} in 1 day|[2,*] in :count days', $today->diffInDays($e->outreach_starts_on), ['count' => (int) $today->diffInDays($e->outreach_starts_on)]) }}</span>
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <button type="button" wire:click="edit({{ $e->id }})" class="text-left font-medium text-indigo-600 hover:text-indigo-800">{{ $e->title }}</button>
                                        @if ($e->submission_deadline)
                                            <span class="block text-xs text-slate-500">{{ __('Submission deadline :date', ['date' => $e->submission_deadline->format('j M Y')]) }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $when($e) }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $e->owner?->name ?? __('Nobody') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        @if ($e->outreachTask)
                                            <a href="{{ route('crm.tasks.index', ['view' => $e->outreachTask->status === 'open' ? 'open' : 'done']) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">
                                                {{ __(\App\Models\Crm\Task::STATUSES[$e->outreachTask->status] ?? $e->outreachTask->status) }}
                                            </a>
                                        @else
                                            <span class="text-slate-400">{{ __('Raised when the window opens') }}</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="megaphone" :title="__('No outreach due')"
                                            :message="__('Nothing opens in the next :weeks weeks.', ['weeks' => \App\Services\Crm\Calendar\CommercialCalendarService::UPCOMING_WEEKS])" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $upcoming])
            </x-card>
        @elseif ($tab === 'unconfirmed')
            <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">{{ __('Dates to confirm') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Starter entries and yearly entries carried forward. Their dates are guesses: check each with the organiser or the official calendar, edit the date, then confirm. Outreach never opens on an unconfirmed entry.') }}</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">{{ __('When') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Event or opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Owner') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($unconfirmed as $e)
                                @php $canEdit = \Illuminate\Support\Facades\Gate::allows('update', $e); @endphp
                                <tr wire:key="unconfirmed-{{ $e->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                        {{ $when($e) }}
                                        <span class="mt-1 block"><x-badge color="slate">{{ __('Date unconfirmed') }}</x-badge></span>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        <p class="font-medium text-slate-900">{{ $e->title }}</p>
                                        @if ($e->recurs_from_id)
                                            <p class="text-xs text-slate-500">{{ __('Carried forward from last year') }}</p>
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $e->owner?->name ?? __('Nobody') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                        @if ($canEdit)
                                            <div class="flex items-center justify-end gap-3">
                                                <button type="button" wire:click="edit({{ $e->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Set the date') }}</button>
                                                <button type="button" wire:click="confirmEntry({{ $e->id }})" wire:confirm="{{ __('Confirm that :date is the real date?', ['date' => $e->all_day ? $e->starts_at->format('j M Y') : $e->starts_at->copy()->timezone($tz)->format('j M Y')]) }}" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Date is right') }}</button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-12">
                                        <x-empty-state icon="check-circle" :title="__('Every date is confirmed')"
                                            :message="__('Entries carried forward or added from the starter set appear here until their date is checked.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @include('livewire.crm.partials.paginator', ['rows' => $unconfirmed])
            </x-card>
        @else
            <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">{{ __('Proposed starter set') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Occasions buyers commonly plan around. The month is only a hint, not a date. Anything you add arrives unconfirmed, owned by you, and opens no outreach until its real date is checked and confirmed.') }}</p>
                    </div>
                    @if ($canCreate)
                        <x-button type="button" wire:click="addProposals" wire:loading.attr="disabled" wire:target="addProposals" :disabled="$proposals === []">
                            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Add selected as unconfirmed') }}
                        </x-button>
                    @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">
                                <th class="w-10 px-3 lg:px-4 py-3.5"></th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Occasion') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Usual month (hint)') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Outreach lead time') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('What to check') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach (collect($proposalList)->groupBy('group', true) as $group => $items)
                                <tr wire:key="group-{{ \Illuminate\Support\Str::slug($group) }}" class="bg-slate-50/40">
                                    <td colspan="5" class="px-3 lg:px-4 py-2 text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __($group) }}</td>
                                </tr>
                                @foreach ($items as $key => $p)
                                    <tr wire:key="proposal-{{ $key }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-4 text-sm">
                                            @if ($p['added'])
                                                <x-icon name="check-circle" class="h-4 w-4 text-emerald-500" />
                                            @elseif ($canCreate)
                                                <input type="checkbox" value="{{ $key }}" wire:model.live="proposals" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" aria-label="{{ __('Add :title', ['title' => $p['title']]) }}" />
                                            @endif
                                        </td>
                                        <td class="px-3 lg:px-4 py-4 text-sm">
                                            <p class="font-medium text-slate-900">{{ __($p['title']) }}</p>
                                            @if ($p['added'])
                                                <p class="text-xs text-emerald-700">{{ __('Already on the calendar') }}</p>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ __('Around :month', ['month' => $p['lands_on']->format('F')]) }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ trans_choice('{1} 1 week|[2,*] :count weeks', $p['outreach_weeks'], ['count' => $p['outreach_weeks']]) }}</td>
                                        <td class="px-3 lg:px-4 py-4 text-xs text-slate-500">{{ __($p['hint']) }}</td>
                                    </tr>
                                @endforeach
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif
    </div>

    <x-dialog-modal wire:model.live="showForm" maxWidth="3xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit commercial entry') : __('New commercial entry') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="cc-title" value="{{ __('Event or opportunity') }}" />
                    <x-input id="cc-title" type="text" class="mt-1 block w-full" wire:model="title" placeholder="{{ __('e.g. Harare Agricultural Show') }}" />
                    <x-input-error for="title" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-starts" value="{{ __('Starts on') }}" />
                    <x-input id="cc-starts" type="date" class="mt-1 block w-full" wire:model.live="startsOn" />
                    <x-input-error for="startsOn" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-ends" value="{{ __('Ends on (optional)') }}" />
                    <x-input id="cc-ends" type="date" class="mt-1 block w-full" wire:model="endsOn" />
                    <x-input-error for="endsOn" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-start-time" value="{{ __('Start time (leave blank for all day)') }}" />
                    <x-input id="cc-start-time" type="time" class="mt-1 block w-full" wire:model="startsTime" />
                    <x-input-error for="startsTime" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-end-time" value="{{ __('End time') }}" />
                    <x-input id="cc-end-time" type="time" class="mt-1 block w-full" wire:model="endsTime" />
                    <x-input-error for="endsTime" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-size" value="{{ __('Size of the occasion') }}" />
                    <select id="cc-size" wire:model.live="size" class="{{ $select }}">
                        @foreach (\App\Services\Crm\Calendar\CommercialCalendarService::SIZES as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                        <option value="custom">{{ __('Set my own lead time') }}</option>
                    </select>
                </div>
                <div>
                    <x-label for="cc-weeks" value="{{ __('Outreach starts this many weeks before') }}" />
                    <x-input id="cc-weeks" type="number" min="0" max="52" class="mt-1 block w-full" wire:model.live="outreachWeeks" :disabled="$size !== 'custom'" />
                    <x-input-error for="outreachWeeks" class="mt-2" />
                    @if ($startsOn !== '' && preg_match('/^\d{4}-\d{2}-\d{2}$/', $startsOn))
                        <p class="mt-1 text-xs text-slate-500">{{ __('Outreach opens on :date.', ['date' => \Illuminate\Support\Carbon::parse($startsOn)->subWeeks((int) $outreachWeeks)->format('D j M Y')]) }}</p>
                    @endif
                </div>
                <div>
                    <x-label for="cc-deadline" value="{{ __('Submission deadline (optional)') }}" />
                    <x-input id="cc-deadline" type="date" class="mt-1 block w-full" wire:model="submissionDeadline" />
                    <x-input-error for="submissionDeadline" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-owner" value="{{ __('Owner (receives the outreach task)') }}" />
                    <select id="cc-owner" wire:model="ownerId" class="{{ $select }}">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($members as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="ownerId" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-sector" value="{{ __('Sector') }}" />
                    <select id="cc-sector" wire:model="sector" class="{{ $select }}">
                        <option value="">{{ __('Any or several') }}</option>
                        @foreach ($sectors as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <x-label for="cc-location" value="{{ __('Location') }}" />
                    <x-input id="cc-location" type="text" class="mt-1 block w-full" wire:model="location" />
                </div>
                <div>
                    <x-label for="cc-decision" value="{{ __('Decision-maker') }}" />
                    <x-input id="cc-decision" type="text" class="mt-1 block w-full" wire:model="decisionMaker" placeholder="{{ __('e.g. Exhibitor marketing managers') }}" />
                </div>
                <div>
                    <x-label for="cc-products" value="{{ __('Likely products') }}" />
                    <x-input id="cc-products" type="text" class="mt-1 block w-full" wire:model="likelyProducts" placeholder="{{ __('e.g. Banners, brochures, branded gifts') }}" />
                </div>
                <div>
                    <x-label for="cc-next" value="{{ __('Next action') }}" />
                    <x-input id="cc-next" type="text" class="mt-1 block w-full" wire:model="nextAction" />
                    <x-input-error for="nextAction" class="mt-2" />
                </div>
                <div>
                    <x-label for="cc-next-due" value="{{ __('Next action date') }}" />
                    <x-input id="cc-next-due" type="date" class="mt-1 block w-full" wire:model="nextActionDue" />
                    <x-input-error for="nextActionDue" class="mt-2" />
                </div>
                @if ($editingId)
                    <div>
                        <x-label for="cc-status" value="{{ __('Status') }}" />
                        <select id="cc-status" wire:model="status" class="{{ $select }}">
                            @foreach (\App\Models\Crm\CalendarEvent::STATUSES as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="cc-description" value="{{ __('Notes') }}" />
                    <textarea id="cc-description" rows="2" wire:model="description" class="{{ $select }}"></textarea>
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cc-links" value="{{ __('Organisations and opportunities') }}" />
                    <div class="mt-1 flex flex-wrap gap-1.5">
                        @foreach ($linked['organisations'] as $org)
                            <span wire:key="link-org-{{ $org->id }}" class="inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700">
                                <x-icon name="building-office" class="h-3 w-3" /> {{ $org->name }}
                                <button type="button" wire:click="removeLink('organisation', {{ $org->id }})" class="ms-0.5 text-indigo-400 hover:text-indigo-700" aria-label="{{ __('Remove') }}">&times;</button>
                            </span>
                        @endforeach
                        @foreach ($linked['opportunities'] as $opp)
                            <span wire:key="link-opp-{{ $opp->id }}" class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700">
                                <x-icon name="flag" class="h-3 w-3" /> {{ $opp->title }}
                                <button type="button" wire:click="removeLink('opportunity', {{ $opp->id }})" class="ms-0.5 text-emerald-400 hover:text-emerald-700" aria-label="{{ __('Remove') }}">&times;</button>
                            </span>
                        @endforeach
                    </div>
                    <x-input id="cc-links" type="text" class="mt-2 block w-full" wire:model.live.debounce.300ms="linkSearch" placeholder="{{ __('Search organisations and opportunities to link…') }}" />
                    @if ($results['organisations']->isNotEmpty() || $results['opportunities']->isNotEmpty())
                        <ul class="mt-1 divide-y divide-slate-100 rounded-xl border border-slate-200 bg-white text-sm shadow-sm">
                            @foreach ($results['organisations'] as $org)
                                <li wire:key="res-org-{{ $org->id }}"><button type="button" wire:click="addLink('organisation', {{ $org->id }})" class="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-slate-50"><x-icon name="building-office" class="h-3.5 w-3.5 text-slate-400" /> {{ $org->name }}</button></li>
                            @endforeach
                            @foreach ($results['opportunities'] as $opp)
                                <li wire:key="res-opp-{{ $opp->id }}"><button type="button" wire:click="addLink('opportunity', {{ $opp->id }})" class="flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-slate-50"><x-icon name="flag" class="h-3.5 w-3.5 text-slate-400" /> {{ $opp->title }}</button></li>
                            @endforeach
                        </ul>
                    @endif
                </div>

                <label class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5 text-sm text-slate-700 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                    <input type="checkbox" wire:model="annual" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    {{ __('Happens every year (carry it forward)') }}
                </label>
                <label class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2.5 text-sm text-slate-700 has-[:checked]:border-emerald-400 has-[:checked]:bg-emerald-50 has-[:checked]:text-emerald-700">
                    <input type="checkbox" wire:model="isConfirmed" class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500" />
                    {{ __('I have checked this date') }}
                </label>
            </div>
        </x-slot>

        <x-slot name="footer">
            <div class="flex w-full items-center justify-between gap-3">
                <div>
                    @if ($editingId)
                        <button type="button" wire:click="delete({{ $editingId }})" wire:confirm="{{ __('Delete this entry? Its outreach task, if any, is kept.') }}" class="text-sm font-medium text-rose-600 hover:text-rose-800">{{ __('Delete') }}</button>
                    @endif
                </div>
                <div class="flex items-center gap-3">
                    <x-secondary-button wire:click="closeForm" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
                    <x-button 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>
                </div>
            </div>
        </x-slot>
    </x-dialog-modal>
</div>