{% extends 'base.html' %}
{% block title %}Data Penduduk{% endblock %}
{% block topbar_title %}Data Penduduk{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-person-lines-fill me-2 text-primary-custom"></i>Data Penduduk</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 active">Data Penduduk</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('penduduk.import_excel') }}" class="btn btn-outline-secondary">
    <i class="bi bi-file-earmark-excel me-2"></i>Import Excel
  </a>
  <a href="{{ url_for('penduduk.tambah') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-2"></i>Tambah Data
  </a>
</div>

<!-- Filter -->
<div class="card mb-3">
  <div class="card-body py-3">
    <form method="GET" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label mb-1">Filter Tahap</label>
        <select name="tahap" class="form-select form-select-sm">
          <option value="">Semua Tahap</option>
          {% for t in all_tahap %}
          <option value="{{ t }}" {% if tahap_filter == t %}selected{% endif %}>{{ t }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label mb-1">Kecamatan</label>
        <input type="text" name="kecamatan" class="form-control form-control-sm"
               placeholder="Cari kecamatan..." value="{{ kecamatan_filter }}">
      </div>
      <div class="col-md-3">
        <label class="form-label mb-1">Kelurahan</label>
        <input type="text" name="kelurahan" class="form-control form-control-sm"
               placeholder="Cari kelurahan..." value="{{ kelurahan_filter }}">
      </div>
      <div class="col-md-3 d-flex gap-2">
        <button type="submit" class="btn btn-primary btn-sm">
          <i class="bi bi-search me-1"></i>Filter
        </button>
        <a href="{{ url_for('penduduk.index') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bi bi-x me-1"></i>Reset
        </a>
      </div>
    </form>
  </div>
</div>

<!-- Table -->
<div class="card">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span>
      <i class="bi bi-table me-2"></i>
      Menampilkan {{ penduduk.total }} data
    </span>
  </div>
  <div class="card-body p-0">
    {% if penduduk.items %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama</th>
            <th>JK</th>
            <th>RT/RW</th>
            <th>Kelurahan</th>
            <th>Kecamatan</th>
            <th>Pendidikan</th>
            <th>Status Pekerjaan</th>
            <th>Status Rumah</th>
            <th>Disabilitas</th>
            <th>Tahap</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for p in penduduk.items %}
          <tr>
            <td class="text-muted font-mono" style="font-size:.75rem;">
              {{ (penduduk.page - 1) * penduduk.per_page + loop.index }}
            </td>
            <td class="fw-semibold">{{ p.nama }}</td>
            <td>
              <span class="badge {% if p.jenis_kelamin == 'L' %}bg-primary{% else %}bg-danger{% endif %}">
                {{ p.jenis_kelamin }}
              </span>
            </td>
            <td class="font-mono text-muted">{{ p.rt }}/{{ p.rw }}</td>
            <td>{{ p.kelurahan or '-' }}</td>
            <td>{{ p.kecamatan or '-' }}</td>
            <td>
              <span class="badge bg-secondary">{{ p.pendidikan or '-' }}</span>
            </td>
            <td>{{ p.status_pekerjaan or '-' }}</td>
            <td>{{ p.status_rumah or '-' }}</td>
            <td>
              {% if p.jenis_disabilitas and p.jenis_disabilitas != 'Tidak Ada' %}
                <span class="badge" style="background:rgba(239,68,68,.15);color:#f87171;">
                  {{ p.jenis_disabilitas }}
                </span>
              {% else %}
                <span class="text-muted" style="font-size:.78rem;">-</span>
              {% endif %}
            </td>
            <td><span class="badge bg-info text-dark">{{ p.tahap }}</span></td>
            <td>
              <div class="d-flex gap-1">
                <a href="{{ url_for('penduduk.detail', id=p.id) }}"
                   class="btn btn-sm btn-outline-secondary" title="Detail">
                  <i class="bi bi-eye"></i>
                </a>
                <a href="{{ url_for('penduduk.edit', id=p.id) }}"
                   class="btn btn-sm btn-outline-secondary" title="Edit">
                  <i class="bi bi-pencil"></i>
                </a>
                <form method="POST" action="{{ url_for('penduduk.hapus', id=p.id) }}"
                      onsubmit="return confirm('Hapus data {{ p.nama }}?')">
                  <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if penduduk.pages > 1 %}
    <div class="p-3 d-flex justify-content-between align-items-center"
         style="border-top:1px solid var(--border);">
      <span style="font-size:.78rem;color:var(--text-muted);">
        Halaman {{ penduduk.page }} dari {{ penduduk.pages }}
      </span>
      <nav>
        <ul class="pagination pagination-sm mb-0">
          {% if penduduk.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('penduduk.index', page=penduduk.prev_num, tahap=tahap_filter, kecamatan=kecamatan_filter, kelurahan=kelurahan_filter) }}">
              <i class="bi bi-chevron-left"></i>
            </a>
          </li>
          {% endif %}
          {% for p_num in penduduk.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
            {% if p_num %}
            <li class="page-item {% if p_num == penduduk.page %}active{% endif %}">
              <a class="page-link" href="{{ url_for('penduduk.index', page=p_num, tahap=tahap_filter, kecamatan=kecamatan_filter, kelurahan=kelurahan_filter) }}">
                {{ p_num }}
              </a>
            </li>
            {% else %}
            <li class="page-item disabled"><span class="page-link">…</span></li>
            {% endif %}
          {% endfor %}
          {% if penduduk.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('penduduk.index', page=penduduk.next_num, tahap=tahap_filter, kecamatan=kecamatan_filter, kelurahan=kelurahan_filter) }}">
              <i class="bi bi-chevron-right"></i>
            </a>
          </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}

    {% else %}
    <div class="text-center py-5 text-muted">
      <i class="bi bi-inbox fs-1 d-block mb-2"></i>
      Tidak ada data ditemukan.
      {% if tahap_filter or kecamatan_filter or kelurahan_filter %}
      <br><a href="{{ url_for('penduduk.index') }}" class="btn btn-outline-secondary btn-sm mt-2">Reset Filter</a>
      {% else %}
      <br><a href="{{ url_for('penduduk.tambah') }}" class="btn btn-primary btn-sm mt-2">Tambah Data</a>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}