<?php
$dbFile = 'db.json';
$db = file_exists($dbFile) ? json_decode(file_get_contents($dbFile), true) : ['settings' => [], 'transactions' => []];
$settings = $db['settings'];

$yearsAvailable = array_unique(array_column($db['transactions'], 'year'));
if(empty($yearsAvailable)) $yearsAvailable[] = date('Y');
sort($yearsAvailable);

$selectedYear = $_GET['year'] ?? end($yearsAvailable);

$transactions = array_filter($db['transactions'], fn($t) => $t['year'] == $selectedYear);
usort($transactions, function($a, $b) {
    $res = strnatcmp($a['type'], $b['type']);
    if ($res === 0) $res = strnatcmp($a['category'], $b['category']);
    return $res;
});

// Kalkulasi Total
$total_pendapatan = 0; $total_belanja = 0; $total_pembiayaan = 0;
$belanja_per_bidang = [];

foreach ($transactions as $d) {
    $real = (float)$d['realization'];
    $pagu = (float)$d['budget'];
    
    if ($d['type'] == '4.PENDAPATAN') $total_pendapatan += $real;
    if ($d['type'] == '5.BELANJA') {
        $total_belanja += $real;
        $bidangName = $d['category'];
        if (!isset($belanja_per_bidang[$bidangName])) {
            $belanja_per_bidang[$bidangName] = ['budget' => 0, 'realization' => 0];
        }
        $belanja_per_bidang[$bidangName]['budget'] += $pagu;
        $belanja_per_bidang[$bidangName]['realization'] += $real;
    }
    if ($d['type'] == '6.PEMBIAYAAN') $total_pembiayaan += $real;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparansi Keuangan Desa <?= htmlspecialchars($settings['nama_desa'] ?? '') ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>@media print { body { display: none !important; } }</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased flex flex-col min-h-screen">

    <nav class="bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
        <div class="max-w-6xl mx-auto px-4 py-3 flex flex-row justify-between items-center gap-2">
            
            <div class="flex items-center gap-3">
                <?php if(!empty($settings['logo'])): ?>
                    <img src="<?= $settings['logo'] ?>" alt="Logo Desa" class="h-10 w-10 md:h-12 md:w-12 object-contain filter drop-shadow-sm">
                <?php endif; ?>
                <div class="hidden sm:block">
                    <h1 class="text-base md:text-lg font-black tracking-tight text-emerald-950 uppercase">Desa <?= htmlspecialchars($settings['nama_desa'] ?? 'Sirnasari') ?></h1>
                    <p class="text-[10px] md:text-xs text-slate-500 font-medium">Kab. <?= htmlspecialchars($settings['kabupaten'] ?? '-') ?>, <?= htmlspecialchars($settings['provinsi'] ?? '-') ?></p>
                </div>
            </div>
            
            <div class="flex items-center gap-2 md:gap-4">
                <a href="https://desasirnasari.id" class="hidden sm:flex items-center gap-1 bg-emerald-50 text-emerald-700 hover:bg-emerald-600 hover:text-white border border-emerald-200 px-3 md:px-4 py-1.5 rounded-full text-xs md:text-sm font-bold transition-all shadow-sm">
                    🌐 Portal Desa
                </a>
                
                <div class="flex items-center bg-slate-100 border p-1 rounded-xl">
                    <span class="text-[10px] md:text-xs font-bold text-slate-500 hidden md:inline pl-2">Tahun:</span>
                    <form method="GET" class="inline">
                        <select name="year" onchange="this.form.submit()" class="bg-white border text-xs md:text-sm font-mono font-bold py-1 px-2 rounded-lg outline-none cursor-pointer">
                            <?php foreach($yearsAvailable as $yr): ?>
                                <option value="<?= $yr ?>" <?= $selectedYear == $yr ? 'selected' : '' ?>><?= $yr ?></option>
                            <?php endforeach; ?>
                        </select>
                    </form>
                </div>

                <a href="https://desasirnasari.id" class="sm:hidden bg-emerald-100 text-emerald-700 px-3 py-1.5 rounded-lg text-[10px] font-bold">Portal</a>
            </div>
        </div>
    </nav>

    <main class="max-w-6xl mx-auto px-4 py-8 flex-grow">
        
        <div class="bg-gradient-to-r from-emerald-800 to-teal-700 text-white p-6 md:p-8 rounded-2xl shadow-sm text-center mb-8">
            <h2 class="text-xl md:text-3xl font-black">Laporan Transparansi Keuangan APBDes</h2>
            <p class="text-xs md:text-base text-emerald-100 mt-2">Data Anggaran Pendapatan dan Belanja Desa Real-time (T.A <?= htmlspecialchars($selectedYear) ?>)</p>
            <div class="mt-4 md:mt-6 inline-block bg-emerald-900/40 border border-emerald-500/30 text-xs md:text-sm py-1.5 px-6 rounded-full font-medium">
                Kepala Desa: <span class="font-bold text-emerald-200"><?= htmlspecialchars($settings['kepala_desa'] ?? '-') ?></span>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white p-4 md:p-6 rounded-xl shadow-sm border">
                <h3 class="text-center font-bold text-sm md:text-base text-slate-600 mb-4">Proporsi Anggaran Global</h3>
                <div class="relative h-56 md:h-64"><canvas id="globalPieChart"></canvas></div>
            </div>
            <div class="bg-white p-4 md:p-6 rounded-xl shadow-sm border">
                <h3 class="text-center font-bold text-sm md:text-base text-slate-600 mb-4">Komparatif Realisasi per Bidang Belanja</h3>
                <div class="relative h-56 md:h-64"><canvas id="belanjaBidangBarChart"></canvas></div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-sm border mb-8">
            <h3 class="text-base font-black border-b pb-2 text-rose-700 uppercase tracking-wide mb-4">📊 Rincian Akumulasi per Bidang Belanja</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <?php 
                if(empty($belanja_per_bidang)):
                    echo "<p class='text-sm italic text-gray-400 col-span-2'>Tidak ada rincian data belanja di tahun anggaran ini.</p>";
                else:
                foreach($belanja_per_bidang as $bName => $totals): 
                ?>
                <div class="bg-slate-50 border border-slate-100 p-4 rounded-xl flex flex-col justify-between shadow-sm">
                    <div class="text-[11px] md:text-xs font-black text-slate-700 leading-snug line-clamp-2 mb-3"><?= htmlspecialchars($bName) ?></div>
                    <div class="grid grid-cols-2 gap-3 border-t pt-3 mt-auto">
                        <div>
                            <span class="text-[10px] text-gray-400 font-bold block uppercase tracking-wider">Anggaran</span>
                            <span class="font-mono text-xs md:text-sm font-bold text-blue-600">Rp <?= number_format($totals['budget'], 0, ',', '.') ?></span>
                        </div>
                        <div>
                            <span class="text-[10px] text-gray-400 font-bold block uppercase tracking-wider">Realisasi</span>
                            <span class="font-mono text-xs md:text-sm font-bold text-emerald-600">Rp <?= number_format($totals['realization'], 0, ',', '.') ?></span>
                        </div>
                    </div>
                </div>
                <?php endforeach; endif; ?>
            </div>
        </div>

        <h2 class="text-xl font-black mb-4 text-slate-800">Rincian Komponen APBDes Berdasarkan Kategori</h2>
        <div class="space-y-3" x-data="{ openTab: null }">
            <?php 
            $jenis_master = ['4.PENDAPATAN', '5.BELANJA', '6.PEMBIAYAAN'];
            foreach($jenis_master as $mIdx => $mJenis): 
            ?>
            <div class="border border-slate-200 rounded-xl bg-white shadow-sm overflow-hidden">
                <button @click="openTab = openTab === <?= $mIdx ?> ? null : <?= $mIdx ?>" class="w-full flex justify-between items-center p-4 bg-slate-50 hover:bg-slate-100/70 transition duration-150">
                    <span class="font-bold text-sm md:text-base text-slate-800 tracking-wide"><?= $mJenis ?></span>
                    <svg class="w-5 h-5 text-slate-400 transform transition-transform" :class="openTab === <?= $mIdx ?> ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                
                <div x-show="openTab === <?= $mIdx ?>" x-collapse x-cloak class="border-t border-slate-100">
                    <div class="overflow-x-auto p-2 md:p-4">
                        <table class="w-full text-left border-collapse min-w-[750px]">
                            <thead>
                                <tr class="bg-slate-50 text-slate-500 text-[11px] md:text-xs uppercase font-bold border-b">
                                    <th class="p-3 w-1/4">Kategori Bidang</th>
                                    <th class="p-3">Uraian Nama Kegiatan</th>
                                    <th class="p-3 text-right w-36">Anggaran</th>
                                    <th class="p-3 text-right w-36">Realisasi</th>
                                    <th class="p-3 text-right w-32">Sisa</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y text-xs md:text-sm text-slate-700">
                                <?php 
                                $hasData = false;
                                foreach($transactions as $d): if($d['type'] == $mJenis): 
                                    $hasData = true;
                                ?>
                                <tr class="hover:bg-slate-50/50 transition">
                                    <td class="p-3 text-xs font-bold text-blue-800"><?= htmlspecialchars($d['category']) ?></td>
                                    <td class="p-3 font-medium text-slate-600"><?= htmlspecialchars($d['description']) ?></td>
                                    <td class="p-3 text-right font-mono text-[11px] md:text-xs font-bold">Rp <?= number_format($d['budget'], 0, ',', '.') ?></td>
                                    <td class="p-3 text-right font-mono text-[11px] md:text-xs font-bold text-emerald-700">Rp <?= number_format($d['realization'], 0, ',', '.') ?></td>
                                    <td class="p-3 text-right font-mono text-[11px] md:text-xs text-gray-500">Rp <?= number_format($d['budget'] - $d['realization'], 0, ',', '.') ?></td>
                                </tr>
                                <?php endif; endforeach; 
                                if(!$hasData):
                                ?>
                                <tr><td colspan="5" class="p-6 text-center italic text-gray-400 text-xs">Tidak ada entri data transaksi pada sub-klasifikasi ini.</td></tr>
                                <?php endif; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </main>

    <footer class="bg-slate-900 text-slate-300 pt-16 pb-8 border-t-[8px] border-emerald-600 mt-auto">
        <div class="max-w-6xl mx-auto px-4 grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 mb-12">
            
            <div class="md:col-span-5">
                <div class="flex items-center gap-4 mb-6">
                    <?php if(!empty($settings['logo'])): ?>
                        <div class="bg-white p-2 rounded-xl shadow-lg inline-block">
                            <img src="<?= $settings['logo'] ?>" alt="Logo Footer" class="h-12 w-12 object-contain">
                        </div>
                    <?php endif; ?>
                    <div>
                        <h3 class="text-xl md:text-2xl font-black text-white uppercase tracking-wider">Desa <?= htmlspecialchars($settings['nama_desa']) ?></h3>
                        <p class="text-emerald-400 text-sm font-semibold tracking-widest uppercase mt-1">Transparansi APBDes</p>
                    </div>
                </div>
                <p class="text-sm text-slate-400 leading-relaxed max-w-sm">
                    Pemerintahan Desa <?= htmlspecialchars($settings['nama_desa']) ?>, Kecamatan <?= htmlspecialchars($settings['kecamatan']) ?>, 
                    Kabupaten <?= htmlspecialchars($settings['kabupaten']) ?>, Provinsi <?= htmlspecialchars($settings['provinsi']) ?>. 
                    Berkomitmen mewujudkan tata kelola pemerintahan yang bersih, transparan, dan akuntabel.
                </p>
            </div>

            <div class="md:col-span-3">
                <h4 class="text-white font-bold mb-6 uppercase tracking-widest text-xs border-b border-slate-700 pb-3 inline-block">Tautan Penting</h4>
                <ul class="space-y-3 text-sm">
                    <li><a href="https://desasirnasari.id" class="flex items-center gap-2 hover:text-emerald-400 transition-colors"><span class="text-emerald-500">→</span> Portal Berita Desa</a></li>
                    <li><a href="#" class="flex items-center gap-2 hover:text-emerald-400 transition-colors"><span class="text-emerald-500">→</span> Sistem Informasi Desa</a></li>
                    <li><a href="admin.php" class="flex items-center gap-2 hover:text-emerald-400 transition-colors"><span class="text-emerald-500">→</span> Login Admin APBDes</a></li>
                </ul>
            </div>

            <div class="md:col-span-4">
                <h4 class="text-white font-bold mb-6 uppercase tracking-widest text-xs border-b border-slate-700 pb-3 inline-block">Informasi Publik</h4>
                <p class="text-sm text-slate-400 leading-relaxed mb-4">
                    Data pada sistem ini dikelola langsung oleh aparatur desa secara *real-time*. Publik berhak memantau rincian anggaran untuk kemajuan pembangunan bersama.
                </p>
                <div class="bg-slate-800 p-4 rounded-xl border border-slate-700/50">
                    <p class="text-xs text-slate-300 font-mono">Diperbarui pada: <?= date('d M Y') ?></p>
                </div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto px-4 border-t border-slate-800 pt-6 flex flex-col md:flex-row justify-between items-center text-xs md:text-sm text-slate-500">
            <p>&copy; <?= date('Y') ?> Pemerintah Desa <?= htmlspecialchars($settings['nama_desa']) ?>. Hak Cipta Dilindungi.</p>
            <p class="mt-4 md:mt-0 font-medium tracking-wide">
                Develover by <a href="#" class="text-emerald-400 font-bold hover:text-emerald-300 transition-colors">Coim Putra Creativa</a>
            </p>
        </div>
    </footer>

    <script>
        const totalPendapatan = <?= $total_pendapatan ?>;
        const totalBelanja = <?= $total_belanja ?>;
        const totalPembiayaan = <?= $total_pembiayaan ?>;

        new Chart(document.getElementById('globalPieChart').getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Pendapatan', 'Belanja', 'Pembiayaan'],
                datasets: [{ data: [totalPendapatan, totalBelanja, totalPembiayaan], backgroundColor: ['#10B981', '#F43F5E', '#3B82F6'], borderWidth: 0 }]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 11 } } } } }
        });

        <?php
        $labelsBidang = array_keys($belanja_per_bidang);
        $budgetBidang = array_column($belanja_per_bidang, 'budget');
        $realizationBidang = array_column($belanja_per_bidang, 'realization');
        ?>
        const labelsBidangData = <?= json_encode($labelsBidang) ?>;
        const shortLabels = labelsBidangData.map(str => str.replace("5. ", "").replace("BIDANG ", "").substring(0, 15) + '...');

        new Chart(document.getElementById('belanjaBidangBarChart').getContext('2d'), {
            type: 'bar',
            data: {
                labels: shortLabels,
                datasets: [
                    { label: 'Anggaran', data: <?= json_encode($budgetBidang) ?>, backgroundColor: '#3B82F6', borderRadius: 4 },
                    { label: 'Realisasi', data: <?= json_encode($realizationBidang) ?>, backgroundColor: '#10B981', borderRadius: 4 }
                ]
            },
            options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'top', labels: { boxWidth: 10, font: { size: 10 } } } }, scales: { y: { beginAtZero: true, ticks: { font: { size: 9 } } }, x: { ticks: { font: { size: 9 } } } } }
        });

        // KODE KEAMANAN ANTI-INSPECT / COPY / PRINT
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('keydown', e => {
            if (e.key === "F12" || (e.ctrlKey && e.shiftKey && ['I','J','C'].includes(e.key)) || (e.ctrlKey && ['U','P'].includes(e.key.toUpperCase()))) {
                e.preventDefault(); return false;
            }
        });
        setInterval(() => console.clear(), 1000);
    </script>
</body>
</html>