<?php // app/Views/admin/reports/index.php ?>
<div 
    x-data="{ 
        showSalesModal: false, 
        modalTitle: '', 
        modalOrders: [], 
        loadingOrders: false,
        fetchSessionOrders(sessionId, cashierName) {
            this.modalTitle = 'Previous Sales for Session #' + sessionId + ' (' + cashierName + ')';
            this.loadingOrders = true;
            this.showSalesModal = true;
            this.modalOrders = [];
            fetch('<?= BASE_URL ?>/admin/reports/session-orders?session_id=' + sessionId)
                .then(res => res.json())
                .then(data => {
                    this.modalOrders = data;
                    this.loadingOrders = false;
                })
                .catch(() => { this.loadingOrders = false; });
        },
        fetchCashierOrders(cashierId, cashierName) {
            this.modalTitle = 'Previous Sales for ' + cashierName;
            this.loadingOrders = true;
            this.showSalesModal = true;
            this.modalOrders = [];
            const cId = cashierId === null ? 'system' : cashierId;
            fetch('<?= BASE_URL ?>/admin/reports/cashier-orders?cashier_id=' + cId + '&from=<?= $from ?>&to=<?= $to ?>')
                .then(res => res.json())
                .then(data => {
                    this.modalOrders = data;
                    this.loadingOrders = false;
                })
                .catch(() => { this.loadingOrders = false; });
        }
    }"
    class="space-y-6"
>

<!-- Date Filter -->
<form method="GET" class="flex flex-wrap gap-3 items-end p-4 rounded-2xl" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08)">
    <div>
        <label class="block text-xs text-slate-400 mb-1">From</label>
        <input type="date" name="from" value="<?php echo $from; ?>" class="px-3 py-2 rounded-lg text-white text-sm outline-none focus:ring-2 focus:ring-emerald-500" style="background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1)">
    </div>
    <div>
        <label class="block text-xs text-slate-400 mb-1">To</label>
        <input type="date" name="to" value="<?php echo $to; ?>" class="px-3 py-2 rounded-lg text-white text-sm outline-none focus:ring-2 focus:ring-emerald-500" style="background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1)">
    </div>
    <div>
        <label class="block text-xs text-slate-400 mb-1">Limit (Prod/Cat)</label>
        <select name="limit" onchange="this.form.submit()" class="px-3 py-2 rounded-lg text-white text-sm outline-none focus:ring-2 focus:ring-emerald-500" style="background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);color-scheme:dark;">
            <option value="5" <?php echo ($limit ?? '10') === '5' ? 'selected' : ''; ?>>5</option>
            <option value="10" <?php echo ($limit ?? '10') === '10' ? 'selected' : ''; ?>>10</option>
            <option value="25" <?php echo ($limit ?? '10') === '25' ? 'selected' : ''; ?>>25</option>
            <option value="all" <?php echo ($limit ?? '10') === 'all' ? 'selected' : ''; ?>>All</option>
        </select>
    </div>
    <button type="submit" class="px-5 py-2 rounded-lg font-semibold text-white text-sm" style="background:linear-gradient(135deg,#10b981,#059669)"><i class="fas fa-filter mr-1"></i>Apply</button>
    <a href="?from=<?php echo date('Y-m-d'); ?>&to=<?php echo date('Y-m-d'); ?>&limit=<?php echo $limit; ?>" class="px-4 py-2 rounded-lg text-slate-400 text-sm hover:text-white transition" style="background:rgba(255,255,255,0.05)">Today</a>
    <a href="?from=<?php echo date('Y-m-01'); ?>&to=<?php echo date('Y-m-d'); ?>&limit=<?php echo $limit; ?>" class="px-4 py-2 rounded-lg text-slate-400 text-sm hover:text-white transition" style="background:rgba(255,255,255,0.05)">This Month</a>
    <a href="?from=<?php echo date('Y-m-01',strtotime('last month')); ?>&to=<?php echo date('Y-m-t',strtotime('last month')); ?>&limit=<?php echo $limit; ?>" class="px-4 py-2 rounded-lg text-slate-400 text-sm hover:text-white transition" style="background:rgba(255,255,255,0.05)">Last Month</a>
    
    <div class="ml-auto flex items-center gap-3">
        <a href="/admin/reports/download-customers" class="px-4 py-2 rounded-lg text-slate-300 text-sm hover:text-white transition flex items-center gap-1.5" style="background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2)">
            <i class="fas fa-download text-xs text-emerald-400"></i> Customers CSV
        </a>
        <button onclick="window.print()" type="button" class="px-4 py-2 rounded-lg text-slate-400 text-sm hover:text-white transition" style="background:rgba(255,255,255,0.05)"><i class="fas fa-print mr-1"></i>Print</button>
    </div>
