<template>
    <div>
        <h2> إضافة طلب جديد </h2>
        <hr>
<!--        <button class="btn btn-success" @click="print">طباعة وصل</button>-->
        <p>----معلومات الزبون----</p>
        <div>
            <div v-show="printedData" class="alert alert-success">
                تم إضافة طلب العميل
                {{formData.name}}
                بنجاح
            </div>
        </div>
        <div v-if="formErrors" class="alert alert-danger" v-for="(formerr, index) in formErrors" :key="index">
            <p v-for="(v, index) in formerr" :key="index">{{ v}}</p>
        </div>
        <div class="row clearfix">
            <div class="col-md-4">
                <div class="form-group">
                    <label>إسم الزيون</label>
                    <input type="text" v-model="formData.name" class="form-control">
                </div>
<!--                <p v-if="formErrors.name" class="text-danger">{{formErrors.name[0]}}</p>-->
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>رقم هاتف الزبون</label>
                    <input type="text" v-model="formData.phone" name="phone" class="form-control" required autocomplete="off">
                </div>
<!--                <p v-if="formErrors.phone" class="text-danger">{{formErrors.phone[0]}}</p>-->
            </div>
        </div>

        <p class="m-t-20">----معلومات الجهاز----</p>
        <div class="row clearfix">
            <div class="col-md-4">
                <div class="form-group">
                    <label>لون الجهاز</label>
                    <input type="text" v-model="formData.color" class="form-control">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>الأهمية</label>
                    <select v-model="formData.priority" class="form-control">
                        <option value=null>--إختيار الأهمية--</option>
                        <option value="1">مهم</option>
                        <option value="3">متوسط</option>
                        <option value="2">منخفض</option>
                        <option value="4">تابع م احمد رمضان</option>
                        <option value="5">تابع م محمد رافت</option>
                        <option value="6">تابع م جمال ياسين</option>
                        <option value="7">تابع م وليد منير</option>
                        <option value="8">تابع كورسيز زون</option>
                        <option value="9">عمبل تابع للشركة</option>
                        <option value="10">عميل مهم</option>
                        <option value="11">عميل عادي</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-4">
                <div class="form-group">
                    <label>نوع الجهاز</label>
                    <select v-model="formData.device_type" class="form-control"
                            @change="getBrands(formData.device_type)">
                        <option value=null>--تحديد النوع--</option>
                        <option value="1">كومبيوتر</option>
                        <option value="3">لابتوب</option>
                        <option value="2">هاتف</option>
                    </select>
<!--                    <p v-if="formErrors.device_type" class="text-danger">{{formErrors.device_type[0]}}</p>-->
                </div>
            </div>


            <div class="col-md-4">
                <label>الماركة</label>

                <div class="form-group" v-if="!count">
                    <select class="form-control show-tick" :disabled="!count">
                        <option>--تحديد الماركة--</option>
                    </select>
                </div>
                <div class="form-group">
                    <select v-if="brandData" v-model="formData.brand" class="form-control show-tick"
                            :disabled="formData.device_type ==='null'">
                        <b-form-select-option :value=null>--تحديد الماركة--</b-form-select-option>

                        <b-form-select-option v-for="(brand, index) in brandData" :key="index" :value="brand.name">
                            {{ brand.name }}
                        </b-form-select-option>
                    </select>
<!--                    <p v-if="formErrors.brand" class="text-danger"> {{formErrors.brand[0]}} </p>-->

                </div>
            </div>

            <div class="col-md-4">
                <div class="form-group">
                    <label for="proccess-type">نوع الصيانة</label>
                    <select id="proccess-type" v-model="formData.proccess_type" class="form-control show-tick">
                        <option>--تحديد النوع--</option>
                        <option value="1">هاردوير كومبيوتر</option>
                        <option value="2">سوفت وير كومبيوتر</option>
                        <option value="3">1-هاردوير 2-سوفت وير</option>
                        <option value="4">1-سوفت وير 2-هاردوير</option>
                        <option value="5">موبايل</option>
                    </select>
