@eeplatform/nuxt-layer-common 1.7.28 → 1.7.30

package/components/EnrollmentForm.vue

@@ -27,8 +27,9 @@
                 :items="provinces"
                 item-title="name"
                 item-value="code"
+                :return-object="false"
                 :loading="provincesStatus"
-                :disabled="provincesStatus"
+                :disabled="provincesStatus || !enrollment.region"
               ></v-autocomplete>
             </v-col>
           </v-row>
@@ -44,7 +45,7 @@
                 item-title="name"
                 item-value="code"
                 :loading="citiesMunicipalitiesStatus"
-                :disabled="citiesMunicipalitiesStatus"
+                :disabled="citiesMunicipalitiesStatus || !enrollment.province"
               >
               </v-autocomplete>
             </v-col>
@@ -318,14 +319,11 @@
 
             <v-col cols="4">
               <v-row no-gutters>
-                <InputLabel
-                  v-model="enrollment.learnerInfo.middleName"
-                  class="text-capitalize"
-                  title="Middle Name"
-                  required
-                />
+                <InputLabel class="text-capitalize" title="Middle Name" />
                 <v-col cols="12">
-                  <v-text-field></v-text-field>
+                  <v-text-field
+                    v-model="enrollment.learnerInfo.middleName"
+                  ></v-text-field>
                 </v-col>
               </v-row>
             </v-col>
@@ -387,12 +385,13 @@
             <v-col cols="2">
               <v-row no-gutters>
                 <v-col cols="12">
-                  <InputLabel class="text-capitalize" title="Sex" />
+                  <InputLabel class="text-capitalize" title="Sex" required />
                 </v-col>
                 <v-col cols="12">
                   <v-select
                     v-model="enrollment.learnerInfo.sex"
                     :items="['Male', 'Female']"
+                    :rules="[requiredRule]"
                     placeholder="Select Sex"
                   ></v-select>
                 </v-col>
@@ -403,35 +402,90 @@
 
         <v-col cols="12" class="mt-4">
           <v-row>
-            <v-col cols="4">
+            <v-col cols="6">
               <v-row no-gutters>
-                <InputLabel
-                  class="text-capitalize"
-                  title="Place of Birth (Municipality/City)"
-                  required
-                />
                 <v-col cols="12">
-                  <v-autocomplete
-                    v-model="enrollment.learnerInfo.placeOfBirth"
-                    :rules="[requiredRule]"
-                    :items="citiesMunicipalities"
-                    item-title="name"
-                    items-value="name"
-                    :hide-no-data="false"
-                  >
-                    <template v-slot:no-data>
-                      <v-list-item>
-                        <v-list-item-title>
-                          No results matching "<strong>search</strong>". Press
-                          <kbd>enter</kbd> to create a new one
-                        </v-list-item-title>
-                      </v-list-item>
-                    </template>
-                  </v-autocomplete>
+                  <span class="font-weight-bold text-subtitle-1">
+                    Place of Birth
+                  </span>
                 </v-col>
+
+                <v-row>
+                  <v-col cols="6">
+                    <v-row no-gutters>
+                      <InputLabel
+                        class="text-capitalize"
+                        title="Province"
+                        required
+                      />
+                      <v-col cols="12">
+                        <v-combobox
+                          v-model="enrollment.learnerInfo.placeOfBirth.province"
+                          :rules="[requiredRule]"
+                          :items="birthProvinces"
+                          item-title="name"
+                          item-value="code"
+                          :return-object="false"
+                          :hide-no-data="false"
+                          :loading="loadingBirthProvinces"
+                          @keydown.enter="getBirthCityMun()"
+                        >
+                          <template v-slot:no-data>
+                            <v-list-item>
+                              <v-list-item-title>
+                                No results found. Press <kbd>enter</kbd> to
+                                search
+                              </v-list-item-title>
+                            </v-list-item>
+                          </template>
+                        </v-combobox>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+
+                  <v-col cols="6">
+                    <v-row no-gutters>
+                      <InputLabel
+                        class="text-capitalize"
+                        title="Municipality/City"
+                        required
+                      />
+                      <v-col cols="12">
+                        <v-combobox
+                          v-model="
+                            enrollment.learnerInfo.placeOfBirth.cityMunicipality
+                          "
+                          :rules="[requiredRule]"
+                          :items="birthCitiesMunicipalities"
+                          item-title="name"
+                          item-value="code"
+                          :return-object="false"
+                          :hide-no-data="false"
+                          :disabled="
+                            !enrollment.learnerInfo.placeOfBirth.province
+                          "
+                          :loading="loadingBirthCityMun"
+                        >
+                          <template v-slot:no-data>
+                            <v-list-item>
+                              <v-list-item-title>
+                                No results found. Press <kbd>enter</kbd> to
+                                search
+                              </v-list-item-title>
+                            </v-list-item>
+                          </template>
+                        </v-combobox>
+                      </v-col>
+                    </v-row>
+                  </v-col>
+                </v-row>
               </v-row>
             </v-col>
