<script setup>
import {reactive, inject, onMounted} from 'vue';
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import TabbedPage from "../../../Views/Components/TabbedPage.vue";
import {toast} from "vue3-toastify";

import ListBudgets from "./ListBudgetTypes.vue";

const props = defineProps({
    message: String,

    data: {
        type: [Array, Object],
        default: () => []
    },
    cost_unit_id: {
        type: Number,
        default: 0
    },
})

// Prüfen, ob ein ?id= Parameter in der URL übergeben wurde
const urlParams = new URLSearchParams(window.location.search)
const initialCostUnitId = props.cost_unit_id

const tabs = [
    {
        title: 'Verpflegung',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/catering",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Unterkunft',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/accommodation",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Programm',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/program",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Logistik',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/logistic",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Technik',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/technical",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Reisekosten',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/travelling",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Verwaltung',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/management",
        deep_jump_id: initialCostUnitId,
    },
    {
        title: 'Sonstiges',
        component: ListBudgets,
        endpoint: "/api/v1/budget/" + props.cost_unit_id + "/list/other",
        deep_jump_id: initialCostUnitId,
    },
]

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

<template>
    <AppLayout title="Veranstaltungsbudget">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <tabbed-page :tabs="tabs" :initial-tab-id="initialCostUnitId" />

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