@extends('layouts.app') @section('page_title','Transactions') @section('content')
<div class="flex flex-col lg:flex-row justify-between gap-3 mb-4"><div><h2 class="text-[18px] font-semibold">Transactions</h2><p class="fp-muted text-[11px] mt-1">Track and correct every income, expense and savings movement.</p></div><button type="button" onclick="openQuickAdd()" class="fp-btn fp-primary">＋ Quick Add</button></div>
<div class="fp-card p-4 mb-4"><form class="grid md:grid-cols-2 xl:grid-cols-7 gap-2"><input name="q" value="{{request('q')}}" class="fp-input" placeholder="Search description/reference"><select name="type" class="fp-input"><option value="">All Types</option>@foreach(['income','expense','savings','savings_withdrawal'] as $x)<option value="{{$x}}" {{$x===request('type')?'selected':''}}>{{str_replace('_',' ',ucfirst($x))}}</option>@endforeach</select><select name="category_id" class="fp-input"><option value="">All Categories</option>@foreach($categories as $c)<option value="{{$c->id}}" {{$c->id==request('category_id')?'selected':''}}>{{$c->name}} ({{ucfirst($c->type)}})</option>@endforeach</select><select name="account_id" class="fp-input"><option value="">All Accounts</option>@foreach($accounts as $a)<option value="{{$a->id}}" {{$a->id==request('account_id')?'selected':''}}>{{$a->name}}</option>@endforeach</select><input type="date" name="from" value="{{request('from')}}" class="fp-input"><input type="date" name="to" value="{{request('to')}}" class="fp-input"><div class="flex gap-2"><button class="fp-btn fp-primary flex-1">Filter</button><a href="{{route('transactions.index')}}" class="fp-btn fp-soft">Clear</a></div></form></div>
<div class="fp-card overflow-hidden"><div class="overflow-x-auto"><table class="fp-table w-full"><thead><tr><th>Date</th><th>Type</th><th>Category</th><th>Description</th><th>Account</th><th>Amount</th><th>Actions</th></tr></thead><tbody>@forelse($transactions as $t)<tr>
    
    <td class="whitespace-nowrap min-w-[90px]">
    {{$t->transaction_date->format('d M Y')}}
    </td>
    
    <td><span class="px-2 py-1 rounded text-[9px] bg-slate-100 dark:bg-slate-800">{{ucfirst($t->type)}}</span></td><td>{{$t->category?->name??'—'}}</td><td>{{$t->description??'—'}} @if($t->attachments->count())<span title="Attachments">📎</span>@endif</td><td>{{$t->account?->name}}</td><td class="tx-amount money font-semibold whitespace-nowrap">{{$t->type==='income'||$t->type==='transfer_in'?'+':'-'}} ৳ {{number_format(abs($t->amount),0)}}</td><td><div class="flex gap-1"><a href="{{route('transactions.edit',$t)}}" class="fp-soft px-2 py-1 rounded text-[10px]">Edit</a><form method="post" action="{{route('transactions.duplicate',$t)}}">@csrf<button class="fp-soft px-2 py-1 rounded text-[10px]">Copy</button></form><form method="post" action="{{route('transactions.destroy',$t)}}" onsubmit="return confirm('Delete this transaction? The account balance will be corrected automatically.')">@csrf @method('DELETE')<button class="px-2 py-1 rounded text-[10px] text-red-600 bg-red-50">Delete</button></form></div></td></tr>@empty<tr><td colspan="7" class="text-center fp-muted py-12">No transactions found.</td></tr>@endforelse</tbody></table></div><div class="p-4">{{$transactions->withQueryString()->links()}}</div></div>
