form-layouts.vue

<script setup lang="ts">
import { ref } from 'vue'
import type { VForm } from 'vuetify/components/VForm'

// Reactive state
const nama = ref('')
const npm = ref('')
const tanggalLahir = ref('')

const nisn = ref('')
const noDoc = ref('')
const noTelp = ref('')
const alamat = ref('')


const noAsuransi = ref('')
const noBPJS = ref('')
const alamatNow = ref('')
const email = ref('')
const tempatLahir = ref('')
const checkbox = ref(false)
const form = ref<VForm>()

// Data untuk dropdown
const sex = ['Laki-laki', 'Perempuan'] as const
const perusahaanAsuransi = ['Prudential', 'Allianz'] as const
const institusi = ['SMAN 47 Jakarta', 'Garuda Cendekia'] as const
const kewarganegaraan = ['ID - Indonesia', 'WNA'] as const
const jurusanPendidikan = ['Ilmu Pengetahuan Alam (IPA)', 'Ilmu Pengetahuan Sosial (IPS)', 'Bahasa'] as const
const kota = [
  'JAWA BARAT - KAB. BOGOR - CIBINONG - CIBINONG',
  'Item 2',
  'Item 3',
  'Item 4'
] as const
const sizeJakun = [
  'XS',
  'S',
  'M',
  'L'
] as const
const kotaNow = [...kota] // Tetap seperti semula

// State untuk setiap dropdown

const sizeSelected = ref('')
const perusahaanSelected = ref('')
const jurusanPendidikanSelected = ref('')
const institusiSelected = ref('')
const kotaSelected = ref('')
const kotaNowSelected = ref('')
const kewarganegaraanSelected = ref('')
const sexSelected = ref('')

// Radio button untuk alamat
const inlineRadio = ref('radio-1')

const inlineRadio1 = ref('belum')
const inlineRadio2 = ref('belum2')


// Validasi required
const requiredValidator = (value: any) => {
  return value ? true : 'Field ini wajib diisi'
}
</script>

