@php
    $statusMeta = [
        'in_use'       => ['label' => __('In use'),       'color' => 'emerald'],
        'in_storage'   => ['label' => __('In storage'),   'color' => 'sky'],
        'under_repair' => ['label' => __('Under repair'), 'color' => 'amber'],
        'retired'      => ['label' => __('Retired'),      'color' => 'slate'],
        'disposed'     => ['label' => __('Disposed'),     'color' => 'rose'],
    ];
    $tonePill = [
        'up'    => 'bg-emerald-50 text-emerald-700',
        'down'  => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];
@endphp

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

        <x-asset-tabs />

        {{-- Header --}}
        <x-page-header :title="__('Assets')" :subtitle="__('Track and manage every asset the company owns.')">
            <x-secondary-button wire:click="export" type="button">
                <x-icon name="arrow-down-tray" class="-ms-1 me-1.5 h-4 w-4" />
                {{ __('Export') }}
            </x-secondary-button>

            @if ($canManage)
                <x-secondary-button wire:click="openImport" type="button">
                    <x-icon name="arrow-up-tray" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Import') }}
                </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 Asset') }}
                </x-button>
            @endif

            @if ($canResetData)
                <button
                    type="button"
                    wire:click="confirmReset"
                    class="inline-flex items-center gap-2 rounded-xl border border-rose-200 bg-white px-4 py-2.5 text-sm font-semibold text-rose-600 shadow-sm transition hover:bg-rose-50"
                    title="{{ __('Permanently delete the entire asset register') }}"
                >
                    <x-icon name="trash" class="h-4 w-4" />
                    {{ __('Reset all') }}
                </button>
            @endif
        </x-page-header>

        {{-- KPI cards (money cards are absent for users who may not see values) --}}
        <section class="grid grid-cols-2 gap-3 sm:grid-cols-4 {{ $canSeeValues ? 'lg:grid-cols-7' : 'lg:grid-cols-4' }}">
            @foreach ($kpis as $kpi)
                <x-card class="flex min-w-0 flex-col gap-2.5 p-4">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-xl 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-4 w-4" />
                    </span>
                    <div class="min-w-0">
                        <p class="line-clamp-2 min-h-[26px] text-[11px] font-semibold uppercase leading-tight tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                        <p class="mt-1.5 break-words font-bold leading-tight tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $kpi['value'] }}</p>
                    </div>
                    <span class="mt-auto inline-flex w-fit max-w-full items-center gap-1 truncate rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $tonePill[$kpi['sub']['tone']] ?? $tonePill['muted'] }}">
                        {{ $kpi['sub']['text'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        {{-- Register 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, tag, serial, location...') }}"
                        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="categoryFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('All Categories') }}</option>
                        @foreach ($categoryOptions as $cat)
                            <option value="{{ $cat }}">{{ $cat }}</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>
                </div>
            </div>

            {{-- Bulk action bar --}}
            @if ($canDelete && count($selected) > 0)
                <div class="flex items-center justify-between gap-3 border-b border-slate-100 bg-indigo-50/60 px-6 py-3">
                    <p class="text-sm font-medium text-indigo-700">{{ __(':count selected', ['count' => count($selected)]) }}</p>
                    <div class="flex items-center gap-3">
                        <button type="button" wire:click="$set('selected', [])" class="text-sm font-medium text-slate-500 hover:text-slate-700">{{ __('Clear') }}</button>
                        <button
                            type="button"
                            wire:click="deleteSelected"
                            wire:confirm="{{ __('Delete the selected assets?') }}"
                            class="inline-flex items-center gap-1.5 rounded-lg bg-rose-600 px-3 py-1.5 text-sm font-medium text-white transition hover:bg-rose-700"
                        >
                            <x-icon name="trash" class="h-4 w-4" />
                            {{ __('Delete selected') }}
                        </button>
                    </div>
                </div>
            @endif

            {{-- 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">
                            @if ($canDelete)
                                <th class="w-10 px-3 lg:px-4 py-3.5">
                                    <input type="checkbox"
                                        @change="$wire.set('selected', $event.target.checked ? @js($assets->pluck('id')->values()) : [])"
                                        @checked(count($selected) > 0 && count($selected) >= $assets->count())
                                        class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                </th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Asset') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Category') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Location') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Assigned To') }}</th>
                            @if ($canSeeValues)
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Value') }}</th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Purchased') }}</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 ($assets as $asset)
                            @php $meta = $statusMeta[$asset->status] ?? ['label' => ucfirst($asset->status), 'color' => 'slate']; @endphp
                            <tr wire:key="asset-{{ $asset->id }}" class="transition hover:bg-slate-50/70">
                                @if ($canDelete)
                                    <td class="px-3 lg:px-4 py-4">
                                        <input type="checkbox" value="{{ $asset->id }}" wire:model.live="selected" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    </td>
                                @endif
                                <td class="px-3 lg:px-4 py-4">
                                    <div class="flex items-center gap-3">
                                        @if ($asset->images->isNotEmpty())
                                            <img src="{{ $asset->images->first()->url() }}" alt="{{ $asset->name }}" class="h-9 w-9 shrink-0 rounded-xl object-cover ring-1 ring-slate-200" />
                                        @else
                                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-indigo-500 to-violet-500 text-white">
                                                <x-icon name="archive-box" class="h-4 w-4" />
                                            </span>
                                        @endif
                                        <div class="min-w-0">
                                            <button type="button" wire:click="view({{ $asset->id }})" class="block max-w-full truncate text-left text-sm font-medium text-slate-900 transition hover:text-indigo-600 hover:underline" title="{{ __('View full details') }}">{{ $asset->name }}</button>
                                            <p class="truncate text-xs text-slate-400">
                                                {{ $asset->asset_tag ?: ($asset->serial_number ? __('SN: :sn', ['sn' => $asset->serial_number]) : '—') }}
                                                @if ($asset->last_verified_at)
                                                    <span class="text-slate-300">·</span>
                                                    <span title="{{ __('Last physically checked') }}">{{ __('checked :when', ['when' => $asset->last_verified_at->timezone(config('app.display_timezone'))->format('M Y')]) }}</span>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $asset->category ?: '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <div class="flex items-center gap-1.5">
                                        <x-badge :color="$meta['color']">{{ $meta['label'] }}</x-badge>
                                        {{-- The last count could not find it. Loud, and it stays
                                             loud until somebody writes it off or finds it. --}}
                                        @if ($asset->last_verification_result === 'missing')
                                            <x-badge color="rose">{{ __('Not found') }}</x-badge>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $asset->location ?: '—' }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $asset->assigned_to ?: '—' }}</td>
                                @if ($canSeeValues)
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-900">
                                        @php $val = $asset->current_value ?? $asset->purchase_cost; @endphp
                                        {{ $val !== null ? $asset->currency_code . ' ' . number_format((float) $val, 2) : '—' }}
                                    </td>
                                @endif
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $asset->purchase_date ? $asset->purchase_date->format('j M Y') : '—' }}</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">
                                        <button wire:click="view({{ $asset->id }})" class="text-slate-500 transition hover:text-slate-800" title="{{ __('View full details') }}">{{ __('View') }}</button>
                                        @if ($canUpdate && ! $asset->isDisposed())
                                            <button wire:click="openCostModal({{ $asset->id }})" class="text-violet-600 transition hover:text-violet-800" title="{{ __('Log a maintenance, repair or improvement cost') }}">{{ __('Cost') }}</button>
                                            <button wire:click="openDisposeModal({{ $asset->id }})" class="text-amber-600 transition hover:text-amber-800" title="{{ __('Sell or write off this asset') }}">{{ __('Dispose') }}</button>
                                        @endif
                                        <x-notes-button variant="link" :for="$asset" />
                                        @if ($canManage)
                                            <button wire:click="edit({{ $asset->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                        @endif
                                        @if ($canDelete)
                                            <button
                                                wire:click="delete({{ $asset->id }})"
                                                wire:confirm="{{ __('Delete this asset?') }}"
                                                class="text-rose-600 transition hover:text-rose-800"
                                            >{{ __('Delete') }}</button>
                                        @endif
                                        @if (! $canManage && ! $canDelete && ! $canUpdate)
                                            <span class="text-slate-400">—</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="{{ 7 + ($canDelete ? 1 : 0) + ($canSeeValues ? 1 : 0) }}" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="archive-box"
                                        :title="__('No assets found')"
                                        :message="$search !== '' || $categoryFilter !== '' || $statusFilter !== '' ? __('Try adjusting your search or filters.') : __('Add the equipment, vehicles and other assets your company owns.')"
                                        class="border-0 bg-transparent py-0"
                                    >
                                        @if ($canManage && $search === '' && $categoryFilter === '' && $statusFilter === '')
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Asset') }}
                                            </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">
                {{ $assets->links() }}
            </div>
        </x-card>
    </div>

    {{-- Create / Edit modal --}}
    <x-dialog-modal wire:model.live="showModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $editingId ? __('Edit Asset') : __('New Asset') }}
        </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="asset-name" value="{{ __('Name') }}" />
                    <x-input id="asset-name" type="text" class="mt-1 block w-full" wire:model="name" placeholder="{{ __('e.g. HP LaserJet Printer') }}" />
                    <x-input-error for="name" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-category" value="{{ __('Category') }}" />
                    <select id="asset-category" wire:model="category" 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 category') }}</option>
                        @foreach ($categoryOptions as $cat)
                            <option value="{{ $cat }}">{{ $cat }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="category" class="mt-2" />
                </div>

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

                <div>
                    <x-label for="asset-tag" value="{{ __('Asset Tag (optional)') }}" />
                    <x-input id="asset-tag" type="text" class="mt-1 block w-full" wire:model="asset_tag" placeholder="{{ __('e.g. AST-0001') }}" />
                    <x-input-error for="asset_tag" class="mt-2" />
                </div>

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

                <div>
                    <x-label for="asset-condition" value="{{ __('Condition (optional)') }}" />
                    <select id="asset-condition" wire:model="condition" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Not set') }}</option>
                        @foreach ($conditions as $cond)
                            <option value="{{ $cond }}">{{ $cond }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="condition" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-location" value="{{ __('Location (optional)') }}" />
                    <x-input id="asset-location" type="text" class="mt-1 block w-full" wire:model="location" placeholder="{{ __('e.g. Head Office, Workshop') }}" />
                    <x-input-error for="location" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-assigned" value="{{ __('Assigned To (optional)') }}" />
                    <x-input id="asset-assigned" type="text" class="mt-1 block w-full" wire:model="assigned_to" placeholder="{{ __('Person or department') }}" />
                    <x-input-error for="assigned_to" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-supplier" value="{{ __('Supplier (optional)') }}" />
                    <select id="asset-supplier" wire:model="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="">{{ __('None') }}</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="asset-source" value="{{ __('Supplier / Source (optional)') }}" />
                    <x-input id="asset-source" type="text" class="mt-1 block w-full" wire:model="source" placeholder="{{ __('e.g. China (Import), Local Supplier') }}" />
                    <x-input-error for="source" class="mt-2" />
                </div>

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

                @if ($canSeeValues)
                <div>
                    <x-label for="asset-currency" value="{{ __('Currency') }}" />
                    <select id="asset-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 }}, {{ $currency->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="currency_code" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-cost" value="{{ __('Purchase Cost (optional)') }}" />
                    <x-input id="asset-cost" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="purchase_cost" />
                    <x-input-error for="purchase_cost" class="mt-2" />
                </div>

                @php $payAccounts = $fundAccounts->where('currency_code', strtoupper($currency_code)); @endphp
                <div class="sm:col-span-2">
                    <x-label for="asset-paid-from" value="{{ __('Paid from account (optional)') }}" />
                    <select id="asset-paid-from" wire:model="paid_from_account_id" @disabled($payAccounts->isEmpty()) class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:bg-slate-50 disabled:text-slate-400">
                        <option value="">{{ __('— Not paid from an account (register only) —') }}</option>
                        @foreach ($payAccounts as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500">
                        @if ($payAccounts->isEmpty())
                            {{ __('No active :cur account. Leave blank, or add one under Treasury.', ['cur' => strtoupper($currency_code) ?: __('matching')]) }}
                        @else
                            {{ __('Deducts the cost from this account as a capital purchase (shows in cash-flow, not the P&L, depreciation is the only profit impact).') }}
                        @endif
                    </p>
                    <x-input-error for="paid_from_account_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-value" value="{{ __('Net Book Value / Current Value (optional)') }}" />
                    <x-input id="asset-value" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="current_value" />
                    <x-input-error for="current_value" class="mt-2" />
                </div>
                @endif

                <div>
                    <x-label for="asset-warranty" value="{{ __('Warranty Expiry (optional)') }}" />
                    <x-input id="asset-warranty" type="date" class="mt-1 block w-full" wire:model="warranty_expiry" />
                    <x-input-error for="warranty_expiry" class="mt-2" />
                </div>

                {{-- Depreciation (straight-line) --}}
                <div class="sm:col-span-2 mt-1 border-t border-slate-100 pt-4">
                    <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Depreciation (straight-line)') }}</p>
                </div>

                <div>
                    <x-label for="asset-life" value="{{ __('Useful Life (years, optional)') }}" />
                    <x-input id="asset-life" type="number" step="0.5" min="0" class="mt-1 block w-full" wire:model="useful_life_years" />
                    <x-input-error for="useful_life_years" class="mt-2" />
                </div>

                @if ($canSeeValues)
                <div>
                    <x-label for="asset-residual" value="{{ __('Residual Value (optional)') }}" />
                    <x-input id="asset-residual" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="residual_value" />
                    <x-input-error for="residual_value" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-annual-depr" value="{{ __('Annual Depreciation (optional)') }}" />
                    <x-input id="asset-annual-depr" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="annual_depreciation" />
                    <x-input-error for="annual_depreciation" class="mt-2" />
                </div>

                <div>
                    <x-label for="asset-accum-depr" value="{{ __('Depreciation to Date (optional)') }}" />
                    <x-input id="asset-accum-depr" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="accumulated_depreciation" />
                    <x-input-error for="accumulated_depreciation" class="mt-2" />
                </div>
                @endif

                <div>
                    <x-label for="asset-coa" value="{{ __('COA Code (optional)') }}" />
                    <x-input id="asset-coa" type="text" class="mt-1 block w-full" wire:model="coa_code" placeholder="{{ __('e.g. 1500') }}" />
                    <x-input-error for="coa_code" class="mt-2" />
                </div>

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

                {{-- Images --}}
                <div class="sm:col-span-2 mt-1 border-t border-slate-100 pt-4">
                    <x-label value="{{ __('Images') }}" />
                    <p class="mt-0.5 text-xs text-slate-400">{{ __('Attach photos, receipts or serial-plate close-ups (max 5MB each).') }}</p>

                    @if ($editingId && $editingImages->isNotEmpty())
                        <div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-4">
                            @foreach ($editingImages as $image)
                                <div wire:key="img-{{ $image->id }}" class="group relative overflow-hidden rounded-xl border border-slate-200">
                                    <img src="{{ $image->url() }}" alt="{{ $image->original_name }}" class="aspect-square w-full object-cover" />
                                    <button
                                        type="button"
                                        wire:click="removeImage({{ $image->id }})"
                                        wire:confirm="{{ __('Remove this image?') }}"
                                        class="absolute right-1.5 top-1.5 inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/90 text-rose-600 shadow-sm transition hover:bg-white"
                                        title="{{ __('Remove') }}"
                                    >
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    {{-- Staged uploads preview --}}
                    @if (count($newImages))
                        <div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-4">
                            @foreach ($newImages as $i => $img)
                                @if (is_object($img) && method_exists($img, 'temporaryUrl'))
                                    <div wire:key="newimg-{{ $i }}" class="overflow-hidden rounded-xl border border-dashed border-indigo-300">
                                        <img src="{{ $img->temporaryUrl() }}" class="aspect-square w-full object-cover opacity-80" />
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    @endif

                    <input
                        type="file"
                        wire:model="newImages"
                        multiple
                        accept="image/*"
                        class="mt-3 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200"
                    />
                    <x-upload-progress target="newImages" class="mt-2" />
                </div>
            </div>
        </x-slot>

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

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

    {{-- Read-only detail popup: every captured field, including the sheet
         columns hidden from the table. --}}
    <x-dialog-modal wire:model.live="showViewModal" maxWidth="2xl">
        <x-slot name="title">
            {{ $viewingAsset?->name ?? __('Asset details') }}
        </x-slot>

        <x-slot name="content">
            @if ($viewingAsset)
                @php
                    $a = $viewingAsset;
                    $vmeta = $statusMeta[$a->status] ?? ['label' => ucfirst($a->status), 'color' => 'slate'];
                    $cur = $a->currency_code ?: '';
                    $money = fn ($v) => $v !== null && $v !== '' ? trim($cur . ' ' . number_format((float) $v, 2)) : '—';
                    $dash = fn ($v) => filled($v) ? $v : '—';
                    $depLabel = ['straight_line' => __('Straight-line'), 'reducing_balance' => __('Reducing balance')][$a->depreciation_method] ?? $a->depreciation_method;
                @endphp

                {{-- Header strip: tag, category, status --}}
                <div class="flex flex-wrap items-center gap-2">
                    @if ($a->asset_tag)
                        <span class="inline-flex items-center rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">{{ $a->asset_tag }}</span>
                    @endif
                    @if ($a->category)
                        <span class="text-xs text-slate-500">{{ $a->category }}</span>
                    @endif
                    <span class="ms-auto"><x-badge :color="$vmeta['color']">{{ $vmeta['label'] }}</x-badge></span>
                </div>

                {{-- Image gallery --}}
                @if ($a->images->isNotEmpty())
                    <div class="mt-4 flex gap-2 overflow-x-auto pb-1">
                        @foreach ($a->images as $img)
                            <a href="{{ $img->url() }}" target="_blank" rel="noopener">
                                <img src="{{ $img->url() }}" alt="{{ $a->name }}" class="h-20 w-20 shrink-0 rounded-xl object-cover ring-1 ring-slate-200 transition hover:opacity-90" />
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Money headline cards --}}
                @if ($canSeeValues)
                    <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
                        @foreach ([
                            [__('Net Book Value'), $money($a->current_value), 'text-slate-900'],
                            [__('Purchase Cost'), $money($a->purchase_cost), 'text-slate-900'],
                            [__('Annual Deprn'), $money($a->annual_depreciation), 'text-slate-900'],
                            [__('Deprn to Date'), $money($a->accumulated_depreciation), 'text-slate-900'],
                        ] as $card)
                            <div class="rounded-xl border border-slate-100 bg-slate-50/60 p-3">
                                <p class="text-[11px] font-medium uppercase tracking-wide text-slate-400">{{ $card[0] }}</p>
                                <p class="mt-1 text-sm font-semibold tabular-nums {{ $card[2] }}">{{ $card[1] }}</p>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- Full field grid --}}
                <dl class="mt-5 grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2">
                    @foreach ([
                        [__('Serial Number'), $dash($a->serial_number)],
                        [__('Condition'), $dash($a->condition)],
                        [__('Location'), $dash($a->location)],
                        [__('Assigned To'), $dash($a->assigned_to)],
                        [__('Supplier'), $dash($a->supplier?->name)],
                        [__('Supplier / Source'), $dash($a->source)],
                        ...($canSeeValues ? [[__('Paid From'), $a->paidFromAccount ? $a->paidFromAccount->name . ' (' . $a->paidFromAccount->currency_code . ')' : '—']] : []),
                        [__('Date Purchased'), $a->purchase_date?->format('j M Y') ?? '—'],
                        [__('Warranty Expiry'), $a->warranty_expiry?->format('j M Y') ?? '—'],
                        [__('Useful Life'), $a->useful_life_years !== null ? ((float) $a->useful_life_years) . ' ' . __('years') : '—'],
                        ...($canSeeValues ? [
                            [__('Residual Value'), $money($a->residual_value)],
                            [__('Depreciation Method'), $dash($depLabel)],
                        ] : []),
                        [__('Currency'), $dash($a->currency_code)],
                        [__('COA Code'), $dash($a->coa_code)],
                    ] as $field)
                        <div class="flex justify-between gap-4 border-b border-slate-100 pb-2">
                            <dt class="text-sm text-slate-500">{{ $field[0] }}</dt>
                            <dd class="text-right text-sm font-medium text-slate-900">{{ $field[1] }}</dd>
                        </div>
                    @endforeach
                </dl>

                {{-- Disposal block --}}
                @if ($a->isDisposed())
                    @php $gl = $a->disposalGainLoss(); @endphp
                    <div class="mt-5 rounded-xl border border-amber-200 bg-amber-50/60 p-4">
                        <p class="text-xs font-semibold uppercase tracking-wide text-amber-700">{{ __('Disposal') }}</p>
                        <dl class="mt-2 grid grid-cols-2 gap-x-6 gap-y-2 sm:grid-cols-4">
                            <div><dt class="text-xs text-slate-500">{{ __('Method') }}</dt><dd class="text-sm font-medium text-slate-900">{{ \App\Models\Asset::DISPOSAL_METHODS[$a->disposal_method] ?? $a->disposal_method ?? '—' }}</dd></div>
                            <div><dt class="text-xs text-slate-500">{{ __('Date') }}</dt><dd class="text-sm font-medium text-slate-900">{{ $a->disposed_on?->format('j M Y') ?? '—' }}</dd></div>
                            @if ($canSeeValues)
                                <div><dt class="text-xs text-slate-500">{{ __('Proceeds') }}</dt><dd class="text-sm font-medium text-slate-900">{{ $money($a->disposal_proceeds) }}</dd></div>
                                <div><dt class="text-xs text-slate-500">{{ __('Gain / Loss') }}</dt><dd class="text-sm font-medium tabular-nums {{ $gl < 0 ? 'text-rose-600' : 'text-emerald-600' }}">{{ $money($gl) }}</dd></div>
                            @endif
                        </dl>
                        @if ($a->disposal_notes)
                            <p class="mt-2 text-sm text-slate-600">{{ $a->disposal_notes }}</p>
                        @endif
                    </div>
                @endif

                {{-- Notes --}}
                @if ($a->notes)
                    <div class="mt-5">
                        <p class="text-xs font-semibold uppercase tracking-wide text-slate-400">{{ __('Notes / Condition') }}</p>
                        <p class="mt-1 whitespace-pre-line text-sm text-slate-700">{{ $a->notes }}</p>
                    </div>
                @endif

                {{-- Meta footer --}}
                <p class="mt-5 text-xs text-slate-400">
                    {{ __('Added :date', ['date' => $a->created_at?->format('j M Y')]) }}@if ($a->recorder) · {{ __('by :name', ['name' => $a->recorder->name]) }}@endif
                </p>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeView">{{ __('Close') }}</x-secondary-button>
            @if ($canManage)
                <x-button class="ms-3" wire:click="editFromView">{{ __('Edit') }}</x-button>
            @endif
        </x-slot>
    </x-dialog-modal>

    {{-- Log-cost modal (maintenance / repair / improvement) --}}
    <x-dialog-modal wire:model.live="showCostModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Log Asset Cost') }}
        </x-slot>

        <x-slot name="content">
            <p class="-mt-1 mb-4 text-sm text-slate-500">
                {{ __('Record maintenance, a repair or an improvement on') }}
                <span class="font-semibold text-slate-700">{{ $costAssetName }}</span>.
                {{ __('This is logged as an expense and paid from the chosen account.') }}
            </p>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="cost-type" value="{{ __('Type') }}" />
                    <select id="cost-type" wire:model.live="costType" 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="maintenance">{{ __('Maintenance') }}</option>
                        <option value="repair">{{ __('Repair') }}</option>
                        <option value="improvement">{{ __('Improvement') }}</option>
                    </select>
                    <x-input-error for="costType" class="mt-2" />
                </div>

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

                <div>
                    <x-label for="cost-currency" value="{{ __('Currency') }}" />
                    <select id="cost-currency" wire:model.live="cost_currency" 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 }}, {{ $currency->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="cost_currency" class="mt-2" />
                </div>

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

                <div class="sm:col-span-2">
                    <x-label for="cost-account" value="{{ __('Paid from') }}" />
                    <select id="cost-account" wire:model="cost_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 account') }}</option>
                        @foreach ($fundAccounts->where('currency_code', strtoupper($cost_currency)) as $account)
                            <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                        @endforeach
                    </select>
                    <x-input-error for="cost_fund_account_id" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="cost-description" value="{{ __('Description (optional)') }}" />
                    <x-input id="cost-description" type="text" class="mt-1 block w-full" wire:model="cost_description" placeholder="{{ __('e.g. Printhead replacement') }}" />
                    <x-input-error for="cost_description" class="mt-2" />
                </div>

                <div class="sm:col-span-2 space-y-2">
                    @if ($costType === 'improvement')
                        <label class="flex items-center gap-2 text-sm text-slate-600">
                            <input type="checkbox" wire:model="cost_capitalize" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            {{ __('Capitalise, add this cost to the asset\'s book value') }}
                        </label>
                    @endif
                    <label class="flex items-center gap-2 text-sm text-slate-600">
                        <input type="checkbox" wire:model="cost_mark_under_repair" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Mark the asset as "under repair"') }}
                    </label>
                </div>
            </div>
        </x-slot>

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

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

    {{-- Dispose modal --}}
    <x-dialog-modal wire:model.live="showDisposeModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Dispose Asset') }}
        </x-slot>

        <x-slot name="content">
            <p class="-mt-1 mb-4 text-sm text-slate-500">
                {{ __('Take') }}
                <span class="font-semibold text-slate-700">{{ $disposeAssetName }}</span>
                {{ __('off the books. Selling records the proceeds as income; the rest are non-cash write-offs.') }}
            </p>

            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="dispose-method" value="{{ __('Method') }}" />
                    <select id="dispose-method" wire:model.live="dispose_method" 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="sold">{{ __('Sold') }}</option>
                        <option value="lost">{{ __('Lost') }}</option>
                        <option value="scrapped">{{ __('Scrapped') }}</option>
                        <option value="donated">{{ __('Donated') }}</option>
                    </select>
                    <x-input-error for="dispose_method" class="mt-2" />
                </div>

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

                @if ($dispose_method === 'sold')
                    <div>
                        <x-label for="dispose-currency" value="{{ __('Currency') }}" />
                        <select id="dispose-currency" wire:model.live="dispose_currency" 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 }}, {{ $currency->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="dispose_currency" class="mt-2" />
                    </div>

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

                    <div class="sm:col-span-2">
                        <x-label for="dispose-account" value="{{ __('Received into') }}" />
                        <select id="dispose-account" wire:model="dispose_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 account') }}</option>
                            @foreach ($fundAccounts->where('currency_code', strtoupper($dispose_currency)) as $account)
                                <option value="{{ $account->id }}">{{ $account->name }} ({{ $account->currency_code }})</option>
                            @endforeach
                        </select>
                        <x-input-error for="dispose_fund_account_id" class="mt-2" />
                    </div>
                @endif

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

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

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

    {{-- Import modal --}}
    <x-dialog-modal wire:model.live="showImportModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('Import Asset Register') }}
        </x-slot>

        <x-slot name="content">
            <p class="-mt-1 mb-4 text-sm text-slate-500">
                {{ __('Sync straight from the Google Sheet, or upload your Asset Register as a CSV / Excel (.xlsx) file. Columns are matched automatically (ID, Asset Name, Category, Date Purchased, Supplier / Source, Cost, Useful Life, Residual Value, Annual Deprn, Deprn to Date, Net Book Value, Notes / Condition, COA Code) and the register is found on any tab. Rows are matched to existing assets by their ID, so re-importing updates rather than duplicates.') }}
            </p>

            {{-- Google Sheets one-click sync --}}
            <div class="mb-5 rounded-xl border border-indigo-100 bg-indigo-50/50 p-4">
                <x-label for="asset-sheet-url" value="{{ __('Sync from Google Sheets') }}" />
                <div class="mt-1 flex flex-col gap-2 sm:flex-row">
                    <input
                        type="text"
                        id="asset-sheet-url"
                        wire:model="assetSheetUrl"
                        placeholder="{{ __('Paste the Google Sheet link…') }}"
                        class="block w-full rounded-xl border-slate-200 bg-white py-2.5 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                    />
                    <x-button
                        wire:click="syncFromGoogleSheet"
                        wire:loading.attr="disabled"
                        wire:target="syncFromGoogleSheet"
                        class="shrink-0 justify-center"
                    >
                        <span wire:loading.remove wire:target="syncFromGoogleSheet">{{ __('Sync now') }}</span>
                        <span wire:loading wire:target="syncFromGoogleSheet">{{ __('Syncing…') }}</span>
                    </x-button>
                </div>
                <p class="mt-2 text-xs text-slate-500">{{ __('The sheet must be shared as "Anyone with the link → Viewer".') }}</p>
                <x-input-error for="assetSheetUrl" class="mt-2" />
            </div>

            <div class="mb-4">
                <button type="button" wire:click="downloadImportTemplate" class="inline-flex items-center gap-1.5 text-sm font-semibold text-indigo-600 transition hover:text-indigo-800">
                    <x-icon name="arrow-down-tray" class="h-4 w-4" />
                    {{ __('Download CSV template') }}
                </button>
            </div>

            <div>
                <x-label for="import-file" value="{{ __('File') }}" />
                <input
                    type="file"
                    id="import-file"
                    wire:model="importFile"
                    accept=".csv,.txt,.xlsx"
                    class="mt-1 block w-full text-sm text-slate-500 file:mr-4 file:rounded-lg file:border-0 file:bg-slate-100 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-700 hover:file:bg-slate-200"
                />
                <x-upload-progress target="importFile" class="mt-2" />
            </div>

            @if ($importResult)
                <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm">
                    <div class="flex flex-wrap gap-x-6 gap-y-1">
                        <span class="font-semibold text-emerald-600">{{ $importResult['created'] }} {{ __('added') }}</span>
                        <span class="font-semibold text-sky-600">{{ $importResult['updated'] }} {{ __('updated') }}</span>
                        <span class="font-semibold text-slate-500">{{ $importResult['skipped'] }} {{ __('skipped') }}</span>
                    </div>
                    @if (! empty($importResult['errors']))
                        <ul class="mt-3 list-disc space-y-1 pl-5 text-rose-600">
                            @foreach ($importResult['errors'] as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            @endif
        </x-slot>

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

            <x-button class="ms-3" wire:click="runImport" wire:loading.attr="disabled" wire:target="runImport,importFile">
                {{ __('Import') }}
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Reset-all confirmation modal --}}
    @if ($canResetData)
        <x-dialog-modal wire:model.live="showResetModal" maxWidth="lg">
            <x-slot name="title">
                {{ __('Reset asset register') }}
            </x-slot>

            <x-slot name="content">
                <div class="rounded-xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-700">
                    <p class="font-semibold">{{ __('This permanently deletes every asset in this workspace.') }}</p>
                    <p class="mt-1">{{ __('All assets and their photos are removed and cannot be recovered. Maintenance costs and disposal proceeds already recorded in Treasury are kept, but unlinked from the deleted assets.') }}</p>
                </div>

                <div class="mt-4">
                    <x-label for="reset-confirm" value="{{ __('Type RESET to confirm') }}" />
                    <input
                        type="text"
                        id="reset-confirm"
                        wire:model="resetConfirm"
                        autocomplete="off"
                        placeholder="RESET"
                        class="mt-1 block w-full rounded-xl border-slate-200 bg-white py-2.5 text-sm text-slate-900 shadow-sm focus:border-rose-500 focus:ring-rose-500"
                    />
                    <x-input-error for="resetConfirm" class="mt-2" />
                </div>
            </x-slot>

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

                <button
                    type="button"
                    wire:click="resetAllAssets"
                    wire:loading.attr="disabled"
                    wire:target="resetAllAssets"
                    class="ms-3 inline-flex items-center gap-2 rounded-xl bg-rose-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-rose-700 disabled:opacity-50"
                >
                    <x-icon name="trash" class="h-4 w-4" />
                    {{ __('Delete everything') }}
                </button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>