Formulir Aplikasi Kepesertaan Program Pensiun Iuran Pasti

Wajib diisi dengan huruf kapital

  1. Step 01
  2. Step 02
  3. Step 3
                      
    <div class="panel panel-default">
      <aui:form name="fm" method="post" action="" enctype="multipart/form-data">
        <div class="panel-body pt-4">
          <ol class="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top">
    
            <li class="active multi-step-item multi-step-item-expand">
              <div class="multi-step-divider"></div>
              <div class="multi-step-indicator">
                <div class="multi-step-indicator-label">Step 01</div>
                <a class="multi-step-icon" data-multi-step-icon="1" href="javascript:void(0)"></a>
              </div>
            </li>
            <li class="disabled multi-step-item multi-step-item-expand">
              <div class="multi-step-divider"></div>
              <div class="multi-step-indicator">
                <div class="multi-step-indicator-label">Step 02</div>
                <a class="multi-step-icon" data-multi-step-icon="2" href="javascript:void(0)"></a>
              </div>
            </li>
            <li class="disabled multi-step-item">
              <div class="multi-step-divider"></div>
              <div class="multi-step-indicator">
                <div class="multi-step-indicator-label">Step 3</div>
                <a class="multi-step-icon" data-multi-step-icon="3" href="javascript:void(0)"></a>
              </div>
            </li>
          </ol>
    
          <div class="row">
            <div class="col-md-6">
              <div class="form-group box-input type-radio">
                <div clas="box-radio">
                  <label class="control-label d-block">&nbsp;</label>
                  <clay:radio checked=true label="Pendaftaran Baru Individu" name="daftar-baru" inline=true />
                  <clay:radio label="Pendaftaran Baru Badan Hukum" name="daftar-baru" inline=true />
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="box-input">
                <aui:input name="nomor-dplk" label="Nomor DPLK" />
              </div>
            </div>
    
          </div>
          <div class="row mb-4">
            <div class="col-md-6">
              <div class="box-input">
                <aui:input name="nama-fa" label="Nama FA" />
              </div>
              <div class="box-input">
                <aui:input name="kode-fa" label="Kode FA" />
              </div>
            </div>
            <div class="col-md-6">
              <div class="box-input">
                <aui:input name="nama-lg" label="Kode LG" />
              </div>
              <div class="box-input">
                <aui:input name="kode-cabang" label="Kode Cabang" />
              </div>
            </div>
          </div>
        </div>
      </aui:form>
    
      <ul class="navigation-step">
    
        <li class="navigation-item next">
          <clay:button label="Selanjutnya" style="primary" />
        </li>
      </ul>
    </div>                     
                      
                    
  1. Step 01
  2. Step 02
  3. Step 3
