<template>
    <div class="overflow-x-auto bg-white p-4 rounded-lg shadow-md">
      <table class="min-w-full table-auto">
        <thead>
          <tr class="border-b">
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">ID</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Name</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Email</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Phone</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Class</th>
            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-600">Actions</th>
          </tr>
        </thead>
        <tbody>
          <!-- Loop through the students data -->
          <tr v-for="student in students" :key="student.id" class="border-b hover:bg-gray-50">
            <td class="px-4 py-2 text-sm text-gray-700">{{ student.id }}</td>
            <td class="px-4 py-2 text-sm text-gray-700">{{ student.name }}</td>
            <td class="px-4 py-2 text-sm text-gray-700">{{ student.email }}</td>
            <td class="px-4 py-2 text-sm text-gray-700">{{ student.phone }}</td>
            <td class="px-4 py-2 text-sm text-gray-700">{{ student.class_name }}</td>
            <td class="px-4 py-2 text-sm text-gray-700">
              <button @click="editStudent(student.id)" class="text-blue-500 hover:underline">Edit</button>
              <button @click="deleteStudent(student.id)" class="text-red-500 hover:underline ml-4">Delete</button>
            </td>
          </tr>
        </tbody>
      </table>
      <pagination :current-page="currentPage" :total-pages="totalPages" @page-changed="changePage" />
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  import Pagination from '@/components/ui/Pagination.vue'
  
  // Data for students (this will typically come from an API)
  const students = ref([
    { id: 1, name: 'John Doe', email: 'john@example.com', phone: '123-456-7890', class_name: '10A' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', phone: '987-654-3210', class_name: '10B' },
    { id: 3, name: 'Mary Johnson', email: 'mary@example.com', phone: '555-666-7777', class_name: '11A' },
    // Add more students as needed
  ])
  
  // Pagination state
  const currentPage = ref(1)
  const totalPages = computed(() => Math.ceil(students.value.length / 10)) // Assuming 10 students per page
  
  // Change page handler
  const changePage = (newPage) => {
    currentPage.value = newPage
    // Here you can implement pagination logic to fetch data for the selected page
  }
  
  // Edit student handler
  const editStudent = (id) => {
    console.log('Edit student with ID:', id)
    // You can redirect to an edit page or open a modal for editing
    // For example: router.push({ name: 'edit-student', params: { id } })
  }
  
  // Delete student handler
  const deleteStudent = (id) => {
    console.log('Delete student with ID:', id)
    // Implement delete logic here (e.g., API call to delete the student)
    // After deletion, you can filter out the student from the list
    students.value = students.value.filter((student) => student.id !== id)
  }
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th,
  td {
    border: 1px solid #e5e7eb;
  }
  
  th {
    background-color: #f3f4f6;
  }
  
  button {
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
  }
  
  button:hover {
    opacity: 0.7;
  }
  </style>
  