From f948b5665c5c089986540d66274e4132fc9c16eb Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Sun, 31 May 2026 03:38:22 +0200
Subject: [PATCH] feat(ui): keyvisual/background panels

---
 app/Http/Controllers/ServiceController.php    |   4 +
 resources/js/Components/ServiceImagePanel.vue | 142 ++++++++++++++++++
 resources/js/Pages/Services/Edit.vue          |  29 +++-
 3 files changed, 174 insertions(+), 1 deletion(-)
 create mode 100644 resources/js/Components/ServiceImagePanel.vue

diff --git a/app/Http/Controllers/ServiceController.php b/app/Http/Controllers/ServiceController.php
index 7c56c01..cc99546 100644
--- a/app/Http/Controllers/ServiceController.php
+++ b/app/Http/Controllers/ServiceController.php
@@ -265,6 +265,10 @@ public function edit(Service $service): Response
                 'finalized_at' => $service->finalized_at?->toJSON(),
                 'last_synced_at' => $service->last_synced_at?->toJSON(),
                 'has_agenda' => $service->has_agenda,
+                'key_visual_filename' => $service->key_visual_filename,
+                'background_filename' => $service->background_filename,
+                'key_visual_url' => $service->key_visual_filename ? '/storage/'.$service->key_visual_filename : null,
+                'background_url' => $service->background_filename ? '/storage/'.$service->background_filename : null,
             ],
             'serviceSongs' => $service->serviceSongs->map(fn ($ss) => [
                 'id' => $ss->id,
diff --git a/resources/js/Components/ServiceImagePanel.vue b/resources/js/Components/ServiceImagePanel.vue
new file mode 100644
index 0000000..ca8677e
--- /dev/null
+++ b/resources/js/Components/ServiceImagePanel.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { ref } from 'vue'
+import { router, usePage } from '@inertiajs/vue3'
+
+const props = defineProps({
+    label: { type: String, required: true },
+    currentUrl: { type: String, default: null },
+    uploadRoute: { type: String, required: true },
+    serviceId: { type: Number, required: true },
+    sourceName: { type: String, default: null },
+    testid: { type: String, default: null },
+})
+
+const showScopeDialog = ref(false)
+const selectedFile = ref(null)
+const uploading = ref(false)
+const error = ref(null)
+const fileInput = ref(null)
+
+function onFileChange(e) {
+    const file = e.target.files[0]
+    if (!file) return
+    selectedFile.value = file
+    showScopeDialog.value = true
+}
+
+function cancelDialog() {
+    showScopeDialog.value = false
+    selectedFile.value = null
+    if (fileInput.value) fileInput.value.value = ''
+}
+
+async function uploadWithScope(scope) {
+    if (!selectedFile.value) return
+    uploading.value = true
+    showScopeDialog.value = false
+    error.value = null
+    const formData = new FormData()
+    formData.append('file', selectedFile.value)
+    formData.append('scope', scope)
+    const xsrfCookie = document.cookie.split('; ').find(r => r.startsWith('XSRF-TOKEN='))
+    const xsrfToken = xsrfCookie ? decodeURIComponent(xsrfCookie.split('=')[1]) : ''
+    try {
+        const url = route(props.uploadRoute, { service: props.serviceId })
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: { 'X-XSRF-TOKEN': xsrfToken },
+            body: formData,
+        })
+        if (response.ok || response.status === 302) {
+            router.reload({ preserveScroll: true })
+        } else {
+            const data = await response.json().catch(() => ({}))
+            error.value = data.message || 'Upload fehlgeschlagen.'
+        }
+    } catch {
+        error.value = 'Upload fehlgeschlagen.'
+    } finally {
+        uploading.value = false
+        selectedFile.value = null
+        if (fileInput.value) fileInput.value.value = ''
+    }
+}
+</script>
+
+<template>
+    <div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm" :data-testid="testid">
+        <div class="mb-2 flex items-center justify-between">
+            <h3 class="text-sm font-semibold text-gray-700">{{ label }}</h3>
+            <span v-if="sourceName" class="text-xs text-gray-400">{{ sourceName }}</span>
+        </div>
+
+        <div class="mb-3">
+            <img
+                v-if="currentUrl"
+                :src="currentUrl"
+                class="h-24 w-full rounded object-cover"
+                :data-testid="testid ? testid + '-thumb' : undefined"
+                :alt="label"
+            />
+            <div v-else class="flex h-24 w-full items-center justify-center rounded bg-gray-100 text-gray-400">
+                <span class="text-sm">Kein Bild hinterlegt</span>
+            </div>
+        </div>
+
+        <p v-if="error" class="mb-2 text-xs text-red-600">{{ error }}</p>
+
+        <label class="cursor-pointer">
+            <span
+                class="inline-flex items-center rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
+                :class="{ 'cursor-not-allowed opacity-50': uploading }"
+            >
+                {{ uploading ? 'Lädt hoch…' : currentUrl ? 'Ersetzen' : 'Hochladen' }}
+            </span>
+            <input
+                ref="fileInput"
+                type="file"
+                accept="image/png,image/jpeg,image/jpg"
+                class="hidden"
+                :disabled="uploading"
+                :data-testid="testid ? testid + '-upload-input' : undefined"
+                @change="onFileChange"
+            />
+        </label>
+
+        <!-- Scope dialog -->
+        <div
+            v-if="showScopeDialog"
+            class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+            data-testid="scope-dialog"
+        >
+            <div class="mx-4 w-full max-w-sm rounded-lg bg-white p-6 shadow-xl">
+                <h4 class="mb-3 text-base font-semibold text-gray-900">Geltungsbereich wählen</h4>
+                <p class="mb-4 text-sm text-gray-600">
+                    Soll dieses Bild nur für diesen Service gelten oder als Standard für alle zukünftigen Services gesetzt werden?
+                </p>
+                <div class="flex flex-col gap-2">
+                    <button
+                        class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+                        data-testid="scope-service"
+                        @click="uploadWithScope('service')"
+                    >
+                        Nur für diesen Service
+                    </button>
+                    <button
+                        class="rounded border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                        data-testid="scope-default"
+                        @click="uploadWithScope('default')"
+                    >
+                        Als Standard setzen (gilt bis zum nächsten Upload)
+                    </button>
+                    <button
+                        class="mt-1 text-xs text-gray-400 hover:text-gray-600"
+                        @click="cancelDialog"
+                    >
+                        Abbrechen
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/Services/Edit.vue b/resources/js/Pages/Services/Edit.vue
index 6305be9..00f086f 100644
--- a/resources/js/Pages/Services/Edit.vue
+++ b/resources/js/Pages/Services/Edit.vue
@@ -1,6 +1,8 @@
 <script setup>
 import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
