<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<style>
.page-top { margin-bottom: 28px; }
.page-title { font-size:1.4rem; font-weight:700; color:var(--text-main); display:flex; align-items:center; gap:10px; }
.title-icon { width:36px; height:36px; background:linear-gradient(135deg, #4f8ef7, #7c5cfc); border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; color:#fff; }
.page-sub { font-size:.8rem; color:var(--text-muted); margin-top:4px; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:16px; margin-bottom:28px; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,.05); text-align:center; }
.stat-card .stat-value { font-size:1.8rem; font-weight:800; line-height:1; margin:8px 0; }
.stat-card .stat-label { font-size:.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

.table-card { background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:20px; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.table-card-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.table-card-title { font-size:.9rem; font-weight:600; color:var(--text-main); }
.table-responsive { overflow-x:auto; }
.sim-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.sim-table thead tr { background:#f8fafc; }
.sim-table thead th { padding:11px 16px; text-align:left; color:var(--text-muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); white-space:nowrap; }
.sim-table tbody tr { border-bottom:1px solid var(--border); transition:background .15s; }
.sim-table tbody tr:last-child { border-bottom:none; }
.sim-table tbody tr:hover { background:#f8fafc; }
.sim-table tbody td { padding:11px 16px; color:#334155; vertical-align:middle; }
.badge-sim { display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:20px; }
.badge-info { background:rgba(59,130,246,.12); color:#2563eb; border:1px solid rgba(59,130,246,.2); }
</style>

<div class="page-top">
    <div>
        <div class="page-title">
            <div class="title-icon">
                <i class="bi bi-journal-bookmark-fill"></i>
            </div>
            Buku Besar
        </div>
        <div class="page-sub">Rekap pemasukan dari penjualan & pengeluaran operasional</div>
    </div>
</div>

<!-- STAT CARDS -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-label">Total Pemasukan Penjualan</div>
        <div class="stat-value" style="color:#059669">Rp <?= number_format($totalPemasukan, 0, ',', '.') ?></div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Total Pengeluaran</div>
        <div class="stat-value" style="color:#dc2626">Rp <?= number_format($totalPengeluaran, 0, ',', '.') ?></div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Saldo Bersih</div>
        <div class="stat-value" style="color:<?= ($totalPemasukan - $totalPengeluaran) >= 0 ? '#059669' : '#dc2626' ?>">
            Rp <?= number_format($totalPemasukan - $totalPengeluaran, 0, ',', '.') ?>
        </div>
    </div>
</div>

<!-- TABEL PEMASUKAN -->
<div class="table-card">
    <div class="table-card-header">
        <span class="table-card-title"><i class="bi bi-arrow-down-left-circle-fill" style="color:#059669;margin-right:6px"></i>Pemasukan dari Penjualan</span>
    </div>
    <div class="table-responsive" style="max-height:400px; overflow-y:auto;">
        <table class="sim-table">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Order ID</th>
                    <th>Platform</th>
                    <th>Pembeli</th>
                    <th style="text-align:right;">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($penjualan as $p): ?>
                <tr>
                    <td style="white-space:nowrap; color:var(--text-muted)">
                        <?= date('d M Y', strtotime($p['create_time'])) ?>
                    </td>
                    <td style="font-family:monospace; font-size:.75rem; color:var(--text-muted)">
                        <?= $p['order_id'] ?>
                    </td>
                    <td>
                        <span class="badge-sim badge-info"><?= $p['platform'] ?></span>
                    </td>
                    <td style="font-size:.8rem"><?= $p['buyer_username'] ?></td>
                    <td style="text-align:right; font-weight:700; font-family:monospace; color:#059669;">
                        Rp <?= number_format($p['total_amount'], 0, ',', '.') ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <?php if(!empty($penjualan)): ?>
            <tfoot>
                <tr style="background:#f0fdf4; border-top:2px solid #bbf7d0;">
                    <td colspan="4" style="padding:11px 16px; font-weight:700; font-size:.8rem; color:#059669;">TOTAL PEMASUKAN</td>
                    <td style="padding:11px 16px; text-align:right; font-weight:800; font-family:monospace; color:#059669;">
                        Rp <?= number_format($totalPemasukan, 0, ',', '.') ?>
                    </td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
        <?php if(empty($penjualan)): ?>
            <div style="text-align:center; color:var(--text-muted); padding:2rem; font-size:.8rem;">Belum ada data penjualan selesai.</div>
        <?php endif; ?>
    </div>
</div>

<!-- TABEL PENGELUARAN -->
<div class="table-card">
    <div class="table-card-header">
        <span class="table-card-title"><i class="bi bi-arrow-up-right-circle-fill" style="color:#dc2626;margin-right:6px"></i>Pengeluaran Operasional</span>
    </div>
    <div class="table-responsive" style="max-height:400px; overflow-y:auto;">
        <table class="sim-table">
            <thead>
                <tr>
                    <th>Tanggal</th>
                    <th>Kategori</th>
                    <th>Keterangan</th>
                    <th style="text-align:right;">Nominal</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($pengeluaran as $t): ?>
                <tr>
                    <td style="white-space:nowrap; color:var(--text-muted)">
                        <?= date('d M Y', strtotime($t['tanggal_transaksi_kas'])) ?>
                    </td>
                    <td>
                        <div style="font-weight:600; color:var(--text-main); font-size:.8rem;"><?= $t['kategori_transaksi_kas'] ?></div>
                    </td>
                    <td>
                        <div style="font-size:.72rem; color:var(--text-muted);"><?= $t['keterangan_transaksi_kas'] ?></div>
                    </td>
                    <td style="text-align:right; font-weight:700; font-family:monospace; color:#dc2626;">
                        Rp <?= number_format($t['nominal_transaksi_kas'], 0, ',', '.') ?>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
            <?php if(!empty($pengeluaran)): ?>
            <tfoot>
                <tr style="background:#fef2f2; border-top:2px solid #fecaca;">
                    <td colspan="3" style="padding:11px 16px; font-weight:700; font-size:.8rem; color:#dc2626;">TOTAL PENGELUARAN</td>
                    <td style="padding:11px 16px; text-align:right; font-weight:800; font-family:monospace; color:#dc2626;">
                        Rp <?= number_format($totalPengeluaran, 0, ',', '.') ?>
                    </td>
                </tr>
            </tfoot>
            <?php endif; ?>
        </table>
        <?php if(empty($pengeluaran)): ?>
            <div style="text-align:center; color:var(--text-muted); padding:2rem; font-size:.8rem;">Belum ada catatan pengeluaran.</div>
        <?php endif; ?>
    </div>
</div>

<?= $this->endSection() ?>