<template>
    <div>
        <h2>الطلبات</h2>
        <hr>
        <b-row>
            <b-col md="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+1">{{
                            state
                        }}
                    </option>
                </select>
            </b-col>
        </b-row>
        <table class="table table-borderd">
            <thead>
            <tr>
                <th>العميل</th>
                <th>نوع الجهاز</th>
                <th>الماركة</th>
                <th>المستلم</th>
                <th>حالة الطلب</th>
                <th>الأهمية</th>
                <th>التكلفة</th>
                <th>العمليات</th>
            </tr>
            </thead>
            <tbody>
            <!-- 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.employee.name }}</td>
                <td :class="cssColor(customer.order.state)">{{ orderStateTransliation[customer.order.state - 1] }}</td>
                <td :class="priorityCssColor(customer.order.priority)">{{
                        priorityTranslation[customer.order.priority]
                    }}
                </td>
                <td>{{ customer.order.cost - customer.order.discount }}</td>
                <td>
                    <button class="btn bg-green btn-sm " @click="editOrder(customer, 'search')"><i
                        class="fas fa-edit"></i></button>
                    <button class="btn bg-danger btn-sm" @click="cancelOrder(customer, 'search')"
                            :disabled="customer.order.state === 4"><i
                        class="fas fa-trash"></i>
                    </button>
                    <button v-if="customer.order.state !== 6" class="btn bg-success btn-sm"
                            @click="orderModal(customer.order.id, customer.order.name, customer.order.cost)"
                            :disabled="customer.order.state === 4"><i
                        class="fas fa-shipping-fast"></i>
                    </button>
                    <button class="btn btn-warning btn-sm"
                            @click="doneNotice(customer.order.id, customer.name, customer.order.isVisible, customer.device.done_notice)">
                        <i
                            class="fas fa-edit"></i></button>
                    <button class="btn bg-primary btn-sm" @click="viewDetails(customer.order.id)"><i
                        class="fas fa-eye"></i></button>

                </td>

            </tr>

            <!--  Default container-->
            <tr v-if="searchValue === ''" v-for="(order, index) in tableData.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.employee.name }}</td>
                <td :class="cssColor(order.state)">{{ orderStateTransliation[order.state - 1] }}</td>
                <td :class="priorityCssColor(order.priority)">{{ priorityTranslation[order.priority] }}</td>
                <td>{{ order.cost - order.discount }}</td>
                <td>
                    <button class="btn bg-green btn-sm " @click="editOrder(order, 'default')"><i
                        class="fas fa-edit"></i></button>
                    <button class="btn bg-danger btn-sm" @click="cancelOrder(order, 'default')"
                            :disabled="order.state === 4"><i
                        class="fas fa-trash"></i>
                    </button>
                    <!-- deleviredOrder(order.id, order.customer.name) -->
                    <button v-if="order.state !== 6" class="btn bg-success btn-sm "
                            @click="orderModal(order.id, order.customer.name, order.cost)"
                            :disabled="order.state === 4"><i
                        class="fas fa-shipping-fast"></i>
                    </button>
                    <button class="btn btn-warning btn-sm"
                            @click="doneNotice(order.id, order.customer.name, order.isVisible, order.customer.device.done_notice)">
                        <i
                            class="fas fa-edit"></i></button>
                    <button class="btn bg-primary btn-sm " @click="viewDetails(order.id)"><i class="fas fa-eye"></i>
                    </button>
                    <a :href="'/rec/print2?name=' + order.customer.name + '&phone=' + order.customer.phone"><i
                        class="fas fa-eye"></i></a>
                </td>
            </tr>
            </tbody>
        </table>
        <pagination :data="searchValue === '' ? tableData : searchResultData"
                    @pagination-change-page="getResults"></pagination>
        <!-- Update order modal -->
        <b-modal id="order-modal" no-close-on-backdrop hide-footer hide-header-close size="xl">
            <h2>تعديل بيانات الطلب</h2>
            <hr>
            <div v-if="isUpdated" class="alert alert-success">تم تعديل بيانات الطلب بنجاح</div>
            <form @submit.prevent="updateOrder" enctype="multipart/form-data">
                <h5>بيانات العميل</h5>
                <b-row>
                    <b-col cols="4">
                        <b-form-group
                            label="إسم العميل">
                            <b-form-input
                                type="text"
                                required
                                v-model="editModalData.name"
                            ></b-form-input>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="رقم هاتف العميل">
                            <b-form-input
                                type="text"
                                required
                                v-model="editModalData.phone"
                            ></b-form-input>
                        </b-form-group>
                    </b-col>
                </b-row>
                <hr>
                <h5>بيانات الجهاز</h5>
                <b-row>
                    <b-col cols="4">
                        <b-form-group
                            label="لون الجهاز">
                            <b-form-input
                                type="text"
                                required
                                v-model="editModalData.color"
                            ></b-form-input>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="الأهمية">
                            <b-form-select v-model="editModalData.priority" required>
                                <b-form-select-option :value="1">مهم جداً</b-form-select-option>
                                <b-form-select-option :value="2">متوسط</b-form-select-option>
                                <b-form-select-option :value="3">منخفض</b-form-select-option>
                                <b-form-select-option :value="4">تابع م احمد رمضان</b-form-select-option>
                                <b-form-select-option :value="5">تابع م محمد رافت</b-form-select-option>
                                <b-form-select-option :value="6">تابع م جمال ياسين</b-form-select-option>
                                <b-form-select-option :value="7">تابع م وليد منير</b-form-select-option>
                                <b-form-select-option :value="8">تابع كورسيز زون</b-form-select-option>
                                <b-form-select-option :value="9">عمبل تابع للشركة</b-form-select-option>
                                <b-form-select-option :value="10">عميل مهم</b-form-select-option>
                                <b-form-select-option :value="11">عميل عادي</b-form-select-option>
                            </b-form-select>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="نوع الجهاز">
                            <b-form-select v-model="editModalData.device_type"
                                           @change="getBrands(editModalData.device_type)">
                                <b-form-select-option :value="1">كومبيوتر</b-form-select-option>
                                <b-form-select-option :value="3">لابتوب</b-form-select-option>
                                <b-form-select-option :value="2">موبايل</b-form-select-option>
                            </b-form-select>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="الماركة">
                            <b-form-select v-model="editModalData.brand">
                                <b-form-select-option v-for="(brand, index) in brandData" :key="index"
                                                      :value="brand.name">
                                    {{ brand.name }}
                                </b-form-select-option>
                            </b-form-select>
                        </b-form-group>
                    </b-col>
                    <b-col cols="4">
                        <b-form-group
                            label="نوع الصيانة">
                            <b-form-select v-model="editModalData.proccess_type" required>
                                <b-form-select-option :value="1">هاردوير كمبيوتر</b-form-select-option>
                                <b-form-select-option :value="2">سوفت وير كمبيوتر</b-form-select-option>
                                <b-form-select-option :value="3">1-هاردوير 2-سوفت وير</b-form-select-option>
                                <b-form-select-option :value="4">1-سوفت وير 2-كمبيوتر</b-form-select-option>
                                <b-form-select-option :value="5">موبايل</b-form-select-option>
                            </b-form-select>
                        </b-form-group>
                    </b-col>
                </b-row>
                <b-row>
                    <b-col cols="6">
                        <b-form-group
                            label="الملاحظات">
                            <b-form-textarea
                                id="textarea"
                                rows="3"
                                v-model="editModalData.notice"
                            ></b-form-textarea>
                        </b-form-group>
                    </b-col>
                </b-row>
                <b-row align-v="center">
                    <b-col cols="12">
                        <img v-if="!photoSelected" :src="getPhoto(editModalData.photo)" height="300"
                             :alt="editModalData.brand">
                        <img v-if="photoSelected" :src="editModalData.photo" :alt="editModalData.brand" height="400">
                        <input type="file" @change="onPhotoSelected" class="btn btn-success">
                    </b-col>
                </b-row>
                <b-button class="mt-3" variant="btn bg-danger" @click="closeModal('order-modal')">إلغاء</b-button>
                <b-button class="mt-3" variant="btn bg-blue" @click="updateOrder()" :disabled="isSubmitted">حفظ
                    البيانات
                </b-button>
            </form>
        </b-modal>
        <!-- Update notice device modal -->
        <b-modal id="notice-modal" no-close-on-backdrop hide-footer hide-header-close size="l">
            <h2>ملاحظات بعد الصيانة</h2>
            <hr>
            <h6>العميل : {{ noticeModal.customer }}</h6>
            <div class="form-group">
                <label>ملاحظات</label>
                <textarea rows="3" class="form-control" v-model="noticeModal.doneNotice"></textarea>
            </div>
            <div class="form-group">
                <input type="checkbox" v-model="noticeModal.isVisible">
                <label>الحالة على الشاشة</label>
            </div>
            <button class="btn btn-danger" @click="$bvModal.hide('notice-modal')"> إلغاء</button>
            <button class="btn btn-primary" @click="updateDoneNotice"> حفظ البيانات</button>
        </b-modal>
        <!-- Cancel Order Modal -->
        <b-modal id="order-cancel-modal" no-close-on-backdrop hide-footer hide-header-close size="xl">
            <h2>إلغاء طلب</h2>
            <hr>
            <div v-if="isUpdated" class="alert alert-success">تم تعديل بيانات الطلب بنجاح</div>
            <h5>بيانات العميل</h5>
            <b-row>
                <b-col cols="4">
                    <span>إسم العميل: </span><span>{{ cancelOrderModalData.name }}</span>
                </b-col>
                <b-col cols="4">
                    <span>رقم هاتف العميل: </span><span>{{ cancelOrderModalData.phone }}</span>
                </b-col>
            </b-row>
            <hr>
            <h5>بيانات جهاز العميل</h5>
            <b-row>
                <b-col cols="4">
                    <span>رقم معرف الجهاز: </span><span>{{ cancelOrderModalData.serial }}</span>
                </b-col>
                <b-col cols="3">
                    <span>الشركة المصنعة: </span>{{ cancelOrderModalData.brand }}<span></span>
                </b-col>
                <b-col cols="3">
                    <span>اللون: </span><span>{{ cancelOrderModalData.color }}</span>
                </b-col>
                <b-col cols="2">
                    <span>النوع: </span><span>{{ cancelOrderModalData.device_type }}</span>
                </b-col>

            </b-row>
            <b-row class="mt-4">
                <b-col cols="4">
                    <span>نوع الصيانة المسجلة: </span><span>{{ cancelOrderModalData.proccess_type }}</span>
                </b-col>
                <b-col cols="4">
                    <span>تاريخ الطلب: </span><span>{{ cancelOrderModalData.created_at }}</span>
                </b-col>
                <b-col cols="3">
                    <span>حالة الطلب: </span><span
                    :class="cssColor(Number(cancelOrderModalData.order_state))">{{
                        orderStateTransliation[Number(cancelOrderModalData.order_state) - 1]
                    }}</span>
                </b-col>
                <b-col cols="3" class="mt-4">
                    <span>الموظف المستلم: </span><span>{{ cancelOrderModalData.employee }}</span>
                </b-col>
                <b-col cols="3" class="mt-4">
                    <span class="text-danger">سبب إلغاء الطلب : </span><span>{{ cancelOrderModalData.oldNote }}</span>
                </b-col>
            </b-row>
            <hr>
            <b-row>
                <b-col cols="12">
                    <h5 class="text-warning">سبب إلغاء الطلب</h5>
                </b-col>
                <b-textarea rows="5" v-model="cancelOrderModalData.notes" placeholder="إكتب هنا ...">

                </b-textarea>

            </b-row>
            <b-row class="mt-4">
                <b-button class="mt-3" variant="btn bg-danger" @click="closeModal('order-cancel-modal')">رجوع</b-button>
                <b-button class="mt-3" variant="btn bg-blue" :disabled="isSubmitted"
                          @click="updateCancelOrder(cancelOrderModalData.order_id)">إلغاء الطلب
                </b-button>
            </b-row>
        </b-modal>

        <!-- 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-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 - 1] }}</b> </span>
                    </b-col>
                    <b-col cols="3"><span>الأهمية: <b
                        :class="priorityCssColor(orderDetails.priority)">{{
                            priorityTranslation[orderDetails.priority]
                        }}</b> </span>
                    </b-col>
                    <b-col cols="3"><span>نوع الصيانة: <b>{{
                            processTypeTranslation[orderDetails.proccess_type - 1]
                        }}</b> </span>
                    </b-col>
                    <b-col cols="3"><span>حالة الشاشة: <b>{{
                            orderDetails.isVisible ? 'مفعل' : 'غير مفعل'
                        }}</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>
                    <b-col cols="12" class="m-t-30">
                        <span> صورة الجهاز: </span>
                        <img :src="getPhoto(orderDetails.customer.device.photo)" :alt="orderDetails.customer.name">
                    </b-col>
                </b-row>
            </div>
        </b-modal>
        <!-- finish order modal -->
        <b-modal id="order-finish" hide-footer hide-header-close size="l">
            <h6>تسليم الجهاز للعميل</h6> <span></span>
            <hr>
            <h6 class="d-inline">العميل : </h6><span> {{ orderDoneModal.customer }}</span>
            <span class="d-block text-danger">تكلفة الصيانة: {{ orderDoneModal.cost }}</span>
            <b-form>
                <b-row>
                    <b-col cols="12">
                        <label> الخصم :</label>
                        <b-form-group>
                            <b-form-input type="number" v-model="orderDoneModal.discount" placeholder="الخصم"
                                          @input.native="validateSum" @keypress="validateNumber"></b-form-input>
                        </b-form-group>
                        <p class="text-danger">{{ doneModalMessages.textMessage }}</p>
                        <p class="text-danger">{{ doneModalMessages.sum }}</p>
                    </b-col>
                    <b-col cols="12">
                        <span><b>السعر النهائي بعد الخصم: </b></span><span><b
                        class="text-success">{{ orderDoneModal.cost - orderDoneModal.discount }}</b></span> جنيه
                    </b-col>
                    <b-button class="mt-3" variant="btn bg-danger" @click="$bvModal.hide('order-finish')">إلغاء
                    </b-button>
                    <b-button class="mt-3" variant="btn bg-success" @click="deleviredOrder('default')">تأكيد</b-button>
                </b-row>
            </b-form>
        </b-modal>
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>

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

