<template>
    <div class="bg-white p-6 rounded-lg shadow-md max-w-lg mx-auto">
      <h2 class="text-2xl font-semibold text-gray-800 mb-4">Record Attendance</h2>
  
      <form @submit.prevent="submitForm">
        <!-- Select Student -->
        <div class="mb-4">
          <label for="student" class="block text-sm font-medium text-gray-700">Select Student</label>
          <select
            v-model="attendance.studentId"
            id="student"
            class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
            required
          >
            <option disabled value="">Select a Student</option>
            <option v-for="student in students" :key="student.id" :value="student.id">
              {{ student.name }}
            </option>
          </select>
        </div>
  
        <!-- Select Attendance Status -->
        <div class="mb-4">
          <label for="status" class="block text-sm font-medium text-gray-700">Attendance Status</label>
          <select
            v-model="attendance.status"
            id="status"
            class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
            required
          >
            <option value="present">Present</option>
            <option value="absent">Absent</option>
          </select>
        </div>
  
        <!-- Date Input -->
        <div class="mb-4">
          <label for="date" class="block text-sm font-medium text-gray-700">Date</label>
          <input
            v-model="attendance.date"
            type="date"
            id="date"
            class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
            required
          />
        </div>
  
        <!-- Submit Button -->
        <div class="flex justify-end">
          <button
            type="submit"
            class="px-6 py-2 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
          >
            Record Attendance
          </button>
        </div>
      </form>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  // Props: Array of students passed to the component
  const props = defineProps({
    students: Array, // List of student objects { id, name }
  })
  
  // Data model for attendance form
  const attendance = ref({
    studentId: '',
    status: 'present',
    date: new Date().toISOString().split('T')[0], // Set default to today’s date
  })
  
  // Handle form submission
  const submitForm = () => {
    // This function should handle submitting the attendance data
    // You can make an API call or handle logic here
    console.log('Form Submitted:', attendance.value)
  
    // Reset the form after submission
    attendance.value = {
      studentId: '',
      status: 'present',
      date: new Date().toISOString().split('T')[0],
    }
  }
  </script>
  
  <style scoped>
  form {
    max-width: 500px;
    margin: 0 auto;
  }
  
  label {
    font-size: 1rem;
  }
  
  input,
  select {
    font-size: 1rem;
  }
  </style>
  