Make sure that the user doesn't select more than eight maybe buttons in the pre-select

resources/js/Pages/Screening/Show.vue

@@ -2,12 +2,15 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { Head, useForm } from '@inertiajs/vue3'
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
+import { ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
 import AppLayout from '@/Layouts/AppLayout.vue'
 import AppButton from '@/Components/AppButton.vue'
 import RadioButtonGroup from '@/Components/RadioButtonGroup.vue'
 
 defineOptions({ layout: AppLayout })
 
+const MAX_MAYBE_ANSWERS = 8
+
 const props = defineProps({
   screening: {
     type: Object,
@@ -49,6 +52,14 @@ const allAnswered = computed(() => {
   return Object.values(form.answers).every(v => v !== null)
 })
 
+const unknownCount = computed(() => {
+  return Object.values(form.answers).filter(v => v === 'unknown').length
+})
+
+const maybeLimitReached = computed(() => {
+  return unknownCount.value >= MAX_MAYBE_ANSWERS
+})
+
 const bottomBackButtonRef = ref(null)
 const showStickyBack = ref(false)
 
@@ -92,6 +103,11 @@ onUnmounted(() => {
         <h1 class="text-3xl font-bold text-white mb-2">Pre-Screening Questions</h1>
         <p class="text-gray-400 mb-8">Please answer all questions to proceed.</p>
 
+        <p v-if="maybeLimitReached" class="text-amber-400/80 text-sm mb-6 flex items-center gap-2">
+            <ExclamationTriangleIcon class="h-4 w-4 shrink-0" />
+            You've used all {{ MAX_MAYBE_ANSWERS }} "I don't know" answers. Please choose Yes or No for the remaining questions.
+        </p>
+
         <div class="space-y-4 mb-8">
             <div
                 v-for="(question, index) in questions"
@@ -111,6 +127,8 @@ onUnmounted(() => {
                                 { value: 'unknown', label: 'I don\'t know' },
                                 { value: 'no', label: 'No' },
                             ]"
+                            :disabled-options="maybeLimitReached && form.answers[index + 1] !== 'unknown' ? ['unknown'] : []"
+                            disabled-tooltip="You can only select &quot;I don't know&quot; for a maximum of 8 questions"
                         />
                         <p v-if="form.errors[`answers.${index + 1}`]" class="text-red-500 text-sm mt-1">
                             {{ form.errors[`answers.${index + 1}`] }}