@props([
    'asset' => null,
    'categories' => [],
    'statuses' => [],
    'methods' => [],
    'departments' => [],
    'custodians' => [],
    'suppliers' => [],
])

@php
    $editing = $asset !== null;

    // Keep a disposed/lost asset's current status selectable even though the
    // list of assignable statuses excludes them.
    $statusOptions = $statuses;

    if ($editing && ! array_key_exists($asset->status, $statusOptions)) {
        $statusOptions[$asset->status] = $asset->status_label;
    }

    $custodianOptions = collect($custodians)->mapWithKeys(fn ($user) => [
        $user->id => $user->designation ? $user->name.' · '.$user->designation : $user->name,
    ])->all();
@endphp

<div class="grid gap-6 lg:grid-cols-2">
    <x-card>
        <div class="mb-5 flex items-center gap-3 border-b border-slate-200 pb-4">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                <x-icon name="cube" size="sm" />
            </span>
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Identification</h2>
                <p class="text-xs text-slate-500">What the asset is and how to recognise it on the floor.</p>
            </div>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <div class="sm:col-span-2">
                <x-form.input name="name" label="Asset name" required maxlength="160" :value="$asset?->name"
                    placeholder="e.g. MRI Scanner — Siemens Magnetom" />
            </div>

            <x-form.select name="category" label="Category" required
                :options="$categories" :value="$asset?->category"
                placeholder="Select a category…" />

            <x-form.input name="serial_number" label="Serial number" maxlength="120" :value="$asset?->serial_number"
                placeholder="Manufacturer serial / tag" />

            <x-form.input name="model" label="Model" maxlength="120" :value="$asset?->model" />
            <x-form.input name="manufacturer" label="Manufacturer" maxlength="120" :value="$asset?->manufacturer" />

            <div class="sm:col-span-2">
                <x-form.textarea name="description" label="Description" rows="2" maxlength="1000" :value="$asset?->description"
                    placeholder="Optional specification or condition notes…" />
            </div>
        </div>
    </x-card>

    <x-card>
        <div class="mb-5 flex items-center gap-3 border-b border-slate-200 pb-4">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                <x-icon name="building" size="sm" />
            </span>
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Deployment</h2>
                <p class="text-xs text-slate-500">Where the asset lives and who is accountable for it.</p>
            </div>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <x-form.select name="department_id" label="Department"
                :options="collect($departments)->pluck('name', 'id')->all()"
                :value="$asset?->department_id"
                placeholder="— Not assigned —" />

            <x-form.input name="location" label="Location" maxlength="160" :value="$asset?->location"
                placeholder="e.g. Radiology wing, room 4" />

            <x-form.select name="custodian_id" label="Custodian"
                :options="$custodianOptions"
                :value="$asset?->custodian_id"
                placeholder="— No custodian —" />

            <x-form.select name="supplier_id" label="Supplier"
                :options="collect($suppliers)->pluck('name', 'id')->all()"
                :value="$asset?->supplier_id"
                placeholder="— Unknown —" />
        </div>
    </x-card>

    <x-card>
        <div class="mb-5 flex items-center gap-3 border-b border-slate-200 pb-4">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                <x-icon name="calculator" size="sm" />
            </span>
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Purchase &amp; depreciation</h2>
                <p class="text-xs text-slate-500">Drives the monthly depreciation schedule.</p>
            </div>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <x-form.input name="purchase_date" label="Purchase date" type="date" :value="$asset?->purchase_date?->format('Y-m-d')" />

            <x-form.input name="purchase_cost" label="Purchase cost" type="number" step="0.01" min="0" required prefix="KShs"
                :value="$asset?->purchase_cost" />

            <x-form.input name="funding_source" label="Funding source" maxlength="120" :value="$asset?->funding_source"
                placeholder="e.g. Donor grant, exchequer" />

            <x-form.input name="useful_life_years" label="Useful life (years)" type="number" min="1" max="60" required
                :value="$asset?->useful_life_years ?? 5"
                hint="Between 1 and 60 years." />

            <x-form.select name="depreciation_method" label="Depreciation method" required
                :options="$methods" :value="$asset?->depreciation_method"
                placeholder="Select a method…" />

            <x-form.input name="residual_value" label="Residual value" type="number" step="0.01" min="0" prefix="KShs"
                :value="$asset?->residual_value"
                hint="Never depreciated; cannot exceed the purchase cost." />
        </div>
    </x-card>

    <x-card>
        <div class="mb-5 flex items-center gap-3 border-b border-slate-200 pb-4">
            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-brand-50 text-brand-600">
                <x-icon name="warning" size="sm" />
            </span>
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Status &amp; disposal</h2>
                <p class="text-xs text-slate-500">Lifecycle state and disposal proceeds, if any.</p>
            </div>
        </div>

        <div class="grid gap-5 sm:grid-cols-2">
            <x-form.select name="status" label="Status" required
                :options="$statusOptions" :value="$asset?->status"
                placeholder="Select a status…" />

            <x-form.input name="disposed_on" label="Disposed on" type="date" :value="$asset?->disposed_on?->format('Y-m-d')" />

            <x-form.input name="disposal_proceeds" label="Disposal proceeds" type="number" step="0.01" min="0" prefix="KShs"
                :value="$asset?->disposal_proceeds" />

            <div class="sm:col-span-2">
                <x-form.textarea name="disposal_notes" label="Disposal notes" rows="2" maxlength="1000" :value="$asset?->disposal_notes"
                    placeholder="How and why the asset left the register…" />
            </div>

            <div class="sm:col-span-2">
                <x-form.textarea name="notes" label="Notes" rows="2" maxlength="1000" :value="$asset?->notes" />
            </div>
        </div>
    </x-card>
</div>

<div class="mt-6 flex items-center justify-end gap-3">
    <a href="{{ $editing ? route('erp.fixed-assets.show', $asset) : route('erp.fixed-assets.index') }}" class="hms-btn-secondary">Cancel</a>
    <button type="submit" class="hms-btn-primary">
        <x-icon name="check" size="sm" />
        {{ $editing ? 'Save changes' : 'Register asset' }}
    </button>
</div>