<script setup>

import {onMounted, reactive, ref} from "vue";
import {toast} from "vue3-toastify";
import {request} from "../../../../../resources/js/components/HttpClient.js";
const selectedManagers = ref([])

const emit = defineEmits(['close'])

const props = defineProps({
    event: Object
})


const commonProps = reactive({
    activeUsers: [],
});



onMounted(async () => {
    const response = await fetch('/api/v1/core/retrieve-global-data');
    const data = await response.json();
    Object.assign(commonProps, data);

    selectedManagers.value = props.event.managers?.map(t => t.id) ?? []
});


async function updateManagers() {

    const response = await request('/api/v1/event/details/' + props.event.id + '/event-managers', {
        method: "POST",
        body: {
            selectedManagers: selectedManagers.value,
        }
    });

    if (response.status === 'success') {
        toast.success('Einstellungen wurden erfolgreich gespeichert.')
        emit('close')
    } else {
        toast.error('Beim Speichern ist ein Fehler aufgetreten.')
    }
}

</script>

<template>
    <h3>Aktionsleitung:</h3>
    <p v-for="user in commonProps.activeUsers">
        <input
            type="checkbox"
            :id="'user_' + user.id"
            :value="user.id"
            v-model="selectedManagers"
        />
        <label :for="'user_' + user.id">{{user.fullname}}</label>
    </p>

    <input type="button" value="Speichern" @click="updateManagers" />
</template>

