@php
    $statusBadge = [
        'draft' => 'slate', 'dispatched' => 'sky',
        'received' => 'emerald', 'cancelled' => 'rose',
    ];
    $statusLabel = [
        'draft' => __('Draft'), 'dispatched' => __('Dispatched'),
        'received' => __('Received'), 'cancelled' => __('Cancelled'),
    ];
    $kpiIcon = [
        'indigo' => 'bg-indigo-50 text-indigo-600', 'amber' => 'bg-amber-50 text-amber-600',
        'emerald' => 'bg-emerald-50 text-emerald-600', 'sky' => 'bg-sky-50 text-sky-600',
    ];
    $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();
        return $parts->isEmpty() ? '—' : $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-sales-doc-tabs />

        <x-page-header :title="__('Delivery Notes')" :subtitle="__('Record what physically left the shop, against a job or invoice, with partial-delivery tracking.')">
            <x-button wire:click="create" type="button">
                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('New Delivery Note') }}
            </x-button>
        </x-page-header>

        {{-- Order context: cumulative fulfilment for the invoice/job you arrived from. --}}
        @if ($orderContext)
            @php $fmt = fn ($v) => rtrim(rtrim(number_format((float) $v, 2), '0'), '.'); @endphp
            <div class="rounded-2xl border border-indigo-200 bg-indigo-50/60 p-4 sm:p-5">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div>
                        <div class="flex items-center gap-2 text-sm font-semibold text-indigo-900">
                            <x-icon name="truck" class="h-4 w-4" />
                            {{ __('Deliveries for') }}
                            {{ $orderContext['type'] === 'invoice' ? __('Invoice') : __('Job') }} {{ $orderContext['ref'] }}
                        </div>
                        <div class="mt-2 flex flex-wrap items-center gap-x-6 gap-y-1 text-sm">
                            <span class="text-slate-500">{{ __('Ordered') }}: <span class="font-semibold text-slate-800">{{ $fmt($orderContext['ordered']) }}</span></span>
                            <span class="text-slate-500">{{ __('Delivered') }}: <span class="font-semibold text-emerald-700">{{ $fmt($orderContext['delivered']) }}</span></span>
                            <span class="text-slate-500">{{ __('Outstanding') }}: <span class="font-semibold {{ $orderContext['outstanding'] > 0 ? 'text-amber-600' : 'text-emerald-700' }}">{{ $fmt($orderContext['outstanding']) }}</span></span>
                        </div>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <a href="{{ route('delivery-notes.index') }}" wire:navigate
                           class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-medium text-slate-600 ring-1 ring-slate-200 transition hover:bg-slate-50">
                            {{ __('View all notes') }}
                        </a>
                        @if ($orderContext['outstanding'] > 0)
                            <x-button wire:click="createForCurrentOrder" type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('New delivery note') }} · {{ __('remaining') }} {{ $fmt($orderContext['outstanding']) }}
                            </x-button>
                        @else
                            <span class="inline-flex items-center gap-1.5 rounded-xl bg-emerald-50 px-3.5 py-2 text-sm font-semibold text-emerald-700 ring-1 ring-emerald-200">
                                <x-icon name="check-circle" class="h-4 w-4" />
                                {{ __('Fully delivered') }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <!-- KPI cards -->
        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-card class="p-5">
                    <div class="flex items-center gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $kpiIcon[$kpi['color']] ?? $kpiIcon['indigo'] }}">
                            <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                        </span>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                    </div>
                    <p class="mt-4 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $kpi['value'] }}</p>
                    <p class="mt-1 text-xs text-slate-400">{{ $kpi['sub'] }}</p>
                </x-card>
            @endforeach
        </section>

        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-2.5 border-b border-slate-100 p-4 sm:p-6 lg:flex-row lg:flex-nowrap lg:items-center">
                <div class="relative w-full min-w-0 lg:w-64">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5 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 delivery notes...') }}"
                        class="block h-11 w-full rounded-xl border-slate-300 pl-10 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500" />
                </div>

                <select wire:model.live="statusFilter"
                    class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500 lg:w-40">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statuses as $s)
                        <option value="{{ $s }}">{{ $statusLabel[$s] ?? ucfirst($s) }}</option>
                    @endforeach
                </select>

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

                <select wire:model.live="sortBy"
                    class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm transition focus:border-indigo-500 focus:ring-indigo-500 lg:ml-auto lg:w-40">
                    <option value="latest">{{ __('Newest first') }}</option>
                    <option value="oldest">{{ __('Oldest first') }}</option>
                </select>
            </div>

            <!-- Table (desktop) -->
            <div class="hidden overflow-x-auto sm:block">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Delivery Note') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Customer') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Delivered') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse ($deliveryNotes as $note)
                            @php
                                $outstanding = $note->total_outstanding;
                            @endphp
                            <tr wire:key="note-{{ $note->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4">
                                    <button type="button" wire:click="edit({{ $note->id }})"
                                        class="text-sm font-semibold text-indigo-600 hover:underline">{{ $note->delivery_number }}</button>
                                    @if ($note->project_name)
                                        <p class="truncate text-xs text-slate-400">{{ $note->project_name }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4">
                                    <div class="flex min-w-0 items-center gap-3">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold {{ $avatarColor($note->customer?->name) }}">
                                            {{ $initials($note->customer?->name) }}
                                        </span>
                                        <p class="truncate text-sm font-medium text-slate-900">{{ $note->customer?->name ?: '—' }}</p>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                    <p class="text-sm font-semibold tabular-nums text-slate-900">{{ rtrim(rtrim(number_format($note->total_delivered, 2), '0'), '.') }}</p>
                                    @if ($outstanding > 0)
                                        <p class="text-xs font-medium text-amber-600">{{ __('Outstanding') }}: {{ rtrim(rtrim(number_format($outstanding, 2), '0'), '.') }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    <x-badge :color="$statusBadge[$note->status] ?? 'slate'">
                                        <span class="h-1.5 w-1.5 rounded-full bg-current"></span>
                                        {{ $statusLabel[$note->status] ?? ucfirst($note->status) }}
                                    </x-badge>
                                    @if ($note->signed_path)
                                        <a href="{{ $note->signedUrl() }}" target="_blank" rel="noopener" title="{{ __('View signed copy') }}"
                                           class="ml-1 inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-600 hover:bg-emerald-100">
                                            <x-icon name="check-circle" class="h-3 w-3" />
                                            {{ __('Signed') }}
                                        </a>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    {{ optional($note->delivery_date)->format('Y-m-d') ?: $note->created_at?->format('Y-m-d') }}
                                </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-0.5">
                                        <a href="{{ route('delivery-notes.preview', $note) }}" target="_blank" rel="noopener"
                                           title="{{ __('View / print') }}"
                                           class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600">
                                            <x-icon name="eye" class="h-4 w-4" />
                                        </a>
                                        <a href="{{ route('delivery-notes.pdf', $note) }}"
                                           title="{{ __('Download PDF') }}"
                                           class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-700">
                                            <x-icon name="arrow-down-tray" class="h-4 w-4" />
                                        </a>
                                        <x-notes-button :for="$note" />
                                        <button type="button" wire:click="edit({{ $note->id }})"
                                                title="{{ __('Edit') }}"
                                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-indigo-50 hover:text-indigo-600">
                                            <x-icon name="pencil-square" class="h-4 w-4" />
                                        </button>
                                        <button type="button" wire:click="delete({{ $note->id }})" wire:confirm="{{ __('Delete this delivery note?') }}"
                                                title="{{ __('Delete') }}"
                                                class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600">
                                            <x-icon name="trash" class="h-4 w-4" />
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    <x-empty-state icon="truck" :title="__('No delivery notes yet')"
                                        :message="__('Create one from a job, an invoice, or from scratch.')" class="border-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Cards (mobile) -->
            <div class="divide-y divide-slate-100 sm:hidden">
                @forelse ($deliveryNotes as $note)
                    <div wire:key="note-mobile-{{ $note->id }}" class="p-4">
                        <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                                <button type="button" wire:click="edit({{ $note->id }})"
                                    class="text-sm font-semibold text-indigo-600 hover:underline">{{ $note->delivery_number }}</button>
                                <p class="truncate text-sm text-slate-700">{{ $note->customer?->name ?: '—' }}</p>
                                @if ($note->project_name)
                                    <p class="truncate text-xs text-slate-400">{{ $note->project_name }}</p>
                                @endif
                            </div>
                            <x-badge :color="$statusBadge[$note->status] ?? 'slate'">{{ $statusLabel[$note->status] ?? ucfirst($note->status) }}</x-badge>
                        </div>
                        <div class="mt-3 flex items-center justify-between">
                            <p class="text-xs text-slate-500">
                                {{ __('Delivered') }}: <span class="font-semibold text-slate-800">{{ rtrim(rtrim(number_format($note->total_delivered, 2), '0'), '.') }}</span>
                                @if ($note->total_outstanding > 0)
                                    · <span class="text-amber-600">{{ __('Out') }} {{ rtrim(rtrim(number_format($note->total_outstanding, 2), '0'), '.') }}</span>
                                @endif
                            </p>
                            <div class="flex items-center gap-1">
                                <a href="{{ route('delivery-notes.pdf', $note) }}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-700">
                                    <x-icon name="arrow-down-tray" class="h-4 w-4" />
                                </a>
                                <button type="button" wire:click="delete({{ $note->id }})" wire:confirm="{{ __('Delete this delivery note?') }}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 hover:bg-rose-50 hover:text-rose-600">
                                    <x-icon name="trash" class="h-4 w-4" />
                                </button>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="p-10 text-center text-sm text-slate-400">{{ __('No delivery notes yet.') }}</div>
                @endforelse
            </div>

            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $deliveryNotes->links() }}
            </div>
        </x-card>

        <!-- Create / Edit modal -->
        <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
            <x-slot name="title">
                {{ $editingId ? __('Edit Delivery Note') : __('New Delivery Note') }}
                @if ($delivery_number)
                    <span class="ml-1 text-sm font-normal text-slate-400">{{ $delivery_number }}</span>
                @endif
            </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-3">
                        <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)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="customer_id" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="delivery_date" value="{{ __('Delivery date') }}" />
                            <x-input id="delivery_date" type="date" class="mt-1 block w-full" wire:model="delivery_date" />
                            <x-input-error for="delivery_date" class="mt-2" />
                        </div>
                        <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 }}">{{ ucfirst($s) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="status" class="mt-2" />
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="invoice_id" value="{{ __('Linked invoice (optional)') }}" />
                            <select id="invoice_id" wire:model="invoice_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="">{{ __('None') }}</option>
                                @foreach ($invoices as $invoice)
                                    <option value="{{ $invoice->id }}">{{ $invoice->invoice_number }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <x-label for="job_id" value="{{ __('Linked job (optional)') }}" />
                            <select id="job_id" wire:model="job_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="">{{ __('None') }}</option>
                                @foreach ($jobs as $job)
                                    <option value="{{ $job->id }}">{{ $job->job_number }}, {{ \Illuminate\Support\Str::limit($job->title, 40) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="project_name" value="{{ __('Project / print job') }}" />
                            <x-input id="project_name" type="text" class="mt-1 block w-full" wire:model="project_name" placeholder="{{ __('e.g. Branded Formal Shirts (Ralph Lauren)') }}" />
                        </div>
                        <div>
                            <x-label for="delivery_method" value="{{ __('Delivery method') }}" />
                            <x-input id="delivery_method" type="text" class="mt-1 block w-full" wire:model="delivery_method" placeholder="{{ __('e.g. Own vehicle, Courier') }}" />
                        </div>
                    </div>

                    <div>
                        <x-label for="delivery_address" value="{{ __('Delivery address') }}" />
                        <textarea id="delivery_address" rows="2" wire:model="delivery_address" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('Where the goods are delivered') }}"></textarea>
                    </div>

                    <!-- Line items -->
                    <div>
                        <div class="flex items-center justify-between">
                            <x-label value="{{ __('Items delivered') }}" />
                            <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-700">
                                <x-icon name="plus" class="h-4 w-4" />
                                {{ __('Add line') }}
                            </button>
                        </div>
                        <x-input-error for="lines" class="mt-2" />

                        <div class="mt-2 space-y-3">
                            @foreach ($lines as $i => $line)
                                @php
                                    $ordered = (float) ($line['ordered_qty'] ?? 0);
                                    $delivered = (float) ($line['delivered_qty'] ?? 0);
                                    $rowOutstanding = max(0, $ordered - $delivered);
                                @endphp
                                <div wire:key="dn-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-5">
                                            <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Item description') }}</span>
                                            <x-input type="text" class="block w-full text-sm" wire:model="lines.{{ $i }}.name" placeholder="{{ __('e.g. Branded Formal Shirts') }}" />
                                            <x-input-error for="lines.{{ $i }}.name" class="mt-1" />
                                        </div>
                                        <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-2">
                                            <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Ordered') }}</span>
                                            <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.ordered_qty" />
                                        </div>
                                        <div class="sm:col-span-2">
                                            <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Delivered') }}</span>
                                            <x-input type="number" step="0.01" min="0" class="block w-full text-sm" wire:model.live="lines.{{ $i }}.delivered_qty" />
                                        </div>
                                    </div>

                                    <div class="mt-2 grid grid-cols-1 items-center gap-2 sm:grid-cols-12">
                                        <div class="sm:col-span-10">
                                            <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 class="flex items-end justify-between gap-2 sm:col-span-2">
                                            <div class="text-xs">
                                                <span class="block text-slate-400">{{ __('Outstanding') }}</span>
                                                <span class="font-semibold {{ $rowOutstanding > 0 ? 'text-amber-600' : 'text-emerald-600' }}">{{ rtrim(rtrim(number_format($rowOutstanding, 2), '0'), '.') }}</span>
                                            </div>
                                            <button type="button" wire:click="removeLine({{ $i }})" class="pb-0.5 text-sm font-medium text-rose-600 transition hover:text-rose-700">{{ __('Remove') }}</button>
                                        </div>
                                    </div>

                                    <div class="mt-2">
                                        <span class="mb-1 block text-xs font-medium text-slate-500">{{ __('Description / specification') }}</span>
                                        <textarea rows="2" wire:model="lines.{{ $i }}.description" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" placeholder="{{ __('e.g. Corporate Van Heusen shirts, branded with embroidery logo') }}"></textarea>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="dispatched_by" value="{{ __('Dispatched by') }}" />
                            <x-input id="dispatched_by" type="text" class="mt-1 block w-full" wire:model="dispatched_by" placeholder="{{ __('Staff name') }}" />
                        </div>
                        <div>
                            <x-label for="received_by" value="{{ __('Received by') }}" />
                            <x-input id="received_by" type="text" class="mt-1 block w-full" wire:model="received_by" placeholder="{{ __('Client signatory (optional)') }}" />
                        </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" placeholder="{{ __('e.g. 6 shirts (4XL) pending alternative-brand approval.') }}"></textarea>
                    </div>

                    {{-- Signed copy: upload the physically signed delivery note back into the system. --}}
                    <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-slate-700">{{ __('Signed copy') }}</span>
                            @if ($existingSignedUrl)
                                <a href="{{ $existingSignedUrl }}" target="_blank" rel="noopener" class="inline-flex items-center gap-1 text-sm font-medium text-emerald-600 hover:text-emerald-700">
                                    <x-icon name="check-circle" class="h-4 w-4" />
                                    {{ __('View signed copy') }}
                                </a>
                            @endif
                        </div>
                        @if ($existingSignedUrl)
                            <p class="mt-1 text-xs text-slate-400">{{ __('Uploaded :when. Choose a file to replace it.', ['when' => $existingSignedAt]) }}</p>
                        @else
                            <p class="mt-1 text-xs text-slate-400">{{ __('Upload the returned, signed delivery note (PDF, JPG or PNG).') }}</p>
                        @endif
                        <input type="file" wire:model="signedUpload" accept=".pdf,.jpg,.jpeg,.png"
                               class="mt-2 block w-full text-sm text-slate-600 file:mr-3 file:rounded-lg file:border-0 file:bg-indigo-50 file:px-3 file:py-1.5 file:text-sm file:font-medium file:text-indigo-600 hover:file:bg-indigo-100" />
                        <x-upload-progress target="signedUpload" 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>
</div>