<template>
    <v-container>
        <v-row class="pt-16">
            <v-col cols="12">
                <v-card style="overflow: visible !important;" elevation="5">
                    <v-card-title class="d-flex" style="overflow: visible !important;">
                        <v-icon style="position:relative; top:-30px; overflow: visible !important;" class="mdi-with-border" color="white">mdi-account-multiple</v-icon>
                        <h3 class="pl-5" style="color:#565656">Employees Manager</h3>
                        <v-spacer></v-spacer>
                        <v-btn color="success" prepend-icon="mdi-plus" variant="text" @click="showNewUserDialog()">CREATE</v-btn>
                    </v-card-title>
                    <v-divider></v-divider>
                    <v-card-text>
                        <v-data-table :loading="tableLoading" :headers="tableHeaders" :items="users" :expanded.sync="expanded" :show-expand="true" single-expand>
                            <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>
                            <template v-slot:item.actions="{ item }">
                                <v-btn icon="$vuetify" variant="text" color="green-accent-3">
                                    <v-tooltip activator="parent" location="bottom">
                                        View
                                    </v-tooltip>
                                    <v-icon size="large" style="cursor: pointer;" icon="mdi-eye"></v-icon>
                                </v-btn>
                                <v-btn icon="$vuetify" variant="text" color="orange-accent-3" @click="showEditUserDialog(item.id)" v-if="item.setupDone == 0 || item.setupDone == 1 || item.setupDone == 3">
                                    <v-tooltip activator="parent" location="bottom">
                                        Edit
                                    </v-tooltip>
                                    <v-icon size="large" style="cursor: pointer;" icon="mdi-pencil"></v-icon>
                                </v-btn>

                                <v-btn icon="$vuetify" variant="text" color="red-accent-3" @click="showDeleteUserDialog(item.id, item.name);"  v-if="item.setupDone == 0 || item.setupDone == 1 || item.setupDone == 3">
                                    <v-tooltip activator="parent" location="bottom">
                                        Delete
                                    </v-tooltip>
                                    <v-icon size="large" style="cursor: pointer;" icon="mdi-trash-can"></v-icon>
                                </v-btn>
                            </template>

                        <template v-slot:expanded-row="{ item }">
                            <td :colspan="tableHeaders.length">
                                <v-row class="pt-1">
                                    <v-col cols="6">
                                        <v-card elevation="1">
                                            <v-card-title style="font-size: 16px;" class="pb-0">
                                                Users Details
                                            </v-card-title>
                                            <v-card-text>
                                                <v-col cols="12" class="pb-0 pt-0">
                                                    <span class="mdi mdi-account"></span>  {{ item.name }}
                                                </v-col>
                                                <v-col cols="12" class="pb-0 pt-0">
                                                    <span class="mdi mdi-at"></span> {{ item.email }}
                                                </v-col>
                                            </v-card-text>
                                        </v-card>
                                    </v-col>
                                    <v-col cols="6">
                                        <v-card elevation="1" v-if="item.tools.length">
                                            <v-card-title style="font-size: 16px;" class="pb-0">
                                                Users Tools
                                            </v-card-title>
                                            <v-card-text>
                                                <v-col cols="12" class="pb-0 pt-0" v-for="tool in item.tools">
                                                    <span class="mdi mdi-cog"></span>  {{ tool.name }}
                                                </v-col>
                                            </v-card-text>
                                        </v-card>
                                    </v-col>
                                </v-row>
                            </td>
                        </template>
                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>

        <newUserDialog ref="newUserDialog" @load-users="loadUsers()"></newUserDialog>
        <deleteUserDialog ref="deleteUserDialog" @load-users="loadUsers()"></deleteUserDialog>
        <editUserDialog ref="editUserDialog" @load-users="loadUsers()"></editUserDialog>

   </v-container>
</template>
<style>
.mdi-with-border {
  border: 2px solid #8EBE20; /* Set your border color */
  border-radius: 10%; /* Optional: Make it circular */
  background-color: #8EBE20; /* Set your background color */
  padding: 50px; /* Optional: Adjust padding as needed */
  font-size: 80px; /* Optional: Adjust font size */
  color: #ffffff; /* Optional: Set icon color */
}
</style>
<script>
import { defineAsyncComponent } from "vue";
const newUserDialog = defineAsyncComponent(() => import("@/components/Modals/NewUser.vue"));
const deleteUserDialog = defineAsyncComponent(() => import("@/components/Modals/DeleteUser.vue"));
const editUserDialog = defineAsyncComponent(() => import("@/components/Modals/EditUser.vue"));
export default {

    components: {
        newUserDialog,
        deleteUserDialog,
        editUserDialog,
    },

    data: () => ({

        tableHeaders: [
            { key: 'id', title: 'ID',},
            { key: 'name', title: 'Name' },
            { key: 'email', title: 'E-Mail' },
            { key: 'role', title: 'Role' },
            { key: 'setupDone', title: 'Setup Status'},
            { key: 'actions', title: 'Actions', sortable:false},
        ],
        
        breadcrumbs: [
            { title: "Home", disabled: false, href: "/" },
            { title: "Users Manager", disabled: true },
        ],

        tableLoading:true,
        addUserTooltip:false,
        users:[],
        expanded: [],
    }),

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

    methods: {

        showDeleteUserDialog(ID,name)
        {
            this.$refs.deleteUserDialog.showDialog(ID,name);
        },

        showNewUserDialog()
        {
            this.$refs.newUserDialog.showDialog();
        },

        showEditUserDialog(ID)
        {
            this.$refs.editUserDialog.showDialog(ID);
        },

        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'
        },

        loadUsers() {
            this.tableLoading = true;
            this.$root.axiosGet('/users-manager-load').then(data => {
                this.tableLoading = false;
                this.users = data.response.data.data;
            }); 
        },
    },
}
</script>

