{% extends "layout/ver_baru/base_admin.html" %}

{% block title %}Form Biodata - CWN{% endblock %}
{% block content %}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

{% if success %}
<script>
Swal.fire({
  icon: 'success',
  title: 'Berhasil',
  text: '{{ success|escapejs }}',
  confirmButtonText: 'OK'
}).then(() => {
  window.location.href = "{% url 'dataps' %}";
});
</script>
{% endif %}

{% if error %}
<script>
Swal.fire({
  icon: 'error',
  title: 'Gagal',
  text: '{{ error|escapejs }}',
  confirmButtonText: 'OK'
});
</script>
{% endif %}

<div class="max-w-5xl mx-auto mt-6 mb-10">
  <h2 class="text-center text-white bg-red-700 py-3 rounded-lg mb-4 font-bold text-xl">Biodata Karyawan</h2>

  <div class="bg-white shadow-lg rounded-lg border border-red-600">
    <div class="bg-red-600 text-white px-4 py-3 rounded-t-lg">
      <h5 class="font-semibold">Form Biodata Karyawan</h5>
    </div>
    <div class="p-6">
      <form method="post" enctype="multipart/form-data" id="form-biodata" class="space-y-6">
        {% csrf_token %}
        <input type="hidden" name="form_type" value="create">

        <!-- Swiper wrapper -->
        <div class="swiper">
          <div class="swiper-wrapper">

            <!-- Slide 1 -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Upload Dokumen</h5>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block font-medium">Foto KTP<span class="text-red-500">*</span></label>
                  <input type="file" name="foto_ktp" id="foto_ktp"
                         class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:outline-none"
                         accept="image/*" onchange="uploadOCR()" required>
                  <input type="hidden" id="foto_ktp_lama" name="foto_ktp_lama">
                </div>
                <div class="flex items-end">
                  <a href="#" id="preview-ktp-upload"
                     class="hidden w-full text-center px-3 py-2 border rounded-md text-sm font-medium text-blue-600 border-blue-600 hover:bg-blue-50">
                    Preview
                  </a>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div>
                  <label class="block font-medium">Foto Kartu Keluarga<span class="text-red-500">*</span></label>
                  <input type="file" name="foto_kk" id="foto_kk"
                         class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:outline-none"
                         accept="image/*" required>
                  <input type="hidden" id="foto_kk_lama" name="foto_kk_lama">
                </div>
                <div class="flex items-end">
                  <a href="#" id="preview-kk-upload"
                     class="hidden w-full text-center px-3 py-2 border rounded-md text-sm font-medium text-blue-600 border-blue-600 hover:bg-blue-50">
                    Preview
                  </a>
                </div>
              </div>
            </div>

            <!-- Slide 2: Data Pribadi -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Data Pribadi</h5>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block font-medium">ID Karyawan<span class="text-red-500">*</span></label>
                  <input type="text" name="id_karyawan" value="{{ id_default|default:'' }}" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Nama<span class="text-red-500">*</span></label>
                  <input type="text" name="nama" value="{{ nama_default|default:'' }}" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div class="md:col-span-2">
                  <label class="block font-medium">NIK KTP<span class="text-red-500">*</span></label>
                  <input type="text" name="nik_ktp" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Tanggal Lahir</label>
                  <input type="date" name="tanggal_lahir" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Jabatan</label>
                  <input type="text" name="jabatan" value="{{ jabatan_default|default:'' }}" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
              </div>
            </div>

            <!-- Slide 3: Kontak -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Kontak</h5>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block font-medium">Email<span class="text-red-500">*</span></label>
                  <input type="email" id="email" name="email" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">No HP (Whatsapp Aktif)<span class="text-red-500">*</span></label>
                  <input type="text" name="no_hp" placeholder="081234567890" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
              </div>
            </div>

            <!-- Slide 4: Alamat -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Alamat</h5>
              <div class="space-y-4">
                <div>
                  <label class="block font-medium">Alamat KTP<span class="text-red-500">*</span></label>
                  <textarea name="alamat_ktp" required rows="3"
                            class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"></textarea>
                </div>
                <div>
                  <label class="block font-medium">Alamat Domisili<span class="text-red-500">*</span></label>
                  <textarea name="alamat_domisili" required rows="3"
                            class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500"></textarea>
                </div>
              </div>
            </div>

            <!-- Slide 5: Pendidikan -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Pendidikan</h5>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block font-medium">Pendidikan Terakhir</label>
                  <input type="text" name="pendidikan_terakhir" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Jurusan</label>
                  <input type="text" name="jurusan" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div class="md:col-span-2">
                  <label class="block font-medium">Riwayat Pekerjaan Terakhir</label>
                  <input type="text" name="riwayat_pekerjaan_terakhir" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
              </div>
            </div>

            <!-- Slide 6: Kerabat -->
            <div class="swiper-slide">
              <h5 class="font-semibold mb-4">Kerabat</h5>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label class="block font-medium">Hobi</label>
                  <input type="text" name="hobi" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Hubungan</label>
                  <select name="hubungan" required
                          class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                    <option value="" disabled selected>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 font-medium">Nama Kerabat 1</label>
                  <input type="text" name="nama_kerabat1" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">No HP Kerabat 1</label>
                  <input type="text" name="no_hp_kerabat1" required
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Nama Kerabat 2</label>
                  <input type="text" name="nama_kerabat2"
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">No HP Kerabat 2</label>
                  <input type="text" name="no_hp_kerabat2"
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">Nama Kerabat 3</label>
                  <input type="text" name="nama_kerabat3"
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
                <div>
                  <label class="block font-medium">No HP Kerabat 3</label>
                  <input type="text" name="no_hp_kerabat3"
                         class="mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-red-500">
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Navigation -->
        <div class="flex justify-between mt-6">
          <button type="button" class="hidden bg-gray-500 hover:bg-gray-600 text-white font-medium px-5 py-2 rounded-lg shadow-md" id="prevBtn">&laquo; Prev</button>
          <button type="button" class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-5 py-2 rounded-lg shadow-md" id="nextBtn">Next &raquo;</button>
          <button type="submit" class="hidden bg-red-600 hover:bg-red-700 text-white font-medium px-5 py-2 rounded-lg shadow-md" id="submitBtn">Simpan Biodata</button>
        </div>
      </form>
    </div>
  </div>
  <div id="imagePreviewContainer"></div>