+          </v-row>
+        </v-col>
 
+        <v-col cols="12">
+          <v-row>
             <v-col cols="3">
               <v-row no-gutters>
                 <InputLabel
@@ -460,14 +514,12 @@
             </v-col>
 
             <v-col cols="4">
-              <v-row>
-                <v-col cols="12" class="pb-0">
-                  <InputLabel
-                    class="text-capitalize"
-                    title="Indigenous People/Cultural Community"
-                  />
-                </v-col>
-                <v-col cols="9" class="pt-0">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="Indigenous People/Cultural Community"
+                />
+                <v-col cols="12" class="pt-0">
                   <v-combobox
                     v-model="enrollment.learnerInfo.indigenousCommunity"
                     :items="indigenousCommunitiesPhilippines"
@@ -485,21 +537,19 @@
                 </v-col>
               </v-row>
             </v-col>
-          </v-row>
-        </v-col>
 
-        <v-col cols="12">
-          <v-row>
-            <v-col cols="12" class="pb-0">
-              <InputLabel
-                class="text-capitalize"
-                title="4Ps Household ID Number"
-              />
-            </v-col>
-            <v-col cols="4" class="pt-0">
-              <v-text-field
-                v-model="enrollment.learnerInfo.fourPsHouseholdId"
-              ></v-text-field>
+            <v-col cols="3">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="4Ps Household ID Number"
+                />
+                <v-col cols="12" class="pt-0">
+                  <v-text-field
+                    v-model="enrollment.learnerInfo.fourPsHouseholdId"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
             </v-col>
           </v-row>
         </v-col>
@@ -669,21 +719,16 @@
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="House No." />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.current.houseNumber"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="Street" />
+                    <InputLabel
+                      class="text-capitalize"
+                      title="Country"
+                      required
+                    />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.current.streetName"
+                        v-model="enrollment.address.current.country"
+                        :rules="[requiredRule]"
+                        readonly
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -693,22 +738,35 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Barangay"
+                      title="Province"
                       required
                     />
                     <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.current.barangay"
+                      <v-combobox
+                        v-model="enrollment.address.current.province"
                         :rules="[requiredRule]"
-                      ></v-text-field>
+                        :items="currentProvinces"
+                        item-title="name"
+                        item-value="code"
+                        :return-object="false"
+                        :hide-no-data="false"
+                        :loading="loadingCurrentProvinces"
+                        @keydown.enter="getCurrentCityMun()"
+                      >
+                        <template v-slot:no-data>
+                          <v-list-item>
+                            <v-list-item-title>
+                              No results matching "<strong>search</strong>".
+                              Press
+                              <kbd>enter</kbd> to create a new one
+                            </v-list-item-title>
+                          </v-list-item>
+                        </template>
+                      </v-combobox>
                     </v-col>
                   </v-row>
                 </v-col>
-              </v-row>
-            </v-col>
 
-            <v-col cols="12">
-              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
@@ -720,10 +778,13 @@
                       <v-combobox
                         v-model="enrollment.address.current.municipalityCity"
                         :rules="[requiredRule]"
-                        :items="citiesMunicipalities"
+                        :items="currentCitiesMunicipalities"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="!enrollment.address.current.province"
+                        :loading="loadingCurrentCityMun"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -739,21 +800,39 @@
                   </v-row>
                 </v-col>
 
