{% extends 'base.html' %}
{% block title %}Detail Penduduk — {{ data.nama }}{% endblock %}
{% block topbar_title %}Detail Penduduk{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-person-circle me-2 text-primary-custom"></i>{{ data.nama }}</h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('penduduk.index') }}">Data Penduduk</a></li>
        <li class="breadcrumb-item active">Detail</li>
      </ol>
    </nav>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('penduduk.edit', id=data.id) }}" class="btn btn-primary btn-sm">
      <i class="bi bi-pencil me-1"></i>Edit
    </a>
    <a href="{{ url_for('penduduk.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
  </div>
</div>

<div class="row g-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header"><i class="bi bi-person-badge me-2"></i>Identitas</div>
      <div class="card-body">
        {% macro row(label, value) %}
        <div class="d-flex py-2" style="border-bottom:1px solid var(--border);">
          <span style="width:180px;font-size:.8rem;color:var(--text-muted);">{{ label }}</span>
          <span style="font-size:.875rem;font-weight:500;">{{ value or '-' }}</span>
        </div>
        {% endmacro %}
        {{ row('Nama', data.nama) }}
        {{ row('Jenis Kelamin', 'Laki-laki' if data.jenis_kelamin == 'L' else 'Perempuan') }}
        {{ row('Kebangsaan', data.kebangsaan) }}
        {{ row('Tempat Lahir', data.tempat_lahir) }}
        {{ row('Tanggal Lahir', data.tanggal_lahir.strftime('%d %B %Y') if data.tanggal_lahir else '-') }}
        {{ row('Agama', data.agama) }}
        {{ row('Pendidikan', data.pendidikan) }}
        {{ row('Disabilitas', data.jenis_disabilitas) }}
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header"><i class="bi bi-geo-alt me-2"></i>Alamat</div>
      <div class="card-body">
        {% macro row2(label, value) %}
        <div class="d-flex py-2" style="border-bottom:1px solid var(--border);">
          <span style="width:140px;font-size:.8rem;color:var(--text-muted);">{{ label }}</span>
          <span style="font-size:.875rem;font-weight:500;">{{ value or '-' }}</span>
        </div>
        {% endmacro %}
        {{ row2('RT/RW', data.rt ~ '/' ~ data.rw) }}
        {{ row2('Kelurahan', data.kelurahan) }}
        {{ row2('Kecamatan', data.kecamatan) }}
        {{ row2('Kota', data.kota) }}
        {{ row2('Provinsi', data.provinsi) }}
        {{ row2('Kode Pos', data.kodepos) }}
      </div>
    </div>
    <div class="card">
      <div class="card-header"><i class="bi bi-briefcase me-2"></i>Sosial-Ekonomi</div>
      <div class="card-body">
        {{ row2('Status Rumah', data.status_rumah) }}
        {{ row2('Status Pekerjaan', data.status_pekerjaan) }}
        {{ row2('Bidang Usaha', data.bidang_usaha) }}
        {{ row2('Jenis PKD', data.jenis_pkd) }}
        {{ row2('Tahap', data.tahap) }}
        {{ row2('Tahun Penerima', data.tahun_penerima | string if data.tahun_penerima else '-') }}
      </div>
    </div>
  </div>

  {% if data.cluster_results %}
  <div class="col-12">
    <div class="card">
      <div class="card-header"><i class="bi bi-diagram-3 me-2"></i>Riwayat Hasil Clustering</div>
      <div class="card-body p-0">
        <table class="table mb-0">
          <thead>
            <tr>
              <th>Sesi</th>
              <th>Metode</th>
              <th>Cluster</th>
              <th>Prioritas</th>
              <th>Tanggal</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for cr in data.cluster_results %}
            <tr>
              <td>{{ cr.session.nama_sesi | truncate(40) }}</td>
              <td>{{ 'K-Means' if cr.session.metode == 'kmeans' else 'Hierarchical' }}</td>
              <td class="font-mono">Cluster {{ cr.cluster_label + 1 }}</td>
              <td>
                <span class="badge badge-{{ 'tinggi' if cr.prioritas == 'Prioritas Tinggi' else ('sedang' if cr.prioritas == 'Prioritas Sedang' else 'rendah') }}">
                  {{ cr.prioritas }}
                </span>
              </td>
              <td>{{ cr.created_at.strftime('%d %b %Y') }}</td>
              <td>
                <a href="{{ url_for('clustering.detail', id=cr.session_id) }}"
                   class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-eye"></i>
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}