<template>
  <Head title="Course Management - ARP OS | Educational Course Administration" />
  <Layout>
    <div class="py-6">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <AdminNavigation title="Course Management" />
        
        <Breadcrumb :breadcrumbs="[
          { name: 'Admin', icon: 'fas fa-user-shield', url: '/admin' },
          { name: 'Management', icon: 'fas fa-cogs' },
          { name: 'Courses', icon: 'fas fa-book' }
        ]" />

        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
          <div class="p-6">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-xl font-bold text-gray-900">All Courses</h2>
              <Link href="/admin/courses/create" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Add New Course
              </Link>
            </div>

            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                  <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Duration</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                  </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                  <tr v-for="course in courses.data" :key="course.id">
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ course.name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">₦{{ course.price }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ course.duration_months }} months</td>
                    <td class="px-6 py-4 whitespace-nowrap">
                      <span :class="course.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'" class="px-2 py-1 text-xs font-semibold rounded-full">
                        {{ course.is_active ? 'Active' : 'Inactive' }}
                      </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                      <div class="flex items-center space-x-2">
                        <Link :href="`/admin/courses/${course.id}/edit`" 
                              class="inline-flex items-center px-3 py-1 bg-blue-100 hover:bg-blue-200 text-blue-700 text-xs font-medium rounded-md transition-colors duration-200"
                              title="Edit Course">
                          <i class="fas fa-edit mr-1"></i>
                          Edit
                        </Link>
                        <button @click="deleteCourse(course.id)" 
                                class="inline-flex items-center px-3 py-1 bg-red-100 hover:bg-red-200 text-red-700 text-xs font-medium rounded-md transition-colors duration-200"
                                title="Delete Course">
                          <i class="fas fa-trash mr-1"></i>
                          Delete
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import Layout from '@/Components/Layout.vue'
import AdminNavigation from '@/Components/AdminNavigation.vue'
import Breadcrumb from '@/Components/Breadcrumb.vue'
import { Link, router, Head } from '@inertiajs/vue3'

defineProps({
  courses: Object
})

const deleteCourse = (id) => {
  if (confirm('Are you sure you want to delete this course?')) {
    router.delete(`/admin/courses/${id}`)
  }
}
</script>