Data Umum
                      
    <div class="row mb-4">
      <div class="col-md-12">
        <div class="panel panel-default">
        <aui:form name="fm" method="post" action="" enctype="multipart/form-data">
          <div class="panel-body pt-4">
          <ol class="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top">

            <li class="complete multi-step-item multi-step-item-expand">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
              <div class="multi-step-indicator-label">Step 01</div>
              <a class="multi-step-icon" data-multi-step-icon="1" href="javascript:void(0)"></a>
            </div>
            </li>
            <li class="active multi-step-item multi-step-item-expand">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
              <div class="multi-step-indicator-label">Step 02</div>
              <a class="multi-step-icon" data-multi-step-icon="2" href="javascript:void(0)"></a>
            </div>
            </li>
            <li class="disabled multi-step-item">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
              <div class="multi-step-indicator-label">Step 3</div>
              <a class="multi-step-icon" data-multi-step-icon="3" href="javascript:void(0)"></a>
            </div>
            </li>
          </ol>

          </div>
          <div class="panel-heading">
          Data Umum
          </div>
          <div class="panel-body pt-4">
          <div class="row mb-4">
            <div class="col-md-6">
            <div class="box-input">
              <aui:input name="nama-lengkap" label="Nama lengkap" />
            </div>
            <div class="box-input">
              <aui:input name="tempat-lahir" label="Tempat Lahir" />
            </div>
            <div class="row">
              <div class="col-md-6">
              <div class="box-input type-date">
                <aui:input label="Birth Date" name="birthDate" type="text" cssClass="flat-date"
                helpMessage="Jangan salah pilih tanggal" />
              </div>
              </div>
              <div class="col-md-6">
              <div class="form-group box-input type-radio">
                <div clas="box-radio">
                <label class="control-label d-block">Jenis Kelamin</label>
                <clay:radio checked=true label="Laki-laki" name="jk" inline=true />
                <clay:radio label="Perempuan" name="jk" inline=true />
                </div>
              </div>
              </div>
            </div>
            <div class="box-input">
              <aui:input name="nomor-ktp" label="Nomor KTP/KITAS" />
            </div>
            <div class="box-input type-file">
              <aui:input label="File KTP/KITAS" name="file" type="file" accept="image/jpg, image/jpeg, image/png"
              required=true helpMessage="Hanya terima masukan gambar atau pdf dengan maksimum 1MB">
              <aui:validator name="acceptFiles" errorMessage="only-accept-image-or-pdf">'jpg,png,tif,jpeg,pdf'
              </aui:validator>
              </aui:input>


            </div>
            <div class="row">
              <div class="col-md-6">
              <div class="box-input type-date">
                <aui:input label="Berlaku Hingga" name="expired" type="text" cssClass="flat-date"
                helpMessage="Format : YYYY-MM-DD" />
              </div>
              </div>
              <div class="col-md-6">
              <div class="form-group box-input type-checkbox">
                <div clas="box-checkbox">
                <label class="control-label d-block">&nbsp;</label>
                <clay:checkbox label="Seumur Hidup" name="seumur-hidup" />
                </div>
              </div>
              </div>
            </div>
            <div class="box-input type-number">
              <aui:input type="text" required=true name="home-phone" label="Nomor Telepon Rumah">
              <aui:validator name="rangeLength" errorMessage="Please Enter 11 digit's">[11,11]</aui:validator>
              <aui:validator name="digits" />
              </aui:input>
            </div>
            <div class="box-input type-number">
              <aui:input type="text" required=true name="phone" label="Nomor Telepon Seluler">
              <aui:validator name="rangeLength" errorMessage="Please Enter 11 digit's">[11,11]</aui:validator>
              <aui:validator name="digits" />
              </aui:input>
            </div>
            <div class="box-input type-select">
              <aui:select label="Status Pernikahan" name="status" cssClass="select2">
              <aui:option value="" label="Select Status" />
              <aui:option value="1" label="Tidak Menikah" />
              <aui:option value="2" label="Menikah" />
              <aui:option value="3" label="Cerai" />
              </aui:select>
            </div>
            <div class="box-input">
              <aui:input label="Nama Gadis Ibu Kandung" name="nama-ibu" type="text" />
            </div>
            <div class="box-input type-email">
              <aui:input label="Alamat Email" name="email" type="email" />
            </div>

            <div class="box-input type-date">
              <aui:input label="Tanggal Mulai Bekerja" name="tgl-bekerja" type="text" cssClass="flat-date"
              helpMessage="Format : YYYY-MM-DD" />
            </div>
            </div>


            <div class="col-md-6">
            <div class="box-input type-textarea">
              <aui:input type="textarea" label="Alamat Rumah sesuai KTP/KITAS" name="alamat-rumah" />
            </div>
            <div class="box-input type-select">
              <aui:select label="Kota" name="kota" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="Bogor" />
              <aui:option value="2" label="Jakarta" />
              <aui:option value="3" label="Tanggerang" />
              </aui:select>
            </div>
            <div class="box-input type-select">
              <aui:select label="Provinsi" name="provinsi" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="DKI Jakarta" />
              <aui:option value="2" label="Jawa Barat" />
              <aui:option value="3" label="Jawa Timur" />
              </aui:select>

            </div>
            <div class="row">
              <div class="col-md-4 type-number">
              <div class="box-input">
                <aui:input type="number" label="Kode Pos" name="kode-pos" />
              </div>
              </div>
              <div class="col-md-8">
              <div class="form-group box-input type-checkbox">
                <div clas="box-checkbox">
                <label class="control-label d-block">&nbsp;</label>
                <clay:checkbox label="Jadikan sebagai alamat Surat Menyurat" name="surat-menyurat" />
                </div>
              </div>
              </div>
            </div>
            <div class="box-input type-select">
              <aui:select label="Pekerjaan" name="Pekerjaan" cssClass="select2">
              <aui:option value="" label="Select Pekerjaan" />
              <aui:option value="1" label="Tetap" />
              <aui:option value="2" label="Kontrak" />
              <aui:option value="3" label="Honorer" />
              <aui:option value="4" label="Paruh waktu" />
              <aui:option value="5" label="Lainnya" />
              </aui:select>
            </div>
            <div class="box-input type-select">
              <aui:select label="Pekerjaan Sekarang" name="Pekerjaan-sekarang" cssClass="select2">
              <aui:option value="" label="Select Pekerjaan" />
              <aui:option value="1" label="Peg.Swasta" />
              <aui:option value="2" label="TNI/Polri" />
              <aui:option value="3" label="Ibu Rumah Tangga" />
              <aui:option value="4" label="PNS/BUMN" />
              <aui:option value="5" label="Wiraswasta" />
              <aui:option value="6" label="Lainnya" />
              </aui:select>
            </div>
            <div class="box-input type-textarea">
              <aui:input type="textarea" label="Alamat Tempat Tinggal sekarang" name="alamat-sekarang"
              helpMessage="jika alamat tidak sesuai KTP/KITAS" />
            </div>
            <div class="box-input type-select">
              <aui:select label="Kota" name="kota-sekarang" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="Bogor" />
              <aui:option value="2" label="Jakarta" />
              <aui:option value="3" label="Tanggerang" />
              </aui:select>
            </div>
            <div class="box-input type-select">
              <aui:select label="Provinsi" name="provinsi-sekarang" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="DKI Jakarta" />
              <aui:option value="2" label="Jawa Barat" />
              <aui:option value="3" label="Jawa Timur" />
              </aui:select>
            </div>
            <div class="row">
              <div class="col-md-4 type-number">
              <div class="box-input">
                <aui:input type="number" label="Kode Pos" name="kode-pos-sekarang" />
              </div>
              </div>
              <div class="col-md-8">
              <div class="form-group box-input type-checkbox">
                <div clas="box-checkbox">
                <label class="control-label d-block">&nbsp;</label>
                <clay:checkbox label="Jadikan sebagai alamat Surat Menyurat" name="surat-menyurat-sekarang" />
                </div>
              </div>
              </div>
            </div>

            </div>

          </div>
          <div class="row">
            <div class="col-md-12">
            <div class="form-group box-input type-radio">
              <div clas="box-radio">
              <label class="control-label d-block">Apakah Calon Peserta melakukan pelaporan pajak di luar
                Negara Indonesia?</label>
              <clay:radio checked=true label="Ya" name="lapor-pajak" inline=true />
              <clay:radio label="Tidak" name="lapor-pajak" inline=true />
              </div>
            </div>
            <div class="alert alert-warning" role="alert">
              Bila "Ya" maka isi Formulir DEKLARASI DIRI (Individu/BADAN HUKUM) TERKAIT PERPAJAKAN KEPADA NEGARA
              MITRA dan khusus untuk Warga Amerika Serikat (USA) maka wajib mengisi Formulir W-9
            </div>

            </div>
            <div class="col-md-6">
            <div class="box-input">
              <aui:input type="text" label="Mohon cantumkan TIN (Taxpayer Identification Number)" name="TIN" />
            </div>
            </div>
          </div>

          </div>

        </aui:form>

        <ul class="navigation-step">
          <li class="navigation-item prev">
          <clay:button label="Kembali" style="secondary" />
          </li>
          <li class="navigation-item next">
          <clay:button label="Selanjutnya" style="primary" />
          </li>
        </ul>
        </div>

      </div>
      </div>

      <script type="text/javascript">
      $(document).ready(function () {
        //Function for datepicker
        $(".flat-date").flatpickr();

        //Function for select2 combobox
        $('.select2').select2();

        //Function upload file
        $('.box-input-file').each(function () {
        var fileini = $(this);
        var fileinput = $(this).find("input[type=file]");
        var boximgpreview = $(this).find(".box-img-cover");
        var boxlabel = $(this).find(".box-label");
        function readURL(input) {
          if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.fileName = input.files[0].name
          reader.onload = function (e) {
            // console.log(e);
            var name_img = e.target.fileName;
            var ext = name_img.substring(name_img.lastIndexOf('.') + 1, name_img.length) || name_img;
            // console.log(ext);

            if (ext == "jpg" || ext == "png" || ext == "jpeg" || ext == "JPG" || ext == "JPEG" || ext == "PNG") {
            $(fileini).addClass("has-image");
            $(boximgpreview).css('background-image', 'url(' + e.target.result + ')');
            $(boxlabel).html(name_img);
            $(boximgpreview).hide();
            $(boximgpreview).fadeIn(650);
            } else {
            $(fileini).removeClass("has-image");
            $(boximgpreview).attr("style", "");
            $(boxlabel).html(name_img);
            $(boximgpreview).hide();

            }
          }
          reader.readAsDataURL(input.files[0]);
          }
        }

        $(fileinput).change(function () {
          readURL(this);
        });

        });
      });
      </script>
                      
                    
  1. Step 01
  2. Step 02
  3. Step 3
