<script setup>
import { ref } from 'vue'
import Modal from "../../../../../Views/Components/Modal.vue";
import IbanInput from "../../../../../Views/Components/IbanInput.vue";
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
import TextResource from "../../../../../Views/Components/TextResource.vue";
import {invoiceCheckContactName} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
import {toast} from "vue3-toastify";
import ErrorText from "../../../../../Views/Components/ErrorText.vue";

const { request } = useAjax();

const emit = defineEmits(['close'])


const props = defineProps({
    eventId: Number,
    invoiceType: String,
    amount: [String, Number],
    otherText: String,
    receipt: File,
    userName: String,
    userEmail: String,
    userTelephone: String,
    userAccountOwner: String,
    userAccountIban: String,
    havePassengers: Number,
    materialTransportation: Boolean,
    travelReason: String,
})

const finalStep = ref(true)
const userName = ref(props.userName)
const userEmail = ref(props.userEmail)
const userTelephone = ref(props.userTelephone)
const userIban = ref(props.userAccountIban)
const userAccountOwner = ref(props.userAccountOwner)
const sending = ref(false)
const success = ref(false)
const decision = ref('')
const errorMsg = ref('')
const confirmation = ref(null)
const receiptError = ref('')
const notices = ref('')

async function sendData() {
    if (!userName.value) return

    sending.value = true
    errorMsg.value = ''
    success.value = false

    const formData = new FormData()

    formData.append('name', userName.value)
    formData.append('email', userEmail.value)
    formData.append('telephone', userTelephone.value)
    formData.append('amount', props.amount)
    formData.append('otherText', props.otherText)
    formData.append('decision', decision.value)
    formData.append('accountOwner', userAccountOwner.value)
    formData.append('accountIban', userIban.value)
    formData.append('havePassengers', props.havePassengers ? 1 : 0)
    formData.append('materialTransportation', props.materialTransportation ? 1 : 0)
    formData.append('travelReason', props.travelReason)
    formData.append('notices', notices.value)

    if (props.receipt) {
        formData.append('receipt', props.receipt)
    }


    try {
        const response = await request('/api/v1/invoice/new/' + props.eventId + '/' + props.invoiceType, {
            method: 'POST',
            body: formData
        })

        if (response.status === 'success') {
            window.location.href = '/';
        }  else {
            receiptError.value = response.message;
        }
    } catch (err) {
        toast.error(result.message);
    } finally {
        sending.value = false
    }

}

</script>

<template>
    <Modal :show="finalStep" title='Bitte gib deine Daten ein' @close="emit('close')" width="600px">
        <label>
            <strong>Dein Name Name (kein Pfadiname):</strong>
        </label><br />
        <input
            type="text"
            @keyup="invoiceCheckContactName();"
            id="contact_name"
            class="refund-input"
            name="contact_name" v-model="userName" /><br /><br />

        <label v-if="userName !== ''">
            <strong>E-Mail-Adresse (Für Rückfragen):</strong>
        </label><br />
        <input
            v-if="userName !== ''"
            type="email"
            class="refund-input"
            name="contact_email"
            v-model="userEmail" /><br /><br />

        <label v-if="userName !== ''">
            <strong>Telefonnummer (für Rückfragen):</strong>
        </label><br />
        <input
            v-if="userName !== ''"
            type="text"
            class="refund-input"
            id="contact_telephone"
            name="contact_telephone" v-model="userTelephone" /><br /><br />

        <label v-if="userName !== ''">
            <strong>Weitere Informationen zur Abrechnung (Max. 128 Zeichen):</strong>
        </label><br />
        <textarea
            id="notices"
            class="refund-input"
            name="notices" v-model="notices"
            maxlength="128" /><br /><br />

        <span id="decision" v-if="userEmail !== '' && userTelephone !== '' && decision === ''">
          <label><br />
              <strong>Möchtest du den Betrag spenden?</strong>
          </label><br />

          <input type="button" class="refund-choice" @click="decision='donation'" value="Ja" />
          <input type="button" class="refund-choice" @click="decision='payout'" value="Nein" />
        </span>

        <span id="confirm_donation" v-if="decision === 'donation'">
            <input type="radio" name="confirmation_radio" value="donation" id="confirmation_radio_donation" v-model="confirmation">
            <TextResource belongsTo="confirmation_radio_donation" textName="CONFIRMATION_DONATE" />
            <br /><br />
          <input type="button" class="mareike-button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
        </span>

        <span id="confirm_payment" v-if="decision === 'payout'">
            <label>
            <strong>Konto-Inhaber*in:</strong></label><br />
                <input type="text" name="account_owner" id="account_owner" class="refund-input" v-model="userAccountOwner" /><br /><br />

            <label>
            <strong>IBAN:</strong>
          </label><br />
            <IbanInput id="account_iban" name="account_iban" class="refund-input" v-model="userIban" /><br /><br />
            <ErrorText :message="receiptError" />
            <span v-if="userAccountOwner != '' && userIban && userIban.length === 27"><br />
                <input type="radio" name="confirmation_radio" value="payment" id="confirmation_radio_payment"  v-model="confirmation">
                 <TextResource belongsTo="confirmation_radio_payment" textName="CONFIRMATION_PAYMENT" /><br /><br />
              <input type="button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
            </span>
        </span>
    </Modal>
</template>

<style scoped>
.refund-input {
    font-size: 14pt;
    width: 100%;
    max-width: 550px;
    box-sizing: border-box;
}

.refund-choice {
    border-radius: 0;
    width: 100px;
}

@media (max-width: 639px) {
    .refund-input {
        font-size: 12pt;
        max-width: 100%;
    }

    .refund-choice {
        width: calc(50% - 6px);
    }
}
</style>
