<template>
    <v-container class="px-0">
        <Message/>
        <v-btn @click="generatePdf" small outlined>PDF</v-btn>
        <vue-excel-xlsx class="btnExcel" :data="itemsPlan" :columns="excelColumnsPlan" :filename="'billing-table'" :sheetname="'billing'">EXCEL</vue-excel-xlsx>
        <v-data-table
            :headers="headersPlan"
            :items="itemsPlan"
            class="elevation-1"
        >
            <template v-slot:top>
                <v-toolbar
                    flat
                >        
                    <v-dialog
                        v-model="dialog"
                        max-width="800"
                    >
                    <template v-slot:activator="{ on, attrs }">
                        <v-btn
                        color="primary"
                        dark
                        class="text-capitalize mb-2"
                        v-bind="attrs"
                        v-on="on"               
                        absolute
                        right
                        >
                        New Item
                        </v-btn>
                    </template>
                    <v-card>
                        <Loading/>
                        <v-card-title>
                            <span class="headline">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container>
                                <v-form ref="form">
                                    <v-row>
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="8"
                                        >                     
                                            <v-text-field
                                                v-model="editedItem.title"
                                                label="Title"
                                                :rules="[rules.required]" 
                                                clearable                      
                                            ></v-text-field>   
                                        </v-col>  
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                        >                     
                                            <v-text-field
                                                v-model="editedItem.price"
                                                label="Price(In USD)"
                                                type="number"
                                                clearable                      
                                            ></v-text-field>   
                                        </v-col>                                                                                                             
                                    </v-row>
                                    <v-row>
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                        >                     
                                            <v-select
                                                label="Interval"
                                                v-model="intervalSelect"
                                                :items="intervals"
                                                :rules="[rules.required]" 
                                                clearable
                                            >
                                            </v-select>  
                                        </v-col> 
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                        >                     
                                            <v-text-field
                                                v-model="editedItem.assessmentCount"
                                                label="Allowed Assessment"
                                                type="number" 
                                                :rules="[rules.required,rules.minimumVal]"
                                                clearable                      
                                            ></v-text-field>  
                                        </v-col>
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                        >                     
                                            <v-text-field
                                                v-model="editedItem.questionPerAssessmentCount"
                                                label="Allowed Questions(Each Assessment)" 
                                                type="number"
                                                :rules="[rules.required,rules.minimumVal]"
                                                clearable                      
                                            ></v-text-field>  
                                        </v-col>
                                    </v-row>
                                    <v-row>
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                        >                     
                                            <v-text-field
                                                v-model="editedItem.responsePerAssessmentCount"
                                                label="Allowed Candidate(Each Assessment)" 
                                                type="number"
                                                :rules="[rules.required,rules.minimumVal]"
                                                clearable                      
                                            ></v-text-field>  
                                        </v-col>
                                        <v-col
                                            cols="12"
                                            sm="6"
                                            md="8"
                                        >                     
                                            <v-textarea
                                                v-model="editedItem.additionalText"
                                                label="Additional Text"
                                                :rules="[rules.required]"
                                                rows="1"
                                                clearable                       
                                            ></v-textarea>  
                                        </v-col>
                                    </v-row>
                                </v-form>
                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn
                            color="blue darken-1"
                            text
                            @click="close"
                        >
                            Cancel
                        </v-btn>
                        <v-btn
                            color="blue darken-1"
                            text
                            @click="save"
                        >
                            Save
                        </v-btn>
                        </v-card-actions>
                    </v-card>
                    </v-dialog>
                    <v-dialog v-model="dialogDelete" max-width="500px">
                        <v-card>
                            <v-card-title class="headline">Are you sure you want to delete this item?</v-card-title>
                            <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="closeDelete">Cancel</v-btn>
                            <v-btn color="blue darken-1" text @click="deleteItemConfirm">OK</v-btn>
                            <v-spacer></v-spacer>
                            </v-card-actions>
                        </v-card>
                    </v-dialog>
                </v-toolbar>
            </template>
            <template v-slot:[`item.actions`]="{item}">
                <v-icon
                small
                class="mr-2"
                @click="editItem(item)"
                >
                mdi-pencil
                </v-icon>
                <v-icon
                small
                @click="deleteItem(item)"
                >
                mdi-delete
                </v-icon>
            </template>
        </v-data-table>
    </v-container>
</template>

<script>
import jsPDF from 'jspdf'
import 'jspdf-autotable'
import Message from '../../components/common/Message'
import Loading from '../../components/common/Loading.vue'