</form>

<!-- KPI Cards -->
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
<?php
$kpis = [
    ['Revenue',   $currency.number_format($kpi['revenue'],2),  'fa-dollar-sign',  '#6ee7b7','rgba(16,185,129,0.15)'],
    ['Orders',    number_format($kpi['orders']),          'fa-receipt',      '#93c5fd','rgba(59,130,246,0.15)'],
    ['Expenses',  $currency.number_format($kpi['expenses'],2),  'fa-shopping-cart','#fca5a5','rgba(239,68,68,0.15)'],
    ['Net Profit',$currency.number_format($kpi['profit'],2),    'fa-chart-line',   '#fcd34d','rgba(245,158,11,0.15)'],
    ['Avg Order', $currency.number_format($kpi['avg_order'],2), 'fa-star',         '#c4b5fd','rgba(139,92,246,0.15)'],
];
foreach($kpis as [$label,$val,$icon,$color,$bg]): ?>
<div class="rounded-2xl p-4" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
    <div class="flex justify-between items-start mb-3">
        <p class="text-xs text-slate-500"><?php echo $label; ?></p>
        <div class="w-8 h-8 rounded-lg flex items-center justify-center" style="background:<?php echo $bg; ?>">
            <i class="fas <?php echo $icon; ?> text-xs" style="color:<?php echo $color; ?>"></i>
        </div>
    </div>
    <p class="text-xl font-bold text-white"><?php echo $val; ?></p>
</div>
<?php endforeach; ?>
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
    <!-- Daily Revenue Chart -->
    <div class="lg:col-span-2 rounded-2xl p-5" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
        <h3 class="font-semibold text-white mb-4">Daily Revenue</h3>
        <div id="dailyChart"></div>
    </div>
    <!-- Payment Methods -->
    <div class="rounded-2xl p-5" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
        <h3 class="font-semibold text-white mb-4">Payment Methods</h3>
        <div id="paymentChart"></div>
        <div class="mt-3 space-y-2">
        <?php foreach($pmethods as $pm): ?>
        <div class="flex justify-between text-xs">
            <span class="text-slate-400 capitalize"><?php echo $pm['payment_method']; ?></span>
            <span class="text-white font-semibold"><?php echo $currency; ?><?php echo number_format($pm['total'],2); ?> <span class="text-slate-500">(<?php echo $pm['cnt']; ?>)</span></span>
        </div>
        <?php endforeach; ?>
        <?php if(empty($pmethods)): ?><p class="text-slate-600 text-xs text-center py-4">No payment data</p><?php endif; ?>
        </div>
    </div>
</div>

