<template>
    <div class="row m-b-15">
        <div class="col">
            <div class="row bg-white no-margin">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col b-t b-primary" style="border-top-width: 5px;"></div>
                        <div class="col"></div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row m-b-10 align-items-center">
                                <div class="col-auto">
                                    <p class="no-margin all-caps fs-10 lh-10 light">QTY</p>
                                    <h5 class="no-margin text-primary bold">{{item.quantity}}</h5>
                                </div>
                                <div class="col">
                                    <p class="no-margin all-caps fs-10 lh-18 light">Description</p>
                                    <p class="bold m-b-5 fs-12">{{item.description}}</p>
                                </div>
                            </div>
                            <div class="row b-t b-b b-grey m-b-15">
                                <div class="col">
                                    <div class="row">
                                        <div class="col-auto b-r b-grey p-t-10 p-b-10">
                                            <p class="no-margin text-info bold">{{item.width}} <sup>CM</sup></p>
                                            <p class="no-margin all-caps fs-10 light">Width</p>
                                        </div>
                                        <div class="col-auto b-r b-grey p-t-10 p-b-10">
                                            <p class="no-margin text-info bold">{{item.height}} <sup>CM</sup></p>
                                            <p class="no-margin all-caps fs-10 light">Height</p>
                                        </div>
                                        <div class="col-auto b-r b-grey p-t-10 p-b-10">
                                            <p class="no-margin text-info bold">{{item.length}} <sup>CM</sup></p>
                                            <p class="no-margin all-caps fs-10 light">Length</p>
                                        </div>
                                        <div class="col text-right p-t-10 p-b-10">
                                            <p class="no-margin all-caps fs-10 lh-15 light">Total CBM</p>
                                            <h5 class="no-margin text-primary bold">{{(Math.ceil(parseFloat((item.cbm * 1000))) / 1000).toFixed(3)}}</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row b-b b-grey p-b-20 align-items-center">
                                <div class="col">
                                    <div class="row m-b-5">
                                        <div class="col-auto">
                                            <small class="fs-10 all-caps muted">Order Number</small>
                                            <p class="no-margin bold"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></p>
                                        </div>
                                        <div class="col-auto">
                                            <small class="fs-10 all-caps muted">Status</small>
                                            <p class="no-margin bold">{{status}}</p>
                                        </div>
                                        <div class="col-auto" v-if="$store.getters.isAdmin">
                                            <small class="fs-10 all-caps muted">Container</small>
                                            <p class="no-margin bold">{{item.container ? item.container.container_reference : '-'}}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-auto">
                                            <small class="fs-10 all-caps muted">Warehouse</small>
                                            <h6 class="no-margin small">{{item.order.warehouse.name}} {{$store.getters.isAdmin ? item.order.warehouse.reference : ''}}</h6>
                                        </div>
                                        <div class="col-auto">
                                            <small class="fs-10 all-caps muted">Delivery Address</small>
                                            <h6 class="no-margin small">{{item.order.address.reference}} <i class="fa fa-info-circle m-l-5" v-tooltip:right="item.order.address.street_one+' '+(item.order.address.street_two ? item.order.address.street_two : '')+', '+ item.order.address.district.name+', '+item.order.address.post_code+' '+item.order.address.state.name+', '+item.order.address.country.name" ></i></h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row p-t-10 p-b-10" v-if="item.container">
                                <div class="col">
                                    <div class="row" v-if="item.container.transport">
                                        <div class="col-auto p-r-0 p-t-10">
                                            <div class="row" v-for="schedule in item.container.transport.schedule_history" :key="schedule.id">
                                                <div class="col">
                                                    <div class="row justify-content-center">
                                                        <div class="col-auto">
                                                            <i class="fa fa-times fs-15 text-danger"></i>
                                                        </div>
                                                    </div>
                                                    <div class="row justify-content-center">
                                                        <div class="col-auto">
                                                            <div class="b-l b-dashed b-danger" style="height: 35px;"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-auto">
                                                    <i class="fa fa-check fs-15" :class="{'text-primary': status !== 'Ready To Ship', 'muted': status === 'Ready To Ship'}"></i>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-auto">
                                                    <div class="b-l b-dashed " style="height: 35px;" :class="{'b-primary': status === 'Preparing Delivery' || status === 'Delivered', 'b-grey': status !== 'Preparing Delivery' || status !== 'Delivered'}"></div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-auto">
                                                    <i class="fa fa-check fs-15" :class="{'text-primary': item.transport, 'muted': !item.transport}"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col p-l-0">
                                            <div class="row m-b-15" v-for="schedule in item.container.transport.schedule_history" :key="schedule.id">
                                                <div class="col">
                                                    <div class="row no-margin">
                                                        <div class="col-auto">
                                                            <small class="fs-10 all-caps muted">Etd</small>
                                                            <h6 class="no-margin small">{{schedule.etd}}</h6>
                                                        </div>
                                                        <div class="col-auto">
                                                            <small class="fs-10 all-caps muted">Eta</small>
                                                            <h6 class="no-margin small">{{schedule.eta}}</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row m-b-15">
                                                <div class="col">
                                                    <div class="row no-margin">
                                                        <div class="col-auto" v-if="!item.container.transport.schedule_history.length">
                                                            <small class="fs-10 all-caps muted">Etd</small>
                                                            <h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.etd : 'n/a'}}</h6>
                                                        </div>
                                                        <div class="col-auto">
                                                            <small class="fs-10 all-caps muted">{{!item.container.transport.schedule_history.length ? 'Eta' : 'Rescheduled Eta' }}</small>
                                                            <h6 class="no-margin small">{{item.container ? item.container.transport.current_schedule.eta : 'n/a'}}</h6>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <div class="col-auto">
                                                        <small class="fs-10 all-caps muted">Delivery Date</small>
                                                        <h6 class="no-margin small">{{item.transport ? item.transport.current_schedule.eta : 'n/a'}}</h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-25" v-if="item.container">
                        <div class="col"></div>
                        <div class="col b-t b-primary" style="border-top-width: 5px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
          status: {
              required: true,
              type: String
          }
        },
        created(){
            $('[data-toggle="tooltip"]').tooltip()
        },
        data(){
            return {
                expanded: false
            }
        },
        mixins: [componentHandler]
    }
</script>