-import { Head, router } from '@inertiajs/vue3'
+import { Head, router, usePage } from '@inertiajs/vue3'
+
+const $page = usePage()
 import { ref, computed } from 'vue'
 import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
 import AgendaItemRow from '@/Components/AgendaItemRow.vue'
@@ -8,6 +10,7 @@ import SongAgendaItem from '@/Components/SongAgendaItem.vue'
 import ArrangementDialog from '@/Components/ArrangementDialog.vue'
 import MacroIcon from '@/Components/MacroIcon.vue'
 import ServicePartMacroPanel from '@/Components/ServicePartMacroPanel.vue'
+import ServiceImagePanel from '@/Components/ServiceImagePanel.vue'
 
 const props = defineProps({
     service: {
@@ -379,6 +382,30 @@ async function downloadService() {
             </div>
         </template>
 
+        <!-- Keyvisual & Hintergrundbild -->
+        <div class="py-4">
+            <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <ServiceImagePanel
+                        label="Keyvisual"
+                        :current-url="service.key_visual_url"
+                        upload-route="services.key-visual.store"
+                        :service-id="service.id"
+                        :source-name="service.key_visual_filename ? 'Eigenes Bild' : ($page.props.currentKeyVisual ? 'Standard' : null)"
+                        testid="keyvisual-panel"
+                    />
+                    <ServiceImagePanel
+                        label="Hintergrundbild"
+                        :current-url="service.background_url"
+                        upload-route="services.background.store"
+                        :service-id="service.id"
+                        :source-name="service.background_filename ? 'Eigenes Bild' : ($page.props.currentBackground ? 'Standard' : null)"
+                        testid="background-panel"
+                    />
+                </div>
+            </div>
+        </div>
+
         <!-- Ablauf (Agenda) -->
         <div class="py-6">
             <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">