<template>
    <v-container>
        <v-row>
            <span style="font-size: 24px"><v-icon x-small class="pb-2" icon="mdi-office-building-outline"></v-icon> <strong>Role 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" lg="6">
                <v-card elevation="5" style="width: 100%; height: auto;" title="Job Roles Manager" subtitle="Controls creating, editing, deleting user job roles.">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2" size="45">
                            <v-icon size="large" icon="mdi-briefcase"></v-icon>
                        </v-avatar>
                    </template>
                    <template v-slot:append>
                        <v-tooltip v-model="addRoleTooltip" location="top">
                            <template v-slot:activator="{ props }">
                                <v-avatar v-bind="props" :color="addRoleTooltip ? 'green-darken-3' : 'green-darken-1'" size="35" @click="showNewRoleDialog()">
                                    <v-icon  icon="mdi-plus" style="cursor: pointer"></v-icon>
                                </v-avatar>
                            </template>
                            <span>Add new job role</span>
                        </v-tooltip>
                    </template>

                    <v-card-text>
                        <v-data-table :items="Roles" :headers="RolesHeaders" item-value="id" :loading="RolesLoading" height="auto">
                            <template v-slot:item.actions="{ item }">
                                <v-hover v-slot="{ isHovering, props }"><v-icon size="large" v-bind="props" :color="isHovering ? 'yellow-accent-1' : 'yellow-accent-4'" variant="plain" icon="mdi-pencil-box" @click="showEditRole(item.id, item.name);"></v-icon></v-hover>
                                <v-hover v-slot="{ isHovering, props }"><v-icon size="large" v-bind="props" :color="isHovering ? 'red-accent-1'    : 'red-accent-4'" variant="plain" icon="mdi-close-box" @click="deleteRole(item.id, item.name);"></v-icon></v-hover>
                            </template>
                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-col>

            <v-col cols="12" lg="6">
                <v-card elevation="5" style="width: 100%; height: auto;" title="Tools Manager" subtitle="Controls creating, editing, deleting tools.">
                    <template v-slot:prepend>
                        <v-avatar color="blue-darken-2" size="45">
                            <v-icon size="large" icon="mdi-book"></v-icon>
                        </v-avatar>
                    </template>
                    <template v-slot:append>
                        <v-tooltip v-model="addToolTooltip" location="top">
                            <template v-slot:activator="{ props }">
                                <v-avatar v-bind="props" :color="addToolTooltip ? 'green-darken-3' : 'green-darken-1'" size="35" @click="showNewToolDialog()">
                                    <v-icon  icon="mdi-plus" style="cursor: pointer"></v-icon>
                                </v-avatar>
                            </template>
                            <span>Add new tool</span>
                        </v-tooltip>
                    </template>
                    <v-card-text>
                        <v-data-table :items="Tools" :headers="ToolsHeaders" item-value="id" :loading="ToolsLoading" height="auto">
                            <template v-slot:item.actions="{ item }">
                                <v-hover v-slot="{ isHovering, props }"><v-icon size="large" v-bind="props" :color="isHovering ? 'yellow-accent-1' : 'yellow-accent-4'" variant="plain" icon="mdi-pencil-box" @click="showEditTool(item.id, item.name);"></v-icon></v-hover>
                                <v-hover v-slot="{ isHovering, props }"><v-icon size="large" v-bind="props" :color="isHovering ? 'red-accent-1'    : 'red-accent-4'" variant="plain" icon="mdi-close-box" @click="showDeleteTool(item.id, item.name);"></v-icon></v-hover>
                            </template>
                        </v-data-table>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>


        <newRoleDialog ref="newRoleDialog" @load-roles="loadRoles()"></newRoleDialog>
        <newToolDialog ref="newToolDialog" @load-tools="loadTools()"></newToolDialog>

        <deleteTool ref="deleteTool" @load-tools="loadTools()"></deleteTool>
        <editTool ref="editTool" @load-tools="loadTools()"></editTool>

        <deleteRole ref="deleteRole" @load-roles="loadRoles()"></deleteRole>
        <editRole ref="editRole" @load-roles="loadRoles()"></editRole>
        
   </v-container>
</template>
<script>
import { defineAsyncComponent } from "vue";
const newToolDialog = defineAsyncComponent(() => import("@/components/Modals/NewTool.vue"));
const newRoleDialog = defineAsyncComponent(() => import("@/components/Modals/NewRole.vue"));
const deleteRole = defineAsyncComponent(() => import("@/components/Modals/DeleteRole.vue"));
const editRole = defineAsyncComponent(() => import("@/components/Modals/EditRole.vue"));
const deleteTool = defineAsyncComponent(() => import("@/components/Modals/DeleteTool.vue"));
const editTool = defineAsyncComponent(() => import("@/components/Modals/EditTool.vue"));
export default {

  components: {
      newToolDialog,
      newRoleDialog,
      deleteRole,
      editRole,
      deleteTool,
      editTool
  },

  data: () => ({
    breadcrumbs: [
        { title: "Home", disabled: false, href: "/" },
        { title: "Roles Manager", disabled: true },
    ],

    Roles: [],
    RolesLoading:true,
    addRoleTooltip:false,
    RolesHeaders: [
        { title: 'ID', key: 'id'},
        { title: 'Name', key: 'name'},
        { title: 'Assigned To Users', key: 'userAssing'},
        { title: 'Actions', align: 'start', sortable: false, key: 'actions'}
    ],

    Tools:[],
    ToolsLoading:true,
    addToolTooltip:false,
    ToolsHeaders:[
        { title: 'ID', key: 'id'},
        { title: 'Name', key: 'name'},
        { title: 'Actions', align: 'start', sortable: false, key: 'actions'}
    ],
  }),

  mounted() {
    this.loadRoles();
    this.loadTools();
  },
 
  methods: {

    showNewToolDialog() {
        this.$refs.newToolDialog.showDialog();
    },
    showNewRoleDialog() {
        this.$refs.newRoleDialog.showDialog();
    },
    deleteRole(roleID, roleName) {
      this.$refs.deleteRole.deleteRole(roleID, roleName);
    },
    showEditRole(roleID, roleName) {
      this.$refs.editRole.showDialog(roleID, roleName);
    },
    showDeleteTool(ID, name) {
      this.$refs.deleteTool.deleteTool(ID, name);
    },
    showEditTool(ID, name) {
      this.$refs.editTool.showDialog(ID, name);
    },
      
    loadTools() {
        this.ToolsLoading = true;
        this.$root.axiosGet('/role-manager-load-tools').then(data => {
            this.Tools = data.response.data.data;
            this.ToolsLoading = false;
        }); 
    },

    loadRoles() {
        this.RolesLoading = true;
        this.$root.axiosGet('/role-manager-load').then(data => {
            this.Roles = data.response.data.data;
            this.RolesLoading = false;
        }); 
    },
  },
}
</script>

