@extends('layouts.school')

@section('title', 'Finance Report')
@section('header', 'Finance Report')

@section('content')
    <form method="GET" class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end">
        <div>
            <label class="block text-sm font-medium text-gray-700">From</label>
            <input type="date" name="from" value="{{ $from }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700">To</label>
            <input type="date" name="to" value="{{ $to }}" class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500">
        </div>
        <button type="submit" class="rounded-lg bg-primary-600 px-6 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-700">Filter</button>
    </form>

    <div class="mb-6 grid grid-cols-2 gap-4 sm:grid-cols-4">
        <div class="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5">
            <p class="text-xs font-medium text-gray-500">Total Invoiced</p>
            <p class="mt-1 text-xl font-bold text-gray-900">₦{{ number_format($stats['total_invoiced'], 2) }}</p>
            <p class="text-xs text-gray-400 mt-1">{{ $stats['invoice_count'] }} invoices</p>
        </div>
        <div class="rounded-xl bg-green-50 p-5 shadow-sm ring-1 ring-green-200">
            <p class="text-xs font-medium text-green-700">Total Collected</p>
            <p class="mt-1 text-xl font-bold text-green-900">₦{{ number_format($stats['total_collected'], 2) }}</p>
        </div>
        <div class="rounded-xl bg-red-50 p-5 shadow-sm ring-1 ring-red-200">
            <p class="text-xs font-medium text-red-700">Outstanding</p>
            <p class="mt-1 text-xl font-bold text-red-900">₦{{ number_format($stats['total_outstanding'], 2) }}</p>
        </div>
        <div class="rounded-xl bg-amber-50 p-5 shadow-sm ring-1 ring-amber-200">
            <p class="text-xs font-medium text-amber-700">Discounts</p>
            <p class="mt-1 text-xl font-bold text-amber-900">₦{{ number_format($stats['total_discount'], 2) }}</p>
        </div>
    </div>

    <div class="mb-6 grid grid-cols-3 gap-4">
        <div class="rounded-xl bg-white p-4 text-center shadow-sm ring-1 ring-gray-900/5">
            <p class="text-lg font-bold text-green-600">{{ $stats['paid_count'] }}</p>
            <p class="text-xs text-gray-500">Paid Invoices</p>
        </div>
        <div class="rounded-xl bg-white p-4 text-center shadow-sm ring-1 ring-gray-900/5">
            <p class="text-lg font-bold text-amber-600">{{ $stats['partial_count'] }}</p>
            <p class="text-xs text-gray-500">Partial Payments</p>
        </div>
        <div class="rounded-xl bg-white p-4 text-center shadow-sm ring-1 ring-gray-900/5">
            <p class="text-lg font-bold text-red-600">{{ $stats['pending_count'] }}</p>
            <p class="text-xs text-gray-500">Pending Invoices</p>
        </div>
    </div>

    @if($stats['total_invoiced'] > 0)
        <div class="mb-6">
            <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
                <span>Collection Rate</span>
                <span class="font-medium">{{ round(($stats['total_collected'] / $stats['total_invoiced']) * 100, 1) }}%</span>
            </div>
            <div class="h-3 rounded-full bg-gray-200">
                <div class="h-3 rounded-full bg-green-500" style="width: {{ round(($stats['total_collected'] / $stats['total_invoiced']) * 100) }}%"></div>
            </div>
        </div>
    @endif

    <div class="rounded-xl bg-white shadow-sm ring-1 ring-gray-900/5 overflow-hidden">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide">Recent Payments</h3>
        </div>
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Date</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Student</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Invoice</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase">Method</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase">Amount</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($recentPayments as $payment)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-3 text-sm text-gray-600">{{ $payment->payment_date?->format('d M Y') ?? '—' }}</td>
                        <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ $payment->student?->full_name ?? '—' }}</td>
                        <td class="px-6 py-3 text-sm text-gray-600">{{ $payment->invoice?->invoice_no ?? '—' }}</td>
                        <td class="px-6 py-3 text-sm text-gray-600">{{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? '—')) }}</td>
                        <td class="px-6 py-3 text-right text-sm font-semibold text-green-600">₦{{ number_format($payment->amount, 2) }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-6 py-12 text-center text-sm text-gray-500">No payments in this period.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
@endsection