@php
    $statusColors = ['idea' => 'slate', 'draft' => 'amber', 'review' => 'sky', 'approved' => 'indigo', 'published' => 'emerald', 'cancelled' => 'rose'];
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $viewMeta = [
        'calendar' => ['label' => __('Calendar'), 'icon' => 'calendar-days'],
        'list' => ['label' => __('List'), 'icon' => 'list-bullet'],
    ];
@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="__('Content Calendar')">
            @if ($canPlan)
                <x-secondary-button type="button" wire:click="openPlan">
                    <x-icon name="chart-pie" class="mr-1.5 h-4 w-4" /> {{ __('Mix and cadence') }}
                </x-secondary-button>
            @endif
            @if ($canCreate)
                <x-button type="button" wire:click="openCreate">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('Plan content') }}
                </x-button>
            @endif
        </x-page-header>

        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-2">
                    <button type="button" wire:click="shiftMonth(-1)" class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700" aria-label="{{ __('Previous month') }}">
                        <x-icon name="chevron-left" class="h-4 w-4" />
                    </button>
                    <p class="min-w-[9rem] text-center text-sm font-semibold text-slate-900">{{ $from->format('F Y') }}</p>
                    <button type="button" wire:click="shiftMonth(1)" class="rounded-lg p-1.5 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700" aria-label="{{ __('Next month') }}">
                        <x-icon name="chevron-right" class="h-4 w-4" />
                    </button>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <select wire:model.live="campaign" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" aria-label="{{ __('Campaign') }}">
                        <option value="">{{ __('All content') }}</option>
                        @foreach ($campaigns as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($viewMeta as $key => $meta)
                            <button type="button" wire:click="switchView('{{ $key }}')"
                                class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $view === $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>
                </div>
            </div>
        </x-card>

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @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>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="min-w-0 lg:col-span-2">
                @if ($view === 'calendar')
                    <x-crm.calendar :events="$events" :date="$from->toDateString()" :legend="['content']"
                        editable :selectable="$canCreate" on-click="openEntry" on-drop="moveEntry" on-select="newEntry" on-range="loadRange" />
                @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">{{ __('Content') }}</h2>
                                <p class="text-xs text-slate-400">{{ $status === '' ? __(':month, and anything not yet dated', ['month' => $from->format('F Y')]) : __('Every month') }}</p>
                            </div>
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                                <div class="relative max-w-xs flex-1">
                                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                                    </span>
                                    <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search titles…') }}"
                                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                                </div>
                                <select wire:model.live="status" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" aria-label="{{ __('Status') }}">
                                    <option value="">{{ __('This month') }}</option>
                                    <option value="mine">{{ __('Waiting for my review') }}</option>
                                    @foreach (\App\Models\Crm\ContentItem::STATUSES as $value => $label)
                                        <option value="{{ $value }}">{{ __($label) }}</option>
                                    @endforeach
                                </select>
                            </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 lg:px-4 py-3.5">{{ __('Publish') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5">{{ __('Title') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5">{{ __('Pillar') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5">{{ __('Reviewer') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 bg-white">
                                    @forelse ($list as $row)
                                        <tr wire:key="content-row-{{ $row->id }}" wire:click="openItem({{ $row->id }})" class="cursor-pointer transition hover:bg-slate-50/70">
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $row->publish_at?->timezone(config('app.display_timezone'))->format('D j M, H:i') ?? __('Not dated') }}</td>
                                            <td class="px-3 lg:px-4 py-4 text-sm">
                                                <span class="font-medium text-slate-900">{{ $row->title }}</span>
                                                <p class="mt-0.5 text-xs text-slate-400">{{ $channels[$row->channel] ?? __('No channel') }}@if ($row->campaign) · {{ $row->campaign->name }}@endif</p>
                                            </td>
                                            <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $pillars[$row->pillar] ?? ($row->pillar ?: '-') }}</td>
                                            <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $row->reviewer?->name ?? __('Not named') }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$statusColors[$row->status] ?? 'slate'">{{ __(\App\Models\Crm\ContentItem::STATUSES[$row->status] ?? $row->status) }}</x-badge></td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="px-6 py-12">
                                                @if (trim($search) !== '')
                                                    <x-empty-state icon="magnifying-glass" :title="__('Nothing matches')" :message="__('Try another title, or clear the search.')" class="border-0 bg-transparent py-0" />
                                                @else
                                                    <x-empty-state icon="photo" :title="__('Nothing planned here')" :message="$canCreate ? __('Plan a post with Plan content, or click a day on the calendar.') : __('Planned content will appear here.')" class="border-0 bg-transparent py-0" />
                                                @endif
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @if ($list->hasPages())
                            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $list->links() }}</div>
                        @endif
                    </x-card>
                @endif
            </div>

            <div class="space-y-6">
                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Pillar mix') }}</h2>
                    <p class="text-xs text-slate-400">{{ __(':month, against the target', ['month' => $from->format('F')]) }}</p>
                    <ul class="mt-4 space-y-3">
                        @foreach ($mix as $value => $row)
                            @php
                                $off = $row['percent'] !== null && $row['target'] !== null && abs($row['percent'] - $row['target']) >= 10;
                            @endphp
                            <li wire:key="mix-{{ $value }}">
                                <div class="flex items-center justify-between text-sm">
                                    <span class="text-slate-700">{{ $row['label'] }}</span>
                                    <span class="whitespace-nowrap tabular-nums {{ $off ? 'font-semibold text-amber-700' : 'text-slate-500' }}">
                                        {{ $row['percent'] === null ? '-' : $row['percent'].'%' }}
                                        <span class="text-slate-400">/ {{ $row['target'] === null ? __('no target') : $row['target'].'%' }}</span>
                                    </span>
                                </div>
                                <div class="relative mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-100">
                                    <div class="h-full rounded-full {{ $off ? 'bg-amber-500' : 'bg-violet-500' }}" style="width: {{ $row['percent'] ?? 0 }}%"></div>
                                    @if ($row['target'] !== null)
                                        <div class="absolute inset-y-0 w-0.5 bg-slate-700" style="left: {{ min(99, $row['target']) }}%" title="{{ __('Target :n%', ['n' => $row['target']]) }}"></div>
                                    @endif
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </x-card>

                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Week by week') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ $delivery['expected'] === null ? __('No cadence set yet.') : __('Planned :n a week across the channels.', ['n' => $weeks[0]['expected'] ?? 0]) }}
                    </p>
                    <ul class="mt-4 space-y-2">
                        @foreach ($weeks as $week)
                            <li wire:key="week-{{ $week['start']->format('Ymd') }}"
                                class="flex items-center justify-between rounded-xl px-3 py-2 text-sm {{ $week['empty'] ? 'bg-rose-50 text-rose-800 ring-1 ring-rose-200' : ($week['short'] ? 'bg-amber-50 text-amber-800' : 'bg-slate-50 text-slate-700') }}">
                                <span class="whitespace-nowrap">{{ $week['start']->format('j M') }} &ndash; {{ $week['end']->format('j M') }}</span>
                                <span class="whitespace-nowrap tabular-nums">
                                    @if ($week['empty'])
                                        <x-icon name="exclamation-triangle" class="mr-1 inline h-3.5 w-3.5" />{{ __('Nothing planned') }}
                                    @else
                                        {{ $week['expected'] === null ? __(':n planned', ['n' => $week['planned']]) : __(':n of :of', ['n' => $week['planned'], 'of' => $week['expected']]) }}
                                        @if ($week['published'] > 0)<span class="text-xs text-slate-400"> · {{ __(':n out', ['n' => $week['published']]) }}</span>@endif
                                    @endif
                                </span>
                            </li>
                        @endforeach
                    </ul>
                </x-card>
            </div>
        </div>
    </div>

    {{-- Item --}}
    <x-dialog-modal wire:model.live="showItem" maxWidth="2xl">
        <x-slot name="title">
            <span class="flex items-center gap-2">
                {{ $itemId ? __('Content item') : __('Plan content') }}
                @if ($item)
                    <x-badge :color="$statusColors[$item->status] ?? 'slate'">{{ __(\App\Models\Crm\ContentItem::STATUSES[$item->status] ?? $item->status) }}</x-badge>
                @endif
            </span>
        </x-slot>
        <x-slot name="content">
            @php $locked = ! $canEditItem || ($item && in_array($item->status, ['published', 'cancelled'], true)); @endphp
            <x-input-error for="itStatus" class="mb-4 rounded-xl bg-rose-50 px-3 py-2" />

            @if ($item && $item->status === 'review')
                <p class="mb-4 rounded-xl bg-sky-50 px-3 py-2 text-sm text-sky-800">
                    {{ $isReviewer ? __('You are the reviewer. Approve it, or send it back with what to change.') : __('Waiting for :name to review it.', ['name' => $item->reviewer?->name ?? __('the reviewer')]) }}
                </p>
            @elseif ($item && $item->isApproved() && $item->status === 'approved')
                <p class="mb-4 rounded-xl bg-indigo-50 px-3 py-2 text-sm text-indigo-800">
                    {{ __('Approved by :name on :date. Changing the words sends it back for review.', ['name' => $item->approvedBy?->name ?? __('the reviewer'), 'date' => $item->approved_at->timezone(config('app.display_timezone'))->format('j M Y')]) }}
                </p>
            @elseif ($item && $item->status === 'published')
                <p class="mb-4 rounded-xl bg-emerald-50 px-3 py-2 text-sm text-emerald-800">
                    {{ __('Published :date.', ['date' => $item->published_at?->timezone(config('app.display_timezone'))->format('j M Y')]) }}
                    @if ($item->published_url)
                        <a href="{{ $item->published_url }}" target="_blank" rel="noopener" class="font-medium underline">{{ __('Open the post') }}</a>
                    @endif
                </p>
            @endif

            <fieldset @disabled($locked) class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="ci-title" value="{{ __('Title') }}" />
                    <x-input id="ci-title" type="text" class="mt-1 block w-full" wire:model="itTitle" />
                    <x-input-error for="itTitle" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-pillar" value="{{ __('Pillar') }}" />
                    <select id="ci-pillar" wire:model="itPillar" class="{{ $select }}">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($pillars as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="itPillar" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-channel" value="{{ __('Channel') }}" />
                    <select id="ci-channel" wire:model="itChannel" class="{{ $select }}">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($channels as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="itChannel" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-date" value="{{ __('Publish on') }}" />
                    <x-input id="ci-date" type="date" class="mt-1 block w-full" wire:model="itDate" />
                    <x-input-error for="itDate" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-time" value="{{ __('At') }}" />
                    <x-input id="ci-time" type="time" class="mt-1 block w-full" wire:model="itTime" />
                </div>
                <div>
                    <x-label for="ci-author" value="{{ __('Author') }}" />
                    <select id="ci-author" wire:model="itAuthorId" class="{{ $select }}">
                        @foreach ($teamUsers as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="itAuthorId" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-reviewer" value="{{ __('Reviewer') }}" />
                    <select id="ci-reviewer" wire:model="itReviewerId" class="{{ $select }}">
                        <option value="">{{ __('Not named yet') }}</option>
                        @foreach ($teamUsers as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="itReviewerId" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-campaign" value="{{ __('Campaign (optional)') }}" />
                    <select id="ci-campaign" wire:model="itCampaignId" class="{{ $select }}">
                        <option value="">{{ __('None') }}</option>
                        @foreach ($campaigns as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="itCampaignId" class="mt-2" />
                </div>
                <div>
                    <x-label for="ci-job" value="{{ __('Case study job (optional)') }}" />
                    <select id="ci-job" wire:model="itJobId" class="{{ $select }}">
                        <option value="">{{ __('None') }}</option>
                        @if ($item?->job && ! $jobs->contains('id', $item->job_id))
                            <option value="{{ $item->job->id }}">{{ $item->job->job_number }}, {{ $item->job->title }}</option>
                        @endif
                        @foreach ($jobs as $job)
                            <option value="{{ $job->id }}">{{ $job->job_number }}{{ $job->title ? ', '.$job->title : '' }}{{ $job->showcase_consent ? '' : ' ('.__('consent not recorded').')' }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">{{ __('Work from Showcase. It can only be published once the client has agreed.') }}</p>
                    <x-input-error for="itJobId" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="ci-body" value="{{ __('Copy') }}" />
                    <textarea id="ci-body" rows="4" wire:model="itBody" class="{{ $select }}"></textarea>
                    <x-input-error for="itBody" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="ci-cta" value="{{ __('Call to action') }}" />
                    <x-input id="ci-cta" type="text" class="mt-1 block w-full" wire:model="itCallToAction" />
                    <x-input-error for="itCallToAction" class="mt-2" />
                </div>
                @if ($item && $item->status === 'approved')
                    <div class="sm:col-span-2">
                        <x-label for="ci-url" value="{{ __('Link to the published post (optional)') }}" />
                        <x-input id="ci-url" type="url" class="mt-1 block w-full" wire:model="publishedUrl" placeholder="https://" />
                    </div>
                @endif
            </fieldset>
        </x-slot>
        <x-slot name="footer">
            <div class="flex w-full flex-wrap items-center justify-between gap-2">
                <div class="flex flex-wrap gap-2">
                    @if ($item && $canEditItem && in_array('cancelled', $transitions, true))
                        <x-secondary-button wire:click="moveItem('cancelled')" wire:confirm="{{ __('Cancel this item?') }}">{{ __('Cancel item') }}</x-secondary-button>
                    @endif
                    @if ($item && $canEditItem && $item->status === 'cancelled')
                        <x-secondary-button wire:click="moveItem('idea')">{{ __('Restore as an idea') }}</x-secondary-button>
                    @endif
                </div>
                <div class="flex flex-wrap justify-end gap-2">
                    <x-secondary-button wire:click="$set('showItem', false)" wire:loading.attr="disabled">{{ __('Close') }}</x-secondary-button>
                    @if (! $locked)
                        <x-secondary-button wire:click="saveItem" wire:loading.attr="disabled" wire:target="saveItem">
                            <span wire:loading.remove wire:target="saveItem">{{ __('Save') }}</span>
                            <span wire:loading wire:target="saveItem">{{ __('Saving…') }}</span>
                        </x-secondary-button>
                    @endif
                    @if ($item && $canEditItem && in_array($item->status, ['idea'], true))
                        <x-button wire:click="moveItem('draft')">{{ __('Start drafting') }}</x-button>
                    @elseif ($item && $canEditItem && $item->status === 'draft')
                        <x-button wire:click="moveItem('review')">{{ __('Send for review') }}</x-button>
                    @elseif ($item && $item->status === 'review' && $isReviewer)
                        <x-secondary-button wire:click="moveItem('draft')">{{ __('Request changes') }}</x-secondary-button>
                        <x-button wire:click="moveItem('approved')">{{ __('Approve') }}</x-button>
                    @elseif ($item && $canEditItem && $item->status === 'approved')
                        <x-button wire:click="moveItem('published')">{{ __('Mark published') }}</x-button>
                    @endif
                </div>
            </div>
        </x-slot>
    </x-dialog-modal>

    {{-- Mix and cadence --}}
    @if ($canPlan)
        <x-dialog-modal wire:model.live="showPlan" maxWidth="xl">
            <x-slot name="title">{{ __('Target mix and cadence') }}</x-slot>
            <x-slot name="content">
                <x-input-error for="planMix" class="mb-4 rounded-xl bg-rose-50 px-3 py-2" />
                <p class="text-sm font-semibold text-slate-900">{{ __('Target mix by pillar (%)') }}</p>
                <p class="text-xs text-slate-500">{{ __('Leave all blank for no target, or make them add up to 100.') }}</p>
                <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                    @foreach ($pillars as $value => $label)
                        <div wire:key="plan-mix-{{ $value }}">
                            <x-label for="mix-{{ $value }}" value="{{ $label }}" />
                            <x-input id="mix-{{ $value }}" type="number" min="0" max="100" class="mt-1 block w-full" wire:model="planMix.{{ $value }}" />
                        </div>
                    @endforeach
                </div>
                <p class="mt-6 text-sm font-semibold text-slate-900">{{ __('Planned posts a week, per channel') }}</p>
                <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                    @foreach ($channels as $value => $label)
                        <div wire:key="plan-cadence-{{ $value }}">
                            <x-label for="cad-{{ $value }}" value="{{ $label }}" />
                            <x-input id="cad-{{ $value }}" type="number" min="0" max="50" class="mt-1 block w-full" wire:model="planCadence.{{ $value }}" />
                        </div>
                    @endforeach
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showPlan', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="savePlan" wire:loading.attr="disabled" wire:target="savePlan">
                    <span wire:loading.remove wire:target="savePlan">{{ __('Save') }}</span>
                    <span wire:loading wire:target="savePlan">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>