@php
    $tz = config('app.display_timezone');
    $late = $opportunity->isOpen() && $opportunity->next_action_due && $opportunity->next_action_due->toDateString() < now($tz)->toDateString();
@endphp
<div class="space-y-4">
    {{-- The one next action --}}
    <div class="flex flex-col gap-3 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between {{ $late ? 'border-rose-200 bg-rose-50/60' : 'border-slate-200 bg-slate-50/60' }}">
        <div>
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Next action') }}</p>
            <p class="mt-1 text-sm font-semibold {{ $late ? 'text-rose-700' : 'text-slate-900' }}">
                {{ $opportunity->next_action ?: __('None recorded') }}
                @if ($opportunity->next_action_due)
                    <span class="font-normal">· {{ $opportunity->next_action_due->format('D j M Y') }}</span>
                @endif
            </p>
            @if ($late)
                <p class="text-xs text-rose-600">{{ __('The date has passed. Complete it and set the next one, or reschedule it with a reason.') }}</p>
            @endif
        </div>
        @if ($canCreate)
            <div class="flex shrink-0 flex-wrap gap-2">
                <x-secondary-button type="button" wire:click="$dispatch('crm-task-create', { opportunityId: {{ $opportunity->id }} })">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New task') }}
                </x-secondary-button>
                <x-button type="button" wire:click="$dispatch('crm-log-activity', { opportunityId: {{ $opportunity->id }} })">
                    <x-icon name="chat-bubble-left-right" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Log activity') }}
                </x-button>
            </div>
        @endif
    </div>

    <x-card class="overflow-hidden">
        <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">{{ __('Due') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Task') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Assigned to') }}</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 ($open as $task)
                        @php $canEdit = \Illuminate\Support\Facades\Gate::allows('update', $task); @endphp
                        <tr wire:key="opp-task-{{ $task->id }}" class="transition hover:bg-slate-50/70">
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm {{ $task->isOverdue() ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                @if ($task->due_at)
                                    {{ $task->due_at->copy()->timezone($tz)->format(\App\Services\Crm\TaskService::isDateOnly($task->due_at) ? 'D j M' : 'D j M, H:i') }}
                                @else
                                    <span class="text-slate-400">{{ __('No date') }}</span>
                                @endif
                            </td>
                            <td class="px-3 lg:px-4 py-4 text-sm">
                                <p class="font-medium text-slate-900">{{ $task->title }}</p>
                                <p class="text-xs text-slate-500">{{ __(\App\Models\Crm\Task::TYPES[$task->type] ?? $task->type) }}
                                    @if ($task->reschedule_count > 0)
                                        <span class="text-amber-700" title="{{ $task->reschedule_reason }}">· {{ trans_choice('{1} rescheduled once|[2,*] rescheduled :count times', $task->reschedule_count, ['count' => $task->reschedule_count]) }}</span>
                                    @endif
                                </p>
                            </td>
                            <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $task->assignee?->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="$dispatch('crm-task-complete', { id: {{ $task->id }} })" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Complete') }}</button>
                                        <button type="button" wire:click="$dispatch('crm-task-reschedule', { id: {{ $task->id }} })" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Reschedule') }}</button>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-10">
                                <x-empty-state icon="clipboard-document-check" :title="__('No open tasks')" :message="__('Log an activity or add a task; its next action appears here.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $open])

        @if ($doneCount > 0)
            <div class="border-t border-slate-100 px-4 py-3 sm:px-5">
                <button type="button" wire:click="toggleDone" class="text-sm font-medium text-slate-500 hover:text-slate-700">
                    {{ $showDone ? __('Hide completed') : trans_choice('{1} Show :count completed task|[2,*] Show :count completed tasks', $doneCount, ['count' => $doneCount]) }}
                </button>
            </div>
            @if ($showDone)
                <ul class="divide-y divide-slate-100 border-t border-slate-100">
                    @foreach ($done as $task)
                        <li wire:key="opp-done-{{ $task->id }}" class="px-4 py-3 sm:px-5">
                            <div class="flex items-center justify-between gap-3">
                                <span class="text-sm {{ $task->status === 'cancelled' ? 'text-slate-400 line-through' : 'text-slate-700' }}">{{ $task->title }}</span>
                                <span class="shrink-0 text-xs text-slate-400">{{ $task->completed_at?->copy()->timezone($tz)->format('j M Y') }} · {{ $task->completedBy?->name }}</span>
                            </div>
                            @if ($task->outcome)
                                <p class="mt-0.5 text-xs text-slate-500">{{ $task->status === 'cancelled' ? __('Cancelled') : __('Outcome') }}: {{ $task->outcome }}</p>
                            @endif
                        </li>
                    @endforeach
                </ul>
                @include('livewire.crm.partials.paginator', ['rows' => $done])
            @endif
        @endif
    </x-card>

    <livewire:crm.tasks.task-actions :key="'opp-task-actions-'.$opportunity->id" />
    <livewire:crm.communications.log-activity :key="'opp-log-activity-'.$opportunity->id" />
</div>