@props([
    'expense' => null,
    'categories' => [],
    'departments' => [],
    'methods' => [],
])

@php
    $editing = $expense !== null;
@endphp

@if ($editing && $expense->status === 'rejected' && $expense->rejection_reason)
    <div class="mb-6 rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-700">
        <p class="font-semibold">This expense was rejected.</p>
        <p>{{ $expense->rejection_reason }}</p>
        <p class="mt-1 text-xs text-rose-600">Correct the details and resubmit it for approval.</p>
    </div>
@endif

<div class="grid gap-6 lg:grid-cols-3">
    <div class="lg:col-span-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="receipt" size="sm" />
                </span>
                <div>
                    <h2 class="text-sm font-semibold text-slate-900">Expense details</h2>
                    <p class="text-xs text-slate-500">What was spent, on which budget line, and when.</p>
                </div>
            </div>

            <div class="grid gap-5 sm:grid-cols-2">
                <x-form.select name="expense_category_id" label="Category" required
                    :options="collect($categories)->pluck('name', 'id')->all()"
                    :value="$expense?->expense_category_id"
                    placeholder="Select an expense category…" />

                <x-form.select name="department_id" label="Department"
                    :options="collect($departments)->pluck('name', 'id')->all()"
                    :value="$expense?->department_id"
                    placeholder="— Hospital-wide / none —" />

                <div class="sm:col-span-2">
                    <x-form.input name="description" label="Description" required maxlength="500"
                        :value="$expense?->description"
                        placeholder="e.g. Oxygen refill for ICU cylinders — October" />
                </div>

                <x-form.input name="amount" label="Amount" type="number" step="0.01" min="0.01" required prefix="KShs"
                    :value="$expense?->amount"
                    hint="Net amount before any tax." />

                <x-form.input name="tax_amount" label="Tax / VAT" type="number" step="0.01" min="0" prefix="KShs"
                    :value="$expense?->tax_amount"
                    hint="Optional — added to the amount to give the total." />

                <x-form.input name="expense_date" label="Expense date" type="date" required
                    :value="old('expense_date', $expense?->expense_date?->format('Y-m-d') ?? now()->format('Y-m-d'))" />
            </div>
        </x-card>
    </div>

    <div class="space-y-6">
        <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="cash" size="sm" />
                </span>
                <div>
                    <h2 class="text-sm font-semibold text-slate-900">Payment information</h2>
                    <p class="text-xs text-slate-500">How the expense was or will be settled.</p>
                </div>
            </div>

            <div class="grid gap-5">
                <x-form.select name="payment_method" label="Payment method" required
                    :options="$methods"
                    :value="$expense?->payment_method"
                    placeholder="Select a method…" />

                <x-form.input name="payee" label="Payee" maxlength="160"
                    :value="$expense?->payee"
                    placeholder="Supplier or staff member" />

                <x-form.input name="reference_number" label="Reference number" maxlength="120"
                    :value="$expense?->reference_number"
                    placeholder="Invoice, receipt or M-Pesa code" />
            </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="chat" size="sm" />
                </span>
                <div>
                    <h2 class="text-sm font-semibold text-slate-900">Notes &amp; workflow</h2>
                    <p class="text-xs text-slate-500">Anything the approver should know.</p>
                </div>
            </div>

            <x-form.textarea name="notes" label="Notes" rows="3" maxlength="2000"
                :value="$expense?->notes"
                placeholder="Optional context for the approval chain…" />

            <div class="mt-5 border-t border-slate-200 pt-5">
                <input type="hidden" name="submit_for_approval" value="0">
                <x-form.checkbox name="submit_for_approval" label="Submit for approval"
                    hint="Unchecked saves the expense as a draft you can finish later."
                    :checked="(bool) old('submit_for_approval', $expense ? $expense->status === 'pending_approval' : true)" />
            </div>
        </x-card>
    </div>
</div>

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