<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 ListInvoices from "./Partials/ListInvoices.vue";

    const props = defineProps({
        costUnit: Object
    })

    const urlParams = new URLSearchParams(window.location.search)
    const initialCostUnitId = props.costUnit.id
    const initialInvoiceId = props.invoice_id




    const tabs = [
        {
            title: 'Neue Abrechnungen',
            component: ListInvoices,
            endpoint: "/api/v1/cost-unit/" + props.costUnit.id + "/invoice-list/new",
            deep_jump_id: initialCostUnitId,
            deep_jump_id_sub: initialInvoiceId,

        },
        {
            title: 'Nichtexportierte Abrechnungen',
            component: ListInvoices,
            endpoint: "/api/v1/cost-unit/" + props.costUnit.id + "/invoice-list/approved",
            deep_jump_id: initialCostUnitId,
            deep_jump_id_sub: initialInvoiceId,
        },
        {
            title: 'Exportierte Abrechnungen',
            component: ListInvoices,
            endpoint: "/api/v1/cost-unit/" + props.costUnit.id + "/invoice-list/exported",
            deep_jump_id: initialCostUnitId,
            deep_jump_id_sub: initialInvoiceId,
        },
        {
            title: 'Abgelehnte Abrechnungen',
            component: ListInvoices,
            endpoint: "/api/v1/cost-unit/" + props.costUnit.id + "/invoice-list/denied",
            deep_jump_id: initialCostUnitId,
            deep_jump_id_sub: initialInvoiceId,
        },
    ]

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

<template>
    <AppLayout :title="'Abrechnungen ' + props.costUnit.name">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <tabbed-page :tabs="tabs" :initial-tab-id="initialCostUnitId" :initial-sub-tab-id="initialInvoiceId" />

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