<template>
    <div>
        <h2>الموظفون</h2>
        <b-button variant="success" v-b-modal.employee-modal><i class="fas fa-users"></i> إضافة موظف جديد </b-button>
        <table class="table table-bordered margin-top-20 text-center">
            <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">الموظف</th>
                <th scope="col">النوع</th>
                <th scope="col">تاريخ الإنضمام</th>
                <th>الحالة</th>
                <th scope="col">العمليات</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(employee, index) in employees" :key="employee.name">
                <td>{{ index +1 }}</td>
                <td>{{ employee.name }}</td>
                <td>{{ employee.role }}</td>
                <td>{{ employee.joined_date }}</td>
                <td :class="cssIsEnabledColor(employee.isEnabled)">{{ employee.isEnabled  ? 'نشط' : 'غير نشط'}}</td>
                <td>
                    <button type="button" @click="deleteEmployee(employee.id, employee.name)" :class="cssIsEnabledClass(employee.isEnabled)" title="إيقاف موظف" ><i class="fas fa-grin"></i></button>
                    <button class="btn btn-success btn-sm" @click="editEmployee(employee)" title="تعديل موظف"><i class="fas fa-edit"></i></button>
                    <button class="btn bg-blue btn-sm" title="تفاصيل موظف" @click="viewDetails(employee.id)"><i class="fas fa-eye"></i></button>
                </td>
            </tr>
            </tbody>
        </table>
        <b-modal id="employee-modal" hide-footer hide-header-close size="xl">
            <hr>
            <template #modal-title>
                {{ editMode ? 'تعديل موظف' : 'إضافة موظف جديد'}}
            </template>
            <form @submit.prevent="editMode ? editEmployeeSubmit() : saveEmployee()">
                <b-row>
                    <b-col cols="4">
                        <b-form-group
                            label="إسم الموظف">
                            <b-form-input
                                type="text"
                                required
                                v-model="form.name"
                            ></b-form-input>
                        </b-form-group>
                        <p v-if="errors.name" class="text-danger" >{{ errors.name[0]}}</p>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="رقم الهاتف">
                            <b-form-input
                                type="text"
                                v-model="form.phone"
                            ></b-form-input>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="تاريخ بدء العمل">
                            <b-form-input
                                type="date"
                                v-model="form.joinedDate"
                            ></b-form-input>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="كلمة المرور">
                            <b-form-input
                                type="text"
                                v-model="form.password"
                                required
                            ></b-form-input>
                            <p v-if="errors.password" class="text-danger" >{{ errors.password[0]}}</p>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4" v-if="!editMode">
                        <b-form-group
                            label="التخصص">
                            <b-form-select v-model="form.type" :options="options" required></b-form-select>
                            <p v-if="errors.type" class="text-danger" >{{ errors.type[0]}}</p>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="الملاحظات">
                            <b-form-textarea
                                id="textarea"
                                rows="3"
                                v-model="form.notice"
                            ></b-form-textarea>
                        </b-form-group>
                    </b-col>
                </b-row>
            </form>
            <b-button class="mt-3" variant="btn bg-danger" @click="closeModal">إلغاء</b-button>
            <b-button class="mt-3" variant="btn bg-blue" @click=" editMode ? editEmployeeSubmit() : saveEmployee()" :disabled="isSubmitted">حفظ البيانات</b-button>
        </b-modal>
        <b-modal id="employee-detail-modal" hide-footer hide-header-close size="xl">
            <h5>تفاصيل موظف</h5>
            <hr>
            <b-row>
                <b-col md="4">
                    <span> الموظف: </span> <span><b>{{ viewDetailsModal.emp.name}}</b></span>
                </b-col>
                <b-col md="4">
                    <span> رقم الهاتف: </span> <span><b>{{ viewDetailsModal.emp.phone}}</b></span>
                </b-col>
            </b-row>
            <b-row class="m-t-30">
                <b-col md="4">
                    <span> النوع: </span> <span><b>{{  empType[viewDetailsModal.emp.type -1]}}</b></span>
                </b-col>
                <b-col md="4">
                    <span> الحالة: </span> <span><b>{{ empState[viewDetailsModal.emp.isEnabled]}}</b></span>
                </b-col>
                <b-col md="4">
                    <span> تاريخ الإنضمام للعمل: </span> <span><b>{{ viewDetailsModal.emp.joined_date}}</b></span>
                </b-col>
            </b-row>
            <b-row class="m-t-30">
                <b-col md="4">
                    <span> تاريخ التسجيل في النظام: </span> <span><b>{{ viewDetailsModal.emp.created_at}}</b></span>
                </b-col>
                <b-col md="4">
                    <span> ملاحظات: </span> <span><b>{{ viewDetailsModal.emp.notice}}</b></span>
                </b-col>
            </b-row>
            <b-row class="m-t-30">
                <b-col md="3" v-if="getEmployeeType(viewDetailsModal.emp.type)">
                    <span> عدد الطلبات المستلمة: </span> <span><b class="badge badge-warning p-2">{{ viewDetailsModal.rec}}</b></span>
                </b-col>
                <b-col md="3" v-if="getEmployeeType(viewDetailsModal.emp.type)">
                    <span> عدد الطلبات المسلّمة: </span> <span><b class="badge badge-success p-2">{{ viewDetailsModal.delv}}</b></span>
                </b-col>

                <!-- hdc swc mob -->
                <b-col md="3" v-if="!getEmployeeType(viewDetailsModal.emp.type)">
                    <span> عدد الطلبات المستلمة: </span> <span><b class="badge badge-warning p-2">{{ viewDetailsModal.rec_req}}</b></span>
                </b-col>
                <b-col md="3" v-if="!getEmployeeType(viewDetailsModal.emp.type)">
                    <span> عدد الطلبات تمّت صيانتها: </span> <span><b class="badge badge-success p-2">{{ viewDetailsModal.delv_req}}</b></span>
                </b-col>
                <b-col md="3" v-if="!getEmployeeType(viewDetailsModal.emp.type)">
                    <span> عدد الطلبات قيد الإنتظار: </span> <span><b class="badge badge-primary p-2">{{ viewDetailsModal.waited}}</b></span>
                </b-col>
            </b-row>
        </b-modal>
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
import axios from 'axios'
import Swal from 'sweetalert2'

