From 441a7af81b78710d1840e68eb609fccd0e7a3e2e Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Wed, 1 Oct 2025 22:54:07 -0400
Subject: [PATCH] Add enhanced Bible reference fields with version, reference,
 and text for better sermon display formatting

---
 pages/[slug].vue | 37 +++++++++++++++-------
 pages/admin.vue  | 82 ++++++++++++++++++++++++++++++++++++------------
 2 files changed, 87 insertions(+), 32 deletions(-)

diff --git a/pages/[slug].vue b/pages/[slug].vue
index 5f94b4a..1466599 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -22,17 +22,22 @@
         <!-- Section 1: Bible References -->
         <section class="mb-8">
           <h2 class="text-2xl font-semibold text-gray-900 mb-4">Bible References</h2>
-          <div class="bg-blue-50 rounded-lg p-6">
-            <ul class="space-y-2">
-              <li 
-                v-for="(ref, index) in bibleReferences" 
-                :key="index"
-                class="text-gray-800 flex items-start"
-              >
-                <span class="text-blue-600 mr-2">•</span>
-                <span>{{ ref }}</span>
-              </li>
-            </ul>
+          <div class="space-y-6">
+            <div 
+              v-for="(ref, index) in bibleReferences" 
+              :key="index"
+              class="bg-blue-50 rounded-lg p-6"
+            >
+              <div class="flex items-start justify-between gap-4">
+                <p class="text-gray-800 text-lg leading-relaxed flex-1">
+                  {{ ref.text }}
+                </p>
+                <div class="text-right text-sm text-gray-600 whitespace-nowrap">
+                  <div class="font-semibold">{{ ref.reference }}</div>
+                  <div>({{ ref.version }})</div>
+                </div>
+              </div>
+            </div>
           </div>
         </section>
 
@@ -92,7 +97,15 @@ const { data: sermon } = await useFetch(`/api/sermons/${slug}`)
 
 const bibleReferences = computed(() => {
   if (!sermon.value?.bible_references) return []
-  return sermon.value.bible_references.split('\n').filter((ref: string) => ref.trim())
+  try {
+    // Try to parse as JSON first (new format)
+    return JSON.parse(sermon.value.bible_references)
+  } catch {
+    // Fallback to old format (plain text)
+    return sermon.value.bible_references.split('\n')
+      .filter((ref: string) => ref.trim())
+      .map((ref: string) => ({ version: '', reference: ref, text: ref }))
+  }
 })
 
 function formatDate(dateString: string) {
diff --git a/pages/admin.vue b/pages/admin.vue
index be0a819..4128cbc 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -98,22 +98,60 @@
         <!-- Section 1: Bible References -->
         <div class="border-t pt-6">
           <h2 class="text-xl font-semibold text-gray-900 mb-4">Section 1: Bible References</h2>
-          <div class="space-y-3">
-            <div v-for="(ref, index) in bibleReferences" :key="index" class="flex gap-2">
-              <input
-                v-model="bibleReferences[index]"
-                type="text"
-                placeholder="e.g., John 3:16"
-                class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
-              />
-              <button
-                v-if="bibleReferences.length > 1"
-                type="button"
-                @click="removeReference(index)"
-                class="px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
-              >
-                −
-              </button>
+          <div class="space-y-6">
+            <div v-for="(ref, index) in bibleReferences" :key="index" class="border border-gray-200 rounded-lg p-4 space-y-3">
+              <div class="flex gap-3">
+                <div class="w-64">
+                  <label :for="`version-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
+                    Bible Version
+                  </label>
+                  <select
+                    :id="`version-${index}`"
+                    v-model="ref.version"
+                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                  >
+                    <option value="ESV">English Standard Version (ESV)</option>
+                    <option value="NKJV">New King James Version (NKJV)</option>
+                    <option value="NIV">New International Version (NIV)</option>
+                    <option value="KJV">King James Version (KJV)</option>
+                    <option value="NLT">New Living Translation (NLT)</option>
+                    <option value="NASB">New American Standard Bible (NASB)</option>
+                    <option value="CSB">Christian Standard Bible (CSB)</option>
+                  </select>
+                </div>
+                <div class="flex-1">
+                  <label :for="`reference-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
+                    Book & Verses (e.g., Galatians 5:22-23)
+                  </label>
+                  <input
+                    :id="`reference-${index}`"
+                    v-model="ref.reference"
+                    type="text"
+                    placeholder="e.g., John 3:16 or Romans 8:28-30"
+                    class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                  />
+                </div>
+                <button
+                  v-if="bibleReferences.length > 1"
+                  type="button"
+                  @click="removeReference(index)"
+                  class="self-end px-3 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200"
+                >
+                  −
+                </button>
+              </div>
+              <div>
+                <label :for="`text-${index}`" class="block text-sm font-medium text-gray-700 mb-1">
+                  Verse Text
+                </label>
+                <textarea
+                  :id="`text-${index}`"
+                  v-model="ref.text"
+                  rows="3"
+                  placeholder="Paste the verse text here..."
+                  class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                ></textarea>
+              </div>
             </div>
             <button
               type="button"
@@ -193,7 +231,7 @@ const deleteSuccess = ref('')
 const deleting = ref(false)
 
 // Create sermon form state
-const bibleReferences = ref([''])
+const bibleReferences = ref([{ version: 'ESV', reference: '', text: '' }])
 const formData = ref({
   date: '',
   title: '',
@@ -205,7 +243,7 @@ const success = ref('')
 const loading = ref(false)
 
 function addReference() {
-  bibleReferences.value.push('')
+  bibleReferences.value.push({ version: 'ESV', reference: '', text: '' })
 }
 
 function removeReference(index: number) {
@@ -225,7 +263,11 @@ async function handleSubmit() {
 
   try {
     const slug = formatDateToSlug(formData.value.date)
-    const bible_references = bibleReferences.value.filter(ref => ref.trim()).join('\n')
+    // Filter out empty references and serialize as JSON
+    const validReferences = bibleReferences.value.filter(ref => 
+      ref.version && ref.reference && ref.text
+    )
+    const bible_references = JSON.stringify(validReferences)
 
     await $fetch('/api/sermons', {
       method: 'POST',
@@ -248,7 +290,7 @@ async function handleSubmit() {
       personal_appliance: '',
       pastors_challenge: ''
     }
-    bibleReferences.value = ['']
+    bibleReferences.value = [{ version: 'ESV', reference: '', text: '' }]
 
     // Redirect after 2 seconds
     setTimeout(() => {