export default {
    name:'BillingPlan',
    components:{
      Message,
      Loading
    },
    data(){
        return{
            rules:{
                required:value=>!!value||'Required',
                minimumVal:value=>value>0
            },
            intervals:['Monthly','Yearly'],
            intervalSelect:'',
            dialog:false,
            dialogDelete:false,
            headersPlan:[
                {text:'Title',value:'title'},
                {text:'Price',value:'price'},
                //{text:'Stripe Plan Id',value:'stripePlanId'},
                {text:'Interval',value:'interval'},
                {text:'Assessment',value:'assessmentCount'},
                {text:'Questions(Per Assessment)',value:'questionPerAssessmentCount'},
                {text:'Response(Per Assessment)',value:'responsePerAssessmentCount'},
                {text:'Actions',value:'actions', sortable: false }
            ],
            itemsPlan:[],
            editedIndex:-1,
            editedItem:{
                title:'',
                price:0,
                interval:'',
                assessmentCount:0,
                questionPerAssessmentCount:0,   
                responsePerAssessmentCount:0,
                additionalText:''       
            },
            defaultItem:{
                title:'',
                price:0,
                interval:'',
                assessmentCount:0,
                questionPerAssessmentCount:0,   
                responsePerAssessmentCount:0,
                additionalText:''
            },
            excelColumnsPlan : [
                {label:'Title',field:'title'},
                {label:'Price',field:'price'},
                {label:'Interval',field:'interval'},
                {label:'Assessment',field:'assessmentCount'},
                {label:'Questions(Per Assessment)',field:'questionPerAssessmentCount'},
                {label:'Response(Per Assessment)',field:'responsePerAssessmentCount'}           
           ],
        }
    },
    methods:{
        generatePdf(){
            const doc = new jsPDF()
            doc.autoTable({
                margin: { top: 10,left:2,right:1 },
                body: this.itemsPlan,
                columns: [
                    {header:'Title',dataKey:'title'},
                    {header:'Price',dataKey:'price'},
                    {header:'Interval',dataKey:'interval'},
                    {header:'Assessment',dataKey:'assessmentCount'},
                    {header:'Questions(Per Assessment)',dataKey:'questionPerAssessmentCount'},
                    {header:'Response(Per Assessment)',dataKey:'responsePerAssessmentCount'}
                ],
            })
            doc.save('billing-plan.pdf')
        },
        initialize(){
            this.$store.dispatch('dashboard/applyLoading')
            this.$store.dispatch('settings/fetchBillingPlans')
            .then((response)=>{
                this.$store.dispatch('dashboard/cancelLoading')
                this.itemsPlan=response.data
            })
            .catch((err)=>{
                console.log(err)
            })
        },
        editItem(item){
            //console.log(item)
            this.intervalSelect= item.interval
            this.editedIndex=this.itemsPlan.indexOf(item)
            this.editedItem=Object.assign({},item)
            this.dialog=true
        },
        deleteItem(item){
            this.editedItem = Object.assign({}, item)
            this.dialogDelete=true
        },
        deleteItemConfirm () {
            this.$store.dispatch('settings/deleteBillingPlans',this.editedItem.billingPlanId)
            .then(response=>{
            //console.log(response)
            if(response.status==200){
                this.$root.$emit('message_from_parent',response.data.responseMsg)
                this.$store.dispatch('settings/fetchBillingPlans')
                .then((response)=>{
                    this.itemsPlan=response.data                  
                })
                .catch((err)=>{
                    console.log(err)
                })
            }else if(response.status==202){
                this.$root.$emit('message_from_parent_long',response.data.responseMsg)
            }
            })
            .catch(err=>{
            console.log(err)
            })
            this.closeDelete()
        },
        close(){
            this.dialog=false
            this.$nextTick(()=>{
                this.intervalSelect=''
                this.editedItem=Object.assign({},this.defaultItem)
                this.editedIndex=-1
            })
        },
        closeDelete () {
            this.dialogDelete = false
            this.$nextTick(() => {
                this.editedItem = Object.assign({}, this.defaultItem)
                this.editedIndex = -1
            })
        },
        save(){
            if(this.$refs.form.validate()){
                this.$store.dispatch('dashboard/applyLoading')
                const objPlan={
                    title:this.editedItem.title.trim(),
                    price:this.editedItem.price==null?0:this.editedItem.price,
                    interval:this.intervalSelect,
                    assessmentCount:this.editedItem.assessmentCount,
                    questionPerAssessmentCount:this.editedItem.questionPerAssessmentCount,
                    responsePerAssessmentCount:this.editedItem.responsePerAssessmentCount,
                    additionalText:this.editedItem.additionalText,
                    addedBy:parseInt(localStorage.getItem('loggedUserId')),
                }
                //console.log(objPlan)
                if (this.editedIndex > -1){   
                    objPlan.billingPlanId=this.editedItem.billingPlanId
                    objPlan.lastUpdatedBy=parseInt(localStorage.getItem('loggedUserId'))

                    this.$store.dispatch('settings/updateBillingPlans',objPlan)
                    .then(response=>{
                        this.$store.dispatch('dashboard/cancelLoading')
                        if(response.status==200){
                            this.$root.$emit('message_from_parent_long',response.data.responseMsg)
                            this.close()
                            this.initialize()
                        }else if(response.status==202){
                                this.$root.$emit('message_from_parent',response.data.responseMsg)
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })
                }else{ 
                    this.$store.dispatch('settings/createBillingPlans',objPlan)
                    .then(response=>{
                        this.$store.dispatch('dashboard/cancelLoading')
                        if(response.status==200){
                            this.$root.$emit('message_from_parent','Successfully saved')
                            this.close()
                            this.initialize()
                        }else if(response.status==202){
                                this.$root.$emit('message_from_parent',response.data.responseMsg)
                            }
                        })
                        .catch(err=>{
                            console.log(err)
                        })         
                }
            }
        },
        
    },
    computed:{
      formTitle:function(){
        return this.editedIndex===-1?'New Plan':'Edit Plan'
      }
    },
    watch:{
      dialog (val) {
        val || this.close()
      },
      dialogDelete (val) {
        val || this.closeDelete()
      },
    },
    created(){
        this.initialize()
    }
}
</script>