<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 class="signup-box">

            <!-- Header -->
            <div v-if="props.event.registrationAllowed" class="signup-header signup-header--open">
                <div class="signup-header-row">
                    <h2 class="signup-event-title">{{ props.event.name }}</h2>
                    <span class="signup-badge signup-badge--open">
                        ✓ Anmeldung offen
                    </span>
                </div>
                <p class="signup-event-location">
                    📍 {{ props.event.postalCode }} {{ props.event.location }}
                </p>
            </div>
            <div v-else class="signup-header signup-header--closed">
                <div class="signup-header-row">
                    <h2 class="signup-event-title">{{ props.event.name }}</h2>
                    <span class="signup-badge signup-badge--closed">
                        ✗ Anmeldung geschlossen
                    </span>
                </div>
                <p class="signup-event-location">
                    📍 {{ props.event.postalCode }} {{ props.event.location }}
                </p>
            </div>

            <!-- Body -->
            <div class="signup-body">

                <!-- Info-Grid -->
                <div class="signup-info-grid">

                    <!-- Zeitraum -->
                    <div class="info-card">
                        <div class="info-card__label">Veranstaltungszeitraum</div>
                        <div class="info-card__value">{{ props.event.eventBegin }} – {{ props.event.eventEnd }}</div>
                        <div class="info-card__sub">{{ props.event.duration }} Tage</div>
                    </div>

                    <!-- Erstattungsrichtlinien -->
                    <div class="info-card info-card--accent">
                        <div class="info-card__label info-card__label--accent">Erstattungsrichtlinien</div>
                        <div class="info-card__list">
                            <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>

                    <!-- Anmeldeschluss -->
                    <div class="info-card">
                        <div class="info-card__label">Anmeldeschluss</div>
                        <div class="info-card__value" style="margin-bottom: 16px;">{{ props.event.registrationFinalEnd.formatted }}</div>

                        <div class="info-card__label info-card__label--green">Frühbucher bis</div>
                        <div class="info-card__value" style="color: #366a34;">{{ props.event.earlyBirdEnd.formatted }}</div>
                    </div>

                    <!-- Kontakt -->
                    <div class="info-card">
                        <div class="info-card__label">Kontakt</div>
                        <p class="info-card__text">
                            Hast du Fragen zur Veranstaltung oder deiner Anmeldung? Kontaktiere uns per E-Mail:
                        </p>
                        <a :href="'mailto:' + props.event.email" class="info-card__link">{{ props.event.email }}</a>
                    </div>
                </div>
            </div>

            <hr class="signup-divider" />

            <div class="signup-body">
                <SignupForm
                    v-if="props.event.registrationAllowed"
                    :event="props.event"
                    :participantData="props.participantData ?? {}"
                    :localGroups="props.localGroups ?? []"
                />
                <p v-else class="signup-closed-notice">
                    Die Anmeldung für diese Veranstaltung ist geschlossen.
                </p>
            </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>
.signup-box {
    width: 95%;
    margin: 30px auto;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
}

/* Header */
.signup-header {
    padding: 28px 32px;
    color: white;
}
.signup-header--open  { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.signup-header--closed { background: linear-gradient(135deg, #991b1b, #dc2626); }

.signup-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.signup-event-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}
.signup-badge {
    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);
}
.signup-badge--open   { background: rgba(255,255,255,0.2); color: white; }
.signup-badge--closed { background: rgba(255,0,0,0.2); color: #fecaca; }

.signup-event-location {
    margin: 8px 0 0 0;
    opacity: 0.85;
    font-size: 0.95rem;
}

/* Body */
.signup-body { padding: 28px 32px; }
.signup-divider { margin: 0 32px; border: none; border-top: 1px solid #e5e7eb; }

/* Info-Grid */
.signup-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.info-card {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
}
.info-card--accent {
    background: #f0f9ff;
    border-left: 3px solid #0ea5e9;
}

.info-card__label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.info-card__label--accent { color: #0369a1; margin-bottom: 8px; }
.info-card__label--green  { color: #366a34; margin-top: 4px; }

.info-card__value {
    font-size: 1rem;
    color: #111827;
    font-weight: 500;
}
.info-card__sub {
    font-size: 0.85rem;
    color: #6b7280;
}
.info-card__list {
    color: #0c4a6e;
    font-size: 0.875rem;
    line-height: 1.8;
}
.info-card__text {
    margin: 0 0 6px 0;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.6;
}
.info-card__link {
    font-size: 0.95rem;
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    word-break: break-all;
}

.signup-closed-notice {
    text-align: center;
    padding: 24px;
    color: #991b1b;
    font-weight: 600;
    font-size: 1rem;
}

/* ─── Tablet (640–1023px) ─── */
@media (max-width: 1023px) {
    .signup-box {
        width: 100%;
        margin: 10px auto;
    }
    .signup-header,
    .signup-body { padding: 20px 18px; }
    .signup-divider { margin: 0 18px; }

    .signup-info-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .signup-event-title { font-size: 1.25rem; }
}

/* ─── Smartphone (< 640px) ─── */
@media (max-width: 639px) {
    .signup-box {
        width: 100%;
        margin: 0;
        border-radius: 0;
    }
    .signup-header,
    .signup-body { padding: 16px 12px; }
    .signup-divider { margin: 0 12px; }

    .signup-event-title { font-size: 1.1rem; }
    .signup-event-location { font-size: 0.85rem; }
    .signup-badge { font-size: 0.7rem; padding: 3px 10px; }

    .signup-info-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 16px;
    }

    .info-card { padding: 12px; }
    .info-card__value { font-size: 0.95rem; }
    .info-card__list { font-size: 0.82rem; }
}
</style>