<!-- Top Products & Categories -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">
    <!-- Top Products -->
    <div x-data="{ showAll: false }" class="rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
        <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
            <h3 class="font-semibold text-white">Top Products</h3>
            <?php if (count($topProducts) > 10): ?>
                <button @click="showAll = !showAll" class="text-xs text-purple-400 hover:text-purple-300 font-semibold transition outline-none">
                    <span x-show="showAll"><i class="fas fa-chevron-up mr-0.5"></i> Show Less</span>
                    <span x-show="!showAll"><i class="fas fa-eye mr-0.5"></i> View All</span>
                </button>
            <?php endif; ?>
        </div>
        <div class="divide-y divide-white/5">
        <?php if(empty($topProducts)): ?>
        <p class="text-slate-500 text-sm text-center py-8">No sales data yet.</p>
        <?php endif; ?>
        <?php foreach($topProducts as $i => $p):
            $maxRev = $topProducts[0]['revenue'] ?: 1;
            $pct = round($p['revenue']/$maxRev*100);
        ?>
        <div class="px-5 py-3 flex items-center gap-3" <?php if($i >= 10): ?>x-show="showAll" x-transition style="display:none"<?php endif; ?>>
            <span class="w-6 text-center text-xs font-bold text-slate-600"><?php echo $i+1; ?></span>
            <div class="flex-1 min-w-0">
                <div class="text-sm font-medium text-white truncate"><?php echo htmlspecialchars($p['name']); ?></div>
                <div class="h-1 rounded-full mt-1" style="background:rgba(255,255,255,0.07)">
                    <div class="h-1 rounded-full" style="width:<?php echo $pct; ?>%;background:linear-gradient(90deg,#10b981,#3b82f6)"></div>
                </div>
            </div>
            <div class="text-right flex-shrink-0">
                <div class="text-sm font-bold text-white"><?php echo $currency; ?><?php echo number_format($p['revenue'],2); ?></div>
                <div class="text-xs text-slate-500"><?php echo $p['qty']; ?> sold</div>
            </div>
        </div>
        <?php endforeach; ?>
        </div>
    </div>

    <!-- Top Categories -->
    <div x-data="{ showAll: false }" class="rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
        <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
            <h3 class="font-semibold text-white">Revenue by Category</h3>
            <?php if (count($topCats) > 10): ?>
                <button @click="showAll = !showAll" class="text-xs text-purple-400 hover:text-purple-300 font-semibold transition outline-none">
                    <span x-show="showAll"><i class="fas fa-chevron-up mr-0.5"></i> Show Less</span>
                    <span x-show="!showAll"><i class="fas fa-eye mr-0.5"></i> View All</span>
                </button>
            <?php endif; ?>
        </div>
        <div id="categoryChart" class="px-5 pt-4"></div>
        <div class="px-5 pb-4 space-y-2 mt-2">
        <?php foreach($topCats as $i => $c):
            $maxC = $topCats[0]['revenue'] ?: 1;
            $pctC = round($c['revenue']/$maxC*100);
        ?>
        <div <?php if($i >= 10): ?>x-show="showAll" x-transition style="display:none"<?php endif; ?>>
            <div class="flex justify-between text-xs mb-1">
                <span class="text-slate-300"><?php echo htmlspecialchars($c['name']); ?></span>
                <span class="text-white font-semibold"><?php echo $currency; ?><?php echo number_format($c['revenue'],2); ?></span>
            </div>
            <div class="h-1.5 rounded-full" style="background:rgba(255,255,255,0.07)">
                <div class="h-1.5 rounded-full" style="width:<?php echo $pctC; ?>%;background:linear-gradient(90deg,#8b5cf6,#3b82f6)"></div>
            </div>
        </div>
        <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Cashier Sessions -->
<div x-data="{ showAll: false }" class="rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
    <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
        <h3 class="font-semibold text-white">Cashier Sessions</h3>
        <?php if (count($sessions) > 10): ?>
            <button @click="showAll = !showAll" class="text-xs text-purple-400 hover:text-purple-300 font-semibold transition outline-none">
                <span x-show="showAll"><i class="fas fa-chevron-up mr-0.5"></i> Show Less</span>
                <span x-show="!showAll"><i class="fas fa-eye mr-0.5"></i> View All</span>
            </button>
        <?php endif; ?>
    </div>
    <div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead><tr class="border-b border-white/5">
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Cashier</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Opened</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Closed</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Orders</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Revenue</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Opening Float</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Status</th>
            <th class="text-right px-5 py-3 text-slate-500 font-medium">Actions</th>
        </tr></thead>
        <tbody>
        <?php if(empty($sessions)): ?>
        <tr><td colspan="8" class="px-5 py-8 text-center text-slate-500">No sessions in this period.</td></tr>
        <?php endif; ?>
        <?php foreach($sessions as $i => $s): ?>
        <tr class="border-b border-white/5 hover:bg-white/4 transition" <?php if($i >= 10): ?>x-show="showAll" x-transition style="display:none"<?php endif; ?>>
            <td class="px-5 py-3 font-medium text-white"><?php echo htmlspecialchars($s['cashier_name']); ?></td>
            <td class="px-5 py-3 text-slate-400 text-xs"><?php echo date('M d, h:i A', strtotime($s['start_time'])); ?></td>
            <td class="px-5 py-3 text-slate-400 text-xs"><?php echo $s['end_time'] ? date('M d, h:i A', strtotime($s['end_time'])) : '—'; ?></td>
            <td class="px-5 py-3 text-slate-300"><?php echo $s['session_orders']; ?></td>
            <td class="px-5 py-3 font-semibold text-white"><?php echo $currency; ?><?php echo number_format($s['session_revenue'],2); ?></td>
            <td class="px-5 py-3 text-slate-400"><?php echo $currency; ?><?php echo number_format($s['opening_balance'],2); ?></td>
            <td class="px-5 py-3">
                <span class="px-2 py-1 rounded-full text-xs font-semibold" style="background:<?php echo $s['status']==='open'?'rgba(16,185,129,0.15)':'rgba(100,116,139,0.2)'; ?>;color:<?php echo $s['status']==='open'?'#6ee7b7':'#94a3b8'; ?>">
                    <?php echo ucfirst($s['status']); ?>
                </span>
            </td>
            <td class="px-5 py-3 text-right flex items-center justify-end gap-3">
                <button @click="fetchSessionOrders(<?php echo $s['id']; ?>, '<?php echo htmlspecialchars($s['cashier_name']); ?>')" type="button" class="inline-flex items-center gap-1 text-xs text-emerald-400 hover:text-emerald-300 font-semibold transition outline-none">
                    <i class="fas fa-shopping-basket text-[10px]"></i> View Sales
                </button>
                <a href="?from=<?php echo $from; ?>&to=<?php echo $to; ?>&session_id=<?php echo $s['id']; ?>#void-logs" class="inline-flex items-center gap-1 text-xs text-purple-400 hover:text-purple-300 font-semibold transition">
                    <i class="fas fa-ban text-[10px]"></i> View Voids
                </a>
            </td>
        </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    </div>