<template>
  
  <h1 class="text-xxl font-weight-bold mb-6" style="text-align: center;"> Formulir Pra-Registrasi </h1>
  <h2 class="text-lg font-weight-semibold mb-6"> Biodata </h2>
  
  <VForm ref="form" lazy-validation>
    <VRow>
      <!-- 👉 Nama -->
      <VCol cols="12" md="6">
        <VTextField v-model="nama" label="Nama" placeholder="Nabiilah Putri Safa" />
      </VCol>

      <!-- 👉 NPM -->
      <VCol cols="12" md="6">
        <VTextField v-model="npm" label="NPM" placeholder="2206030426" />
      </VCol>

      <!-- 👉 Alamat Sesuai KTP -->
      <VCol cols="12" md="6">
        <VTextField 
          v-model="alamat" 
          label="Alamat (sesuai KTP/Kartu Keluarga)"
          placeholder="Jl. Lingkar, Pondok Cina, Depok"
        />
      </VCol>

      <!-- 👉 Kota/Kabupaten/Kecamatan sesuai KTP -->
      <VCol cols="12" md="6">
        <VSelect
          v-model="kotaSelected"
          :items="kota"
          :rules="[requiredValidator]"
          placeholder="Pilih Kota/Kabupaten/Kecamatan"
          label="Kota/Kabupaten/Kecamatan"
          name="kota"
          hint="Apabila data tidak ditemukan, klik link ini (Petugas Samba)"
          required
        />
      </VCol>

      <!-- 👉 Radio Button: Apakah alamat sekarang sama dengan KTP? -->
      <!-- 👉 Radio Button: Apakah alamat sekarang sama dengan KTP? -->
      <VCol cols="12">
        <div>Apakah Alamat sekarang sama dengan yang tertera pada KTP?</div>
        <VRadioGroup v-model="inlineRadio" inline>
          <VRadio label="Sama" value="radio-1" />
          <VRadio label="Berbeda" value="radio-2" />
        </VRadioGroup>
      </VCol>

      <!-- 👉 Alamat Sekarang (Hanya muncul jika "Berbeda" dipilih) -->
      <VCol cols="12" md="6" v-if="inlineRadio === 'radio-2'">
        <VTextField
          v-model="alamatNow"
          label="Alamat sekarang"
          placeholder="Jl. Margonda Raya, Depok"
        />
      </VCol>

      <!-- 👉 Kota/Kabupaten/Kecamatan sekarang (Hanya muncul jika "Berbeda" dipilih) -->
      <VCol cols="12" md="6" v-if="inlineRadio === 'radio-2'">
        <VSelect
          v-model="kotaNowSelected"
          :items="kotaNow"
          :rules="[requiredValidator]"
          placeholder="Pilih Kota/Kabupaten/Kecamatan sekarang"
          label="Kota/Kabupaten/Kecamatan sekarang"
          name="kotaNow"
          hint="Apabila data tidak ditemukan, klik link ini (Petugas Samba)"
        />
      </VCol>

      <!-- 👉 Email -->
      <VCol cols="12" md="3">
        <VTextField v-model="email" label="Email" placeholder="nabiilah.putri@ui.ac.id" />
      </VCol>

      <!-- 👉 No. Telp -->
      <VCol cols="12" md="3">
        <VTextField v-model="noTelp" label="No. Telp" placeholder="0859XXXXXXXX" />
      </VCol>

      <!-- 👉 Tanggal Lahir -->
      <VCol cols="12" md="3">
        <VTextField v-model="tanggalLahir" label="Tanggal Lahir" placeholder="2003-04-26" />
      </VCol>

      <VCol cols="12" md="3">
        <VTextField v-model="tempatLahir" label="Tempat Lahir" placeholder="Jakarta" />
      </VCol>

      <!-- 👉 Kewarganegaraan -->
      <VCol cols="12" md="3">
        <VSelect
          v-model="kewarganegaraanSelected"
          :items="kewarganegaraan"
          :rules="[requiredValidator]"
          placeholder="Pilih kewarganegaraan"
          label="Kewarganegaraan"
          name="kewarganegaraan"
          required
        />
      </VCol>

      <!-- 👉 Jenis Kelamin -->
      <VCol cols="12" md="3">
        <VSelect
          v-model="sexSelected"
          :items="sex"
          :rules="[requiredValidator]"
          placeholder="Pilih jenis kelamin"
          label="Jenis Kelamin"
          name="sex"
          required
        />
      </VCol>

      <VCol cols="12" md="6">
        <VFileInput label="Upload Scan KTP/Kartu Keluarga" />
      </VCol>


      <VCol cols="12" md="6">
        <VTextField 
          v-model="nik" 
          label="Nomor Induk Kependudukan/Nomor KTP"
          placeholder="367XXXXXXXXXXXX"
        />
      </VCol>


      <hr data-v-d9ab6d09="" class="v-divider my-6" aria-orientation="horizontal" role="separator">

      <VCol cols="12">
        <h2 class="text-lg font-weight-semibold mb-4">Surat Pernyataan sebagai Mahasiswa UI</h2>
      
      <!-- 👉 Upload Surat Pernyataan -->
      <VCol cols="12" md="6">
        <VFileInput label="Upload Surat Pernyataan" />
      </VCol>
      </VCol>

      <hr data-v-d9ab6d09="" class="v-divider my-6" aria-orientation="horizontal" role="separator">
      <VCol cols="12">
        <h2 class="text-lg font-weight-semibold mb-4">Ijazah dan Pendidikan Sebelumnya</h2>
        <VRow>
      <!-- 👉 Nama -->
      <VCol cols="12" md="4">
        <h2 class="text-lg font-weight-medium">Jenjang Sekolah Menengah</h2>
        <p class="text-small font-weight-thin">Wajib diisi untuk mahasiswa tingkat Diploma, Sarjana (Reguler & Paralel)</p>
        <VCol>
        <VTextField v-model="noDoc" label="Nomor Dokumen" placeholder="Nomor Ijazah/Nomor Surat Keterangan Lulus" />
      </VCol>
        
      <VCol>
        <VTextField v-model="nisn" label="NISN" placeholder="123" />
      </VCol>

      <VCol>
      <VSelect
          v-model="institusiSelected"
          :items="institusi"
          :rules="[requiredValidator]"
          placeholder="Pilih institusi pendidikan"
          label="Institusi Pendidikan"
          name="Institusi Pendidikan"
          required
        /></VCol>

        <VCol>
      <VSelect
          v-model="jurusanPendidikanSelected"
          :items="jurusanPendidikan"
          :rules="[requiredValidator]"
          placeholder="Pilih jurusaan pendidikan"
          label="Jurusan Pendidikan"
          name="Jurusan Pendidikan"
          required
        /></VCol>

        <VCol>
        <VFileInput label="Ijazah/Surat Keterangan Lulus SMA" />
       </VCol>

        <VCol>
        <VFileInput label="Surat Penyetaraan Ijazah" />
        <p class="text-xs font-weight-thin" style="margin-top: 10px;">Untuk mahasiswa Luar Negeri</p>
      </VCol>

        <VCol>
        </VCol>
      </VCol>

      <VCol cols="12" md="4">
        <h2 class="text-lg font-weight-medium">Jenjang Sarjana</h2>
        <p class="text-small font-weight-thin">Wajib diisi untuk mahasiswa tingkat Magister & Profesi</p>
        <VCol>
        <VTextField v-model="noDoc" label="Nomor Dokumen" placeholder="Nomor Ijazah/Nomor Surat Keterangan Lulus" />
      </VCol>

      <VCol>
      <VSelect
          v-model="institusiSelected"
          :items="institusi"
          :rules="[requiredValidator]"
          placeholder="Pilih institusi pendidikan"
          label="Nama Institusi Pendidikan"
          name="Nama Institusi Pendidikan"
          required
        /></VCol>

        <VCol>
      <VSelect
          v-model="jurusanPendidikanSelected"
          :items="jurusanPendidikan"
          :rules="[requiredValidator]"
          placeholder="Pilih jurusaan pendidikan"
          label="Jurusan Pendidikan"
          name="Jurusan Pendidikan"
          required
        /></VCol>

        <VCol>
        <VFileInput label="Ijazah/Surat Keterangan Lulus Sarjana" />
       </VCol>

        <VCol>
        <VFileInput label="Surat Penyetaraan Ijazah" />
        <p class="text-xs font-weight-thin" style="margin-top: 10px;">Untuk mahasiswa Luar Negeri</p>
      </VCol>

        <VCol>
        </VCol>
      </VCol>

      <VCol cols="12" md="4">
        <h2 class="text-lg font-weight-medium">Jenjang Magister/Profesi</h2>
        <p class="text-small font-weight-thin">Wajib diisi untuk mahasiswa tingkat Doktor & Spesialis</p>
        <VCol>
        <VTextField v-model="noDoc" label="Nomor Dokumen" placeholder="Nomor Ijazah/Nomor Surat Keterangan Lulus" />
      </VCol>

      <VCol>
      <VSelect
          v-model="institusiSelected"
          :items="institusi"
          :rules="[requiredValidator]"
          placeholder="Pilih institusi pendidikan"
          label="Nama Institusi Pendidikan"
          name="Nama Institusi Pendidikan"
          required
        /></VCol>

        <VCol>
      <VSelect
          v-model="jurusanPendidikanSelected"
          :items="jurusanPendidikan"
          :rules="[requiredValidator]"
          placeholder="Pilih jurusaan pendidikan"
          label="Jurusan Pendidikan"
          name="Jurusan Pendidikan"
          required
        /></VCol>

        <VCol>
        <VFileInput label="Ijazah/Surat Keterangan Lulus Sarjana" />
       </VCol>

        <VCol>
        <VFileInput label="Surat Penyetaraan Ijazah" />
        <p class="text-xs font-weight-thin" style="margin-top: 10px;">Untuk mahasiswa Luar Negeri</p>
      </VCol>
      
      </VCol>

    </VRow>
      
      <!-- 👉 Upload Surat Pernyataan -->
      <!-- <VCol cols="12" md="6"> -->
        
      </VCol>
      <hr data-v-d9ab6d09="" class="v-divider my-6" aria-orientation="horizontal" role="separator">
      <VCol cols="12">
      <h2 class="text-lg font-weight-semibold mb-6"> Asuransi Kesehatan </h2>
    </VCol>
      <VCol cols="12" >
        <div>Apakah Anda sudah terdaftar sebagai peserta BPJS? </div>

        
        <VRadioGroup v-model="inlineRadio" inline>
          <VRadio label="Belum" value="belum" />
          <VRadio label="Sudah" value="sudah" />
        </VRadioGroup>
      </VCol>

        <VRow>
        <VCol cols="12" md="6" v-if="inlineRadio === 'sudah'">
        <VTextField
          v-model="noBPJS"
          label="Nomor BPJS"
          placeholder="Nomor BPJS"
        />
      </VCol>

      <VCol cols="12" md="6" v-if="inlineRadio === 'sudah'">
        <VFileInput label="Upload Scan Kartu BPJS" />
      </VCol>
    </VRow>

    <VCol cols="12" >
        <div>Apakah Anda sudah terdaftar menjadi peserta Asuransi lain (selain BPJS)? </div>

        
        <VRadioGroup v-model="inlineRadio2" inline>
          <VRadio label="Belum" value="belum2" />
          <VRadio label="Sudah" value="sudah2" />
        </VRadioGroup>
      </VCol>

      
        <VRow>
          <VCol cols="12" md="6" v-if="inlineRadio2 === 'sudah2'">
      <VSelect
          v-model="perusahaanSelected"
          :items="perusahaanAsuransi"
          :rules="[requiredValidator]"
          placeholder="Cari nama perusahaan asuransi"
          label="Perusahaan Asuransi (Non BPJS)"
          name="Perusahaan Asuransi (Non BPJS)"
          required
        /></VCol>

        <VCol cols="12" md="6" v-if="inlineRadio2 === 'sudah2'">
        <VTextField
          v-model="noAsuransi"
          label="Nomor Asuransi Lainnya"
          placeholder="Nomor Asuransi Lainnya"
        />
      </VCol>

      <VCol cols="12" md="6" v-if="inlineRadio2 === 'sudah2'">
        <VFileInput label="Upload Scan Kartu Asuransi" />
      </VCol>
    </VRow>


    <hr data-v-d9ab6d09="" class="v-divider my-6" aria-orientation="horizontal" role="separator">

