{% extends "layout/ver_baru/base_admin.html" %}
{% block title %}Manajemen Data - CWN{% endblock %}
{% block content %}

<!-- Tailwind & SweetAlert (already loaded above or in base; included here for safety) -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.tailwindcss.com"></script>

{% if messages %}
  {% for message in messages %}
    <script>
      Swal.fire({
        icon: '{{ message.tags }}' === 'error' ? 'error' : 'success',
        title: '{{ message.tags|capfirst }}',
        text: '{{ message }}'
      });
    </script>
  {% endfor %}
{% endif %}

<div class="p-6">
  <h2 class="text-center text-white p-4 rounded mb-6 bg-red-600 font-bold text-xl">Biodata Karyawan</h2>

  <div class="bg-white shadow rounded-lg">
    <!-- Header: dropdown, search, filter -->
    <div class="flex flex-col md:flex-row justify-between items-center p-4 bg-red-600 text-white rounded-t-lg gap-3">
      <div class="relative">
        <button id="menu-button" class="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 px-4 py-2 rounded text-sm font-medium focus:outline-none">
          Daftar Karyawan
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div id="dropdownMenu" class="absolute left-0 mt-2 w-48 bg-white rounded shadow-lg ring-1 ring-black ring-opacity-5 hidden z-30">
          <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100" data-modal-target="createModal" data-modal-toggle="createModal">Tambah Karyawan</a>
          <a href="{% url 'download_excel_biodata' %}" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Download Excel</a>
        </div>
      </div>

      <form method="get" id="filterForm" class="flex flex-col md:flex-row gap-2 w-full md:w-auto">
        <input type="text" name="search" id="searchInput"
              value="{{ search }}"
              class="border rounded text-gray-800 px-3 py-2 w-full md:w-64"
              placeholder="Cari karyawan...">

        <select name="filterJabatan" id="filterJabatan"
                class="border rounded px-3 py-2 w-full md:w-48 text-gray-800">
          <option value="">Filter Jabatan</option>
          {% for jabatan in jabatans %}
            <option value="{{ jabatan }}" {% if jabatan == filter_jabatan %}selected{% endif %}>
              {{ jabatan }}
            </option>
          {% endfor %}
        </select>
      </form>
    </div>

    <!-- Table -->
    <div class="p-4 overflow-x-auto">
      <table class="min-w-full border border-gray-200 text-sm">
        <thead class="bg-gray-100">
          <tr>
            <th class="px-4 py-2 border text-left">ID</th>
            <th class="px-4 py-2 border text-left">Nama</th>
            <th class="px-4 py-2 border text-left">Jabatan</th>
            <th class="px-4 py-2 border text-left">Email</th>
            <th class="px-4 py-2 border text-left">No HP</th>
            <th class="px-4 py-2 border text-left">Aksi</th>
          </tr>
        </thead>
        <tbody id="biodataTable">
          {% for row in page_obj %}
          <tr class="hover:bg-gray-50">
            <td class="border px-4 py-2">{{ row.id_karyawan }}</td>
            <td class="border px-4 py-2">{{ row.nama }}</td>
            <td class="border px-4 py-2">{{ row.jabatan }}</td>
            <td class="border px-4 py-2">{{ row.email }}</td>
            <td class="border px-4 py-2">{{ row.no_hp }}</td>
            <td class="border px-4 py-2 flex gap-2">
              <button class="bg-yellow-500 text-white px-3 py-1 rounded text-sm" data-modal-target="editModal{{ row.id_karyawan }}" data-modal-toggle="editModal{{ row.id_karyawan }}">Edit</button>
              <a href="#" class="bg-red-600 text-white px-3 py-1 rounded text-sm btn-hapus" data-url="{% url 'biodata_cwn_delete' row.id_karyawan %}">Hapus</a>
            </td>
          </tr>

          <!-- Edit Modal per row (hidden by default) -->
          <div id="editModal{{ row.id_karyawan }}" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg w-11/12 md:w-4/5 max-h-[90vh] overflow-y-auto p-6">
              <form method="post" enctype="multipart/form-data" class="space-y-4">
                {% csrf_token %}
                <input type="hidden" name="form_type" value="edit">
                <input type="hidden" name="id_karyawan" value="{{ row.id_karyawan }}">

                <div class="flex items-center justify-between border-b pb-2">
                  <h3 class="text-lg font-semibold text-red-600">Edit Biodata — {{ row.nama }}</h3>
                  <button type="button" class="text-gray-600" data-modal-hide="editModal{{ row.id_karyawan }}">✕</button>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label class="block text-sm font-medium">ID Karyawan</label>
                    <input type="text" name="id_karyawan_display" class="w-full border rounded px-3 py-2 bg-gray-50" value="{{ row.id_karyawan }}" disabled>
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Nama</label>
                    <input type="text" name="nama" class="w-full border rounded px-3 py-2" value="{{ row.nama }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">NIK KTP</label>
                    <input type="text" name="nik_ktp" class="w-full border rounded px-3 py-2" value="{{ row.nik_ktp }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Tanggal Lahir</label>
                    <input type="date" name="tanggal_lahir" class="w-full border rounded px-3 py-2" value="{{ row.tanggal_lahir|date:'Y-m-d' }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Jabatan</label>
                    <input type="text" name="jabatan" class="w-full border rounded px-3 py-2" value="{{ row.jabatan }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Email</label>
                    <input type="email" name="email" class="w-full border rounded px-3 py-2" value="{{ row.email }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">No HP (Whatsapp)</label>
                    <input type="text" name="no_hp" class="w-full border rounded px-3 py-2" value="{{ row.no_hp }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Pendidikan Terakhir</label>
                    <input type="text" name="pendidikan_terakhir" class="w-full border rounded px-3 py-2" value="{{ row.pendidikan_terakhir }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Jurusan</label>
                    <input type="text" name="jurusan" class="w-full border rounded px-3 py-2" value="{{ row.jurusan }}">
                  </div>

                  <div class="md:col-span-2">
                    <label class="block text-sm font-medium">Riwayat Pekerjaan Terakhir</label>
                    <input type="text" name="riwayat_pekerjaan_terakhir" class="w-full border rounded px-3 py-2" value="{{ row.riwayat_pekerjaan_terakhir }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Hobi</label>
                    <input type="text" name="hobi" class="w-full border rounded px-3 py-2" value="{{ row.hobi }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Hubungan (kerabat)</label>
                    <select name="hubungan" class="w-full border rounded px-3 py-2">
                      <option value="">Pilih Hubungan</option>
                      <option value="Ayah" {% if row.hubungan == 'Ayah' %}selected{% endif %}>Ayah</option>
                      <option value="Ibu" {% if row.hubungan == 'Ibu' %}selected{% endif %}>Ibu</option>
                      <option value="Anak" {% if row.hubungan == 'Anak' %}selected{% endif %}>Anak</option>
                      <option value="Saudara" {% if row.hubungan == 'Saudara' %}selected{% endif %}>Saudara</option>
                      <option value="Lainnya" {% if row.hubungan == 'Lainnya' %}selected{% endif %}>Lainnya</option>
                    </select>
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Nama Kerabat 1</label>
                    <input type="text" name="nama_kerabat1" class="w-full border rounded px-3 py-2" value="{{ row.nama_kerabat1 }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">No HP Kerabat 1</label>
                    <input type="text" name="no_hp_kerabat1" class="w-full border rounded px-3 py-2" value="{{ row.no_hp_kerabat1 }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Nama Kerabat 2</label>
                    <input type="text" name="nama_kerabat2" class="w-full border rounded px-3 py-2" value="{{ row.nama_kerabat2 }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">No HP Kerabat 2</label>
                    <input type="text" name="no_hp_kerabat2" class="w-full border rounded px-3 py-2" value="{{ row.no_hp_kerabat2 }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Nama Kerabat 3</label>
                    <input type="text" name="nama_kerabat3" class="w-full border rounded px-3 py-2" value="{{ row.nama_kerabat3 }}">
                  </div>

                  <div>
                    <label class="block text-sm font-medium">No HP Kerabat 3</label>
                    <input type="text" name="no_hp_kerabat3" class="w-full border rounded px-3 py-2" value="{{ row.no_hp_kerabat3 }}">
                  </div>

                  <!-- Upload KTP/KK fields -->
                  <div>
                    <label class="block text-sm font-medium">Foto KTP</label>
                    <input type="file" id="foto_ktp_edit_{{ row.id_karyawan }}" name="foto_ktp" accept="image/*"
                          class="w-full border rounded px-3 py-2">
                    <input type="hidden" id="foto_ktp_lama_edit_{{ row.id_karyawan }}" name="foto_ktp_lama" value="{{ row.foto_ktp }}">
                    <button type="button" id="preview-ktp-upload-edit-{{ row.id_karyawan }}"
                            class="hidden mt-2 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-blue-600 
                                  border border-blue-600 rounded-md hover:bg-blue-50 transition">
                      Preview KTP
                    </button>
                  </div>

                  <div>
                    <label class="block text-sm font-medium">Foto KK</label>
                    <input type="file" id="foto_kk_edit_{{ row.id_karyawan }}" name="foto_kk" accept="image/*"
                          class="w-full border rounded px-3 py-2">
                    <input type="hidden" id="foto_kk_lama_edit_{{ row.id_karyawan }}" name="foto_kk_lama" value="{{ row.foto_kk }}">
                    <button type="button" id="preview-kk-upload-edit-{{ row.id_karyawan }}"
                            class="hidden mt-2 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-blue-600 
                                  border border-blue-600 rounded-md hover:bg-blue-50 transition">
                      Preview KK
                    </button>
                  </div>

                </div>

                <div class="flex justify-end gap-2 border-t pt-2">
                  <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded">Simpan</button>
                  <button type="button" class="bg-gray-200 px-4 py-2 rounded" data-modal-hide="editModal{{ row.id_karyawan }}">Batal</button>
                </div>
              </form>
            </div>
          </div>

          {% endfor %}
        </tbody>
      </table>

      <!-- Pagination -->
      <div class="flex justify-center mt-4">
        <ul class="flex gap-1">
          {% if page_obj.has_previous %}
            <li><a href="?page={{ page_obj.previous_page_number }}" class="px-3 py-1 border rounded">&laquo;</a></li>
          {% else %}
            <li><span class="px-3 py-1 border rounded bg-gray-100">&laquo;</span></li>
          {% endif %}

          {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
              <li><span class="px-3 py-1 border rounded bg-red-600 text-white">{{ num }}</span></li>
            {% else %}
              <li><a href="?page={{ num }}" class="px-3 py-1 border rounded">{{ num }}</a></li>
            {% endif %}
          {% endfor %}

          {% if page_obj.has_next %}
            <li><a href="?page={{ page_obj.next_page_number }}" class="px-3 py-1 border rounded">&raquo;</a></li>
          {% else %}
            <li><span class="px-3 py-1 border rounded bg-gray-100">&raquo;</span></li>
          {% endif %}
        </ul>
      </div>

    </div>
  </div>
</div>

<!-- Create Modal (full multi-step form with all fields) -->
<div id="createModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
  <div class="bg-white rounded-lg w-11/12 md:w-4/5 max-h-[90vh] overflow-y-auto p-6">
    <form id="createBiodataForm" method="post" enctype="multipart/form-data" class="space-y-4">
      {% csrf_token %}
      <input type="hidden" name="form_type" value="create">

      <div class="flex items-center justify-between border-b pb-2">
        <h3 class="text-lg font-semibold text-red-600">Tambah Karyawan</h3>
        <button type="button" class="text-gray-600" data-modal-hide="createModal">✕</button>
      </div>

      <!-- Steps container -->
      <div id="createSteps" class="space-y-6">
        <!-- STEP 1: Upload Dokumen -->
        <div class="step" data-step="0">
          <h4 class="font-semibold">Upload Dokumen</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium">Foto KTP <span class="text-red-500">*</span></label>
              <input type="file" name="foto_ktp" id="foto_ktp_create" accept="image/*" class="w-full border rounded px-3 py-2" capture="environment" onchange="handleCreateKTPPreview(event)">
              <button type="button" id="preview-ktp-create"
                class="hidden mt-2 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-blue-600 
                      border border-blue-600 rounded-md hover:bg-blue-50 transition">
                Preview KTP
              </button>
            </div>
            <div>
              <label class="block text-sm font-medium">Foto KK <span class="text-red-500">*</span></label>
              <input type="file" name="foto_kk" id="foto_kk_create" accept="image/*" class="w-full border rounded px-3 py-2" capture="environment" onchange="handleCreateKKPreview(event)">
              <button type="button" id="preview-kk-create"
                class="hidden mt-2 inline-flex items-center justify-center px-3 py-1.5 text-xs font-medium text-blue-600 
                      border border-blue-600 rounded-md hover:bg-blue-50 transition">
                Preview KK
              </button>
            </div>
          </div>
        </div>

        <!-- STEP 2: Data Pribadi -->
        <div class="step hidden" data-step="1">
          <h4 class="font-semibold">Data Pribadi</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium">ID Karyawan</label>
              <input type="text" name="id_karyawan" class="w-full border rounded px-3 py-2" value="{% if id_default %}{{ id_default }}{% endif %}">
            </div>
            <div>
              <label class="block text-sm font-medium">Nama <span class="text-red-500">*</span></label>
              <input type="text" name="nama" id="create_nama" class="w-full border rounded px-3 py-2" required>
            </div>
            <div>
              <label class="block text-sm font-medium">NIK KTP <span class="text-red-500">*</span></label>
              <input type="text" name="nik_ktp" id="create_nik" class="w-full border rounded px-3 py-2" required>
            </div>
            <div>
              <label class="block text-sm font-medium">Tanggal Lahir</label>
              <input type="date" name="tanggal_lahir" id="create_tanggal_lahir" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">Jabatan</label>
              <input type="text" name="jabatan" class="w-full border rounded px-3 py-2" value="{% if jabatan_default %}{{ jabatan_default }}{% endif %}">
            </div>
            <div>
              <label class="block text-sm font-medium">Email</label>
              <input type="email" name="email" id="create_email" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">No HP (Whatsapp Aktif) <span class="text-red-500">*</span></label>
              <input type="text" name="no_hp" id="create_no_hp" class="w-full border rounded px-3 py-2" placeholder="081234567890">
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium">Alamat KTP <span class="text-red-500">*</span></label>
              <textarea name="alamat_ktp" id="create_alamat_ktp" class="w-full border rounded px-3 py-2" rows="3"></textarea>
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium">Alamat Domisili <span class="text-red-500">*</span></label>
              <textarea name="alamat_domisili" id="create_alamat_domisili" class="w-full border rounded px-3 py-2" rows="3"></textarea>
            </div>
          </div>
        </div>

        <!-- STEP 3: Pendidikan & Riwayat -->
        <div class="step hidden" data-step="2">
          <h4 class="font-semibold">Pendidikan & Riwayat</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium">Pendidikan Terakhir</label>
              <input type="text" name="pendidikan_terakhir" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">Jurusan</label>
              <input type="text" name="jurusan" class="w-full border rounded px-3 py-2">
            </div>
            <div class="md:col-span-2">
              <label class="block text-sm font-medium">Riwayat Pekerjaan Terakhir</label>
              <input type="text" name="riwayat_pekerjaan_terakhir" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">Hobi</label>
              <input type="text" name="hobi" class="w-full border rounded px-3 py-2">
            </div>
          </div>
        </div>

        <!-- STEP 4: Kontak Kerabat -->
        <div class="step hidden" data-step="3">
          <h4 class="font-semibold">Kontak Kerabat</h4>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium">Hubungan</label>
              <select name="hubungan" class="w-full border rounded px-3 py-2">
                <option value="">Pilih Hubungan</option>
                <option value="Ayah">Ayah</option>
                <option value="Ibu">Ibu</option>
                <option value="Anak">Anak</option>
                <option value="Saudara">Saudara</option>
                <option value="Lainnya">Lainnya</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium">Nama Kerabat 1</label>
              <input type="text" name="nama_kerabat1" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">No HP Kerabat 1</label>
              <input type="text" name="no_hp_kerabat1" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">Nama Kerabat 2</label>
              <input type="text" name="nama_kerabat2" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">No HP Kerabat 2</label>
              <input type="text" name="no_hp_kerabat2" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">Nama Kerabat 3</label>
              <input type="text" name="nama_kerabat3" class="w-full border rounded px-3 py-2">
            </div>
            <div>
              <label class="block text-sm font-medium">No HP Kerabat 3</label>
              <input type="text" name="no_hp_kerabat3" class="w-full border rounded px-3 py-2">
            </div>
          </div>
        </div>

      </div> <!-- end createSteps -->

      <div class="flex justify-end gap-2 border-t pt-3">
        <button type="button" id="prevCreateBtn" class="hidden bg-gray-200 px-4 py-2 rounded">← Kembali</button>
        <button type="button" id="nextCreateBtn" class="bg-blue-600 text-white px-4 py-2 rounded">Lanjut →</button>
        <button type="submit" id="submitCreateBtn" class="hidden bg-red-600 text-white px-4 py-2 rounded">Simpan</button>
      </div>
    </form>
  </div>
</div>

<!-- Image preview modal (created dynamically) -->
<div id="imagePreviewContainer"></div>

<!-- Scripts -->
<script>
// dropdown toggle
const menuButton = document.getElementById('menu-button');
const dropdownMenu = document.getElementById('dropdownMenu');
menuButton.addEventListener('click', () => dropdownMenu.classList.toggle('hidden'));

authorizeModalToggles();

// set up modal toggle listeners (delegated)
function authorizeModalToggles(){
  document.querySelectorAll('[data-modal-toggle]').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.getAttribute('data-modal-target') || btn.dataset.modalToggle;
      toggleModal(id, true);
    });
  });

  document.querySelectorAll('[data-modal-hide]').forEach(btn => {
    btn.addEventListener('click', () => {
      const id = btn.getAttribute('data-modal-hide');
      toggleModal(id, false);
    });
  });
}

