<script setup>

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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  }, showCostUnit: Boolean
})

const mail_on_new = ref(Boolean(Number(props.data.mail_on_new)))

const emit = defineEmits(['close'])

const { request } = useAjax()
function close() {
  emit('close')
}


const formData = reactive({
    billingDeadline: props.data.billingDeadline,
    mailOnNew: mail_on_new.value,
    distanceAllowance: props.data.distanceAllowanceSmall,
});

async function updateCostUnit() {
    const data = await request('/api/v1/cost-unit/' + props.data.id + '/details', {
        method: "POST",
        body: {
          formData
        }
    });

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

</script>

<template>

  <Modal
      :show="showCostUnit"
      title="Details anpassen"
      @close="emit('close')"
  >
      Kilometerpauschale:
        <amount-input v-model="formData.distanceAllowance" class="width-small" /> Euro / km
        <br /><br />

        <span v-if="props.data.type !== 'running_job'">
            Abrechnungsschluss am:
            <input type="date" style="margin-top: 10px;" id="autoclose_date" v-model="formData.billingDeadline" />
            <br /><br />
        </span>

        <div style="margin-top: 10px;">
          <label style="display: flex; align-items: center; cursor: pointer;">
            <input
              type="checkbox"
              id="mail_on_new"
              v-model="formData.mailOnNew"
              style="margin-right: 8px; cursor: pointer;"
            />
            <span>E-Mail-Benachrichtigung bei neuen Abrechnungen</span>
          </label>
        </div>

    <br />
    <input type="button" value="Speichern" @click="updateCostUnit" />
  </Modal>

</template>

<style>
.mareike-save-button {
  background-color: #2271b1 !important;
  color: #ffffff !important;
}
</style>
