<script setup>
import { reactive, inject } from 'vue';
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
import AmountInput from "../../../Views/Components/AmountInput.vue";
import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import {toast} from "vue3-toastify";

const props = defineProps({
        activeUsers: Object,
    }
)

const { request } = useAjax();

const formData = reactive({
    cost_unit_name: '',
    distance_allowance: '0,25',

    emailAddress: '',
    mailOnNew: true
});

async function save() {
    const data = await request("/api/v1/cost-unit/create-running-job", {
        method: "POST",
        body: {
            cost_unit_name: formData.cost_unit_name,
            distance_allowance: formData.distance_allowance,
            mailOnNew: formData.mailOnNew
        }
    });

    window.location.href = '/cost-unit/list';
}

</script>

<template>
    <AppLayout title="Laufende Tätigkeit hinzufügen">
        <form method="POST" action="/api/v1/cost-unit/create-running-job"  @submit.prevent="save">
            <input type="hidden" name="_token" :value="csrfToken" />

            <shadowed-box style="width: 90%; margin: 20px auto; padding: 20px;">
                <p>
                    Über dieses Formular können laufende Tätigkeiten angelegt werden.<br />
                    Eine Kostenstelle für eine Veranstaltung wird automatisch erstellt, sobald die Veranstaltung angelegt wurde.
                </p>
                <table style="margin-top: 40px; width: 100%">
                    <tr>
                        <th class="width-medium pr-20">Name der laufenden Tätigkeit</th>
                        <td><input type="text" v-model="formData.cost_unit_name" class="width-half-full" /></td>
                    </tr>
                    <tr>
                        <th class="pr-20">Kilometerpauschale</th>
                        <td>
                            <AmountInput v-model="formData.distance_allowance" class="width-small" /> Euro / Kilometer
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <label style="display:flex;align-items:center;cursor:pointer;">
                                <input type="checkbox" v-model="formData.mailOnNew" style="margin-right:8px;cursor:pointer;" />
                                <span>E-Mail-Benachrichtigung bei neuen Abrechnungen</span>
                            </label>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                            <input type="submit" value="Speichern" />
                        </td>
                    </tr>
                </table>
            </shadowed-box>
        </form>
    </AppLayout>
</template>