<!--                    <p v-if="formErrors.proccess_type" class="text-danger"> {{formErrors.proccess_type[0]}} </p>-->
                </div>
            </div>

        </div>

        <div class="row clearfix">
            <div class="col-md-6">
                <div class="form-group">
                    <label>المرفقات</label>
                    <b-form-checkbox-group
                        id="checkbox-group-1"
                        v-model="formData.extentions"
                        :options="options"
                        name="flavour-1"
                    ></b-form-checkbox-group>
                </div>
            </div>
        </div>

        <!-- -->
        <div class="row clearfix">
            <div class="col-md-6">
                <div class="form-group">
                    <label>ملاحظات</label>
                    <textarea v-model="formData.notice" class="form-control no-resize" placeholder="ملاحظات الجهاز"
                              rows="4"></textarea>
                </div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-6">
                <div class="form-group">
                    <label>صورة مرفقة</label>
                    <input type="file" class="form-control" @change="onPhotoSelected">
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <img v-if="formData.photo" :src="formData.photo" :alt="formData.name" width="200" height="150">
                </div>
            </div>
        </div>
        <button @click="storeNewOrder" class="btn bg-blue mb-5 mt-2" :disabled="isSubmitted">حفظ البيانات</button>
        <vue-progress-bar></vue-progress-bar>
    </div>
</template>
<script>
import axios from 'axios'
import Swal from "sweetalert2";
export default {
    data() {
        return {
            isSubmitted: false,
            brandData: null,
            count: 0,
            formData: {
                name: null,
                phone: null,
                device_type: null,
                brand: null,
                color: null,
                proccess_type: null,
                notice: 'لايوجد',
                photo: null,
                extentions: []
            },
            formErrors:null,
            printedData:null,
            options: [
                { text: 'حقيبة', value: '0' },
                { text: 'ماوس', value: '1' },
                { text: 'بطارية', value: '2' },
                { text: 'شاحن', value: '3' }
            ]
        }
    },
    methods: {
        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()
            })
        },
        onPhotoSelected(e) {
            const file = e.target.files[0]
            const types = ['image/jpg', 'image/png', 'image/jpeg']
            if (types.includes(file.type)) {
                let reader = new FileReader();
                reader.onload = event => {
                    this.formData.photo = event.target.result
                }
                reader.readAsDataURL(file);
            } else {
                // this.$noty.error(`The file must be jpg png jpeg`)
            }
        },
        storeNewOrder() {
            this.isSubmitted=true
            this.$Progress.start()
            axios.post(`/rec/new_order`, this.formData)
            .then(response => {
                Swal.fire({
                    title: `إضافة طلب جديد `,
                    text: `تم إضافة طلب العميل ${this.formData.name} بنجاح `,
                    icon: 'success',
                    // confirmButtonText: 'حسناً'
                })
                this.printedData = response.data
                this.isSubmitted = false
                this.formErrors = null
                this.$Progress.finish()
                this.printedData.extentions = this.printedData.extentions.length === 0 ? 7 : this.printedData.extentions


                // redirect to print page
                setTimeout(() => {
                    window.open(
                        `/rec/print?
                        name=${this.printedData.name}&
                        phone=${this.printedData.phone}&
                        type=${this.printedData.device_type}&
                        brand=${this.printedData.brand}&
                        serial=${this.printedData.serial}&
                        extentions=${this.printedData.extentions}&
                        note=${this.printedData.note}&
                        date=${this.printedData.created_at}
                        `,
                        '_blank' // <- This is what makes it open in a new window.
                    );
                }, 1000);
                setTimeout(() => {
                    // location.reload()
                }, 3000);

            }).catch(err =>{
                this.formErrors = err.response.data.errors
                Swal.fire({
                    title: `إضافة طلب جديد `,
                    text: `حدث خطأ أثناء عملية حفظ الطلب يرجى التأكد من ملئ جميع الحقول`,
                    icon: 'error',
                    confirmButtonText: 'حسناً'
                })
                this.isSubmitted = false
                this.$Progress.fail()
            })
        },

    },
}
</script>

<style scoped>
    @media print {
        h2, hr, .row, .bg-blue, p{
            display: none!important;
        }
        .data{

        }
    }
</style>
