@extends('layouts.aura-main')

@section('main-content')
<div class="pb-20 max-w-3xl mx-auto">
    
    <div class="fixed top-5 right-5 z-[100] space-y-3 w-80">
        @if ($errors->any())
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 8000)" 
                 class="bg-rose-50 border-l-4 border-rose-500 p-4 shadow-xl rounded-sm transition-all duration-300">
                <div class="flex justify-between items-start">
                    <p class="text-[11px] font-black text-rose-700 uppercase tracking-widest">Validation Error</p>
                    <button @click="show = false" class="text-rose-400 hover:text-rose-600 font-black">&times;</button>
                </div>
                <ul class="mt-2 list-disc list-inside text-[10px] text-rose-600 font-bold">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if (session('error'))
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 8000)" 
                 class="bg-amber-50 border-l-4 border-amber-500 p-4 shadow-xl rounded-sm">
                <div class="flex justify-between">
                    <p class="text-[11px] font-black text-amber-700 uppercase tracking-widest">System Alert</p>
                    <button @click="show = false" class="text-amber-400 hover:text-amber-600 font-black">&times;</button>
                </div>
                <p class="mt-1 text-[10px] text-amber-600 font-bold leading-relaxed">{{ session('error') }}</p>
            </div>
        @endif
    </div>

    <form action="{{ route('invoice.payments.store', $invoice->id) }}" method="POST">
        @csrf
        
        <div class="flex justify-between items-end mb-8 border-b border-slate-200 pb-6">
            <div>
                <h1 class="text-2xl font-black text-slate-900 tracking-tight uppercase">Receive Payment</h1>
                <p class="text-[12px] font-bold text-indigo-600 uppercase tracking-tighter italic">Process remittance for {{ $invoice->invoice_no }}</p>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('invoices.show', $invoice->id) }}" class="px-4 py-2 text-[11px] font-black text-slate-400 hover:text-slate-600 transition uppercase tracking-widest">Cancel</a>
                <button type="submit" class="bg-emerald-600 text-white px-8 py-2 rounded-sm text-[11px] font-black shadow-lg hover:bg-emerald-700 transition uppercase tracking-widest">
                    Post payment
                </button>
            </div>
        </div>

        <div class="space-y-6">
            
            <div class="bg-white border border-slate-300 rounded-sm shadow-sm p-8 border-l-4 border-l-indigo-500">
                <div class="flex items-center gap-2 mb-6 border-b border-slate-100 pb-4">
                    <div class="w-1.5 h-4 bg-indigo-500 rounded-full"></div>
                    <h2 class="text-[11px] font-black text-slate-700 uppercase tracking-widest">Outstanding Balance</h2>
                </div>

                <div class="flex items-baseline gap-4">
                    <span class="text-4xl font-black font-mono text-slate-900 tracking-tighter">K{{ number_format($invoice->outstanding_balance, 2) }}</span>
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest italic">Current due from {{ $invoice->customer->name }}</span>
                </div>
            </div>

            <div class="bg-white border border-slate-300 rounded-sm shadow-sm p-8">
                <div class="flex items-center gap-2 mb-8 border-b border-slate-100 pb-4">
                    <div class="w-1.5 h-4 bg-emerald-500 rounded-full"></div>
                    <h2 class="text-[11px] font-black text-slate-700 uppercase tracking-widest">Transaction details</h2>
                </div>

                <div class="grid grid-cols-2 gap-8 mb-8">
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-2 uppercase tracking-widest">Amount received (K)</label>
                        <input type="number" step="0.01" name="amount_received" 
                            value="{{ old('amount_received', $invoice->outstanding_balance) }}" 
                            max="{{ $invoice->outstanding_balance }}"
                            required class="w-full border-slate-300 rounded-sm text-lg font-mono font-bold text-emerald-700 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 outline-none bg-white px-4 py-3 transition-all duration-200">
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-2 uppercase tracking-widest">Transaction Date</label>
                        <input type="date" name="transaction_date" value="{{ old('transaction_date', date('Y-m-d')) }}" required 
                            class="w-full border-slate-300 rounded-sm text-sm font-bold text-slate-700 px-4 py-3 bg-white focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 outline-none transition-all duration-200">
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-8">
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-2 uppercase tracking-widest">Deposit To Account</label>
                        <div class="relative">
                            <select name="cash_bank_account_id" required 
                                class="w-full border-slate-300 rounded-sm text-sm font-bold text-slate-700 px-4 py-3 bg-white focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 outline-none appearance-none transition-all duration-200">
                                <option value="">-- Select Cash/Bank --</option>
                                @foreach($bankAccounts as $account)
                                    <option value="{{ $account->id }}" {{ old('cash_bank_account_id') == $account->id ? 'selected' : '' }}>
                                        {{ $account->name }} ({{ $account->code }})
                                    </option>
                                @endforeach
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-slate-400">
                                <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
                            </div>
                        </div>
                    </div>
                    <div>
                        <label class="block text-[10px] font-black text-slate-500 mb-2 uppercase tracking-widest">Reference / Receipt Number</label>
                        <input type="text" name="reference" value="{{ old('reference') }}" placeholder="e.g. EFT-ZANACO-102" required 
                            class="w-full border-slate-300 rounded-sm text-sm font-bold text-slate-700 px-4 py-3 bg-white focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 outline-none transition-all duration-200">
                    </div>
                </div>
            </div>

            <div class="bg-white border border-slate-300 rounded-sm p-8 shadow-sm">
                <div class="flex items-center gap-2 mb-4">
                    <div class="w-1.5 h-4 bg-slate-300 rounded-full"></div>
                    <label class="text-[10px] font-black text-slate-500 uppercase tracking-widest">Payment Remarks</label>
                </div>
                <textarea name="memo" rows="3" 
                    class="w-full border-slate-300 rounded-sm text-xs italic p-4 bg-white text-slate-600 focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/5 outline-none transition-all duration-200" 
                    placeholder="Describe the nature of this payment if necessary...">{{ old('memo') }}</textarea>
            </div>
            
        </div>
    </form>
</div>
@endsection