<VCol cols="12">
  <h2 class="text-lg font-weight-semibold mb-4">Biaya Pendidikan</h2>
</VCol>
<VCol cols="12" >
        <div> Penanggung biaya pendidikan Anda </div>

        
        <VRadioGroup v-model="inlineRadio" inline>
          <VRadio label="Pribadi" value="belum" />
          <VRadio label="Sudah" value="sudah" />
        </VRadioGroup>
        

</VCol>

<hr data-v-d9ab6d09="" class="v-divider my-6" aria-orientation="horizontal" role="separator">

<VCol cols="12">
  <h2 class="text-lg font-weight-semibold mb-4">Jaket Kuning</h2>
  <p class="text-small font-weight-thin">Pilih ukuran jaket kuning. Klik gambar untuk melihat lebih jelas.</p>
      
</VCol>

<VCol cols="12" md="6">
      <VSelect
          v-model="sizeSelected"
          :items="sizeJakun"
          :rules="[requiredValidator]"
          placeholder="Pilih ukuran jaket"
          label="Ukuran Jaket"
          name="Ukuran Jaket"
          required
        /></VCol>

  


      
      

      
      
      <!-- 👉 Checkbox Remember me -->
      <!-- <VCol cols="12">
        <VCheckbox v-model="checkbox" label="Remember me" />
      </VCol> -->

      

      <!-- 👉 Tombol Submit & Reset -->
      <VCol cols="12" class="d-flex gap-4">
        <VBtn type="submit">
          Submit
        </VBtn>
        <VBtn type="reset" color="secondary" variant="tonal">
          Reset
        </VBtn>
      </VCol>
    </VRow>
  </VForm>
</template>