</div>

<!-- SwiperJS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
// swiper init
const swiper = new Swiper('.swiper', {
  slidesPerView: 1,
  spaceBetween: 20,
  allowTouchMove: false,
  autoHeight: true
});

const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
const submitBtn = document.getElementById("submitBtn");

function updateButtons() {
  prevBtn.classList.toggle("hidden", swiper.activeIndex === 0);
  nextBtn.classList.toggle("hidden", swiper.activeIndex === swiper.slides.length - 1);
  submitBtn.classList.toggle("hidden", swiper.activeIndex !== swiper.slides.length - 1);
}

prevBtn.addEventListener("click", () => {
  swiper.slidePrev();
  updateButtons();
});

nextBtn.addEventListener("click", () => {
  const currentSlide = swiper.slides[swiper.activeIndex];
  const inputs = currentSlide.querySelectorAll("input, select, textarea");
  let valid = true;

  inputs.forEach(input => {
    if (input.hasAttribute("required") && !input.value.trim()) {
      valid = false;
      input.classList.add("ring-2", "ring-red-500");
    } else {
      input.classList.remove("ring-2", "ring-red-500");
    }
  });

  if (!valid) {
    Swal.fire({
      icon: 'error',
      title: 'Data belum lengkap',
      text: 'Mohon isi semua field yang wajib diisi sebelum lanjut.'
    });
    return;
  }

  swiper.slideNext();
  updateButtons();
});

swiper.on('slideChange', updateButtons);
updateButtons();

// email validation
document.getElementById("form-biodata").addEventListener("submit", function(event) {
  let email = document.getElementById("email").value;
  let emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    event.preventDefault();
    Swal.fire({
      icon: 'error',
      title: 'Format Email Salah',
      text: 'Harap masukkan alamat email yang valid.'
    });
  }
});
</script>

<script>
  // Fungsi builder modal (sesuai contohmu)
  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='');
  }

  // Setup preview KTP
  document.getElementById("foto_ktp").addEventListener("change", function(e) {
    const file = e.target.files[0];
    const previewBtn = document.getElementById("preview-ktp-upload");
    if (file) {
      const url = URL.createObjectURL(file);
      previewBtn.onclick = () => showImageModal(url, "KTP");
      previewBtn.classList.remove("hidden");
    } else {
      previewBtn.classList.add("hidden");
    }
  });

  // Setup preview KK
  document.getElementById("foto_kk").addEventListener("change", function(e) {
    const file = e.target.files[0];
    const previewBtn = document.getElementById("preview-kk-upload");
    if (file) {
      const url = URL.createObjectURL(file);
      previewBtn.onclick = () => showImageModal(url, "KK");
      previewBtn.classList.remove("hidden");
    } else {
      previewBtn.classList.add("hidden");
    }
  });
</script>


{% endblock %}