<template>
    <v-container>

        <v-row>
            <span style="font-size: 24px"><v-icon x-small class="pb-2" icon="mdi-security"></v-icon> <strong>Access Manager</strong></span>
            <v-spacer></v-spacer>
            <v-breadcrumbs :items="breadcrumbs" style="font-size: 12px"></v-breadcrumbs>
        </v-row>

        <v-divider class="pb-7"></v-divider>

        <v-row>
            <v-col cols="12" class="pt-0 pb-0">
                <v-card elevation="5" style="width: 100%; height: auto;" title="Access Manager" subtitle="Controls creating, editing, deleting users access.">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2" size="45">
                            <v-icon size="large" icon="mdi-security"></v-icon>
                        </v-avatar>
                    </template>

                    <v-divider></v-divider>
                
                    <v-card-text>
                        <v-data-table :headers="headers" :items="requests" :loading="tableLoading">
                            <template v-slot:item.action="{ item }">
                                <v-hover v-slot="{ isHovering, props }"><v-icon size="large" v-bind="props" :color="isHovering ? 'blue-grey-darken-1' : 'blue-grey-darken-4'" variant="plain" icon="mdi-cog-outline" @click="openUserAccess(item.id);"></v-icon></v-hover>
                            </template>
                            <template v-slot:item.name="{ item }">
                                <v-col cols="auto">
                                    {{ item.firstname }} {{ item.lastname }}
                                </v-col>
                            </template>
                            <template v-slot:item.setupDone="{ item }">
                                <v-chip
                                    :color="getColor(item.setupDone)"
                                    :text="getText(item.setupDone)"
                                    class="text-uppercase"
                                    label
                                    size="small"
                                ></v-chip>
                            </template>
                        </v-data-table>
                    </v-card-text>
                </v-card>     
            </v-col>       
        </v-row>

   </v-container>
</template>


<script>
export default {

 data: () => ({
    tableLoading:true,
    assingDepartmentModal: false,
    requestId: '',
    selectedDepartment:'',

    departments: [],
    requests:[],

    headers: [
        { align: 'start', key: 'id', title: 'ID',},
        { key: 'name', title: 'Name' },
        { key: 'email', title: 'E-Mail' },
        { key: 'setupDone', title: 'Status' },
        { key: 'action', title: 'Actions' },
    ],

    breadcrumbs: [
        { title: "Home", disabled: false, href: "/" },
        { title: "Access Manager", disabled: true },
    ],
 }),

 mounted() {
    this.loadRequests();
 },
 

 methods: {

    openUserAccess(ID) {
        window.location.href = "/access-manager-process-usser/"+ID;
    },

    loadRequests() {
        this.tableLoading = true;
        this.$root.axiosGet('/access-manager-requests').then(data => {
            this.requests = data.response.data.data;
            this.tableLoading = false;
        }); 
    },

    getColor(status) {
            if (status === 0 || status === 3) {
                return 'yellow';
            }
            if(status === 1) {
                return 'green';
            }
            if(status === 2) {
                return 'red';
            }

            return 'grey'
        },

        getText(status) {
            if (status === 0) {
                return 'INCOMPLETED';
            }
            if(status === 1) {
                return 'COMPLETED';
            }
            if(status === 2) {
                return 'PENDING DELETE';
            }
            if(status === 3) {
                return 'PENDING UPDATE';
            }

            return 'UNKNOWN'
        },
 },
}
</script>