</div>

<!-- Cashier Wise Sales Summary -->
<div class="rounded-2xl overflow-hidden animate-fade-in" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
    <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
        <h3 class="font-semibold text-white flex items-center gap-2">
            <i class="fas fa-user-tie text-emerald-400 text-sm"></i>
            Cashier-Wise Sales Summary
        </h3>
        <span class="text-xs text-slate-500">Sales grouped by cashier user</span>
    </div>
    <div class="overflow-x-auto">
    <table class="w-full text-sm">
        <thead><tr class="border-b border-white/5">
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Cashier Name</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Total Orders</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Total Revenue</th>
            <th class="text-right px-5 py-3 text-slate-500 font-medium">Actions</th>
        </tr></thead>
        <tbody>
        <?php if(empty($cashierSales)): ?>
        <tr><td colspan="4" class="px-5 py-8 text-center text-slate-500">No cashier sales recorded in this period.</td></tr>
        <?php endif; ?>
        <?php foreach($cashierSales as $cs): ?>
        <tr class="border-b border-white/5 hover:bg-white/4 transition">
            <td class="px-5 py-3 font-medium text-white"><?php echo htmlspecialchars($cs['cashier_name']); ?></td>
            <td class="px-5 py-3 text-slate-300"><?php echo $cs['total_orders']; ?></td>
            <td class="px-5 py-3 font-semibold text-emerald-400"><?php echo $currency; ?><?php echo number_format($cs['total_revenue'],2); ?></td>
            <td class="px-5 py-3 text-right">
                <button @click="fetchCashierOrders(<?php echo $cs['cashier_id'] !== null ? $cs['cashier_id'] : 'null'; ?>, '<?php echo htmlspecialchars($cs['cashier_name']); ?>')" type="button" class="inline-flex items-center gap-1 text-xs text-emerald-400 hover:text-emerald-300 font-semibold transition outline-none">
                    <i class="fas fa-shopping-basket text-[10px]"></i> View Sales
                </button>
            </td>
        </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    </div>
</div>

