@extends('layouts.app')
@section('page-title', 'New Transaction')
@section('content')
    <div class="card" style="max-width: 820px;">
        <h3 class="card-title">Record a Transaction</h3>
        <form method="POST" action="{{ route('transactions.store') }}">
            @csrf
            <div class="form-grid">
                <div>
                    <label for="type">Type *</label>
                    <select id="type" name="type" required>
                        <option value="income" {{ old('type')==='income'?'selected':'' }}>Income (money in)</option>
                        <option value="expense" {{ old('type')==='expense'?'selected':'' }}>Expense (money out)</option>
                    </select>
                </div>
                <div>
                    <label for="source">Source *</label>
                    <select id="source" name="source" required>
                        @foreach(['linked_bank' => 'Linked Bank', 'payfast' => 'PayFast', 'manual' => 'Manual entry', 'invoice' => 'Invoice payment', 'refund' => 'Refund', 'other' => 'Other'] as $k=>$v)
                            <option value="{{ $k }}" {{ old('source')===$k?'selected':'' }}>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-grid">
                <div>
                    <label for="bank_account_id">Bank Account *</label>
                    <select id="bank_account_id" name="bank_account_id" required>
                        <option value="">— select —</option>
                        @foreach($bankAccounts as $b)
                            <option value="{{ $b->id }}" {{ old('bank_account_id')==$b->id?'selected':'' }}>{{ $b->name }} ({{ $b->bank_name }})</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="transaction_date">Date *</label>
                    <input id="transaction_date" type="date" name="transaction_date" value="{{ old('transaction_date', date('Y-m-d')) }}" required>
                </div>
            </div>
            <div class="form-grid">
                <div>
                    <label for="amount">Amount (PKR) *</label>
                    <input id="amount" type="number" step="0.01" name="amount" value="{{ old('amount') }}" required min="0.01">
                </div>
                <div>
                    <label for="reference">Reference / Txn ID</label>
                    <input id="reference" type="text" name="reference" value="{{ old('reference') }}">
                </div>
            </div>
            <div class="form-row">
                <label for="counterparty">Counterparty (customer/supplier)</label>
                <input id="counterparty" type="text" name="counterparty" value="{{ old('counterparty') }}">
            </div>

            <hr style="border:none; border-top:1px solid var(--slate-200); margin: 16px 0;">
            <div class="muted" style="margin-bottom:8px;">Optional — link this transaction to a voucher product (auto-updates inventory):</div>
            <div class="form-grid">
                <div>
                    <label for="voucher_product_id">Voucher Product</label>
                    <select id="voucher_product_id" name="voucher_product_id">
                        <option value="">— none —</option>
                        @foreach($voucherProducts as $v)
                            <option value="{{ $v->id }}" {{ old('voucher_product_id')==$v->id?'selected':'' }}>{{ $v->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="voucher_quantity">Voucher Quantity</label>
                    <input id="voucher_quantity" type="number" min="1" name="voucher_quantity" value="{{ old('voucher_quantity') }}">
                </div>
            </div>

            <div class="form-row">
                <label for="description">Description / Notes</label>
                <textarea id="description" name="description" rows="3">{{ old('description') }}</textarea>
            </div>

            <div style="display:flex; gap:8px; margin-top:16px;">
                <button type="submit" class="btn btn-primary">Save transaction</button>
                <a href="{{ route('transactions.index') }}" class="btn">Cancel</a>
            </div>
        </form>
    </div>
@endsection