<div class="page-header">
    <div>
        <h1><i class="bi bi-bar-chart-line me-2"></i>Item-wise Sales</h1>
        <p>Revenue and quantity breakdown per menu item.</p>
    </div>
    <div class="d-flex gap-2">
        <a href="<?= url('reports/invoices') ?>" class="btn btn-outline-secondary btn-sm">Order Report</a>
        <a href="<?= url('reports/customers') ?>" class="btn btn-outline-secondary btn-sm">Customer History</a>
    </div>
</div>

<?php include __DIR__ . '/_summary_cards.php'; ?>

<?php $formAction = url('reports/sales'); ?>
<?php include __DIR__ . '/_filters.php'; ?>

<!-- Sales chart -->
<?php if (!empty($daily)): ?>
<div class="card mb-4">
    <div class="card-header">
        <i class="bi bi-graph-up text-accent"></i>
        <h6 class="card-title">Daily Revenue — <?= e($from) ?> to <?= e($to) ?></h6>
    </div>
    <div class="card-body" style="height:240px;">
        <canvas id="salesChart"></canvas>
    </div>
</div>
<?php endif; ?>

<!-- Items table -->
<div class="card">
    <div class="card-header">
        <i class="bi bi-list-ol text-accent"></i>
        <h6 class="card-title">Items Breakdown</h6>
        <span class="ms-auto text-secondary" style="font-size:.8rem;"><?= count($rows) ?> items</span>
    </div>
    <div class="card-body p-0">
        <?php if (empty($rows)): ?>
        <div class="text-center py-5 text-secondary">
            <i class="bi bi-bar-chart fs-1 d-block mb-3 opacity-25"></i>
            <p>No sales data for this period.</p>
        </div>
        <?php else: ?>
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Item Name</th>
                        <th class="text-center">Orders</th>
                        <th class="text-center">Qty Sold</th>
                        <th class="text-end">Revenue</th>
                        <th class="text-end">% of Total</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $grandTotal = array_sum(array_column($rows, 'total_revenue'));
                    foreach ($rows as $i => $r):
                        $pct = $grandTotal > 0 ? ($r['total_revenue'] / $grandTotal * 100) : 0;
                    ?>
                    <tr>
                        <td class="text-secondary" style="font-size:.8rem;"><?= $i + 1 ?></td>
                        <td class="fw-600"><?= e($r['item_name']) ?></td>
                        <td class="text-center"><?= number_format((int)$r['order_count']) ?></td>
                        <td class="text-center fw-700"><?= number_format((int)$r['total_qty']) ?></td>
                        <td class="text-end fw-700 text-accent"><?= money((float)$r['total_revenue']) ?></td>
                        <td class="text-end" style="width:130px;">
                            <div class="d-flex align-items-center gap-2 justify-content-end">
                                <div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;max-width:70px;">
                                    <div style="width:<?= min(100, round($pct)) ?>%;height:100%;background:var(--accent);border-radius:3px;"></div>
                                </div>
                                <span style="font-size:.78rem;width:36px;text-align:right;"><?= number_format($pct, 1) ?>%</span>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
                <tfoot>
                    <tr class="table-light fw-700">
                        <td colspan="3" class="text-end">Total</td>
                        <td class="text-center"><?= number_format(array_sum(array_column($rows,'total_qty'))) ?></td>
                        <td class="text-end text-accent"><?= money((float)$grandTotal) ?></td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <?php endif; ?>
    </div>
</div>

<?php ob_start(); ?>
<script>
<?php if (!empty($daily)): ?>
const salesCtx = document.getElementById('salesChart');
if (salesCtx) {
    new Chart(salesCtx, {
        type: 'bar',
        data: {
            labels: <?= json_encode(array_column($daily, 'sale_date')) ?>,
            datasets: [{
                label: 'Revenue',
                data:  <?= json_encode(array_map(fn($d) => (float)$d['revenue'], $daily)) ?>,
                backgroundColor: 'rgba(249,115,22,.7)',
                borderColor: 'rgba(249,115,22,1)',
                borderWidth: 1,
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true, maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, ticks: { callback: v => 'Rs.' + v.toLocaleString() } },
                x: { grid: { display: false } }
            }
        }
    });
}
<?php endif; ?>
</script>
<?php $extraJs = ob_get_clean(); ?>
