@extends('layouts.app')

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

@section('content')
    @php
        $groups = [
            'Donations' => ['Donations & Grants'],
            'Events' => ['Event Revenue', 'Fundraising'],
            'Facility Hire' => ['Facility Hire Income'],
            'Canteen' => ['Canteen Sales', 'Vending Income'],
            'Other' => ['Miscellaneous Income', 'Interest Income'],
        ];
    @endphp
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Collect Income</h1>
            <p class="text-xs text-muted-foreground">Record non-fee income such as donations, events and facility hire</p>
        </div>

        <div class="grid grid-cols-3 gap-3">
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Total Income</p>
                <p class="text-lg font-semibold tabular-nums">KES {{ number_format($summary['total'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Records</p>
                <p class="text-lg font-semibold tabular-nums">{{ $summary['count'] }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Top Group</p>
                <p class="text-lg font-semibold">
                    {{ $summary['groups']->sortByDesc('total')->first()->group ?? '—' }}
                </p>
            </div>
        </div>

        <details class="rounded-xl border border-border bg-card p-4">
            <summary class="cursor-pointer text-sm font-semibold text-muted-foreground hover:text-foreground">+ Record Income</summary>
            <form method="post" action="{{ route('finance.income.store') }}" class="mt-4 grid gap-3 md:grid-cols-2">
                @csrf
                <label class="text-xs text-muted-foreground">Group
                    <select name="group" id="inc-group" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach (array_keys($groups) as $g)
                            <option value="{{ $g }}">{{ $g }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground">Ledger
                    <select name="ledger" id="inc-ledger" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach ($groups['Donations'] as $l)
                            <option value="{{ $l }}">{{ $l }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground">Amount
                    <input type="number" name="amount" min="1" required class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                </label>
                <label class="text-xs text-muted-foreground">Received From
                    <input type="text" name="received_from" required placeholder="e.g. Parent Association" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Date
                    <input type="date" name="date" value="{{ now()->toDateString() }}" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <label class="text-xs text-muted-foreground">Mode of Payment
                    <select name="mode_of_payment" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                        @foreach (['Cash', 'Cheque', 'Bank Transfer', 'M-Pesa'] as $m)
                            <option value="{{ $m }}">{{ $m }}</option>
                        @endforeach
                    </select>
                </label>
                <label class="text-xs text-muted-foreground md:col-span-2">Description
                    <input type="text" name="description" placeholder="What was this income for?" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                </label>
                <div class="md:col-span-2">
                    <button class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Record Income</button>
                </div>
            </form>
        </details>

        <section class="rounded-xl border border-border bg-card p-4">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b text-xs uppercase text-muted-foreground">
                        <th class="px-3 py-2 text-left font-medium">Ref</th>
                        <th class="px-3 py-2 text-left font-medium">Received From</th>
                        <th class="px-3 py-2 text-left font-medium">Ledger</th>
                        <th class="px-3 py-2 text-left font-medium">Date</th>
                        <th class="px-3 py-2 text-left font-medium">Mode</th>
                        <th class="px-3 py-2 text-right font-medium">Amount</th>
                        <th class="px-3 py-2 text-right font-medium">Receipt</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($records as $r)
                        <tr class="border-b">
                            <td class="px-3 py-2 font-mono text-xs">{{ $r->invoice_ref }}</td>
                            <td class="px-3 py-2 font-medium">{{ $r->received_from }}</td>
                            <td class="px-3 py-2 text-xs">{{ $r->group }} · {{ $r->ledger }}</td>
                            <td class="px-3 py-2">{{ $r->date }}</td>
                            <td class="px-3 py-2">{{ $r->mode_of_payment }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($r->amount, 2) }}</td>
                            <td class="px-3 py-2 text-right">
                                <a href="{{ route('finance.print', ['kind' => 'income', 'id' => $r->id]) }}" target="_blank" class="text-xs text-primary hover:underline">PDF</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const groups = @json($groups);
        const g = document.getElementById('inc-group');
        const l = document.getElementById('inc-ledger');
        const render = () => {
            l.innerHTML = groups[g.value].map((lg) => `<option value="${lg}">${lg}</option>`).join('');
        };
        g.addEventListener('change', render);
    });
</script>
@endpush