<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>