Data Khusus

Informasi DPLK

Nama Hubungan/Relasi Tempat Lahir Tanggal Lahir (YYYY-MM-DD) JK
1
1

Salinan KTP/SIM/Paspor*

Dokumen dalam format pdf/jpg/png dengan maksimum 1MB
Unggah Dokumen

Preview update when format jpg, png

Dokumen dalam format pdf/jpg/png dengan maksimum 1MB
KTP.jpeg

Preview update when format doc, xls, pdf

Dokumen dalam format pdf/jpg/png dengan maksimum 1MB
29-april-2021-7-35.pdf
                      
    <div class="row mb-4">
      <div class="col-md-12">
      <div class="panel panel-default">
        <aui:form name="fm" method="post" action="" enctype="multipart/form-data">
        <div class="panel-body pt-4">
          <ol class="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top">
    
          <li class="complete multi-step-item multi-step-item-expand">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
            <div class="multi-step-indicator-label">Step 01</div>
            <a class="multi-step-icon" data-multi-step-icon="1" href="javascript:void(0)"></a>
            </div>
          </li>
          <li class="complete multi-step-item multi-step-item-expand">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
            <div class="multi-step-indicator-label">Step 02</div>
            <a class="multi-step-icon" data-multi-step-icon="2" href="javascript:void(0)"></a>
            </div>
          </li>
          <li class="active multi-step-item">
            <div class="multi-step-divider"></div>
            <div class="multi-step-indicator">
            <div class="multi-step-indicator-label">Step 3</div>
            <a class="multi-step-icon" data-multi-step-icon="3" href="javascript:void(0)"></a>
            </div>
          </li>
          </ol>
    
        </div>
        <div class="panel-heading">
          Data Khusus
        </div>
        <div class="panel-body">
          <div class="row">
          <div class="col-md-6">
            <div class="box-input">
            <aui:input name="nik-peserta" label="NIK Peserta" />
            </div>
            <div class="box-input">
            <aui:input name="jabatan-peserta" label="Jabatan" />
            </div>
            <div class="box-input type-select">
            <aui:select label="Bidang Usaha" name="bidang-usaha" cssClass="select2">
              <aui:option value="" label="Select bidang usaha" />
              <aui:option value="1" label="Perdagangan" />
              <aui:option value="2" label="Manufaktur" />
              <aui:option value="3" label="Jasa Keuangan" />
              <aui:option value="4" label="Pemerintahan" />
              <aui:option value="5" label="Konstruksi" />
              <aui:option value="6" label="Transportasi" />
              <aui:option value="7" label="Sumber Daya Alam" />
              <aui:option value="8" label="Lainnya" />
            </aui:select>
            </div>
            <div class="form-group box-input type-radio">
            <div class="box-radio">
              <label class="control-label d-block">Kewarganegaraan</label>
              <div class="radio-with-text">
              <clay:radio checked=true label="WNI" name="kewarganegaraan" inline=true />
              <div class="custom-control-inline">
                <clay:radio label="WNA" name="kewarganegaraan" inline=true />
                <div class="box-input">
                <aui:input name="wna-mana" label="" />
                </div>
              </div>
              </div>
    
            </div>
            </div>
            <div class="box-input type-select">
            <aui:select label="Agama" name="agama" cssClass="select2">
              <aui:option value="" label="Select Agama" />
              <aui:option value="1" label="Islam" />
              <aui:option value="2" label="Hindu" />
              <aui:option value="3" label="Budha" />
              <aui:option value="4" label="Kristen Protestan" />
              <aui:option value="5" label="Khong Hu Cu" />
              <aui:option value="6" label="Lainnya" />
            </aui:select>
            </div>
            <div class="form-group box-input type-radio">
            <div class="box-radio">
              <label class="control-label d-block">Pindahan DPLK</label>
              <div class="radio-with-text">
              <clay:radio checked=true label="Ya" name="pindahan-dplk" inline=true />
              <div class="custom-control-inline">
                <clay:radio label="Tidak" name="pindahan-dplk" inline=true />
                <div class="box-input">
                <aui:input name="wna-mana" label="" placeholder="Nama DPLK (Jika Ya)" />
                </div>
              </div>
              </div>
    
            </div>
            </div>
            <div class="box-input">
            <aui:input name="nama-pemilik-rekening" label="Nama Pemilik Rekening" helpMessage="Untuk peserta Individu" />
            </div>
            <div class="box-input">
            <aui:input name="nomor-rekening" label="Nomor Rekening Sumber Dana" helpMessage="Untuk peserta Individu" />
            </div>
            <div class="form-group box-input type-radio">
            <div clas="box-radio">
              <label class="control-label d-block">Jenis Rekening</label>
              <clay:radio checked=true label="Tabungan/Saving Account" name="jenis-rekening" inline=true />
              <clay:radio label="Giro/Current Account" name="jenis-rekening" inline=true />
            </div>
            </div>
            <div class="box-input type-select">
            <aui:select label="Penghasilan Rata-Rata perbulan" name="penghasilan" cssClass="select2">
              <aui:option value="" label="Select penghasilan" />
              <aui:option value="1" label="< Rp 5 Juta" />
              <aui:option value="3" label="Rp 5 Juta - Rp 10 Juta" />
              <aui:option value="2" label="Rp 10 Juta - Rp 50 Juta" />
              <aui:option value="4" label="> Rp 50 Juta" />
            </aui:select>
            </div>
    
          </div>
          <div class="col-md-6">
            <div class="box-input">
            <aui:input name="nama-badan-hukum" label="Nama Badan Hukum" />
            </div>
            <div class="box-input">
            <aui:input type="textarea" name="alamat-badan-hukum" label="Alamat Badan Hukum" />
            </div>
            <div class="box-input type-select">
            <aui:select label="Kota" name="kota" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="Bogor" />
              <aui:option value="2" label="Jakarta" />
              <aui:option value="3" label="Tanggerang" />
            </aui:select>
            </div>
            <div class="box-input type-select">
            <aui:select label="Provinsi" name="provinsi" cssClass="select2">
              <aui:option value="" label="Select Kota" />
              <aui:option value="1" label="DKI Jakarta" />
              <aui:option value="2" label="Jawa Barat" />
              <aui:option value="3" label="Jawa Timur" />
            </aui:select>
            </div>
            <div class="row">
            <div class="col-md-4 type-number">
              <div class="box-input">
              <aui:input type="number" label="Kode Pos" name="kode-pos" />
              </div>
            </div>
            <div class="col-md-8">
              <div class="form-group box-input type-checkbox">
              <div clas="box-checkbox">
                <label class="control-label d-block">&nbsp;</label>
                <clay:checkbox label="Jadikan sebagai alamat Surat Menyurat" name="surat-menyurat" />
              </div>
              </div>
            </div>
            </div>
            <h3 style="margin-top:52px">Informasi DPLK</h3>
            <div class="box-input">
            <aui:input name="usia-pensiun" label="Usia Pensiun"
              helpMessage="Untuk Peserta Badan Hukum, Usia Pensiun Mengikuti Ketentuan Badan Hukum | Untuk Peserta Individu, Usia Pensiun Sekurang-Kurangnya 40 tahun" />
            </div>
            <div class="box-input">
            <aui:input name="iuran" label="Iuran (Rp)"
              helpMessage="Untuk Peserta Badan Hukum, besarnya iuran mengikuti ketentuan Badan Hukum" />
            </div>
            <div class="form-group box-input type-radio">
            <div clas="box-radio">
              <label class="control-label d-block">Sumber Dana</label>
              <clay:checkbox checked=true label="Gaji" name="sumber-dana-gaji" inline=true />
              <clay:checkbox label="Hasil Usaha" name="sumber-dana-usaha" inline=true />
              <clay:checkbox label="Badan Hukum" name="sumber-dana-bh" inline=true />
            </div>
            </div>
            <div class="box-input type-select">
            <aui:select label="Tanggal Auto Debet" name="tgl-autodebet" cssClass="select2" helpMessage="Iuran Pertama di AutoDebet setelah pendaftaran diinput, iuran selanjutnya sesuai tanggal AutoDebet sumber dana, jika AutoDebet tidak berhasil akan dilakukan Autodebet pada hari berikutnya 
                    | pilihan tanggal AutoDebet 1 s/d 28">
              <aui:option value="" label="Select tanggal" />
              <aui:option value="1" label="01" />
              <aui:option value="2" label="02" />
              <aui:option value="3" label="03" />
              <aui:option value="4" label="04" />
              <aui:option value="5" label="05" />
              <aui:option value="6" label="06" />
              <aui:option value="7" label="07" />
              <aui:option value="8" label="08" />
              <aui:option value="9" label="09" />
              <aui:option value="10" label="10" />
              <aui:option value="11" label="11" />
              <aui:option value="12" label="12" />
              <aui:option value="13" label="13" />
              <aui:option value="14" label="14" />
              <aui:option value="15" label="15" />
              <aui:option value="16" label="16" />
              <aui:option value="17" label="17" />
              <aui:option value="18" label="18" />
              <aui:option value="19" label="19" />
              <aui:option value="20" label="20" />
              <aui:option value="21" label="21" />
              <aui:option value="22" label="22" />
              <aui:option value="23" label="23" />
              <aui:option value="24" label="24" />
              <aui:option value="25" label="25" />
              <aui:option value="26" label="26" />
              <aui:option value="27" label="27" />
              <aui:option value="28" label="28" />
            </aui:select>
            </div>
            <div class="box-input">
            <aui:input name="tujuan-rekening" label="Tujuan Pembukaan Rekening" />
            </div>
    
    
          </div>
          </div>
          <div class="row">
          <div class="col-md-12">
            <div class="box-input type-select">
            <aui:select label="Pilihan Paket Investasi Konvensional" name="pilihan-paket" cssClass="select2">
              <aui:option value="" label="Select paket" />
              <aui:option value="1" label="Pasar Uang (PU) 100% PU" />
              <aui:option value="2" label="Pendapatan Tetap (PT) min. 60% PT + Maks.40% PU" />
              <aui:option value="3" label="Syariah (SY) - Pasar Uang 100% PU Syariah (SYPU)" />
              <aui:option value="4" label="Saham (SH) - Pasar Uang min. 60% SH + Maks. 40% PU" />
              <aui:option value="5" label="Saham (SH) - Pendapatan Tetap min. 60% SH + Maks. 40% PT" />
              <aui:option value="6" label="Syariah (SY) - Pendapatan Tetap min. 60% PT Syariah (SYPT) + maks. 40% SYPU" />
              <aui:option value="6" label="Kombinasi 1 maks.70% PU + maks. 70% PT + maks. 30% SH" />
              <aui:option value="7" label="Kombinasi 2 maks.60% PU + maks. 60% PT + maks. 40% SH" />
            </aui:select>
            </div>
            <div class="alert alert-warning" role="alert">
            Catatan :<Br />
            <ol>
              <li>Untuk Peserta Badan Hukum, maka pilihan Investasi mengikuti Ketentuan Badan Hukum</li>
              <li>Sesuai ketentuan POJK No.5/POJK.05/2017, 2 tahun sebelum memasuki usia pensiun normal,
              pengelolaan asset peserta harus ditempatkan pada Paket Pasar Uang</li>
            </ol>
    
            </div>
          </div>
          </div>
          <div class="row mb-2">
          <div class="col-md-12">
            <table class="table table-autofit table-list table-nowrap table-responsive">
            <thead>
              <tr>
              <th>
                <span class="text-truncate-inline">
                <span class="text-truncate"></span>
                </span>
              </th>
              <th class="table-cell-expand">
                <span class="text-truncate-inline">
                <span class="text-truncate">Nama</span>
                </span>
              </th>
              <th class="table-cell-expand">
                <span class="text-truncate-inline">
                <span class="text-truncate">Hubungan/Relasi</span>
                </span>
              </th>
              <th class="table-cell-expand">
                <span class="text-truncate-inline">
                <span class="text-truncate">Tempat Lahir</span>
                </span>
              </th>
              <th class="table-cell-expand">
                <span class="text-truncate-inline">
                <span class="text-truncate">Tanggal Lahir (YYYY-MM-DD)</span>
                </span>
              </th>
              <th class="table-cell-expand">
                <span class="text-truncate-inline">
                <span class="text-truncate">JK</span>
                </span>
              </th>
              <!-- <th class="table-column-text-end"></th> -->
              </tr>
            </thead>
            <tbody>
              <tr>
              <td>
                <span class="text-truncate-inline">
                <span class="text-truncate">1</span>
                </span>
              </td>
              <td class="table-cell-expand">
                <div class="box-input">
                <aui:input type="text" label="" name="name1" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input type-select">
                <aui:select label="" name="hubungan1" cssClass="select2">
                  <aui:option value="" label="Select hubungan/relasi" />
                  <aui:option value="1" label="Istri" />
                  <aui:option value="2" label="Suami" />
                  <aui:option value="3" label="Anak laki-laki" />
                  <aui:option value="4" label="Anak Perempuan" />
                  <aui:option value="5" label="Orang tua" />
                  <aui:option value="6" label="Lainnya" />
                </aui:select>
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input">
                <aui:input type="text" label="" name="tempat-lahir" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input type-date">
                <aui:input label="" name="tanggal-lahir1" type="text" cssClass="flat-date" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="form-group box-input type-radio">
                <div clas="box-radio">
                  <clay:radio checked=true label="L" name="jenis-kelamin1" inline=true />
                  <clay:radio label="P" name="jenis-kelamin1" inline=true />
                </div>
                </div>
              </td>
              <!-- <td class="table-column-text-end"></td> -->
              </tr>
              <tr>
              <td>
                <span class="text-truncate-inline">
                <span class="text-truncate">1</span>
                </span>
              </td>
              <td class="table-cell-expand">
                <div class="box-input">
                <aui:input type="text" label="" name="name2" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input type-select">
                <aui:select label="" name="hubungan2" cssClass="select2">
                  <aui:option value="" label="Select hubungan/relasi" />
                  <aui:option value="1" label="Istri" />
                  <aui:option value="2" label="Suami" />
                  <aui:option value="3" label="Anak laki-laki" />
                  <aui:option value="4" label="Anak Perempuan" />
                  <aui:option value="5" label="Orang tua" />
                  <aui:option value="6" label="Lainnya" />
                </aui:select>
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input">
                <aui:input type="text" label="" name="tempat-lahir2" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="box-input type-date">
                <aui:input label="" name="tanggal-lahir2" type="text" cssClass="flat-date" />
                </div>
              </td>
              <td class="table-cell-expand">
                <div class="form-group box-input type-radio">
                <div clas="box-radio">
                  <clay:radio checked=true label="L" name="jenis-kelamin2" inline=true />
                  <clay:radio label="P" name="jenis-kelamin2" inline=true />
                </div>
                </div>
              </td>
              <!-- <td class="table-column-text-end"></td> -->
              </tr>
            </tbody>
            </table>
          </div>
          </div>
          <div class="row">
          <div class="col-md-4">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
              <div class="box-label">
              <h3>Salinan KTP/SIM/Paspor*</h3>
              <div class="info-summary">Dokumen dalam format pdf/jpg/png dengan maksimum 1MB</div>
              </div>
            </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
              <div class="box-input-file">
              <aui:input type="file" name="unggah-doc" id="file-upload" label="" required=true />
    
              <div class="box-img-cover" style="display:none;">
    
              </div>
              <div class="box-label">
                <i class="fas fa-plus"></i>
                Unggah Dokumen
              </div>
              </div>
            </div>
            </div>
          </div>
          </div>
          <div class="row">
          <div class="col-md-4">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
              <div class="box-label">
              <h3>Preview update when format jpg, png</h3>
              <div class="info-summary">Dokumen dalam format pdf/jpg/png dengan maksimum 1MB</div>
              </div>
            </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
    
              <!-- CLASS "has-image" just for doc format: jpg, png.
                      if format document is : .doc, .xls, .pdf etc leave the class empty -->
              <div class="box-input-file has-image">
              <aui:input type="file" name="unggah-doc-update" label="" required=true />
    
              <!-- URL IMAGE FOR PREVIEW WHEN UPDATE -->
              <div class="box-img-cover" style="background-image: url(https://axa.co.id/o/axaone-theme/images/thumbnail.png);">
              </div>
              <!-- URL IMAGE FOR PREVIEW WHEN UPDATE -->
    
              <!-- NAME IMAGE/DOC WHEN UPDATE -->
              <div class="box-label">KTP.jpeg</div>
              <!-- NAME IMAGE/DOC WHEN UPDATE -->
              </div>
            </div>
            </div>
          </div>
          </div>
          <div class="row">
          <div class="col-md-4">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
              <div class="box-label">
              <h3>Preview update when format doc, xls, pdf</h3>
              <div class="info-summary">Dokumen dalam format pdf/jpg/png dengan maksimum 1MB</div>
              </div>
            </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="box-input-doc">
            <div class="box-input-doc-inner">
    
              <!-- CLASS "has-image" just for doc format: jpg, png.
                      if format document is : .doc, .xls, .pdf etc leave the class empty -->
              <div class="box-input-file">
              <aui:input type="file" name="unggah-doc-update2" label="" required=true />
    
              <!-- URL IMAGE FOR PREVIEW WHEN UPDATE -->
              <div class="box-img-cover" style="">
              </div>
              <!-- URL IMAGE FOR PREVIEW WHEN UPDATE -->
    
              <!-- NAME IMAGE/DOC WHEN UPDATE -->
              <div class="box-label">29-april-2021-7-35.pdf</div>
              <!-- NAME IMAGE/DOC WHEN UPDATE -->
              </div>
            </div>
            </div>
          </div>
          </div>
          <div class="row">
          <div class="col-md-12">
            <div class="box-input type-captcha">
            </div>
          </div>
          </div>
          <div class="row">
          <div class="col-md-12">
            <div class="form-group box-input type-checkbox">
            <div clas="box-checkbox">
              <label class="control-label d-block">&nbsp;</label>
              <div class="custom-control custom-checkbox">
              <label>
                <input class="custom-control-input" name="setuju" ref="input" type="checkbox">
                <span class="custom-control-label"><span class="custom-control-label-text">Saya
                  telah membaca, memahami, dan menyetujui hal-hal yang tercantum pada <a href="" class="link-primary"
                  data-target="#modal-syarat" data-toggle="modal">Pernyataan dan
                  kuasa</a>
                </span>
                </span>
              </label>
              </div>
            </div>
            </div>
          </div>
          </div>
    
        </div>
        </aui:form>
        <ul class="navigation-step">
        <li class="navigation-item prev">
          <clay:button label="Kembali" style="secondary" />
        </li>
        <li class="navigation-item next">
          <aui:button id="submit-check" type="submit" cssClass="btn cx-btn btn-sm btn-primary" value="Submit" />
        </li>
        </ul>
      </div>
    
      </div>
    </div>
    
    <script type="text/javascript">
      $(document).ready(function () {
      //Function for datepicker
      $(".flat-date").flatpickr();
    
      //Function for select2 combobox
      $('.select2').select2();
    
      //Function for multiple select
      var autocomplete = new SelectPure(".autocomplete-select", {
        options: [
        {
          label: "Barbina",
          value: "ba",
        },
        {
          label: "Bigoli",
          value: "bg",
        },
        {
          label: "Bucatini",
          value: "bu",
        },
        {
          label: "Busiate",
          value: "bus",
        },
        {
          label: "Capellini",
          value: "cp",
        },
        {
          label: "Fedelini",
          value: "fe",
        },
        {
          label: "Maccheroni",
          value: "ma",
        },
        {
          label: "Spaghetti",
          value: "sp",
        },
        ],
        value: ["sp"],
        multiple: true,
        autocomplete: true,
        icon: "fa fa-times",
        onChange: value => { console.log(value); },
        classNames: {
        select: "select-pure__select",
        dropdownShown: "select-pure__select--opened",
        multiselect: "select-pure__select--multiple",
        label: "select-pure__label",
        placeholder: "select-pure__placeholder",
        dropdown: "select-pure__options",
        option: "select-pure__option",
        autocompleteInput: "select-pure__autocomplete",
        selectedLabel: "select-pure__selected-label",
        selectedOption: "select-pure__option--selected",
        placeholderHidden: "select-pure__placeholder--hidden",
        optionHidden: "select-pure__option--hidden",
        }
      });
    
      //Function upload file
      $('.box-input-file').each(function () {
        var fileini = $(this);
        var fileinput = $(this).find("input[type=file]");
        var boximgpreview = $(this).find(".box-img-cover");
        var boxlabel = $(this).find(".box-label");
        function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();
          reader.fileName = input.files[0].name
          reader.onload = function (e) {
          // console.log(e);
          var name_img = e.target.fileName;
          var ext = name_img.substring(name_img.lastIndexOf('.') + 1, name_img.length) || name_img;
          // console.log(ext);
    
          if (ext == "jpg" || ext == "png" || ext == "jpeg" || ext == "JPG" || ext == "JPEG" || ext == "PNG") {
            $(fileini).addClass("has-image");
            $(boximgpreview).css('background-image', 'url(' + e.target.result + ')');
            $(boxlabel).html(name_img);
            $(boximgpreview).hide();
            $(boximgpreview).fadeIn(650);
          } else {
            $(fileini).removeClass("has-image");
            $(boximgpreview).attr("style", "");
            $(boxlabel).html(name_img);
            $(boximgpreview).hide();
    
          }
          }
          reader.readAsDataURL(input.files[0]);
        }
        }
    
        $(fileinput).change(function () {
        readURL(this);
        });
    
      });
    
      });
    </script>                
                      
                    
