{% extends 'base.html' %}
{% block title %}{{ 'Tambah' if action == 'tambah' else 'Edit' }} Data Penduduk{% endblock %}
{% block topbar_title %}{{ 'Tambah' if action == 'tambah' else 'Edit' }} Data Penduduk{% endblock %}

{% block content %}
<div class="page-header">
  <h1>
    <i class="bi bi-person-{{ 'plus' if action == 'tambah' else 'gear' }}-fill me-2 text-primary-custom"></i>
    {{ 'Tambah' if action == 'tambah' else 'Edit' }} 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"><a href="{{ url_for('penduduk.index') }}">Data Penduduk</a></li>
      <li class="breadcrumb-item active">{{ 'Tambah' if action == 'tambah' else 'Edit' }}</li>
    </ol>
  </nav>
</div>

<form method="POST">
  <div class="row g-3">

    <!-- ── Identitas ── -->
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <i class="bi bi-person-badge me-2"></i>Identitas Pribadi
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
              <input type="text" name="nama" class="form-control"
                     value="{{ data.nama if data else '' }}" required>
            </div>
            <div class="col-md-3">
              <label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
              <select name="jenis_kelamin" class="form-select" required>
                <option value="">Pilih</option>
                <option value="L" {% if data and data.jenis_kelamin == 'L' %}selected{% endif %}>Laki-laki</option>
                <option value="P" {% if data and data.jenis_kelamin == 'P' %}selected{% endif %}>Perempuan</option>
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Kebangsaan</label>
              <input type="text" name="kebangsaan" class="form-control"
                     value="{{ data.kebangsaan if data else 'WNI' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Tempat Lahir</label>
              <input type="text" name="tempat_lahir" class="form-control"
                     value="{{ data.tempat_lahir if data else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Tanggal Lahir</label>
              <input type="date" name="tanggal_lahir" class="form-control"
                     value="{{ data.tanggal_lahir.strftime('%Y-%m-%d') if data and data.tanggal_lahir else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Agama</label>
              <select name="agama" class="form-select">
                <option value="">Pilih</option>
                {% for agama in ['Islam','Kristen','Katholik','Hindu','Buddha','Konghucu','Lainnya'] %}
                <option value="{{ agama }}" {% if data and data.agama == agama %}selected{% endif %}>{{ agama }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Pendidikan Terakhir</label>
              <select name="pendidikan" class="form-select">
                <option value="">Pilih</option>
                {% for pend in ['Tidak Sekolah','SD','SMP','SMA/SMK','D1','D2','D3','S1','S2','S3'] %}
                <option value="{{ pend }}" {% if data and data.pendidikan == pend %}selected{% endif %}>{{ pend }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Jenis Disabilitas</label>
              <select name="jenis_disabilitas" class="form-select">
                {% for dis in ['Tidak Ada','Fisik','Mental','Intelektual','Sensorik','Ganda'] %}
                <option value="{{ dis }}" {% if data and data.jenis_disabilitas == dis %}selected{% endif %}>{{ dis }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Alamat ── -->
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <i class="bi bi-geo-alt me-2"></i>Alamat
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-2">
              <label class="form-label">RT</label>
              <input type="text" name="rt" class="form-control"
                     value="{{ data.rt if data else '' }}" placeholder="001">
            </div>
            <div class="col-md-2">
              <label class="form-label">RW</label>
              <input type="text" name="rw" class="form-control"
                     value="{{ data.rw if data else '' }}" placeholder="001">
            </div>
            <div class="col-md-4">
              <label class="form-label">Kelurahan</label>
              <input type="text" name="kelurahan" class="form-control"
                     value="{{ data.kelurahan if data else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Kecamatan</label>
              <input type="text" name="kecamatan" class="form-control"
                     value="{{ data.kecamatan if data else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Kota/Kabupaten</label>
              <input type="text" name="kota" class="form-control"
                     value="{{ data.kota if data else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Provinsi</label>
              <input type="text" name="provinsi" class="form-control"
                     value="{{ data.provinsi if data else '' }}">
            </div>
            <div class="col-md-4">
              <label class="form-label">Kode Pos</label>
              <input type="text" name="kodepos" class="form-control"
                     value="{{ data.kodepos if data else '' }}" maxlength="10">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Sosial-Ekonomi ── -->
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <i class="bi bi-briefcase me-2"></i>Sosial-Ekonomi & Kepesertaan
        </div>
        <div class="card-body">
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Status Rumah</label>
              <select name="status_rumah" class="form-select">
                <option value="">Pilih</option>
                {% for sr in ['Milik Sendiri','Sewa/Kontrak','Menumpang','Dinas','Lainnya'] %}
                <option value="{{ sr }}" {% if data and data.status_rumah == sr %}selected{% endif %}>{{ sr }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Status Pekerjaan</label>
              <select name="status_pekerjaan" class="form-select">
                <option value="">Pilih</option>
                {% for sp in ['Bekerja','Tidak Bekerja','Pelajar/Mahasiswa','Ibu Rumah Tangga','Pensiunan'] %}
                <option value="{{ sp }}" {% if data and data.status_pekerjaan == sp %}selected{% endif %}>{{ sp }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-4">
              <label class="form-label">Bidang Usaha</label>
              <input type="text" name="bidang_usaha" class="form-control"
                     value="{{ data.bidang_usaha if data else '' }}"
                     placeholder="Jika bekerja, sebutkan bidang usaha">
            </div>
            <div class="col-md-6">
              <label class="form-label">Jenis PKD (Program Kesejahteraan Daerah)</label>
              <input type="text" name="jenis_pkd" class="form-control"
                     value="{{ data.jenis_pkd if data else '' }}"
                     placeholder="Contoh: PKH, BPNT, BST, dll.">
            </div>
            <div class="col-md-3">
              <label class="form-label">Tahap Penerima <span class="text-danger">*</span></label>
              <select name="tahap" class="form-select" required>
                <option value="">Pilih Tahap</option>
                {% for t in tahap_options %}
                <option value="{{ t }}" {% if data and data.tahap == t %}selected{% endif %}>{{ t }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-3">
              <label class="form-label">Tahun Penerima</label>
              <input type="number" name="tahun_penerima" class="form-control"
                     value="{{ data.tahun_penerima if data else 2026 }}"
                     min="2020" max="2030">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ── Actions ── -->
    <div class="col-12 d-flex gap-2 justify-content-end">
      <a href="{{ url_for('penduduk.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-x me-1"></i>Batal
      </a>
      <button type="submit" class="btn btn-primary">
        <i class="bi bi-save me-2"></i>{{ 'Simpan Data' if action == 'tambah' else 'Update Data' }}
      </button>
    </div>

  </div>
</form>
{% endblock %}