@extends('layouts.admin')

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

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

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

    <div class="bg-white rounded-xl shadow-sm border border-[#e5e7eb] p-6 space-y-6">
        <div>
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Invoice <span class="text-red-500">*</span></label>
            <select name="invoice_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 an invoice...</option>
                @foreach($invoices as $inv)
                    <option value="{{ $inv->id }}" {{ (old('invoice_id') == $inv->id || ($invoice && $invoice->id == $inv->id)) ? 'selected' : '' }}>
                        {{ $inv->invoice_number }} - {{ $inv->customer->name }} (Balance: {{ $inv->currency }} {{ number_format($inv->balance, 2) }})
                    </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">Payment Date <span class="text-red-500">*</span></label>
            <input type="date" name="payment_date" required value="{{ old('payment_date', now()->format('Y-m-d')) }}" 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">Payment Method</label>
            <select name="payment_method" id="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="bank_transfer" {{ old('payment_method', 'bank_transfer') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                <option value="credit_card" {{ old('payment_method') == 'credit_card' ? 'selected' : '' }}>Credit Card</option>
                <option value="paypal" {{ old('payment_method') == 'paypal' ? 'selected' : '' }}>PayPal</option>
                <option value="stripe" {{ old('payment_method') == 'stripe' ? 'selected' : '' }}>Stripe</option>
            </select>
        </div>

        <div id="bank-account-field">
            <label class="block text-sm font-medium text-[#111418] text-gray-900 mb-2">Deposit to bank account</label>
            <p class="text-xs text-gray-500 mb-2">Used for banking reports when payment is via bank.</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">Transaction ID</label>
            <input type="text" name="transaction_id" value="{{ old('transaction_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">
        </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.payments.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 Payment <span class="material-symbols-outlined text-lg">save</span>
            </button>
        </div>
    </div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const method = document.getElementById('payment_method');
    const bankWrap = document.getElementById('bank-account-field');
    if (!method || !bankWrap) return;
    const bankMethods = ['bank_transfer', 'account_transfer', 'cheque', 'online_payment'];
    function toggle() {
        bankWrap.classList.toggle('hidden', !bankMethods.includes(method.value));
    }
    method.addEventListener('change', toggle);
    toggle();
});
</script>
@endsection