@extends('layouts.app')

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

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Payment Reports</h1>
            <p class="text-xs text-muted-foreground">Fees collection summaries by class and payment mode</p>
        </div>

        <div class="grid grid-cols-4 gap-3">
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Invoiced</p>
                <p class="text-lg font-semibold tabular-nums">KES {{ number_format($totals['invoiced'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Collected</p>
                <p class="text-lg font-semibold tabular-nums text-primary">KES {{ number_format($totals['collected'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Outstanding</p>
                <p class="text-lg font-semibold tabular-nums text-destructive">KES {{ number_format($totals['outstanding'], 2) }}</p>
            </div>
            <div class="rounded-xl border border-border bg-card p-3">
                <p class="text-xs text-muted-foreground">Receipts (valid)</p>
                <p class="text-lg font-semibold tabular-nums">KES {{ number_format($totals['receipts'], 2) }}</p>
            </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-sm font-semibold">By Class</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">Class</th>
                            <th class="px-3 py-2 text-right font-medium">Invoiced</th>
                            <th class="px-3 py-2 text-right font-medium">Collected</th>
                            <th class="px-3 py-2 text-right font-medium">Balance</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($byClass as $c)
                            <tr class="border-b">
                                <td class="px-3 py-2 font-medium">{{ $c->class_name }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($c->invoiced, 2) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($c->paid, 2) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums {{ $c->balance > 0 ? 'text-destructive' : '' }}">KES {{ number_format($c->balance, 2) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </section>

            <section class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-sm font-semibold">By Payment Mode</h2>
                @foreach ($modes as $m)
                    <div class="mt-3 flex items-center justify-between border-b py-2 text-sm last:border-0">
                        <span class="font-medium">{{ $m->mode }}</span>
                        <span class="text-muted-foreground">{{ $m->count }} receipts</span>
                        <span class="tabular-nums font-medium">KES {{ number_format($m->total, 2) }}</span>
                    </div>
                @endforeach
            </section>
        </div>

        <section class="rounded-xl border border-border bg-card p-4">
            <h2 class="text-sm font-semibold">Recent Daily Collections</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">Date</th>
                        <th class="px-3 py-2 text-right font-medium">Receipts</th>
                        <th class="px-3 py-2 text-right font-medium">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($daily as $d)
                        <tr class="border-b">
                            <td class="px-3 py-2">{{ $d->date }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">{{ $d->count }}</td>
                            <td class="px-3 py-2 text-right tabular-nums">KES {{ number_format($d->total, 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </section>
    </div>
@endsection