<template>
  <div class="bg-white shadow mb-6">
    <div class="px-6 py-4">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-2xl font-bold text-gray-900">{{ title }}</h1>
          <p v-if="subtitle" class="text-gray-600">{{ subtitle }}</p>
        </div>
        <nav class="flex items-center space-x-1">
          <Link href="/admin" :class="isActive('/admin') && !isActive('/admin/enrollments') ? 'bg-blue-100 text-blue-800' : 'text-gray-700 hover:bg-gray-100'" 
                class="px-3 py-2 rounded-md text-sm font-medium flex items-center">
            <i class="fas fa-tachometer-alt mr-1"></i>Dashboard
          </Link>
          

          
          <div class="relative">
            <button @click="toggleDropdown('enrollments')" 
                    :class="[isActive('/admin/enrollments') || isActive('/admin/certificates') || isActive('/admin/manual-certificates') ? 'bg-blue-100 text-blue-800' : 'text-gray-700 hover:bg-gray-100', showDropdown === 'enrollments' ? 'bg-gray-100' : '']" 
                    class="px-3 py-2 rounded-md text-sm font-medium flex items-center">
              <i class="fas fa-graduation-cap mr-1"></i>Enrollments
              <i :class="showDropdown === 'enrollments' ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas ml-1 text-xs"></i>
            </button>
            <div v-show="showDropdown === 'enrollments'" class="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg z-50 border">
              <Link href="/admin/enrollments" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-list mr-2"></i>All Enrollments
              </Link>
              <Link href="/admin/certificates" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-certificate mr-2"></i>Certificates
              </Link>
              <Link href="/admin/manual-certificates" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-upload mr-2"></i>Manual Records
              </Link>
            </div>
          </div>

          <div class="relative">
            <button @click="toggleDropdown('management')" 
                    :class="[isActive('/admin/courses') || isActive('/admin/partners') || isActive('/admin/centers') || isActive('/admin/credits') ? 'bg-blue-100 text-blue-800' : 'text-gray-700 hover:bg-gray-100', showDropdown === 'management' ? 'bg-gray-100' : '']" 
                    class="px-3 py-2 rounded-md text-sm font-medium flex items-center">
              <i class="fas fa-cogs mr-1"></i>Management
              <i :class="showDropdown === 'management' ? 'fa-chevron-up' : 'fa-chevron-down'" class="fas ml-1 text-xs"></i>
            </button>
            <div v-show="showDropdown === 'management'" class="absolute left-0 mt-1 w-48 bg-white rounded-md shadow-lg z-50 border">
              <Link href="/admin/courses/index" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-book mr-2"></i>Courses
              </Link>
              <Link href="/admin/partners/index" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-user-tie mr-2"></i>Partners
              </Link>
              <Link href="/admin/centers/index" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-building mr-2"></i>Centers
              </Link>
              <Link href="/admin/credits" @click="closeDropdowns" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50">
                <i class="fas fa-coins mr-2"></i>Certificate Credits
              </Link>
            </div>
          </div>

          <Link href="/logout" method="post" class="px-3 py-2 rounded-md text-sm font-medium text-red-600 hover:bg-red-50 flex items-center">
            <i class="fas fa-sign-out-alt mr-1"></i>Logout
          </Link>
        </nav>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Link, usePage } from '@inertiajs/vue3'
import { ref, onMounted, onUnmounted } from 'vue'

defineProps({
  title: String,
  subtitle: String
})

const page = usePage()
const showDropdown = ref(null)

const isActive = (path) => {
  const currentPath = page.url
  if (path === '/admin') {
    return currentPath === '/admin' || currentPath === '/admin/'
  }
  return currentPath.startsWith(path)
}

const toggleDropdown = (menu) => {
  showDropdown.value = showDropdown.value === menu ? null : menu
}

const closeDropdowns = () => {
  showDropdown.value = null
}

// Close dropdown when clicking outside
const handleClickOutside = (event) => {
  if (!event.target.closest('.relative')) {
    closeDropdowns()
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>