<!-- Expenses + Add Expense -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
    <!-- Add Expense Form -->
    <div class="rounded-2xl p-5" style="background:rgba(239,68,68,0.06);border:1px solid rgba(239,68,68,0.2)">
        <h3 class="font-semibold text-white mb-4"><i class="fas fa-receipt text-red-400 mr-2"></i>Log Expense</h3>
        <form action="<?= BASE_URL ?>/admin/reports/expenses/store" method="POST" class="space-y-3">
            <div>
                <label class="block text-xs text-slate-400 mb-1">Category</label>
                <select name="category" class="w-full px-3 py-2 rounded-lg text-white text-sm outline-none" style="background:rgba(15,23,42,1);border:1px solid rgba(255,255,255,0.1)">
                    <option>Ingredients</option><option>Utilities</option><option>Salary</option>
                    <option>Rent</option><option>Maintenance</option><option>Other</option>
                </select>
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Amount (<?php echo $currency; ?>)</label>
                <input type="number" step="0.01" name="amount" required placeholder="0.00" class="w-full px-3 py-2 rounded-lg text-white text-sm outline-none" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1)">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Date</label>
                <input type="date" name="expense_date" value="<?php echo date('Y-m-d'); ?>" required class="w-full px-3 py-2 rounded-lg text-white text-sm outline-none" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1)">
            </div>
            <div>
                <label class="block text-xs text-slate-400 mb-1">Note</label>
                <input type="text" name="description" placeholder="Optional note…" class="w-full px-3 py-2 rounded-lg text-white text-sm outline-none" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.1)">
            </div>
            <button type="submit" class="w-full py-2.5 rounded-lg text-white text-sm font-semibold" style="background:rgba(239,68,68,0.7)"><i class="fas fa-plus mr-1"></i>Add Expense</button>
        </form>
    </div>

    <!-- Expense List -->
    <div x-data="{ showAll: false }" class="lg:col-span-2 rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
        <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <h3 class="font-semibold text-white">Expenses</h3>
                <?php if (count($expenses) > 10): ?>
                    <button @click="showAll = !showAll" class="text-xs text-purple-400 hover:text-purple-300 font-semibold transition outline-none">
                        <span x-show="showAll"><i class="fas fa-chevron-up mr-0.5"></i> Show Less</span>
                        <span x-show="!showAll"><i class="fas fa-eye mr-0.5"></i> View All</span>
                    </button>
                <?php endif; ?>
            </div>
            <span class="text-xs text-red-400 font-semibold">Total: <?php echo $currency; ?><?php echo number_format($kpi['expenses'],2); ?></span>
        </div>
        <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead><tr class="border-b border-white/5">
                <th class="text-left px-5 py-3 text-slate-500 font-medium">Date</th>
                <th class="text-left px-5 py-3 text-slate-500 font-medium">Category</th>
                <th class="text-left px-5 py-3 text-slate-500 font-medium">Note</th>
                <th class="text-left px-5 py-3 text-slate-500 font-medium">Amount</th>
                <th class="px-5 py-3"></th>
            </tr></thead>
            <tbody>
            <?php if(empty($expenses)): ?>
            <tr><td colspan="5" class="px-5 py-8 text-center text-slate-600">No expenses logged.</td></tr>
            <?php endif; ?>
            <?php foreach($expenses as $i => $e): ?>
            <tr class="border-b border-white/5 hover:bg-white/4 transition" <?php if($i >= 10): ?>x-show="showAll" x-transition style="display:none"<?php endif; ?>>
                <td class="px-5 py-3 text-slate-400 text-xs"><?php echo date('M d', strtotime($e['expense_date'])); ?></td>
                <td class="px-5 py-3 text-slate-300"><?php echo htmlspecialchars($e['category']); ?></td>
                <td class="px-5 py-3 text-slate-500 text-xs truncate max-w-xs"><?php echo htmlspecialchars($e['description'] ?? '—'); ?></td>
                <td class="px-5 py-3 font-semibold text-red-400"><?php echo $currency; ?><?php echo number_format($e['amount'],2); ?></td>
                <td class="px-5 py-3 text-right">
                    <form action="<?= BASE_URL ?>/admin/reports/expenses/delete" method="POST" onsubmit="return confirm('Delete?')">
                        <input type="hidden" name="id" value="<?php echo $e['id']; ?>">
                        <button type="submit" class="text-xs text-slate-600 hover:text-red-400 transition"><i class="fas fa-trash"></i></button>
                    </form>
                </td>
            </tr>
            <?php endforeach; ?>
            </tbody>
        </table>
        </div>
    </div>
</div>

