120 lines
6.5 KiB
Vue
120 lines
6.5 KiB
Vue
<script setup>
|
||
|
||
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
|
||
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
|
||
import SignupForm from './Partials/SignUpForm/SignupForm.vue'
|
||
import FullScreenModal from "../../../Views/Components/FullScreenModal.vue";
|
||
import AvailableEvents from "./Partials/AvailableEvents.vue";
|
||
import {ref} from "vue";
|
||
|
||
const props = defineProps({
|
||
event: Object,
|
||
availableEvents: Array,
|
||
participantData: Object,
|
||
localGroups: Array,
|
||
})
|
||
|
||
const showSignup = ref(true)
|
||
const registrationDone = ref(false)
|
||
function close() {
|
||
showSignup.value = false
|
||
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<AppLayout title="Für Veranstaltung anmelden">
|
||
<FullScreenModal :show="showSignup" @close="close">
|
||
|
||
<shadowed-box style="width: 95%; margin: 30px auto; padding: 0; overflow: hidden; border-radius: 12px;">
|
||
|
||
<!-- Header -->
|
||
<div v-if="props.event.registrationAllowed" style="background: linear-gradient(135deg, #1e40af, #3b82f6); padding: 28px 32px; color: white;">
|
||
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
|
||
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
|
||
<span style="background: rgba(255,255,255,0.2); color: white; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,255,255,0.4);">
|
||
✓ Anmeldung offen
|
||
</span>
|
||
</div>
|
||
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
|
||
📍 {{ props.event.postalCode }} {{ props.event.location }}
|
||
</p>
|
||
</div>
|
||
<div v-else style="background: linear-gradient(135deg, #991b1b, #dc2626); padding: 28px 32px; color: white;">
|
||
<div style="display: flex; align-items: center; gap: 14px; flex-wrap: wrap;">
|
||
<h2 style="margin: 0; font-size: 1.5rem; font-weight: 700;">{{ props.event.name }}</h2>
|
||
<span style="background: rgba(255,0,0,0.2); color: #fecaca; padding: 4px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; border: 1px solid rgba(255,100,100,0.4);">
|
||
✗ Anmeldung geschlossen
|
||
</span>
|
||
</div>
|
||
<p style="margin: 8px 0 0 0; opacity: 0.85; font-size: 0.95rem;">
|
||
📍 {{ props.event.postalCode }} {{ props.event.location }}
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Body -->
|
||
<div style="padding: 28px 32px;">
|
||
|
||
<!-- Info-Grid -->
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px;">
|
||
|
||
<!-- Zeile 1 links: Zeitraum -->
|
||
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
|
||
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Veranstaltungszeitraum</div>
|
||
<div style="font-size: 1rem; color: #111827; font-weight: 500;">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
|
||
<div style="font-size: 0.85rem; color: #6b7280;">{{ props.event.duration }} Tage</div>
|
||
</div>
|
||
|
||
<!-- Zeile 1 rechts: Erstattungsrichtlinien -->
|
||
<div style="background: #f0f9ff; border-radius: 8px; padding: 16px; border-left: 3px solid #0ea5e9;">
|
||
<div style="font-size: 0.75rem; color: #0369a1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;">Erstattungsrichtlinien</div>
|
||
<div style="color: #0c4a6e; font-size: 0.875rem; line-height: 1.8;">
|
||
<div>100 % bis {{ props.event.earlyBirdEnd.formatted }}</div>
|
||
<div>{{ props.event.refundAfterEarlyBirdEnd }} % bis {{ props.event.registrationFinalEnd.formatted }}</div>
|
||
<div>Danach nur bei Nachrückplätzen</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Zeile 2 links: Anmeldeschluss -->
|
||
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
|
||
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Anmeldeschluss</div>
|
||
<div style="font-size: 1rem; color: #111827; font-weight: 500; margin-bottom: 20px;">{{ props.event.registrationFinalEnd.formatted }}</div>
|
||
|
||
<div style="font-size: 0.75rem; color: #366a34; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;">Frühbucher bis</div>
|
||
<div style="font-size: 1rem; color: #366a34; font-weight: 500;">{{ props.event.earlyBirdEnd.formatted }}</div>
|
||
</div>
|
||
|
||
<!-- Zeile 2 rechts: Kontakt -->
|
||
<div style="background: #f8fafc; border-radius: 8px; padding: 16px;">
|
||
<div style="font-size: 0.75rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;">Kontakt</div>
|
||
<p style="margin: 0 0 6px 0; color: #374151; font-size: 0.9rem; line-height: 1.6;">
|
||
Hast du Fragen zur Veranstaltung oder deiner Anmeldung? Kontaktiere uns per E-Mail:
|
||
</p>
|
||
<a :href="'mailto:' + props.event.email" style="font-size: 0.95rem; color: #2563eb; text-decoration: none; font-weight: 500;">{{ props.event.email }}</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<hr style="margin: 0 32px; border: none; border-top: 1px solid #e5e7eb;" />
|
||
<div style="padding: 28px 32px;">
|
||
<SignupForm
|
||
:event="props.event"
|
||
:participantData="props.participantData ?? {}"
|
||
:localGroups="props.localGroups ?? []"
|
||
/>
|
||
</div>
|
||
|
||
</shadowed-box>
|
||
</FullScreenModal>
|
||
<AvailableEvents v-if="!registrationDone" :events="props.availableEvents" />
|
||
<div v-else style="text-align: center; padding: 20px;">
|
||
Registrierung komplett
|
||
</div>
|
||
</AppLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|