<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>Requests 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-card elevation="5" style="width: 100%; height: 500px;">
                <v-card-text>
                    <v-col cols="12" class="pt-0 pb-0" v-for="item in requests" :key="item.id">
                        #{{ item.id }} | {{ item.firstname }} {{ item.lastname }} | {{ item.email }} | {{ getStatus(item.status) }} 
                        <v-btn v-if="!item.department_id && item.status != 4" @click="showDepartmentModal(item.id)">Assing Department</v-btn>
                        <v-btn v-if="item.department_id && item.status == 1" @click="processRequests(item.id)">Process</v-btn>
                        <v-btn v-if="item.status != 4 && item.status != 2" @click="rejectRequests(item.id)">Reject</v-btn>
                    </v-col>
                </v-card-text>
            </v-card>            
        </v-row>

        <v-dialog v-model="assingDepartmentModal" persistent max-width="700">
            <v-card>
                <v-card-title class="text-h5">
                    Create New Department
                </v-card-title>
                <v-divider class="mb-5"></v-divider>
                <v-card-text>
                    <v-row>
                        {{ requestId }}
                    </v-row>
                    <v-row>
                        <v-select
                            v-model="selectedDepartment"
                            :items="departments"
                            item-title="name"
                            item-value="id"
                            title="pageTitle"
                        ></v-select>
                    </v-row>
                </v-card-text>
                <v-divider class="mt-5"></v-divider>
                <v-card-actions>
                <v-btn color="red darken-1" text @click="assingDepartmentModal = false">
                    Close
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn color="green darken-1" text @click="assingDepartment(requestId)">
                    Assing
                </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog> 

   </v-container>
</template>


<script>
export default {

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

    departments: [],
    requests:[],

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

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

 methods: {
    loadRequests() {
        this.$root.axiosGet('/request-manager-load').then(data => {
            this.requests = data.response.data.data;
        }); 
    },

    rejectRequests($id) {
        this.$root.axiosPost('/request-manager-reject/'+$id, null, {}).then(data => {
            this.loadRequests();
        }); 
    },

    processRequests($id) {
        this.$root.axiosPost('/request-manager-process/'+$id, null, {}).then(data => {
            this.loadRequests();
        }); 
    },


    loadDepartments() {
        this.$root.axiosGet('/departments-manager-load').then(data => {
            this.departments = data.response.data.data;
            console.log(this.departments);
        }); 
    },

    showDepartmentModal(requestId) {
        this.assingDepartmentModal = true;
        this.selectedDepartment = '';
        this.requestId = requestId;
    },

    assingDepartment($id) {
        this.$root.axiosPost('/request-manager-assing-department/'+$id, null, {'department':this.selectedDepartment}).then(data => {
            this.assingDepartmentModal = false;
            this.loadRequests();
        }); 
    },

    getStatus(statusId) {
        if(statusId == 1) {
          return 'PENDDING';
        }
        if(statusId == 2) {
            return 'WORKING';
        }
        if(statusId == 3) {
            return 'DONE';
        }
        if(statusId == 4) {
            return 'REJECTED';
        }
      }
 },
}
</script>

