<script setup>
import {onMounted} from 'vue';
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import TabbedPage from "../../../Views/Components/TabbedPage.vue";
import ParticipantsList from "./Partials/ParticipantsList.vue";
import ParticipantsByOption from "./Partials/ParticipantsByOption.vue";
import ParticipantsByAddon from "./Partials/ParticipantsByAddon.vue";
import Overview from "./Partials/Overview.vue";

const props = defineProps({
    event: Object,
})

const tabs = [
    {
        title: 'Übersicht',
        component: Overview,
        endpoint: "/api/v1/event/details/" + props.event.id + '/summary',
    },
    {
        title: 'Alle Teilnehmendenden',
        component: ParticipantsList,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/all',
    },
    {
        title: 'Teilis nach Stamm',
        component: ParticipantsList,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-local-group',
    },
    {
        title: 'Teilis nach Teili-Gruppe',
        component: ParticipantsList,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-group',
    },
    {
        title: 'Teilis nach Teilnahmeoption',
        component: ParticipantsByOption,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-option',
    },
    {
        title: 'Teilis mit Zusatzoptionen',
        component: ParticipantsByAddon,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-addon',
    },
    {
        title: 'Abgemeldete Teilis',
        component: ParticipantsList,
        endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/signed-off',
    },
]

onMounted(() => {
    if (undefined !== props.message) {
        toast.success(props.message)
    }
})
</script>

<template>
    <AppLayout :title="'Veranstaltungsdetails ' + props.event.name">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <tabbed-page :tabs="tabs" />

        </shadowed-box>
    </AppLayout>
</template>