+                <v-col cols="2">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Zip Code" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.current.zipCode"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Province"
+                      title="Barangay"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.current.province"
+                        v-model="enrollment.address.current.barangay"
                         :rules="[requiredRule]"
-                        :items="provinces"
+                        :items="currentBarangays"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="!enrollment.address.current.municipalityCity"
+                        :loading="loadingCurrentBarangay"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -771,32 +850,21 @@
 
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Country"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Street" />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.current.country"
-                        :rules="[requiredRule]"
-                        readonly
+                        v-model="enrollment.address.current.streetName"
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
 
-                <v-col cols="2">
+                <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Zip Code"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="House No." />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.current.zipCode"
-                        :rules="[requiredRule]"
+                        v-model="enrollment.address.current.houseNumber"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -827,22 +895,15 @@
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="House No." />
-                    <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.permanent.houseNumber"
-                        :readonly="sameAsCurrentAddress"
-                      ></v-text-field>
-                    </v-col>
-                  </v-row>
-                </v-col>
-
-                <v-col cols="3">
-                  <v-row no-gutters>
-                    <InputLabel class="text-capitalize" title="Street" />
+                    <InputLabel
+                      class="text-capitalize"
+                      title="Country"
+                      required
+                    />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.permanent.streetName"
+                        v-model="enrollment.address.permanent.country"
+                        :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
@@ -853,23 +914,36 @@
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Barangay"
+                      title="Province"
                       required
                     />
                     <v-col cols="12">
-                      <v-text-field
-                        v-model="enrollment.address.permanent.barangay"
+                      <v-combobox
+                        v-model="enrollment.address.permanent.province"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
-                      ></v-text-field>
+                        :items="permanentProvinces"
+                        item-title="name"
+                        item-value="code"
+                        :return-object="false"
+                        :hide-no-data="false"
+                        :loading="loadingPermanentProvinces"
+                        @keydown.enter="getPermanentCityMun()"
+                      >
+                        <template v-slot:no-data>
+                          <v-list-item>
+                            <v-list-item-title>
+                              No results matching "<strong>search</strong>".
+                              Press
+                              <kbd>enter</kbd> to create a new one
+                            </v-list-item-title>
+                          </v-list-item>
+                        </template>
+                      </v-combobox>
                     </v-col>
                   </v-row>
                 </v-col>
-              </v-row>
-            </v-col>
 
-            <v-col cols="12">
-              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
@@ -882,10 +956,13 @@
                         v-model="enrollment.address.permanent.municipalityCity"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
-                        :items="citiesMunicipalities"
+                        :items="permanentCitiesMunicipalities"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="!enrollment.address.permanent.province"
+                        :loading="loadingPermanentCityMun"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -901,22 +978,44 @@
                   </v-row>
                 </v-col>
 
+                <v-col cols="2">
+                  <v-row no-gutters>
+                    <InputLabel class="text-capitalize" title="Zip Code" />
+                    <v-col cols="12">
+                      <v-text-field
+                        v-model="enrollment.address.permanent.zipCode"
+                        :readonly="sameAsCurrentAddress"
+                      ></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-col>
+
+            <v-col cols="12">
+              <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
                     <InputLabel
                       class="text-capitalize"
-                      title="Province"
+                      title="Barangay"
                       required
                     />
                     <v-col cols="12">
                       <v-combobox
-                        v-model="enrollment.address.permanent.province"
+                        v-model="enrollment.address.permanent.barangay"
                         :rules="[requiredRule]"
                         :readonly="sameAsCurrentAddress"
-                        :items="provinces"
+                        :items="permanentBarangays"
                         item-title="name"
-                        item-value="name"
+                        item-value="code"
+                        :return-object="false"
                         :hide-no-data="false"
+                        :disabled="
+                          !enrollment.address.permanent.municipalityCity ||
+                          sameAsCurrentAddress
+                        "
+                        :loading="loadingPermanentBarangay"
                       >
                         <template v-slot:no-data>
                           <v-list-item>
