<template>
    <div class="bg-white p-6 rounded-lg shadow-md max-w-2xl mx-auto">
      <h2 class="text-2xl font-semibold text-gray-700 mb-4">
        Student Details: {{ student.name }}
      </h2>
  
      <!-- Student Info -->
      <div class="space-y-4">
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Name:</div>
          <div class="text-gray-800">{{ student.name }}</div>
        </div>
  
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Email:</div>
          <div class="text-gray-800">{{ student.email }}</div>
        </div>
  
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Phone:</div>
          <div class="text-gray-800">{{ student.phone }}</div>
        </div>
  
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Date of Birth:</div>
          <div class="text-gray-800">{{ formatDate(student.dob) }}</div>
        </div>
  
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Gender:</div>
          <div class="text-gray-800">{{ capitalize(student.gender) }}</div>
        </div>
  
        <div class="flex justify-between">
          <div class="font-medium text-gray-600">Class:</div>
          <div class="text-gray-800">{{ student.class.name }} - {{ student.class.section }}</div>
        </div>
      </div>
  
      <!-- Attendance Info -->
      <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-700 mb-4">Attendance Records</h3>
  
        <div class="space-y-2">
          <div v-for="attendance in student.attendance" :key="attendance.id" class="flex justify-between">
            <div class="font-medium text-gray-600">{{ formatDate(attendance.date) }}:</div>
            <div class="text-gray-800">{{ attendance.status === 'present' ? 'Present' : 'Absent' }}</div>
          </div>
        </div>
      </div>
  
      <!-- Edit Button -->
      <div class="mt-6">
        <NuxtLink
          :to="`/students/edit/${student.id}`"
          class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition"
        >
          Edit Student
        </NuxtLink>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineProps } from 'vue'
  
  // Props
  const props = defineProps({
    student: Object, // The student object containing all the details
  })
  
  // Format Date (Helper function)
  const formatDate = (date) => {
    const options = { year: 'numeric', month: 'long', day: 'numeric' }
    return new Date(date).toLocaleDateString(undefined, options)
  }
  
  // Capitalize first letter of gender
  const capitalize = (text) => {
    return text.charAt(0).toUpperCase() + text.slice(1)
  }
  </script>
  
  <style scoped>
  /* Style the details section */
  h2 {
    font-weight: bold;
  }
  
  h3 {
    font-weight: bold;
  }
  
  div.flex {
    display: flex;
    justify-content: space-between;
  }
  </style>
  