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

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-file-earmark-excel me-2 text-primary-custom"></i>Import Data dari Excel</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">Import Excel</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('penduduk.template_excel') }}" class="btn btn-outline-secondary">
    <i class="bi bi-download me-2"></i>Download Template
  </a>
</div>

<div class="row g-3 justify-content-center">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <i class="bi bi-upload me-2"></i>Upload File Excel
      </div>
      <div class="card-body">
        <form method="POST" enctype="multipart/form-data" id="importForm">

          <!-- Drop zone -->
          <div id="dropZone" class="drop-zone mb-4">
            <div class="drop-zone-inner">
              <i class="bi bi-file-earmark-excel drop-icon"></i>
              <p class="drop-title">Drag & drop file Excel di sini</p>
              <p class="drop-sub">atau klik untuk memilih file</p>
              <input type="file" name="file_excel" id="fileInput"
                     accept=".xlsx,.xls" style="display:none" required>
              <button type="button" class="btn btn-outline-secondary btn-sm mt-2"
                      onclick="document.getElementById('fileInput').click()">
                <i class="bi bi-folder2-open me-1"></i>Pilih File
              </button>
            </div>
            <div id="filePreview" style="display:none;">
              <i class="bi bi-file-earmark-excel" style="color:#10b981;font-size:2rem;"></i>
              <p id="fileName" class="mb-0 fw-semibold mt-1"></p>
              <p id="fileSize" class="text-muted mb-0" style="font-size:.78rem;"></p>
              <button type="button" class="btn btn-sm btn-outline-danger mt-2" onclick="clearFile()">
                <i class="bi bi-x me-1"></i>Hapus
              </button>
            </div>
          </div>

          <!-- Opsi import -->
          <div class="card mb-3" style="background:var(--surface);">
            <div class="card-header" style="font-size:.83rem;cursor:pointer;"
                 onclick="toggleOptions()" id="optHeader">
              <i class="bi bi-sliders me-2"></i>Opsi Import
              <i class="bi bi-chevron-down ms-1 float-end" id="optIcon"></i>
            </div>
            <div class="card-body" id="optBody" style="display:none;">
              <div class="row g-3">
                <div class="col-md-8">
                  <label class="form-label">Override Tahap</label>
                  <select name="tahap_override" class="form-select form-select-sm">
                    <option value="">Ambil dari kolom file (default)</option>
                    {% for t in tahap_options %}
                    <option value="{{ t }}">{{ t }}</option>
                    {% endfor %}
                  </select>
                  <div class="form-text text-muted">
                    Paksa semua baris menggunakan tahap ini, mengabaikan kolom Tahap di file.
                    Berguna untuk file dari pemerintah yang tidak punya kolom Tahap.
                  </div>
                </div>
                <div class="col-md-4">
                  <label class="form-label">Duplikat</label>
                  <div class="form-check mt-1">
                    <input class="form-check-input" type="checkbox"
                           name="skip_duplicate" id="skipDup" checked>
                    <label class="form-check-label" for="skipDup" style="font-size:.83rem;">
                      Lewati data duplikat
                    </label>
                  </div>
                  <div class="form-text text-muted">
                    Cek berdasarkan Nama + RT + RW.
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="alert alert-info py-2" style="font-size:.82rem;">
            <i class="bi bi-magic me-2"></i>
            <strong>Cleansing otomatis aktif</strong> — sistem mengenali nilai dari format data pemerintah
            seperti <code>LAKI-LAKI</code>, <code>TAMAT SD/SEDERAJAT</code>, <code>KONTRAK</code>,
            <code>MENGURUS RUMAH TANGGA</code>, <code>TUNA DAKSA</code>, dll.
          </div>

          <div class="d-flex gap-2 justify-content-end mt-3">
            <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" id="submitBtn" disabled>
              <i class="bi bi-cloud-upload me-2"></i>Proses Import
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Panduan singkat -->
  <div class="col-lg-5">
    <div class="card">
      <div class="card-header"><i class="bi bi-book me-2"></i>Panduan Import</div>
      <div class="card-body" style="font-size:.83rem;">

        <div class="step-item">
          <div class="step-num">1</div>
          <div>
            <strong>Download template</strong> Excel via tombol di kanan atas.
            Template sudah berisi header dan baris contoh.
          </div>
        </div>
        <div class="step-item">
          <div class="step-num">2</div>
          <div>
            <strong>Isi data</strong> mulai baris ke-2. Hapus baris contoh
            jika tidak diperlukan. Jangan mengubah baris header.
          </div>
        </div>
        <div class="step-item">
          <div class="step-num">3</div>
          <div>
            <strong>Kolom wajib</strong> (ditandai <code>*</code>):
            Nama Lengkap, Jenis Kelamin, Tahap.
          </div>
        </div>
        <div class="step-item">
          <div class="step-num">4</div>
          <div>
            <strong>Simpan</strong> file dalam format <code>.xlsx</code>
            lalu upload di form ini.
          </div>
        </div>

        <div class="divider"></div>

        <p class="fw-semibold mb-2">Nilai yang diterima:</p>
        <table class="table table-sm mb-0" style="font-size:.78rem;">
          <tr><td class="text-muted">Jenis Kelamin</td><td><code>L</code> atau <code>P</code></td></tr>
          <tr><td class="text-muted">Tanggal Lahir</td><td><code>YYYY-MM-DD</code></td></tr>
          <tr><td class="text-muted">Pendidikan</td><td>Tidak Sekolah, SD, SMP, SMA/SMK, D1–D3, S1–S3</td></tr>
          <tr><td class="text-muted">Status Rumah</td><td>Milik Sendiri, Sewa/Kontrak, Menumpang, Dinas, Lainnya</td></tr>
          <tr><td class="text-muted">Status Pekerjaan</td><td>Bekerja, Tidak Bekerja, Pelajar/Mahasiswa, IRT, Pensiunan</td></tr>
          <tr><td class="text-muted">Disabilitas</td><td>Tidak Ada, Fisik, Mental, Intelektual, Sensorik, Ganda</td></tr>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
  .drop-zone {
    border: 2px dashed var(--border);
    border-radius: 14px;
    padding: 2.5rem;
    text-align: center;
    transition: border-color .2s, background .2s;
    cursor: pointer;
    background: var(--surface);
  }
  .drop-zone.dragover {
    border-color: var(--primary);
    background: rgba(59,130,246,.05);
  }
  .drop-icon {
    font-size: 3rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: .75rem;
  }
  .drop-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; }
  .drop-sub   { font-size: .82rem; color: var(--text-muted); margin: .25rem 0 0; }

  .step-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
  }
  .step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
  }