@@ -934,32 +1033,22 @@
 
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Country"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Street" />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.permanent.country"
-                        :rules="[requiredRule]"
+                        v-model="enrollment.address.permanent.streetName"
                         :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
                   </v-row>
                 </v-col>
 
-                <v-col cols="2">
+                <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Zip Code"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="House No." />
                     <v-col cols="12">
                       <v-text-field
-                        v-model="enrollment.address.permanent.zipCode"
-                        :rules="[requiredRule]"
+                        v-model="enrollment.address.permanent.houseNumber"
                         :readonly="sameAsCurrentAddress"
                       ></v-text-field>
                     </v-col>
@@ -988,15 +1077,10 @@
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Last Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Last Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="enrollment.parentGuardianInfo.father.lastName"
-                        :rules="[requiredRule]"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1004,15 +1088,10 @@
 
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="First Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="First Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="enrollment.parentGuardianInfo.father.firstName"
-                        :rules="[requiredRule]"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1144,42 +1223,16 @@
               </span>
             </v-col>
 
-            <v-col cols="3">
-              <v-checkbox
-                v-model="fatherLegalGuardianSame"
-                label="Father is the Legal Guardian"
-                hide-details
-                density="compact"
-              ></v-checkbox>
-            </v-col>
-
-            <v-col cols="3">
-              <v-checkbox
-                v-model="motherLegalGuardianSame"
-                label="Mother is the Legal Guardian"
-                hide-details
-                density="compact"
-              ></v-checkbox>
-            </v-col>
-
             <v-col cols="12">
               <v-row>
                 <v-col cols="3">
                   <v-row no-gutters>
-                    <InputLabel
-                      class="text-capitalize"
-                      title="Last Name"
-                      required
-                    />
+                    <InputLabel class="text-capitalize" title="Last Name" />
                     <v-col cols="12">
                       <v-text-field
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.lastName
                         "
-                        :rules="[requiredRule]"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1190,17 +1243,14 @@
                     <InputLabel
                       class="text-capitalize"
                       title="First Name"
-                      required
+                      :required="isGuardianRequired"
                     />
                     <v-col cols="12">
                       <v-text-field
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.firstName
                         "
-                        :rules="[requiredRule]"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
+                        :rules="isGuardianRequired ? [requiredRule] : []"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1214,9 +1264,6 @@
                         v-model="
                           enrollment.parentGuardianInfo.legalGuardian.middleName
                         "
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -1243,9 +1290,6 @@
                         placeholder="09XX-XXX-XXXX"
                         variant="outlined"
                         density="comfortable"
-                        :readonly="
-                          fatherLegalGuardianSame || motherLegalGuardianSame
-                        "
                       ></v-mask-input>
                     </v-col>
                   </v-row>
@@ -1367,21 +1411,21 @@
                 </v-col>
               </v-row>
             </v-col>
-          </v-row>
-        </v-col>
 
-        <v-col cols="8">
-          <v-row no-gutters>
-            <InputLabel
-              class="text-capitalize"
-              title="Last School Attended"
-              :required="!isKindergarten"
-            />
-            <v-col cols="12">
-              <v-text-field
-                v-model="enrollment.returningLearnerInfo.lastSchoolAttended"
-                :rules="isKindergarten ? [] : [requiredRule]"
-              ></v-text-field>
+            <v-col cols="6">
+              <v-row no-gutters>
+                <InputLabel
+                  class="text-capitalize"
+                  title="Last School Attended"
+                  :required="!isKindergarten"
+                />
+                <v-col cols="12">
+                  <v-text-field
+                    v-model="enrollment.returningLearnerInfo.lastSchoolAttended"
+                    :rules="isKindergarten ? [] : [requiredRule]"
+                  ></v-text-field>
+                </v-col>
+              </v-row>
             </v-col>
           </v-row>
         </v-col>
@@ -1459,7 +1503,7 @@ const prop = defineProps({
 });
 
 import { VMaskInput } from "vuetify/labs/VMaskInput";
