<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<div class="container pt-50 pb-100">
    <div class="row">
        <div class="col-lg-12">
            <div class="section-title mb-40 d-flex justify-content-between align-items-center">
                <h2><i class="fa fa-line-chart text-success"></i> Dashboard Analisis</h2>
                <span class="badge bg-success p-2 shadow-sm">Total Kunjungan: <?= $total ?></span>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-4">Perangkat Pengunjung</h5>
                    <div style="height: 250px;"><canvas id="chartPerangkat"></canvas></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-4">Asal Negara (Top 5)</h5>
                    <div style="height: 250px;"><canvas id="chartNegara"></canvas></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-lg-8 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Statistik 10 Berita Terkini</h5>
                    <div style="height: 300px;"><canvas id="chartInteraksiBerita"></canvas></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold text-danger"><i class="fa fa-heart"></i> Top 5 Likes</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        <?php foreach($top_berita as $top) : ?>
                            <li class="list-group-item d-flex justify-content-between align-items-center py-3">
                                <div class="text-truncate" style="max-width: 150px;"><strong><?= esc($top['judul']) ?></strong></div>
                                <span class="badge bg-danger rounded-pill"><?= $top['likes'] ?> <i class="fa fa-heart"></i></span>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 fw-bold"><i class="fa fa-history"></i> Log Kunjungan Terbaru</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="bg-light small fw-bold">
                                <tr>
                                    <th>Waktu</th>
                                    <th>IP Address</th>
                                    <th>Lokasi</th>
                                    <th>Tujuan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($logs as $log) : ?>
                                    <tr>
                                        <td class="small text-muted"><?= date('H:i:s d/m/y', strtotime($log['waktu_kunjung'])) ?></td>
                                        <td><code><?= $log['ip_address'] ?></code></td>
                                        <td><span class="badge bg-info text-dark"><?= $log['negara'] ?></span></td>
                                        <td class="small text-truncate" style="max-width: 250px;"><?= str_replace(base_url(), '', $log['url_tujuan']) ?></td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // AUTO REFRESH 15 DETIK
    setTimeout(() => { location.reload(); }, 15000);

    const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { position: 'bottom' } }
    };

    // 1. GRAFIK PERANGKAT
    new Chart(document.getElementById('chartPerangkat'), {
        type: 'pie',
        data: {
            labels: [<?php foreach($perangkat as $p) echo "'".$p['perangkat']."',"; ?>],
            datasets: [{
                data: [<?php foreach($perangkat as $p) echo $p['jumlah'].","; ?>],
                backgroundColor: ['#28a745', '#ffc107', '#17a2b8']
            }]
        },
        options: commonOptions
    });

    // 2. GRAFIK NEGARA
    new Chart(document.getElementById('chartNegara'), {
        type: 'bar',
        data: {
            labels: [<?php foreach($negara as $n) echo "'".$n['negara']."',"; ?>],
            datasets: [{ label: 'Kunjungan', data: [<?php foreach($negara as $n) echo $n['jumlah'].","; ?>], backgroundColor: '#28a745' }]
        },
        options: commonOptions
    });

    // 3. GRAFIK INTERAKSI (VIEW, LIKE, KOMENTAR)
    new Chart(document.getElementById('chartInteraksiBerita'), {
        type: 'bar',
        data: {
            labels: [<?php foreach($statistik as $s) echo "'".substr($s['judul'], 0, 15)."...',"; ?>],
            datasets: [
                { label: 'Views', data: [<?php foreach($statistik as $s) echo $s['views'].","; ?>], backgroundColor: '#17a2b8' },
                { label: 'Likes', data: [<?php foreach($statistik as $s) echo $s['likes'].","; ?>], backgroundColor: '#dc3545' },
                { label: 'Komentar', data: [<?php foreach($statistik as $s) echo $s['total_komentar'].","; ?>], backgroundColor: '#28a745' }
            ]
        },
        options: commonOptions
    });
</script>
<?= $this->endSection() ?>