<template>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">Student Name</label>
        <input v-model="student.name" type="text" id="name" required />
      </div>
      <div>
        <label for="class_id">Class</label>
        <select v-model="student.class_id" id="class_id" required>
          <option value="" disabled>Select a class</option>
          <option v-for="classItem in classes" :key="classItem.id" :value="classItem.id">
            {{ classItem.name }}
          </option>
        </select>
      </div>
      <div>
        <label for="email">Email</label>
        <input v-model="student.email" type="email" id="email" required />
      </div>
      <div>
        <label for="phone">Phone</label>
        <input v-model="student.phone" type="tel" id="phone" required />
      </div>
      <!-- Add other form fields here -->
  
      <button type="submit">Save Student</button>
    </form>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useDirectus } from '@/composables/useDirectus'
  
  const { fetchCollection } = useDirectus()
  
  const student = ref({
    name: '',
    email: '',
    phone: '',
    class_id: null,  // Store selected class ID
  })
  
  const classes = ref([]) // Array to store class options
  
  onMounted(async () => {
    // Fetch the available classes from Directus
    classes.value = await fetchCollection('classes')
  })
    
  const submitForm = async () => {
    // Code to handle form submission, create new student
    const newStudent = await createItem('students', student.value)
    if (newStudent) {
      console.log('Student added successfully:', newStudent)
    }
  }


  import { ref, onMounted } from 'vue'
import { useDirectus } from '~/composables/useDirectus'

const { getItems } = useDirectus()

onMounted(async () => {
  try {
    const response = await getItems('classes')  // 'classes' is the collection name
    classes.value = response
  } catch (err) {
    console.error('Failed to fetch classes:', err)
  }
})

  </script>
  