<template>
    <div class="row justify-content-center" @keyup.enter="submitForm">
        <div class="col">
            <div class="row">
                <div class="col col-md-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-grey bg-master-lighter p-t-15 p-b-15 p-l-35 p-r-35">
                                        <div class="absolute bg-master text-white p-t-5 p-b-5 p-r-10 p-l-10 fs-8" style="border-radius: 10px 0px; top: -10px; right: -15px;">Coming Soon</div>
                                        <div class="row justify-content-center hint-text">
                                            <div class="col-8 hint-text">
                                                <img src="data:image/png;base64,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" class="w-100">
                                            </div>
                                        </div>
                                        <div class="row hint-text">
                                            <div class="col hint-text">
                                                <h5 class="no-margin">Walk In</h5>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col">
                            <div class="row m-b-10 text-info">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 bold">Parcel Details</h5>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row">
                                        <div class="col-12 col-md-4">
                                            <validation-wrapper-component selectable class="m-b-15" :validator="$v.parameters.packing_list.type">
                                                <label class="text-primary">Goods Type</label>
                                                <select-component :options="[{'id': 0, 'text': 'Package'}, {'id': 3, 'text': 'Documents'}, {'id': 1, 'text': 'Pallet'}]" v-model="parameters.packing_list.type"></select-component>
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-12 col-md">
                                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.packing_list.description">
                                                <label class="text-primary">Goods Name</label>
                                                <input type="text" class="form-control fs-12" v-model.trim="parameters.packing_list.description">
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12 col-md">
                                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.packing_list.value">
                                                <label class="text-primary">Goods Value</label>
                                                <input type="text" class="form-control fs-12" v-model.trim="parameters.packing_list.value" v-money="money">
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-12 col-md">
                                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.packing_list.weight">
                                                <label class="text-primary">Weight (KG)</label>
                                                <input type="text" class="form-control fs-12" v-model.trim="parameters.packing_list.weight" v-money="weight">
                                            </validation-wrapper-component>
                                        </div>
                                        <div class="col-12 col-md">
                                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.packing_list.quantity">
                                                <label class="text-primary">Parcel Quantity</label>
                                                <input type="text" class="form-control fs-12" v-model.trim="parameters.packing_list.quantity" v-money="integer">
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-50" v-if="itemDone">
                        <div class="col">
                            <div class="row m-b-10 text-info">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 bold">Sender Address</h5>
                                </div>
                            </div>
                            <div class="row justify-content-center" v-if="error">
                                <div class="col">
                                    <small class="text-danger">{{error}}</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row no-margin">
                                        <div class="col">
                                            <list-component style="min-height: 10px;" section="senderAddressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule: company.company_module.id, type: 3}">
                                                <template slot="list" slot-scope="{data}">
                                                    <select-address-component :data="data" section="senderAddressList" :value="parameters.sender_address_id" v-model="parameters.sender_address_id"></select-address-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                    <div class="row m-t-10 m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast no-margin">
                                        <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.sender_address_id, 'b-grey': parameters.sender_address_id}" @click="parameters.sender_address_id = ''">
                                            <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.sender_address_id, 'fa-check-circle': !parameters.sender_address_id, 'text-primary': !parameters.sender_address_id}"></i>
                                                </div>
                                                <div class="col-auto semi-bold">New Address</div>
                                            </div>
                                            <div class="row" v-show="!parameters.sender_address_id">
                                                <div class="col">
                                                    <address-form-component :id="company.company_module.id" section="senderAddressList" @input="parameters.sender_address_id = $event" :type="3"></address-form-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20" v-if="itemDone && parameters.sender_address_id">
                        <div class="col">
                            <div class="row m-b-10 text-info">
                                <div class="col">
                                    <h5 class="m-b-0 m-t-0 bold">Delivery Address</h5>
                                </div>
                            </div>
                            <div class="row justify-content-center" v-if="error">
                                <div class="col">
                                    <small class="text-danger">{{error}}</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="row no-margin">
                                        <div class="col">
                                            <list-component style="min-height: 10px;" section="deliveryAddressList" :emptyListSection=false :endpoint="route('api.address.list')" :options="{per_page: 5, HasMorphCompanyModule: company.company_module.id, type: 2}">
                                                <template slot="list" slot-scope="{data}">
                                                    <select-address-component :data="data" section="deliveryAddressList" :value="parameters.delivery_address_id" v-model="parameters.delivery_address_id"></select-address-component>
                                                </template>
                                            </list-component>
                                        </div>
                                    </div>
                                    <div class="row m-t-10 m-b-10 animate__animated animate__fadeInUpBig animate__delay-1 animate__fast no-margin">
                                        <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': !parameters.delivery_address_id, 'b-grey': parameters.delivery_address_id}" @click="parameters.delivery_address_id = ''">
                                            <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.delivery_address_id, 'fa-check-circle': !parameters.delivery_address_id, 'text-primary': !parameters.delivery_address_id}"></i>
                                                </div>
                                                <div class="col-auto semi-bold">New Address</div>
                                            </div>
                                            <div class="row" v-show="!parameters.delivery_address_id">
                                                <div class="col">
                                                    <address-form-component :id="company.company_module.id" section="deliveryAddressList" @input="parameters.delivery_address_id = $event"></address-form-component>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="coll col-md-4">
                    <div class="row m-b-50">
                        <div class="col bg-master-lightest">
                            <div class="row b-b b-grey m-b-15">
                                <div class="col">
                                    <h6>Order Summary</h6>
                                </div>
                            </div>
                            <div class="row b-b b-grey m-b-15 p-b-15">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <p class="muted no-margin bold">Items</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="row m-l-0 m-r-0 m-t-10" v-if="itemDone">
                                                <div class="col p-t-10 p-b-10 bg-white">
                                                    <div class="row">
                                                        <div class="col">
                                                            <P class="bold no-margin">{{parameters.packing_list.description}}</P>
                                                        </div>
                                                        <div class="col-auto">
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col">
                                                            <p class="muted no-margin">{{ parameters.packing_list.type === '0' ? 'Package' : parameters.packing_list.type === '1' ? 'Pallet' : 'Documents'}} X {{parameters.packing_list.quantity}} - {{parameters.packing_list.weight}}KG</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row" v-if="!itemDone">
                                                <div class="col">
                                                    <p class="muted">There are no items added yet!</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row b-b b-grey m-b-15">
                                <div class="col">
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <div class="row m-b-5">
                                                <div class="col">
                                                    <p class="muted no-margin bold">From</p>
                                                </div>
                                            </div>
                                            <list-component v-if="parameters.sender_address_id" style="min-height: 10px;" section="senderAddressSummary" :emptyListSection=false :endpoint="route('api.address.list')" :options="{id: parameters.sender_address_id}">
                                                <template slot="list" slot-scope="{data}">
                                                    <address-profile-section-component :data="data"></address-profile-section-component>
                                                </template>
                                            </list-component>
                                            <div class="row" v-if="!parameters.sender_address_id">
                                                <div class="col">
                                                    <p class="muted">There are no address selected yet!</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <div class="row m-b-5">
                                                <div class="col">
                                                    <p class="muted no-margin bold">To</p>
                                                </div>
                                            </div>
                                            <list-component v-if="parameters.delivery_address_id" style="min-height: 10px;" section="deliveryAddressSummary" :emptyListSection=false :endpoint="route('api.address.list')" :options="{id: parameters.delivery_address_id}">
                                                <template slot="list" slot-scope="{data}">
                                                    <address-profile-section-component :data="data"></address-profile-section-component>
                                                </template>
                                            </list-component>
                                            <div class="row" v-if="!parameters.delivery_address_id">
                                                <div class="col">
                                                    <p class="muted">There are no address selected yet!</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row b-b b-grey m-b-15 p-b-15">
                                <div class="col">
                                    <h6 class="bold no-margin">Total Weight</h6>
                                </div>
                                <div class="col-auto">
                                    <h6 class="bold no-margin">{{(Math.round((parseFloat(parameters.packing_list.weight.toString().replace(",", "")) * parameters.packing_list.quantity + Number.EPSILON) * 10) / 10).toFixed(1)}}KG</h6>
                                </div>
                            </div>
                            <div class="row m-b-5">
                                <div class="col">
                                    <div class="btn btn-block btn-lg btn-success" v-if="itemDone && parameters.sender_address_id && parameters.delivery_address_id" @click="submit(route('api.delivery.order.create'), 'post', section, true, true)">Create Order</div>
                                </div>
                            </div>
                            <div class="row m-b-15">
                                <div class="col">
                                    <div class="btn btn-block btn-lg btn-default bg-master-lighter no-border" @click="$store.dispatch('toggleSection', {name: 'createOrderForm', status: false})">Cancel</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required, minValue, number } from "vuelidate/lib/validators";
    import formHandler from "../../../general/mixins/formHandler";
    import AddressProfileSectionComponent from "../../addresses/sections/AddressProfileSectionComponent";

    export default {
        components: {AddressProfileSectionComponent},
        props: {
            company: {
                type: Object,
                required: true,
            }
        },
        data() {
            return {
                step: 1,
                error: '',
                parameters : {
                    type: 1,
                    sender_address_id: '',
                    delivery_address_id: '',
                    company_id: this.company.id,
                    packing_list: {
                        description: '',
                        type: '0',
                        value: 0.00,
                        weight: 10,
                        quantity: 1,
                    }
                }
            }
        },
        validations: {
            parameters : {
                packing_list: {
                    description: {},
                    type: {
                        required: required
                    },
                    value: {
                        required: required,
                    },
                    weight: {
                        required: required,
                        minValue: minValue(0.1)
                    },
                    quantity: {
                        required: required,
                        minValue: minValue(1)
                    },
                }
            }
        },
        computed: {
          itemDone(){
              return this.validate();
          }
        },
        methods:{
            createOrder(){
                this.step++;
                this.submit((this.route('api.order.create')), 'post', 'orderListSection', false, false)
            },
            cancelOrder(){
                this.parameters.sender_address_id = '';
                this.parameters.delivery_address_id = '';
                this.$store.dispatch('toggleSection', {name: this.section, status: false})
            },
            successHandler(){
                window.location.reload();
            },
            errorHandler(response){
                this.error = response.message;
                this.step--;
            }
        },
        mixins: [formHandler]
    }
</script>