@php
    $tz = config('app.display_timezone');
    $select = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $statusColor = ['draft' => 'amber', 'confirmed' => 'sky', 'completed' => 'emerald'];
    $attendeeIcon = ['user' => 'user', 'contact' => 'user-circle', 'other' => 'users'];
    $tagLists = [
        'need' => ['label' => __('Need tags'), 'tags' => $needTags, 'input' => 'needTagInput', 'chip' => 'bg-indigo-50 text-indigo-700', 'hint' => __('e.g. banners, annual report')],
        'competitor' => ['label' => __('Competitors mentioned'), 'tags' => $competitorTags, 'input' => 'competitorTagInput', 'chip' => 'bg-rose-50 text-rose-700', 'hint' => __('e.g. a rival printer')],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-5xl space-y-6">
        <div>
            <a href="{{ route('crm.meetings.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Meeting Notes') }}
            </a>
            <div class="mt-2 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                <div>
                    <h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ $note->title }}</h1>
                    <p class="mt-1 flex flex-wrap items-center gap-2 text-sm text-slate-500">
                        <x-badge :color="$statusColor[$note->status] ?? 'slate'">{{ __(\App\Models\Crm\MeetingNote::STATUSES[$note->status] ?? $note->status) }}</x-badge>
                        <span>{{ __('Written by :name', ['name' => $note->author?->name ?? __('Unknown')]) }}</span>
                        @if ($note->source !== 'manual')
                            <span>· {{ __(\App\Models\Crm\MeetingNote::SOURCES[$note->source] ?? $note->source) }}</span>
                        @endif
                        @if ($note->confirmed_at)
                            <span>· {{ __('Confirmed by :name on :date', ['name' => $note->confirmedBy?->name ?? __('Unknown'), 'date' => $note->confirmed_at->copy()->timezone($tz)->format('j M Y')]) }}</span>
                        @endif
                    </p>
                </div>
                @if ($canEdit)
                    <div class="flex flex-wrap items-center gap-2">
                        @if ($note->status === 'draft')
                            <button type="button" wire:click="deleteDraft" wire:confirm="{{ __('Delete this draft?') }}" class="px-2 text-sm font-medium text-rose-600 hover:text-rose-800">{{ __('Delete draft') }}</button>
                        @endif
                        @if ($canCollectNotes)
                            <x-secondary-button type="button" wire:click="collectNotes" wire:loading.attr="disabled" wire:target="collectNotes">
                                <x-icon name="sparkles" class="-ms-1 me-1.5 h-4 w-4" />
                                <span wire:loading.remove wire:target="collectNotes">{{ __('Collect notes now') }}</span>
                                <span wire:loading wire:target="collectNotes">{{ __('Asking Google…') }}</span>
                            </x-secondary-button>
                        @endif
                        <x-secondary-button type="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-secondary-button>
                        @if ($note->status === 'draft')
                            <x-button type="button" wire:click="confirmNote" wire:loading.attr="disabled" wire:target="confirmNote" wire:confirm="{{ __('Confirm this note as the record of the meeting? Its actions become tasks for the people named.') }}">
                                <x-icon name="check" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Confirm as record') }}
                            </x-button>
                        @elseif ($note->status === 'confirmed')
                            <x-button type="button" wire:click="$set('showComplete', true)">
                                <x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Complete') }}
                            </x-button>
                        @endif
                    </div>
                @endif
            </div>
        </div>

        @if ($note->status === 'draft')
            <div class="rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                {{ __('This is a draft. It does not count as a record, and its actions are not tasks, until it is reviewed and confirmed.') }}
            </div>
        @endif

        @if ($note->status === 'completed')
            <x-card class="overflow-hidden !p-0">
                @include('livewire.crm.meetings.partials.section', ['icon' => 'check-circle', 'title' => __('Outcome')])
                <p class="whitespace-pre-line p-5 text-sm text-slate-700">{{ $note->outcome }}</p>
            </x-card>
        @endif

        <fieldset @disabled(! $canEdit) class="space-y-6">
            <x-card class="overflow-hidden !p-0">
                @include('livewire.crm.meetings.partials.section', ['icon' => 'calendar-days', 'title' => __('When and with whom')])
                <div class="space-y-4 p-5">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-12">
                        <div class="sm:col-span-6">
                            <x-label for="n-title" value="{{ __('Meeting') }}" />
                            <x-input id="n-title" type="text" class="mt-1 block w-full" wire:model="title" />
                            <x-input-error for="title" class="mt-2" />
                        </div>
                        <div class="sm:col-span-3">
                            <x-label for="n-date" value="{{ __('Held on') }}" />
                            <x-input id="n-date" type="date" class="mt-1 block w-full" wire:model="heldOn" />
                            <x-input-error for="heldOn" class="mt-2" />
                        </div>
                        <div class="sm:col-span-3">
                            <x-label for="n-time" value="{{ __('At') }}" />
                            <x-input id="n-time" type="time" class="mt-1 block w-full" wire:model="heldTime" />
                        </div>
                        @if ($canEdit)
                            <div class="sm:col-span-6">
                                <x-label for="n-opportunity" value="{{ __('Opportunity') }}" />
                                <select id="n-opportunity" wire:model.live="opportunityId" class="{{ $select }}">
                                    <option value="">{{ __('None') }}</option>
                                    @foreach ($opportunities as $opportunity)
                                        <option value="{{ $opportunity->id }}">{{ $opportunity->title }}</option>
                                    @endforeach
                                </select>
                                <x-input-error for="opportunityId" class="mt-2" />
                            </div>
                            <div class="sm:col-span-6">
                                @if ($opportunityId)
                                    <x-label value="{{ __('Organisation') }}" />
                                    <p class="mt-2 text-sm text-slate-700">{{ $note->customer?->name ?? __('From the opportunity') }}</p>
                                @else
                                    <x-label for="n-organisation" value="{{ __('Organisation') }}" />
                                    <select id="n-organisation" wire:model.live="customerId" class="{{ $select }}">
                                        <option value="">{{ __('None') }}</option>
                                        @foreach ($organisations as $organisation)
                                            <option value="{{ $organisation->id }}">{{ $organisation->name }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error for="customerId" class="mt-2" />
                                @endif
                            </div>
                        @else
                            <div class="sm:col-span-12 text-sm text-slate-700">
                                @include('livewire.crm.meetings.partials.regarding', ['row' => $note])
                            </div>
                        @endif
                    </div>

                    <div>
                        <x-label value="{{ __('Attendees') }}" />
                        <div class="mt-2 flex flex-wrap gap-1.5">
                            @forelse ($attendees as $i => $attendee)
                                <span wire:key="attendee-{{ $i }}" class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium {{ $attendee['type'] === 'contact' ? 'bg-emerald-50 text-emerald-700' : ($attendee['type'] === 'user' ? 'bg-indigo-50 text-indigo-700' : 'bg-slate-100 text-slate-700') }}">
                                    <x-icon :name="$attendeeIcon[$attendee['type']] ?? 'user'" class="h-3 w-3" />
                                    {{ $attendee['name'] }}
                                    @if ($canEdit)
                                        <button type="button" wire:click="removeAttendee({{ $i }})" class="ms-0.5 opacity-60 hover:opacity-100" aria-label="{{ __('Remove :name', ['name' => $attendee['name']]) }}">&times;</button>
                                    @endif
                                </span>
                            @empty
                                <span class="text-sm text-slate-400">{{ __('Nobody recorded yet.') }}</span>
                            @endforelse
                        </div>
                        <x-input-error for="attendees" class="mt-2" />
                        @if ($canEdit)
                            <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                                <div class="flex items-end gap-2">
                                    <select wire:model="staffToAdd" class="{{ $select }}" aria-label="{{ __('Staff member') }}">
                                        <option value="">{{ __('Staff member…') }}</option>
                                        @foreach ($members as $member)
                                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                                        @endforeach
                                    </select>
                                    <x-secondary-button type="button" wire:click="addAttendee('user')">{{ __('Add') }}</x-secondary-button>
                                </div>
                                <div class="flex items-end gap-2">
                                    <select wire:model="contactToAdd" class="{{ $select }}" aria-label="{{ __('Client contact') }}">
                                        <option value="">{{ $contacts->isEmpty() ? __('No contacts on file') : __('Client contact…') }}</option>
                                        @foreach ($contacts as $contact)
                                            <option value="{{ $contact->id }}">{{ $contact->name }}{{ $contact->title ? ', '.$contact->title : '' }}</option>
                                        @endforeach
                                    </select>
                                    <x-secondary-button type="button" wire:click="addAttendee('contact')">{{ __('Add') }}</x-secondary-button>
                                </div>
                                <div class="flex items-end gap-2">
                                    <x-input type="text" class="mt-1 block w-full" wire:model="otherAttendee" wire:keydown.enter.prevent="addAttendee('other')" placeholder="{{ __('Someone else…') }}" aria-label="{{ __('Someone else') }}" />
                                    <x-secondary-button type="button" wire:click="addAttendee('other')">{{ __('Add') }}</x-secondary-button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </x-card>

            <x-card class="overflow-hidden !p-0">
                @include('livewire.crm.meetings.partials.section', ['icon' => 'chat-bubble-left-right', 'title' => __('What was discussed')])
                <div class="grid grid-cols-1 gap-4 p-5 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="n-purpose" value="{{ __('Purpose') }}" />
                        <textarea id="n-purpose" rows="2" wire:model="purpose" class="{{ $select }}" placeholder="{{ __('Why the meeting was held') }}"></textarea>
                    </div>
                    <div>
                        <x-label for="n-needs" value="{{ __('Needs raised') }}" />
                        <textarea id="n-needs" rows="4" wire:model="needs" class="{{ $select }}" placeholder="{{ __('What the client needs: products, quantities, dates, budget') }}"></textarea>
                        <x-input-error for="needs" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="n-decisions" value="{{ __('Decisions') }}" />
                        <textarea id="n-decisions" rows="4" wire:model="decisions" class="{{ $select }}" placeholder="{{ __('What was agreed') }}"></textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="n-commitments" value="{{ __('Commitments') }}" />
                        <textarea id="n-commitments" rows="2" wire:model="commitments" class="{{ $select }}" placeholder="{{ __('What each side promised') }}"></textarea>
                    </div>
                    @foreach ($tagLists as $list => $meta)
                        <div>
                            <x-label for="n-{{ $list }}-tags" value="{{ $meta['label'] }}" />
                            <div class="mt-1 flex flex-wrap gap-1.5">
                                @foreach ($meta['tags'] as $i => $tag)
                                    <span wire:key="{{ $list }}-tag-{{ $i }}" class="inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-medium {{ $meta['chip'] }}">
                                        <x-icon name="tag" class="h-3 w-3" /> {{ $tag }}
                                        @if ($canEdit)
                                            <button type="button" wire:click="removeTag('{{ $list }}', {{ $i }})" class="ms-0.5 opacity-60 hover:opacity-100" aria-label="{{ __('Remove') }}">&times;</button>
                                        @endif
                                    </span>
                                @endforeach
                            </div>
                            @if ($canEdit)
                                <div class="mt-2 flex items-center gap-2">
                                    <x-input id="n-{{ $list }}-tags" type="text" class="block w-full" wire:model="{{ $meta['input'] }}" wire:keydown.enter.prevent="addTag('{{ $list }}')" placeholder="{{ $meta['hint'] }}" />
                                    <x-secondary-button type="button" wire:click="addTag('{{ $list }}')">{{ __('Add') }}</x-secondary-button>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            </x-card>
        </fieldset>

            {{-- Outside the fieldset: an assignee works their task even when the note is read-only. --}}
            <x-card class="overflow-hidden !p-0">
                @include('livewire.crm.meetings.partials.section', ['icon' => 'clipboard-document-check', 'title' => __('Actions')])
                <div class="space-y-3 p-5">
                    <p class="text-xs text-slate-500">
                        {{ $note->status === 'draft'
                            ? __('Each action becomes a task for the person named when the note is confirmed.')
                            : __('Each action is a task. New actions become tasks when you save.') }}
                    </p>
                    <x-input-error for="actions" />
                    @foreach ($actions as $i => $action)
                        @php $task = $action['task_id'] ? ($tasks[$action['task_id']] ?? null) : null; @endphp
                        @if ($action['task_id'])
                            <div wire:key="action-{{ $action['key'] }}" class="flex flex-col gap-2 rounded-xl border border-slate-200 bg-slate-50/60 p-3 sm:flex-row sm:items-center sm:justify-between">
                                <div class="text-sm">
                                    <p class="font-medium text-slate-900">{{ $action['text'] }}</p>
                                    <p class="text-xs text-slate-500">
                                        {{ $task?->assignee?->name ?? __('Unknown') }}
                                        · {{ __('due :date', ['date' => $task?->due_at?->copy()->timezone($tz)->format('j M Y') ?? $action['due']]) }}
                                        · <span class="{{ $task?->isOverdue() ? 'font-semibold text-rose-600' : '' }}">{{ __(\App\Models\Crm\Task::STATUSES[$task?->status ?? 'open'] ?? '') }}</span>
                                    </p>
                                    @if ($task && $task->outcome)
                                        <p class="mt-1 text-xs text-slate-600"><span class="font-medium">{{ __('Outcome') }}:</span> {{ $task->outcome }}</p>
                                    @endif
                                </div>
                                @if ($task && $task->isOpen() && \Illuminate\Support\Facades\Gate::allows('update', $task))
                                    <div class="flex shrink-0 items-center gap-3 text-sm font-medium">
                                        <button type="button" wire:click="$dispatch('crm-task-complete', { id: {{ $task->id }} })" class="text-emerald-600 hover:text-emerald-800">{{ __('Complete') }}</button>
                                        <button type="button" wire:click="$dispatch('crm-task-reschedule', { id: {{ $task->id }} })" class="text-indigo-600 hover:text-indigo-800">{{ __('Reschedule') }}</button>
                                    </div>
                                @endif
                            </div>
                        @elseif (! $canEdit)
                            <div wire:key="action-{{ $action['key'] }}" class="rounded-xl border border-slate-200 p-3 text-sm">
                                <p class="font-medium text-slate-900">{{ $action['text'] }}</p>
                                <p class="text-xs text-slate-500">{{ optional($members->firstWhere('id', $action['assignee_id']))->name ?? __('Nobody') }} · {{ $action['due'] }} · {{ __('Not yet a task') }}</p>
                            </div>
                        @else
                            <div wire:key="action-{{ $action['key'] }}" class="grid grid-cols-1 gap-3 rounded-xl border border-slate-200 p-3 sm:grid-cols-12">
                                <div class="sm:col-span-6">
                                    <x-input type="text" class="block w-full" wire:model="actions.{{ $i }}.text" placeholder="{{ __('What needs doing') }}" aria-label="{{ __('Action') }}" />
                                    <x-input-error for="actions.{{ $i }}.text" class="mt-1" />
                                </div>
                                <div class="sm:col-span-3">
                                    <select wire:model="actions.{{ $i }}.assignee_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" aria-label="{{ __('Who') }}">
                                        <option value="">{{ __('Who…') }}</option>
                                        @foreach ($members as $member)
                                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error for="actions.{{ $i }}.assignee_id" class="mt-1" />
                                </div>
                                <div class="sm:col-span-2">
                                    <x-input type="date" class="block w-full" wire:model="actions.{{ $i }}.due" aria-label="{{ __('By when') }}" />
                                    <x-input-error for="actions.{{ $i }}.due" class="mt-1" />
                                </div>
                                <div class="flex items-center justify-end sm:col-span-1">
                                    <button type="button" wire:click="removeAction({{ $i }})" class="text-slate-400 hover:text-rose-600" aria-label="{{ __('Remove action') }}">
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                </div>
                            </div>
                        @endif
                    @endforeach
                    @if ($actions === [])
                        <p class="text-sm text-slate-400">{{ __('No actions yet.') }}</p>
                    @endif
                    @if ($canEdit)
                        <x-secondary-button type="button" wire:click="addAction">
                            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('Add action') }}
                        </x-secondary-button>
                    @endif
                </div>
            </x-card>

        @if ($note->raw_notes)
            <x-card class="overflow-hidden !p-0">
                @include('livewire.crm.meetings.partials.section', ['icon' => 'document-text', 'title' => __('Original notes')])
                <div class="p-5">
                    @if ($note->source_document_url)
                        <a href="{{ $note->source_document_url }}" target="_blank" rel="noopener" class="mb-3 inline-flex items-center gap-1 text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Open the source document') }}</a>
                    @endif
                    <p class="whitespace-pre-line text-sm text-slate-700">{{ $note->raw_notes }}</p>
                </div>
            </x-card>
        @endif

        {{-- Voice notes on this meeting (S20). Mounted once it is built. --}}
        @unless (\App\Livewire\Crm\VoiceNotes::isComingSoon())
            <livewire:crm.voice-notes record-type="meeting-note" :record-id="$note->id" :key="'meeting-voice-notes-'.$note->id" />
        @endunless
    </div>

    <x-dialog-modal wire:model.live="showComplete" maxWidth="lg">
        <x-slot name="title">{{ __('Complete meeting note') }}</x-slot>
        <x-slot name="content">
            <x-label for="n-outcome" value="{{ __('What came of the meeting?') }}" />
            <textarea id="n-outcome" rows="3" wire:model="outcome" class="{{ $select }}" placeholder="{{ __('e.g. Client chose our quote; order expected next week') }}"></textarea>
            <x-input-error for="outcome" class="mt-2" />
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showComplete', false)">{{ __('Close') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="complete" wire:loading.attr="disabled" wire:target="complete">{{ __('Complete') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    <livewire:crm.tasks.task-actions />
</div>