<?php
require_once __DIR__ . '/includes/header.php';

/* ==============================
   1. Hitung total data
================================ */
$total_dokumen     = $pdo->query("SELECT COUNT(*) FROM documents")->fetchColumn();
$total_audit       = $pdo->query("SELECT COUNT(*) FROM audits")->fetchColumn();
$total_kegiatan    = $pdo->query("SELECT COUNT(*) FROM activities")->fetchColumn();
$total_berita      = $pdo->query("SELECT COUNT(*) FROM news")->fetchColumn();
$total_akreditasi  = $pdo->query("SELECT COUNT(*) FROM accreditation")->fetchColumn();
$total_temuan      = $pdo->query("SELECT COUNT(*) FROM audit_findings")->fetchColumn();

/* ==============================
   2. Info tambahan
================================ */
$total_audit_open     = $pdo->query("SELECT COUNT(*) FROM audit_findings WHERE status='open'")->fetchColumn();
$total_audit_progress = $pdo->query("SELECT COUNT(*) FROM audit_findings WHERE status='in_progress'")->fetchColumn();
$total_audit_closed   = $pdo->query("SELECT COUNT(*) FROM audit_findings WHERE status='closed'")->fetchColumn();

$total_doc_published  = $pdo->query("SELECT COUNT(*) FROM documents WHERE status='published'")->fetchColumn();

/* ==============================
   3. Data kegiatan per bulan
================================ */
$chart_data = [];
for ($i = 1; $i <= 12; $i++) {
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM activities WHERE MONTH(date_start)=? AND YEAR(date_start)=YEAR(CURDATE())");
    $stmt->execute([$i]);
    $chart_data[] = (int)$stmt->fetchColumn();
}

/* ==============================
   4. Berita terbaru
================================ */
$berita = $pdo->query("SELECT title, created_at FROM news ORDER BY created_at DESC LIMIT 5")->fetchAll();
?>

