@php
    $statusMeta = [
        'draft'            => ['label' => __('Draft'),             'color' => 'slate'],
        'awaiting_payment' => ['label' => __('Awaiting Payment'),  'color' => 'amber'],
        'partial'          => ['label' => __('Partially Paid'),    'color' => 'sky'],
        'paid'             => ['label' => __('Paid'),              'color' => 'emerald'],
        'cancelled'        => ['label' => __('Cancelled'),         'color' => 'slate'],
    ];
    $tonePill = [
        'up'    => 'bg-emerald-50 text-emerald-700',
        'down'  => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];
    $currencySymbol = $currencies->firstWhere('code', $currency_code)->symbol ?? $currency_code;
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header :title="__('Suppliers & Bills')" :subtitle="__('Manage suppliers, record their bills, receive stock and settle what you owe.')">
            @if ($tab === 'suppliers')
                @if ($canManageSuppliers)
                    <x-button wire:click="createSupplier" type="button">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        {{ __('New Supplier') }}
                    </x-button>
                @endif
            @elseif ($canManage)
                <x-secondary-button wire:click="receiveStock" type="button">
                    <x-icon name="archive-box" class="-ms-1 me-1.5 h-4 w-4 text-indigo-500" />
                    {{ __('Receive Stock') }}
                </x-secondary-button>
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Bill') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- Purchasing navigation: RFQs → POs → Bills → Suppliers. --}}
        <x-purchasing-tabs :active-tab="$tab" />

        {{-- KPI cards --}}
        <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($kpis as $kpi)
                <x-card class="flex items-start gap-4 p-5">
                    <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm ring-1 ring-white/40" style="background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                        <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                    </span>
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <p class="mt-1 truncate text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</p>
                        <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $tonePill[$kpi['sub']['tone']] ?? $tonePill['muted'] }}">
                            {{ $kpi['sub']['text'] }}
                        </span>
                    </div>
                </x-card>
            @endforeach
        </section>

        @if ($tab === 'bills')
        {{-- Bills table --}}
        <x-card class="overflow-hidden">
            {{-- Toolbar --}}
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative max-w-md flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search bill #, reference, supplier...') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500"
                    />
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <select wire:model.live="supplierFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Suppliers') }}</option>
                        @foreach ($suppliers as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                    </select>

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

                    <select wire:model.live="flagFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any') }}</option>
                        <option value="unpaid">{{ __('Open balance') }}</option>
                        <option value="overdue">{{ __('Overdue') }}</option>
                    </select>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Bill') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Supplier') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Bill Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Due') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Total') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Balance') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Stock') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($bills as $bill)
                            @php
                                $stockLines = $bill->lines->whereNotNull('material_variant_id');
                                $receivable = $stockLines->where('received', false)->count();
                                $isOpen = ! in_array($bill->status, ['paid', 'cancelled'], true);
                            @endphp
                            <tr wire:key="bill-{{ $bill->id }}" class="transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <p class="text-sm font-semibold text-slate-900">{{ $bill->bill_number ?: __('Bill #:id', ['id' => $bill->id]) }}</p>
                                    @if ($bill->reference)
                                        <p class="text-xs text-slate-400">{{ $bill->reference }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-700">{{ $bill->supplier?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ optional($bill->bill_date)->format('j M Y') ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @if ($bill->due_date)
                                        <span class="{{ $bill->is_overdue ? 'font-semibold text-rose-600' : 'text-slate-500' }}">
                                            {{ $bill->due_date->format('j M Y') }}
                                        </span>
                                        @if ($bill->is_overdue)
                                            <span class="ml-1 inline-flex items-center rounded-full bg-rose-50 px-1.5 py-0.5 text-[10px] font-semibold text-rose-600">{{ __('Overdue') }}</span>
                                        @endif
                                    @else
                                        <span class="text-slate-400">—</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-700">
                                    {{ $bill->currency_code }} {{ number_format((float) $bill->total, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $bill->balance_due > 0 && $isOpen ? 'font-semibold text-rose-600' : 'text-slate-400' }}">
                                    {{ $bill->balance_due > 0 && $isOpen ? $bill->currency_code . ' ' . number_format((float) $bill->balance_due, 2) : '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$statusMeta[$bill->status]['color'] ?? 'slate'">
                                        {{ $statusMeta[$bill->status]['label'] ?? $bill->status_label }}
                                    </x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @if ($stockLines->isEmpty())
                                        <span class="text-slate-400">—</span>
                                    @elseif ($receivable === 0)
                                        <x-badge color="emerald">{{ __('Received') }}</x-badge>
                                    @else
                                        <x-badge color="amber">{{ trans_choice('{1} :count to receive|[2,*] :count to receive', $receivable, ['count' => $receivable]) }}</x-badge>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if ($canManage && $receivable > 0 && $bill->status !== 'cancelled')
                                            <button wire:click="receiveAll({{ $bill->id }})" class="text-indigo-600 transition hover:text-indigo-800" title="{{ __('Receive all stock lines') }}">{{ __('Receive') }}</button>
                                        @endif
                                        @if ($canManage && $isOpen && $bill->balance_due > 0)
                                            <button wire:click="openPayment({{ $bill->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Pay') }}</button>
                                        @endif
                                        <x-notes-button variant="link" :for="$bill" />
                                        @if ($canManage && $bill->status !== 'paid')
                                            <button wire:click="edit({{ $bill->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button
                                                wire:click="delete({{ $bill->id }})"
                                                wire:confirm="{{ __('Delete this bill? Stock and payments already posted are not reversed automatically.') }}"
                                                class="text-rose-600 transition hover:text-rose-800"
                                            >{{ __('Delete') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="receipt-percent"
                                        :title="__('No supplier bills yet')"
                                        :message="$search !== '' || $statusFilter !== '' || $flagFilter !== '' || $supplierFilter !== '' ? __('Try adjusting your search or filters.') : __('Record your first supplier bill to track what you owe and receive stock.')"
                                        class="border-0 bg-transparent py-0"
                                    >
                                        @if ($canManage && $search === '' && $statusFilter === '' && $flagFilter === '' && $supplierFilter === '')
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Bill') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        @if ($tab === 'suppliers')
        {{-- Suppliers table --}}
        <x-card class="overflow-hidden">
            {{-- Toolbar --}}
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <div class="relative max-w-md flex-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input
                        type="text"
                        wire:model.live.debounce.300ms="search"
                        placeholder="{{ __('Search by name, supplies, email...') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500"
                    />
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    <select wire:model.live="supplierTypeFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Types') }}</option>
                        <option value="local">{{ __('Local') }}</option>
                        <option value="international">{{ __('International') }}</option>
                    </select>
                    <select wire:model.live="supplierStatusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Status') }}</option>
                        <option value="active">{{ __('Active') }}</option>
                        <option value="inactive">{{ __('Inactive') }}</option>
                    </select>
                </div>
            </div>

            {{-- Table --}}
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Name') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Supplies') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Email') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Phone') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($supplierRows as $supplier)
                            @php
                                $typeColor = $supplier->type === 'international' ? 'sky' : 'emerald';
                            @endphp
                            <tr wire:key="supplier-{{ $supplier->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4">
                                    <div class="flex items-center gap-3">
                                        <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-gradient-to-br from-amber-500 to-orange-500 text-xs font-semibold text-white">
                                            {{ \Illuminate\Support\Str::of($supplier->name)->substr(0, 1)->upper() }}
                                        </span>
                                        <div class="min-w-0">
                                            <p class="truncate text-sm font-medium text-slate-900">{{ $supplier->name }}</p>
                                            @if ($supplier->category)
                                                <p class="truncate text-xs text-slate-400">{{ $supplier->category }}</p>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$typeColor">{{ $supplier->type === 'international' ? __('International') : __('Local') }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @php $supplies = (int) ($supplyCounts[$supplier->id] ?? 0); @endphp
                                    <button
                                        wire:click="openSupplies({{ $supplier->id }})"
                                        class="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium transition {{ $supplies > 0 ? 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' : 'bg-amber-50 text-amber-700 hover:bg-amber-100' }}"
                                        title="{{ __('Manage what this supplier supplies') }}"
                                    >
                                        <x-icon name="cube" class="h-3.5 w-3.5" />
                                        {{ $supplies > 0
                                            ? trans_choice('{1} :count material|[2,*] :count materials', $supplies, ['count' => $supplies])
                                            : __('Nothing linked') }}
                                    </button>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $supplier->email ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $supplier->phone ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        <x-notes-button variant="link" :for="$supplier" />
                                        @if ($canManageSuppliers)
                                            <button wire:click="editSupplier({{ $supplier->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                            <button
                                                wire:click="deleteSupplier({{ $supplier->id }})"
                                                wire:confirm="{{ __('Delete this supplier?') }}"
                                                class="text-rose-600 transition hover:text-rose-800"
                                            >{{ __('Delete') }}</button>
                                        @else
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="building-office"
                                        :title="__('No suppliers found')"
                                        :message="$search !== '' || $supplierTypeFilter !== '' || $supplierStatusFilter !== '' ? __('Try adjusting your search or filters.') : __('Add the local and international suppliers you buy from or outsource to.')"
                                        class="border-0 bg-transparent py-0"
                                    >
                                        @if ($canManageSuppliers && $search === '' && $supplierTypeFilter === '' && $supplierStatusFilter === '')
                                            <x-button wire:click="createSupplier" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Supplier') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    {{-- ============================================================= --}}
    {{-- Create / Edit bill modal                                       --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            @if ($receive_on_save)
                {{ __('Receive Stock') }}
            @else
                {{ $editingId ? __('Edit Bill') : __('New Supplier Bill') }}
            @endif
        </x-slot>

        <x-slot name="content">
            <div class="space-y-5">
                {{-- Header fields --}}
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <x-label for="bill-supplier" value="{{ __('Supplier') }}" />
                        <select id="bill-supplier" wire:model.live="supplier_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 supplier...') }}</option>
                            @foreach ($suppliers as $supplier)
                                <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="supplier_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-currency" value="{{ __('Currency') }}" />
                        <select id="bill-currency" wire:model.live="currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($currencies as $currency)
                                <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="currency_code" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-rate" value="{{ __('Exchange Rate (to base)') }}" />
                        <x-input id="bill-rate" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="exchange_rate" />
                        <x-input-error for="exchange_rate" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-date" value="{{ __('Bill Date') }}" />
                        <x-input id="bill-date" type="date" class="mt-1 block w-full" wire:model="bill_date" />
                        <x-input-error for="bill_date" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-due" value="{{ __('Due Date (optional)') }}" />
                        <x-input id="bill-due" type="date" class="mt-1 block w-full" wire:model="due_date" />
                        <x-input-error for="due_date" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-number" value="{{ __('Bill Number (optional)') }}" />
                        <x-input id="bill-number" type="text" class="mt-1 block w-full" wire:model="bill_number" />
                        <x-input-error for="bill_number" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="bill-reference" value="{{ __('Reference (optional)') }}" />
                        <x-input id="bill-reference" type="text" class="mt-1 block w-full" wire:model="reference" />
                        <x-input-error for="reference" class="mt-2" />
                    </div>
                </div>

                {{-- Lines --}}
                <div>
                    <div class="flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-slate-900">{{ __('Lines') }}</h3>
                        <button type="button" wire:click="addLine" class="inline-flex items-center gap-1 text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                            <x-icon name="plus" class="h-4 w-4" />
                            {{ __('Add line') }}
                        </button>
                    </div>
                    <x-input-error for="lines" class="mt-2" />

                    <div class="mt-3 space-y-3">
                        @foreach ($lines as $i => $line)
                            @php
                                $qty = (float) ($line['qty'] ?? 0);
                                $cost = (float) ($line['unit_cost'] ?? 0);
                                $factor = (float) ($line['purchase_to_base'] ?? 1) ?: 1;
                                $isStock = ($line['material_variant_id'] ?? '') !== '';
                                $lineTotal = round($qty * $cost, 2);
                                $qtyBase = $isStock ? round($qty * $factor, 6) : $qty;
                            @endphp
                            <div wire:key="line-{{ $i }}" class="rounded-xl border border-slate-200 bg-slate-50/50 p-3">
                                <div class="grid grid-cols-1 gap-3 sm:grid-cols-12">
                                    <div class="sm:col-span-5">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Material (optional)') }}</label>
                                        <select
                                            wire:model="lines.{{ $i }}.material_variant_id"
                                            wire:change="onVariantChosen({{ $i }})"
                                            @disabled($line['received'] ?? false)
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-100 disabled:text-slate-400"
                                        >
                                            <option value="">{{ __('Free text / non-stock') }}</option>
                                            @foreach ($variants as $variant)
                                                <option value="{{ $variant->id }}">{{ $variant->material_name }}{{ $variant->label ? ', ' . $variant->label : '' }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="sm:col-span-7">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Description') }}</label>
                                        <input
                                            type="text"
                                            wire:model="lines.{{ $i }}.description"
                                            @disabled($line['received'] ?? false)
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-100 disabled:text-slate-400"
                                        />
                                    </div>

                                    <div class="sm:col-span-3">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                            {{ __('Qty') }}{{ ($line['purchase_unit'] ?? '') !== '' ? ' (' . $line['purchase_unit'] . ')' : '' }}
                                        </label>
                                        <input
                                            type="number" step="0.000001" min="0"
                                            wire:model.live.debounce.400ms="lines.{{ $i }}.qty"
                                            @disabled($line['received'] ?? false)
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-100 disabled:text-slate-400"
                                        />
                                    </div>

                                    <div class="sm:col-span-3">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Unit Cost') }}</label>
                                        <input
                                            type="number" step="0.01" min="0"
                                            wire:model.live.debounce.400ms="lines.{{ $i }}.unit_cost"
                                            @disabled($line['received'] ?? false)
                                            class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-100 disabled:text-slate-400"
                                        />
                                    </div>

                                    <div class="sm:col-span-4">
                                        <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Base Qty') }}</label>
                                        <p class="mt-1 truncate py-2 text-sm text-slate-600" title="{{ $isStock ? __('Qty converted to the material base unit') : __('Non-stock line') }}">
                                            {{ $isStock ? number_format($qtyBase, 4) : '—' }}
                                        </p>
                                    </div>

                                    <div class="flex items-end justify-between sm:col-span-2">
                                        <div>
                                            <label class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Total') }}</label>
                                            <p class="mt-1 py-2 text-sm font-semibold tabular-nums text-slate-900">{{ number_format($lineTotal, 2) }}</p>
                                        </div>
                                        @unless ($line['received'] ?? false)
                                            <button type="button" wire:click="removeLine({{ $i }})" class="mb-2 text-slate-300 transition hover:text-rose-500" title="{{ __('Remove line') }}">
                                                <x-icon name="trash" class="h-4 w-4" />
                                            </button>
                                        @else
                                            <span class="mb-2"><x-badge color="emerald">{{ __('Received') }}</x-badge></span>
                                        @endunless
                                    </div>

                                    @error('lines.' . $i . '.description') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                    @error('lines.' . $i . '.qty') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                    @error('lines.' . $i . '.unit_cost') <p class="sm:col-span-12 text-xs text-rose-600">{{ $message }}</p> @enderror
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Tax + totals --}}
                <div class="grid grid-cols-1 gap-4 border-t border-slate-100 pt-4 sm:grid-cols-2">
                    <div>
                        <x-label for="bill-tax" value="{{ __('Tax') }}" />
                        <x-input id="bill-tax" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="tax" />
                        <x-input-error for="tax" class="mt-2" />

                        <div class="mt-3">
                            <x-label for="bill-notes" value="{{ __('Notes (optional)') }}" />
                            <textarea id="bill-notes" rows="2" wire:model="notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        </div>
                    </div>

                    <div class="rounded-xl bg-slate-50 p-4 text-sm">
                        <div class="flex items-center justify-between text-slate-600">
                            <span>{{ __('Subtotal') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['subtotal'], 2) }}</span>
                        </div>
                        <div class="mt-2 flex items-center justify-between text-slate-600">
                            <span>{{ __('Tax') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['tax'], 2) }}</span>
                        </div>
                        <div class="mt-3 flex items-center justify-between border-t border-slate-200 pt-3 text-base font-bold text-slate-900">
                            <span>{{ __('Total') }}</span>
                            <span class="tabular-nums">{{ $currency_code }} {{ number_format($totals['total'], 2) }}</span>
                        </div>
                    </div>
                </div>

                @unless ($editingId)
                    <label class="flex items-center gap-2">
                        <x-checkbox wire:model="receive_on_save" />
                        <span class="text-sm text-slate-600">{{ __('Receive all stock lines into inventory now') }}</span>
                    </label>
                @endunless
            </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" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ $editingId ? __('Save Changes') : __('Create Bill') }}</span>
                <span wire:loading wire:target="save">{{ __('Saving...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ============================================================= --}}
    {{-- Record payment modal                                           --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showPaymentModal" maxWidth="lg">
        <x-slot name="title">{{ __('Record Payment') }}</x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="pay-account" value="{{ __('Paid From') }}" />
                    <select id="pay-account" wire:model="pay_fund_account_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 an account...') }}</option>
                        @foreach ($fundAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <x-input-error for="pay_fund_account_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="pay-amount" value="{{ __('Amount') }}" />
                    <x-input id="pay-amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="pay_amount" />
                    <x-input-error for="pay_amount" class="mt-2" />
                </div>

                <div>
                    <x-label for="pay-date" value="{{ __('Payment Date') }}" />
                    <x-input id="pay-date" type="date" class="mt-1 block w-full" wire:model="pay_paid_on" />
                    <x-input-error for="pay_paid_on" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="pay-charge" value="{{ __('Transaction charge (optional)') }}" />
                    <x-input id="pay-charge" type="number" step="0.01" min="0" placeholder="0.00" class="mt-1 block w-full" wire:model="pay_charge" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Bank/EcoCash fee to send this payment. Booked as a bank charge. Leave blank if none.') }}</p>
                    <x-input-error for="pay_charge" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="pay-reference" value="{{ __('Reference (optional)') }}" />
                    <x-input id="pay-reference" type="text" class="mt-1 block w-full" wire:model="pay_reference" placeholder="{{ __('e.g. EFT123') }}" />
                    <x-input-error for="pay_reference" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="pay-notes" value="{{ __('Notes (optional)') }}" />
                    <textarea id="pay-notes" rows="2" wire:model="pay_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="pay_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

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

            <x-button class="ms-3" wire:click="recordPayment" wire:loading.attr="disabled" wire:target="recordPayment">
                <span wire:loading.remove wire:target="recordPayment">{{ __('Record Payment') }}</span>
                <span wire:loading wire:target="recordPayment">{{ __('Saving...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ============================================================= --}}
    {{-- Create / Edit supplier modal                                   --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showSupplierModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingSupplierId ? __('Edit Supplier') : __('New Supplier') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="supplier-name" value="{{ __('Name') }}" />
                    <x-input id="supplier-name" type="text" class="mt-1 block w-full" wire:model="s_name" />
                    <x-input-error for="s_name" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-type" value="{{ __('Type') }}" />
                    <select id="supplier-type" wire:model="s_type" 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="local">{{ __('Local') }}</option>
                        <option value="international">{{ __('International') }}</option>
                    </select>
                    <x-input-error for="s_type" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-category" value="{{ __('Supplies (what they provide)') }}" />
                    <x-input id="supplier-category" type="text" class="mt-1 block w-full" wire:model="s_category" placeholder="{{ __('e.g. Vinyl, Sewing, Lamination') }}" />
                    <x-input-error for="s_category" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-email" value="{{ __('Email (optional)') }}" />
                    <x-input id="supplier-email" type="email" class="mt-1 block w-full" wire:model="s_email" />
                    <x-input-error for="s_email" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-phone" value="{{ __('Phone (optional)') }}" />
                    <x-input id="supplier-phone" type="text" class="mt-1 block w-full" wire:model="s_phone" />
                    <x-input-error for="s_phone" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-contact" value="{{ __('Contact person (optional)') }}" />
                    <x-input id="supplier-contact" type="text" class="mt-1 block w-full" wire:model="s_contact_person" />
                    <x-input-error for="s_contact_person" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-address" value="{{ __('Address (optional)') }}" />
                    <x-input id="supplier-address" type="text" class="mt-1 block w-full" wire:model="s_address" />
                    <x-input-error for="s_address" class="mt-2" />
                </div>

                <!-- Buying terms, these default onto every bill and PO -->
                <div class="sm:col-span-2">
                    <div class="mt-2 border-t border-slate-100 pt-4">
                        <h3 class="text-sm font-semibold text-slate-700">{{ __('Buying terms') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Used to date bills, price currencies and advise on reorder lead time.') }}</p>
                    </div>
                </div>

                <div>
                    <x-label for="supplier-lead-time" value="{{ __('Lead time (days)') }}" />
                    <x-input id="supplier-lead-time" type="number" min="0" max="365" class="mt-1 block w-full" wire:model="s_lead_time_days" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Typical days from order to delivery.') }}</p>
                    <x-input-error for="s_lead_time_days" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-terms" value="{{ __('Payment terms (days)') }}" />
                    <x-input id="supplier-terms" type="number" min="0" max="365" class="mt-1 block w-full" wire:model="s_payment_terms_days" />
                    <p class="mt-1 text-xs text-slate-400">{{ __('Defaults a bill’s due date.') }}</p>
                    <x-input-error for="s_payment_terms_days" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-currency" value="{{ __('Invoices in') }}" />
                    <select id="supplier-currency" wire:model="s_default_currency_code" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('— Default —') }}</option>
                        @foreach ($currencies as $currency)
                            <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="s_default_currency_code" class="mt-2" />
                </div>

                <label class="flex items-start gap-2 sm:pt-6">
                    <x-checkbox wire:model="s_is_preferred" class="mt-0.5" />
                    <span class="text-sm text-slate-600">
                        {{ __('Preferred supplier') }}
                        <span class="block text-xs text-slate-400">{{ __('Fallback when a material has no supplier of its own.') }}</span>
                    </span>
                </label>

                <!-- Bank / payout details -->
                <div class="sm:col-span-2">
                    <div class="mt-2 border-t border-slate-100 pt-4">
                        <h3 class="text-sm font-semibold text-slate-700">{{ __('Bank details') }}</h3>
                        <p class="text-xs text-slate-500">{{ __('Where you pay this supplier. Optional.') }}</p>
                    </div>
                </div>

                <div>
                    <x-label for="supplier-bank-name" value="{{ __('Bank name') }}" />
                    <x-input id="supplier-bank-name" type="text" class="mt-1 block w-full" wire:model="s_bank_name" />
                    <x-input-error for="s_bank_name" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-bank-account-name" value="{{ __('Account name') }}" />
                    <x-input id="supplier-bank-account-name" type="text" class="mt-1 block w-full" wire:model="s_bank_account_name" />
                    <x-input-error for="s_bank_account_name" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-bank-account-number" value="{{ __('Account number') }}" />
                    <x-input id="supplier-bank-account-number" type="text" class="mt-1 block w-full" wire:model="s_bank_account_number" />
                    <x-input-error for="s_bank_account_number" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-bank-branch" value="{{ __('Branch') }}" />
                    <x-input id="supplier-bank-branch" type="text" class="mt-1 block w-full" wire:model="s_bank_branch" />
                    <x-input-error for="s_bank_branch" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-bank-branch-code" value="{{ __('Branch / sort code') }}" />
                    <x-input id="supplier-bank-branch-code" type="text" class="mt-1 block w-full" wire:model="s_bank_branch_code" />
                    <x-input-error for="s_bank_branch_code" class="mt-2" />
                </div>

                <div>
                    <x-label for="supplier-bank-swift" value="{{ __('SWIFT / BIC') }}" />
                    <x-input id="supplier-bank-swift" type="text" class="mt-1 block w-full" wire:model="s_bank_swift" />
                    <x-input-error for="s_bank_swift" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="supplier-notes" value="{{ __('Notes (optional)') }}" />
                    <textarea id="supplier-notes" rows="2" wire:model="s_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="s_notes" class="mt-2" />
                </div>

                <label class="flex items-center sm:col-span-2">
                    <x-checkbox wire:model="s_is_active" />
                    <span class="ms-2 text-sm text-slate-600">{{ __('Active') }}</span>
                </label>
            </div>
        </x-slot>

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

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

    {{-- ============================================================= --}}
    {{-- Supplier catalogue, what this supplier supplies               --}}
    {{-- ============================================================= --}}
    <x-dialog-modal wire:model.live="showSuppliesModal" maxWidth="4xl">
        <x-slot name="title">
            {{ __('What :name supplies', ['name' => $suppliesSupplierName]) }}
        </x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('Link the materials you buy from this supplier. Buying from them on a bill adds the link automatically, this is for setting it up ahead of time, or recording their SKU, price and minimum order.') }}
            </p>

            {{-- Existing catalogue --}}
            <div class="mt-4 overflow-x-auto rounded-xl border border-slate-100">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 py-2.5">{{ __('Material') }}</th>
                            <th class="px-3 py-2.5">{{ __('Their SKU') }}</th>
                            <th class="whitespace-nowrap px-3 py-2.5 text-right" title="{{ __('Per base stock unit') }}">{{ __('Last price') }}</th>
                            <th class="whitespace-nowrap px-3 py-2.5 text-right">{{ __('MOQ') }}</th>
                            <th class="whitespace-nowrap px-3 py-2.5 text-right">{{ __('Lead time') }}</th>
                            <th class="whitespace-nowrap px-3 py-2.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($supplyRows as $row)
                            <tr wire:key="supply-{{ $row->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-3">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-900">{{ $row->material?->name }}</span>
                                        @if ($row->variant)
                                            <x-badge color="slate">{{ $row->variant->label }}</x-badge>
                                        @endif
                                        @if ($row->is_preferred)
                                            <x-badge color="emerald">{{ __('Preferred') }}</x-badge>
                                        @endif
                                    </div>
                                    @if ($row->purchase_count > 0)
                                        <p class="mt-0.5 text-xs text-slate-400">
                                            {{ trans_choice('{1} bought once|[2,*] bought :count times', $row->purchase_count, ['count' => $row->purchase_count]) }}
                                            @if ($row->last_purchased_at)
                                                · {{ $row->last_purchased_at->format('d M Y') }}
                                            @endif
                                        </p>
                                    @endif
                                </td>
                                <td class="px-3 py-3 text-sm text-slate-500">{{ $row->supplier_sku ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 py-3 text-right text-sm text-slate-700">
                                    {{ $row->last_unit_cost !== null ? ($row->currency_code ?: $baseCode) . ' ' . number_format((float) $row->last_unit_cost, 2) : '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-3 text-right text-sm text-slate-500">
                                    {{ $row->moq !== null ? rtrim(rtrim(number_format((float) $row->moq, 2), '0'), '.') : '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-3 text-right text-sm text-slate-500">
                                    {{ $row->effectiveLeadTimeDays() !== null ? __(':days d', ['days' => $row->effectiveLeadTimeDays()]) : '—' }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-3 text-right text-sm font-medium">
                                    <div class="flex items-center justify-end gap-3">
                                        @if (! $row->is_preferred)
                                            <button wire:click="preferSupply({{ $row->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Prefer') }}</button>
                                        @endif
                                        <button
                                            wire:click="removeSupply({{ $row->id }})"
                                            wire:confirm="{{ __('Remove this material from the supplier’s catalogue?') }}"
                                            class="text-rose-600 transition hover:text-rose-800"
                                        >{{ __('Remove') }}</button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-3 py-8 text-center text-sm text-slate-400">
                                    {{ __('Nothing linked yet. Add the first material below.') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{-- Add a material --}}
            <div class="mt-5 rounded-xl border border-slate-100 bg-slate-50/60 p-4">
                <h3 class="text-sm font-semibold text-slate-700">{{ __('Add a material') }}</h3>

                <div class="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-3">
                    <div class="sm:col-span-2">
                        <x-label for="cat-material" value="{{ __('Material') }}" />
                        <select id="cat-material" wire:model.live="cat_material_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="">{{ __('— Choose —') }}</option>
                            @foreach ($catalogueMaterials as $material)
                                <option value="{{ $material->id }}">{{ $material->name }}{{ $material->sku ? ' · ' . $material->sku : '' }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="cat_material_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-variant" value="{{ __('Variant (optional)') }}" />
                        <select id="cat-variant" wire:model="cat_variant_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" @disabled($catalogueVariants->isEmpty())>
                            <option value="">{{ __('All variants') }}</option>
                            @foreach ($catalogueVariants as $variant)
                                <option value="{{ $variant->id }}">{{ $variant->label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="cat_variant_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-sku" value="{{ __('Their SKU (optional)') }}" />
                        <x-input id="cat-sku" type="text" class="mt-1 block w-full" wire:model="cat_supplier_sku" />
                        <x-input-error for="cat_supplier_sku" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-price" value="{{ __('Their price / base unit') }}" />
                        <x-input id="cat-price" type="number" step="0.0001" min="0" class="mt-1 block w-full" wire:model="cat_last_unit_cost" placeholder="{{ $baseCode }}" />
                        <p class="mt-1 text-xs text-slate-400">{{ __('Per stock unit (m, sheet, each), not per roll or box.') }}</p>
                        <x-input-error for="cat_last_unit_cost" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-unit" value="{{ __('Bought in (unit)') }}" />
                        <x-input id="cat-unit" type="text" class="mt-1 block w-full" wire:model="cat_purchase_unit" placeholder="{{ __('e.g. roll, box') }}" />
                        <x-input-error for="cat_purchase_unit" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-moq" value="{{ __('Minimum order (optional)') }}" />
                        <x-input id="cat-moq" type="number" step="0.000001" min="0" class="mt-1 block w-full" wire:model="cat_moq" />
                        <x-input-error for="cat_moq" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="cat-lead" value="{{ __('Lead time (days)') }}" />
                        <x-input id="cat-lead" type="number" min="0" max="365" class="mt-1 block w-full" wire:model="cat_lead_time_days" placeholder="{{ __('Supplier default') }}" />
                        <x-input-error for="cat_lead_time_days" class="mt-2" />
                    </div>

                    <label class="flex items-center sm:pt-6">
                        <x-checkbox wire:model="cat_is_preferred" />
                        <span class="ms-2 text-sm text-slate-600">{{ __('Make preferred source') }}</span>
                    </label>
                </div>

                <div class="mt-4 flex justify-end">
                    <x-button wire:click="addSupply" wire:loading.attr="disabled" wire:target="addSupply">
                        <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                        <span wire:loading.remove wire:target="addSupply">{{ __('Add to catalogue') }}</span>
                        <span wire:loading wire:target="addSupply">{{ __('Adding...') }}</span>
                    </x-button>
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeSuppliesModal" wire:loading.attr="disabled">
                {{ __('Done') }}
            </x-secondary-button>
        </x-slot>
    </x-dialog-modal>
</div>