<script setup>
    import Icon from "../../../../../Views/Components/Icon.vue";
    import InvoiceDetails from "./InvoiceDetails.vue";
    import { useAjax } from "../../../../../../resources/js/components/ajaxHandler.js";
    import {ref} from "vue";

    const props = defineProps({
        data: Object
    })

    const { request } = useAjax()
    const invoice = ref(null)
    const show_invoice = ref(false)
    const localData = ref(props.data)

    async function openInvoiceDetails(invoiceId) {
        const url = '/api/v1/invoice/details/' + invoiceId

        try {
            const response = await fetch(url, { method: 'GET' })

            const result = await response.json()
            invoice.value = result.invoice
            show_invoice.value = true
        } catch (err) {
            console.error('Error fetching invoices:', err)
        }
    }

    async function reload() {
        const url = "/api/v1/invoice/my-invoices/" + props.data.endpoint
        try {
            const response = await fetch(url, { method: 'GET' })
            if (!response.ok) throw new Error('Fehler beim Laden')

            const result = await response.json()
            localData.value = result
        } catch (err) {
            console.error('Error fetching invoices:', err)
        }
    }

</script>

<template>
    <table v-if="localData.invoices.length > 0" class="invoice-list-table">
        <tr>
            <td colspan="6">{{props.data.title}}</td>
        </tr>

        <tr v-for="invoice in localData.invoices" :id="'invoice_' + invoice.id">
            <td>{{invoice.invoiceNumber}}</td>
            <td>{{invoice.invoiceType}}</td>
            <td>
                {{invoice.amount}}
            </td>
            <td style="width: 150px;">
                <Icon v-if="invoice.donation" name="hand-holding-dollar" style="color: #ffffff; background-color: green" />
                <Icon v-if="invoice.alreadyPaid" name="comments-dollar" style="color: #ffffff; background-color: green" />
            </td>
            <td>
                {{invoice.contactName}}<br />
                <label v-if="invoice.contactEmail !== '--'">{{invoice.contactEmail}}<br /></label>
                <label v-if="invoice.contactPhone !== '--'">{{invoice.contactPhone}}<br /></label>
            </td>

            <td>
                <input type="button" value="Abrechnung Anzeigen" @click="openInvoiceDetails(invoice.id)" />
            </td>
        </tr>
    </table>
    <p v-else>Es sind keine Abrechnungen in dieser Kategorie vorhanden.</p>

    <InvoiceDetails :data="invoice" :show-invoice="show_invoice" v-if="show_invoice" @close="show_invoice = false; reload()" />

</template>

<style scoped>

</style>