<style>
  :root {
    --hijau: #084D36;
    --coklat: #CC9933;
    --cream: #FFFF99;
  }

  main.main-content { padding-top: 90px !important; }

  .section-title {
    color: var(--hijau);
    font-weight: 700;
    border-left: 5px solid var(--coklat);
    padding-left: 10px;
    margin-bottom: 1.5rem;
  }

  .stat-card {
    border: none;
    border-radius: 14px;
    color: #fff;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    padding: 25px 10px;
    flex: 1;
    min-width: 180px;
  }

  .stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  }

  .card-green { background: linear-gradient(135deg, #084D36, #0c7351); }
  .card-gold  { background: linear-gradient(135deg, #CC9933, #e0b84a); color: #fff; }
  .card-blue  { background: linear-gradient(135deg, #005f99, #007ab8); }
  .card-red   { background: linear-gradient(135deg, #b91c1c, #e11d48); }
  .card-cream { background: linear-gradient(135deg, #FFFF99, #fdf5c5); color: #333; }

  .stat-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
  }

  .chart-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    height: 100%;
    margin-bottom: 1rem;
  }

  .chart-container {
    position: relative;
    height: 300px;
    width: 100%;
  }

  .list-group-item {
    border: none;
    border-bottom: 1px solid #eee;
    background: transparent;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 0.8s ease forwards;
  }

  @keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<div class="container-fluid mt-3">
  <div class="card shadow p-4 fade-in">
    <h3 class="section-title"><i class="fa-solid fa-gauge me-2"></i>Dashboard LPM</h3>

    <!-- ===== Statistik Utama ===== -->
    <div class="stat-row">
      <div class="stat-card card-green">
        <i class="fa-solid fa-folder-open fa-2x mb-2"></i>
        <h4 class="fw-bold mb-0"><?= $total_dokumen ?></h4>
        <small>Dokumen Mutu</small>
      </div>

      <div class="stat-card card-blue">
        <i class="fa-solid fa-award fa-2x mb-2"></i>
        <h4 class="fw-bold mb-0"><?= $total_akreditasi ?></h4>
        <small>Akreditasi</small>
      </div>

      <div class="stat-card card-gold">
        <i class="fa-solid fa-clipboard-check fa-2x mb-2"></i>
        <h4 class="fw-bold mb-0"><?= $total_audit ?></h4>
        <small>Audit Internal</small>
      </div>

      <div class="stat-card card-cream">
        <i class="fa-solid fa-calendar-days fa-2x mb-2"></i>
        <h4 class="fw-bold mb-0"><?= $total_kegiatan ?></h4>
        <small>Kegiatan LPM</small>
      </div>

      <div class="stat-card card-red">
        <i class="fa-solid fa-newspaper fa-2x mb-2"></i>
        <h4 class="fw-bold mb-0"><?= $total_berita ?></h4>
        <small>Berita & Publikasi</small>
      </div>
    </div>

    <!-- ===== Info Tambahan ===== -->
    <div class="row g-4 mb-4">
      <div class="col-lg-6">
        <div class="chart-box">
          <h6 class="fw-bold text-success mb-3"><i class="fa-solid fa-magnifying-glass-chart me-2"></i>Statistik Audit Temuan</h6>
          <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between"><span><i class="fa-regular fa-circle text-danger me-2"></i>Temuan Terbuka</span><strong><?= $total_audit_open ?></strong></li>
            <li class="list-group-item d-flex justify-content-between"><span><i class="fa-regular fa-circle text-warning me-2"></i>Sedang Proses</span><strong><?= $total_audit_progress ?></strong></li>
            <li class="list-group-item d-flex justify-content-between"><span><i class="fa-regular fa-circle text-success me-2"></i>Tertutup</span><strong><?= $total_audit_closed ?></strong></li>
          </ul>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="chart-box">
          <h6 class="fw-bold text-primary mb-3"><i class="fa-solid fa-file-lines me-2"></i>Dokumen Aktif</h6>
          <ul class="list-group list-group-flush">
            <li class="list-group-item d-flex justify-content-between">
              <span>Dokumen Terpublikasi</span><strong><?= $total_doc_published ?></strong>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <span>Total Temuan Audit</span><strong><?= $total_temuan ?></strong>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- ===== GRAFIK & BERITA ===== -->
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="chart-box">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="fw-bold text-success mb-0"><i class="fa-solid fa-chart-line me-2"></i>Aktivitas Bulanan</h5>
            <span class="badge bg-light text-dark">Tahun <?= date('Y') ?></span>
          </div>
          <div class="chart-container">
            <canvas id="activityChart"></canvas>
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <div class="chart-box">
          <h6 class="fw-bold text-warning mb-3"><i class="fa-solid fa-clock-rotate-left me-2"></i>Berita Terbaru</h6>
          <ul class="list-group list-group-flush">
            <?php if ($berita): foreach ($berita as $b): ?>
              <li class="list-group-item">
                <i class="fa-solid fa-angle-right text-success me-1"></i>
                <?= e($b['title']) ?><br>
                <small class="text-muted"><?= indoDate(substr($b['created_at'], 0, 10)) ?></small>
              </li>
            <?php endforeach; else: ?>
              <li class="list-group-item text-muted">Belum ada berita terbaru.</li>
            <?php endif; ?>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('activityChart').getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 250);
gradient.addColorStop(0, 'rgba(8,77,54,0.8)');
gradient.addColorStop(1, 'rgba(8,77,54,0.1)');

new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan','Feb','Mar','Apr','Mei','Jun','Jul','Agu','Sep','Okt','Nov','Des'],
    datasets: [{
      label: 'Kegiatan',
      data: <?= json_encode($chart_data) ?>,
      borderColor: '#084D36',
      backgroundColor: gradient,
      tension: 0.4,
      fill: true,
      pointBackgroundColor: '#CC9933',
      pointRadius: 5,
      pointHoverRadius: 7
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: { legend: { display: false }},
    scales: {
      y: { beginAtZero: true, grid: { color: '#eee' }},
      x: { grid: { display: false }}
    }
  }
});
</script>

<?php require_once __DIR__ . '/includes/footer.php'; ?>
