<template>
    <div>
        <h5>الطلبات</h5>
        <hr>
        <b-row>
            <b-col cols="4">
                <b-form-input type="text" class="form-control" placeholder="بحث" v-model="searchValue"
                              @input="searchResult()"
                              autocomplete="off"></b-form-input>
            </b-col>
            <b-col md="4" offset-md="4">
                <select class="form-control" v-model="pageState" @change="pageStateResult">
                    <option value="0">عرض الجميع</option>
                    <option v-for="(state, index) in orderStateTransliation" :key="index"
                            :value="index === 4 || index === 5  ? index+2 : index+1 ">{{
                            state
                        }}
                    </option>
                </select>
            </b-col>
        </b-row>

        <!-- table -->
        <table class="table table-borderd">
            <thead>
            <tr>
                <th>العميل</th>
                <th>نوع الجهاز</th>
                <th>الماركة</th>
                <th>تاريخ الطلب</th>
                <th>المستلم</th>
                <th>حالة الطلب</th>
                <th>الأهمية</th>
                <th>التكلفة</th>
                <th>العمليات</th>
            </tr>
            </thead>
            <tbody>
            <tr v-if="searchValue === ''" v-for="(order, index) in orders.data" :key="order.id">
                <td>{{ order.customer.name }}</td>
                <td>{{ deviceTypeTranslation[order.customer.device.type - 1] }}</td>
                <td>{{ order.customer.device.brand }}</td>
                <td>{{ order.created_at }}</td>
                <td>{{ order.employee.name }}</td>
                <td :class="cssColor(order.state)">{{
                        orderStateTransliation[order.state === 6 || order.state === 7 ? order.state - 2 : order.state - 1]
                    }}
                </td>
                <td><b :class="priorityCssColor(order.priority)">{{ priorityTranslation[order.priority] }}</b></td>
                <td>{{ order.cost - order.discount }}</td>
                <td>
                    <button class="btn bg-primary btn-sm" @click="viewDetails(order.id)"><i class="fas fa-eye"></i>
                    </button>
                </td>
            </tr>
            <!-- Search Container -->
            <tr v-if="searchValue !== ''" v-for="(customer, index) in searchResultData.data" :key="customer.id">
                <td>{{ customer.name }}</td>
                <td>{{ deviceTypeTranslation[customer.device.type - 1] }}</td>
                <td>{{ customer.device.brand }}</td>
                <td>{{ customer.order.created_at }}</td>
                <td>{{ customer.order.employee.name }}</td>
                <td :class="cssColor(customer.order.state)">{{
                        orderStateTransliation[customer.order.state === 6 || customer.order.state === 7 ? customer.order.state - 2 : customer.order.state - 1]
                    }}
                </td>
                <td><b
                    :class="priorityCssColor(customer.order.priority)">{{ priorityTranslation[customer.order.priority] }}</b>
                </td>
                <td>{{ customer.order.cost - customer.order.discount }}</td>
                <td>
                    <button class="btn bg-primary btn-sm" @click="viewDetails(customer.order.id, 'search')"><i
                        class="fas fa-eye"></i></button>
                </td>

            </tr>
            </tbody>
        </table>
        <pagination :data="searchValue === '' ? orders : searchResultData"
                    @pagination-change-page="getResults"></pagination>
        <!-- View order details -->
        <b-modal id="order-detail-modal" hide-footer hide-header-close size="xl">
            <h6>تفاصيل الطلب</h6>
            <hr>
            <div v-if="orderDetails">
                <b-row>
                    <b-col cols="12"><h4>بيانات العميل</h4></b-col>
                    <b-col cols="6"><span>الإسم: <b>{{ orderDetails.customer.name }}</b> </span></b-col>
                    <b-col cols="4"><span>رقم الهاتف : <b>{{ orderDetails.customer.phone }}</b></span></b-col>
                    <b-col cols="2"><span>عدد الإستعلامات : <b
                        class="badge badge-primary">{{ orderDetails.customer.query_order }}</b></span></b-col>

                </b-row>
                <hr>
                <b-row>
                    <b-col cols="12"><h4>بيانات الجهاز</h4></b-col>
                    <b-col cols="3"><span>رقم معرف الجهاز: <b>{{ orderDetails.customer.device.serial }}</b> </span>
                    </b-col>
                    <b-col cols="3"><span>ماركة الجهاز: <b>{{ orderDetails.customer.device.brand }}</b> </span></b-col>
                    <b-col cols="3"><span>النوع: <b>{{
                            deviceTypeTranslation[orderDetails.customer.device.type - 1]
                        }}</b> </span></b-col>
                    <b-col cols="3"><span>لون الجهاز: <b>{{ orderDetails.customer.device.color }}</b> </span></b-col>
                    <b-col cols="3" class="mt-3"><span>المرفقات: <b
                        v-for=" ext in orderDetails.customer.device.extentions " :key="ext">
                    {{ extTranslation[ext] }}
                </b> </span></b-col>
                    <b-col cols="3" class="mt-3"><span>حالة الشاشة: <b>{{
                            orderDetails.isVisible ? 'مفعل' : 'غير مفعل'
                        }}</b> </span>
                    </b-col>
                </b-row>
                <b-row class="m-t-10">
                    <b-col cols="8">
                        <span>ملاحظات موظف الإستقبال: <b>{{ orderDetails.customer.device.notice }}</b> </span></b-col>
                </b-row>
                <hr>
                <b-row>
                    <b-col cols="12"><h4>بيانات الطلب:</h4></b-col>
                    <b-col cols="3"><span>الحالة: <b :class="cssColor(orderDetails.state)">{{
                            orderStateTransliation[orderDetails.state === 6 || orderDetails.state === 7 ? orderDetails.state - 2 : orderDetails.state - 1]
                        }}</b> </span></b-col>
                    <b-col cols="3">
                        <span>نوع الصيانة: <b>{{ processTypeTranslation[orderDetails.proccess_type - 1] }}</b> </span>
                    </b-col>
                </b-row>
                <b-row class="mt-3">
                    <b-col cols="3"><span>التكلفة قبل الخصم: <b class="text-success">{{ orderDetails.cost }}</b> </span>
                    </b-col>
                    <b-col cols="3"><span>التكلفة بعد الخصم: <b
                        class="text-success">{{ orderDetails.cost - orderDetails.discount }}</b> </span></b-col>

                </b-row>
                <b-row class="m-t-20">
                    <b-col cols="3"><span>الموظف المستلم للطلب: <b>{{ orderDetails.employee.name }}</b> </span></b-col>
                    <b-col cols="3"><span>آخر تعديل للطلب: <b>{{ orderDetails.updated_employee.name }}</b> </span>
                    </b-col>
                    <b-col cols="5"><span>تاريخ إنشاء الطلب: <b>{{ orderDetails.created_at }}</b> </span></b-col>
                    <b-col cols="4"><span>تاريخ تعديل الطلب: <b>{{ orderDetails.updated_at }}</b> </span></b-col>
                </b-row>
                <hr>
                <b-row>
                    <b-col cols="12"><h4>الموظفون الذين قامو بالعمل:</h4></b-col>
                    <b-col cols="12">
                        <table class="table-bordered">
                            <b-thead>
                                <b-tr class="text-center">
                                    <b-th>الموظف</b-th>
                                    <b-th>تاريخ الإستلام</b-th>
                                    <b-th>تاريخ الإنتهاء</b-th>
                                </b-tr>
                            </b-thead>
                            <b-tbody class="text-center">
                                <b-tr v-for="emp in orderDetails.requests" :key="emp.id">
                                    <b-td>{{ emp.user.name }}</b-td>
                                    <b-td>{{ emp.created_at }}</b-td>
                                    <b-td>{{ emp.updated_at }}</b-td>
                                </b-tr>
                            </b-tbody>
                        </table>
                    </b-col>

                    <b-col cols="12" class="m-t-30">
                        <span> ملاحظات موظفي الصيانة: </span>
                        <span><b v-html="orderDetails.notice"></b></span>
                    </b-col>
                    <b-col cols="6" class="m-t-30" v-if="orderDetails.canceled_order">
                        <span> سبب إلغاء الطلب: </span>
                        <span><b>{{ orderDetails.canceled_order.notes }}</b></span>
                    </b-col>
                    <b-col cols="6" class="m-t-30">
                        <span> ملاحظات بعد الصيانة: </span>
                        <span><b>{{ orderDetails.customer.device.done_notice }}</b></span>
                    </b-col>
                    <hr>
                    <b-col cols="6" v-if="orderDetails.stock_notes" class="m-t-30">
                        <span> ملاحظات المستودع: </span>
                        <span><b>{{ orderDetails.stock_notes.note }}</b></span>
                    </b-col>

                    <b-col cols="6" v-if="orderDetails.stock_notes" class="m-t-30">
                        <span> تاريخ النقل للمستودع: </span>
                        <span><b>{{ orderDetails.stock_notes.created_at }}</b></span>
                    </b-col>

                    <b-col cols="12" class="m-t-30">
                        <span> صورة الجهاز: </span>
                        <img v-lazy="getPhoto(orderDetails.customer.device.photo)" :alt="orderDetails.customer.name">
                    </b-col>
                </b-row>
            </div>
        </b-modal>
        <!-- search mood -->
        <b-modal v-if=" searchValue !== ''" id="order-search-detail-modal" hide-footer hide-header-close size="xl">
            <h6>تفاصيل الطلب</h6>
            <hr>
            <b-row>
                <b-col cols="12"><h4>بيانات العميل</h4></b-col>
                <b-col cols="6"><span>الإسم: <b>{{ orderDetails.customer.name }}</b> </span></b-col>
                <b-col cols="4"><span>رقم الهاتف : <b>{{ orderDetails.customer.phone }}</b></span></b-col>
                <b-col cols="2"><span>عدد الإستعلامات : <b
                    class="badge badge-primary">{{ orderDetails.customer.query_order }}</b></span></b-col>

            </b-row>
            <hr>
            <b-row>
                <b-col cols="12"><h4>بيانات الجهاز</h4></b-col>
                <b-col cols="3"><span>رقم معرف الجهاز: <b>{{ orderDetails.customer.device.serial }}</b> </span></b-col>
                <b-col cols="3"><span>ماركة الجهاز: <b>{{ orderDetails.customer.device.brand }}</b> </span></b-col>
                <b-col cols="3"><span>النوع: <b>{{ deviceTypeTranslation[orderDetails.customer.device.type - 1] }}</b> </span>
                </b-col>
                <b-col cols="3"><span>لون الجهاز: <b>{{ orderDetails.customer.device.color }}</b> </span></b-col>
                <b-col cols="3" class="mt-3"><span>المرفقات: <b v-for=" ext in orderDetails.customer.device.extentions "
                                                                :key="ext">
                    {{ extTranslation[ext] }}
                </b> </span></b-col>
                <b-col cols="3" class="mt-3"><span>حالة الشاشة: <b>{{
                        orderDetails.isVisible ? 'مفعل' : 'غير مفعل'
                    }}</b> </span>
                </b-col>
            </b-row>
            <b-row class="m-t-10">
                <b-col cols="8"><span>ملاحظات موظف الإستقبال: <b>{{ orderDetails.customer.device.notice }}</b> </span>
                </b-col>
            </b-row>
            <hr>
            <b-row>
                <b-col cols="12"><h4>بيانات الطلب:</h4></b-col>
                <b-col cols="3"><span>الحالة: <b :class="cssColor(orderDetails.state)">{{
                        orderStateTransliation[orderDetails.state === 6 || orderDetails.state === 7 ? orderDetails.state - 2 : orderDetails.state - 1]
                    }}</b> </span></b-col>
                <b-col cols="3"><span>نوع الصيانة: <b>{{ processTypeTranslation[orderDetails.proccess_type - 1] }}</b> </span>
                </b-col>
            </b-row>
            <b-row class="mt-3">
                <b-col cols="3"><span>التكلفة قبل الخصم: <b class="text-success">{{ orderDetails.cost }}</b> </span>
                </b-col>
                <b-col cols="3"><span>التكلفة بعد الخصم: <b
                    class="text-success">{{ orderDetails.cost - orderDetails.discount }}</b> </span></b-col>

            </b-row>
            <b-row class="m-t-20">
                <b-col cols="3"><span>الموظف المستلم للطلب: <b>{{ orderDetails.employee.name }}</b> </span></b-col>
                <b-col cols="3"><span>آخر تعديل للطلب: <b>{{ orderDetails.updated_employee.name }}</b> </span></b-col>
                <b-col cols="5"><span>تاريخ إنشاء الطلب: <b>{{ orderDetails.created_at }}</b> </span></b-col>
                <b-col cols="4"><span>تاريخ تعديل الطلب: <b>{{ orderDetails.updated_at }}</b> </span></b-col>
            </b-row>
            <hr>
            <b-row>
                <b-col cols="12"><h4>الموظفون الذين قامو بالعمل:</h4></b-col>
                <b-col cols="12">
                    <table class="table-bordered">
                        <b-thead>
                            <b-tr class="text-center">
                                <b-th>الموظف</b-th>
                                <b-th>تاريخ الإستلام</b-th>
                                <b-th>تاريخ الإنتهاء</b-th>
                            </b-tr>
                        </b-thead>
                        <b-tbody class="text-center">
                            <b-tr v-for="emp in orderDetails.requests" :key="emp.id">
                                <b-td>{{ emp.user.name }}</b-td>
                                <b-td>{{ emp.created_at }}</b-td>
                                <b-td>{{ emp.updated_at }}</b-td>
                            </b-tr>
                        </b-tbody>
                    </table>
                </b-col>

                <b-col cols="12" class="m-t-30">
                    <span> ملاحظات موظفي الصيانة: </span>
                    <span><b v-html="orderDetails.notice"></b></span>
                </b-col>
                <b-col cols="6" class="m-t-30" v-if="orderDetails.canceled_order">
                    <span> سبب إلغاء الطلب: </span>
                    <span><b>{{ orderDetails.canceled_order.notes }}</b></span>
                </b-col>
                <hr>
                <b-col cols="6" v-if="orderDetails.stock_notes" class="m-t-30">
                    <span> ملاحظات المستودع: </span>
                    <span><b>{{ orderDetails.stock_notes.note }}</b></span>
                </b-col>

                <b-col cols="6" v-if="orderDetails.stock_notes" class="m-t-30">
                    <span> تاريخ النقل للمستودع: </span>
                    <span><b>{{ orderDetails.stock_notes.created_at }}</b></span>
                </b-col>
                <b-col cols="6" class="m-t-30">
                    <span> ملاحظات بعد الصيانة: </span>
                    <span><b>{{ orderDetails.customer.device.done_notice }}</b></span>
                </b-col>

                <b-col cols="12" class="m-t-30">
                    <span> صورة الجهاز: </span>
                    <img v-lazy="getPhoto(orderDetails.customer.device.photo)" :alt="orderDetails.customer.name">
                </b-col>
            </b-row>
        </b-modal>

        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            pageState: 0,
            orderStateTransliation: ['قيد الإنتظار',
                'قيد التنفيذ',
                'تمت صيانته',
                'تم التسليم',
                'ملغي',
                'مستودع'
            ],
            processTypeTranslation: [
                'هاردوير كومبيوتر',
                'سوفت وير كوبيوتر',
                '1.هاردوير 2.سوفت وير كومبيوتر',
                '1.سوفت وير 2.هاردوير كومبيوتر',
                'موبايل',

            ],
            extTranslation: ['حقيبة', 'ماوس', 'بطارية', 'شاحن'],
            deviceTypeTranslation: ['كومبيوتر', 'موبايل', 'لابتوب'],
            priorityTranslation: ['', 'مهم جداً', 'متوسط', 'منخفض'],
            searchValue: '',
            searchResultData: {},
            orders: {},
            orderDetails: null,
        }
    },
    methods: {
        cssColor(state) {
            switch (state) {
                case 1:
                    return this.stateColor = 'text-info';
                    break;
                case  2:
                    return this.stateColor = 'text-orange';
                case  3:
                    return this.stateColor = 'text-success';
                case  4:
                    return this.stateColor = 'text-warning';
                case  6:
                    return this.stateColor = 'text-danger';
                case  7:
                    return this.stateColor = 'text-secondary';
                    break;
            }
        },
        priorityCssColor(priority) {
            switch (priority) {
                case 1:
                    return 'text-danger';
                case 2:
                    return 'text-yellow';
                case 3:
                    return 'text-green';
            }
        },
        getPhoto(photo) {
            return '/' + photo
        },
        getOrders() {
            this.$Progress.start()
            axios.get(`/manager/api/orders/${this.pageState}`)
                .then(response => {
                    this.orders = response.data
                    this.$Progress.finish()
                })
                .catch(err => {
                    this.$Progress.fail()
                })
        },
        // Get order detail based of filter value
        pageStateResult() {
            this.$Progress.start()
            axios.get(`/manager/api/orders/${this.pageState}`)
                .then(response => {
                    this.orders = response.data
                    this.$Progress.finish()
                })
                .catch(err => {
                    this.$Progress.fail()

                })
        },
        getResults(page = 1) {
            this.$Progress.start()
            if (this.searchValue === '') {
                axios.get(`/manager/api/orders/${this.pageState}?page=${page}`)
                    .then(response => {
                        this.orders = response.data;
                        this.$Progress.finish()
                    })
                    .catch(err => {
                        this.$Progress.fail()
                    })
            } else {
                axios.get(`/manager/api/orders/search/${this.searchValue}/${this.pageState}?page=${page}`)
                    .then(response => {
                        this.searchResultData = response.data
                        this.$Progress.finish()
                    })
                    .catch(err => {
                        this.$Progress.fail()

                    })
            }


        },
        //search result
        searchResult(page = 1) {
            this.$Progress.start()
            if (this.searchValue !== "") {
                // Get resultes based on pageState and serachquery
                axios.get(`/manager/api/orders/search/${this.searchValue}/${this.pageState}?page=${page}`)
                    .then(response => {
                        this.searchResultData = response.data
                        this.$Progress.finish()
                    })
                    .catch(err => {
                        this.$Progress.fail()
                    })
            } else {
                // get orders based only on pageState
                this.$Progress.finish()
            }
        },
        //order details
        viewDetails(order, type = 'default') {
            this.$Progress.start()
            this.orders.data.forEach(item => {
                if (item.id === order) {
                    this.orderDetails = item
                }
            })
            if (this.searchValue !== '') {
                this.$bvModal.show('order-search-detail-modal')
            } else
                this.$bvModal.show('order-detail-modal')
            this.$Progress.finish()
        }
    },
    mounted() {
        this.getOrders()
    }
}
</script>

