@extends('layouts.app')

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

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Collect Fees</h1>
            <p class="text-xs text-muted-foreground">Search a student, allocate the payment across outstanding fees and issue a receipt</p>
        </div>

        <form method="get" class="flex gap-2">
            <div class="relative flex-1">
                <svg class="pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
                <input name="q" value="{{ $q }}" placeholder="Search admission no or student name..."
                       class="h-9 w-full rounded-lg border border-input bg-transparent pl-8 pr-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <button class="rounded-lg bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90">Search</button>
        </form>

        @if ($student)
<section class="rounded-xl border border-border bg-card p-4">
            <h2 class="text-sm font-semibold">M-Pesa STK Push</h2>
            <p class="mt-1 text-xs text-muted-foreground">Send a simulated STK prompt to the payer's phone. The credit lands in Incoming Payments and is reconciled (receipt issued) there.</p>
            @if ($student)
                <form method="post" action="{{ route('finance.collect.stk') }}" class="mt-3 grid gap-3 md:grid-cols-3">
                    @csrf
                    <input type="hidden" name="student_id" value="{{ $student->id }}">
                    <label class="text-xs text-muted-foreground">Amount (KES)
                        <input type="number" name="amount" min="1" step="0.01" 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">Payer M-Pesa phone
                        <input name="phone" placeholder="e.g. 0712345678" 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>
                    <div class="flex items-end">
                        <button class="h-9 w-full rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Send STK Push</button>
                    </div>
                </form>
            @else
                <p class="mt-2 text-xs text-muted-foreground">Search and select a student above to send an STK push.</p>
            @endif
        </section>

        <section class="rounded-xl border border-border bg-card p-4">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-sm font-semibold">{{ $student->full_name }}</h2>
                        <p class="text-xs text-muted-foreground">{{ $student->admission_no }} · {{ $student->class_name }} {{ $student->stream }} · {{ $student->category }}</p>
                    </div>
                    @if ($invoice)
                        <p class="text-sm">Balance due: <strong class="tabular-nums text-destructive">KES {{ number_format($invoice->total_balance, 2) }}</strong></p>
                    @endif
                </div>

                @if ($invoice && $invoice->total_balance > 0)
                    @php
                        $openItems = $items->where('balance', '>', 0)->values();
                    @endphp
                    <form method="post" action="{{ route('finance.collect.store') }}" class="mt-4">
                        @csrf
                        <input type="hidden" name="student_id" value="{{ $student->id }}">
                        <input type="hidden" name="balance" id="hf-balance" value="{{ $invoice->total_balance }}">
                        <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">Votehead</th>
                                    <th class="px-3 py-2 text-right font-medium">Balance</th>
                                    <th class="px-3 py-2 text-right font-medium">Amount to apply</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($openItems as $i => $it)
                                    <tr class="border-b">
                                        <td class="px-3 py-2">{{ $it->votehead_name }}</td>
                                        <td class="px-3 py-2 text-right tabular-nums" data-bal="{{ $it->balance }}">{{ number_format($it->balance, 2) }}</td>
                                        <td class="px-3 py-2 text-right">
                                            <input type="number" name="alloc[{{ $it->votehead_name }}]" id="alloc-{{ $loop->index }}" min="0" step="0.01" value="0"
                                                   class="alloc-input h-8 w-32 rounded-lg border border-input bg-transparent px-2 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <div class="mt-4 grid gap-3 md:grid-cols-4">
                            <label class="text-xs text-muted-foreground">Amount Paid
                                <input type="number" name="amount" id="amount-paid" min="1" step="0.01" required
                                       class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-right text-sm tabular-nums outline-none focus-visible:border-ring">
                            </label>
                            <label class="text-xs text-muted-foreground">Mode of Payment
                                <select name="mode" class="mt-1 h-9 w-full rounded-lg border border-input bg-transparent px-3 text-sm outline-none">
                                    @foreach ($modes as $m)
                                        <option value="{{ $m }}">{{ $m }}</option>
                                    @endforeach
                                </select>
                            </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 focus-visible:border-ring">
                            </label>
                            <div class="flex items-end">
                                <button type="button" onclick="autoSpread()" class="h-9 w-full rounded-lg border border-border px-3 text-sm hover:bg-accent">Auto Balance</button>
                            </div>
                        </div>
                        <button class="mt-4 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Record Payment & Print Receipt</button>
                    </form>
                @else
                    <p class="mt-3 text-xs text-muted-foreground">No outstanding balance for this student.</p>
                @endif
            </section>
        @elseif ($q !== '')
            <p class="rounded-xl border border-border bg-card p-4 text-sm text-muted-foreground">No student found matching "{{ $q }}".</p>
        @endif

        <section class="rounded-xl border border-border bg-card p-4">
            <h2 class="text-sm font-semibold">Recent Receipts</h2>
            <table class="mt-3 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">Receipt No.</th>
                        <th class="px-3 py-2 text-left font-medium">Student</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>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($recentReceipts as $r)
                        <tr class="border-b">
                            <td class="px-3 py-2 font-mono text-xs">{{ $r->receipt_no }}</td>
                            <td class="px-3 py-2">{{ $r->student_name }}</td>
                            <td class="px-3 py-2">{{ $r->date }}</td>
                            <td class="px-3 py-2">{{ $r->mode }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($r->amount, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    </div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.addEventListener('input', (e) => {
            if (e.target.id === 'amount-paid') {
                const amt = parseFloat(e.target.value) || 0;
                const balance = parseFloat(document.getElementById('hf-balance').value) || 0;
                if (amt !== balance) {
                    const inputs = document.querySelectorAll('.alloc-input');
                    inputs.forEach((inp) => { inp.value = '0'; });
                }
            }
        });
        window.autoSpread = () => {
            const amt = parseFloat(document.getElementById('amount-paid').value) || 0;
            let remaining = amt;
            document.querySelectorAll('tbody tr').forEach((row) => {
                const bal = parseFloat(row.querySelector('td[data-bal]').dataset.bal) || 0;
                const input = row.querySelector('.alloc-input');
                if (bal <= 0 || remaining <= 0) { input.value = '0'; return; }
                const take = Math.min(remaining, bal);
                input.value = take.toFixed(2);
                remaining -= take;
            });
        };
    });
</script>
@endpush