<!-- Void Logs -->
<div id="void-logs" class="rounded-2xl overflow-hidden" style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07)">
    <div class="px-5 py-4 border-b border-white/5 flex justify-between items-center flex-wrap gap-2">
        <h3 class="font-semibold text-white">
            <i class="fas fa-ban text-red-400 mr-2"></i>Void Logs <?php echo isset($_GET['session_id']) ? '(Session #'.htmlspecialchars($_GET['session_id']).')' : ''; ?>
        </h3>
        <div class="flex items-center gap-3">
            <?php if(!empty($voids)): ?>
            <form action="<?= BASE_URL ?>/admin/reports/voids/delete-all" method="POST" onsubmit="return confirm('Are you absolutely sure you want to permanently delete ALL voided orders and their items?')">
                <button type="submit" class="text-xs font-semibold px-3 py-1.5 rounded-lg bg-red-600/10 border border-red-500/30 text-red-400 hover:bg-red-650 hover:bg-red-600 hover:text-white transition">
                    <i class="fas fa-trash-alt mr-1"></i> Delete All Voids
                </button>
            </form>
            <?php endif; ?>
            <?php if(isset($_GET['session_id'])): ?>
            <a href="?from=<?php echo $from; ?>&to=<?php echo $to; ?>#void-logs" class="text-xs text-slate-400 hover:text-white transition flex items-center gap-1">
                <i class="fas fa-times text-[10px]"></i> Clear Filter
            </a>
            <?php endif; ?>
        </div>
    </div>
    
    <?php if(empty($voids)): ?>
    <div class="px-5 py-8 text-center text-slate-500 text-sm">No voided orders found.</div>
    <?php else: ?>
    <table class="w-full text-sm">
        <thead><tr class="border-b border-white/5">
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Order#</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Amount</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Reason</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Voided By</th>
            <th class="text-left px-5 py-3 text-slate-500 font-medium">Time</th>
            <th class="text-right px-5 py-3 text-slate-500 font-medium">Actions</th>
        </tr></thead>
        <tbody>
        <?php foreach($voids as $v): ?>
        <tr class="border-b border-white/5 hover:bg-white/4">
            <td class="px-5 py-3 font-mono text-slate-300">#<?php echo $v['order_number']; ?></td>
            <td class="px-5 py-3 font-semibold text-red-400"><?php echo $currency; ?><?php echo number_format($v['total'],2); ?></td>
            <td class="px-5 py-3 text-slate-400"><?php echo htmlspecialchars($v['reason']); ?></td>
            <td class="px-5 py-3 text-slate-300"><?php echo htmlspecialchars($v['voided_by_name']); ?></td>
            <td class="px-5 py-3 text-slate-500 text-xs"><?php echo date('M d, h:i A', strtotime($v['created_at'])); ?></td>
            <td class="px-5 py-3 text-right">
                <form action="<?= BASE_URL ?>/admin/reports/voids/delete" method="POST" onsubmit="return confirm('Are you sure you want to permanently delete this void order and all its items?')">
                    <input type="hidden" name="id" value="<?php echo $v['id']; ?>">
                    <button type="submit" class="text-xs text-slate-600 hover:text-red-400 transition"><i class="fas fa-trash"></i></button>
                </form>
            </td>
        </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    <?php endif; ?>
