<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/dashboard" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Dashboard
        </a>
        <h1>Reports & Analytics</h1>
        <div class="page-subtitle">Comprehensive business insights and reporting</div>
    </div>
    <div class="flex gap-2">
        <button onclick="window.print()" class="btn btn-secondary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 6 15 18 15"></polyline><path d="M6 4h12v16H6z"></path>
            </svg>
            Print
        </button>
    </div>
</div>

<!-- Quick Stats -->
<div class="grid-4 gap-4 mb-6">
    <div class="card">
        <div class="p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm text-muted">Total Revenue (30d)</div>
                    <div class="text-2xl font-bold"><?= number_format(array_sum(array_column($chartData, 'daily_total')), 2) ?></div>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
                        <line x1="12" y1="1" x2="12" y2="23"></line>
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm text-muted">Stock Value</div>
                    <div class="text-2xl font-bold"><?= number_format($valStats['total_retail'] ?? 0, 2) ?></div>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm text-muted">Gross Profit (30d)</div>
                    <div class="text-2xl font-bold"><?= number_format($monthProfit ?? 0, 2) ?></div>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-purple-600">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="p-4">
            <div class="flex items-center justify-between">
                <div>
                    <div class="text-sm text-muted">Total Transactions</div>
                    <div class="text-2xl font-bold"><?= count($chartData) ?></div>
                </div>
                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-orange-600">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Expiry Alert Card -->
<?php if ($expirySummary['expired_count'] > 0 || $expirySummary['expiring_soon_count'] > 0): ?>
<div class="card mb-6 <?= $expirySummary['expired_count'] > 0 ? 'border-l-4 border-red-500' : 'border-l-4 border-orange-500' ?>">
    <div class="p-4">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 <?= $expirySummary['expired_count'] > 0 ? 'bg-red-100' : 'bg-orange-100' ?> rounded-lg flex items-center justify-center">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="<?= $expirySummary['expired_count'] > 0 ? 'text-red-600' : 'text-orange-600' ?>">
                        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                        <line x1="16" y1="2" x2="16" y2="6"></line>
                        <line x1="8" y1="2" x2="8" y2="6"></line>
                        <line x1="3" y1="10" x2="21" y2="10"></line>
                    </svg>
                </div>
                <div>
                    <div class="font-semibold <?= $expirySummary['expired_count'] > 0 ? 'text-red-600' : 'text-orange-600' ?>">
                        <?= $expirySummary['expired_count'] > 0 ? 'Expired Products Alert' : 'Products Expiring Soon' ?>
                    </div>
                    <div class="text-sm text-muted">
                        <?= $expirySummary['expired_count'] ?> expired, <?= $expirySummary['expiring_soon_count'] ?> expiring within 30 days
                    </div>
                </div>
            </div>
            <a href="<?= APP_URL ?>/reports?report=expiry" class="btn btn-sm btn-outline">View Expiry Report</a>
        </div>
        <div class="grid-4 gap-4">
            <div class="text-center p-3 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-red-600"><?= $expirySummary['expired_count'] ?></div>
                <div class="text-xs text-muted">Expired</div>
            </div>
            <div class="text-center p-3 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-orange-600"><?= $expirySummary['expiring_soon_count'] ?></div>
                <div class="text-xs text-muted">Expiring Soon (0-30d)</div>
            </div>
            <div class="text-center p-3 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-yellow-600"><?= $expirySummary['expiring_count'] ?></div>
                <div class="text-xs text-muted">Expiring (0-90d)</div>
            </div>
            <div class="text-center p-3 bg-gray-50 rounded-lg">
                <div class="text-2xl font-bold text-blue-600"><?= number_format($expirySummary['total_cost_value'] ?? 0, 2) ?></div>
                <div class="text-xs text-muted">Cost Value at Risk</div>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>