Kode OTP
Tidak menerima kode OTP? Kirim ulang
                      
      <div class="row mb-4">
        <div class="col-md-12">
          <div class="panel panel-default">
          <aui:form name="fm" method="post" action="" enctype="multipart/form-data">
            <div class="panel-heading">Kode OTP</div>
            <div class="panel-body pt-4">
            <div class="box-otp">
              <div class="alert alert-warning" role="alert">
              <span class="alert-indicator">
                <clay:icon symbol="info-circle" />
              </span>
              Silakan periksa SMS untuk mendapatkan kode OTP
              </div>

              <div class="box-form">
              <div class="digit-group" data-group-name="digits">
                <input type="number" class="form-control digit" id="digit-1" name="digit-1" data-next="digit-2" />
                <input type="number" class="form-control digit" id="digit-2" name="digit-2" data-next="digit-3"
                data-previous="digit-1" />
                <input type="number" class="form-control digit" id="digit-3" name="digit-3" data-next="digit-4"
                data-previous="digit-2" />
                <span class="splitter"></span>

                <input type="number" class="form-control digit" id="digit-4" name="digit-4" data-next="digit-5"
                data-previous="digit-3" />
                <input type="number" class="form-control digit" id="digit-5" name="digit-5" data-next="digit-6"
                data-previous="digit-4" />
                <input type="number" class="form-control digit" id="digit-6" name="digit-6" data-previous="digit-5" />
              </div>
              <div class="box-act text-center one">
                <aui:button cssClass="btn cx-btn btn-lg btn-round btn-primary" name="submit-otp" value="KIRIM" />
              </div>
              <div class="box-notes text-center">
                Tidak menerima kode OTP? <a href="">Kirim ulang</a>
              </div>
              </div>
            </div>
            </div>
          </aui:form>
          </div>

        </div>
        </div>

        <script type="text/javascript">
        $(document).ready(function () {
          //function otp
          $('.digit-group').find('input').each(function () {
          $(this).attr('maxlength', 1);
          $(this).on('keyup', function (e) {
            var parent = $($(this).parent());

            if (e.keyCode === 8 || e.keyCode === 37) {
            var prev = parent.find('input#' + $(this).data('previous'));

            if (prev.length) {
              $(prev).select();
            }
            } else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || (e.keyCode >= 96 && e.keyCode <= 105) || e.keyCode === 39) {
            var next = parent.find('input#' + $(this).data('next'));

            if (next.length) {
              $(next).select();
            } else {
              if (parent.data('autosubmit')) {
              parent.submit();
              }
            }
            }
          });
          });
        });
        </script>
                      
                    
