<script setup>
import PdfViewer from "../../../../../Views/Components/PdfViewer.vue";
import DistanceAllowance from "./DistanceAllowance.vue";
import {onMounted, reactive} from 'vue';

const props = defineProps({
    newInvoice: {
        type: Object,
        required: true
    },
    costUnits: {
        type: Object,
        required: true
    }
})

const emit = defineEmits(['submit', 'cancel'])

const formData = reactive({
    type_internal: props.newInvoice.internalType || '',
    cost_unit: props.newInvoice.costUnitId || '',
    amount: props.newInvoice.amountPlain || '',
    notices: props.newInvoice.comments || '',
})

const submitForm = () => {
    emit('submit', formData)
}


const invoiceTypeCollection = reactive({
    invoiceTypes: {}
});


onMounted(async () => {
    const response = await fetch('/api/v1/core/retrieve-invoice-types-all');
    const data = await response.json();
    Object.assign(invoiceTypeCollection, data);
});


</script>

<template>
    <form @submit.prevent="submitForm">
        <table style="width: 100%; font-family: sans-serif;">
            <tr>
                <td style="width: 150px;">Rechnungstyp:</td>
                <td style="width: 450px;">
                    <select v-model="formData.type_internal" class="width-half-full">
                        <option v-for="invoiceType in invoiceTypeCollection.invoiceTypes" :value="invoiceType.slug">{{invoiceType.name}}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Kostenstelle:</td>
                <td>
                    <select v-model="formData.cost_unit" class="width-half-full">
                        <option v-for="costUnit in props.costUnits" :value="costUnit.id">{{costUnit.name}}</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Gesamtbetrag:</td>
                <td>
                    <input type="text" v-model="formData.amount" class="width-small" /> Euro
                </td>
            </tr>

            <tr>
                <td>Anmerkungen:</td>
                <td>
                    <textarea
                        id="notices"
                        name="notices" v-model="formData.notices"
                        maxlength="128"
                        style="font-size: 14pt; width: 550px;" />
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <input type="checkbox" v-model="formData.duplicate" id="mareike_correct_invoice_duplicate" />
                    <label for="mareike_correct_invoice_duplicate">Kopie zur Weiterbearbeitung erstellen</label>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <input type="submit" value="Speichern und freigeben" class="button mareike-accept-button" />
                </td>
            </tr>
        </table>
    </form>
    <br /><br />

    <PdfViewer :url="'/api/v1/invoice/showReceipt/' + props.newInvoice.id" v-if="props.newInvoice.documentFilename !== null" />
    <DistanceAllowance v-else :invoice="props.newInvoice" />
</template>

<style>
.width-full {
    width: 100%;
}

.width-almost-full {
    width: calc(100% - 75px);
}

.width-half-full {
    width: 50%;
}

.width-small {
    width: 100px;
}
</style>