export default {
    data() {
        return {
            pageState: 0,
            processTypeTranslation: [
                'هاردوير كومبيوتر',
                'سوفت وير كوبيوتر',
                '1.هاردوير 2.سوفت وير كومبيوتر',
                '1.سوفت وير 2.هاردوير كومبيوتر',
                'موبايل',

            ],
            deviceTypeTranslation: ['كومبيوتر', 'موبايل', 'لابتوب'],
            orderStateTransliation: ['قيد الإنتظار',
                'قيد التنفيذ',
                'تمت صيانته',
                'تم التسليم',
                'مرتجع',
                'ملغي',
            ],
            priorityTranslation: [
                '',
                'مهم جداً',
                'متوسط',
                'منخفض',
                'تابع م احمد رمضان',
                'تابع م محمد رافت',
                'تابع م جمال ياسين',
                'تابع م وليد منير',
                'تابع كورسيز زون',
                'عمبل تابع للشركة',
                'عميل مهم',
                'عميل عادي',
            ],
            extTranslation: ['حقيبة', 'ماوس', 'بطارية', 'شاحن'],
            isSubmitted: false,
            tableData: {},
            editModalData: {},
            cancelOrderModalData: {},
            photoSelected: false,
            isUpdated: false,
            options: [
                'قيد الإنتظار',
                'قيد التنفيذ'
            ],
            searchValue: '',
            searchResultData: {},
            orderDetails: null,
            brandData: null,
            orderDoneModal: {},
            doneModalMessages: {textMessage: '', sum: ''},
            noticeModal: {order: null, doneNotice: '', isVisible: true, customer: ''}
        }
    },

    methods: {
        validateSum(event) {
            if (event.target.value >= this.orderDoneModal.cost) {
                event.preventDefault();
                this.orderDoneModal.discount = this.orderDoneModal.cost;
            }
            if (!event.target.value) {
                this.orderDoneModal.discount = 0;
            }
        },
        validateNumber(event) {
            let keyCode = event.keyCode;
            if (keyCode < 48 || keyCode > 57) {
                this.doneModalMessages.textMessage = 'لايمكن أن يكون الخصم نص!'
            } else {
                this.doneModalMessages.textMessage = ''
            }
        },
        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';
                    break;
            }
        },
        priorityCssColor(priority) {
            switch (priority) {
                case 1:
                    return 'text-danger';
                case 2:
                    return 'text-yellow';
                case 3:
                    return 'text-green';
                case 4:
                    return 'text-danger';
                case 5:
                    return 'text-green';
                case 6:
                    return 'text-green';
                case 7:
                    return 'text-green';
                case 8:
                    return 'text-danger';
                case 9:
                    return 'text-danger';
                case 10:
                    return 'text-danger';
                case 11:
                    return 'text-green';
            }
        },
        getResults(page = 1) {
            this.$Progress.start()
            if (this.searchValue === '') {
                axios.post('/rec/api/orders?page=' + page, {pageState: this.pageState})
                    .then(response => {
                        this.tableData = response.data;
                        this.$Progress.finish()
                    })
                    .catch(err => {
                        this.$Progress.fail()

                    })
            } else {
                // Get resultes based on pageState and serachquery
                axios.get(`/rec/api/order/search/${this.searchValue}?page=${page}`)
                    .then(response => {
                        this.searchResultData = response.data
                        this.$Progress.finish()
                    })
                    .catch(err => {
                        this.$Progress.fail()

                    })
            }


        },
        getPhoto(photo) {
            return '/' + photo
        },
        loadOrders() {
            axios.post('/rec/api/orders', {pageState: this.pageState})
                .then(response => {
                    this.tableData = response.data
                })
                .catch(err => {
                })
        },
        closeModal(modal) {
            this.$bvModal.hide(modal)
            this.isUpdated = false
        },
        onPhotoSelected(e) {
            const file = e.target.files[0]
            const types = ['image/jpg', 'image/png', 'image/jpeg']
            if (types.includes(file.type)) {
                if (file.size > 1000000) {
                } else {
                    let reader = new FileReader();
                    reader.onload = event => {
                        this.editModalData.photo = event.target.result
                        this.photoSelected = true
                    }
                    reader.readAsDataURL(file);
                }
            } else {
            }
            console.log(e.target.files[0])
        },
        editOrder(order, type) {
            if (type === 'default') {
                this.editModalData = {
                    id: order.customer.id,
                    name: order.customer.name,
                    phone: order.customer.phone,
                    brand: order.customer.device.brand,
                    color: order.customer.device.color,
                    device_type: order.customer.device.type,
                    serial: order.customer.device.serial,
                    proccess_type: order.proccess_type,
                    notice: order.customer.device.notice,
                    photo: order.customer.device.photo,
                    priority: order.priority
                }
                this.getBrands(this.editModalData.device_type)
            } else {
                this.editModalData = {
                    // customer id
                    id: order.id,
                    name: order.name,
                    phone: order.phone,
                    brand: order.device.brand,
                    color: order.device.color,
                    device_type: order.device.type,
                    serial: order.device.serial,
                    proccess_type: order.order.proccess_type,
                    notice: order.order.notice,
                    photo: order.device.photo,
                    priority: order.order.priority
                }
                this.getBrands(this.editModalData.device_type)
            }

            this.$bvModal.show('order-modal')
        },
        updateOrder() {
            this.isSubmitted = true
            this.$Progress.start()
            if (this.searchValue !== "") {
                // Get resultes based on pageState and serachquery
                axios.put(`/rec/api/orders`, this.editModalData)
                    .then(response => {
                        axios.get(`/rec/api/order/search/${this.searchValue}?page=${this.searchResultData.current_page}`)
                            .then(response => {
                                this.searchResultData = response.data
                                Swal.fire({
                                    title: `تعديل بيانات طلب `,
                                    text: `تم تحديث بيانات الطلب  بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.isUpdated = true
                            })
                            .catch(err => {

                            })
                        this.isSubmitted = false
                    })
                    .catch(err => {
                        Swal.fire({
                            title: `تعديل بيانات طلب `,
                            text: `لايمكن تحديث الطلب بعد إستلامه من موظف الصيانة `,
                            icon: 'error',
                            confirmButtonText: 'حسناً'
                        })
                        this.isSubmitted = false
                        console.log(err.response)
                    })
            } else {
                axios.put(`/rec/api/orders`, this.editModalData)
                    .then(response => {
                        console.log(response.data)
                        axios.post('/rec/api/orders?page=' + this.tableData.current_page)
                            .then(response => {
                                this.tableData = response.data
                                Swal.fire({
                                    title: `تعديل بيانات طلب `,
                                    text: `تم تحديث بيانات الطلب  بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.$Progress.finish()
                                this.isUpdated = true
                            })
                            .catch(err => {

                            })
                        this.isSubmitted = false
                    })
                    .catch(err => {
                        Swal.fire({
                            title: `تعديل بيانات طلب `,
                            text: `يبدو أن الطلب تم إلغاءه أو موظف الصيانه قام باستلامه بالفعل `,
                            icon: 'error',
                            confirmButtonText: 'حسناً'
                        })
                        this.isSubmitted = false
                        this.$Progress.fail()

                    })
            }

        },
        cancelOrder(order, type) {
            this.$bvModal.show('order-cancel-modal')
            if (type === 'default') {
                this.cancelOrderModalData = {
                    order_id: order.id,
                    name: order.customer.name,
                    phone: order.customer.phone,
                    brand: order.customer.device.brand,
                    color: order.customer.device.color,
                    device_type: this.deviceTypeTranslation[(Number(order.customer.device.type) - 1)],
                    serial: order.customer.device.serial,
                    created_at: order.created_at,
                    proccess_type: this.processTypeTranslation[Number(order.proccess_type) - 1],
                    order_state: order.state,
                    employee: order.employee.name,
                    notes: '',
                    oldNote: order.canceled_order ? order.canceled_order.notes : 'لم يتم إلغاء الطلب بعد'

                }
            } else {
                this.cancelOrderModalData = {
                    order_id: order.order.id,
                    name: order.name,
                    phone: order.phone,
                    brand: order.device.brand,
                    color: order.device.color,
                    device_type: this.deviceTypeTranslation[(Number(order.device.type) - 1)],
                    serial: order.device.serial,
                    created_at: order.order.created_at,
                    proccess_type: this.processTypeTranslation[Number(order.order.proccess_type) - 1],
                    order_state: order.order.state,
                    employee: order.order.employee.name,
                    notes: '',
                    oldNote: order.order.canceled_order ? order.order.canceled_order.notes : 'لم يتم إلغاء الطلب بعد'

                }
            }
        },
        updateCancelOrder(order_id) {
            this.isSubmitted = true
            this.$Progress.start()
            // get update page on search mood
            if (this.searchValue !== '') {
                axios.put('/rec/api/order/cancel', {id: order_id, notes: this.cancelOrderModalData.notes})
                    .then(response => {
                        axios.get(`/rec/api/order/search/${this.searchValue}?page=${this.searchResultData.current_page}`)
                            .then(response => {
                                this.searchResultData = response.data
                                Swal.fire({
                                    title: `إلغاء طلب عميل`,
                                    text: `تم إلغاء الطلب  بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.isUpdated = true
                                this.isSubmitted = false
                                this.closeModal('order-cancel-modal')
                                this.$Progress.finish()
                            })
                    })
                    .catch(err => {
                        console.log(typeof err.response.data.errors.notes[0])
                        Swal.fire({
                            title: `إلغاء طلب عميل `,
                            text: typeof err.response.data.errors !== 'undefined' ? err.response.data.errors.notes[0] : err.response.data.message,
                            icon: 'error',
                            confirmButtonText: 'حسناً'
                        })
                        this.$Progress.fail()

                        this.isSubmitted = false
                    })
            } else {
                axios.put('/rec/api/order/cancel', {id: order_id, notes: this.cancelOrderModalData.notes})
                    .then(response => {
                        axios.post('/rec/api/orders?page=' + this.tableData.current_page)
                            .then(response => {
                                this.tableData = response.data
                                Swal.fire({
                                    title: `إلغاء طلب عميل`,
                                    text: `تم إلغاء الطلب  بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.isUpdated = true
                                this.isSubmitted = false
                                this.closeModal('order-cancel-modal')
                                this.$Progress.finish()

                            })
                            .catch(err => {
                                Swal.fire({
                                    title: `إلغاء طلب عميل `,
                                    text: err.response.data.errors.notes[0],
                                    icon: 'error',
                                    confirmButtonText: 'حسناً'
                                })
                                this.$Progress.fail()
                            })

                    })
                    .catch(err => {
                        console.log()

                        this.isSubmitted = false
                        Swal.fire({
                            title: `إلغاء طلب عميل `,
                            text: typeof err.response.data.errors !== 'undefined' ? err.response.data.errors.notes[0] : err.response.data.message,
                            icon: 'error',
                            confirmButtonText: 'حسناً'
                        })
                        this.$Progress.fail()
                    })
            }

        },
        // Get order detail based of filter value
        pageStateResult() {
            this.$Progress.start()
            axios.post('/rec/api/orders', {pageState: this.pageState})
                .then(response => {
                    this.tableData = response.data
                    this.$Progress.finish()
                })
                .catch(err => {
                    this.$Progress.fail()

                })
        },
        // Get searched resulte
        async searchResult(page = 1) {
            this.$Progress.start()
            if (this.searchValue !== "") {
                // Get resultes based on pageState and serachquery
               await axios.get(`/rec/api/order/search/${this.searchValue}?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 done
        orderModal(order, customer, cost) {
            this.orderDoneModal = {
                order,
                customer,
                cost,
                discount: 0
            }
            this.$bvModal.show('order-finish')
        },
        deleviredOrder(type = 'default') {
            // order->id
            if (this.searchValue !== '') {
                Swal.fire({
                    title: `  تسليم جهاز العميل ${this.orderDoneModal.customer}`,
                    showCancelButton: true,
                    confirmButtonText: `نعم`,
                    cancelButtonText: `إلغاء`,
                    confirmButtonColor: 'green'
                }).then((result) => {
                    if (result.isConfirmed) {
                        axios.put('/rec/api/order/delv', this.orderDoneModal)
                            .then(response => {
                                Swal.fire({
                                    title: `تسليم طلب عميل`,
                                    text: `تم تسليم الطلب للعميل ${this.orderDoneModal.customer} بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.$bvModal.hide('order-finish')
                                //update page after delevired state change
                                axios.get(`/rec/api/order/search/${this.searchValue}?page=${this.searchResultData.current_page}`)
                                    .then(response => {
                                        this.searchResultData = response.data
                                    })
                                    .catch(err => {
                                        Swal.fire({
                                            title: `تسليم طلب عميل `,
                                            text: `${err.response.data.message} `,
                                            icon: 'error',
                                            confirmButtonText: 'حسناً'
                                        })
                                    })

                            })
                            .catch(err => {
                                Swal.fire({
                                    title: `تسليم طلب عميل `,
                                    text: `${err.response.data.message} `,
                                    icon: 'error',
                                    confirmButtonText: 'حسناً'
                                })
                            })
                    }
                })
            } else {
                Swal.fire({
                    title: `  تسليم جهاز العميل ${this.orderDoneModal.customer}`,
                    showCancelButton: true,
                    confirmButtonText: `نعم`,
                    cancelButtonText: `إلغاء`,
                    confirmButtonColor: 'green'
                }).then((result) => {
                    if (result.isConfirmed) {
                        axios.put('/rec/api/order/delv', this.orderDoneModal)
                            .then(response => {
                                Swal.fire({
                                    title: `تسليم طلب عميل`,
                                    text: `تم تسليم الطلب للعميل ${this.orderDoneModal.customer} بنجاح `,
                                    icon: 'success',
                                    confirmButtonText: 'حسناً'
                                })
                                this.$bvModal.hide('order-finish')
                                //update page after delevired state change
                                axios.post('/rec/api/orders?page=' + this.tableData.current_page, {pageState: this.pageState})
                                    .then(response => {
                                        this.tableData = response.data
                                    })
                                    .catch(err => {
                                        Swal.fire({
                                            title: `تسليم طلب عميل `,
                                            text: `${err.response.data.message} `,
                                            icon: 'error',
                                            confirmButtonText: 'حسناً'
                                        })
                                    })

                            })
                            .catch(err => {
                                Swal.fire({
                                    title: `تسليم طلب عميل `,
                                    text: `${err.response.data.message} `,
                                    icon: 'error',
                                    confirmButtonText: 'حسناً'
                                })
                            })
                    }
                })
            }
        },

        viewDetails(order) {
            this.$Progress.start()
            this.tableData.data.forEach(item => {
                if (item.id === order) {
                    this.orderDetails = item
                }
            })
            this.$bvModal.show('order-detail-modal')
            this.$Progress.finish()

            // axios.get(`/rec/api/order/${order}`)
            //     .then(response => {
            //         this.$bvModal.show('order-detail-modal')
            //         this.orderDetails = response.data
            //         this.$Progress.finish()
            //     })
            //     .catch(err => {
            //         this.$Progress.fail()
            //     })
        },

        getBrands(type) {
            // if (this.formData.device_type === 'null') {
            //     this.formData.device_type = 'null'
            //     this.formData.brand_name = 'null'
            //     return
            // }
            this.$Progress.start()
            axios.get(`/rec/api/get_brands/${type}`)
                .then(response => {
                    // this.count++
                    this.brandData = response.data
                    this.$Progress.finish()

                }).catch(err => {
                this.$Progress.fail()
            })
        },

        doneNotice(order, customer, isVisible, note) {
            this.noticeModal = {order, isVisible, doneNotice: note, customer}
            this.$bvModal.show('notice-modal')
        },
        updateDoneNotice() {
            if (this.searchValue === "") {
                axios.put('/rec/done_notice', this.noticeModal)
                    .then(response => {
                        this.$bvModal.hide('notice-modal')
                        Swal.fire({
                            title: `تحديث معلومات الطلب`,
                            text: `تم تحديث البيانات بنجاح`,
                            confirmButtonText: `نعم`,
                            confirmButtonColor: 'green'
                        })
                        this.$Progress.start()
                        axios.post('/rec/api/orders?page=' + this.tableData.current_page)
                            .then(response => {
                                this.tableData = response.data
                            })
                        this.$Progress.finish()

                    }).catch(err => {

                })
            } else {
                axios.put('/rec/done_notice', this.noticeModal)
                    .then(response => {
                        this.$bvModal.hide('notice-modal')
                        Swal.fire({
                            title: `تحديث معلومات الطلب`,
                            text: `تم تحديث البيانات بنجاح`,
                            confirmButtonText: `نعم`,
                            confirmButtonColor: 'green'
                        })
                        this.$Progress.start()
                        axios.get(`/rec/api/order/search/${this.searchValue}?page=${this.searchResultData.current_page}`)
                            .then(response => {
                                this.searchResultData = response.data
                            })
                        this.$Progress.finish()

                    }).catch(err => {
                    this.$Progress.fail()
                })
            }
        }
    },
    mounted() {
        this.$Progress.start()
        this.loadOrders()
        this.$Progress.finish()
    }
}

</script>
<style>
button[disabled] {
    cursor: not-allowed;
}

.text-orange {
    color: #1234e0;
}

.text-yellow {
    color: #dae908;
}

.text-green {
    color: #02f644;
}
</style>
