<template>
    <div class="row">
        <div class="col no-margin">
            <loading-component style="height: 200px; top: 0;" key="1" color="success" v-show="$store.getters.isLoading(section)"></loading-component>
            <div class="row align-content-center h-100" v-if="step === 1">
                <div class="col-8">
                    <div class="row m-b-20">
                        <div class="col-12 col-md-7">
                            <div class="row m-b-10 text-info">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 bold">Service Type</h5>
                                </div>
                            </div>
                            <div class="row text-center justify-content-center">
                                <div class="col p-l-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-info': parameters.type === 1, 'b-grey': parameters.type !== 1 }" @click="parameters.type = 1">
                                        <div class="row justify-content-center">
                                            <div class="col-8">
                                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAABmJLR0QA/wD/AP+gvaeTAAAEJklEQVR4nO3aS6hVVRzH8c8tsUKvjWoQBGGPSZFGg0ot8+YgMBoKEQhBBBFNokFkUhOzGjSoUVnUMIugUQ8pe4gVRhFISpMI7UpGpuiN3vc0WOt0ttt93nufvW93fWFxNov9/6///p211l7rvzaJRCKRSCQSiUQikUgkEolEIpFIJBY5S/E0jqJVUZnDAWzHpZN5rMnxlOqEKyqncM9EnmxCzAoPdtOQdm1BBmEZbsbr0WYe9w7ZXmMZRogy7O4XBPwT60awbxyTFpAw57bwIy4Z0UdjqEPAc/FetP9UeJEtWOoQEC7Gkejj2TH81E5dAsIN+D362Tymr9qoU0B4IPo5jatL8Ddx6hYQXom+vsWFJfmcGE0Q8AJ8Gf29hamS/E6EJggIl+F49PlwiX4rpykCwp3CIvsvzJTpeEr5wS4EvsP7sbwrvGhGYjEK+Kuwh27zG/ZidywHhnVYxZAhBPXJBO0GZSk2YIfwgvnHmVmdo3gVdwuL8r5UJeBC4SLcJSx52hmkdpnHV0JqbgbnFTlY7ALmuQYP4R1huGcF/QlbsSRrUJScPIzbxwxknzAcx7XbWxDfKH5H4XxsxDP4OtP+m0LigoLgsiKOQ1lzYJGAVc6RvVgrpMpa2NKuLBrCaVh3Z7OgzWftiiRgbzZhP/5w9hkMqhvCZc2BdbJJ74Ms53QxPIL7xmx83mi9eFS7Kngi/j4iLGGmFCQk0nDtzilBm+W5+r49MBHYH38f1ON8paoe+H+YA2fwtxHmwG5sxE4hwzuHk8Lm+0XhLDY7PzRxDszHPxevd+K2gvv34A58IZw3FzJID7xc8YI2X3YLCcymMWj8H2PlAP7O0KyfgOuEntYSVuGPYpWQElqG1cL+sL1CP4HrB32yCTBs/Cexpo/PgQW8ShCkhdec/TbKMo1d8d6f8bn658BR4/8FV3SJZ5+OZqvoLuCU0KXbjQ9yIDOl86FPC28PYJOnrHzguPHv6RJPdir4nu4C3qrT7Xv9c3mmcSzarh/CrmzKiP+WHve10Or1Fm5nG54T3lZtsh9OzgqZ3ewa6TSez/mog4nF387C5ifOg7H+2lx90YeTT+buWR3rDw4SQI6y5sAy4v+mh///Ru6OAofZku/+WcHXxuvZ3D3TfXxOslQZ/+EleDwabTHcN3XZSbmqhW+VjBt/34RLtyFQ1GO35+4ZZAhUTe3xvxydbM3VL41BzOKH2Hh+o70t2r40TgBjUnv863WWAdND2K0QTq9awgfgddGI+D+KjnYZfCH6RrT5YNzGS6D2+K8UtjUtYYXe659ckWn8uLCBr5tGxL9GZz95DI/hOmF5sDxeb9Pp9idwY1mNl0Aj4l+pMxx6lQ81M53VmPhn8AIO6SQkD8W6DVU2XBILPf5EIpFIJBKJRCKRSCQSiUQiUSP/AlkkSdKJddQ3AAAAAElFTkSuQmCC" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin" :class="{ 'text-info': parameters.type === 1, 'semi-bold': parameters.type === 1}">Pick Up</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-r-5">
                                    <div class="b-a b-thick p-t-15 p-b-15 p-l-35 p-r-35 pointer" :class="{ 'b-info': parameters.type === 2, 'b-grey': parameters.type !== 2 }" @click="parameters.type = 2">
                                        <div class="row justify-content-center">
                                            <div class="col-8">
                                                <img src="data:image/png;base64,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" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h5 class="no-margin"></h5>
                                                <h5 class="no-margin" :class="{ 'text-info': parameters.type === 2, 'semi-bold': parameters.type === 2}">Drop Off</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-20" v-if="parameters.type !== ''">
                        <div class="col bg-master-lightest p-t-15">
                            <div class="row m-b-20 text-info">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 bold">Packing list</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component selectable class="m-b-15" :validator="$v.productType">
                                        <label>Product Type</label>
                                        <selectable-component :endpoint="route('api.segment.air_shipment.price.list')" :section="section" valueColumn="details" :labelColumn="['name']" v-model="productType"></selectable-component>
                                    </validation-wrapper-component>
                                </div>
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.productDesc">
                                        <label>Product Description</label>
                                        <input class="form-control" v-model="parameters.product.productDesc">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.quantity">
                                        <label>Quantity</label>
                                        <input class="form-control" type="number" v-model="parameters.product.quantity">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.totalWeight">
                                        <label>Total Weight (KG)</label>
                                        <input type="text" class="form-control fs-12" v-model.trim="parameters.product.totalWeight" v-money="weight">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col" v-if="productTypeArray['hasGram'] === 'true'">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.gram">
                                        <label>Gram</label>
                                        <input class="form-control" v-model="parameters.product.gram">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <div class="row" v-if="productTypeArray['hasDimensionCharges'] === 'true'">
                                <div class="col-4">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.width">
                                        <label>Width</label>
                                        <input class="form-control" v-model="parameters.product.width">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col-4">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.length">
                                        <label>Length</label>
                                        <input class="form-control" v-model="parameters.product.length">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col-4">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.product.height">
                                        <label>Height</label>
                                        <input class="form-control" v-model="parameters.product.height">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <p v-if="productTypeArray['isProhibited'] === 'true'" class="text-danger text-center">This item is blacklisted to ship to bangladish. <span class="text-underline text-complete">Black listed items list</span></p>
                            <div class="row">
                                <div class="col">
                                    <div class="btn btn-complete w-100 m-b-15 padding-10" :class="{'disabled': productTypeArray['isProhibited'] === 'true', 'not-allowed': productTypeArray['isProhibited'] === 'true'}" @click="addProduct()">Add Product</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="margin-15 padding-15 bg-master-lightest">
                        <p class="m-b-15 bold fs-18">Order Summary</p>
                        <p class="m-b-15 bold fs-15">Products</p>
                        <div class="row" v-if="productList.length != 0">
                            <div class="col">
                                <div class="row m-l-0 m-r-0 m-b-10" v-for="(cartItem, index) in productList">
                                    <div class="col p-t-10 p-b-10 bg-white">
                                        <div class="row">
                                            <div class="col">
                                                <p class="bold no-margin">{{cartItem.productDesc}}</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <p class="muted no-margin">{{ cartItem.quantity }} &nbsp; X &nbsp; {{ cartItem.productType }} - {{ cartItem.totalWeight }}KG</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-auto bg-white pointer" @click="removeElement(index)">
                                        <div class="row h-100 align-content-center justify-content-center">
                                            <div class="col">
                                                <i class="fa fa-times fs-12"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row m-l-0 m-r-0 m-b-10 b-a rounded b-primary-light" v-if="parameters.product.productDesc != '' || productType != ''">
                            <div class="col p-t-10 p-b-10 bg-white">
                                <div class="row">
                                    <div class="col">
                                        <p class="bold no-margin">{{parameters.product.productDesc}}</p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <p class="muted no-margin">{{parameters.product.quantity}} &nbsp; X &nbsp; {{ productTypeArray['name'] }} - {{ parameters.product.totalWeight }}KG</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" v-if="parameters.product.productDesc == '' && productType == '' && productList.length == 0">
                            <div class="col">
                                <p class="muted">There are no items added yet!</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="bold fs-15">Quotation</p>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Total Weight</div>
                                    <div class="col">{{ parameters.totalWeight }} kg</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Service Type</div>
                                    <div class="col">{{ parameters.type === 1 ? 'Pick Up' : parameters.type === 2 ? 'Drop Off' : '' }}</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Price Per kg</div>
                                    <div class="col">{{ parameters.pricePerKg }} RM</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Shipping Fee</div>
                                    <div class="col">{{ parameters.totalShipping }} RM</div>
                                </div>
                                <div class="row justify-content-between">
                                    <div class="col">Special Product Tax</div>
                                    <div class="col">{{ parameters.totalTax }} RM</div>
                                </div>
                                <p class="text-complete text-underline pointer">What is this cost?</p>
                                 <div class="row m-t-15 justify-content-between">
                                    <div class="col fs-20 bold">Total</div>
                                    <div class="col fs-20 bold">{{ parameters.totalCombine }} RM</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-15">
                        <div class="col">
                            <div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="step === 2">
                <div class="col">
                    <new-registration-form-component section="loginSection"></new-registration-form-component>
                    <div class="row m-t-15">
                        <div class="col-auto">
                            <div class="btn btn-default w-100 m-b-15 padding-10" @click="step--">back</div>
                        </div>
                        <div class="col-auto">
                            <div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="step === 3">
                <div class="col-8">
                    <div class="row m-t-20">
                        <div class="col bg-master-lightest p-t-15">
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.pickUpAddress">
                                        <label>Pick up address</label>
                                        <input class="form-control" v-model="parameters.pickUpAddress">
                                    </validation-wrapper-component>
                                </div>
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.pickUpDate">
                                        <label>Pick up date</label>
                                        <date-picker-component v-model.lazy="parameters.pickUpDate"></date-picker-component>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.deliveryAddress">
                                        <label>Delivery address</label>
                                        <input class="form-control" v-model="parameters.deliveryAddress">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-20">
                        <div class="col">
                            <p>Addon Wrapping service</p>
                            <div class="row m-l-5">
                                <div class="col-4 p-r-10 p-l-0">
                                    <div class="padding-20 bg-master-light text-center pointer" @click="parameters.wrappingService = 'Pick Up' " :class="{'bg-complete-light': parameters.wrappingService === 'Pick Up', 'text-white': parameters.wrappingService === 'Pick Up',}">
                                        Wrap my goods
                                    </div>
                                </div>
                                <div class="col-4 p-l-10">
                                    <div class="padding-20 bg-master-light text-center pointer" @click="parameters.wrappingService = 'Drop Off'" :class="{'bg-complete-light': parameters.wrappingService === 'Drop Off', 'text-white': parameters.wrappingService === 'Drop Off',}">
                                        No Thanks
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-4">
                    <div class="margin-15 padding-15 bg-master-lightest">
                        <p class="m-b-15 bold fs-18">Order Summary</p>
                        <div class="row m-b-15">
                            <div class="col">
                                <p class="bold fs-15">Products</p>
                                <p>1x product1 </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <p class="bold fs-15">Quotation</p>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Total Weight</div>
                                    <div class="col">15 kg</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Service Type</div>
                                    <div class="col">{{ parameters.servicetype }}</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Price Per kg</div>
                                    <div class="col">26 RM</div>
                                </div>
                                <div class="row justify-content-between m-b-5">
                                    <div class="col">Shipping Fee</div>
                                    <div class="col">200 RM</div>
                                </div>
                                <div class="row justify-content-between">
                                    <div class="col">Special Product Tax</div>
                                    <div class="col">50 RM</div>
                                </div>
                                <p class="text-complete text-underline pointer">What is this cost?</p>
                                 <div class="row m-t-15 justify-content-between">
                                    <div class="col fs-20 bold">Total</div>
                                    <div class="col fs-20 bold">50 RM</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-15">
                        <div class="col">
                            <div class="btn btn-success w-100 m-b-15 padding-10" @click="step++">Procced Next</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import { required } from "vuelidate/lib/validators";
    import { VMoney } from 'v-money'


    export default {
        data(){
            return {
                section: 'createDelvieryOrderSectionComponent',
                weight: {decimal: '.',thousands: ',', precision: 1},
                step: 1,
                productType: '',
                productList: [],
                parameters : {
                    type: '',

                    product: {
                        productType: '',
                        productDesc: '',
                        quantity: '1',
                        totalWeight: 10,
                        gram: '',  
                        width: '',
                        length: '',
                        height: '',
                    },

                    pickUpAddress: '',  
                    pickUpDate: '',  
                    deliveryAddress: '',  
                    wrappingService: '', 

                    tax: 0, 
                    totalWeight: 0,
                    pricePerKg: 0,
                    totalShipping: 0,
                    totalTax: 0,
                    totalCombine: 0,
                }
            }
        },
        validations: {
            productType: {  },
            parameters: {
                product: {
                    productDesc: {  },
                    quantity: {  },
                    totalWeight: {  },
                    gram: {  },
                    width: {  },
                    length: {  },
                    height: {  },
                },
                
                pickUpAddress: {  },  
                pickUpDate: {  },  
                deliveryAddress: {  },  
                wrappingService: {  }, 
            }
        },
        computed: {
            productTypeArray() {
                return this.productType === '' ? '' : JSON.parse(this.productType);
            },
        },
        methods: {
            addProduct() {
                // todo: change this to vuelidate
                if (this.parameters.product.productDesc != '' && this.productType != '') {

                    // add weight 
                    this.parameters.totalWeight += parseInt(this.parameters.product.totalWeight);
                    
                    // has tax 
                    if (this.productTypeArray['tax']) {
                        this.parameters.totalTax += parseInt(this.productTypeArray['tax']);
                    }

                    var itemShippingFee = 0;
                        
                    // pricePerKg * kg 
                    if (this.productTypeArray['pricePerKg']) {

                        // add pricePerKg 
                        this.parameters.pricePerKg += parseInt(this.productTypeArray['pricePerKg']);

                        itemShippingFee += parseInt(this.productTypeArray['pricePerKg']) * parseInt(this.parameters.product.totalWeight);
                    }

                    // pricePerPcs * quantity 
                    if (this.productTypeArray['pricePerPcs']) {
                        itemShippingFee += parseInt(this.productTypeArray['pricePerPcs']) * this.parameters.product.quantity;
                    }

                    this.productList.push(
                        {
                            productType: this.productTypeArray['name'],
                            productDesc: this.parameters.product.productDesc,
                            quantity: this.parameters.product.quantity,
                            gram: '',  
                            width: '',
                            length: '',
                            height: '',

                            totalWeight: this.parameters.product.totalWeight,
                            itemTax: this.productTypeArray['tax'],
                            pricePerKg: this.productTypeArray['pricePerKg'],
                            itemShippingFee: itemShippingFee,
                        }
                    );

                    this.parameters.totalShipping += itemShippingFee;
                    this.parameters.totalCombine += ( itemShippingFee + parseInt(this.productTypeArray['tax'] == '' ? 0 : this.productTypeArray['tax']) );

                    this.parameters.product.productDesc = '' ;
                    this.productType = '';
                }
            }, 
            removeElement(index) {
                var itemRemoved = this.productList.splice(index, 1)[0];

                // remove weight 
                this.parameters.totalWeight -= parseInt(itemRemoved['totalWeight']);

                // has tax 
                if (itemRemoved['itemTax']) {
                    this.parameters.totalTax -= parseInt(itemRemoved['itemTax']);
                }

                if (itemRemoved['itemShippingFee']) {
                    this.parameters.totalShipping -= parseInt(itemRemoved['itemShippingFee']);
                }

                // remove pricePerKg 
                if (itemRemoved['pricePerKg']) {
                    this.parameters.pricePerKg -= parseInt(itemRemoved['pricePerKg']);
                }

                this.parameters.totalCombine -= ( parseInt(itemRemoved['itemShippingFee']) + parseInt(itemRemoved['itemTax'] == '' ? 0 : parseInt(itemRemoved['itemTax'])) );

            }
        },
        mixins: [componentHandler],
        directives: {money: VMoney}
    }
</script>
