$(document).ready(() => {
  const new_account = $("input[name='new_account']");
  const preview_icon = $("#preview-icon");

  new_account.on("keyup", () => {
    console.log(new_account.val());
    // console.log("keyup is called");
    const visa = new RegExp(/^4[0-9]{1,12}((?:[0-9]{1,3}))?$/);
    const mastercard = new RegExp(/^5[1-5]{1}[0-9]{0,14}$/);
    const amex = new RegExp(/^3[47]{2}[0-9]{0,13}$/);
    const amex2 = new RegExp(/^3[76]{2}[0-9]{0,13}$/);
    const amex3 = new RegExp(/^3[74]{2}[0-9]{0,13}$/);
    // const discover = new RegExp(/^6(?:011|5[0-9]{2})[0-9]{0,12}$/);
    const jcb = new RegExp(/^35[0-9]{0,14}$/);
    if (visa.test(new_account.val())) {
      preview_icon.attr("src", "../../img/visa.png");
      $(".cid-container").css("display", "none");
    } else if (mastercard.test(new_account.val())) {
      preview_icon.attr("src", "../../img/mastercard_kecil.png");
      $(".cid-container").css("display", "none");
    } else if (
      amex.test(new_account.val()) ||
      amex2.test(new_account.val()) ||
      amex3.test(new_account.val())
    ) {
      preview_icon.attr("src", "../../img/amexrican_kecil.png");
      $(".cid-container").css("display", "flex");
    } else if (jcb.test(new_account.val())) {
      preview_icon.attr("src", "../../img/jcb_kecil.png");
      $(".cid-container").css("display", "none");
    } else {
      preview_icon.attr("src", "../../img/cc_kecil.png");
      $(".cid-container").css("display", "none");
    }
  });
});