<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";

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("/wp-json/mareike/costunits/create-new-cost-unit", {
        method: "POST",
        body: {
            mareike_nonce: _mareike_nonce(),
            cost_unit_name: formData.cost_unit_name,
            distance_allowance: formData.distance_allowance,
            email_address: formData.emailAddress,
            mailOnNew: formData.mailOnNew
        }
    });

    toast('Die laufende Tätigkeit wurde erfolgreich angelegt.', { type: 'success' });
    window.location.href = '/cost-units';
}
</script>

<template>
    <AppLayout title="Laufende Tätigkeit hinzufügen">
        <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>
                        <hr />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <span v-for="user in props.activeUsers">
                            <input type="checkbox" :id="'user_' + user.id" />
                            <label :for="'user_' + user.id">{{user.fullname}} ({{user.localGroup}})</label>
                        </span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" @click="save" value="Speichern" class="mareike-button button-small button-block" />
                    </td>
                </tr>
            </table>
        </shadowed-box>
    </AppLayout>
</template>