Sample Table
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600
Jena Gaines Office Manager London 30 2008/12/19 $90,560
Quinn Flynn Support Lead Edinburgh 22 2013/03/03 $342,000
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $313,500
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $385,750
Michael Silva Marketing Designer London 66 2012/11/27 $198,500
Paul Byrd Chief Financial Officer (CFO) New York 64 2010/06/09 $725,000
Gloria Little Systems Administrator New York 59 2009/04/10 $237,500
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Dai Rios Personnel Lead Edinburgh 35 2012/09/26 $217,500
Jenette Caldwell Development Lead New York 30 2011/09/03 $345,000
Yuri Berry Chief Marketing Officer (CMO) New York 40 2009/06/25 $675,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Doris Wilder Sales Assistant Sydney 23 2010/09/20 $85,600
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Gavin Joyce Developer Edinburgh 42 2010/12/22 $92,575
Jennifer Chang Regional Director Singapore 28 2010/11/14 $357,650
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Fiona Green Chief Operating Officer (COO) San Francisco 48 2010/03/11 $850,000
Shou Itou Regional Marketing Tokyo 20 2011/08/14 $163,000
Michelle House Integration Specialist Sydney 37 2011/06/02 $95,400
Suki Burks Developer London 53 2009/10/22 $114,500
Prescott Bartlett Technical Author London 27 2011/05/07 $145,000
Gavin Cortez Team Leader San Francisco 22 2008/10/26 $235,500
Martena Mccray Post-Sales support Edinburgh 46 2011/03/09 $324,050
Unity Butler Marketing Designer San Francisco 47 2009/12/09 $85,675
Howard Hatfield Office Manager San Francisco 51 2008/12/16 $164,500
Hope Fuentes Secretary San Francisco 41 2010/02/12 $109,850
Vivian Harrell Financial Controller San Francisco 62 2009/02/14 $452,500
Timothy Mooney Office Manager London 37 2008/12/11 $136,200
Jackson Bradshaw Director New York 65 2008/09/26 $645,750
Olivia Liang Support Engineer Singapore 64 2011/02/03 $234,500
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Sakura Yamamoto Support Engineer Tokyo 37 2009/08/19 $139,575
Thor Walton Developer New York 61 2013/08/11 $98,540
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $87,500
Serge Baldwin Data Coordinator Singapore 64 2012/04/09 $138,575
Zenaida Frank Software Engineer New York 63 2010/01/04 $125,250
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $115,000
Jennifer Acosta Junior Javascript Developer Edinburgh 43 2013/02/01 $75,650
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary