<?= $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(180px, 1fr)); gap:16px; margin-bottom:24px; }
.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.5rem; font-weight:800; line-height:1; margin:8px 0; }
.stat-card .stat-label { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; }

.tab-bar { display:flex; gap:4px; margin-bottom:20px; background:#f1f5f9; padding:4px; border-radius:10px; width:fit-content; }
.tab-btn { padding:8px 18px; border:none; background:transparent; border-radius:8px; font-size:.83rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.tab-btn.active { background:#fff; color:var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.1); }

.tab-pane { display:none; }
.tab-pane.active { display:block; }

.filter-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.sim-select, .sim-input { background:#fff; border:1px solid var(--border); color:var(--text-main); border-radius:8px; padding:7px 12px; font-size:.8rem; outline:none; transition:border-color .15s; }
.sim-select:focus, .sim-input:focus { border-color:var(--accent); }

.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:14px 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:10px 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:10px 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-success { background:rgba(16,185,129,.12); color:#059669; border:1px solid rgba(16,185,129,.2); }
.badge-danger { background:rgba(239,68,68,.12); color:#dc2626; border:1px solid rgba(239,68,68,.2); }
.progress-bar-wrap { background:#f1f5f9; border-radius:99px; height:6px; min-width:80px; }
.progress-bar-fill { height:6px; border-radius:99px; background:linear-gradient(90deg,#3b82f6,#6366f1); }
</style>

<div class="page-top">
    <div>
        <div class="page-title">
            <div class="title-icon"><i class="bi bi-graph-up-arrow"></i></div>
            Laporan Keuangan
        </div>
        <div class="page-sub">Arus kas, rekap pengeluaran, dan posisi kas harian</div>
    </div>
</div>

<!-- STAT SUMMARY -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-label">Total Pemasukan</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:<?= $saldoBersih >= 0 ? '#059669' : '#dc2626' ?>">
            Rp <?= number_format($saldoBersih, 0, ',', '.') ?>
        </div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Transaksi Bulan Ini</div>
        <div class="stat-value" style="color:var(--accent)"><?= $totalTransaksiBulanIni ?></div>
    </div>
</div>

<!-- TABS -->
<div class="tab-bar">
    <button class="tab-btn active" onclick="switchTab('arus-kas', this)"><i class="bi bi-arrow-left-right"></i> Arus Kas</button>
    <button class="tab-btn" onclick="switchTab('rekap-kategori', this)"><i class="bi bi-pie-chart"></i> Rekap Kategori</button>
    <button class="tab-btn" onclick="switchTab('saldo-harian', this)"><i class="bi bi-calendar3"></i> Saldo Harian</button>
</div>

<!-- ============ TAB 1: ARUS KAS ============ -->
<div id="tab-arus-kas" class="tab-pane active">
    <div class="filter-row">
        <select class="sim-select" id="filterBulanArus" onchange="filterArusKas()">
            <option value="">Semua Bulan</option>
            <?php foreach($daftarBulan as $b): ?>
                <option value="<?= $b ?>"><?= date('F Y', strtotime($b . '-01')) ?></option>
            <?php endforeach; ?>
        </select>
    </div>

    <div class="table-card">
        <div class="table-card-header">
            <span class="table-card-title"><i class="bi bi-arrow-left-right" style="color:var(--accent);margin-right:6px"></i>Laporan Arus Kas</span>
        </div>
        <div class="table-responsive">
            <table class="sim-table" id="tabelArusKas">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Tipe</th>
                        <th>Kategori</th>
                        <th>Keterangan</th>
                        <th style="text-align:right;">Nominal</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($arusKas as $row): ?>
                    <tr data-bulan="<?= substr($row['tanggal'], 0, 7) ?>">
                        <td style="white-space:nowrap; color:var(--text-muted)"><?= date('d M Y', strtotime($row['tanggal'])) ?></td>
                        <td>
                            <?php if($row['tipe'] === 'Pemasukan'): ?>
                                <span class="badge-sim badge-success"><i class="bi bi-arrow-down-left"></i> Masuk</span>
                            <?php else: ?>
                                <span class="badge-sim badge-danger"><i class="bi bi-arrow-up-right"></i> Keluar</span>
                            <?php endif; ?>
                        </td>
                        <td style="font-size:.8rem; font-weight:600;"><?= $row['kategori'] ?></td>
                        <td style="font-size:.75rem; color:var(--text-muted);"><?= $row['keterangan'] ?></td>
                        <td style="text-align:right; font-weight:700; font-family:monospace; color:<?= $row['tipe'] === 'Pemasukan' ? '#059669' : '#dc2626' ?>">
                            <?= $row['tipe'] === 'Pemasukan' ? '+' : '-' ?> Rp <?= number_format($row['nominal'], 0, ',', '.') ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?php if(empty($arusKas)): ?>
                <div style="text-align:center; color:var(--text-muted); padding:2rem; font-size:.8rem;">Belum ada data.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- ============ TAB 2: REKAP KATEGORI ============ -->
<div id="tab-rekap-kategori" class="tab-pane">
    <div class="table-card">
        <div class="table-card-header">
            <span class="table-card-title"><i class="bi bi-pie-chart" style="color:var(--accent);margin-right:6px"></i>Rekap Pengeluaran per Kategori</span>
        </div>
        <div class="table-responsive">
            <table class="sim-table">
                <thead>
                    <tr>
                        <th>Kategori</th>
                        <th style="text-align:right;">Total</th>
                        <th style="text-align:right;">Transaksi</th>
                        <th>Proporsi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($rekapKategori as $k): ?>
                    <tr>
                        <td style="font-weight:600; font-size:.83rem;"><?= $k['kategori'] ?></td>
                        <td style="text-align:right; font-weight:700; font-family:monospace; color:#dc2626;">
                            Rp <?= number_format($k['total'], 0, ',', '.') ?>
                        </td>
                        <td style="text-align:right; color:var(--text-muted);"><?= $k['jumlah'] ?>x</td>
                        <td style="min-width:120px;">
                            <?php $pct = $totalPengeluaran > 0 ? round($k['total'] / $totalPengeluaran * 100, 1) : 0; ?>
                            <div style="display:flex; align-items:center; gap:8px;">
                                <div class="progress-bar-wrap" style="flex:1">
                                    <div class="progress-bar-fill" style="width:<?= $pct ?>%"></div>
                                </div>
                                <span style="font-size:.72rem; color:var(--text-muted); white-space:nowrap"><?= $pct ?>%</span>
                            </div>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
                <?php if(!empty($rekapKategori)): ?>
                <tfoot>
                    <tr style="background:#fef2f2; border-top:2px solid #fecaca;">
                        <td style="padding:10px 16px; font-weight:700; font-size:.8rem; color:#dc2626;">TOTAL</td>
                        <td style="padding:10px 16px; text-align:right; font-weight:800; font-family:monospace; color:#dc2626;">
                            Rp <?= number_format($totalPengeluaran, 0, ',', '.') ?>
                        </td>
                        <td colspan="2"></td>
                    </tr>
                </tfoot>
                <?php endif; ?>
            </table>
            <?php if(empty($rekapKategori)): ?>
                <div style="text-align:center; color:var(--text-muted); padding:2rem; font-size:.8rem;">Belum ada data pengeluaran.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- ============ TAB 3: SALDO HARIAN ============ -->
<div id="tab-saldo-harian" class="tab-pane">
    <div class="filter-row">
        <select class="sim-select" id="filterBulanSaldo" onchange="filterSaldoHarian()">
            <option value="">Semua</option>
            <?php foreach($daftarBulan as $b): ?>
                <option value="<?= $b ?>"><?= date('F Y', strtotime($b . '-01')) ?></option>
            <?php endforeach; ?>
        </select>
    </div>

    <div class="table-card">
        <div class="table-card-header">
            <span class="table-card-title"><i class="bi bi-calendar3" style="color:var(--accent);margin-right:6px"></i>Posisi Saldo Kas Harian</span>
        </div>
        <div class="table-responsive">
            <table class="sim-table" id="tabelSaldoHarian">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th style="text-align:right;">Pemasukan</th>
                        <th style="text-align:right;">Pengeluaran</th>
                        <th style="text-align:right;">Saldo Akhir Hari</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach($saldoHarian as $hari): ?>
                    <tr data-bulan="<?= substr($hari['tanggal'], 0, 7) ?>">
                        <td style="white-space:nowrap; font-weight:600;"><?= date('d M Y', strtotime($hari['tanggal'])) ?></td>
                        <td style="text-align:right; color:#059669; font-family:monospace;">
                            <?= $hari['pemasukan'] > 0 ? '+Rp ' . number_format($hari['pemasukan'], 0, ',', '.') : '-' ?>
                        </td>
                        <td style="text-align:right; color:#dc2626; font-family:monospace;">
                            <?= $hari['pengeluaran'] > 0 ? '-Rp ' . number_format($hari['pengeluaran'], 0, ',', '.') : '-' ?>
                        </td>
                        <td style="text-align:right; font-weight:800; font-family:monospace; color:<?= $hari['saldo_akhir'] >= 0 ? '#059669' : '#dc2626' ?>">
                            Rp <?= number_format($hari['saldo_akhir'], 0, ',', '.') ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
            <?php if(empty($saldoHarian)): ?>
                <div style="text-align:center; color:var(--text-muted); padding:2rem; font-size:.8rem;">Belum ada data.</div>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
function switchTab(id, btn) {
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.getElementById('tab-' + id).classList.add('active');
    btn.classList.add('active');
}

function filterArusKas() {
    const val = document.getElementById('filterBulanArus').value;
    document.querySelectorAll('#tabelArusKas tbody tr').forEach(tr => {
        tr.style.display = (!val || tr.dataset.bulan === val) ? '' : 'none';
    });
}

function filterSaldoHarian() {
    const val = document.getElementById('filterBulanSaldo').value;
    document.querySelectorAll('#tabelSaldoHarian tbody tr').forEach(tr => {
        tr.style.display = (!val || tr.dataset.bulan === val) ? '' : 'none';
    });
}
</script>

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