export default {
    data() {
        return {
            empType:['', 'موظف هاردوير' , 'موظف سوف وير' ,'تقني موبايل','موظف إستقبال'],
            empState:['غير نشط' , 'نشط'],
            editMode: false,
            isSubmitted: false,
            employees: null,
            options: [
                {value: null, text: 'قم باختيار نوع الحساب للموظف'},
                {value: '2', text: 'موظف هاردوير كمبيوتر'},
                {value: '3', text: 'موظف سوفت وير كمبيوتر'},
                {value: '4', text: 'موظف صيانة موبايل'},
                {value: '5', text: 'موظف إستقبال'},
            ], //Employee type
            form: {
                name: null,
                password: null,
                phone: null,
                notice: null,
                type: null,
                joinedDate: null
            },
            errors: {
                name: null,
                password: null,
                type: null
            },
            viewDetailsModal:{
                emp:{
                    name:'',
                    phone: '',
                    notice:'',
                    type:0,
                    isEnabled:false,
                    joined_data:'',
                    created_at: ''
                },
                delv: 0,
                rec: 0,
                rec_req:0,
                delv_req:0,
                waited:0
            }
        }
    },
    methods: {
        cssIsEnabledColor(isEnabled){
            return isEnabled ? 'text-success' : 'text-danger'
        },
        cssIsEnabledClass(state){
            return state ? 'btn btn-danger btn-sm' : 'btn btn-success btn-sm'
        },
        getEmployeeType(type){
            return type === 5 ;
        },
        //load all employees
        loadEmployees(){
            this.$Progress.start()
            axios.get('/manager/api/employees')
                .then(response => {
                    this.employees = response.data.data
                    this.$Progress.finish()

                })
                .catch(err => {
                    this.$Progress.fail()
                })
        },
        resetData(){
            this.editMode = false
            this.form ={
                name: null,
                password: null,
                phone: null,
                notice: null,
                type: null,
                joinedDate: null
            }
            this.errors = {
                  name: null,
                  password: null,
                  type: null
              }
        },
        //insert new employee
        saveEmployee() {
            this.isSubmitted = true
            this.$Progress.start()
            axios.post('/manager/api/employee',  this.form)
            .then(response => {
                Swal.fire({
                    title: 'موظف جديد',
                    text: 'تم إدخال موظف جديد بنجاح',
                    icon: 'success',
                    confirmButtonText: 'حسناً'
                })
                this.$Progress.finish()
                this.resetData()
                this.$bvModal.hide('employee-modal')
                this.loadEmployees()
                this.isSubmitted = false

            })
            .catch(err => {
                this.errors = err.response.data.errors
                this.isSubmitted = false
                this.$Progress.fail()

            })
        },
        //Close Modal
        closeModal(){
            this.$bvModal.hide('employee-modal')
            this.resetData()
        },
        //delete employee
        deleteEmployee(user, name){
                Swal.fire({
                    title: `هل أنت متأكد من تعديل حالة الموظف ${name}`,
                    showCancelButton: true,
                    confirmButtonText: `نعم`,
                    cancelButtonText: `إلغاء`,
                    confirmButtonColor: 'red'
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.$Progress.start()
                        axios.delete('/manager/api/employee/' + user )
                        .then(response => {
                            Swal.fire({
                                title: `تعديل حالة موظف `,
                                text: `تم تعديل حالة الموظف ${name} بنجاح `,
                                icon: 'success',
                                confirmButtonText: 'حسناً'
                            })
                            this.$Progress.finish()
                            this.$Progress.start()
                            this.loadEmployees()
                            this.$Progress.finish()
                        })
                        .catch(err => {
                            Swal.fire({
                                title: `تعديل حالة موظف `,
                                text: `حدث خطأ ما يرجى المحاولة مجدداً `,
                                icon: 'error',
                                confirmButtonText: 'حسناً'
                            })
                            this.$Progress.fail()
                        })
                    }
                })

        },
        //Edit Employee modal
        editEmployee(employee){
            this.editMode = true
            this.$bvModal.show('employee-modal')
            this.form = {
                id: employee.id,
                name: employee.name,
                phone: employee.phone,
                notice: employee.notice,
                type: employee.type,
                joinedDate: employee.joinedDate
            }
        },
        editEmployeeSubmit(){
            this.isSubmitted = true
            this.$Progress.start()
            axios.put('/manager/api/employee/' + this.form.id , this.form )
                .then(response => {
                    Swal.fire({
                        title: `تعديل موظف`,
                        text: `تم تعديل بيانات الموظف ${this.form.name} بنجاح `,
                        icon: 'success',
                        confirmButtonText: 'حسناً'
                    })
                    this.$Progress.finish()
                    this.$Progress.start()
                    this.loadEmployees()
                    this.$Progress.finish()
                    this.closeModal()
                    this.isSubmitted = false
                })
                .catch(err => {
                    this.errors = err.response.data.errors
                    this.$Progress.fail()
                    this.isSubmitted = false
                    Swal.fire({
                        title: `حذف موظف `,
                        text: `حدث خطأ ما يرجى المحاولة مجدداً `,
                        icon: 'error',
                        confirmButtonText: 'حسناً'
                    })
                })
        },
        viewDetails(employee){
            this.$Progress.start()
            axios.get(`/manager/employee_details/${employee}`)
            .then(response => {
                this.viewDetailsModal = response.data
                this.$bvModal.show('employee-detail-modal')
                this.$Progress.finish()
            }).catch(err =>{
                this.$Progress.fail()
            })
        }
    },
    mounted() {
        this.loadEmployees()
    }
}
</script>
