<template>
  <div>
    <v-card-subtitle
      class="bg-grey-lighten-4 text-subtitle-2 font-weight-medium py-2"
    >
      SOSIAL
    </v-card-subtitle>

    <v-card-text>
      <v-row>
        <!-- Agama -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.agama"
            label="Agama"
            :items="agamaOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Status Pernikahan -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.statusPernikahan"
            label="Status Pernikahan"
            :items="statusPernikahanOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Pendidikan Terakhir -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.pendidikanTerakhir"
            label="Pendidikan Terakhir"
            :items="pendidikanOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Pekerjaan -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.pekerjaan"
            label="Pekerjaan"
            :items="pekerjaanOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Bahasa yang Dikuasai -->
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.bahasaDikuasai"
            label="Bahasa yang Dikuasai"
            placeholder="Bahasa yang Dikuasai"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Suku/Etnis -->
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.sukuEtnis"
            label="Suku/Etnis"
            placeholder="Suku/Etnis"
            variant="outlined"
            density="compact"
          />
        </v-col>
      </v-row>
    </v-card-text>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  formData: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(["update:formData"]);

const localData = ref({ ...props.formData });

const agamaOptions = [
  "Islam",
  "Kristen",
  "Katolik",
  "Hindu",
  "Buddha",
  "Konghucu",
  "Lainnya"
];

const statusPernikahanOptions = [
  { title: "Belum Menikah", value: "belum_menikah" },
  { title: "Menikah", value: "menikah" },
  { title: "Cerai Hidup", value: "cerai_hidup" },
  { title: "Cerai Mati", value: "cerai_mati" }
];

const pendidikanOptions = [
  "Tidak Sekolah",
  "SD",
  "SMP",
  "SMA/SMK",
  "D1",
  "D3",
  "D4/S1",
  "S2",
  "S3"
];

const pekerjaanOptions = [
  "PNS",
  "TNI/Polri",
  "Pegawai Swasta",
  "Wiraswasta",
  "Petani",
  "Nelayan",
  "Buruh",
  "Ibu Rumah Tangga",
  "Pelajar/Mahasiswa",
  "Tidak Bekerja",
  "Lainnya"
];

watch(
  localData,
  (newVal) => {
    emit("update:formData", newVal);
  },
  { deep: true }
);
</script>