<!-- Report Navigation -->
<div class="grid-3 gap-6 mb-6">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Inventory Reports</h3>
        </div>
        <div class="p-4 space-y-3">
            <a href="<?= APP_URL ?>/reports?report=inventory" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Inventory Report</div>
                        <div class="text-sm text-muted">Current stock levels and values</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=low-stock" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-orange-600">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="8" x2="12" y2="12"></line>
                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Low Stock Items</div>
                        <div class="text-sm text-muted">Items that need to be reordered</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=stock-valuation" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
                            <line x1="12" y1="1" x2="12" y2="23"></line>
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Stock Valuation</div>
                        <div class="text-sm text-muted">Cost and retail value analysis</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=stock-trending" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-orange-600">
                            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Stock Trending</div>
                        <div class="text-sm text-muted">Historical stock trends</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=stock-summary" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-indigo-600">
                            <path d="M3 3v18h18"></path><path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Stock Summary</div>
                        <div class="text-sm text-muted">Opening, closing & current stock</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=daily-stock-monitoring" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-amber-600">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Daily Stock Monitoring</div>
                        <div class="text-sm text-muted">Daily stock movement tracking</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=expiry" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-red-600">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Product Expiry</div>
                        <div class="text-sm text-muted">Track batch expiry dates</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Financial Reports</h3>
        </div>
        <div class="p-4 space-y-3">
            <a href="<?= APP_URL ?>/reports?report=sales" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-green-600">
                            <line x1="12" y1="1" x2="12" y2="23"></line>
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Sales Report</div>
                        <div class="text-sm text-muted">Detailed sales analysis</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=product-sales" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-cyan-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-cyan-600">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                            <line x1="12" y1="22.08" x2="12" y2="12"></line>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Product Sales</div>
                        <div class="text-sm text-muted">Product-wise sales breakdown</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=profit-loss" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-purple-600">
                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Profit & Loss</div>
                        <div class="text-sm text-muted">Revenue and cost analysis</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=purchase-items" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-teal-600">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                            <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                            <line x1="12" y1="22.08" x2="12" y2="12"></line>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Purchase Items</div>
                        <div class="text-sm text-muted">Detailed purchase analysis with insights</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=top-suppliers" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-orange-600">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Top Suppliers</div>
                        <div class="text-sm text-muted">Suppliers ranked by purchase cost</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=purchase-pay-due" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-red-600">
                            <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                            <line x1="1" y1="10" x2="23" y2="10"></line>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Pay Due to Purchases</div>
                        <div class="text-sm text-muted">Outstanding purchase payments</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>

            <a href="<?= APP_URL ?>/reports?report=tax" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-blue-600">
                            <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.96l4.24 4.24M20.46 14.04l4.24 4.24M1.54 14.04l4.24 4.24"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">Tax Report</div>
                        <div class="text-sm text-muted">Tax collection and breakdown analysis</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Analytics</h3>
        </div>
        <div class="p-4 space-y-3">
            <a href="<?= APP_URL ?>/reports?report=ai-analytics" class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 transition-colors">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-white">
                            <circle cx="12" cy="12" r="3"></circle>
                            <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.96l4.24 4.24M20.46 14.04l4.24 4.24M1.54 14.04l4.24 4.24"></path>
                        </svg>
                    </div>
                    <div>
                        <div class="font-medium">AI Analytics</div>
                        <div class="text-sm text-muted">Advanced insights and trends</div>
                    </div>
                </div>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </a>
        </div>
    </div>
</div>
    <div class="stat-card">
        <div class="stat-label">Inventory Value (Cost)</div>
        <div class="stat-value"><?= money($valStats['total_cost'] ?? 0) ?></div>
        <div class="stat-change text-muted">Capital tied in stock</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Stock Potential (Retail)</div>
        <div class="stat-value text-primary-color"><?= money($valStats['total_retail'] ?? 0) ?></div>
        <div class="stat-change text-muted">Projected total revenue</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Potential Margin</div>
        <?php 
        $margin = ($valStats['total_retail'] ?? 0) - ($valStats['total_cost'] ?? 0);
        $marginPct = ($valStats['total_retail'] ?? 0) > 0 ? ($margin / $valStats['total_retail']) * 100 : 0;
        ?>
        <div class="stat-value"><?= number_format($marginPct, 1) ?>%</div>
        <div class="stat-change text-muted">Net vs Retail spread</div>
    </div>
</div>

<div class="grid-3 mb-6" style="grid-template-columns: 2fr 1fr;">
    <div class="card">
        <div class="card-header"><h3 class="card-title">Daily Sales Trend (Last 30 Days)</h3></div>
        <div style="height: 300px; padding: 20px;">
            <canvas id="salesTrendChart"></canvas>
        </div>
    </div>
    
    <div class="card">
        <div class="card-header"><h3 class="card-title">Stock Valuation Breakdown</h3></div>
        <div style="height: 300px; padding: 20px; display: flex; align-items: center; justify-content: center;">
            <canvas id="valuationPieChart"></canvas>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Top 10 Best Selling Products</h3>
        <span class="text-xs text-muted">Based on total volume sold</span>
    </div>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Product</th>
                    <th>SKU</th>
                    <th class="text-center">Units Sold</th>
                    <th class="text-right">Total Revenue</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($topSelling as $p): ?>
                <tr>
                    <td><strong><?= e($p['name']) ?></strong></td>
                    <td class="text-xs"><?= e($p['sku']) ?></td>
                    <td class="text-center font-bold"><?= number_format($p['total_sold']) ?></td>
                    <td class="text-right text-primary-color font-bold"><?= money($p['total_revenue']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const trendData = <?= json_encode($chartData) ?>;
const ctx = document.getElementById('salesTrendChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: trendData.map(d => d.date),
        datasets: [{
            label: 'Daily Sales ($)',
            data: trendData.map(d => d.daily_total),
            borderColor: '#3b82f6',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            fill: true,
            tension: 0.4,
            borderWidth: 3,
            pointRadius: 4,
            pointBackgroundColor: '#3b82f6'
        }]
    },
    options: {
        maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, grid: { color: 'rgba(255,255,255,0.05)' } },
            x: { grid: { display: false } }
        }
    }
});

const pieCtx = document.getElementById('valuationPieChart').getContext('2d');
new Chart(pieCtx, {
    type: 'doughnut',
    data: {
        labels: ['Cost Value', 'Expected Margin'],
        datasets: [{
            data: [<?= (float)($valStats['total_cost'] ?? 0) ?>, <?= (float)($valStats['total_retail'] - $valStats['total_cost'] ?? 0) ?>],
            backgroundColor: ['#3b82f6', '#10b981'],
            borderWidth: 0,
            hoverOffset: 10
        }]
    },
    options: {
        maintainAspectRatio: false,
        cutout: '70%',
        plugins: { legend: { position: 'bottom', labels: { color: '#a1a1aa', padding: 20 } } }
    }
});
</script>
