@extends('layouts.admin')

@section('title', 'Record Income')

@section('page-title', 'Record Income')

@section('content')
<form method="POST" action="{{ route('admin.income.store') }}" class="max-w-3xl mx-auto">
    @csrf

    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Income Date <span class="text-red-500">*</span></label>
                <input type="date" name="income_date" value="{{ old('income_date', now()->format('Y-m-d')) }}" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Account <span class="text-red-500">*</span></label>
                <select name="account_id" required class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">Select account...</option>
                    @foreach($accounts as $account)
                        <option value="{{ $account->id }}" {{ old('account_id') == $account->id ? 'selected' : '' }}>{{ $account->code }} - {{ $account->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Customer</label>
                <select name="customer_id" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">Select customer...</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Payment Method</label>
                <select name="payment_method" id="income_payment_method" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="cash" {{ old('payment_method', 'bank_transfer') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="bank_transfer" {{ old('payment_method', 'bank_transfer') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                    <option value="credit_card" {{ old('payment_method') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                    <option value="paypal" {{ old('payment_method') == 'paypal' ? 'selected' : '' }}>PayPal</option>
                </select>
            </div>
            <div id="income-bank-account-wrap" class="md:col-span-2">
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Bank account</label>
                <p class="text-xs text-gray-500 mb-2">Link this income to a bank account for the transactions report.</p>
                <select name="bank_account_id" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    <option value="">— Not specified —</option>
                    @foreach($bankAccounts ?? [] as $acct)
                        <option value="{{ $acct->id }}" {{ (string) old('bank_account_id') === (string) $acct->id ? 'selected' : '' }}>
                            {{ $acct->bank_name }} — {{ $acct->account_name }} ({{ $acct->currency }})
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Amount <span class="text-red-500">*</span></label>
                <input type="number" name="amount" step="0.01" min="0.01" required value="{{ old('amount') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Tax Amount</label>
                <input type="number" name="tax_amount" step="0.01" min="0" value="{{ old('tax_amount', 0) }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Category</label>
                <input type="text" name="category" value="{{ old('category') }}" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
            </div>
            <div>
                <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Currency</label>
                @php
                    $defaultCurrency = \App\Models\Currency::getDefaultCode();
                    $currencies = \App\Models\Currency::where('is_active', true)->orderBy('is_default', 'desc')->orderBy('name')->get();
                @endphp
                <select name="currency" class="w-full h-11 rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">
                    @foreach($currencies as $currency)
                        <option value="{{ $currency->code }}" {{ old('currency', $defaultCurrency) == $currency->code ? 'selected' : '' }}>
                            {{ $currency->code }} - {{ $currency->name }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Description</label>
            <textarea name="description" rows="3" class="w-full rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">{{ old('description') }}</textarea>
        </div>
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Notes</label>
            <textarea name="notes" rows="3" class="w-full rounded-lg border border-[#dbe0e6] bg-white px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary text-gray-900">{{ old('notes') }}</textarea>
        </div>
        <div class="flex gap-3 pt-4">
            <a href="{{ route('admin.income.index') }}" class="px-6 py-2.5 rounded-lg border border-[#dbe0e6] text-[#617589] font-medium hover:bg-background-light transition-colors">Cancel</a>
            <button type="submit" class="px-8 py-2.5 rounded-lg bg-primary text-white font-bold hover:bg-blue-600 transition-all flex items-center gap-2">
                Record Income <span class="material-symbols-outlined text-lg">save</span>
            </button>
        </div>
    </div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const pm = document.getElementById('income_payment_method');
    const wrap = document.getElementById('income-bank-account-wrap');
    if (!pm || !wrap) return;
    const show = ['bank_transfer'];
    function t() { wrap.classList.toggle('hidden', !show.includes(pm.value)); }
    pm.addEventListener('change', t);
    t();
});
</script>
@endsection