<div id="quickAddModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 p-4"><div class="bg-white dark:bg-[#111a2b] rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto p-6"><div class="flex justify-between items-center mb-4"><div><h2 class="text-lg font-semibold">Quick Add</h2></div><button type="button" onclick="closeQuickAdd()" class="text-2xl text-slate-400">×</button></div><form method="post" action="{{route('transactions.store')}}" class="grid md:grid-cols-2 gap-3">@csrf<input type="hidden" name="quick_add" value="1"><input type="hidden" name="return_to" value=""><div><label class="text-[11px] font-semibold">Type</label><select name="type" class="fp-input mt-1" required><option value="income">Income</option><option value="expense">Expense</option><option value="savings">Savings</option></select></div><div><label class="text-[11px] font-semibold">Amount</label><input name="amount" type="number" step="0.01" min="0.01" class="fp-input mt-1" required></div><div><label class="text-[11px] font-semibold">Account</label><select name="account_id" class="fp-input mt-1" required>@foreach($accounts as $a)<option value="{{$a->id}}">{{$a->name}} — ৳ {{number_format($a->current_balance,2)}}</option>@endforeach</select></div><div><label class="text-[11px] font-semibold">Category</label><select name="category_id" id="quickAddCategory" class="fp-input mt-1"><option value="">None</option>@foreach($categories as $c)<option value="{{$c->id}}" data-category-type="{{$c->type}}">{{$c->name}} ({{ucfirst($c->type)}})</option>@endforeach</select></div><div><label class="text-[11px] font-semibold">Date</label><input name="transaction_date" type="date" value="{{today()->toDateString()}}" class="fp-input mt-1" required></div><div class="hidden md:block">
    <label class="text-[11px] font-semibold">Reference</label>
    <input
        name="reference"
        class="fp-input mt-1"
        placeholder="Optional"
    >
</div><div class="md:col-span-2"><label class="text-[11px] font-semibold">Description</label><input name="description" class="fp-input mt-1" placeholder="What was this transaction for?"></div><div class="md:col-span-2"><label class="text-[11px] font-semibold">Notes</label><textarea name="notes" rows="1" class="fp-input mt-1" placeholder="Optional notes"></textarea></div><div class="md:col-span-2 flex justify-end gap-2"><button type="button" onclick="closeQuickAdd()" class="fp-btn fp-soft">Cancel</button><button class="fp-btn fp-primary">Save Transaction</button></div></form></div></div>
@endsection
@push('scripts')
<script>
function openQuickAdd(){
    const m=document.getElementById('quickAddModal');
    if(!m) return;

    m.classList.remove('hidden');
    m.classList.add('flex');

    if(typeof setQuickAddReturnUrl === 'function'){
        setQuickAddReturnUrl(m);
    }

    filterQuickAddCategories();
}
function closeQuickAdd(){
    const m=document.getElementById('quickAddModal');
    m.classList.add('hidden');
    m.classList.remove('flex');
}
function filterQuickAddCategories(){
    const modal=document.getElementById('quickAddModal');
    if(!modal) return;
    const typeSelect=modal.querySelector('select[name="type"]');
    const categorySelect=document.getElementById('quickAddCategory');
    if(!typeSelect || !categorySelect) return;

    const selectedType=(typeSelect.value || '').toLowerCase();

    Array.from(categorySelect.options).forEach(function(option){
        if(option.value===''){
            option.hidden=false;
            return;
        }

        const categoryType=(option.dataset.categoryType || '').toLowerCase();

            option.hidden = categoryType !== selectedType;
    });

    const selected=categorySelect.options[categorySelect.selectedIndex];
    if(selected && selected.hidden){
        categorySelect.value='';
    }
}

document.addEventListener('DOMContentLoaded', function(){
    const modal=document.getElementById('quickAddModal');
    if(modal){
        const typeSelect=modal.querySelector('select[name="type"]');
        if(typeSelect) typeSelect.addEventListener('change', filterQuickAddCategories);
        filterQuickAddCategories();
    }
    if(new URLSearchParams(window.location.search).get('quick_add')==='1') openQuickAdd();
});
</script>
@endpush