<script setup>

import { ref, onMounted, reactive } from 'vue'
import {checkFilesize} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
import RefundData from "./refund-data.vue";
import AmountInput from "../../../../../Views/Components/AmountInput.vue";
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
import InfoIcon from '../../../../../Views/Components/InfoIcon.vue'
import {toast} from "vue3-toastify";



const data = defineProps({
    eventId: Number,
    userName: String,
    userEmail: String,
    userTelephone: String,
    userAccountIban: String,
    userAccountOwner: String,
})


const { request } = useAjax();
const amount = ref(0.00);
const invoiceType = ref(null);
const otherText = ref('');
const receipt = ref(null)
const finalStep = ref(false)

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

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


function handleFileChange(event) {
    if (checkFilesize('receipt')) {
        receipt.value = event.target.files[0]
        finalStep.value = true
    } else {
        event.target.value = null
    }
}

</script>

<template>
    <fieldset>
        <legend><span style="font-weight: bolder;">Wofür hast du den Betrag ausgegeben</span></legend>

        <p v-for="availableInvoiceType in invoiceTypeCollection.invoiceTypes">
            <input
                name="invpice_type"
                type="radio"
                :value="availableInvoiceType.slug"
                :id="'invoice_type_' + availableInvoiceType.slug"
                v-model="invoiceType"
            >
            <label :for="'invoice_type_' + availableInvoiceType.slug">{{ availableInvoiceType.name }}</label>
            <InfoIcon :text="'INFO_INVOICE_TYPE_' + availableInvoiceType.slug" /><br />
        </p>


        <label for="invoice_type_other">
            <input
                type="text"
                class="width-full"
                name="kostengruppe_sonstiges"
                placeholder="Sonstige"
                for="invoice_type_other"
                v-model="otherText"
                @focus="invoiceType = 'other'"
            />
        </label>

    </fieldset><br /><br />

    <fieldset>
        <legend><span style="font-weight: bolder;">Wie hoch ist der Betrag</span></legend>
        <AmountInput v-model="amount" class="width-small" id="amount" name="amount"  /> Euro
        <info-icon></info-icon><br /><br />

        <input
            v-if="amount != '' && invoiceType !== null"
            class="mareike-button"
            onclick="document.getElementById('receipt').click();"
            type="button"
            value="Beleg auswählen und fortfahren" />
        <input accept="application/pdf" type="file" id="receipt" name="receipt"     @change="handleFileChange"
               style="display: none"/>
    </fieldset><br />



    <RefundData
        v-if="finalStep"
        :eventId="data.eventId"
        :invoice-type="invoiceType"
        :amount="amount"
        :other-text="otherText"
        :userName="data.userName"
        :userEmail="data.userEmail"
        :userTelephone="data.userTelephone"
        :userAccountIban="data.userAccountIban"
        :userAccountOwner="data.userAccountOwner"
        :receipt="receipt"
        travelReason=""
        @close="finalStep = false"
    />


</template>

<style scoped>

</style>




