<?php
require 'config.php';

if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}

// ==================== FILTER LOGIC ====================
$where = "1=1";
$params = [];
$filter_type = $_GET['filter'] ?? 'all';

$selected_bulan = isset($_GET['bulan']) ? (int)$_GET['bulan'] : (int)date('m');
$selected_tahun = isset($_GET['tahun']) ? (int)$_GET['tahun'] : (int)date('Y');

if ($filter_type === 'weekly') {
    $where .= " AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)";
    $periode_text = "7 Hari Terakhir";
} 
elseif ($filter_type === 'monthly') {
    $where .= " AND YEAR(created_at) = ? AND MONTH(created_at) = ?";
    $params[] = date('Y');
    $params[] = date('m');
    $periode_text = "Bulan Ini (" . date('F Y') . ")";
} 
elseif ($filter_type === 'custom' || (isset($_GET['bulan']) && isset($_GET['tahun']))) {
    $where .= " AND YEAR(created_at) = ? AND MONTH(created_at) = ?";
    $params[] = $selected_tahun;
    $params[] = $selected_bulan;
    $periode_text = date('F Y', mktime(0, 0, 0, $selected_bulan, 1, $selected_tahun));
    $filter_type = 'custom';
} 
else {
    $periode_text = "Semua Transaksi";
}

$sql = "SELECT * FROM transactions WHERE $where ORDER BY created_at DESC";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$transactions = $stmt->fetchAll();

// ==================== HITUNG STATISTIK ====================
$total_transaksi = count($transactions);
$total_omzet = 0;
$dinein = $takeaway = $catering = $gojek = $grab = $shopee = 0;

foreach ($transactions as $row) {
    $total_omzet += (int)$row['total']; 
    
    if ($row['order_type'] == 'dinein') $dinein++;
    elseif ($row['order_type'] == 'takeaway') $takeaway++;
    elseif ($row['order_type'] == 'catering') $catering++;
    elseif ($row['order_type'] == 'gojek') $gojek++;
    elseif ($row['order_type'] == 'grab') $grab++;
    elseif ($row['order_type'] == 'shopee') $shopee++;
}

