@csrf

<div class="grid gap-4 md:grid-cols-2">
    <div>
        <label for="transaction_date" class="label">Date</label>
        <input id="transaction_date" name="transaction_date" type="date"
            value="{{ old('transaction_date', isset($transaction) ? $transaction->transaction_date->format('Y-m-d') : now()->format('Y-m-d')) }}"
            required class="input">
        @error('transaction_date') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div>
        <label for="type" class="label">Type</label>
        <select id="type" name="type" required class="input">
            @foreach($types as $type)
                <option value="{{ $type }}" @selected(old('type', $transaction->type ?? '') === $type)>
                    {{ ucfirst(str_replace('_', ' ', $type)) }}
                </option>
            @endforeach
        </select>
        @error('type') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div class="md:col-span-2">
        <label for="title" class="label">Title</label>
        <input id="title" name="title" type="text" value="{{ old('title', $transaction->title ?? '') }}" required class="input">
        @error('title') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div>
        <label for="category" class="label">Category</label>
        <input id="category" name="category" type="text" value="{{ old('category', $transaction->category ?? '') }}" required class="input">
        @error('category') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div>
        <label for="amount" class="label">Amount</label>
        <input id="amount" name="amount" type="number" min="0" step="0.01" value="{{ old('amount', $transaction->amount ?? '') }}" required class="input">
        @error('amount') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div>
        <label for="paid" class="label">Paid</label>
        <input id="paid" name="paid" type="number" min="0" step="0.01" value="{{ old('paid', $transaction->paid ?? '0') }}" class="input">
        @error('paid') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>

    <div>
        <label for="remaining" class="label">Remaining</label>
        <input id="remaining" name="remaining" type="number" min="0" step="0.01" value="{{ old('remaining', $transaction->remaining ?? '0') }}" class="input">
        @error('remaining') <p class="mt-1 text-sm text-rose-600">{{ $message }}</p> @enderror
    </div>
</div>

<div class="mt-6 flex flex-wrap gap-3">
    <button type="submit" class="btn-primary">{{ $buttonText }}</button>
    <a href="{{ route('transactions.index') }}" class="btn-secondary">Cancel</a>
</div>