@php $title = __('Super Admin Dashboard'); @endphp
<x-layouts::app :title="$title ?? __('Super Admin Dashboard')">
    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
        <flux:card>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-sky-600">Total Billing</p>
                    <p class="mt-3 text-3xl font-semibold text-slate-900">RWF{{ number_format($totalPayments, 2) }}</p>
                </div>
                <flux:icon.document-currency-dollar class="size-5 text-sky-600" />
            </div>
        </flux:card>

        <flux:card>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-emerald-600">Total Collected</p>
                    <p class="mt-3 text-3xl font-semibold text-slate-900">RWF{{ number_format($totalCollected, 2) }}</p>
                </div>
                <flux:icon.banknotes class="size-5 text-emerald-600" />
            </div>
        </flux:card>

        <flux:card>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-600">Pending Invoices</p>
                    <p class="mt-3 text-3xl font-semibold text-slate-900">RWF{{ number_format($totalPending, 2) }}</p>
                </div>
                <flux:icon.clock class="size-5 text-amber-600" />
            </div>
        </flux:card>

        <flux:card>
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-xs font-semibold uppercase tracking-[0.2em] text-rose-600">Schools in Debt</p>
                    <p class="mt-3 text-3xl font-semibold text-slate-900">{{ $totalDebtors }}</p>
                </div>
                <flux:icon.exclamation-triangle class="size-5 text-rose-600" />
            </div>
        </flux:card>
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
        <flux:card class="lg:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <flux:heading size="sm">Revenue Growth (Last 6 Months)</flux:heading>
            </div>
            <div class="h-[300px]">
                <canvas id="revenueChart" class="w-full h-full"></canvas>
            </div>
        </flux:card>

        <flux:card>
            <div class="flex items-center justify-between mb-4">
                <flux:heading size="sm">Invoice Status Breakdown</flux:heading>
            </div>
            <div class="h-[260px]">
                <canvas id="statusChart" class="w-full h-full"></canvas>
            </div>
            <div class="mt-4 flex flex-wrap gap-3 text-sm text-slate-600">
                <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span> Paid</span>
                <span class="inline-flex items-center gap-2"><span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span> Pending</span>
            </div>
        </flux:card>
    </div>

    <div class="grid gap-4 xl:grid-cols-2">
        <flux:card>
            <flux:heading size="sm" class="mb-4">Top 10 Debtor Schools</flux:heading>
            <div class="overflow-x-auto">
                <table class="min-w-full table-reset divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">School</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Active</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Balance</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Action</th>
                        </tr>
                    </thead>
                    <tbody class=" divide-y divide-slate-200">
                        @forelse($topDebtors as $debtor)
                            <tr class="hover:bg-slate-50">
                                <td class="px-4 py-3 text-sm text-slate-900">{{ $debtor->school_name ?? $debtor->id }}</td>
                                <td class="px-4 py-3 text-sm">
                                    <flux:badge color="{{ $debtor->is_active ? 'success' : 'danger' }}">{{ $debtor->is_active ? 'Yes' : 'No' }}</flux:badge>
                                </td>
                                <td class="px-4 py-3 text-sm font-semibold text-rose-600">RWF{{ number_format($debtor->balance, 2) }}</td>
                                <td class="px-4 py-3 text-sm">
                                    <a href="{{ route('admin.billing.index') }}?tenant={{ $debtor->id }}" class="inline-flex items-center rounded-lg bg-slate-900 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-800">Details</a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">No debtors found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </flux:card>

        <flux:card>
            <flux:heading size="sm" class="mb-4">Recent Platform Revenue</flux:heading>
            <div class="overflow-x-auto">
                <table class="min-w-full table-reset divide-y divide-slate-200">
                    <thead class="bg-slate-50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">School</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Amount</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Date</th>
                            <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-slate-500">Status</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-slate-200">
                        @forelse($recentPayments as $payment)
                            <tr class="hover:bg-slate-50">
                                <td class="px-4 py-3 text-sm text-slate-900">{{ $payment->school_name }}</td>
                                <td class="px-4 py-3 text-sm font-semibold text-emerald-600">RWF{{ number_format($payment->amount, 2) }}</td>
                                <td class="px-4 py-3 text-sm text-slate-700">{{ \Carbon\Carbon::parse($payment->updated_at)->format('M d, Y') }}</td>
                                <td class="px-4 py-3 text-sm"><flux:badge color="success">Paid</flux:badge></td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-4 py-8 text-center text-sm text-slate-500">No recent revenue recorded.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </flux:card>
    </div>

    <x-slot name="scripts">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var ctx = document.getElementById('revenueChart').getContext('2d');
            var revenueChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: {!! json_encode(array_reverse(array_keys($paymentsByMonth))) !!},
                    datasets: [{
                        label: 'Monthly Revenue (RWF)',
                        data: {!! json_encode(array_reverse(array_values($paymentsByMonth))) !!},
                        backgroundColor: 'rgba(78, 115, 223, 0.05)',
                        borderColor: 'rgba(78, 115, 223, 1)',
                        pointRadius: 3,
                        pointBackgroundColor: 'rgba(78, 115, 223, 1)',
                        pointBorderColor: 'rgba(78, 115, 223, 1)',
                        pointHoverRadius: 3,
                        pointHoverBackgroundColor: 'rgba(78, 115, 223, 1)',
                        pointHoverBorderColor: 'rgba(78, 115, 223, 1)',
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        fill: true,
                        tension: 0.3
                    }]
                },
                options: {
                    maintainAspectRatio: false,
                    layout: { padding: { left: 10, right: 25, top: 25, bottom: 0 } },
                    scales: {
                        x: { grid: { display: false, drawBorder: false } },
                        y: { beginAtZero: true, grid: { color: 'rgb(234, 236, 244)', zeroLineColor: 'rgb(234, 236, 244)', drawBorder: false, borderDash: [2], zeroLineBorderDash: [2] } }
                    },
                    plugins: { legend: { display: false } }
                }
            });

            var ctx2 = document.getElementById('statusChart').getContext('2d');
            var statusChart = new Chart(ctx2, {
                type: 'doughnut',
                data: {
                    labels: ['Paid', 'Pending'],
                    datasets: [{
                        data: [{{ $invoiceStats['paid'] }}, {{ $invoiceStats['unpaid'] }}],
                        backgroundColor: ['#1cc88a', '#f6c23e'],
                        hoverBackgroundColor: ['#17a673', '#dda20a'],
                        hoverBorderColor: 'rgba(234, 236, 244, 1)',
                    }],
                },
                options: {
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    cutout: '80%',
                },
            });
        });
    </script>
        </x-slot>
        </x-layouts::app>