-const { requiredRule } = useUtils();
+const { requiredRule, debounce } = useUtils();
 
 const enrollment = defineModel<TTLearner>({
   default: () => useEnrollment().enrollment,
@@ -1483,10 +1527,15 @@ if (!enrollment.value.address.permanent.country) {
   enrollment.value.address.permanent.country = "Philippines";
 }
 
+const isGuardianRequired = computed(
+  () => !!enrollment.value.parentGuardianInfo.legalGuardian.lastName
+);
+
 const { getAll: getAllPSGC } = usePSGC();
 
 const region = ref("");
 const regions = ref<Array<Record<string, any>>>([]);
+const selectCurrentRegion = computed(() => enrollment.value.region);
 
 const { data: getAllRegPSGCData, status: getAllRegionStatus } =
   await useLazyAsyncData("get-all-psgc-region", () =>
@@ -1504,12 +1553,25 @@ watchEffect(() => {
 const provinces = ref<Array<Record<string, any>>>([]);
 const province = ref("");
 
+const selectedProvince = computed(() => enrollment.value.province);
+
+const selectCurrentProvince = computed(() =>
+  provinces.value.find(
+    (p) => p.name === enrollment.value.address.current.province
+  )
+);
+
 const { data: getAllPSGCProvData, status: getAllProvStatus } =
   await useLazyAsyncData(
     "get-all-psgc-provinces",
-    () => getAllPSGC({ type: "Prov", prefix: region.value.slice(0, 2) }),
+    () =>
+      getAllPSGC({
+        type: "Prov",
+        prefix: selectCurrentRegion.value.slice(0, 2),
+        limit: 100,
+      }),
     {
-      watch: [region],
+      watch: [selectCurrentRegion],
     }
   );
 
@@ -1521,9 +1583,37 @@ watchEffect(() => {
   }
 });
 
+const currentProvinces = ref<Array<Record<string, any>>>([]);
+
+const { data: dataCurrentProvinces, status: statusCurrentProvinces } =
+  await useLazyAsyncData(
+    "get-all-psgc-current-provinces",
+    () =>
+      getAllPSGC({
+        type: "Prov",
+        limit: 100,
+      }),
+    {
+      watch: [selectCurrentRegion],
+    }
+  );
+
+const loadingCurrentProvinces = computed(
+  () => statusCurrentProvinces.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataCurrentProvinces.value) {
+    currentProvinces.value = dataCurrentProvinces.value.items;
+  }
+});
+
 const citiesMunicipalities = ref<Array<Record<string, any>>>([]);
 const cityMunicipality = ref("");
 
+// Flag to prevent cascade when clearing location fields programmatically
+const isLocationClearingSchool = ref(false);
+
 watch(province, () => {
   cityMunicipality.value = "";
 });
@@ -1533,6 +1623,33 @@ watch(region, () => {
   cityMunicipality.value = "";
 });
 
+watch(
+  () => enrollment.value.province,
+  (val) => {
+    if (!val) {
+      enrollment.value.cityMunicipality = "";
+      isLocationClearingSchool.value = true;
+      enrollment.value.schoolId = "";
+      nextTick(() => {
+        isLocationClearingSchool.value = false;
+      });
+    }
+  }
+);
+
+watch(
+  () => enrollment.value.cityMunicipality,
+  (val) => {
+    if (!val) {
+      isLocationClearingSchool.value = true;
+      enrollment.value.schoolId = "";
+      nextTick(() => {
+        isLocationClearingSchool.value = false;
+      });
+    }
+  }
+);
+
 const cityMunicipalityPrefix = computed(() => {
   let prefix = "";
   if (region.value) {
@@ -1552,11 +1669,11 @@ const { data: getAllPSGCCityMunData, status: getAllCityMunStatus } =
     () =>
       getAllPSGC({
         type: "City",
-        prefix: cityMunicipalityPrefix.value,
+        prefix: selectedProvince.value.slice(0, 5),
         limit: 2000,
       }),
     {
-      watch: [cityMunicipalityPrefix],
+      watch: [selectedProvince],
     }
   );
 
@@ -1570,6 +1687,268 @@ watchEffect(() => {
   }
 });
 
+const currentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const selectedCurrentProvince = computed(() => {
+  return enrollment.value.address.current.province || "";
+});
+
+const loadingCurrentCityMun = ref(false);
+
+const getCurrentCityMun = debounce(async () => {
+  if (!selectedCurrentProvince.value) {
+    currentCitiesMunicipalities.value = [];
+    return;
+  }
+
+  try {
+    loadingCurrentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: selectedCurrentProvince.value.slice(0, 5),
+      limit: 2000,
+    });
+    currentCitiesMunicipalities.value = res.items;
+  } catch (error) {
+    currentCitiesMunicipalities.value = [];
+  } finally {
+    loadingCurrentCityMun.value = false;
+  }
+}, 500);
+
+watch(selectedCurrentProvince, () => {
+  getCurrentCityMun();
+});
+
+// Current Address - Barangays
+const currentBarangays = ref<Array<Record<string, any>>>([]);
+const selectedCurrentCityMun = computed(() => {
+  return enrollment.value.address.current.municipalityCity || "";
+});
+
+const loadingCurrentBarangay = ref(false);
+
+const getCurrentBarangays = debounce(async () => {
+  if (!selectedCurrentCityMun.value) {
+    currentBarangays.value = [];
+    return;
+  }
+
+  try {
+    loadingCurrentBarangay.value = true;
+    const res = await getAllPSGC({
+      type: "Bgy",
+      prefix: selectedCurrentCityMun.value.slice(0, 7),
+      limit: 200,
+    });
+    currentBarangays.value = res.items;
+  } catch (error) {
+    currentBarangays.value = [];
+  } finally {
+    loadingCurrentBarangay.value = false;
+  }
+}, 500);
+
+watch(selectedCurrentCityMun, () => {
+  getCurrentBarangays();
+});
+
+// Permanent Address - Province and City/Municipality
+const permanentProvinces = ref<Array<Record<string, any>>>([]);
+
+const { data: dataPermanentProvinces, status: statusPermanentProvinces } =
+  await useLazyAsyncData("get-all-psgc-permanent-provinces", () =>
+    getAllPSGC({
+      type: "Prov",
+      limit: 100,
+    })
+  );
+
+const loadingPermanentProvinces = computed(
+  () => statusPermanentProvinces.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataPermanentProvinces.value) {
+    permanentProvinces.value = dataPermanentProvinces.value.items;
+  }
+});
+
+const permanentCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const selectedPermanentProvince = computed(() => {
+  return enrollment.value.address.permanent.province || "";
+});
+
+const loadingPermanentCityMun = ref(false);
+
+const getPermanentCityMun = debounce(async () => {
+  if (!selectedPermanentProvince.value) {
+    permanentCitiesMunicipalities.value = [];
+    return;
+  }
+
+  try {
+    loadingPermanentCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: selectedPermanentProvince.value.slice(0, 5),
+      limit: 200,
+    });
+    permanentCitiesMunicipalities.value = res.items;
+  } catch (error) {
+    permanentCitiesMunicipalities.value = [];
+  } finally {
+    loadingPermanentCityMun.value = false;
+  }
+}, 500);
+
+watch(selectedPermanentProvince, () => {
+  getPermanentCityMun();
+});
+
+// Permanent Address - Barangays
+const permanentBarangays = ref<Array<Record<string, any>>>([]);
+const selectedPermanentCityMun = computed(() => {
+  return enrollment.value.address.permanent.municipalityCity || "";
+});
+
+const loadingPermanentBarangay = ref(false);
+
+const getPermanentBarangays = debounce(async () => {
+  if (!selectedPermanentCityMun.value) {
+    permanentBarangays.value = [];
+    return;
+  }
+
+  try {
+    loadingPermanentBarangay.value = true;
+    const res = await getAllPSGC({
+      type: "Bgy",
+      prefix: selectedPermanentCityMun.value.slice(0, 7),
+      limit: 200,
+    });
+    permanentBarangays.value = res.items;
+  } catch (error) {
+    permanentBarangays.value = [];
+  } finally {
+    loadingPermanentBarangay.value = false;
+  }
+}, 500);
+
+watch(selectedPermanentCityMun, () => {
+  getPermanentBarangays();
+});
+
+// Place of Birth - Province and City/Municipality
+const birthProvinces = ref<Array<Record<string, any>>>([]);
+
+const { data: dataBirthProvinces, status: statusBirthProvinces } =
+  await useLazyAsyncData("get-all-psgc-birth-provinces", () =>
+    getAllPSGC({
+      type: "Prov",
+      limit: 100,
+    })
+  );
+
+const loadingBirthProvinces = computed(
+  () => statusBirthProvinces.value === "pending"
+);
+
+watchEffect(() => {
+  if (dataBirthProvinces.value) {
+    birthProvinces.value = dataBirthProvinces.value.items;
+  }
+});
+
+const birthCitiesMunicipalities = ref<Array<Record<string, any>>>([]);
+const selectedBirthProvince = computed(() => {
+  const province = birthProvinces.value.find(
+    (p) => p.code === enrollment.value.learnerInfo.placeOfBirth.province
+  );
+
+  if (!province) {
+    return "";
+  }
+
+  return province.code;
+});
+
+const loadingBirthCityMun = ref(false);
+
+const getBirthCityMun = debounce(async () => {
+  if (!selectedBirthProvince.value) {
+    birthCitiesMunicipalities.value = [];
+    return;
+  }
+
+  try {
+    loadingBirthCityMun.value = true;
+    const res = await getAllPSGC({
+      type: "City",
+      prefix: selectedBirthProvince.value.slice(0, 5),
+      limit: 2000,
+    });
+    birthCitiesMunicipalities.value = res.items;
+  } catch (error) {
+    birthCitiesMunicipalities.value = [];
+  } finally {
+    loadingBirthCityMun.value = false;
+  }
+}, 500);
+
+watch(selectedBirthProvince, () => {
+  getBirthCityMun();
+});
+
+// Auto-fill place of birth region and region name when province is selected
+watch(
+  () => enrollment.value.learnerInfo.placeOfBirth.province,
+  (provinceCode) => {
+    if (!provinceCode) {
+      enrollment.value.learnerInfo.placeOfBirth.region = "";
+      enrollment.value.learnerInfo.placeOfBirth.regionName = "";
+      enrollment.value.learnerInfo.placeOfBirth.provinceName = "";
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipality = "";
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName = "";
+      return;
+    }
+
+    const province = birthProvinces.value.find((p) => p.code === provinceCode);
+    if (province) {
+      // Set province name
+      enrollment.value.learnerInfo.placeOfBirth.provinceName = province.name;
+
+      // Get region code from province code (first 2 digits + zeros)
+      const regionCode = province.code.slice(0, 2) + "00000000";
+      enrollment.value.learnerInfo.placeOfBirth.region = regionCode;
+
+      // Find and set region name
+      const region = regions.value.find((r) => r.code === regionCode);
+      if (region) {
+        enrollment.value.learnerInfo.placeOfBirth.regionName = region.name;
+      }
+    }
+  }
+);
+
+// Auto-fill place of birth city/municipality name when selected
+watch(
+  () => enrollment.value.learnerInfo.placeOfBirth.cityMunicipality,
+  (cityMunCode) => {
+    if (!cityMunCode) {
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName = "";
+      return;
+    }
+
+    const cityMun = birthCitiesMunicipalities.value.find(
+      (c) => c.code === cityMunCode
+    );
+    if (cityMun) {
+      enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName =
+        cityMun.name;
+    }
+  }
+);
+
 const { getAll } = useProgram();
 
 const programs = ref<Array<Record<string, any>>>([]);