</div>

    <!-- ═══ SALES / ORDERS DETAILS MODAL ═══ -->
    <div x-show="showSalesModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in" style="display:none; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);" x-transition>
        <div @click.away="showSalesModal = false" class="w-full max-w-3xl rounded-2xl overflow-hidden glass border-emerald-500/20 shadow-emerald-500/10 shadow-2xl" style="background: #0f111a; border: 1px solid rgba(16,185,129,0.25); box-shadow: 0 25px 50px rgba(0,0,0,0.6);">
            <!-- Header -->
            <div class="px-6 py-4 flex justify-between items-center border-b border-emerald-500/15">
                <h2 class="text-base font-bold text-emerald-400 flex items-center gap-2">
                    <i class="fas fa-list-ul text-lg"></i>
                    <span x-text="modalTitle"></span>
                </h2>
                <button @click="showSalesModal = false" class="text-slate-500 hover:text-white transition"><i class="fas fa-times"></i></button>
            </div>
            
            <!-- Content -->
            <div class="p-6 overflow-y-auto max-h-[60vh] space-y-4">
                <div x-show="loadingOrders" class="flex flex-col items-center justify-center py-12 text-slate-500">
                    <i class="fas fa-circle-notch fa-spin text-3xl mb-3 text-emerald-500"></i>
                    <p class="text-sm">Loading orders...</p>
                </div>
                
                <div x-show="!loadingOrders && modalOrders.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-500">
                    <i class="fas fa-inbox text-3xl mb-3"></i>
                    <p class="text-sm">No sales transactions found.</p>
                </div>
                
                <div x-show="!loadingOrders && modalOrders.length > 0" class="overflow-x-auto rounded-xl border border-white/5 bg-white/[0.01]">
                    <table class="w-full text-xs text-left">
                        <thead>
                            <tr class="border-b border-white/5 bg-white/[0.02] text-slate-400 font-bold uppercase tracking-wider">
                                <th class="px-4 py-3">Order #</th>
                                <th class="px-4 py-3">Table</th>
                                <th class="px-4 py-3">Time</th>
                                <th class="px-4 py-3">Items</th>
                                <th class="px-4 py-3">Method</th>
                                <th class="px-4 py-3 text-right">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5 text-slate-300">
                            <template x-for="o in modalOrders" :key="o.id">
                                <tr class="hover:bg-white/[0.02] transition">
                                    <td class="px-4 py-3.5 font-mono font-bold text-white" x-text="'#' + o.order_number"></td>
                                    <td class="px-4 py-3.5" x-text="o.table_name || '—'"></td>
                                    <td class="px-4 py-3.5 text-slate-500" x-text="new Date(o.created_at).toLocaleTimeString('en-US', {hour: '2-digit', minute:'2-digit'})"></td>
                                    <td class="px-4 py-3.5 max-w-xs truncate" :title="o.items_summary" x-text="o.items_summary || '—'"></td>
                                    <td class="px-4 py-3.5 text-2xs uppercase"><span class="px-1.5 py-0.5 rounded bg-white/5 border border-white/10" x-text="o.payment_method"></span></td>
                                    <td class="px-4 py-3.5 text-right font-semibold text-emerald-400" x-text="'<?= $currency ?>' + parseFloat(o.total).toFixed(2)"></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Footer -->
            <div class="px-6 py-4 bg-slate-950/50 border-t border-white/5 flex justify-end">
                <button @click="showSalesModal = false" class="py-2 px-5 rounded-xl text-xs font-bold transition text-slate-400 hover:bg-white/5 border border-white/10">
                    Close
                </button>
            </div>
        </div>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
const dark = { chart:{background:'transparent',toolbar:{show:false},fontFamily:'Inter,sans-serif'}, theme:{mode:'dark'}, grid:{borderColor:'rgba(255,255,255,0.06)',strokeDashArray:3}, tooltip:{theme:'dark'} };

// Daily Revenue
const dailyData = <?php echo json_encode(array_values($daily)); ?>;
if(dailyData.length) {
    new ApexCharts(document.getElementById('dailyChart'),{
        ...dark, chart:{...dark.chart,type:'area',height:220},
        series:[{name:'Revenue',data:dailyData.map(d=>parseFloat(d.revenue))}],
        xaxis:{categories:dailyData.map(d=>d.day.substr(5)),labels:{style:{colors:'#64748b',fontSize:'11px'}}},
        yaxis:{labels:{style:{colors:'#64748b'},formatter:v=>'<?php echo $currency; ?>'+v.toLocaleString()}},
        colors:['#10b981'], fill:{type:'gradient',gradient:{opacityFrom:0.35,opacityTo:0}},
        stroke:{curve:'smooth',width:2}, dataLabels:{enabled:false},
    }).render();
} else {
    document.getElementById('dailyChart').innerHTML='<p class="text-center text-slate-600 py-10 text-sm">No revenue data for this period</p>';
}

// Payment Methods Donut
const pmData = <?php echo json_encode(array_values($pmethods)); ?>;
if(pmData.length) {
    new ApexCharts(document.getElementById('paymentChart'),{
        ...dark, chart:{...dark.chart,type:'donut',height:160},
        series:pmData.map(p=>parseFloat(p.total)),
        labels:pmData.map(p=>p.payment_method),
        colors:['#10b981','#3b82f6','#f59e0b','#8b5cf6'],
        legend:{show:false}, plotOptions:{pie:{donut:{size:'60%'}}},
        dataLabels:{style:{fontSize:'10px'}},
    }).render();
}
</script>
