nlcc-itinerary/pages/index.vue

<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Header -->
    <header class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
          </div>
          <div class="flex items-center gap-4">
            <ClientOnly fallback-tag="div">
              <template v-if="isAuthenticated">
                <NuxtLink 
                  to="/admin" 
                  class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium text-sm whitespace-nowrap"
                >
                  Manage Sermons
                </NuxtLink>
                <button
                  @click="handleLogout"
                  class="text-sm font-medium text-red-600 hover:text-red-700"
                >
                  Logout
                </button>
              </template>
              <NuxtLink 
                v-else
                to="/login" 
                class="text-sm font-medium text-blue-600 hover:text-blue-700"
              >
                Admin Login
              </NuxtLink>
              <template #fallback>
                <div class="h-10"></div>
              </template>
            </ClientOnly>
          </div>
        </div>
        <div class="text-center mt-6">
          <h1 class="text-3xl font-bold text-gray-900">
            Welcome to New Life!
          </h1>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
      <ClientOnly>
        <!-- Today's Sermon -->
        <div v-if="todaysSermon">
          <h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <SermonCard :sermon="todaysSermon" />
          </div>
        </div>

        <!-- Upcoming Sermons -->
        <div v-if="upcomingSermons.length > 0">
          <h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
          </div>
        </div>

        <!-- Empty State (if no current or upcoming sermons) -->
        <div v-if="!hasCurrentSermons" class="text-center py-12">
          <p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
        </div>

        <template #fallback>
          <div class="text-center py-12">
            <p class="text-gray-500 text-lg">Loading sermons...</p>
          </div>
        </template>
      </ClientOnly>

      <!-- Previous Sermons Dropdown -->
      <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">
        <h2 class="text-2xl font-semibold text-gray-900 mb-4 text-center">Previous Sermons</h2>
        <p class="text-center text-gray-700 mb-4">Use the dropdown below to view a previous sermon</p>
        <div class="flex flex-col sm:flex-row gap-3">
          <select
            v-model="selectedSermonSlug"
            class="flex-1 px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-base"
          >
            <option value="">-- Select a previous sermon --</option>
            <option v-for="sermon in previousSermons" :key="sermon.id" :value="sermon.slug">
              {{ sermon.title }} ({{ formatDate(sermon.date) }})
            </option>
          </select>
          <button
            @click="navigateToSermon"
            :disabled="!selectedSermonSlug"
            class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed font-medium sm:whitespace-nowrap"
          >
            View
          </button>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
// Check authentication status
const { data: authData } = await useFetch('/api/auth/verify')
const isAuthenticated = computed(() => authData.value?.authenticated || false)

// Fetch non-archived sermons for the most recent sermon
const { data: activeSermons } = await useFetch('/api/sermons?includeArchived=false')

// Fetch archived sermons for the previous sermons dropdown
const { data: archivedSermons } = await useFetch('/api/sermons?includeArchived=true')

const selectedSermonSlug = ref('')

// Get today's sermon (if one exists for today's date)
const todaysSermon = computed(() => {
  if (!activeSermons.value || activeSermons.value.length === 0) return null
  
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  
  return activeSermons.value.find((s: any) => {
    const sermonDate = new Date(s.date + 'T00:00:00')
    sermonDate.setHours(0, 0, 0, 0)
    return sermonDate.getTime() === today.getTime()
  }) || null
})

// Get upcoming sermons (future dates)
const upcomingSermons = computed(() => {
  if (!activeSermons.value) return []
  
  const today = new Date()
  today.setHours(0, 0, 0, 0)
  
  return activeSermons.value.filter((s: any) => {
    const sermonDate = new Date(s.date + 'T00:00:00')
    sermonDate.setHours(0, 0, 0, 0)
    return sermonDate.getTime() > today.getTime()
  })
})

// Get archived sermons only for the previous sermons dropdown
const previousSermons = computed(() => {
  if (!archivedSermons.value) return []
  return archivedSermons.value.filter((s: any) => s.archived === 1)
})

// Check if there are any current or upcoming sermons
const hasCurrentSermons = computed(() => {
  return todaysSermon.value !== null || upcomingSermons.value.length > 0
})

function formatDate(dateString: string) {
  // Add T00:00:00 to ensure the date is interpreted as local time, not UTC
  const date = new Date(dateString + 'T00:00:00')
  return date.toLocaleDateString('en-US', { 
    year: 'numeric', 
    month: '2-digit', 
    day: '2-digit' 
  })
}

function navigateToSermon() {
  if (selectedSermonSlug.value) {
    navigateTo(`/${selectedSermonSlug.value}`)
  }
}

async function handleLogout() {
  await $fetch('/api/auth/logout', { method: 'POST' })
  window.location.reload()
}
</script>