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

    <v-card-text>
      <v-row>
        <!-- Nama Lengkap -->
        <v-col cols="12">
          <v-text-field
            v-model="localData.namaLengkap"
            label="Nama Lengkap"
            placeholder="Nama Lengkap"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Jenis Kelamin -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.jenisKelamin"
            label="Jenis Kelamin"
            :items="jenisKelaminOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Hubungan dengan Pasien -->
        <v-col cols="12" md="6">
          <v-select
            v-model="localData.hubunganDenganPasien"
            label="Hubungan dengan Pasien"
            :items="hubunganOptions"
            variant="outlined"
            density="compact"
          />
        </v-col>

        <!-- Nomor Telepon -->
        <v-col cols="12" md="6">
          <v-text-field
            v-model="localData.nomorTelepon"
            label="Nomor Telepon Selular / Rumah"
            placeholder="Nomor Telepon"
            variant="outlined"
            density="compact"
          >
            <template v-slot:prepend>
              <v-menu>
                <template v-slot:activator="{ props }">
                  <v-btn
                    variant="outlined"
                    density="compact"
                    v-bind="props"
                    class="mr-2"
                  >
                    +62
                    <v-icon end>mdi-menu-down</v-icon>
                  </v-btn>
                </template>
                <v-list density="compact">
                  <v-list-item value="+62">+62</v-list-item>
                </v-list>
              </v-menu>
            </template>
          </v-text-field>
        </v-col>

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

        <!-- Alamat -->
        <v-col cols="12">
          <label class="text-subtitle-2 font-weight-medium">Alamat</label>
          <v-checkbox
            v-model="samaDenganPasien"
            label="Samakan dengan alamat pasien"
            density="compact"
            @change="handleSamakanAlamat"
          />
        </v-col>

        <v-col cols="12" v-if="!samaDenganPasien">
          <v-textarea
            v-model="localData.alamat"
            placeholder="Alamat"
            variant="outlined"
            density="compact"
            rows="3"
          />
        </v-col>
      </v-row>
    </v-card-text>
  </div>
</template>

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

const props = defineProps({
  formData: {
    type: Object,
    required: true
  },
  samaDenganPasien: {
    type: Boolean,
    default: false
  },
  alamatPasien: {
    type: Object,
    default: () => ({})
  }
});

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

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

const jenisKelaminOptions = [
  { title: "Laki-laki", value: "L" },
  { title: "Perempuan", value: "P" }
];

const hubunganOptions = [
  "Suami",
  "Istri",
  "Anak",
  "Orang Tua",
  "Saudara",
  "Kerabat",
  "Lainnya"
];

const handleSamakanAlamat = () => {
  if (samaDenganPasien.value && props.alamatPasien) {
    localData.value.alamat = props.alamatPasien.alamatLengkap || "";
  } else {
    localData.value.alamat = "";
  }
};

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

watch(samaDenganPasien, (newVal) => {
  emit("update:samaDenganPasien", newVal);
});
</script>
