<?php $__env->startSection('title', 'Financial Analytics & Reports'); ?>

<?php $__env->startSection('content'); ?>
<div class="space-y-8">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-2xl font-extrabold text-white tracking-tight">Financial Analytics & Reports</h2>
            <p class="text-xs text-slate-400 mt-1">Deep-dive financial forecasting, collection efficiency metrics & ARPU growth.</p>
        </div>
        <span class="text-xs font-mono text-emerald-400 bg-emerald-500/10 px-3.5 py-1.5 rounded-full border border-emerald-500/20 flex items-center gap-1.5">
            <i data-lucide="shield-check" class="w-4 h-4 text-emerald-400"></i>
            Audit Verified
        </span>
    </div>

    <!-- Summary Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <div class="glass-card p-6 rounded-2xl">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Invoiced Amount</p>
            <p class="text-3xl font-extrabold text-white mt-2">$<?php echo e(number_format($totalBilled, 2)); ?></p>
            <p class="text-xs text-slate-400 mt-1">Cumulative lifetime billing</p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Cash Collected</p>
            <p class="text-3xl font-extrabold text-emerald-400 mt-2">$<?php echo e(number_format($totalCollected, 2)); ?></p>
            <p class="text-xs text-emerald-400 mt-1">Realized liquid revenue</p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Collection Efficiency</p>
            <p class="text-3xl font-extrabold text-indigo-400 mt-2"><?php echo e($collectionRate); ?>%</p>
            <p class="text-xs text-indigo-400 mt-1">Paid vs Invoiced ratio</p>
        </div>

        <div class="glass-card p-6 rounded-2xl">
            <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">ARPU (Avg Rev Per User)</p>
            <p class="text-3xl font-extrabold text-cyan-400 mt-2">$<?php echo e(number_format($arpu, 2)); ?></p>
            <p class="text-xs text-cyan-400 mt-1">Average account yield</p>
        </div>
    </div>

    <!-- 12-Month Financial Growth Chart -->
    <div class="glass-card p-6 rounded-2xl">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="text-base font-bold text-white">12-Month Revenue & Cash Collection Trend</h3>
                <p class="text-xs text-slate-400">Historical performance over the past 12 billing periods</p>
            </div>
            <span class="text-xs font-mono text-indigo-400 bg-indigo-500/10 px-3 py-1 rounded-full border border-indigo-500/20">Annual Breakdown</span>
        </div>
        <div class="h-80 w-full">
            <canvas id="annualChart"></canvas>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctxAnnual = document.getElementById('annualChart').getContext('2d');
        new Chart(ctxAnnual, {
            type: 'bar',
            data: {
                labels: <?php echo json_encode($months, 15, 512) ?>,
                datasets: [
                    {
                        label: 'Invoiced Amount ($)',
                        data: <?php echo json_encode($billedTrend, 15, 512) ?>,
                        backgroundColor: 'rgba(99, 102, 241, 0.6)',
                        borderRadius: 6,
                    },
                    {
                        label: 'Cash Collected ($)',
                        data: <?php echo json_encode($collectedTrend, 15, 512) ?>,
                        backgroundColor: 'rgba(16, 185, 129, 0.8)',
                        borderRadius: 6,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { labels: { color: '#94a3b8', font: { family: 'Plus Jakarta Sans', size: 11 } } }
                },
                scales: {
                    x: { ticks: { color: '#64748b' }, grid: { color: 'rgba(255,255,255,0.05)' } },
                    y: { ticks: { color: '#64748b' }, grid: { color: 'rgba(255,255,255,0.05)' } }
                }
            }
        });
    });
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.admin', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\Users\RentEz\Desktop\projects\billingCRM\resources\views/admin/reports/index.blade.php ENDPATH**/ ?>