@php
    $tz = config('app.display_timezone');
    $statusColors = ['DRAFT' => 'slate', 'SENT' => 'sky', 'ACCEPTED' => 'emerald', 'REJECTED' => 'rose', 'EXPIRED' => 'amber'];
    $approvalColors = ['approved' => 'emerald', 'declined' => 'rose', 'pending' => 'amber'];
    $approvalLabels = ['approved' => __('Approved'), 'declined' => __('Declined'), 'pending' => __('Waiting for a director')];
@endphp
<div class="space-y-4">
    {{-- The quote request, and who builds quotes --}}
    <div class="flex flex-col gap-3 rounded-xl border border-slate-200 bg-slate-50/60 p-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="min-w-0">
            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Quote request') }}</p>
            @if ($request)
                <p class="mt-1 text-sm font-semibold text-slate-900">
                    {{ __('With :who', ['who' => $request->assignee?->name ?? __('Administration')]) }}
                    @if ($request->due_at)
                        <span class="font-normal {{ $request->isOverdue() ? 'text-rose-600' : 'text-slate-500' }}">· {{ __('needed by :date', ['date' => $request->due_at->copy()->timezone($tz)->format('D j M')]) }}</span>
                    @endif
                </p>
                <p class="mt-0.5 whitespace-pre-line text-xs text-slate-500">{{ \Illuminate\Support\Str::limit((string) $request->description, 240) }}</p>
            @else
                <p class="mt-1 text-sm text-slate-600">{{ __('Administration builds and prices quotes. Ask for one with the brief, then follow it up with the client.') }}</p>
            @endif
        </div>
        <div class="flex shrink-0 flex-wrap gap-2">
            @if ($canQuote && $opportunity->isOpen())
                <x-secondary-button type="button" wire:click="openLink">
                    <x-icon name="link" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Link a quote') }}
                </x-secondary-button>
                <a href="{{ route('quotes.index', ['opportunity' => $opportunity->id]) }}" wire:navigate>
                    <x-button type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('Create quote') }}
                    </x-button>
                </a>
            @elseif ($canEdit && $opportunity->isOpen() && ! $request)
                <x-button type="button" wire:click="openRequest">
                    <x-icon name="paper-airplane" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Request a quote') }}
                </x-button>
            @endif
        </div>
    </div>

    {{-- Every quote on this opportunity --}}
    <x-card class="overflow-hidden">
        <div class="border-b border-slate-100 px-4 py-3 sm:px-5">
            <h3 class="text-sm font-semibold text-slate-900">{{ __('Quotes') }}</h3>
            <p class="text-xs text-slate-400">{{ __('Revisions and alternatives are listed separately and never added together.') }}</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">{{ __('Quote') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Discount') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Valid until') }}</th>
                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Total') }}</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 ($quotes as $quote)
                        @php $d = $discounts[$quote->id]; @endphp
                        <tr wire:key="opp-quote-{{ $quote->id }}" class="transition hover:bg-slate-50/70">
                            <td class="px-3 lg:px-4 py-4 text-sm">
                                <p class="font-medium text-slate-900">
                                    {{ $quote->quote_number }}
                                    @if ($quote->id === $acceptedId)
                                        <x-badge color="emerald" class="ms-1">{{ __('Accepted one') }}</x-badge>
                                    @endif
                                </p>
                                <p class="text-xs text-slate-500">{{ __('By :who, :date', ['who' => $quote->creator?->name ?? __('unknown'), 'date' => $quote->created_at?->copy()->timezone($tz)->format('j M Y')]) }}</p>
                                @if ($quote->client_responded_at)
                                    <p class="text-xs text-slate-500">{{ __('Client answered :date as :name', ['date' => $quote->client_responded_at->copy()->timezone($tz)->format('j M Y'), 'name' => $quote->client_responded_name]) }}</p>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                <x-badge :color="$statusColors[$quote->status] ?? 'slate'">{{ __(ucfirst(strtolower($quote->status))) }}</x-badge>
                            </td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                @if ($d['amount'] > 0)
                                    <span class="tabular-nums text-slate-700">{{ $quote->currency_code }} {{ number_format($d['amount'], 2) }}</span>
                                    @if ($d['approved'])
                                        <x-badge color="emerald" class="ms-1">{{ __('Approved') }}</x-badge>
                                    @elseif ($d['request']?->status === 'cancelled')
                                        <x-badge color="rose" class="ms-1">{{ __('Declined') }}</x-badge>
                                    @elseif ($d['request'])
                                        <x-badge color="amber" class="ms-1">{{ __('Waiting for a director') }}</x-badge>
                                    @else
                                        <x-badge color="amber" class="ms-1">{{ __('Needs approval') }}</x-badge>
                                    @endif
                                @else
                                    <span class="text-slate-400">{{ __('None') }}</span>
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $quote->valid_until?->format('j M Y') ?? __('Not set') }}</td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold tabular-nums text-slate-900">{{ $quote->currency_code }} {{ number_format((float) $quote->total, 2) }}</td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                <div class="flex items-center justify-end gap-3">
                                    @if ($canEdit && $d['amount'] > 0 && ! $d['approved'] && ! $d['request'])
                                        <button type="button" wire:click="requestDiscountApproval({{ $quote->id }})" class="text-amber-600 transition hover:text-amber-800">{{ __('Ask a director') }}</button>
                                    @endif
                                    @if ($canViewQuotes)
                                        <a href="{{ route('quotes.preview', $quote) }}" target="_blank" class="text-indigo-600 transition hover:text-indigo-800">{{ __('View') }}</a>
                                    @endif
                                    @if ($canQuote && in_array($quote->status, ['DRAFT', 'SENT'], true))
                                        <a href="{{ route('quotes.index', ['open' => $quote->id]) }}" wire:navigate class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-10">
                                <x-empty-state icon="document-text" :title="__('No quotes yet')" :message="$canQuote ? __('Create the quote here, or link one already made for this organisation.') : __('Request a quote and Administration will build it.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $quotes])
    </x-card>

    {{-- Director approvals (D5) --}}
    <x-card class="overflow-hidden">
        <div class="flex flex-col gap-3 border-b border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-5">
            <div>
                <h3 class="text-sm font-semibold text-slate-900">{{ __('Director approvals') }}</h3>
                <p class="text-xs text-slate-400">{{ __('Discounts, credit terms and delivery-date exceptions need a director\'s recorded approval.') }}</p>
            </div>
            @if ($canEdit && $opportunity->isOpen())
                <x-secondary-button type="button" wire:click="openException">
                    <x-icon name="shield-check" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Ask for an exception') }}
                </x-secondary-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="px-3 lg:px-4 py-3.5">{{ __('Asked') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Request') }}</th>
                        <th class="px-3 lg:px-4 py-3.5">{{ __('Decision') }}</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 ($approvals as $approval)
                        @php $status = $approvalStatus[$approval->id]; @endphp
                        <tr wire:key="opp-approval-{{ $approval->id }}" class="transition hover:bg-slate-50/70">
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">
                                {{ $approval->created_at?->copy()->timezone($tz)->format('j M Y') }}
                                <p class="text-xs">{{ $approval->creator?->name }}</p>
                            </td>
                            <td class="px-3 lg:px-4 py-4 text-sm">
                                <p class="font-medium text-slate-900">{{ $approval->title }}</p>
                                @if ($approval->description)
                                    <p class="whitespace-pre-line text-xs text-slate-500">{{ $approval->description }}</p>
                                @endif
                            </td>
                            <td class="px-3 lg:px-4 py-4 text-sm">
                                <x-badge :color="$approvalColors[$status]">{{ $approvalLabels[$status] }}</x-badge>
                                @if ($status !== 'pending')
                                    <p class="mt-1 text-xs text-slate-500">{{ $approval->completedBy?->name }}, {{ $approval->completed_at?->copy()->timezone($tz)->format('j M Y H:i') }}</p>
                                    @if ($approval->outcome)
                                        <p class="text-xs text-slate-500">{{ $approval->outcome }}</p>
                                    @endif
                                @endif
                            </td>
                            <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                @if ($isDirector && $approval->isOpen())
                                    <div class="flex items-center justify-end gap-3">
                                        <button type="button" wire:click="openDecision({{ $approval->id }}, 'approve')" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Approve') }}</button>
                                        <button type="button" wire:click="openDecision({{ $approval->id }}, 'decline')" class="text-rose-600 transition hover:text-rose-800">{{ __('Decline') }}</button>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4" class="px-6 py-10">
                                <x-empty-state icon="shield-check" :title="__('No approvals asked for')" :message="__('A quote with a discount asks the directors by itself before it can be sent.')" class="border-0 bg-transparent py-0" />
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @include('livewire.crm.partials.paginator', ['rows' => $approvals])
    </x-card>

    {{-- Request a quote --}}
    <x-dialog-modal wire:model.live="showRequest">
        <x-slot name="title">{{ __('Request a quote') }}</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="quote-brief" value="{{ __('What needs quoting') }}" />
                    <textarea id="quote-brief" rows="6" wire:model="brief" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('Products, quantities, specifications, delivery date and anything the client asked about price') }}"></textarea>
                    <x-input-error for="brief" class="mt-2" />
                </div>
                <div>
                    <x-label for="quote-assignee" value="{{ __('Administration contact') }}" />
                    <select id="quote-assignee" wire:model="assigneeId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($administration as $member)
                            <option value="{{ $member->id }}">{{ $member->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="assigneeId" class="mt-2" />
                </div>
                <div>
                    <x-label for="quote-due" value="{{ __('Needed by') }}" />
                    <x-input id="quote-due" type="date" class="mt-1 block w-full" wire:model="dueOn" />
                    <x-input-error for="dueOn" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showRequest', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="submitRequest" wire:loading.attr="disabled" wire:target="submitRequest">
                <span wire:loading.remove wire:target="submitRequest">{{ __('Send request') }}</span>
                <span wire:loading wire:target="submitRequest">{{ __('Sending…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Link an existing quote --}}
    <x-dialog-modal wire:model.live="showLink">
        <x-slot name="title">{{ __('Link a quote') }}</x-slot>
        <x-slot name="content">
            <div>
                <x-label for="link-quote" value="{{ __('Quote for :name', ['name' => $opportunity->customer?->name]) }}" />
                <select id="link-quote" wire:model="linkQuoteId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('Choose…') }}</option>
                    @foreach ($linkable as $q)
                        <option value="{{ $q->id }}">{{ $q->quote_number }} · {{ __(ucfirst(strtolower($q->status))) }} · {{ $q->currency_code }} {{ number_format((float) $q->total, 2) }}</option>
                    @endforeach
                </select>
                <x-input-error for="linkQuoteId" class="mt-2" />
                @if ($linkable->isEmpty())
                    <p class="mt-2 text-xs text-slate-500">{{ __('This organisation has no quotes that are not already on an opportunity.') }}</p>
                @endif
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showLink', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="linkQuote" wire:loading.attr="disabled" wire:target="linkQuote">{{ __('Link quote') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Ask for an exception --}}
    <x-dialog-modal wire:model.live="showException">
        <x-slot name="title">{{ __('Ask a director for an exception') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="approval-kind" value="{{ __('What needs approving') }}" />
                    <select id="approval-kind" wire:model="approvalKind" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="credit_terms">{{ __($approvalKinds['credit_terms']) }}</option>
                        <option value="delivery_date">{{ __($approvalKinds['delivery_date']) }}</option>
                    </select>
                    <x-input-error for="approvalKind" class="mt-2" />
                    <p class="mt-1 text-xs text-slate-500">{{ __('A discount is approved on its quote: the quote asks the directors when it is sent.') }}</p>
                </div>
                <div>
                    <x-label for="approval-details" value="{{ __('The request') }}" />
                    <textarea id="approval-details" rows="4" wire:model="approvalDetails" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('For example: 30 days to pay from delivery, because the client pays through its head office') }}"></textarea>
                    <x-input-error for="approvalDetails" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showException', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="submitException" wire:loading.attr="disabled" wire:target="submitException">{{ __('Ask the directors') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- A director's decision --}}
    <x-dialog-modal wire:model.live="showDecision">
        <x-slot name="title">{{ $decision === 'decline' ? __('Decline') : __('Approve') }}</x-slot>
        <x-slot name="content">
            @if ($decidingTask)
                <p class="text-sm font-medium text-slate-900">{{ $decidingTask->title }}</p>
                @if ($decidingTask->description)
                    <p class="mt-1 whitespace-pre-line text-sm text-slate-600">{{ $decidingTask->description }}</p>
                @endif
            @endif
            <div class="mt-4">
                <x-label for="decision-note" value="{{ $decision === 'decline' ? __('Why it is declined') : __('Note (optional)') }}" />
                <textarea id="decision-note" rows="3" wire:model="decisionNote" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                <x-input-error for="decisionNote" class="mt-2" />
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showDecision', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="decide" wire:loading.attr="disabled" wire:target="decide">{{ $decision === 'decline' ? __('Decline') : __('Approve') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>