@php
    $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',
    ];
    // Both lanes share the status column, so this covers the counter path
    // (printing → ready → collected) and the quote path (quoting → quoted →
    // converted). Unknown values fall back rather than blowing up the row.
    $statusMeta = [
        'new' => ['label' => __('New'), 'badge' => 'bg-indigo-50 text-indigo-700 ring-indigo-200'],
        'printing' => ['label' => __('Printing'), 'badge' => 'bg-sky-50 text-sky-700 ring-sky-200'],
        'ready' => ['label' => __('Ready'), 'badge' => 'bg-emerald-50 text-emerald-700 ring-emerald-200'],
        'completed' => ['label' => __('Collected'), 'badge' => 'bg-slate-100 text-slate-600 ring-slate-200'],
        'cancelled' => ['label' => __('Cancelled'), 'badge' => 'bg-rose-50 text-rose-700 ring-rose-200'],
        'quoting' => ['label' => __('Being quoted'), 'badge' => 'bg-sky-50 text-sky-700 ring-sky-200'],
        'quoted' => ['label' => __('Quote sent'), 'badge' => 'bg-amber-50 text-amber-700 ring-amber-200'],
        'converted' => ['label' => __('Accepted'), 'badge' => 'bg-emerald-50 text-emerald-700 ring-emerald-200'],
    ];
    $statusFor = fn ($s) => $statusMeta[$s] ?? ['label' => ucfirst((string) $s), 'badge' => 'bg-slate-100 text-slate-600 ring-slate-200'];
    $money = fn ($n, $cur = 'USD') => $cur . ' ' . number_format((float) $n, 2);
