<?php
$paymentIcons = [
    'cash' => '<rect x="2" y="6" width="20" height="12" rx="2"></rect><circle cx="12" cy="12" r="2"></circle><path d="M6 12h.01"></path><path d="M18 12h.01"></path>',
    'debit' => '<rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line>',
    'qris' => '<rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><path d="M14 14h3v3h-3zM19 14h2v2h-2zM14 19h2v2h-2zM19 19h2v2h-2z"></path>',
    'transfer' => '<polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path>',
];
$paymentColors = ['cash' => 'green', 'debit' => 'blue', 'qris' => 'violet', 'transfer' => 'amber'];
$paymentLabels = ['cash' => 'Tunai', 'debit' => 'Kartu Debit', 'qris' => 'QRIS', 'transfer' => 'Transfer Bank'];
$dateLabel = date('d F Y', strtotime($selectedDate));
?>
<div class="hero">
    <div>
        <h2 style="margin:0 0 6px;">Laporan Harian</h2>
        <p style="margin:0; opacity:0.95;">Ringkasan penjualan per jam untuk tanggal yang dipilih.</p>
    </div>
</div>

<div class="panel">
    <h3 style="margin-top:0;">Pilih Tanggal</h3>
    <form method="get" action="/owner/report-daily" class="form-grid">
        <input type="date" name="date" value="<?= esc($selectedDate) ?>">
        <button class="btn-primary" type="submit">Tampilkan</button>
    </form>
</div>

<div class="grid">
    <div class="stat-card">
        <span class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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></span>
        <div>
            <h3>Total Penjualan <?= esc($dateLabel) ?></h3>
            <div class="big">Rp <?= number_format($summary['totalSales'], 0, ',', '.') ?></div>
        </div>
    </div>
    <div class="stat-card">
        <span class="stat-icon violet"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"></path><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg></span>
        <div>
            <h3>Total Transaksi</h3>
            <div class="big"><?= esc($summary['transactionCount']) ?></div>
        </div>
    </div>
    <div class="stat-card">
        <span class="stat-icon amber"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg></span>
        <div>
            <h3>Layanan Terlaris</h3>
            <div class="big" style="font-size:16px;"><?= esc($summary['bestService']) ?></div>
        </div>
    </div>
    <div class="stat-card">
        <span class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.59 13.41L11 3.83V3H3v8h.83l9.58 9.59a2 2 0 0 0 2.83 0l4.35-4.35a2 2 0 0 0 0-2.83z"></path><circle cx="6.5" cy="6.5" r="1.5"></circle></svg></span>
        <div>
            <h3>Total Poin Ditukar</h3>
            <div class="big"><?= esc(number_format($totalPointsRedeemed, 0, ',', '.')) ?> poin</div>
        </div>
    </div>
</div>

<div class="panel">
    <span class="pill">Metode Pembayaran</span>
    <h3 style="margin:6px 0 14px;">Total penjualan tanggal ini berdasarkan metode bayar</h3>
    <div class="grid" style="margin-bottom:0;">
        <?php foreach ($paymentBreakdown as $payment) : ?>
            <div class="stat-card">
                <span class="stat-icon <?= esc($paymentColors[$payment['method']] ?? 'green') ?>"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><?= $paymentIcons[$payment['method']] ?? '' ?></svg></span>
                <div>
                    <h3><?= esc($payment['label']) ?></h3>
                    <div class="big">Rp <?= number_format($payment['total'], 0, ',', '.') ?></div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
</div>

<div class="panel">
    <span class="pill">Jam Tersibuk</span>
    <h3 style="margin:6px 0 0;">Grafik penjualan berdasarkan jam</h3>
    <?php if (($hourly['busiestCount'] ?? 0) > 0) : ?>
        <p class="muted" style="margin:4px 0 12px;">Jam paling ramai: <strong style="color:var(--text);"><?= esc($hourly['busiestLabel']) ?></strong> dengan <strong style="color:var(--text);"><?= esc($hourly['busiestCount']) ?></strong> transaksi.</p>
    <?php else : ?>
        <p class="muted" style="margin:4px 0 12px;">Belum ada transaksi pada tanggal ini.</p>
    <?php endif; ?>
    <canvas id="hourlyChart" height="140"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
    const hourlyCtx = document.getElementById('hourlyChart');
    if (!hourlyCtx) return;
    new Chart(hourlyCtx, {
        type: 'bar',
        data: {
            labels: <?= json_encode($hourly['labels']) ?>,
            datasets: [{
                label: 'Jumlah Transaksi',
                data: <?= json_encode($hourly['counts']) ?>,
                backgroundColor: '#2563eb',
                borderRadius: 6
            }]
        },
        options: {
            responsive: true,
            scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
            plugins: { legend: { display: false } }
        }
    });
});
</script>

<div class="panel">
    <span class="pill">Layanan Paling Laku</span>
    <h3>Jasa / produk yang paling sering dipesan tanggal ini</h3>
    <?php if (empty($topServices)) : ?>
        <p class="muted" style="margin:0;">Belum ada transaksi pada tanggal ini.</p>
    <?php else : ?>
        <ul class="muted">
            <?php foreach ($topServices as $service) : ?>
                <li><?= esc($service['name']) ?> — <?= esc($service['count']) ?> transaksi</li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
</div>

<div class="panel">
    <h3>Daftar Transaksi</h3>
    <div class="table-wrap">
        <table>
            <thead>
                <tr><th>ID</th><th>Pelanggan</th><th>Kasir</th><th>Barber</th><th>Total</th><th>Metode Bayar</th><th>Waktu</th></tr>
            </thead>
            <tbody>
                <?php foreach ($dailyTransactions as $transaction) : ?>
                    <?php $paymentMethod = $transaction['payment_method'] ?? 'cash'; ?>
                    <tr>
                        <td><?= esc($transaction['id']) ?></td>
                        <td><?= esc($transaction['customer']) ?></td>
                        <td><?= esc($transaction['cashier']) ?></td>
                        <td><?= esc($transaction['barber']) ?></td>
                        <td>Rp <?= number_format($transaction['total'], 0, ',', '.') ?></td>
                        <td><span class="pill" style="margin:0;"><?= esc($paymentLabels[$paymentMethod] ?? 'Tunai') ?></span></td>
                        <td><?= esc(date('H:i', strtotime($transaction['created_at']))) ?></td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($dailyTransactions)) : ?>
                    <tr><td colspan="7" class="muted">Tidak ada transaksi pada tanggal ini.</td></tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>
