{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container-fluid">
  <div class="row g-4 mb-4">
    <!-- Card: Total Keluhan -->
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body text-center">
          <div class="h1 mb-2 fw-bold">{{ total_keluhan }}</div>
          <div class="text-muted">Total Keluhan</div>
        </div>
      </div>
    </div>
    <!-- Card: Topik Terbanyak -->
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body text-center">
          <div class="h1 mb-2 fw-bold">{{ topik_terbanyak }}</div>
          <div class="text-muted">Topik Terbanyak</div>
        </div>
      </div>
    </div>
    <!-- Card: Instansi Terbanyak -->
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body text-center">
          <div class="h1 mb-2 fw-bold">{{ instansi_terbanyak }}</div>
          <div class="text-muted">Instansi Terbanyak</div>
        </div>
      </div>
    </div>
    <!-- Card: Keluhan Hari Ini -->
    <div class="col-12 col-sm-6 col-lg-3">
      <div class="card shadow-sm h-100">
        <div class="card-body text-center">
          <div class="h1 mb-2 fw-bold">{{ keluhan_hari_ini }}</div>
          <div class="text-muted">Keluhan Hari Ini</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Chart Area -->
  <div class="row g-4">
    <!-- Grafik Keluhan Bulanan -->
    <div class="col-12 col-lg-8">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-white border-bottom-0">
          <h3 class="card-title mb-0">Tren Keluhan per Bulan</h3>
        </div>
        <div class="card-body">
          <canvas id="keluhanBulananChart" height="120"></canvas>
        </div>
      </div>
    </div>
    <!-- Pie Chart Distribusi Emosi -->
    <div class="col-12 col-lg-4">
      <div class="card shadow-sm h-100">
        <div class="card-header bg-white border-bottom-0">
          <h3 class="card-title mb-0">Distribusi Emosi</h3>
        </div>
        <div class="card-body d-flex justify-content-center align-items-center" style="min-height:240px;">
          <canvas id="emosiPieChart" height="200"></canvas>
        </div>
      </div>
    </div>
  </div>
  <div class="row mb-4">
  <div class="col">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Word-cloud Keluhan</h3></div>
      <div class="card-body text-center">
        <!--  gunakan variabel 'wordcloud_image' yang dikirim Flask  -->
        <img src="/static/wordcloud.png"
             alt="Word-cloud Keluhan"
             class="img-fluid" style="max-height:300px;">
      </div>
    </div>
  </div>
</div>

<div class="row row-deck">
  <!-- ========= Topik ========= -->
  <div class="col-md-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Topik Keluhan Terbanyak</h3></div>
      <div class="card-body p-0">
        <table class="table table-striped table-hover">
          <thead><tr><th>#</th><th>Topik</th><th>Jumlah</th></tr></thead>
          <tbody>
            {% for row in top_topik %}
            <tr>
              <td>{{ loop.index }}</td>
              <td>{{ row.Topik }}</td>
              <td>{{ row.Jumlah }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- ========= Instansi ========= -->
  <div class="col-md-6">
    <div class="card">
      <div class="card-header"><h3 class="card-title">Instansi Terbanyak Menerima Keluhan</h3></div>
      <div class="card-body p-0">
        <table class="table table-striped table-hover">
          <thead><tr><th>#</th><th>Instansi</th><th>Jumlah</th></tr></thead>
          <tbody>
            {% for row in top_instansi %}
            <tr>
              <td>{{ loop.index }}</td>
              <td>{{ row.Instansi }}</td>
              <td>{{ row.Jumlah }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  // Keluhan Bulanan (Line Chart)
  const keluhanBulananChart = new Chart(document.getElementById('keluhanBulananChart'), {
    type: 'line',
    data: {
      labels: {{ keluhan_bulanan_labels | tojson }},
      datasets: [{
        label: 'Jumlah Keluhan',
        data: {{ keluhan_bulanan_values | tojson }},
        fill: false,
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        tension: 0.3,
        pointRadius: 5,
        pointHoverRadius: 7
      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: false }
      },
      scales: {
        y: {
          beginAtZero: true,
          ticks: { precision: 0 }
        },
        x: {
          ticks: { autoSkip: false }
        }
      }
    }
  });

  // Emosi (Pie Chart)
  const emosiPieChart = new Chart(document.getElementById('emosiPieChart'), {
    type: 'doughnut',
    data: {
      labels: {{ emosi_labels | tojson }},
      datasets: [{
        data: {{ emosi_values | tojson }},
        backgroundColor: [ '#74c0fc','#f03e3e','#fab005', '#69db7c'],
        borderWidth: 1
      }],
      options: {
        plugins: {
          legend: {
            display: true,
            position: 'bottom'
          }
        }
      }
    }
  });
</script>
{% endblock %}