<?php
$page_title = 'Analytics';
require_once __DIR__ . '/header.php';
?>
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;">
    <div>
        <h2 style="font-family:'Outfit',sans-serif; font-size:1.8rem; color:#0f172a; margin:0;"><i class="fas fa-chart-pie" style="color:#8b5cf6; margin-right:10px;"></i>Analytics</h2>
        <p style="color:#64748b; font-size:0.95rem; margin-top:5px;">Buying history, purchase trends, lifetime value, satisfaction score.</p>
    </div>
</div>
<div class="grid-4" style="margin-bottom:24px;">
    <div class="card" style="margin-bottom:0; border-top:4px solid #2563eb;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">TOTAL SPENT</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">₹4,82,400</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-arrow-up"></i> +24% vs last year</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #10b981;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">REPEAT RATIO</div>
        <div style="font-size:1.4rem; font-weight:700; color:#10b981;">68%</div>
        <div style="color:#10b981; font-size:0.8rem; margin-top:5px;"><i class="fas fa-redo"></i> Repeat Purchases</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #f59e0b;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">LIFETIME VALUE</div>
        <div style="font-size:1.4rem; font-weight:700; color:#f59e0b;">₹4.8L</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;"><i class="fas fa-crown"></i> Top 10% Customer</div>
    </div>
    <div class="card" style="margin-bottom:0; border-top:4px solid #8b5cf6;">
        <div style="color:#64748b; font-size:0.8rem; font-weight:600; margin-bottom:8px;">SATISFACTION</div>
        <div style="font-size:1.4rem; font-weight:700; color:#0f172a;">4.8/5</div>
        <div style="color:#f59e0b; font-size:0.8rem; margin-top:5px;">⭐⭐⭐⭐⭐</div>
    </div>
</div>
<div class="grid-2">
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-chart-bar" style="color:#2563eb; margin-right:8px;"></i>Purchase History Trend</h3>
        <div style="display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:end; height:180px; margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #e2e8f0;">
            <?php
            $months = [
                ['Nov', 45], ['Dec', 62], ['Jan', 38], ['Feb', 75], ['Mar', 82], ['Apr', 68]
            ];
            foreach ($months as $m): ?>
            <div style="display:flex; flex-direction:column; align-items:center;">
                <div style="width:100%; background:linear-gradient(180deg,#3b82f6,#2563eb); border-radius:4px 4px 0 0; height:<?= $m[1] * 1.8 ?>px; min-height:20px; transition:all 0.3s;" onmouseover="this.style.opacity='0.8'" onmouseout="this.style.opacity='1'"></div>
                <span style="font-size:0.7rem; color:#94a3b8; margin-top:5px;"><?= $m[0] ?></span>
            </div>
            <?php endforeach; ?>
        </div>
        <div style="display:flex; justify-content:space-between; font-size:0.8rem; color:#64748b;">
            <span>Avg: ₹80,400/mo</span><span>Peak: ₹1,24,200 (Feb)</span>
        </div>
    </div>
    <div class="card">
        <h3 style="margin:0 0 15px; font-size:1.15rem; color:#0f172a;"><i class="fas fa-boxes" style="color:#10b981; margin-right:8px;"></i>Product Usage Trend</h3>
        <?php
        $products = [
            ['Double Bowl Sinks', 12, '#2563eb', '42%'],
            ['Single Bowl Sinks', 8, '#10b981', '28%'],
            ['Faucets & Accessories', 18, '#f59e0b', '18%'],
            ['Spare Parts', 24, '#8b5cf6', '12%'],
        ];
        foreach ($products as $p): ?>
        <div style="margin-bottom:12px;">
            <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
                <span style="font-size:0.85rem; font-weight:500;"><?= $p[0] ?></span>
                <span style="font-size:0.8rem; color:#64748b;"><?= $p[1] ?> orders (<?= $p[3] ?>)</span>
            </div>
            <div style="background:#e2e8f0; height:8px; border-radius:4px; overflow:hidden;">
                <div style="width:<?= $p[3] ?>; height:100%; background:<?= $p[2] ?>; border-radius:4px;"></div>
            </div>
        </div>
        <?php endforeach; ?>
        <div style="margin-top:15px; padding-top:15px; border-top:1px solid #e2e8f0;">
            <h4 style="margin:0 0 10px; font-size:0.95rem;"><i class="fas fa-chart-line" style="color:#ef4444; margin-right:8px;"></i>Complaint Analytics</h4>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem; margin-bottom:5px;">
                <span>Total Complaints</span><span style="font-weight:bold;">2 (in 2 years)</span>
            </div>
            <div style="display:flex; justify-content:space-between; font-size:0.85rem;">
                <span>All Resolved</span><span style="font-weight:bold; color:#10b981;">100% ✓</span>
            </div>
        </div>
    </div>
</div>
<?php require_once __DIR__ . '/../includes/footer.php'; ?>