@@ -1687,6 +2066,17 @@ const selectedSchool = computed(() => enrollment.value.schoolId);
 
 watch(selectedSchool, (val) => {
   enrollment.value.gradeLevel = "";
+
+  // Clear region, province, and cityMunicipality when schoolId is removed by user (not programmatically)
+  if (!val) {
+    if (!isLocationClearingSchool.value) {
+      enrollment.value.region = "";
+      enrollment.value.province = "";
+      enrollment.value.cityMunicipality = "";
+    }
+    return;
+  }
+
   const school = schools.value.find((s) => s.id === val);
 
   if (school?.name) {
@@ -1696,16 +2086,11 @@ watch(selectedSchool, (val) => {
 
   enrollment.value.cityMunicipality = school?.cityMunicipalityPSGC ?? "";
 
-  if (school?.province) {
-    enrollment.value.province = school?.province;
-  }
-
-  const regionPSGC = school?.cityMunicipalityPSGC
-    ? school?.cityMunicipalityPSGC.slice(0, 2) + "00000000"
-    : "";
-
-  if (school?.region && regionPSGC) {
-    enrollment.value.region = regionPSGC;
+  if (school && school.cityMunicipalityPSGC) {
+    enrollment.value.province =
+      school.cityMunicipalityPSGC.slice(0, 5) + "00000";
+    enrollment.value.region =
+      school.cityMunicipalityPSGC.slice(0, 2) + "00000000";
   }
 
   if (school?.regionName) {
@@ -1808,11 +2193,16 @@ const allowedLastGradeLevels = computed(() => {
   const currentIndex = gradeOrder.indexOf(currentGrade);
   if (currentIndex === -1) return gradeLevels;
 
+  // Special case for grade-1: include both kindergarten and kinder
+  let startIndex;
+  if (currentGrade === "grade-1") {
+    startIndex = 0; // Include from kindergarten
+  } else {
+    startIndex = Math.max(0, currentIndex - 1);
+  }
+
   // Get grades that are equal to or one level below current grade
-  const allowedGrades = gradeOrder.slice(
-    Math.max(0, currentIndex - 1),
-    currentIndex + 1
-  );
+  const allowedGrades = gradeOrder.slice(startIndex, currentIndex + 1);
 
   // Filter gradeLevels to only include allowed grades
   return gradeLevels.filter((level) => {
@@ -1898,8 +2288,6 @@ const indigenousCommunitiesPhilippines = [
 ];
 
 const sameAsCurrentAddress = ref(false);
-const fatherLegalGuardianSame = ref(false);
-const motherLegalGuardianSame = ref(false);
 
 const alternativeLearning = [
   "Modular (Print)",
@@ -1921,7 +2309,12 @@ watch(enrollment, (val) => {
     enrollment.value.learnerInfo.lastName = "";
     enrollment.value.learnerInfo.extensionName = "";
     enrollment.value.learnerInfo.birthDate = "";
-    enrollment.value.learnerInfo.placeOfBirth = "";
+    enrollment.value.learnerInfo.placeOfBirth.region = "";
+    enrollment.value.learnerInfo.placeOfBirth.regionName = "";
+    enrollment.value.learnerInfo.placeOfBirth.province = "";
+    enrollment.value.learnerInfo.placeOfBirth.provinceName = "";
+    enrollment.value.learnerInfo.placeOfBirth.cityMunicipality = "";
+    enrollment.value.learnerInfo.placeOfBirth.cityMunicipalityName = "";
     enrollment.value.learnerInfo.sex = "";
     enrollment.value.learnerInfo.motherTongue = "";
     enrollment.value.learnerInfo.age = 0;
@@ -1990,44 +2383,6 @@ watchEffect(() => {
   }
 });
 
-watchEffect(() => {
-  if (fatherLegalGuardianSame.value) {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName =
-      enrollment.value.parentGuardianInfo.father.firstName;
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName =
-      enrollment.value.parentGuardianInfo.father.lastName;
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName =
-      enrollment.value.parentGuardianInfo.father.middleName;
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber =
-      enrollment.value.parentGuardianInfo.father.contactNumber;
-    motherLegalGuardianSame.value = false;
-  } else {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber = "";
-  }
-});
-
-watchEffect(() => {
-  if (motherLegalGuardianSame.value) {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName =
-      enrollment.value.parentGuardianInfo.mother.firstName;
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName =
-      enrollment.value.parentGuardianInfo.mother.lastName;
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName =
-      enrollment.value.parentGuardianInfo.mother.middleName;
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber =
-      enrollment.value.parentGuardianInfo.mother.contactNumber;
-    fatherLegalGuardianSame.value = false;
-  } else {
-    enrollment.value.parentGuardianInfo.legalGuardian.firstName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.lastName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.middleName = "";
-    enrollment.value.parentGuardianInfo.legalGuardian.contactNumber = "";
-  }
-});
-
 import { useMask } from "vuetify";
 
 watchEffect(() => {