$rata_rata = $total_transaksi > 0 ? round($total_omzet / $total_transaksi) : 0;
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riwayat Transaksi | GoldenWok</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --primary: #1a1a2e;
            --primary-light: #2d2d4a;
            --accent: #c8a951;
            --accent-light: #e8d48b;
            --accent-bg: rgba(200,169,81,0.08);
            --bg: #f5f4f1;
            --surface: #ffffff;
            --surface-dim: #fafaf8;
            --border: #e8e5df;
            --border-light: #f0eeea;
            --text: #1a1a2e;
            --text-secondary: #6b6b7b;
            --text-tertiary: #9a9aaa;
            --green: #16a34a;
            --green-bg: rgba(22,163,74,0.08);
            --green-border: rgba(22,163,74,0.2);
            --yellow: #ca8a04;
            --yellow-bg: rgba(202,138,4,0.08);
            --yellow-border: rgba(202,138,4,0.2);
            --blue: #2563eb;
            --blue-bg: rgba(37,99,235,0.06);
            --blue-border: rgba(37,99,235,0.15);
            --red: #dc2626;
            --red-bg: rgba(220,38,38,0.06);
            --red-border: rgba(220,38,38,0.15);
            --purple: #7c3aed;
            --purple-bg: rgba(124,58,237,0.06);
            --purple-border: rgba(124,58,237,0.15);
            --teal: #0d9488;
            --teal-bg: rgba(13,148,136,0.06);
            --teal-border: rgba(13,148,136,0.15);
            --radius-sm: 10px;
            --radius: 14px;
            --radius-lg: 18px;
            --radius-xl: 24px;
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
            --shadow: 0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.08);
        }

        body {
            background: var(--bg);
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
            color: var(--text);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
            padding: 24px;
        }

        .container { max-width: 1200px; margin: 0 auto; }

        /* ── PAGE HEADER ── */
        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
            flex-wrap: wrap;
            gap: 16px;
        }
        .page-title-group {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .page-icon {
            width: 48px;
            height: 48px;
            background: var(--primary);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 1.15rem;
        }
        .page-title {
            font-weight: 800;
            font-size: 1.6rem;
            color: var(--text);
            letter-spacing: -0.03em;
        }
        .page-sub {
            color: var(--text-tertiary);
            font-size: 0.85rem;
            font-weight: 500;
            margin-top: 2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .page-sub .period {
            color: var(--accent);
            font-weight: 700;
        }
        .btn-back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: var(--radius);
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.2s;
            font-family: inherit;
        }
        .btn-back:hover { border-color: var(--primary); color: var(--text); box-shadow: var(--shadow-sm); }
        .btn-back i { font-size: 0.75rem; }

        /* ── STATS ── */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
            margin-bottom: 24px;
        }
        @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr; } }

        .stat-card {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: 20px 22px;
            box-shadow: var(--shadow-sm);
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.2s;
        }
        .stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
        .stat-icon {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .stat-icon.accent { background: var(--accent-bg); color: var(--accent); }
        .stat-icon.blue { background: var(--blue-bg); color: var(--blue); }
        .stat-icon.green { background: var(--green-bg); color: var(--green); }
        .stat-icon.purple { background: var(--purple-bg); color: var(--purple); }
        .stat-label {
            font-size: 0.72rem;
            font-weight: 600;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 4px;
        }
        .stat-value {
            font-weight: 800;
            font-size: 1.45rem;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        .stat-value.accent { color: var(--accent); }
        .stat-value.primary { color: var(--primary); }
        .stat-value.blue { color: var(--blue); }
        .stat-detail {
            display: flex;
            gap: 10px;
            margin-top: 6px;
        }
        .stat-detail-item {
            font-size: 0.72rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .stat-detail-item i { font-size: 0.6rem; }
        .stat-detail-item.dinein { color: var(--blue); }
        .stat-detail-item.takeaway { color: var(--teal); }
        .stat-detail-item.catering { color: var(--purple); }
        .stat-detail-item.gojek { color: #00AA13; }
        .stat-detail-item.grab { color: #00B14F; }
        .stat-detail-item.shopee { color: #EE4D2D; }

        /* ── FILTER BAR ── */
        .filter-bar {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            padding: 14px 18px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;
        }
        .filter-segments {
            display: flex;
            background: var(--bg);
            border-radius: var(--radius-sm);
            padding: 3px;
            gap: 2px;
        }
        .filter-seg {
            padding: 8px 18px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-tertiary);
            text-decoration: none;
            transition: all 0.2s;
            font-family: inherit;
        }
        .filter-seg:hover { color: var(--text-secondary); }
        .filter-seg.active {
            background: var(--surface);
            color: var(--text);
            box-shadow: var(--shadow-sm);
        }
        .filter-divider {
            width: 1px;
            height: 28px;
            background: var(--border);
        }
        .filter-selects {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .filter-select {
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 8px 14px;
            font-size: 0.82rem;
            font-weight: 600;
            color: var(--text);
            font-family: inherit;
            outline: none;
            transition: all 0.2s;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }
        .filter-select:focus { border-color: var(--primary); background-color: var(--surface); box-shadow: 0 0 0 3px rgba(26,26,46,0.06); }
        .btn-apply {
            background: var(--primary);
            color: #fff;
            border: none;
            padding: 9px 20px;
            border-radius: var(--radius-sm);
            font-weight: 600;
            font-size: 0.82rem;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .btn-apply:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        .btn-apply i { font-size: 0.7rem; }

        /* ── TABLE ── */
        .table-card {
            background: var(--surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        .table-scroll { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; text-align: left; }
        td.text-right, th.text-right { text-align: right; }
        td.text-center, th.text-center { text-align: center; }
        thead tr {
            background: var(--surface-dim);
            border-bottom: 1px solid var(--border-light);
        }
        thead th {
            padding: 14px 20px;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-tertiary);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            white-space: nowrap;
        }
        tbody tr {
            border-bottom: 1px solid var(--border-light);
            transition: background 0.15s;
        }
        tbody tr:last-child { border-bottom: none; }
        tbody tr:hover { background: var(--surface-dim); }
        tbody td {
            padding: 16px 20px;
            font-size: 0.88rem;
            vertical-align: middle;
        }

        .invoice-cell {
            font-weight: 700;
            color: var(--primary);
            font-size: 0.82rem;
            font-variant-numeric: tabular-nums;
        }
        .date-cell .date-main {
            font-weight: 600;
            color: var(--text);
            font-size: 0.85rem;
        }
        .date-cell .date-time {
            font-size: 0.75rem;
            color: var(--text-tertiary);
            margin-top: 2px;
        }
        .customer-cell {
            font-weight: 600;
            color: var(--text);
        }
        .type-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }
        .type-pill i { font-size: 0.6rem; }
        .type-pill.dinein { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); }
        .type-pill.takeaway { background: var(--teal-bg); color: var(--teal); border: 1px solid var(--teal-border); }
        .type-pill.catering { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple-border); }
        .type-pill.gojek { background: rgba(0,170,19,0.08); color: #00AA13; border: 1px solid rgba(0,170,19,0.2); }
        .type-pill.grab { background: rgba(0,177,79,0.08); color: #00B14F; border: 1px solid rgba(0,177,79,0.2); }
        .type-pill.shopee { background: rgba(238,77,45,0.08); color: #EE4D2D; border: 1px solid rgba(238,77,45,0.2); }
        .type-pill.mixed { background: rgba(100,100,100,0.06); color: #888; border: 1px solid rgba(100,100,100,0.2); }
        .amount-cell {
            font-weight: 700;
            color: var(--text);
            font-size: 0.92rem;
            text-align: right;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.01em;
        }
        .print-btn {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            border: 1.5px solid var(--border);
            background: var(--surface-dim);
            color: var(--text-tertiary);
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
        }
        .print-btn:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }

        /* ── EMPTY STATE ── */
        .empty-row td {
            text-align: center !important;
            padding: 60px 20px !important;
        }
        .empty-state-icon {
            width: 64px;
            height: 64px;
            background: var(--bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
            color: var(--text-tertiary);
            font-size: 1.4rem;
        }
        .empty-state-text {
            color: var(--text-tertiary);
            font-size: 0.9rem;
            font-weight: 500;
        }

        /* ── SCROLLBAR ── */
        .table-scroll::-webkit-scrollbar { height: 5px; }
        .table-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

        /* ── RESPONSIVE ── */
        @media (max-width: 768px) {
            body { padding: 12px; }
            .page-header { margin-bottom: 20px; }
            .page-title { font-size: 1.3rem; }
            .filter-bar { padding: 10px 12px; gap: 8px; }
            thead th, tbody td { padding: 12px 14px; }
        }
    </style>
</head>
<body>

<div class="container">

    <!-- PAGE HEADER -->
    <div class="page-header">
        <div class="page-title-group">
            <div class="page-icon"><i class="fas fa-receipt"></i></div>
            <div>
                <div class="page-title">Riwayat Transaksi</div>
                <div class="page-sub">
                    <i class="fas fa-calendar-days" style="font-size:0.75rem;"></i>
                    Periode: <span class="period"><?= $periode_text ?></span>
                </div>
            </div>
        </div>
        <a href="pos.php" class="btn-back"><i class="fas fa-arrow-left"></i> Kembali ke POS</a>
    </div>

    <!-- STATS -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon accent"><i class="fas fa-coins"></i></div>
            <div>
                <div class="stat-label">Total Pemasukan</div>
                <div class="stat-value accent">Rp <?= number_format($total_omzet) ?></div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon blue"><i class="fas fa-file-invoice"></i></div>
            <div>
                <div class="stat-label">Total Transaksi</div>
                <div class="stat-value primary"><?= number_format($total_transaksi) ?></div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon green"><i class="fas fa-chart-line"></i></div>
            <div>
                <div class="stat-label">Rata-rata / Nota</div>
                <div class="stat-value blue">Rp <?= number_format($rata_rata) ?></div>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon purple"><i class="fas fa-layer-group"></i></div>
            <div>
                <div class="stat-label">Metode Order</div>
                <div class="stat-detail">
                    <span class="stat-detail-item dinein"><i class="fas fa-chair"></i> <?= $dinein ?></span>
                    <span class="stat-detail-item takeaway"><i class="fas fa-bag-shopping"></i> <?= $takeaway ?></span>
                    <span class="stat-detail-item catering"><i class="fas fa-utensils"></i> <?= $catering ?></span>
                    <span class="stat-detail-item gojek"><i class="fas fa-motorcycle"></i> <?= $gojek ?></span>
                    <span class="stat-detail-item grab"><i class="fas fa-car"></i> <?= $grab ?></span>
                    <span class="stat-detail-item shopee"><i class="fas fa-basket-shopping"></i> <?= $shopee ?></span>
                </div>
            </div>
        </div>
    </div>

    <!-- FILTER BAR -->
    <div class="filter-bar">
        <div class="filter-segments">
            <a href="?filter=all" class="filter-seg <?= $filter_type=='all' ? 'active' : '' ?>">Semua</a>
            <a href="?filter=weekly" class="filter-seg <?= $filter_type=='weekly' ? 'active' : '' ?>">Minggu</a>
            <a href="?filter=monthly" class="filter-seg <?= $filter_type=='monthly' ? 'active' : '' ?>">Bulan Ini</a>
        </div>

        <div class="filter-divider"></div>

        <form method="GET" class="filter-selects">
            <select name="bulan" class="filter-select">
                <?php for($m=1; $m<=12; $m++): ?>
                    <option value="<?= $m ?>" <?= $selected_bulan == $m ? 'selected' : '' ?>>
                        <?= date('F', mktime(0,0,0,$m,1)) ?>
                    </option>
                <?php endfor; ?>
            </select>
            <select name="tahun" class="filter-select">
                <?php 
                $currentYear = date('Y');
                for($y=$currentYear-1; $y<=$currentYear+1; $y++): ?>
                    <option value="<?= $y ?>" <?= $selected_tahun == $y ? 'selected' : '' ?>><?= $y ?></option>
                <?php endfor; ?>
            </select>
            <button type="submit" name="filter" value="custom" class="btn-apply"><i class="fas fa-check"></i> Terapkan</button>
        </form>
    </div>

    <!-- TABLE -->
    <div class="table-card">
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Invoice</th>
                        <th>Waktu</th>
                        <th>Customer</th>
                        <th style="text-align:center">Tipe</th>
                        <th style="text-align:right">Total</th>
                        <th style="text-align:center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($transactions)): ?>
                        <tr class="empty-row">
                            <td colspan="6">
                                <div class="empty-state-icon"><i class="fas fa-folder-open"></i></div>
                                <div class="empty-state-text">Tidak ada data transaksi untuk periode ini.</div>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($transactions as $row): ?>
                        <tr>
                            <td class="invoice-cell"><?= htmlspecialchars($row['invoice']) ?></td>
                            <td class="date-cell">
                                <div class="date-main"><?= date('d M Y', strtotime($row['created_at'])) ?></div>
                                <div class="date-time"><?= date('H:i', strtotime($row['created_at'])) ?> WIB</div>
                            </td>
                            <td class="customer-cell"><?= htmlspecialchars($row['customer_name']) ?></td>
                            <td style="text-align:center">
                                <?php
                                    $typeClass = $row['order_type'];
                                    $typeIcons = ['dinein'=>'fa-chair','takeaway'=>'fa-bag-shopping','catering'=>'fa-utensils','gojek'=>'fa-motorcycle','grab'=>'fa-car','shopee'=>'fa-basket-shopping','mixed'=>'fa-shuffle'];
                                    $typeIcon = $typeIcons[$typeClass] ?? 'fa-chair';
                                    $typeLabels = ['gojek'=>'Gojek','grab'=>'Grab','shopee'=>'ShopeeFood','mixed'=>'Campur'];
                                    $typeLabel = $typeLabels[$typeClass] ?? ucfirst($typeClass);
                                ?>
                                <span class="type-pill <?= $typeClass ?>">
                                    <i class="fas <?= $typeIcon ?>"></i> <?= $typeLabel ?>
                                </span>
                            </td>
                            <td class="amount-cell">Rp <?= number_format($row['total']) ?></td>
                            <td style="text-align:center">
                                <button onclick="window.open('print_struk.php?id=<?= $row['id'] ?>', '_blank')" class="print-btn" title="Cetak Struk 58mm">
                                    <i class="fas fa-print"></i> 58mm
                                </button>
                                <button onclick="window.open('print_struk_a4.php?id=<?= $row['id'] ?>', '_blank')" class="print-btn" title="Cetak Struk A4" style="margin-left:4px;background:var(--accent-bg);color:var(--accent);border:1.5px solid var(--accent);">
                                    <i class="fas fa-file-alt"></i> A4
                                </button>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ==================== REKAPAN HARIAN ==================== -->
    <?php
    // Grup transaksi per tanggal dari data yang sudah ada
    $daily_recap = [];
    foreach ($transactions as $row) {{
        $dt = date("Y-m-d", strtotime($row["created_at"]));
        if (!isset($daily_recap[$dt])) {{
            $daily_recap[$dt] = ["count" => 0, "total" => 0];
        }}
        $daily_recap[$dt]["count"]++;
        $daily_recap[$dt]["total"] += (int)$row["total"];
    }}
    ksort($daily_recap);
    $grand_count = 0; $grand_total = 0;
    ?>
    <?php if (!empty($daily_recap)): ?>
    <div class="recap-section" style="margin-top:20px;">
        <div class="recap-header" style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px;">
            <h3 style="margin:0;font-size:1.1rem;font-weight:700;">Rekapan Harian</h3>
            <div style="display:flex;gap:8px;flex-wrap:wrap;">
                <button onclick="saveRecapImage()" class="btn-recap" style="background:var(--green-bg);color:var(--green);border-color:var(--green-border);">
                    <i class="fas fa-camera"></i> Simpan Gambar
                </button>
                <a href="report_a4.php?mode=daily&date=<?= date('Y-m-d') ?>" target="_blank" class="btn-recap">
                    <i class="fas fa-calendar-day"></i> Hari Ini (A4)
                </a>
                <a href="report_a4.php?mode=weekly" target="_blank" class="btn-recap">
                    <i class="fas fa-calendar-week"></i> Mingguan (A4)
                </a>
                <a href="report_a4.php?mode=monthly&bulan=<?= date('m') ?>&tahun=<?= date('Y') ?>" target="_blank" class="btn-recap">
                    <i class="fas fa-calendar-alt"></i> Bulanan (A4)
                </a>
            </div>
        </div>
        <div class="table-card" style="margin-bottom:0;">
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Tanggal</th>
                            <th class="text-center">Jml Transaksi</th>
                            <th class="text-right">Total Omzet</th>
                            <th class="text-right">Rata-rata</th>
                            <th class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($daily_recap as $dt => $dg): 
                            $grand_count += $dg["count"];
                            $grand_total += $dg["total"];
                            $avg = round($dg["total"] / $dg["count"]);
                        ?>
                        <tr>
                            <td style="font-weight:600;"><?= date("D, d M Y", strtotime($dt)) ?></td>
                            <td class="text-center"><?= $dg["count"] ?></td>
                            <td class="text-right" style="font-weight:600;color:var(--accent);">Rp <?= number_format($dg["total"]) ?></td>
                            <td class="text-right">Rp <?= number_format($avg) ?></td>
                            <td class="text-center">
                                <a href="recap_struk.php?date=<?= $dt ?>" target="_blank" class="print-btn" title="Cetak Struk 58mm" style="text-decoration:none;">
                                    <i class="fas fa-receipt"></i>
                                </a>
                                <a href="report_a4.php?mode=daily&date=<?= $dt ?>" target="_blank" class="print-btn" title="Cetak A4" style="text-decoration:none;margin-left:3px;">
                                    <i class="fas fa-print"></i>
                                </a>
                                <button onclick="saveRecapImage()" class="print-btn" title="Simpan Gambar" style="margin-left:3px;background:var(--green-bg);color:var(--green);border:1.5px solid var(--green-border);">
                                    <i class="fas fa-camera"></i>
                                </button>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                        <tr style="background:var(--surface-dim);font-weight:700;font-size:0.9rem;">
                            <td>TOTAL</td>
                            <td class="text-center"><?= $grand_count ?></td>
                            <td class="text-right" style="color:var(--accent);">Rp <?= number_format($grand_total) ?></td>
                            <td class="text-right">Rp <?= number_format($grand_count > 0 ? round($grand_total / $grand_count) : 0) ?></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <style>
        .btn-recap {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 8px 16px; border-radius: var(--radius-sm);
            background: var(--surface); border: 1.5px solid var(--border);
            color: var(--text-secondary); font-weight: 600; font-size: 0.8rem;
            text-decoration: none; transition: all 0.2s; font-family: inherit;
        }
        .btn-recap:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); }
        .btn-recap i { font-size: 0.75rem; }
    </style>
    <?php endif; ?>

</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
function saveRecapImage() {
    const recap = document.querySelector('.recap-section');
    const btn = document.querySelector('.btn-recap[style*="green"]');
    if (!recap) return;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Memproses...';
    btn.disabled = true;
    
    html2canvas(recap, {
        backgroundColor: '#ffffff',
        scale: 2,
        useCORS: true
    }).then(canvas => {
        const link = document.createElement('a');
        link.download = 'Rekapan_GoldenWok_' + new Date().toISOString().slice(0,10) + '.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
        btn.innerHTML = '<i class="fas fa-camera"></i> Simpan Gambar';
        btn.disabled = false;
    }).catch(() => {
        btn.innerHTML = '<i class="fas fa-camera"></i> Simpan Gambar';
        btn.disabled = false;
        alert('Gagal menyimpan gambar');
    });
}
</script>
</body>
</html>