<script setup>
    import Icon from "../../../../Views/Components/Icon.vue";
    import InvoiceDetails from "../../../Invoice/Views/Partials/invoiceDetails/InvoiceDetails.vue";
    import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
    import {ref} from "vue";
    import {toast} from "vue3-toastify";

    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/cost-unit/" + props.data.costUnit.id + "/invoice-list/" + 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)
        }
    }

    async function exportPayouts() {
        toast.info('Der Export wird nun gestartet. Bitte verlasse diese Seite nicht, bis der Export abgeschlossen ist.')

        const response = await fetch('/api/v1/core/retrieve-global-data');
        const data = await response.json();
        const exportUrl = '/api/v1/cost-unit/' +  props.data.costUnit.id  + '/export-payouts';

        try {
            if (data.tenant.download_exports) {
                const response = await fetch(exportUrl, {
                    headers: { "Content-Type": "application/json" },
                });

                if (!response.ok) throw new Error('Fehler beim Export (ZIP)');

                const blob = await response.blob();
                const downloadUrl = window.URL.createObjectURL(blob);
                const a = document.createElement("a");
                a.style.display = "none";
                a.href = downloadUrl;
                a.download = "Abrechnungen-Sippenstunden.zip";

                document.body.appendChild(a);
                a.click();

                setTimeout(() => {
                    window.URL.revokeObjectURL(downloadUrl);
                    document.body.removeChild(a);
                }, 100);
            } else {
                const response = await request(exportUrl, {
                    method: "GET",
                });

                toast.success(response.message);
            }

            reload()

        } catch (err) {
            toast.error('Beim Export der Abrechnungen ist ein Fehler aufgetreten.');
        }
    }

</script>

<template>
    <table v-if="localData.invoices.length > 0" class="invoice-list-table">
        <tr>
            <td colspan="6">{{props.data.costUnit.name}}</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.externalPayment" 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>

        <tr v-if="props.data.endpoint === 'approved'">
            <td colspan="5"></td>
            <td>
                <a style="font-size: 10pt;" class="link" @click="exportPayouts()">Genehmigte Abrechnungen exportieren</a>
            </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>