</style>
{% endblock %}

{% block extra_js %}
<script>
  const dropZone  = document.getElementById('dropZone');
  const fileInput = document.getElementById('fileInput');
  const submitBtn = document.getElementById('submitBtn');
  const inner     = dropZone.querySelector('.drop-zone-inner');
  const preview   = document.getElementById('filePreview');

  function formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
  }

  function showPreview(file) {
    inner.style.display = 'none';
    preview.style.display = 'block';
    document.getElementById('fileName').textContent = file.name;
    document.getElementById('fileSize').textContent = formatSize(file.size);
    submitBtn.disabled = false;
  }

  function clearFile() {
    fileInput.value = '';
    inner.style.display = 'block';
    preview.style.display = 'none';
    submitBtn.disabled = true;
  }

  fileInput.addEventListener('change', () => {
    if (fileInput.files[0]) showPreview(fileInput.files[0]);
  });

  dropZone.addEventListener('click', (e) => {
    if (!e.target.closest('button')) fileInput.click();
  });

  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    dropZone.classList.add('dragover');
  });
  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    const file = e.dataTransfer.files[0];
    if (file && (file.name.endsWith('.xlsx') || file.name.endsWith('.xls'))) {
      const dt = new DataTransfer();
      dt.items.add(file);
      fileInput.files = dt.files;
      showPreview(file);
    } else {
      alert('Format file harus .xlsx atau .xls');
    }
  });

  document.getElementById('importForm').addEventListener('submit', () => {
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Memproses...';
  });

  function toggleOptions() {
    const body = document.getElementById('optBody');
    const icon = document.getElementById('optIcon');
    const visible = body.style.display !== 'none';
    body.style.display = visible ? 'none' : 'block';
    icon.className = visible ? 'bi bi-chevron-down ms-1 float-end' : 'bi bi-chevron-up ms-1 float-end';
  }
</script>
{% endblock %}