Formulir Aplikasi Kepesertaan Program Pensiun Iuran Pasti
Wajib diisi dengan huruf kapital
<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"> </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>
<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"> </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"> </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"> </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>
<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"> </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://www.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"> </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>
<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 |