function toggleModal(id, show){
  const modal = document.getElementById(id);
  if(!modal) return;
  if(show) modal.classList.remove('hidden'); else modal.classList.add('hidden');
}

// Create modal elements will also be closed when clicking outside
document.addEventListener('click', function(e){
  // close dropdown when clicking outside
  if(!menuButton.contains(e.target) && !dropdownMenu.contains(e.target)) dropdownMenu.classList.add('hidden');
});

// Multi-step logic for create modal
(function(){
  const steps = Array.from(document.querySelectorAll('#createSteps .step'));
  let idx = 0;
  const prevBtn = document.getElementById('prevCreateBtn');
  const nextBtn = document.getElementById('nextCreateBtn');
  const submitBtn = document.getElementById('submitCreateBtn');

  function showIndex(i){
    steps.forEach((s, k) => {
      if(k===i) { s.classList.remove('hidden'); } else { s.classList.add('hidden'); }
    });
    prevBtn.classList.toggle('hidden', i===0);
    nextBtn.classList.toggle('hidden', i===steps.length-1);
    submitBtn.classList.toggle('hidden', i!==steps.length-1);
  }

  nextBtn.addEventListener('click', ()=>{
    // validate required fields in current step
    const current = steps[idx];
    const required = Array.from(current.querySelectorAll('[required]'));
    for(const el of required){
      if(!el.value || el.value.trim()===""){
        Swal.fire('Data belum lengkap', 'Harap isi semua field wajib pada bagian ini sebelum melanjutkan.', 'error');
        return;
      }
    }
    if(idx < steps.length-1) idx++; showIndex(idx);
  });

  prevBtn.addEventListener('click', ()=>{ if(idx>0) idx--; showIndex(idx); });
  showIndex(idx);
})();

// Search & filter
(function(){
  const form = document.getElementById('filterForm');
  const search = document.getElementById('searchInput');
  const filter = document.getElementById('filterJabatan');
  let typingTimer;  
  const doneTypingInterval = 2000; // 2 detik

  // submit kalau tekan Enter
  search.addEventListener('keypress', e => {
    if (e.key === 'Enter') {
      e.preventDefault(); // cegah reload default
      form.submit();
    }
  });

  // submit kalau berhenti mengetik 3 detik
  search.addEventListener('input', () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(() => {
      form.submit();
    }, doneTypingInterval);
  });

  // submit kalau ganti filter jabatan
  filter.addEventListener('change', () => {
    form.submit();
  });
})();


// Delete confirmation
document.querySelectorAll('.btn-hapus').forEach(btn => {
  btn.addEventListener('click', function(e){
    e.preventDefault();
    const url = this.dataset.url;
    Swal.fire({
      title: 'Yakin hapus data ini?',
      text: "Data yang dihapus tidak bisa dikembalikan!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#d33',
      cancelButtonColor: '#3085d6',
      confirmButtonText: 'Ya, hapus!',
      cancelButtonText: 'Batal'
    }).then(result => { if(result.isConfirmed) window.location.href = url; });
  });
});

// Image preview modal builder (Tailwind)
function showImageModal(src, field){
  const container = document.getElementById('imagePreviewContainer');
  container.innerHTML = '';
  const modal = document.createElement('div');
  modal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60';
  modal.innerHTML = `
    <div class="bg-white rounded shadow-lg max-w-3xl w-full mx-4">
      <div class="p-4 flex justify-between items-center border-b">
        <h3 class="font-semibold">Preview ${field}</h3>
        <button id="closeImgPrev" class="text-gray-600">✕</button>
      </div>
      <div class="p-4">
        <img src="${src}" class="max-h-[70vh] w-auto mx-auto" alt="preview">
      </div>
      <div class="p-4 text-right border-t">
        <button id="closeImgPrev2" class="px-4 py-2 bg-gray-200 rounded">Tutup</button>
      </div>
    </div>`;
  container.appendChild(modal);
  document.getElementById('closeImgPrev').addEventListener('click', ()=> container.innerHTML='');
  document.getElementById('closeImgPrev2').addEventListener('click', ()=> container.innerHTML='');
}

// Create form previews
function handleCreateKTPPreview(e){
  const file = e.target.files && e.target.files[0];
  const btn = document.getElementById('preview-ktp-create');
  if(file){
    const reader = new FileReader();
    reader.onload = (ev)=>{ btn.classList.remove('hidden'); btn.onclick = ()=> showImageModal(ev.target.result, "KTP"); };
    reader.readAsDataURL(file);
    // optional: auto OCR
    uploadOCRFile(file, 'create');
  } else { btn.classList.add('hidden'); }
}
function handleCreateKKPreview(e){
  const file = e.target.files && e.target.files[0];
  const btn = document.getElementById('preview-kk-create');
  if(file){
    const reader = new FileReader();
    reader.onload = (ev)=>{ btn.classList.remove('hidden'); btn.onclick = ()=> showImageModal(ev.target.result, "KK"); };
    reader.readAsDataURL(file);
  } else { btn.classList.add('hidden'); }
}

// Edit form previews (per-row) — set up listeners for inputs rendered in loop
function setupEditPreviews(){
  document.querySelectorAll('[id^="foto_ktp_edit_"]').forEach(input => {
    const id = input.id.replace('foto_ktp_edit_','');
    const previewBtn = document.getElementById('preview-ktp-upload-edit-'+id);
    const hiddenOld = document.getElementById('foto_ktp_lama_edit_'+id);
    // show old file if exists
    if(hiddenOld && hiddenOld.value){ previewBtn.classList.remove('hidden'); previewBtn.onclick = ()=> showImageModal('/media/'+hiddenOld.value, "KTP"); }
    input.addEventListener('change', function(e){
      const f = this.files && this.files[0];
      if(f){
        const reader = new FileReader();
        reader.onload = ev => { previewBtn.classList.remove('hidden'); previewBtn.onclick = ()=> showImageModal(ev.target.result, "KTP"); };
        reader.readAsDataURL(f);
        // optional OCR for edit mode
        uploadOCRFile(f, 'edit', id);
      }
    });
  });

  document.querySelectorAll('[id^="foto_kk_edit_"]').forEach(input => {
    const id = input.id.replace('foto_kk_edit_','');
    const previewBtn = document.getElementById('preview-kk-upload-edit-'+id);
    const hiddenOld = document.getElementById('foto_kk_lama_edit_'+id);
    if(hiddenOld && hiddenOld.value){ previewBtn.classList.remove('hidden'); previewBtn.onclick = ()=> showImageModal('/media/'+hiddenOld.value, "KK"); }
    input.addEventListener('change', function(e){
      const f = this.files && this.files[0];
      if(f){
        const reader = new FileReader();
        reader.onload = ev => { previewBtn.classList.remove('hidden'); previewBtn.onclick = ()=> showImageModal(ev.target.result, "KK"); };
        reader.readAsDataURL(f);
      }
    });
  });
}

// call initially
setupEditPreviews();

// OCR upload helper (POST to server endpoint). mode: 'create' or 'edit'
function uploadOCRFile(file, mode='create', editId){
  if(!file) return;
  const url = "{% url 'ocr_ktp' %}";
  const fd = new FormData();
  fd.append('foto_ktp', file);
  fetch(url, { method: 'POST', headers: { 'X-CSRFToken': '{{ csrf_token }}' }, body: fd })
    .then(r=>r.json())
    .then(data => {
      if(data.success && data.data){
        // populate fields depending mode
        if(mode==='create'){
          if(data.data.nik_ktp) document.querySelector('#create_nik').value = data.data.nik_ktp;
          if(data.data.nama) document.querySelector('#create_nama').value = data.data.nama;
          if(data.data.tanggal_lahir) document.querySelector('#create_tanggal_lahir').value = data.data.tanggal_lahir;
          if(data.data.alamat_ktp) document.querySelector('#create_alamat_ktp').value = data.data.alamat_ktp;
        } else if(mode==='edit' && editId){
          const modal = document.getElementById('editModal'+editId);
          if(modal){
            if(data.data.nik_ktp) modal.querySelector("input[name='nik_ktp']").value = data.data.nik_ktp;
            if(data.data.nama) modal.querySelector("input[name='nama']").value = data.data.nama;
            if(data.data.tanggal_lahir) modal.querySelector("input[name='tanggal_lahir']").value = data.data.tanggal_lahir;
            if(data.data.alamat_ktp) modal.querySelector("textarea[name='alamat_ktp']").value = data.data.alamat_ktp;
          }
        }
      } else if(data.error){
        console.warn('OCR error:', data.error);
      }
    })
    .catch(err => console.error('OCR request failed', err));
}

// Attach OCR for edit inputs (call when file change with id available)
document.addEventListener('change', function(e){
  if(e.target && e.target.id && e.target.id.startsWith('foto_ktp_edit_')){
    const id = e.target.id.replace('foto_ktp_edit_','');
    const file = e.target.files && e.target.files[0];
    if(file) uploadOCRFile(file, 'edit', id);
  }
});

// Simple email validation without regex (to avoid escape issues)
function isValidEmailSimple(email){
  if(!email) return true; // empty allowed (some fields optional)
  const at = email.indexOf('@');
  const dot = email.lastIndexOf('.');
  return at > 0 && dot > at + 1 && dot < email.length - 1;
}

// Email validation for both create and edit forms (prevent submit if invalid)
document.addEventListener('submit', function(e){
  const form = e.target;
  if(!form) return;
  const emailInput = form.querySelector("input[name='email']");
  if(emailInput && emailInput.value && !isValidEmailSimple(emailInput.value)){
    e.preventDefault();
    Swal.fire('Format Email Salah', 'Harap masukkan alamat email yang valid, contoh: nama@domain.com', 'error');
  }
});

</script>

{% endblock %}