<template>
    <div class="row">
        <div class="col ">
            <div class="row" v-if="step === 1">
                <div class="col">
                    <div class="row m-b-20">
                        <div class="col">
                            <div class="row m-b-20 text-info">
                                <div class="col text-center">
                                    <h5 class="m-b-0">We currently support two major cities in china.</h5>
                                    <h3 class="m-t-0">Which warehouse is more suitable for you?</h3>
                                </div>
                            </div>
                            <div class="row text-center justify-content-center">
                                <div class="col col-md-3 p-r-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-primary': parameters.warehouse_id === 3, 'b-grey': parameters.warehouse_id !== 3 }"  @click="parameters.warehouse_id = 3">
                                        <div class="row m-b-15 justify-content-center">
                                            <div class="col-8">
                                                <img src="/images/guangzhou-map.png" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin" :class="{ 'text-primary': parameters.warehouse_id === 3, 'semi-bold': parameters.warehouse_id === 3 }">Guangzhou</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col col-md-3 p-l-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" @click="parameters.warehouse_id = 4" :class="{ 'b-primary': parameters.warehouse_id === 4, 'b-grey': parameters.warehouse_id !== 4 }">
                                        <div class="row m-b-15 justify-content-center">
                                            <div class="col-8">
                                                <img src="/images/yiwu-map.png" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin" :class="{ 'text-primary': parameters.warehouse_id === 4, 'semi-bold': parameters.warehouse_id === 4}">Yiwu</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row justify-content-center m-t-15 align-items-center" v-if="parameters.warehouse_id">
                                <div class="col-6">
                                    <div class="row m-t-20">
                                        <div class="col">
<!--                                            <p class="m-b-0 text-danger m-b-15" v-if="parameters.warehouse_id === 3">As the Baiyun district is still under the control management, our warehouse will be temporarily closed until further notice.</p>-->
                                            <p class="text-center">最新运费价格 <a href="https://www.cief-malaysia.com/services-sea-shipping/" class="text-underline" target="_blank">点击 “这里 </a><br>For the latest shipping prices <a href="https://www.cief-malaysia.com/services-sea-shipping/" class="text-underline"  target="_blank">click here</a></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row text-center justify-content-center d-none">
                                <div class="col-8">
                                    <!-- set warning text here -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center">
                        <div class="col col-md-6">
                            <div class="row">
                                <div class="col-auto p-r-0">
                                    <button type="button" class="btn btn-lg btn-default b-rad-none" @click="cancelOrder()">Cancel</button>
                                </div>
                                <div class="col">
                                    <button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="step++" v-if="parameters.warehouse_id">Next</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center" v-if="step === 2">
                <div class="col col-md-10">
                    <div class="row m-b-20">
                        <div class="col">
                            <div class="row m-b-20 text-info">
                                <div class="col text-center">
                                    <h3>Please select the address where you want to receive this order</h3>
                                </div>
                            </div>
                            <div class="row justify-content-center m-b-15" v-if="error">
                                <div class="col-10">
                                    <small class="text-danger">{{error}}</small>
                                </div>
                            </div>
                            <div class="row justify-content-center">
                                <div class="col col-md-10">
                                    <list-component style="min-height: 50px;" section="addressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 10, HasMorphCompanyModule: company.company_module.id}">
                                        <template slot="list" slot-scope="{data}">
                                            <select-address-component :data="data" :value="parameters.address_id" v-model="parameters.address_id"></select-address-component>
                                        </template>
                                    </list-component>
                                    <div class="row m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
                                        <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.address_id, 'b-grey': parameters.address_id}" @click="parameters.address_id = null">
                                            <div class="row align-items-center">
                                                <div class="col-auto p-r-0">
                                                    <i class="fa fs-20 p-t-5" :class="{'fa-circle-o': parameters.address_id, 'fa-check-circle': !parameters.address_id, 'text-primary': !parameters.address_id}"></i>
                                                </div>
                                                <div class="col-auto semi-bold">New Address</div>
                                            </div>
                                            <div class="row" v-show="!parameters.address_id">
                                                <div class="col">
                                                    <address-form-component :id="company.company_module.id" section="addressList" @input="parameters.address_id = $event"></address-form-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center animate__animated animate__fadeInUpBig animate__delay-1 animate__fast">
                        <div class="col col-md-8 no-padding">
                            <div class="row">
                                <div class="col-auto p-r-5">
                                    <button type="button" class="btn btn-lg btn-default b-rad-none" @click="step--">back</button>
                                </div>
                                <div class="col p-l-5">
                                    <button type="button" class="btn btn-lg btn-block btn-primary b-rad-none" @click="createOrder()" v-if="parameters.address_id">Create Order</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center" v-if="step === 3">
                <div class="col-8 p-t-50 p-b-50 text-center">
                    <div class="row justify-content-center m-b-35">
                        <div class="col-6">
                            <img src="/images/qr.svg" class="w-25 animate__animated animate__flip animate__infinite animate__slower">
                        </div>
                    </div>
                    <loading-component class="m-l-0" style="height: 50px; top: 0;" color="info"></loading-component>
                    <div class="row" v-if="!company.last_order">
                        <div class="col">
                            <h4 class="text-info">We are generating your first <b>QR code</b></h4>
                            <p>Please wait...</p>
                        </div>
                    </div>
                    <div class="row" v-if="company.last_order">
                        <div class="col">
                            <h4 class="text-info">We are generating the <b>QR code</b> for you to <b>send to your supplier</b> to print and <b>stick to your packages</b>, this QR code is required for us to identify your packages when they arrives at our warehouse!</h4>
                            <p>Please wait...</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center" v-if="step === 4">
                <div class="col-8 p-t-50 p-b-50 text-center">
                    <div class="row justify-content-center">
                        <div class="col-6">
                            <img src="/images/qr.svg" class="w-50">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props: {
            company: {
                type: Object,
                required: true,
            }
        },
        data() {
            return {
                section: 'createOrderForm',
                step: 1,
                error: '',
                parameters : {
                    warehouse_id: '',
                    address_id: '',
                    company_id: this.company.id,
                }
            }
        },
        methods:{
            createOrder(){
                this.step++;
                this.submit((this.route('api.order.create')), 'post', 'orderListSection', false, false)
            },
            cancelOrder(){
                this.parameters.warehouse_id = '';
                this.parameters.address_id = '';
                this.$store.dispatch('toggleSection', {name: this.section, status: false})
            },
            successHandler(response){
                if(!this.company.last_order) {
                    window.location.reload();
                    return;
                }

                setTimeout(function(){
                    window.location.href = this.route('order.show', response.payload.data.reference)
                }, 5000);

            },
            errorHandler(response){
                alert(response.message)
                this.error = response.message;
                this.step--;
            }
        }
    }
</script>
