<script setup>
import Modal from "../../../Views/Components/Modal.vue";
import {reactive, ref} from "vue";
import AmountInput from "../../../Views/Components/AmountInput.vue";
import {toast} from "vue3-toastify";
import {useAjax} from "../../../../resources/js/components/ajaxHandler.js";

const { request } = useAjax()

const props = defineProps({
    showAddEstimate: Boolean,
    type: String,
    title: String,
    costUnitId: Number,
    amount: Number,
    amount_type: String,
    estimateId: Number,
    description: String,
})

console.log(props)

const form = reactive({
    amount_type: props.amount_type,
    amount: props.amount,
    description: props.description,

})

async function save() {
    const data = await request('/api/v1/budget/' + props.costUnitId + '/save-estimate', {
        method: "POST",
        body: {
            estimateId: props.estimateId,
            amount_type: form.amount_type,
            amount: form.amount,
            description: form.description,
            estimateType: props.type,
        }
    });

    if (data.status === 'success') {
        toast.success(data.message);
    } else {
        toast.error(data.message);
    }

    emit('closeAddEstimate')
}

const emit = defineEmits(['closeAddEstimate'])


</script>

<template>
    <Modal
        :show="showAddEstimate"
        @close="emit('closeAddEstimate')"
        title="Ausgabenschätzung hinzufügen"
        width="600px"
    >
    <table>
        <tr>
            <th>Kostenstelle</th>
            <td>{{title}}</td>
        </tr>
        <tr>
            <th>Verwendungszweck</th>
            <td><input type="text" v-model="form.description" style="width: 250px;" /></td>
        </tr>
        <tr>
            <th>Betrag</th>
            <td><AmountInput v-model="form.amount" style="width: 100px;" /> Euro</td>
        </tr>

        <tr>
            <th>Kostentyp</th>
            <td style="vertical-align: top;">
                <input type="radio" v-model="form.amount_type" value="flat"
                 id="amount_type_flat" />
                <label for="amount_type_flat">Pauschal</label><br />

                <input type="radio" v-model="form.amount_type" value="per_person" id="amount_type_per_person" />
                <label for="amount_type_per_person">Pro Person</label><br />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="Speichern" class="button" @click="save" />
            </td>
        </tr>

    </table>
    </Modal>
</template>

<style scoped>

</style>
