@php
    $quoteBadge = [
        'DRAFT' => 'slate', 'SENT' => 'sky', 'ACCEPTED' => 'emerald',
        'REJECTED' => 'rose', 'EXPIRED' => 'amber',
    ];
    $kpiAccent = [
        'indigo' => '#6366f1', 'amber' => '#f59e0b',
        'emerald' => '#10b981', 'sky' => '#0ea5e9',
        'rose' => '#f43f5e',
    ];
    $avatarColors = [
        'bg-indigo-100 text-indigo-700', 'bg-emerald-100 text-emerald-700',
        'bg-amber-100 text-amber-700', 'bg-sky-100 text-sky-700',
        'bg-rose-100 text-rose-700', 'bg-violet-100 text-violet-700',
    ];
    $initials = function (?string $name): string {
        $parts = collect(preg_split('/\s+/', trim((string) $name)))->filter();
        if ($parts->isEmpty()) {
            return '—';
        }
        return $parts->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('');
    };
    $avatarColor = fn (?string $name): string => $avatarColors[abs(crc32((string) $name)) % count($avatarColors)];
@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="__('Quotes')" :subtitle="__('Create, send and track your customer quotations.')">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" />
                    {{ __('New Quote') }}
                </x-button>
            @endif
        </x-page-header>

        <!-- KPI cards -->
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($kpis as $kpi)
                @php $accent = $kpiAccent[$kpi['color']] ?? $kpiAccent['indigo']; @endphp
                <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="{{ $kpi['label'] }}">{{ $kpi['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, {{ $accent }}, {{ $accent }}bb)">
                            <x-icon :name="$kpi['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;">{{ $kpi['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">{{ $kpi['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:p-6 lg:flex-row lg:flex-nowrap lg:items-center">
                <div class="relative min-w-0 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 by number or customer...') }}"
                        class="block w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                </div>

                <select
                    wire:model.live="statusFilter"
                    class="w-full shrink-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-36"
                >
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}">{{ $s }}</option>
                    @endforeach
                </select>

                <select
                    wire:model.live="customerFilter"
                    class="w-full shrink-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-40"
                >
                    <option value="">{{ __('All customers') }}</option>
                    @foreach ($customers as $customer)
                        <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                    @endforeach
                </select>

                <div class="flex w-full shrink-0 items-center gap-2 lg:w-auto">
                    <input
                        type="date"
                        wire:model.live="startDate"
                        class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-[8.5rem]"
                        aria-label="{{ __('Start date') }}"
                    />
                    <span class="shrink-0 text-slate-300">–</span>
                    <input
                        type="date"
                        wire:model.live="endDate"
                        class="w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-[8.5rem]"
                        aria-label="{{ __('End date') }}"
                    />
                </div>

                <button
                    type="button"
                    wire:click="toggleFilters"
                    class="relative inline-flex w-full shrink-0 items-center justify-center gap-1.5 rounded-xl border px-4 py-2 text-sm font-medium shadow-sm transition lg:w-auto {{ $showFilters ? 'border-indigo-300 bg-indigo-50 text-indigo-700' : 'border-slate-300 bg-white text-slate-700 hover:bg-slate-50' }}"
                >
                    <x-icon name="funnel" class="h-4 w-4" />
                    {{ __('Filters') }}
                    @if ($this->hasActiveFilters)
                        <span class="absolute -right-1 -top-1 flex h-2.5 w-2.5 rounded-full bg-indigo-500 ring-2 ring-white"></span>
                    @endif
                </button>
            </div>

            <!-- Advanced filters panel -->
            @if ($showFilters)
                <div class="border-b border-slate-100 bg-slate-50/60 p-4 sm:p-6">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <div>
                            <x-label for="minTotal" value="{{ __('Min total') }}" />
                            <x-input id="minTotal" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="minTotal" placeholder="0.00" />
                        </div>
                        <div>
                            <x-label for="maxTotal" value="{{ __('Max total') }}" />
                            <x-input id="maxTotal" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="maxTotal" placeholder="0.00" />
                        </div>
                        <div>
                            <x-label for="sortBy" value="{{ __('Sort by') }}" />
                            <select id="sortBy" wire:model.live="sortBy" 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="latest">{{ __('Newest first') }}</option>
                                <option value="oldest">{{ __('Oldest first') }}</option>
                                <option value="total_desc">{{ __('Total (high to low)') }}</option>
                                <option value="total_asc">{{ __('Total (low to high)') }}</option>
                                <option value="expiry">{{ __('Expiry date') }}</option>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button
                                type="button"
                                wire:click="clearFilters"
                                @disabled(! $this->hasActiveFilters)
                                class="inline-flex items-center gap-1.5 rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
                            >
                                <x-icon name="x-mark" class="h-4 w-4" />
                                {{ __('Clear all') }}
                            </button>
                        </div>
                    </div>
                </div>
            @endif

            @if ($quotes->isEmpty())
                <div class="p-6">
                    <x-empty-state
                        icon="document-text"
                        :title="__('No quotes found')"
                        :message="$this->hasActiveFilters ? __('Try adjusting your search or filters.') : __('Get started by creating your first quote.')"
                    >
                        @if ($canManage && ! $this->hasActiveFilters)
                            <x-button wire:click="create" type="button">
                                <x-icon name="plus" class="mr-1.5 h-4 w-4" />
                                {{ __('New Quote') }}
                            </x-button>
                        @endif
                    </x-empty-state>
                </div>
            @else
                @php
                    // Row actions live in the floating selection bar, so every
                    // row carries a tick box instead of a strip of icons. The
                    // header box selects / clears this page.
                    $pageIds = $quotes->getCollection()->modelKeys();
                    $pageAllTicked = $pageIds !== [] && array_diff($pageIds, $selected) === [];
                @endphp

                <!-- Table (desktop) -->
                <div class="hidden overflow-x-auto sm:block">
                    <table class="min-w-full divide-y divide-slate-200">
                        <thead class="bg-slate-50">
                            <tr>
                                <th class="w-10 px-3 lg:px-4 py-3 text-left">
                                    <input type="checkbox"
                                           wire:click="togglePage(@js($pageIds))"
                                           @checked($pageAllTicked)
                                           title="{{ $pageAllTicked ? __('Clear this page') : __('Select this page') }}"
                                           aria-label="{{ __('Select every quote on this page') }}"
                                           class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                </th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Quote No.') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Customer') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('For') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Total') }}</th>
                                <th class="px-3 lg:px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Date') }}</th>
                                <th class="w-10 px-3 lg:px-4 py-3 text-right">
                                    <input type="checkbox"
                                           wire:click="togglePage(@js($pageIds))"
                                           @checked($pageAllTicked)
                                           title="{{ $pageAllTicked ? __('Clear this page') : __('Select this page') }}"
                                           aria-label="{{ __('Select every quote on this page') }}"
                                           class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($quotes as $quote)
                                @php
                                    $vu = $quote->valid_until;
                                    $daysLeft = $vu ? (int) round(\Illuminate\Support\Carbon::today()->diffInDays($vu, false)) : null;
                                @endphp
                                @php $ticked = in_array($quote->id, $selected, true); @endphp
                                <tr wire:key="quote-{{ $quote->id }}" class="transition {{ $ticked ? 'bg-indigo-50/70' : 'hover:bg-slate-50/75' }}">
                                    <td class="w-10 whitespace-nowrap px-3 lg:px-4 py-4">
                                        <input type="checkbox"
                                               wire:click="toggleSelection({{ $quote->id }})"
                                               @checked($ticked)
                                               aria-label="{{ __('Select :number', ['number' => $quote->quote_number]) }}"
                                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                        {{-- The note count stays on the row, not in the selection bar:
                                             it is an at-a-glance signal, and nobody ticks a row to
                                             discover there was something written on it. --}}
                                        <div class="flex items-center gap-1.5">
                                            <a href="{{ route('quotes.preview', $quote) }}" wire:navigate
                                               title="{{ __('View quote') }}"
                                               class="text-sm font-semibold text-indigo-600 transition hover:text-indigo-800 hover:underline">
                                                {{ $quote->quote_number }}
                                            </a>
                                            <x-notes-button :for="$quote" size="sm" class="shrink-0" />
                                        </div>
                                        <p class="text-xs text-slate-400">#{{ $quote->id }}</p>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4">
                                        <div class="flex items-center gap-3">
                                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $avatarColor($quote->customer?->name) }}">
                                                {{ $initials($quote->customer?->name) }}
                                            </span>
                                            <div class="min-w-0">
                                                <p class="truncate text-sm font-medium text-slate-900">{{ $quote->customer?->name ?: '—' }}</p>
                                                @if ($quote->customer?->email)
                                                    <p class="truncate text-xs text-slate-400">{{ $quote->customer->email }}</p>
                                                @endif
                                                @if ($quote->linkedOpportunity)
                                                    <a href="{{ route('crm.opportunities.show', ['opportunity' => $quote->linkedOpportunity->id, 'tab' => 'quotes']) }}" wire:navigate class="block truncate text-xs text-indigo-600 hover:text-indigo-800">{{ __('For: :title', ['title' => $quote->linkedOpportunity->title]) }}</a>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4">
                                        <x-document-summary :items="$quote->lineItems" :empty="__('Nothing quoted yet')" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <div class="flex flex-wrap items-center gap-1.5">
                                            <x-badge :color="$quoteBadge[$quote->status] ?? 'slate'">
                                                <span class="h-1.5 w-1.5 rounded-full bg-current"></span>
                                                {{ $quote->status }}
                                            </x-badge>
                                            @if ($quote->converted_to_invoice_id)
                                                <x-badge color="indigo" title="{{ __('Already converted into an invoice') }}">{{ __('Invoiced') }}</x-badge>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-semibold 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-sm">
                                        <p class="text-slate-600">{{ $quote->created_at?->format('Y-m-d') }}</p>
                                        @if ($vu)
                                            @if ($daysLeft < 0)
                                                <p class="text-xs font-medium text-rose-500">{{ __('Expired') }}</p>
                                            @elseif ($daysLeft === 0)
                                                <p class="text-xs font-medium text-amber-600">{{ __('Expires today') }}</p>
                                            @else
                                                <p class="text-xs font-medium text-amber-600">{{ trans_choice('{1} :count day to expiry|[2,*] :count days to expiry', $daysLeft, ['count' => $daysLeft]) }}</p>
                                            @endif
                                        @endif
                                    </td>
                                    <td class="w-10 whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                        <input type="checkbox"
                                               wire:click="toggleSelection({{ $quote->id }})"
                                               @checked($ticked)
                                               aria-label="{{ __('Select :number', ['number' => $quote->quote_number]) }}"
                                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Cards (mobile) -->
                <div class="divide-y divide-slate-100 sm:hidden">
                    @foreach ($quotes as $quote)
                        @php
                            $vu = $quote->valid_until;
                            $daysLeft = $vu ? (int) round(\Illuminate\Support\Carbon::today()->diffInDays($vu, false)) : null;
                        @endphp
                        @php $ticked = in_array($quote->id, $selected, true); @endphp
                        <div wire:key="quote-mobile-{{ $quote->id }}" class="p-4 {{ $ticked ? 'bg-indigo-50/70' : '' }}">
                            <div class="flex min-w-0 items-start gap-3">
                                <input type="checkbox"
                                       wire:click="toggleSelection({{ $quote->id }})"
                                       @checked($ticked)
                                       aria-label="{{ __('Select :number', ['number' => $quote->quote_number]) }}"
                                       class="mt-2.5 h-4 w-4 shrink-0 rounded border-slate-300 text-indigo-600 shadow-sm focus:ring-indigo-500" />
                                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $avatarColor($quote->customer?->name) }}">
                                    {{ $initials($quote->customer?->name) }}
                                </span>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center justify-between gap-2">
                                        <a href="{{ route('quotes.preview', $quote) }}" wire:navigate
                                           class="text-sm font-semibold text-indigo-600 hover:underline">{{ $quote->quote_number }}</a>
                                        <div class="flex shrink-0 items-center gap-1.5">
                                            @if ($quote->converted_to_invoice_id)
                                                <x-badge color="indigo">{{ __('Invoiced') }}</x-badge>
                                            @endif
                                            <x-notes-button :for="$quote" size="sm" />
                                        </div>
                                    </div>
                                    <p class="truncate text-sm text-slate-700">{{ $quote->customer?->name ?: '—' }}</p>
                                    <x-document-summary :items="$quote->lineItems" variant="card" :empty="__('Nothing quoted yet')" />
                                    <p class="mt-2"><x-badge :color="$quoteBadge[$quote->status] ?? 'slate'"><span class="h-1.5 w-1.5 rounded-full bg-current"></span>{{ $quote->status }}</x-badge></p>
                                    <p class="mt-2 text-sm font-semibold text-slate-900">{{ $quote->currency_code }} {{ number_format((float) $quote->total, 2) }}</p>
                                    <p class="mt-1 text-xs text-slate-400">
                                        {{ $quote->created_at?->format('Y-m-d') }}
                                        @if ($vu)
                                            @if ($daysLeft < 0)
                                                · <span class="font-medium text-rose-500">{{ __('Expired') }}</span>
                                            @elseif ($daysLeft === 0)
                                                · <span class="font-medium text-amber-600">{{ __('Expires today') }}</span>
                                            @else
                                                · <span class="font-medium text-amber-600">{{ trans_choice('{1} :count day to expiry|[2,*] :count days to expiry', $daysLeft, ['count' => $daysLeft]) }}</span>
                                            @endif
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <!-- Pagination -->
                <div class="flex flex-col gap-3 border-t border-slate-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
                    <div class="flex items-center gap-2 text-sm text-slate-500">
                        <span>{{ __('Rows per page') }}</span>
                        <select wire:model.live="perPage" class="rounded-lg border-slate-300 py-1 pl-2 pr-7 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                    <div>
                        {{ $quotes->onEachSide(1)->links() }}
                    </div>
                </div>
            @endif
        </x-card>

        {{--
            Floating action bar. Tick one row and it offers everything that used
            to sit in the row's icon strip, now with labels; tick several and it
            narrows to the actions that are safe to run across a batch.
        --}}
        <x-selection-bar :count="count($selected)" :noun="trans_choice('{1} quote selected|[2,*] quotes selected', count($selected))">
            @if ($selectedQuote)
                @php
                    $q = $selectedQuote;
                    $convertible = $canConvert && ! in_array($q->status, ['REJECTED', 'EXPIRED'], true) && ! $q->converted_to_invoice_id;
                @endphp

                <x-selection-action icon="eye" :href="route('quotes.preview', $q)" wire:navigate>
                    {{ __('View') }}
                </x-selection-action>

                @if ($convertible)
                    <x-selection-action icon="arrow-path" tone="primary" wire:click="convertToInvoice({{ $q->id }})"
                                        wire:confirm="{{ __('Convert this quote into a new invoice?') }}">
                        {{ __('Convert to invoice') }}
                    </x-selection-action>
                @elseif ($canManage)
                    <x-selection-action icon="paper-airplane" tone="primary" wire:click="send({{ $q->id }})"
                                        wire:confirm="{{ __('Email this quote to the customer?') }}" wire:loading.attr="disabled">
                        {{ __('Send') }}
                    </x-selection-action>
                @endif

                <x-selection-action icon="arrow-down-tray" :href="route('quotes.pdf', $q)">
                    {{ __('PDF') }}
                </x-selection-action>

                @if ($canManage)
                    <x-selection-action icon="pencil-square" wire:click="edit({{ $q->id }})">
                        {{ __('Edit') }}
                    </x-selection-action>
                @endif

                {{-- The rest, behind one more click so the bar stays readable.
                     It opens upward (`bottom-full`) because the bar is pinned to
                     the bottom of the viewport. --}}
                <x-dropdown align="right" width="60" dropdownClasses="bottom-full mb-2" contentClasses="py-1 bg-white">
                    <x-slot name="trigger">
                        <button type="button"
                                class="inline-flex h-9 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-xl px-3 text-sm font-medium text-slate-200 transition hover:bg-white/10 hover:text-white">
                            <x-icon name="ellipsis-horizontal" class="h-4 w-4" />
                            {{ __('More') }}
                        </button>
                    </x-slot>
                    <x-slot name="content">
                        @if ($canManage && $convertible)
                            <button type="button" wire:click="send({{ $q->id }})" wire:confirm="{{ __('Email this quote to the customer?') }}" wire:loading.attr="disabled"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="paper-airplane" class="h-4 w-4 text-slate-400" />{{ __('Email to customer') }}
                            </button>
                        @endif
                        <x-notes-button :for="$q" variant="link"
                            class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm !text-slate-700 transition hover:bg-slate-50" />
                        @if ($canManage)
                            <button type="button" wire:click="duplicate({{ $q->id }})"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-slate-700 transition hover:bg-slate-50">
                                <x-icon name="document-duplicate" class="h-4 w-4 text-slate-400" />{{ __('Duplicate') }}
                            </button>
                        @endif
                        @if ($canDelete)
                            <div class="my-1 border-t border-slate-100"></div>
                            <button type="button" wire:click="delete({{ $q->id }})" wire:confirm="{{ __('Are you sure you want to delete this quote?') }}"
                                    class="flex w-full items-center gap-2.5 px-4 py-2 text-left text-sm text-rose-600 transition hover:bg-rose-50">
                                <x-icon name="trash" class="h-4 w-4" />{{ __('Delete') }}
                            </button>
                        @endif
                    </x-slot>
                </x-dropdown>
            @else
                @if ($canManage)
                    <x-selection-action icon="paper-airplane" tone="primary" wire:click="bulkSend"
                                        wire:confirm="{{ __('Email each selected quote to its customer?') }}" wire:loading.attr="disabled">
                        {{ __('Email to customers') }}
                    </x-selection-action>
                @endif
                @if ($canDelete)
                    <x-selection-action icon="trash" tone="danger" wire:click="bulkDelete"
                                        wire:confirm="{{ __('Delete every selected quote? This cannot be undone.') }}">
                        {{ __('Delete') }}
                    </x-selection-action>
                @endif
            @endif
        </x-selection-bar>
    </div>

    <!-- Create / Edit Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Quote') : __('New Quote') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="customer_id" value="{{ __('Customer') }}" />
                        <select id="customer_id" wire:model.live="customer_id" 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="">{{ __('Select a customer...') }}</option>
                            @foreach ($customers as $customer)
                                {{-- A prospect may be quoted, and is labelled so nobody mistakes it for a trading customer. --}}
                                <option value="{{ $customer->id }}">{{ $customer->name }}{{ $customer->isProspect() ? ' ('.__('Prospect').')' : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="customer_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="currency_code" value="{{ __('Currency') }}" />
                        <select id="currency_code" wire:model.live="currency_code" 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="">{{ __('Select a currency...') }}</option>
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}, {{ $currency->name }}</option>
                            @endforeach
                        </select>
                        <x-currency-banking-hint :currency="$currency_code" />
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>
                </div>

                @if ($opportunityOptions->isNotEmpty() || $opportunity_id)
                    {{-- The CRM opportunity this quote answers. Accepting it online shows the opportunity as "Accepted, awaiting confirmation". --}}
                    <div>
                        <x-label for="opportunity_id" value="{{ __('Opportunity (CRM)') }}" />
                        <select id="opportunity_id" wire:model="opportunity_id" 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="">{{ __('Not linked to an opportunity') }}</option>
                            @foreach ($opportunityOptions as $opp)
                                <option value="{{ $opp->id }}">{{ $opp->title }} ({{ __(\App\Models\Opportunity::STAGES[$opp->stage] ?? $opp->stage) }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="opportunity_id" class="mt-2" />
                        <x-input-error for="approval" class="mt-2" />
                    </div>
                @endif

                <!-- Line items -->
                <div>
                    <div class="flex items-center justify-between">
                        <x-label value="{{ __('Line Items') }}" />
                        <div class="flex items-center gap-4">
                            <button type="button" wire:click="createProductForQuote"
                                wire:confirm="{{ __('Save this quote as a draft and go create the product? You’ll come straight back here with it added.') }}"
                                class="inline-flex items-center gap-1 text-sm font-medium text-emerald-600 transition hover:text-emerald-800">
                                <x-icon name="cube" class="h-4 w-4" />
                                {{ __('New product') }}
                            </button>
                            <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                                <x-icon name="plus" class="h-4 w-4" />
                                {{ __('Add line') }}
                            </button>
                        </div>
                    </div>
                    <x-input-error for="lines" class="mt-2" />

                    <div class="mt-2 space-y-3">
                        @foreach ($lines as $i => $line)
                            @php
                                $lineMode = $this->linePricingMode($line);
                                $lineDimensional = $lineMode !== 'fixed';
                            @endphp
                            <div wire:key="line-{{ $i }}" class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                                <div class="grid grid-cols-1 items-start gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Product') }}</span>
                                        <select wire:model.live="lines.{{ $i }}.product_id" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Custom') }}</option>
                                            @foreach ($products as $product)
                                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Name') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.name" />
                                        <x-input-error for="lines.{{ $i }}.name" class="mt-1" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Qty') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.qty" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ $lineDimensional ? ($lineMode === 'per_sqm' ? __('Price / m²') : __('Price / m')) : __('Unit Price') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.unit_price" />
                                    </div>
                                    <div class="sm:col-span-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Discount') }}</span>
                                        <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.discount" />
                                    </div>
                                </div>

                                {{-- Dimensional inputs: only for products priced per m² / linear m. --}}
                                @if ($lineDimensional)
                                    @php
                                        $factor = $this->lineAreaFactor($line);
                                        $bothDims = (float) ($line['width_m'] ?? 0) > 0
                                            && ($lineMode === 'per_linear_m' || (float) ($line['height_m'] ?? 0) > 0);
                                    @endphp
                                    <div class="mt-2 rounded-lg border border-indigo-100 bg-indigo-50/40 p-2.5">
                                        <div class="grid grid-cols-1 items-end gap-2 sm:grid-cols-12">
                                            <div class="sm:col-span-3">
                                                <span class="mb-1 block text-xs font-medium text-indigo-700">{{ __('Width (m)') }}</span>
                                                <x-input type="number" step="0.0001" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.width_m" placeholder="{{ __('e.g. 1.2') }}" />
                                            </div>
                                            <div class="sm:col-span-3">
                                                <span class="mb-1 block text-xs font-medium {{ $lineMode === 'per_linear_m' ? 'text-slate-400' : 'text-indigo-700' }}">{{ __('Height (m)') }}</span>
                                                <x-input type="number" step="0.0001" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.height_m" @disabled($lineMode === 'per_linear_m') placeholder="{{ $lineMode === 'per_linear_m' ? __('n/a') : __('e.g. 2.0') }}" />
                                            </div>
                                            <div class="sm:col-span-6">
                                                <p class="text-xs text-indigo-700">
                                                    @if ($lineMode === 'per_sqm')
                                                        <x-icon name="arrows-pointing-out" class="-mt-0.5 mr-0.5 inline h-3.5 w-3.5" />
                                                        {{ $bothDims
                                                            ? __(':factor m² × qty × price/m²', ['factor' => rtrim(rtrim(number_format($factor, 4), '0'), '.')])
                                                            : __('Enter width × height to price by area.') }}
                                                    @else
                                                        <x-icon name="arrows-pointing-out" class="-mt-0.5 mr-0.5 inline h-3.5 w-3.5" />
                                                        {{ $bothDims
                                                            ? __(':factor m × qty × price/m', ['factor' => rtrim(rtrim(number_format($factor, 4), '0'), '.')])
                                                            : __('Enter the length to price per linear metre.') }}
                                                    @endif
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- Garment details: colour + size breakdown flow through to the invoice, job and delivery note. --}}
                                <div class="mt-2 grid grid-cols-1 items-start gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-3">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Colour') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.colour" placeholder="{{ __('e.g. White') }}" />
                                    </div>
                                    <div class="sm:col-span-9">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Size breakdown') }}</span>
                                        <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.size_breakdown" placeholder="{{ __('e.g. S: 7, M: 11, L: 5, XL: 4') }}" />
                                    </div>
                                </div>

                                <div class="mt-2 grid grid-cols-1 items-center gap-2 sm:grid-cols-12">
                                    <div class="sm:col-span-9">
                                        <textarea rows="2" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('Description (optional), press Enter for a new line') }}" wire:model="lines.{{ $i }}.description"></textarea>
                                    </div>
                                    <div class="text-right text-sm font-semibold text-slate-700 sm:col-span-2">
                                        {{ number_format($this->lineSubtotal($line), 2) }}
                                    </div>
                                    <div class="text-right sm:col-span-1">
                                        <button type="button" wire:click="removeLine({{ $i }})" class="text-sm font-medium text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                    </div>
                                </div>

                                {{-- Cost-plus price builder (custom / one-off items) --}}
                                @php
                                    $hasPricing = ! empty($line['pricing']['costs'] ?? [])
                                        || (float) ($line['pricing']['profit_pct'] ?? 0) > 0
                                        || ! empty($line['pricing']['additions'] ?? []);
                                @endphp
                                <div class="mt-2 flex items-center gap-3 border-t border-slate-200 pt-2">
                                    <button type="button" wire:click="openPricing({{ $i }})"
                                            class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 transition hover:text-indigo-800">
                                        <x-icon name="calculator" class="h-4 w-4" />
                                        {{ $hasPricing ? __('Edit cost-plus price') : __('Build price from costs') }}
                                    </button>
                                    @if ($hasPricing)
                                        @php $hint = $this->computePricing($line['pricing']); @endphp
                                        <span class="text-xs text-slate-500">
                                            {{ __('Cost') }} {{ $currency_code }} {{ number_format($hint['cost_subtotal'], 2) }}
                                            @if (! is_null($hint['margin']))
                                                · {{ __('margin') }} {{ number_format($hint['margin'], 1) }}%
                                            @endif
                                        </span>
                                    @endif
                                </div>

                                @if ($pricingLineIndex === $i && isset($line['pricing']))
                                    @php $pr = $this->computePricing($line['pricing']); @endphp
                                    <div class="mt-2 rounded-xl border border-indigo-200 bg-indigo-50/40 p-4">
                                        <div class="mb-3 flex items-center justify-between">
                                            <h4 class="text-sm font-semibold text-slate-900">{{ __('Cost-plus price builder') }}</h4>
                                            <button type="button" wire:click="closePricing" class="text-xs font-medium text-slate-500 hover:text-slate-700">{{ __('Close') }}</button>
                                        </div>

                                        {{-- Cost rows --}}
                                        <p class="mb-1 text-xs font-medium uppercase tracking-wide text-slate-500">{{ __('Associated costs') }}</p>
                                        <div class="space-y-2">
                                            @foreach ($line['pricing']['costs'] ?? [] as $ci => $cost)
                                                <div wire:key="line-{{ $i }}-cost-{{ $ci }}" class="grid grid-cols-12 items-center gap-2">
                                                    <select wire:model="lines.{{ $i }}.pricing.costs.{{ $ci }}.category"
                                                            class="col-span-4 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:col-span-3">
                                                        @foreach ($costCategories as $value => $label)
                                                            <option value="{{ $value }}">{{ __($label) }}</option>
                                                        @endforeach
                                                    </select>
                                                    <x-input type="text" class="col-span-5 block w-full text-xs sm:col-span-6"
                                                             placeholder="{{ __('What is this cost?') }}"
                                                             wire:model="lines.{{ $i }}.pricing.costs.{{ $ci }}.description" />
                                                    <x-input type="number" step="0.01" min="0" class="col-span-2 block w-full text-xs"
                                                             wire:model.live="lines.{{ $i }}.pricing.costs.{{ $ci }}.amount" />
                                                    <button type="button" wire:click="removeCostRow({{ $i }}, {{ $ci }})"
                                                            class="col-span-1 text-center text-rose-500 transition hover:text-rose-700" title="{{ __('Remove') }}">&times;</button>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button type="button" wire:click="addCostRow({{ $i }})"
                                                class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800">
                                            <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Add cost') }}
                                        </button>

                                        {{-- ===== Material yield calculator ===== --}}
                                        @php $mc = $this->materialCalc; @endphp
                                        <div class="mt-3 rounded-xl border border-violet-200 bg-violet-50/40 p-3">
                                            <div class="mb-2 flex items-center gap-1.5">
                                                <x-icon name="swatch" class="h-3.5 w-3.5 text-violet-600" />
                                                <p class="text-xs font-semibold uppercase tracking-wide text-violet-700">{{ __('Material calculator') }}</p>
                                                <span class="text-[11px] text-slate-400">{{ __('auto m² · offcut · cost') }}</span>
                                            </div>

                                            <div class="grid grid-cols-12 gap-2">
                                                <select wire:model.live="calcVariantId" class="col-span-12 rounded-lg border-slate-300 text-xs shadow-sm focus:border-violet-500 focus:ring-violet-500 sm:col-span-4">
                                                    <option value="">{{ __('Choose material…') }}</option>
                                                    @foreach ($materialOptions as $opt)
                                                        <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                                                    @endforeach
                                                </select>
                                                <x-input type="number" step="0.0001" min="0" class="col-span-3 block w-full text-xs sm:col-span-2" placeholder="{{ __('W (m)') }}" wire:model.live.debounce.400ms="calcW" />
                                                <x-input type="number" step="0.0001" min="0" class="col-span-3 block w-full text-xs sm:col-span-2" placeholder="{{ __('H (m)') }}" wire:model.live.debounce.400ms="calcH" />
                                                <x-input type="number" step="0.01" min="0" class="col-span-3 block w-full text-xs sm:col-span-2" placeholder="{{ __('Qty') }}" wire:model.live.debounce.400ms="calcQty" />
                                                <x-input type="number" step="0.001" min="0" class="col-span-3 block w-full text-xs sm:col-span-2" placeholder="{{ __('Bleed') }}" wire:model.live.debounce.400ms="calcBleed" />
                                            </div>

                                            @if ($mc)
                                                <div class="mt-2 grid grid-cols-2 gap-2 rounded-lg bg-white p-2 text-center text-xs ring-1 ring-violet-100 sm:grid-cols-4">
                                                    <div>
                                                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Consumed') }}</p>
                                                        <p class="font-semibold text-slate-700 tabular-nums">{{ $this->trimNum($mc['consumed_qty']) }} {{ $mc['consumed_unit'] }}</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Offcut') }}</p>
                                                        <p class="font-semibold tabular-nums {{ (float) $mc['offcut_area'] > 0 ? 'text-amber-600' : 'text-slate-400' }}">{{ $this->trimNum($mc['offcut_area']) }} m² ({{ number_format($mc['offcut_pct'], 0) }}%)</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Material cost') }}</p>
                                                        <p class="font-semibold text-slate-700 tabular-nums">{{ $currency_code }} {{ number_format($mc['material_cost'], 2) }}</p>
                                                    </div>
                                                    <div>
                                                        <p class="text-[10px] uppercase tracking-wide text-slate-400">{{ __('Weight') }}</p>
                                                        <p class="font-semibold text-slate-700 tabular-nums">{{ $mc['weight_kg'] !== null ? $mc['weight_kg'].' kg' : '—' }}</p>
                                                    </div>
                                                </div>

                                                @if (! $mc['fits'])
                                                    <p class="mt-1.5 flex items-center gap-1 text-[11px] text-rose-600"><x-icon name="exclamation-triangle" class="h-3.5 w-3.5" />{{ $mc['note'] }}</p>
                                                @endif

                                                {{-- Offcut decision, asked every time there is offcut --}}
                                                @if ((float) $mc['offcut_cost'] > 0)
                                                    <div class="mt-2 rounded-lg bg-white p-2 ring-1 ring-amber-100">
                                                        <p class="text-[11px] text-slate-600">{{ __('Offcut costs :cur :amt, what do you want to do?', ['cur' => $currency_code, 'amt' => number_format($mc['offcut_cost'], 2)]) }}</p>
                                                        @if ($mc['remnant_reusable'])
                                                            <p class="mt-0.5 flex items-center gap-1 text-[11px] text-emerald-600"><x-icon name="cube" class="h-3 w-3" />{{ __('This offcut is a reusable remnant, consider absorbing it.') }}</p>
                                                        @endif
                                                        <div class="mt-1.5 flex flex-wrap items-center gap-3 text-xs">
                                                            <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="charge" class="text-violet-600 focus:ring-violet-500" /> {{ __('Charge client') }}</label>
                                                            <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="absorb" class="text-violet-600 focus:ring-violet-500" /> {{ __('Absorb it') }}</label>
                                                            <label class="inline-flex items-center gap-1"><input type="radio" wire:model.live="calcOffcut" value="partial" class="text-violet-600 focus:ring-violet-500" /> {{ __('Charge') }}</label>
                                                            @if ($calcOffcut === 'partial')
                                                                <div class="relative w-16">
                                                                    <x-input type="number" step="1" min="0" max="100" class="block w-full pr-6 text-xs" wire:model.live="calcOffcutPct" />
                                                                    <span class="pointer-events-none absolute inset-y-0 right-1.5 flex items-center text-[10px] text-slate-400">%</span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @endif

                                                <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
                                                    <div class="text-[11px] text-slate-500">
                                                        @if ($mc['charged'] !== null)
                                                            {{ __('Adds :cur :amt to costs', ['cur' => $currency_code, 'amt' => number_format($mc['charged'], 2)]) }}
                                                            @if (($mc['absorbed'] ?? 0) > 0)
                                                                <span class="text-amber-600">· {{ __('absorbing :cur :amt', ['cur' => $currency_code, 'amt' => number_format($mc['absorbed'], 2)]) }}</span>
                                                            @endif
                                                            @if ($mc['sell_rate'] !== null)
                                                                <span class="text-slate-400">· {{ __('sells @ :cur :rate/m²', ['cur' => $currency_code, 'rate' => number_format($mc['sell_rate'], 2)]) }}</span>
                                                            @endif
                                                        @else
                                                            <span class="text-amber-600">{{ __('Choose what to do with the offcut ↑') }}</span>
                                                        @endif
                                                    </div>
                                                    <button type="button" wire:click="addMaterialToCosts({{ $i }})" @disabled($mc['charged'] === null)
                                                            class="inline-flex items-center gap-1 rounded-lg bg-violet-600 px-3 py-1.5 text-xs font-semibold text-white shadow-sm transition hover:bg-violet-700 disabled:opacity-50">
                                                        <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Add to costs') }}
                                                    </button>
                                                </div>
                                            @elseif ($calcVariantId)
                                                <p class="mt-2 text-[11px] text-slate-400">{{ __('Enter a size and quantity to calculate…') }}</p>
                                            @endif
                                        </div>

                                        {{-- Profit % --}}
                                        <div class="mt-4 flex items-center gap-3">
                                            <label class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ __('Profit markup') }}</label>
                                            <div class="relative w-28">
                                                <x-input type="number" step="0.01" min="0" class="block w-full pr-7 text-xs"
                                                         wire:model.live="lines.{{ $i }}.pricing.profit_pct" />
                                                <span class="pointer-events-none absolute inset-y-0 right-2 flex items-center text-xs text-slate-400">%</span>
                                            </div>
                                            <span class="text-xs text-slate-500">= {{ $currency_code }} {{ number_format($pr['profit'], 2) }}</span>
                                        </div>

                                        {{-- Additions --}}
                                        <p class="mb-1 mt-4 text-xs font-medium uppercase tracking-wide text-slate-500">{{ __('Other additions') }}</p>
                                        <div class="space-y-2">
                                            @foreach ($line['pricing']['additions'] ?? [] as $ai => $addition)
                                                <div wire:key="line-{{ $i }}-add-{{ $ai }}" class="grid grid-cols-12 items-center gap-2">
                                                    <x-input type="text" class="col-span-5 block w-full text-xs sm:col-span-5"
                                                             placeholder="{{ __('e.g. Delivery, Overhead') }}"
                                                             wire:model="lines.{{ $i }}.pricing.additions.{{ $ai }}.label" />
                                                    <select wire:model.live="lines.{{ $i }}.pricing.additions.{{ $ai }}.type"
                                                            class="col-span-4 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:col-span-4">
                                                        <option value="fixed">{{ __('Fixed amount') }}</option>
                                                        <option value="percent">{{ __('% of cost') }}</option>
                                                    </select>
                                                    <x-input type="number" step="0.01" min="0" class="col-span-2 block w-full text-xs"
                                                             wire:model.live="lines.{{ $i }}.pricing.additions.{{ $ai }}.value" />
                                                    <button type="button" wire:click="removeAddition({{ $i }}, {{ $ai }})"
                                                            class="col-span-1 text-center text-rose-500 transition hover:text-rose-700" title="{{ __('Remove') }}">&times;</button>
                                                </div>
                                            @endforeach
                                        </div>
                                        <button type="button" wire:click="addAddition({{ $i }})"
                                                class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-800">
                                            <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Add addition') }}
                                        </button>

                                        {{-- Summary --}}
                                        <div class="mt-4 space-y-1 border-t border-indigo-200 pt-3 text-xs">
                                            <div class="flex justify-between text-slate-600"><span>{{ __('Cost subtotal') }}</span><span>{{ $currency_code }} {{ number_format($pr['cost_subtotal'], 2) }}</span></div>
                                            <div class="flex justify-between text-slate-600"><span>{{ __('Profit') }}</span><span>+ {{ $currency_code }} {{ number_format($pr['profit'], 2) }}</span></div>
                                            <div class="flex justify-between text-slate-600"><span>{{ __('Additions') }}</span><span>+ {{ $currency_code }} {{ number_format($pr['additions'], 2) }}</span></div>
                                            <div class="flex justify-between pt-1 text-sm font-semibold text-slate-900">
                                                <span>{{ __('Selling price') }}</span>
                                                <span>{{ $currency_code }} {{ number_format($pr['price'], 2) }}</span>
                                            </div>
                                            @if (! is_null($pr['margin']))
                                                <div class="flex justify-between text-emerald-600"><span>{{ __('Gross margin') }}</span><span>{{ number_format($pr['margin'], 1) }}%</span></div>
                                            @endif
                                        </div>

                                        <div class="mt-3 flex items-center justify-end gap-2">
                                            <span class="text-xs text-slate-400">{{ __('Costs are for one unit.') }}</span>
                                            <x-button type="button" wire:click="applyPricing({{ $i }})">
                                                {{ __('Apply to unit price') }}
                                            </x-button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Totals -->
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="grid grid-cols-1 gap-4">
                        <div>
                            <x-label for="discount" value="{{ __('Discount') }}" />
                            <x-input id="discount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live="discount" />
                            <x-input-error for="discount" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="vat_rate" value="{{ __('VAT %') }}" />
                            <x-input id="vat_rate" type="number" step="0.01" min="0" max="100" class="mt-1 block w-full" wire:model.live="vat_rate" />
                            <x-input-error for="vat_rate" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="payment_method_id" value="{{ __('Payment Method') }}" />
                            <select id="payment_method_id" wire:model.live="payment_method_id" 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="">{{ __('Not specified (no charge)') }}</option>
                                @foreach ($paymentMethods as $method)
                                    <option value="{{ $method->id }}">{{ $method->pickerLabel() }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-xs text-slate-500">
                                {{ __('Methods carrying a charge add it to the total.') }}
                                <a href="{{ route('payment-methods.index') }}" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Set rates') }}</a>
                            </p>
                            {{-- A quote gets the same treatment as an invoice: clients pay off
                                 quotes as though they were pro-formas, so an account number on one
                                 priced for cash invites a transfer we never charged for. --}}
                            @php $bankingMethod = $paymentMethods->firstWhere('id', (int) $payment_method_id); @endphp
                            <p class="mt-1 text-xs text-slate-500">
                                {{ $bankingMethod?->isBankTransfer()
                                    ? __('Your bank details will print on this quote.')
                                    : __('No bank details will print on this quote.') }}
                            </p>
                            <x-input-error for="payment_method_id" class="mt-2" />
                        </div>
                    </div>
                    <div class="space-y-2 rounded-xl bg-slate-50 p-4 text-sm ring-1 ring-slate-200">
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('Subtotal') }}</span>
                            <span class="font-medium text-slate-900">{{ number_format($totals['subtotal'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('Discount') }}</span>
                            <span class="font-medium text-slate-900">- {{ number_format($totals['discount'], 2) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-500">{{ __('VAT') }}</span>
                            <span class="font-medium text-slate-900">{{ number_format($totals['vat'], 2) }}</span>
                        </div>
                        @if ($totals['surcharge_label'])
                            <div class="flex justify-between gap-3">
                                <span class="text-amber-700">{{ $totals['surcharge_label'] }}</span>
                                <span class="whitespace-nowrap font-medium text-amber-700">+ {{ number_format($totals['surcharge'], 2) }}</span>
                            </div>
                        @endif
                        <div class="flex justify-between border-t border-slate-200 pt-2 text-base font-bold">
                            <span class="text-slate-900">{{ __('Total') }}</span>
                            <span class="text-indigo-600">{{ $currency_code }} {{ number_format($totals['total'], 2) }}</span>
                        </div>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="status" value="{{ __('Status') }}" />
                        <select id="status" wire:model="status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($statuses as $s)
                                <option value="{{ $s }}">{{ $s }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="status" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="valid_until" value="{{ __('Valid Until') }}" />
                        <x-input id="valid_until" type="date" class="mt-1 block w-full" wire:model="valid_until" />
                        <x-input-error for="valid_until" class="mt-2" />
                    </div>
                </div>

                <div>
                    <x-label for="notes" value="{{ __('Notes') }}" />
                    <textarea id="notes" rows="2" wire:model="notes" 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="notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>