// Feature: Toggle NIK
$("#jenis-nasabah").on("change", function () {
  const jenisNasabah = parseInt($(this).val());
  const nik = $("#nik").parent();

  // Check value of jenis nasabah
  if (jenisNasabah == 0) {
    nik.removeClass("d-none").addClass("fade-in");
    $("#nik").attr("disabled", false);

    nik.on("animationend", function () {
      nik.removeClass("fade-in");
      nik.off("animationend");
    });
  } else {
    nik.addClass("fade-out");
    $("#nik").attr("disabled", true);

    nik.on("animationend", function () {
      nik.addClass("d-none").removeClass("fade-out");
      nik.off("animationend");
    });
  }
});

// Feature: Input NIK hanya nomor dan tidak boleh lebih dari 16 karakter
$("#nik").on("input", function () {
  // Menghapus semua karakter yang bukan angka
  $(this).val($(this).val().replace(/\D/g, ""));

  // Memastikan panjang input tidak melebihi 16 karakter
  if ($(this).val().length > 16) {
    $(this).val($(this).val().slice(0, 16));
  }
});

// Feature: Toggle jenis Akun
$("#jenisAkun").on("click", function () {
  const teksJenis = $("#text-jenis-akun");
  const deskripsiJenis = $("#deskripsi-jenis-akun");
  const labelNama = $("#label-nama");
  const jenisNasabah = $("#jenis-nasabah").parent();
  const jenisNasabahValue = $("#jenis-nasabah").val();
  const jenisBankSampah = $("#jenis-bank-sampah").parent();
  const nik = $("#nik").parent();
  const isBankSampah = $(this).is(":checked");

  if (isBankSampah) {
    // Action for Bank Sampah
    teksJenis.text("Bank Sampah");
    deskripsiJenis.text(
      "Daftarkan Bank Sampah anda sekarang untuk lingkungan yang lebih indah 🌳"
    );
    labelNama.text("Nama Bank Sampah");

    jenisBankSampah.removeClass("d-none");
    jenisNasabah.addClass("d-none");

    if (!nik.hasClass("d-none")) {
      nik.addClass("fade-out");
      $("#nik").attr("disabled", true);

      nik.on("animationend", function () {
        nik.addClass("d-none").removeClass("fade-out");
        nik.off("animationend");
      });
    }

    changeSubmitRegister(isBankSampah);
  } else {
    // Action for Nasabah
    teksJenis.text("Nasabah");
    deskripsiJenis.text(
      "Buat akun nasabah pertama anda dan mulai menabung di E-Bank Sampah 🗑️"
    );
    labelNama.text("Nama Lengkap");

    jenisBankSampah.addClass("d-none");
    jenisNasabah.removeClass("d-none");

    // Check value of janis nasabah
    if (jenisNasabahValue == 0) {
      nik.removeClass("d-none").addClass("fade-in");
      $("#nik").attr("disabled", false);

      nik.on("animationend", function () {
        nik.removeClass("fade-in");
        nik.off("animationend");
      });
    } else {
      if (!nik.hasClass("d-none")) {
        nik.addClass("fade-out");
        $("#nik").attr("disabled", true);

        nik.on("animationend", function () {
          nik.addClass("d-none").removeClass("fade-out");
          nik.off("animationend");
        });
      }
    }

    changeSubmitRegister(isBankSampah);
  }
});

// Feature: Toggle Password
$("#togglePassword").on("click", function () {
  const $passwordField = $("#password");
  const passwordFieldType = $passwordField.attr("type");

  if (passwordFieldType === "password") {
    $passwordField.attr("type", "text");
  } else {
    $passwordField.attr("type", "password");
  }
});

// Feature: Submit Register
function changeSubmitRegister(isBankSampah) {
  // Change this string endpoint API
  const endpointNasabah = "/api/register/nasabah";
  const endpointBankSampah = "/api/register/bank-sampah";

  const form = $("#form-register");

  isBankSampah
    ? form.attr("action", endpointBankSampah)
    : form.attr("action", endpointNasabah);
}