@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="__('Print Requests')" :subtitle="__('Walk-in prints customers send from their phone, review, print and take payment. No invoices.')">
            <div class="flex flex-wrap items-center gap-2" x-data="{ m: '{{ now()->format('Y-m') }}' }">
                <div class="flex items-center gap-1.5 rounded-xl bg-white px-2 py-1 ring-1 ring-slate-200">
                    <input type="month" x-model="m" max="{{ now()->format('Y-m') }}" class="border-0 bg-transparent p-1 text-sm text-slate-600 focus:ring-0">
                    <a :href="'{{ route('service-requests.summary') }}?month=' + m" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-1.5 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-200">
                        <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" /> {{ __('Monthly summary') }}
                    </a>
                </div>
                <button type="button" wire:click="openServices"
                        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">
                    <x-icon name="squares-2x2" class="h-4 w-4" />
                    {{ __('Services') }}
                </button>
                {{-- Paper that went to nobody's bill (a customer's invoice printed for them): off the shelf, no sale. --}}
                <livewire:service-requests.internal-print />
                <button type="button" wire:click="openWallet"
                        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">
                    <x-icon name="banknotes" class="h-4 w-4" />
                    {{ __('Change wallet') }}
                </button>
                <button type="button" wire:click="openSettings"
                        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">
                    <x-icon name="qr-code" class="h-4 w-4" />
                    {{ __('Intake & pricing') }}
                </button>
                {{-- The customer who walked in without scanning anything. --}}
                <x-button type="button" wire:click="openTill" variant="gradient">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" />
                    {{ __('New sale') }}
                </x-button>
            </div>
        </x-page-header>

        {{-- ========================== NEW SALE (TILL) ========================== --}}
        <x-dialog-modal wire:model.live="showTill" maxWidth="lg">
            <x-slot name="title">{{ __('New sale') }}</x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('For the customer standing at the counter. Take their details, then add what they are paying for.') }}
                </p>

                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="tillName" :value="__('Customer name')" />
                        <x-input id="tillName" type="text" wire:model="tillName" placeholder="{{ __('Walk-in') }}" class="mt-1 block w-full" />
                        <x-input-error for="tillName" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="tillPhone" :value="__('Phone (optional)')" />
                        <x-input id="tillPhone" type="tel" inputmode="tel" wire:model="tillPhone" placeholder="0771 234 567" class="mt-1 block w-full" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Needed only if they might leave change behind.') }}</p>
                        <x-input-error for="tillPhone" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label :value="__('Paying by')" />
                        <div class="mt-1.5 grid grid-cols-2 gap-2">
                            @foreach (['cash' => __('Cash'), 'ecocash' => __('EcoCash')] as $method => $label)
                                <button type="button" wire:click="$set('tillMethod', '{{ $method }}')"
                                        class="flex items-center justify-center gap-2 rounded-xl border-2 px-3 py-3 text-sm font-semibold transition {{ $tillMethod === $method ? 'border-indigo-500 bg-indigo-50 text-indigo-700' : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300' }}">
                                    <x-icon :name="$method === 'cash' ? 'banknotes' : 'device-phone-mobile'" class="h-4 w-4" />
                                    {{ $label }}
                                </button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="closeTill">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ml-2" wire:click="startSale" wire:loading.attr="disabled" wire:target="startSale">
                    <span wire:loading.remove wire:target="startSale">{{ __('Start sale') }}</span>
                    <span wire:loading wire:target="startSale">{{ __('Starting…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ===================== CHANGE WALLET LOOKUP ====================== --}}
        <x-dialog-modal wire:model.live="showWallet" maxWidth="lg">
            <x-slot name="title">{{ __('Change wallet') }}</x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('A customer who overpaid left their change here. Look it up by the phone number they gave.') }}
                </p>

                <div class="mt-4">
                    <x-label for="walletPhone" :value="__('Phone number')" />
                    <x-input id="walletPhone" type="tel" inputmode="tel" wire:model.live.debounce.400ms="walletPhone"
                             placeholder="0771 234 567" class="mt-1 block h-11 w-full" />
                </div>

                @php
                    $walletUsable = $this->walletPhoneIsUsable();
                    $totals = $this->walletTotals();
                    $entries = $this->walletEntries();
                @endphp

                @if (! $walletUsable)
                    <p class="mt-4 text-sm text-slate-400">{{ __('Type a phone number to see what is waiting.') }}</p>
                @elseif (empty($totals))
                    <div class="mt-4 rounded-xl bg-slate-50 p-4 text-center">
                        <p class="text-sm font-medium text-slate-600">{{ __('No change is being held for this number.') }}</p>
                        <p class="mt-1 text-xs text-slate-500">{{ __('It may have already been used, or the week may have passed.') }}</p>
                    </div>
                @else
                    <div class="mt-4 rounded-xl bg-emerald-50 p-4 ring-1 ring-emerald-100">
                        @foreach ($totals as $currency => $amount)
                            <p class="text-2xl font-semibold text-emerald-800">{{ $currency }} {{ number_format($amount, 2) }}</p>
                        @endforeach
                        <p class="mt-0.5 text-xs text-emerald-700">
                            {{ __('Applied automatically on their next cash job at this number.') }}
                        </p>
                    </div>

                    <ul class="mt-3 divide-y divide-slate-100 rounded-xl ring-1 ring-slate-200">
                        @foreach ($entries as $entry)
                            <li class="flex items-center justify-between gap-3 px-3 py-2.5">
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-slate-800">
                                        {{ $entry['currency'] }} {{ number_format($entry['remaining'], 2) }}
                                    </p>
                                    <p class="truncate text-xs text-slate-500">
                                        {{ $entry['reference'] ? __('Change from :ref', ['ref' => $entry['reference']]) : __('Change held') }}
                                    </p>
                                </div>
                                @if ($entry['held_since'])
                                    <span class="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-xs font-medium text-slate-600">
                                        {{ __('Since :date', ['date' => $entry['held_since']->timezone(config('app.display_timezone'))->format('j M Y')]) }}
                                    </span>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                @endif
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="closeWallet">{{ __('Close') }}</x-secondary-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ========================= SERVICES MODAL ========================= --}}
        <x-dialog-modal wire:model.live="showServices" maxWidth="3xl">
            <x-slot name="title">{{ __('Services on your intake link') }}</x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('What customers can choose from when they scan your QR code. Switch off anything you do not offer and it stops appearing.') }}
                </p>

                <div class="mt-5 space-y-3">
                    @foreach ($serviceRows as $i => $row)
                        <div wire:key="svc-{{ $row['id'] }}"
                             class="rounded-2xl border border-slate-200 p-4 {{ $row['is_active'] ? '' : 'bg-slate-50 opacity-70' }}">
                            <div class="flex flex-wrap items-start gap-3">
                                <label class="flex items-center gap-2 pt-2">
                                    <input type="checkbox" wire:model.live="serviceRows.{{ $i }}.is_active"
                                           class="h-5 w-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                </label>

                                <div class="min-w-0 flex-1 space-y-2">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <x-input type="text" wire:model="serviceRows.{{ $i }}.name" class="min-w-0 flex-1 font-semibold" />
                                        <span class="rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1
                                            {{ $row['lane'] === 'counter' ? 'bg-emerald-50 text-emerald-700 ring-emerald-200' : 'bg-slate-100 text-slate-600 ring-slate-200' }}">
                                            {{ $row['lane'] === 'counter' ? __('Pays here') : __('Quote') }}
                                        </span>
                                    </div>
                                    <x-input-error for="serviceRows.{{ $i }}.name" />

                                    <x-input type="text" wire:model="serviceRows.{{ $i }}.blurb" class="w-full text-sm"
                                             placeholder="{{ __('One line describing it, shown under the name') }}" />

                                    <div class="flex flex-wrap gap-3">
                                        <label class="text-xs text-slate-500">
                                            {{ __('Order') }}
                                            <x-input type="number" min="0" wire:model="serviceRows.{{ $i }}.sort_order" class="mt-0.5 block w-20" />
                                        </label>
                                        @if ($row['lane'] !== 'counter')
                                            <label class="text-xs text-slate-500">
                                                {{ __('Quote within (hours)') }}
                                                <x-input type="number" min="1" wire:model="serviceRows.{{ $i }}.lead_time_hours" class="mt-0.5 block w-24" />
                                                <x-input-error for="serviceRows.{{ $i }}.lead_time_hours" />
                                            </label>
                                        @endif
                                    </div>

                                    @if (! empty($row['fields']))
                                        <details class="mt-2 rounded-xl bg-slate-50 px-3 py-2">
                                            <summary class="cursor-pointer text-xs font-semibold text-slate-600">
                                                {{ trans_choice('{1}1 question|[2,*]:count questions', count($row['fields']), ['count' => count($row['fields'])]) }}
                                            </summary>
                                            <div class="mt-3 space-y-3">
                                                @foreach ($row['fields'] as $f => $field)
                                                    <div wire:key="svc-{{ $row['id'] }}-f{{ $f }}">
                                                        <x-input type="text" wire:model="serviceRows.{{ $i }}.fields.{{ $f }}.label" class="w-full text-sm" />
                                                        <x-input-error for="serviceRows.{{ $i }}.fields.{{ $f }}.label" />
                                                        @if (in_array($field['block'], ['choice', 'multi_choice'], true))
                                                            <textarea wire:model="serviceRows.{{ $i }}.fields.{{ $f }}.options" rows="3"
                                                                      placeholder="{{ __('One option per line') }}"
                                                                      class="mt-1 block w-full rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                            <p class="mt-2 text-[11px] text-slate-400">
                                                {{ __('You can reword a question and change its options. Which questions a service asks is fixed, so every answer still lands on the right part of the quote.') }}
                                            </p>
                                        </details>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="closeServices">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ml-2" wire:click="saveServices">{{ __('Save services') }}</x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- Intake status strip --}}
        @if (! $setting->print_intake_enabled)
            <div class="flex flex-col gap-3 rounded-2xl border border-amber-200 bg-amber-50/70 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-2 text-sm text-amber-800">
                    <x-icon name="exclamation-triangle" class="h-5 w-5 shrink-0" />
                    {{ __('The public intake link is turned off, customers cannot submit yet.') }}
                </div>
                <div class="flex shrink-0 items-center gap-2">
                    <button type="button" wire:click="toggleIntake" class="inline-flex items-center gap-1.5 rounded-xl bg-amber-600 px-3.5 py-2 text-sm font-semibold text-white transition hover:bg-amber-700">
                        {{ __('Open link') }}
                    </button>
                    <button type="button" wire:click="openSettings" class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3.5 py-2 text-sm font-semibold text-amber-700 ring-1 ring-amber-200 transition hover:bg-amber-50">
                        {{ __('Set up pricing') }}
                    </button>
                </div>
            </div>
        @elseif ($intakeUrl)
            <div class="flex flex-col gap-3 rounded-2xl border border-emerald-200 bg-emerald-50/60 p-4 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-2 text-sm text-emerald-800">
                    <x-icon name="check-circle" class="h-5 w-5 shrink-0" />
                    {{ __('Intake is live. Share the QR code or link with walk-in customers.') }}
                </div>
                <div class="flex shrink-0 items-center gap-2">
                    <input type="text" readonly value="{{ $intakeUrl }}"
                           class="w-48 rounded-xl border-slate-200 bg-white text-xs text-slate-500 shadow-sm" onclick="this.select()">
                    <a href="{{ route('service-requests.poster') }}" target="_blank" rel="noopener"
                       class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-emerald-200 transition hover:bg-emerald-50">
                        <x-icon name="arrow-down-tray" class="h-4 w-4" /> {{ __('Poster') }}
                    </a>
                    <button type="button" wire:click="openSettings" class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-sm font-medium text-emerald-700 ring-1 ring-emerald-200 transition hover:bg-emerald-50">
                        <x-icon name="qr-code" class="h-4 w-4" /> {{ __('QR') }}
                    </button>
                    <button type="button" wire:click="toggleIntake" wire:confirm="{{ __('Close the intake link? Customers will no longer be able to submit.') }}"
                            class="inline-flex items-center gap-1.5 rounded-xl bg-white px-3 py-2 text-sm font-medium text-rose-600 ring-1 ring-rose-200 transition hover:bg-rose-50">
                        {{ __('Close') }}
                    </button>
                </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 text-3xl font-bold tracking-tight text-slate-900 tabular-nums">{{ $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:items-center">
                <div class="relative w-full min-w-0 lg:w-72">
                    <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 name, phone or ref…') }}"
                           class="block h-11 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="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-44">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statusMeta as $key => $meta)
                        <option value="{{ $key }}">{{ $meta['label'] }}</option>
                    @endforeach
                </select>
                <select wire:model.live="laneFilter" class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-40">
                    <option value="">{{ __('Counter & quotes') }}</option>
                    <option value="counter">{{ __('Counter, paid here') }}</option>
                    <option value="quote">{{ __('Quote enquiries') }}</option>
                </select>
                @if ($services->count() > 1)
                    <select wire:model.live="serviceFilter" class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-44">
                        <option value="">{{ __('All services') }}</option>
                        @foreach ($services as $svc)
                            <option value="{{ $svc->id }}">{{ $svc->name }}</option>
                        @endforeach
                    </select>
                @endif
                <select wire:model.live="paymentFilter" class="h-11 w-full min-w-0 rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 lg:w-40">
                    <option value="">{{ __('All payments') }}</option>
                    <option value="unpaid">{{ __('Unpaid') }}</option>
                    <option value="paid">{{ __('Paid') }}</option>
                </select>
                {{-- Delete asks waiting on a director. Shown only while there are
                     any (or the filter is on), so the bar stays quiet the rest of the time. --}}
                @if ($pendingDeletions > 0 || $pendingFilter)
                    <button type="button" wire:click="$toggle('pendingFilter')"
                            class="inline-flex h-11 shrink-0 items-center gap-1.5 rounded-xl px-3 text-sm font-semibold ring-1 transition {{ $pendingFilter ? 'bg-rose-600 text-white ring-rose-600 hover:bg-rose-700' : 'bg-rose-50 text-rose-700 ring-rose-200 hover:bg-rose-100' }}">
                        <x-icon name="trash" class="h-4 w-4" />
                        {{ trans_choice('{0}No delete requests|{1}:count delete request|[2,*]:count delete requests', $pendingDeletions, ['count' => $pendingDeletions]) }}
                    </button>
                @endif
            </div>

            {{-- List --}}
            <div class="divide-y divide-slate-100">
                @forelse ($requests as $req)
                    @php $sm = $statusFor($req->status); @endphp
                    <button type="button" wire:click="openDetail({{ $req->id }})" class="flex w-full items-center gap-4 px-4 py-4 text-left transition hover:bg-slate-50 sm:px-6">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-500">
                            <x-icon name="document-text" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-center gap-2">
                                <p class="truncate text-sm font-semibold text-slate-900">{{ $req->customer_name }}</p>
                                <span class="rounded-md bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-500">{{ $req->reference }}</span>
                            </div>
                            <p class="mt-0.5 truncate text-xs text-slate-500">
                                @if ($req->isQuoteLane())
                                    {{ $req->intakeService?->name ?: __('Enquiry') }} ·
                                    {{ $req->files->count() }} {{ trans_choice('{1}file|[2,*]files', $req->files->count()) }}{{ $req->needed_by ? ' · ' . __('needed :date', ['date' => $req->needed_by->format('j M')]) : '' }}
                                @else
                                    {{ $req->colorLabel() }} · {{ $req->paper_size }} {{ $req->material_type }} ·
                                    {{ $req->pages }} {{ trans_choice('{1}pg|[2,*]pgs', $req->pages) }} × {{ $req->copies }} ·
                                    {{ $req->files->count() }} {{ trans_choice('{1}file|[2,*]files', $req->files->count()) }}{{ $req->double_sided ? ' · ' . __('2-sided') : '' }}
                                @endif
                            </p>
                        </div>
                        <div class="hidden shrink-0 text-right sm:block">
                            @if ($req->isQuoteLane())
                                <p class="text-sm font-semibold text-slate-400">{{ __('Not priced') }}</p>
                            @else
                                <p class="text-sm font-bold text-slate-900">{{ $money($req->total, $req->currency_code) }}</p>
                                <p class="text-xs {{ $req->isEcocash() ? 'text-emerald-600' : 'text-slate-400' }}">{{ $req->isEcocash() ? __('EcoCash') : __('Cash') }}</p>
                            @endif
                        </div>
                        <div class="flex shrink-0 flex-col items-end gap-1.5">
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ring-1 {{ $sm['badge'] }}">{{ $sm['label'] }}</span>
                            @if ($req->completed_at)
                                <span class="text-[11px] tabular-nums text-slate-400" title="{{ __('Done :when', ['when' => $req->completed_at->timezone(config('app.display_timezone'))->format('j M Y, H:i')]) }}">
                                    {{ $req->completed_at->timezone(config('app.display_timezone'))->format('j M, H:i') }}
                                </span>
                            @endif
                            @if ($req->hasPendingDeletion())
                                <span class="inline-flex items-center gap-1 rounded-full bg-rose-50 px-2 py-0.5 text-[11px] font-semibold text-rose-700 ring-1 ring-rose-200"
                                      title="{{ __(':who asked for this to be deleted', ['who' => $req->deletionRequester?->name ?? __('A staff member')]) }}">
                                    <x-icon name="trash" class="h-3.5 w-3.5" /> {{ __('Delete requested') }}
                                </span>
                            @endif
                            @unless ($req->isQuoteLane())
                                @if ($req->isPaid())
                                    <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-emerald-600"><x-icon name="check-circle" class="h-3.5 w-3.5" /> {{ __('Paid') }}</span>
                                @else
                                    <span class="text-[11px] font-semibold text-amber-600">{{ __('Unpaid') }}</span>
                                @endif
                            @endunless
                            {{-- The row itself is the button that opens the detail, where the
                                 notes live, so this is an indicator rather than a trigger. --}}
                            @if ($req->notes_count)
                                <span class="inline-flex items-center gap-1 text-[11px] font-semibold text-amber-500"
                                      title="{{ trans_choice(':count note|:count notes', $req->notes_count, ['count' => $req->notes_count]) }}">
                                    <x-icon name="sticky-note" class="h-3.5 w-3.5" />{{ $req->notes_count }}
                                </span>
                            @endif
                        </div>
                    </button>
                @empty
                    <div class="p-12 text-center">
                        <x-icon name="inbox" class="mx-auto h-10 w-10 text-slate-300" />
                        <p class="mt-3 text-sm text-slate-400">{{ __('No print requests yet. Share your intake QR code to get started.') }}</p>
                    </div>
                @endforelse
            </div>

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

        {{-- ========================= DETAIL MODAL ========================= --}}
        <x-dialog-modal wire:model.live="showDetail" maxWidth="2xl">
            <x-slot name="title">
                @if ($detail)
                    {{ $detail->customer_name }}
                    <span class="ml-1 text-sm font-normal text-slate-400">{{ $detail->reference }}</span>
                @endif
            </x-slot>

            <x-slot name="content">
                @if ($detail)
                    @php $sm = $statusFor($detail->status); @endphp
                    <div class="space-y-5">
                        {{-- Top line: status + payment --}}
                        <div class="flex flex-wrap items-center gap-2">
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1 {{ $sm['badge'] }}">{{ $sm['label'] }}</span>
                            @if ($detail->isQuoteLane())
                                <span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-600 ring-1 ring-slate-200">{{ $detail->intakeService?->name ?: __('Enquiry') }}</span>
                            @elseif ($detail->isPaid())
                                <span class="inline-flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200"><x-icon name="check-circle" class="h-3.5 w-3.5" /> {{ __('Paid') }} · {{ $detail->paid_at?->timezone(config('app.display_timezone'))->format('j M, H:i') }}</span>
                            @else
                                <span class="rounded-full bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-700 ring-1 ring-amber-200">{{ __('Unpaid') }}</span>
                            @endif
                            @if ($detail->completed_at)
                                <span class="inline-flex items-center gap-1 rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-600 ring-1 ring-slate-200"
                                      title="{{ $detail->completer ? __('Marked done by :who', ['who' => $detail->completer->name]) : '' }}">
                                    <x-icon name="clock" class="h-3.5 w-3.5" />
                                    {{ __('Done') }} · {{ $detail->completed_at->timezone(config('app.display_timezone'))->format('j M Y, H:i') }}
                                </span>
                            @endif
                            @if ($detail->contact_phone)
                                <a href="tel:{{ $detail->contact_phone }}" class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700"><x-icon name="phone" class="h-3.5 w-3.5" /> {{ $detail->contact_phone }}</a>
                            @endif
                            <x-notes-button variant="link" :for="$detail" :count="$detail->notes()->count()" class="ml-auto text-xs font-medium" />
                        </div>

                        {{-- Deletion ask, waiting on a director --}}
                        @if ($detail->hasPendingDeletion())
                            <div class="rounded-2xl border border-rose-200 bg-rose-50 p-4">
                                <p class="flex items-center gap-1.5 text-sm font-semibold text-rose-800">
                                    <x-icon name="trash" class="h-4 w-4" />
                                    {{ __(':who asked for this request to be deleted', ['who' => $detail->deletionRequester?->name ?? __('A staff member')]) }}
                                    <span class="font-normal text-rose-600">· {{ $detail->deletion_requested_at?->diffForHumans() }}</span>
                                </p>
                                <p class="mt-1 text-sm text-rose-700">{{ $detail->deletion_reason }}</p>
                                <p class="mt-2 text-xs text-rose-600">
                                    {{ $canDeleteOutright
                                        ? __('Approving deletes it. If it was paid, the income and stock it booked are reversed.')
                                        : __('Nothing changes until a director approves or declines it.') }}
                                </p>
                            </div>
                        @elseif ($detail->deletion_declined_at)
                            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                <p class="text-sm font-semibold text-slate-700">
                                    {{ __('Delete request declined by :who', ['who' => $detail->deletionDecliner?->name ?? __('a director')]) }}
                                    <span class="font-normal text-slate-400">· {{ $detail->deletion_declined_at->diffForHumans() }}</span>
                                </p>
                                @if ($detail->deletion_decline_reason)
                                    <p class="mt-1 text-sm text-slate-600">{{ $detail->deletion_decline_reason }}</p>
                                @endif
                            </div>
                        @endif

                        {{-- ============ THE BRIEF (quote lane) ============ --}}
                        @if ($detail->isQuoteLane())
                            @php $answers = $detail->answerSummary(); @endphp
                            <div class="rounded-2xl border border-slate-200 bg-slate-50 p-4">
                                <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('What they asked for') }}</p>
                                <dl class="mt-2 space-y-1.5">
                                    @forelse ($answers as $row)
                                        <div class="flex justify-between gap-4 text-sm">
                                            <dt class="text-slate-500">{{ $row['label'] }}</dt>
                                            <dd class="text-right font-medium text-slate-800">{{ $row['value'] }}</dd>
                                        </div>
                                    @empty
                                        <p class="text-sm text-slate-400">{{ __('No answers recorded.') }}</p>
                                    @endforelse
                                    @if ($detail->needed_by)
                                        <div class="flex justify-between gap-4 border-t border-slate-200 pt-1.5 text-sm">
                                            <dt class="text-slate-500">{{ __('Needed by') }}</dt>
                                            <dd class="text-right font-medium text-slate-800">{{ $detail->needed_by->format('j M Y') }}</dd>
                                        </div>
                                    @endif
                                </dl>

                                {{-- Where this enquiry has got to in the pipeline. --}}
                                <div class="mt-4 border-t border-slate-200 pt-3">
                                    @if ($detail->quote)
                                        <a href="{{ route('quotes.index', ['open' => $detail->quote_id]) }}"
                                           class="inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700">
                                            <x-icon name="document-text" class="h-4 w-4" /> {{ __('Quote :n', ['n' => $detail->quote->quote_number]) }}
                                        </a>
                                    @elseif ($detail->opportunity_id && $detail->status === \App\Models\ServiceRequest::STATUS_QUOTING)
                                        <div class="flex flex-wrap items-center gap-3">
                                            @if ($canQuote)
                                                <button type="button" wire:click="createQuote({{ $detail->id }})" wire:loading.attr="disabled" wire:target="createQuote"
                                                        class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                                                    <x-icon name="document-text" class="h-4 w-4" />
                                                    {{ __('Create quote from the brief') }}
                                                </button>
                                            @endif
                                            <a href="{{ route('crm.opportunities.show', $detail->opportunity_id) }}" wire:navigate class="inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700">
                                                <x-icon name="flag" class="h-4 w-4" /> {{ __('Open the opportunity') }}
                                            </a>
                                        </div>
                                        <p class="mt-2 text-xs text-slate-400">{{ __('The quote starts with the answers above on its line. Add your prices.') }}</p>
                                    @else
                                        <div class="flex flex-wrap items-center gap-3">
                                            <button type="button" wire:click="qualify({{ $detail->id }})"
                                                    class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                                                <x-icon name="arrow-right" class="h-4 w-4" />
                                                {{ __('Start quoting') }}
                                            </button>
                                            @if ($detail->opportunity_id)
                                                <a href="{{ route('crm.opportunities.show', $detail->opportunity_id) }}" wire:navigate class="inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 hover:text-indigo-700">
                                                    <x-icon name="flag" class="h-4 w-4" /> {{ __('Open the opportunity') }}
                                                </a>
                                            @endif
                                        </div>
                                        <p class="mt-2 text-xs text-slate-400">
                                            {{ $detail->opportunity_id
                                                ? __('Already in the pipeline as a prospect. Start quoting to move this request to Quoting.')
                                                : __('Opens a prospect organisation and an opportunity owned by you, then moves this request to Quoting.') }}
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endif

                        {{-- Files --}}
                        <div>
                            <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ $detail->isQuoteLane() ? __('Artwork & references') : __('Files to print') }}</p>
                            @if ($detail->files->isEmpty())
                                <p class="rounded-xl border border-slate-100 bg-slate-50 px-3 py-2.5 text-sm text-slate-400">
                                    {{ $detail->isQuoteLane() ? __('Nothing attached.') : __('Files were automatically removed (24-hour retention).') }}
                                </p>
                            @endif
                            <ul class="space-y-2">
                                @foreach ($detail->files as $file)
                                    <li class="flex items-center gap-3 rounded-xl border border-slate-100 bg-slate-50 px-3 py-2.5">
                                        <x-icon name="document" class="h-5 w-5 shrink-0 text-slate-400" />
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-sm font-medium text-slate-700">{{ $file->original_name }}</p>
                                            <p class="text-xs text-slate-400">{{ $file->humanSize() }} · {{ trans_choice('{1}:count page|[2,*]:count pages', $file->pages, ['count' => $file->pages]) }}</p>
                                        </div>
                                        <a href="{{ route('service-requests.file', $file) }}" target="_blank" rel="noopener"
                                           class="inline-flex shrink-0 items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 ring-1 ring-slate-200 transition hover:bg-slate-100">
                                            <x-icon name="arrow-down-tray" class="h-4 w-4" /> {{ __('Open') }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        {{-- Notes + voice --}}
                        @if ($detail->notes || $detail->audio_path)
                            <div class="rounded-xl border border-slate-100 bg-slate-50 p-3.5">
                                <p class="mb-1.5 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Customer instructions') }}</p>
                                @if ($detail->notes)
                                    <p class="text-sm text-slate-700">{{ $detail->notes }}</p>
                                @endif
                                @if ($detail->audio_path)
                                    <audio controls src="{{ route('service-requests.audio', $detail) }}" class="mt-2 h-9 w-full"></audio>
                                @endif
                            </div>
                        @endif

                        {{-- Everything below is the counter lane: paper options, the
                             price adjustment and taking the money. A quote-lane
                             enquiry has no price yet and is settled through the
                             quote, so none of it applies. --}}
                        @unless ($detail->isQuoteLane())

                        {{-- ================= THE SALE =================
                             Every charge on this transaction: the printing, the
                             lamination on top of it, the half-hour somebody
                             spent typing it. Editable until the money is taken. --}}
                        <div class="rounded-xl border border-slate-200">
                            <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3">
                                <h4 class="text-sm font-semibold text-slate-900">{{ __('The sale') }}</h4>
                                @if ($detail->isPaid())
                                    <x-badge color="emerald">{{ __('Paid') }}</x-badge>
                                @endif
                            </div>

                            {{-- Lines --}}
                            <div class="divide-y divide-slate-100">
                                @forelse ($detail->lines as $line)
                                    <div wire:key="line-{{ $line->id }}" class="flex items-center gap-3 px-4 py-2.5">
                                        <div class="min-w-0 flex-1">
                                            <p class="truncate text-sm font-medium text-slate-800">{{ $line->name }}</p>
                                            <p class="text-xs text-slate-400">{{ $line->workingLabel($detail->currency_code) }}</p>
                                        </div>

                                        @unless ($detail->isPaid())
                                            <input type="number" step="0.01" min="0.01" value="{{ rtrim(rtrim(number_format((float) $line->qty, 2, '.', ''), '0'), '.') }}"
                                                   wire:change="setLineQty({{ $line->id }}, $event.target.value)"
                                                   aria-label="{{ __('Quantity') }}"
                                                   class="w-20 shrink-0 rounded-lg border-slate-300 text-right text-xs tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        @endunless

                                        <span class="w-24 shrink-0 text-right text-sm font-semibold tabular-nums text-slate-900">{{ $money($line->amount, $detail->currency_code) }}</span>

                                        @unless ($detail->isPaid())
                                            <button type="button" wire:click="removeLine({{ $line->id }})" class="shrink-0 text-slate-400 transition hover:text-rose-500" aria-label="{{ __('Remove') }}">
                                                <x-icon name="trash" class="h-4 w-4" />
                                            </button>
                                        @endunless
                                    </div>
                                @empty
                                    <p class="px-4 py-6 text-center text-sm text-slate-400">{{ __('Nothing on this sale yet.') }}</p>
                                @endforelse
                            </div>

                            {{-- Add from the catalogue --}}
                            @unless ($detail->isPaid())
                                <div class="border-t border-slate-100 bg-slate-50/60 px-4 py-3">
                                    <div class="flex flex-wrap items-end gap-2">
                                        <div class="min-w-[12rem] flex-1">
                                            <x-label :value="__('Add to this sale')" class="text-xs" />
                                            <select wire:model="addItemId" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                <option value="">{{ __('Choose…') }}</option>
                                                @foreach ($catalogueItems as $item)
                                                    <option value="{{ $item->id }}">{{ $item->name }}{{ $item->variantLabel() ? ' · '.$item->variantLabel() : '' }} — {{ $money($item->singleRate(), $detail->currency_code) }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="w-20">
                                            <x-label :value="__('Qty')" class="text-xs" />
                                            <x-input type="number" step="0.01" min="0.01" wire:model="addQty" class="mt-1 block w-full text-sm" />
                                        </div>
                                        <x-button type="button" wire:click="addLine">
                                            <x-icon name="plus" class="mr-1 h-4 w-4" /> {{ __('Add') }}
                                        </x-button>
                                    </div>
                                    <x-input-error for="addItemId" class="mt-1" />
                                    <x-input-error for="addQty" class="mt-1" />
                                    <p class="mt-1.5 text-[11px] text-slate-400">{{ __('A per-page item takes its quantity from the pages and copies below.') }}</p>

                                    {{-- Something the price list doesn't cover --}}
                                    <details class="mt-3">
                                        <summary class="cursor-pointer text-xs font-semibold text-indigo-600 hover:text-indigo-700">{{ __('Charge for something else') }}</summary>
                                        <div class="mt-2 flex flex-wrap items-end gap-2">
                                            <div class="min-w-[10rem] flex-1">
                                                <x-input type="text" wire:model="customName" placeholder="{{ __('What for?') }}" class="block w-full text-sm" />
                                            </div>
                                            <div class="w-16">
                                                <x-input type="number" step="0.01" min="0.01" wire:model="customQty" placeholder="{{ __('Qty') }}" class="block w-full text-sm" />
                                            </div>
                                            <div class="w-24">
                                                <x-input type="number" step="0.01" min="0" wire:model="customPrice" placeholder="{{ __('Price') }}" class="block w-full text-sm" />
                                            </div>
                                            <x-secondary-button type="button" wire:click="addCustomLine">{{ __('Add') }}</x-secondary-button>
                                        </div>
                                        <x-input-error for="customName" class="mt-1" />
                                        <x-input-error for="customPrice" class="mt-1" />
                                    </details>
                                </div>
                            @endunless

                            {{-- The document itself: what the per-page lines are counted from --}}
                            @if ($detail->lines->contains(fn ($l) => $l->isPerPage()) || $detail->files->isNotEmpty())
                                <div class="border-t border-slate-100 px-4 py-3">
                                    <div class="flex flex-wrap items-end gap-3">
                                        <div class="w-24">
                                            <x-label :value="__('Pages')" class="text-xs" />
                                            <x-input type="number" min="1" wire:model="editPages" class="mt-1 block w-full text-sm" :disabled="$detail->isPaid()" />
                                            <x-input-error for="editPages" class="mt-1" />
                                        </div>
                                        <div class="w-24">
                                            <x-label :value="__('Copies')" class="text-xs" />
                                            <x-input type="number" min="1" wire:model="editCopies" class="mt-1 block w-full text-sm" :disabled="$detail->isPaid()" />
                                            <x-input-error for="editCopies" class="mt-1" />
                                        </div>
                                        @unless ($detail->isPaid())
                                            <x-secondary-button type="button" wire:click="saveDocument">
                                                <x-icon name="arrow-path" class="mr-1 h-4 w-4" /> {{ __('Re-price') }}
                                            </x-secondary-button>
                                        @endunless
                                    </div>

                                    <label class="mt-3 flex cursor-pointer items-center gap-2.5">
                                        <input type="checkbox" wire:click="toggleDoubleSided({{ $detail->id }})" @checked($detail->double_sided) @disabled($detail->isPaid())
                                               class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                        <span class="text-sm font-medium text-slate-700">{{ __('Back-to-back (double-sided)') }}</span>
                                    </label>
                                </div>
                            @endif

                            {{-- What this sale takes out of the store --}}
                            @php $draw = $detail->stockDraw(); @endphp
                            @if ($draw)
                                <div class="border-t border-slate-100 px-4 py-2.5">
                                    <p class="flex items-start gap-1.5 text-xs text-slate-500">
                                        <x-icon name="archive-box" class="mt-0.5 h-3.5 w-3.5 shrink-0 text-slate-400" />
                                        <span>{{ $detail->isPaid() ? __('Taken from stock:') : __('Comes off stock on payment:') }}
                                            {{ $detail->lines->whereNotNull('material_variant_id')->where('stock_units', '>', 0)
                                                ->map(fn ($l) => rtrim(rtrim(number_format((float) $l->stock_units, 2), '0'), '.').' × '.($l->variant?->label ?: $l->name))
                                                ->unique()->implode(', ') }}</span>
                                    </p>
                                </div>
                            @endif

                            {{-- Totals --}}
                            <div class="space-y-1 border-t border-slate-100 px-4 py-3 text-sm">
                                <div class="flex justify-between"><span class="text-slate-500">{{ __('Subtotal') }}</span><span class="font-semibold tabular-nums text-slate-800">{{ $money($detail->subtotal, $detail->currency_code) }}</span></div>
                                @if ($detail->ecocash_fee > 0)
                                    <div class="flex justify-between"><span class="text-slate-500">{{ __('EcoCash fee') }}</span><span class="font-semibold tabular-nums text-slate-800">{{ $money($detail->ecocash_fee, $detail->currency_code) }}</span></div>
                                @endif
                                <div class="flex justify-between border-t border-slate-100 pt-1.5"><span class="font-semibold text-slate-700">{{ __('Customer pays') }}</span><span class="text-lg font-bold tabular-nums text-slate-900">{{ $money($detail->total, $detail->currency_code) }}</span></div>
                            </div>
                        </div>

                        {{-- EcoCash POP --}}
                        @if ($detail->isEcocash() && $detail->pop_path)
                            <a href="{{ route('service-requests.pop', $detail) }}" target="_blank" rel="noopener"
                               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 transition hover:bg-emerald-100">
                                <x-icon name="receipt-percent" class="h-4 w-4" /> {{ __('View EcoCash proof') }}
                            </a>
                        @elseif ($detail->isEcocash())
                            <p class="text-sm text-amber-600">{{ __('Customer did not attach EcoCash proof, verify before confirming.') }}</p>
                        @endif

                        @endunless

                        {{-- Fulfilment status buttons (labels follow the lane) --}}
                        <div>
                            <p class="mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Fulfilment') }}</p>
                            <div class="flex flex-wrap gap-2">
                                @foreach ($detail->laneStatuses() as $key)
                                    @php $label = $key === 'cancelled' ? __('Cancel') : $statusFor($key)['label']; @endphp
                                    <button type="button" wire:click="setStatus({{ $detail->id }}, '{{ $key }}')"
                                            @class([
                                                'rounded-lg px-3 py-1.5 text-xs font-semibold ring-1 transition',
                                                'bg-slate-900 text-white ring-slate-900' => $detail->status === $key,
                                                'bg-white text-slate-600 ring-slate-200 hover:bg-slate-50' => $detail->status !== $key,
                                            ])>{{ $label }}</button>
                                @endforeach
                            </div>
                        </div>

                        {{-- Confirm payment (counter lane only; quote work is paid
                             through its invoice, never here) --}}
                        @unless ($detail->isPaid() || $detail->isQuoteLane())
                            <div class="rounded-xl border border-indigo-200 bg-indigo-50/50 p-4">
                                <p class="text-sm font-semibold text-indigo-900">{{ __('Confirm payment') }}</p>
                                <p class="mt-0.5 text-xs text-indigo-700">{{ __('Records :amount as income into the account you pick.', ['amount' => $money($detail->subtotal, $detail->currency_code)]) }}</p>

                                {{-- Change wallet (cash only) --}}
                                @if ($pay && $pay['isCash'] && $pay['available'] > 0)
                                    <label class="mt-3 flex items-center gap-2.5 rounded-lg bg-white px-3 py-2 ring-1 ring-indigo-100">
                                        <input type="checkbox" wire:model.live="applyCredit" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                        <span class="text-sm text-slate-700">
                                            {{ __('Apply saved change') }}
                                            <span class="font-semibold text-indigo-700">{{ $money($pay['available'], $detail->currency_code) }}</span>
                                            {{ __('available for :phone', ['phone' => $detail->contact_phone]) }}
                                        </span>
                                    </label>
                                @endif

                                @if ($pay && $pay['isCash'])
                                    <div class="mt-3 grid grid-cols-2 gap-3">
                                        <div>
                                            <x-label :value="__('Cash due')" />
                                            <div class="mt-1 flex h-11 items-center rounded-xl bg-white px-3 text-sm font-semibold text-slate-800 ring-1 ring-slate-200">{{ $money($pay['cashDue'], $detail->currency_code) }}</div>
                                        </div>
                                        <div>
                                            <x-label :value="__('Cash received')" />
                                            <x-input type="number" step="0.01" min="0" wire:model.live="tendered" class="mt-1 block h-11 w-full" />
                                        </div>
                                    </div>
                                    @if ($pay['change'] > 0)
                                        <p class="mt-2 rounded-lg bg-emerald-50 px-3 py-2 text-xs font-medium text-emerald-700">
                                            {{ __('Change of :amt will be saved to :phone until they come back for it.', ['amt' => $money($pay['change'], $detail->currency_code), 'phone' => $detail->contact_phone ?: __('this customer')]) }}
                                            @unless ($detail->contact_phone) <span class="font-semibold">{{ __('(no phone, change cannot be saved)') }}</span> @endunless
                                        </p>
                                    @endif
                                    <x-input-error for="tendered" class="mt-1" />
                                @endif

                                <div class="mt-3 flex flex-col gap-2 sm:flex-row">
                                    <select wire:model="confirmFundAccountId" class="h-11 w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:flex-1">
                                        <option value="">{{ __('Which account?') }}</option>
                                        @foreach ($fundAccounts as $acc)
                                            <option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>
                                        @endforeach
                                    </select>
                                    <button type="button" wire:click="confirmPayment" wire:loading.attr="disabled"
                                            class="inline-flex h-11 shrink-0 items-center justify-center gap-1.5 rounded-xl bg-indigo-600 px-5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:opacity-50">
                                        <x-icon name="check" class="h-4 w-4" /> {{ __('Mark paid') }}
                                    </button>
                                </div>
                                <x-input-error for="confirmFundAccountId" class="mt-2" />
                            </div>
                        @endunless
                    </div>
                @endif
            </x-slot>

            <x-slot name="footer">
                @if ($detail)
                    {{-- Directors delete on their own say-so. Everyone else asks, and
                         the ask sits on the request until a director answers it. --}}
                    <div class="mr-auto flex flex-wrap items-center gap-1.5">
                        @if ($detail->hasPendingDeletion())
                            @if ($canDeleteOutright)
                                <button type="button" wire:click="approveDeletion({{ $detail->id }})" wire:confirm="{{ __('Approve and delete this request? This also reverses any recorded payment.') }}"
                                        class="inline-flex items-center gap-1.5 rounded-xl bg-rose-600 px-3 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700">
                                    <x-icon name="trash" class="h-4 w-4" /> {{ __('Approve & delete') }}
                                </button>
                                <button type="button" wire:click="openDeletionDecline"
                                        class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100">
                                    {{ __('Decline') }}
                                </button>
                            @elseif ($detail->deletion_requested_by === auth()->id())
                                <button type="button" wire:click="withdrawDeletion({{ $detail->id }})"
                                        class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-slate-600 transition hover:bg-slate-100">
                                    <x-icon name="x-mark" class="h-4 w-4" /> {{ __('Withdraw delete request') }}
                                </button>
                            @endif
                        @elseif ($canDeleteOutright)
                            <button type="button" wire:click="delete({{ $detail->id }})" wire:confirm="{{ __('Delete this request? This also reverses any recorded payment.') }}"
                                    class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-rose-600 transition hover:bg-rose-50">
                                <x-icon name="trash" class="h-4 w-4" /> {{ __('Delete') }}
                            </button>
                        @else
                            <button type="button" wire:click="openDeletionAsk"
                                    class="inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm font-medium text-rose-600 transition hover:bg-rose-50">
                                <x-icon name="trash" class="h-4 w-4" /> {{ __('Ask to delete') }}
                            </button>
                        @endif
                    </div>
                @endif
                <x-secondary-button wire:click="closeDetail">{{ __('Close') }}</x-secondary-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ========================= ASK TO DELETE ========================= --}}
        <x-dialog-modal wire:model.live="showDeletionAsk" maxWidth="md">
            <x-slot name="title">{{ __('Ask to delete this request') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">{{ __('A director will see this and either delete the request or turn it down. It stays in the queue until then.') }}</p>
                <div class="mt-4">
                    <x-label for="deletion_reason" :value="__('Why should it go?')" />
                    <textarea id="deletion_reason" wire:model="deletion_reason" rows="3"
                              placeholder="{{ __('e.g. Test request sent while showing the customer the QR code') }}"
                              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="deletion_reason" class="mt-2" />
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="closeDeletionAsk">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ml-2" wire:click="submitDeletionAsk" wire:loading.attr="disabled">{{ __('Send for approval') }}</x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ========================= DECLINE DELETION ========================= --}}
        <x-dialog-modal wire:model.live="showDeletionDecline" maxWidth="md">
            <x-slot name="title">{{ __('Decline the delete request') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">{{ __('The request stays in the queue. A note tells the person who asked why, so they do not ask again for the same reason.') }}</p>
                <div class="mt-4">
                    <x-label for="deletion_decline_note" :value="__('Note (optional)')" />
                    <textarea id="deletion_decline_note" wire:model="deletion_decline_note" rows="3"
                              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="deletion_decline_note" class="mt-2" />
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="closeDeletionDecline">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ml-2" wire:click="submitDeletionDecline" wire:loading.attr="disabled">{{ __('Decline') }}</x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- ========================= SETTINGS MODAL ========================= --}}
        <x-dialog-modal wire:model.live="showSettings" maxWidth="2xl">
            <x-slot name="title">{{ __('Intake & pricing') }}</x-slot>

            <x-slot name="content">
                <div class="space-y-6">
                    {{-- Enable + QR --}}
                    <div class="flex flex-col gap-4 rounded-xl border border-slate-200 p-4 sm:flex-row sm:items-center">
                        <div class="flex-1">
                            <label class="flex items-center gap-2.5">
                                <input type="checkbox" wire:model.live="s_intake_enabled" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-sm font-semibold text-slate-800">{{ __('Enable public intake (QR / link)') }}</span>
                            </label>
                            <p class="mt-1 text-xs text-slate-500">{{ __('When on, customers can scan the code or open the link to submit prints.') }}</p>
                            @if ($intakeUrl)
                                <div class="mt-3">
                                    <p class="text-xs font-medium text-slate-500">{{ __('Intake link') }}</p>
                                    <div class="mt-1 flex items-center gap-2">
                                        <input type="text" readonly value="{{ $intakeUrl }}" onclick="this.select()" class="w-full rounded-lg border-slate-200 bg-slate-50 text-xs text-slate-600">
                                        <button type="button" wire:click="generateIntakeToken" wire:confirm="{{ __('Generate a new link? The old QR/link will stop working.') }}" class="shrink-0 rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600" title="{{ __('Regenerate') }}">
                                            <x-icon name="arrow-path" class="h-4 w-4" />
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                        @if ($intakeQr)
                            <div class="shrink-0 text-center">
                                <img src="{{ $intakeQr }}" alt="{{ __('Intake QR') }}" class="h-32 w-32 rounded-lg bg-white p-1 ring-1 ring-slate-200">
                                <a href="{{ route('service-requests.poster') }}" target="_blank" rel="noopener"
                                   class="mt-2 inline-flex items-center gap-1.5 rounded-lg bg-slate-900 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-slate-700">
                                    <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" /> {{ __('Poster PDF') }}
                                </a>
                            </div>
                        @endif
                    </div>

                    {{-- EcoCash --}}
                    <div class="rounded-xl border border-slate-200 p-4">
                        <p class="text-sm font-semibold text-slate-800">{{ __('EcoCash collection') }}</p>
                        <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                            <div>
                                <x-label :value="__('EcoCash number')" />
                                <x-input type="text" wire:model="s_ecocash_number" class="mt-1 block w-full" placeholder="07…" />
                            </div>
                            <div>
                                <x-label :value="__('Account name')" />
                                <x-input type="text" wire:model="s_ecocash_name" class="mt-1 block w-full" />
                            </div>
                            <div>
                                <x-label :value="__('Fee added to customer (%)')" />
                                <x-input type="number" step="0.01" min="0" max="100" wire:model="s_ecocash_fee" class="mt-1 block w-full" />
                                <x-input-error for="s_ecocash_fee" class="mt-1" />
                            </div>
                        </div>
                    </div>

                    {{-- Default fund accounts --}}
                    <div class="rounded-xl border border-slate-200 p-4">
                        <p class="text-sm font-semibold text-slate-800">{{ __('Where the money lands') }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ __('Pre-selected when you confirm payment (still changeable per request).') }}</p>
                        <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                            <div>
                                <x-label :value="__('Cash account')" />
                                <select wire:model="s_cash_fund" 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 ($fundAccounts as $acc)
                                        <option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <x-label :value="__('EcoCash account')" />
                                <select wire:model="s_ecocash_fund" 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 ($fundAccounts as $acc)
                                        <option value="{{ $acc->id }}">{{ $acc->name }} ({{ $acc->currency_code }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- Papers and sizes: the shop-wide lists every price row picks from --}}
                    <div class="rounded-xl border border-slate-200 p-4">
                        <p class="text-sm font-semibold text-slate-800">{{ __('Papers & sizes') }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ __('What the price list can choose from. Keep the wording you use at the counter.') }}</p>

                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            @foreach ([
                                ['label' => __('Paper types'), 'list' => $s_paper_types, 'model' => 'newPaperType', 'add' => 'addPaperType', 'remove' => 'removePaperType', 'hint' => __('e.g. Plain paper')],
                                ['label' => __('Sizes'), 'list' => $s_sizes, 'model' => 'newSize', 'add' => 'addSize', 'remove' => 'removeSize', 'hint' => __('e.g. A4')],
                            ] as $opt)
                                <div>
                                    <x-label :value="$opt['label']" class="text-xs" />

                                    <div class="mt-1.5 flex flex-wrap gap-1.5">
                                        @forelse ($opt['list'] as $value)
                                            <span wire:key="{{ $opt['model'] }}-{{ $value }}"
                                                  class="inline-flex items-center gap-1 rounded-lg bg-white px-2 py-1 text-[11px] font-medium text-slate-600 ring-1 ring-slate-200">
                                                {{ $value }}
                                                <button type="button" wire:click="{{ $opt['remove'] }}('{{ addslashes($value) }}')" class="text-slate-300 transition hover:text-rose-500">
                                                    <x-icon name="x-mark" class="h-3 w-3" />
                                                </button>
                                            </span>
                                        @empty
                                            <span class="text-[11px] text-slate-400">{{ __('Nothing yet.') }}</span>
                                        @endforelse
                                    </div>

                                    <div class="mt-2 flex items-center gap-1.5">
                                        <input type="text" wire:model="{{ $opt['model'] }}" wire:keydown.enter.prevent="{{ $opt['add'] }}"
                                               placeholder="{{ $opt['hint'] }}"
                                               class="min-w-0 flex-1 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        <x-secondary-button type="button" wire:click="{{ $opt['add'] }}" class="!px-2.5 !py-1.5 !text-xs">{{ __('Add') }}</x-secondary-button>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <p class="mt-3 text-[11px] text-slate-400">{{ __('Removing one here leaves prices already using it alone.') }}</p>
                    </div>

                    {{-- Counter catalogue --}}
                    <div class="rounded-xl border border-slate-200 p-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-semibold text-slate-800">{{ __('Counter price list') }}</p>
                                <p class="mt-0.5 text-xs text-slate-500">{{ __('Title, paper, size, colour and what it costs. Add a bulk price for "10 for $1".') }}</p>
                            </div>
                            <button type="button" wire:click="addCatalogueRow" class="inline-flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-semibold text-slate-600 hover:bg-slate-200">
                                <x-icon name="plus" class="h-3.5 w-3.5" /> {{ __('Add') }}
                            </button>
                        </div>

                        <div class="mt-3 space-y-3">
                            @foreach ($catalogue as $i => $row)
                                @php $baseCode = $setting->base_currency_code ?: 'USD'; @endphp
                                <div class="rounded-xl border border-slate-100 bg-slate-50/60 p-2.5" wire:key="item-{{ $i }}">

                                    {{-- Title · paper type · size · colour · price.
                                         Everything but the title and the price is a
                                         dropdown, so two people naming the same paper
                                         cannot end up with two papers. --}}
                                    <div class="grid grid-cols-12 items-center gap-2">
                                        <input type="text" wire:model="catalogue.{{ $i }}.name" placeholder="{{ __('Title') }}"
                                               class="col-span-3 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">

                                        <select wire:model="catalogue.{{ $i }}.material_type" class="col-span-2 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Paper type') }}</option>
                                            @foreach ($this->optionsWith($s_paper_types, $row['material_type'] ?? null) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>

                                        <select wire:model="catalogue.{{ $i }}.paper_size" class="col-span-2 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Size') }}</option>
                                            @foreach ($this->optionsWith($s_sizes, $row['paper_size'] ?? null) as $option)
                                                <option value="{{ $option }}">{{ $option }}</option>
                                            @endforeach
                                        </select>

                                        <select wire:model="catalogue.{{ $i }}.color_mode" class="col-span-2 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Colour') }}</option>
                                            <option value="bw">{{ __('Black & white') }}</option>
                                            <option value="color">{{ __('Colour') }}</option>
                                        </select>

                                        <div class="col-span-2 flex items-center gap-1">
                                            <span class="shrink-0 text-[10px] font-medium text-slate-400">{{ ($row['price_currency_code'] ?? '') ?: $baseCode }}</span>
                                            <input type="number" step="0.01" min="0" placeholder="0.00"
                                                   wire:model="catalogue.{{ $i }}.{{ ($row['price_currency_code'] ?? '') !== '' ? 'price_amount' : 'price' }}"
                                                   class="w-full min-w-0 rounded-lg border-slate-300 text-right text-xs tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                        </div>

                                        <button type="button" wire:click="removeCatalogueRow({{ $i }})" class="col-span-1 flex justify-center text-slate-400 hover:text-rose-500" title="{{ __('Remove') }}">
                                            <x-icon name="x-mark" class="h-4 w-4" />
                                        </button>
                                    </div>

                                    {{-- How it is counted, where it can be ordered, what it
                                         takes off the shelf, and the currency it is quoted
                                         in. All dropdowns, all in view. --}}
                                    <div class="mt-2 grid grid-cols-12 items-center gap-2">
                                        <select wire:model="catalogue.{{ $i }}.basis" class="col-span-3 rounded-lg border-slate-200 bg-white text-[11px] text-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="per_item">{{ __('Counted by hand') }}</option>
                                            <option value="per_page">{{ __('Counted from the document') }}</option>
                                        </select>

                                        <select wire:model="catalogue.{{ $i }}.available_online" class="col-span-3 rounded-lg border-slate-200 bg-white text-[11px] text-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="counter">{{ __('Counter only') }}</option>
                                            <option value="online">{{ __('Counter and online') }}</option>
                                        </select>

                                        <select wire:model.live="catalogue.{{ $i }}.price_currency_code" class="col-span-2 rounded-lg border-slate-200 bg-white text-[11px] text-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('Priced in') }} {{ $baseCode }}</option>
                                            @foreach ($currencies as $code)
                                                <option value="{{ $code }}">{{ __('Priced in') }} {{ $code }}</option>
                                            @endforeach
                                        </select>

                                        <select wire:model="catalogue.{{ $i }}.material_variant_id" class="col-span-4 min-w-0 rounded-lg border-slate-200 bg-white text-[11px] text-slate-600 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <option value="">{{ __('No stock tracking') }}</option>
                                            @foreach ($variants as $variant)
                                                <option value="{{ $variant->id }}">{{ $variant->material?->name }}{{ $variant->label ? ', ' . $variant->label : '' }} ({{ rtrim(rtrim(number_format((float) $variant->on_hand, 2), '0'), '.') }})</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- Bulk price, in the counter's own words: this many
                                         for this much, once they reach the MOQ. --}}
                                    @foreach ($row['tiers'] ?? [] as $j => $tier)
                                        <div class="mt-2 flex flex-wrap items-center gap-1.5" wire:key="item-{{ $i }}-tier-{{ $j }}">
                                            <input type="number" min="1" step="1" wire:model="catalogue.{{ $i }}.tiers.{{ $j }}.bundle_qty" placeholder="10"
                                                   class="w-14 rounded-lg border-slate-300 text-xs tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <span class="shrink-0 text-[11px] text-slate-500">{{ __('copies for') }}</span>
                                            <input type="number" step="0.01" min="0" wire:model="catalogue.{{ $i }}.tiers.{{ $j }}.bundle_amount" placeholder="0.00"
                                                   class="w-20 rounded-lg border-slate-300 text-right text-xs tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <select wire:model="catalogue.{{ $i }}.tiers.{{ $j }}.bundle_currency_code" class="w-20 rounded-lg border-slate-300 text-xs shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                                <option value="">{{ $baseCode }}</option>
                                                @foreach ($currencies as $code)
                                                    <option value="{{ $code }}">{{ $code }}</option>
                                                @endforeach
                                            </select>
                                            <span class="shrink-0 text-[11px] text-slate-500">{{ __('from') }}</span>
                                            <input type="number" min="2" step="1" wire:model="catalogue.{{ $i }}.tiers.{{ $j }}.min_qty" placeholder="10" title="{{ __('Minimum order quantity') }}"
                                                   class="w-14 rounded-lg border-slate-300 text-xs tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                            <button type="button" wire:click="removeTier({{ $i }}, {{ $j }})" class="ml-auto text-slate-400 hover:text-rose-500">
                                                <x-icon name="x-mark" class="h-3.5 w-3.5" />
                                            </button>
                                        </div>
                                        @error("catalogue.{$i}.tiers.{$j}.bundle_amount") <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p> @enderror
                                        @error("catalogue.{$i}.tiers.{$j}.min_qty") <p class="mt-1 text-[11px] text-rose-600">{{ $message }}</p> @enderror
                                    @endforeach

                                    <button type="button" wire:click="addTier({{ $i }})" class="mt-2 inline-flex items-center gap-1 text-[11px] font-semibold text-indigo-600 hover:text-indigo-700">
                                        <x-icon name="plus" class="h-3 w-3" /> {{ __('Bulk price') }}
                                    </button>
                                </div>
                            @endforeach
                        </div>
                        @error('catalogue.*.price') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                        @error('catalogue.*.name') <p class="mt-2 text-xs text-rose-600">{{ $message }}</p> @enderror
                    </div>

                    {{-- Change wallet --}}
                    <div class="rounded-xl border border-slate-200 p-4">
                        <p class="text-sm font-semibold text-slate-800">{{ __('Change wallet') }}</p>
                        <p class="mt-0.5 text-xs text-slate-500">{{ __('Overpaid change is kept against the customer\'s phone number and applied on their next visit.') }}</p>
                        <p class="mt-2 text-xs text-slate-500">{{ __('It never expires. Whatever is still held when a month is closed is carried into the next month, and stays the customer\'s until they come back for it.') }}</p>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button wire:click="closeSettings">{{ __('Cancel') }}</x-secondary-button>
                <x-button wire:click="saveSettings" class="ml-2">{{ __('Save') }}</x-button>
            </x-slot>
        </x-dialog-modal>
    </div>
</div>