@php
    use App\Models\Crm\Agreement;

    $statusColors = \App\Livewire\Crm\Agreements\Show::STATUS_COLORS;
    $control = 'mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
    $tz = config('app.display_timezone');
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <a href="{{ route('crm.agreements.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" /> {{ __('Agreements') }}
        </a>

        <x-page-header :title="$agreement->title" :subtitle="__(':kind with :party', [
            'kind' => $agreement->type ? __(Agreement::TYPES[$agreement->type] ?? $agreement->type) : __('Agreement'),
            'party' => $agreement->partnership?->name ?? $agreement->customer?->name ?? __('an unnamed party'),
        ])">
            <x-badge :color="$statusColors[$agreement->status] ?? 'slate'">{{ __(Agreement::STATUSES[$agreement->status] ?? $agreement->status) }}</x-badge>
            @if ($canEdit)
                <x-secondary-button type="button" wire:click="openEdit">
                    <x-icon name="pencil-square" class="mr-1.5 h-4 w-4" /> {{ __('Edit') }}
                </x-secondary-button>
            @endif
            @if ($canEdit && $agreement->status === 'draft')
                <x-secondary-button type="button" wire:click="setDrafting('in_negotiation')">{{ __('Mark in negotiation') }}</x-secondary-button>
            @elseif ($canEdit && $agreement->status === 'in_negotiation')
                <x-secondary-button type="button" wire:click="setDrafting('draft')">{{ __('Back to draft') }}</x-secondary-button>
            @endif
            @if ($drafting && $isDirector)
                <x-button type="button" wire:click="openSign">
                    <x-icon name="check" class="mr-1.5 h-4 w-4" /> {{ __('Record signing') }}
                </x-button>
            @endif
            @if ($inForce && $isDirector)
                <x-secondary-button type="button" wire:click="openTerminate">
                    <x-icon name="x-mark" class="mr-1.5 h-4 w-4" /> {{ __('Terminate') }}
                </x-secondary-button>
            @endif
            @if ($canRenew)
                <x-button type="button" wire:click="openRenew">
                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" /> {{ __('Start renewal') }}
                </x-button>
            @endif
        </x-page-header>

        @if ($drafting && ! $isDirector)
            <div class="flex items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
                <x-icon name="shield-check" class="mt-0.5 h-4 w-4 shrink-0" />
                <p>{{ __('Officers draft and negotiate. A director records the signing once the terms are agreed.') }}</p>
            </div>
        @endif

        @if ($daysLeft !== null)
            <div class="flex items-start gap-3 rounded-2xl border px-4 py-3 text-sm {{ $daysLeft <= 30 ? 'border-rose-200 bg-rose-50 text-rose-800' : ($daysLeft <= 60 ? 'border-amber-200 bg-amber-50 text-amber-800' : 'border-slate-200 bg-white text-slate-700') }}">
                <x-icon name="calendar-days" class="mt-0.5 h-4 w-4 shrink-0" />
                <div>
                    <p class="font-semibold">
                        {{ trans_choice('{0} Ends today.|{1} Ends tomorrow.|[2,*] Ends in :count days, on :date.', $daysLeft, ['count' => number_format($daysLeft), 'date' => $agreement->ends_on->format('j M Y')]) }}
                        @if ($agreement->auto_renews) {{ __('It renews itself unless notice is given.') }} @endif
                    </p>
                    <p class="mt-0.5 text-xs">
                        {{ __('60-day reminder: :sixty. 30-day reminder: :thirty.', [
                            'sixty' => $agreement->reminder_60_sent_at ? __('sent :date', ['date' => $agreement->reminder_60_sent_at->timezone($tz)->format('j M Y')]) : __('not yet'),
                            'thirty' => $agreement->reminder_30_sent_at ? __('sent :date', ['date' => $agreement->reminder_30_sent_at->timezone($tz)->format('j M Y')]) : __('not yet'),
                        ]) }}
                        @if ($agreement->renewal) {{ __('A renewal has been started.') }} @endif
                    </p>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <x-card class="p-5 lg:col-span-2">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Terms') }}</h2>
                <dl class="mt-4 grid grid-cols-1 gap-4 text-sm sm:grid-cols-2">
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Starts') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->starts_on?->format('j M Y') ?? __('Not set') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Ends') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->ends_on?->format('j M Y') ?? __('Open-ended') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Signed') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->signed_on?->format('j M Y') ?? __('Not yet') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Reference') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->reference ?: __('None') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Signed for us by') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->our_signatory ?: __('Not yet') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Signed for them by') }}</dt>
                        <dd class="mt-0.5 text-slate-700">{{ $agreement->counterparty_signatory ?: __('Not yet') }}</dd>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Summary') }}</dt>
                        <dd class="mt-0.5 whitespace-pre-line text-slate-700">{{ $agreement->summary ?: __('No summary written.') }}</dd>
                    </div>
                </dl>
                <p class="mt-5 text-xs text-slate-400">{{ __('An agreement records terms. It is never revenue: business under it is counted on its quotes, invoices and jobs.') }}</p>
            </x-card>

            <div class="space-y-6">
                <x-card class="p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Parties') }}</h2>
                    <dl class="mt-3 space-y-3 text-sm">
                        @if ($agreement->partnership)
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Partnership') }}</dt>
                                <dd class="mt-0.5"><a href="{{ route('crm.partnerships.show', $agreement->partnership_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $agreement->partnership->name }}</a></dd>
                            </div>
                        @endif
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Organisation') }}</dt>
                            <dd class="mt-0.5">
                                @if ($agreement->customer)
                                    <a href="{{ route('crm.organisations.show', $agreement->customer_id) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $agreement->customer->name }}</a>
                                @else
                                    <span class="text-slate-400">{{ __('Not linked') }}</span>
                                @endif
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Looked after by') }}</dt>
                            <dd class="mt-0.5 text-slate-700">{{ $agreement->owner?->name ?? __('Not available') }}</dd>
                        </div>
                    </dl>
                </x-card>

                <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">{{ __('History') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Each renewal is its own agreement; earlier terms are kept') }}</p>
                    </div>
                    <ul class="divide-y divide-slate-100">
                        @foreach ($history as $link)
                            <li wire:key="history-{{ $link->id }}" class="flex items-center justify-between gap-3 px-4 py-3 text-sm sm:px-5 {{ $link->id === $agreement->id ? 'bg-indigo-50/50' : '' }}">
                                <div>
                                    @if ($link->id === $agreement->id)
                                        <span class="font-semibold text-slate-900">{{ __('This agreement') }}</span>
                                    @else
                                        <a href="{{ route('crm.agreements.show', $link) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ $link->title }}</a>
                                    @endif
                                    <p class="text-xs text-slate-400">{{ $link->starts_on?->format('j M Y') ?? __('Not set') }} &ndash; {{ $link->ends_on?->format('j M Y') ?? __('open-ended') }}</p>
                                </div>
                                <x-badge :color="$statusColors[$link->status] ?? 'slate'">{{ __(Agreement::STATUSES[$link->status] ?? $link->status) }}</x-badge>
                            </li>
                        @endforeach
                    </ul>
                </x-card>

                @if ($notes->isNotEmpty())
                    <x-card class="p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Notes') }}</h2>
                        <ul class="mt-3 space-y-2 text-sm text-slate-700">
                            @foreach ($notes as $note)
                                <li wire:key="note-{{ $note->id }}" class="whitespace-pre-line">{{ $note->body }}</li>
                            @endforeach
                        </ul>
                    </x-card>
                @endif
            </div>
        </div>
    </div>

    @if ($canEdit)
        <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
            <x-slot name="title">{{ __('Edit agreement') }}</x-slot>
            <x-slot name="content">
                @include('livewire.crm.agreements.partials.form')
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showForm', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ __('Save') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    @if ($drafting && $isDirector)
        <x-dialog-modal wire:model.live="showSign" maxWidth="lg">
            <x-slot name="title">{{ __('Record signing') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">{{ __('From here the terms are fixed. Renewal reminders go to the person looking after it at 60 and 30 days before it ends.') }}</p>
                <div class="mt-4 grid grid-cols-1 gap-4">
                    <div>
                        <x-label for="signedOn" value="{{ __('Signed on') }}" />
                        <x-input id="signedOn" type="date" class="mt-1 block w-full" wire:model="signedOn" />
                        <x-input-error for="signedOn" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="ourSignatory" value="{{ __('Signed for us by') }}" />
                        <x-input id="ourSignatory" type="text" class="mt-1 block w-full" wire:model="ourSignatory" />
                        <x-input-error for="ourSignatory" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="theirSignatory" value="{{ __('Signed for them by') }}" />
                        <x-input id="theirSignatory" type="text" class="mt-1 block w-full" wire:model="theirSignatory" />
                        <x-input-error for="theirSignatory" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showSign', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="sign" wire:loading.attr="disabled" wire:target="sign">
                    <span wire:loading.remove wire:target="sign">{{ __('Record signing') }}</span>
                    <span wire:loading wire:target="sign">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    @if ($inForce && $isDirector)
        <x-dialog-modal wire:model.live="showTerminate" maxWidth="lg">
            <x-slot name="title">{{ __('Terminate agreement') }}</x-slot>
            <x-slot name="content">
                <x-label for="terminateReason" value="{{ __('Why it is ending early') }}" />
                <textarea id="terminateReason" rows="3" wire:model="terminateReason" class="{{ $control }}"></textarea>
                <x-input-error for="terminateReason" class="mt-2" />
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showTerminate', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-danger-button class="ms-3" wire:click="terminate" wire:loading.attr="disabled" wire:target="terminate">{{ __('Terminate') }}</x-danger-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    @if ($canRenew)
        <x-dialog-modal wire:model.live="showRenew" maxWidth="lg">
            <x-slot name="title">{{ __('Start renewal') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">{{ __('A renewal is a new draft agreement carrying the same parties. This one stays exactly as it is, and is marked Renewed when a director signs the new one.') }}</p>
                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="renewStartsOn" value="{{ __('New term starts') }}" />
                        <x-input id="renewStartsOn" type="date" class="mt-1 block w-full" wire:model="renewStartsOn" />
                        <x-input-error for="renewStartsOn" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="renewEndsOn" value="{{ __('New term ends') }}" />
                        <x-input id="renewEndsOn" type="date" class="mt-1 block w-full" wire:model="renewEndsOn" />
                        <x-input-error for="renewEndsOn" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showRenew', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="renew" wire:loading.attr="disabled" wire:target="renew">
                    <span wire:loading.remove wire:target="renew">{{ __('Start renewal') }}</span>
                    <span wire:loading wire:target="renew">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>