<template>
    <div class="row">
        <div class="col">
            <div class="row" v-if="container">
                <div class="col">
                    <div class="row align-items-center m-t-10">
                        <div class="col bg-master-lightest rounded padding-20 m-l-10 m-r-10">
                            <div class="row d-flex justify-content-between align-items-center">
                                <div class="col b-r">
                                    <div class="row">
                                        <div class="col">
                                            <p class="m-b-0 large-text normal m-b-10">Container Number</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p class="m-t-0 m-b-0 fs-20 bold">{{ container.container_reference }}</p>
                                            <p class="m-t-0 m-b-0 small-text">{{ container.container_number }}</p>
                                            <p class="m-t-0 m-b-0 small-text">seal number</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">ETD</p>
                                            <p class="small-text m-t-0">{{ container.transport.current_schedule.etd }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">ETA</p>
                                            <p class="small-text m-t-0">{{ container.transport.current_schedule.eta }} <a class="b-rad-none all-caps requestModal" data-type="rescheduleDate"><i class="fa fa-edit pointer fa-fw fs-15 m-l-5"></i></a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">Location</p>
                                            <p class="small-text m-t-0">-tbc-</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">Destination</p>
                                            <p class="small-text m-t-0">-tbc-</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">Container Type</p>
                                            <p class="small-text m-t-0">{{ container.container_specification.name }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <p class="fs-10 bold m-b-0">Owner</p>
                                            <p class="small-text m-t-0">-tbc-</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-t-10 m-b-50">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row h-100">
                                        <div class="col">
                                            <h5 class="m-b-5 large-text bold l-20">Tracking:</h5>
                                            <div class="row padding-10">
                                                <div class="col rounded bg-master-lighter padding-15">
                                                    <li class="m-t-10">
                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
                                                            data-type="containerDepature">Container Departure</a>
                                                    </li>
                                                    <li class="m-t-10">
                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
                                                            data-type="containerArrival">Arrival Date</a>
                                                    </li>
                                                    <li class="m-t-10">
                                                        <a class="btn btn-sm btn-primary b-rad-none all-caps requestModal"
                                                            data-type="containerUnpacking">Date of Unpacking</a>
                                                    </li>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
                        type="rescheduleDate">
                        <reschedule-date-form-component :section="section"
                            :data="container"></reschedule-date-form-component>
                    </modal-component>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
                        type="containerDepature">
                        <container-depature-form-component :section="section"
                            :data="container"></container-depature-form-component>
                    </modal-component>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
                        type="containerArrival">
                        <container-arrival-form-component :section="section"
                            :data="container"></container-arrival-form-component>
                    </modal-component>
                    <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in"
                        type="containerUnpacking">
                        <container-unpacking-form-container :section="section"
                            :data="container"></container-unpacking-form-container>
                    </modal-component>

                    <div class="row m-t-10">
                        <div class="col">
                            <div class="row">
                                <div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Comments' }, { 'b-b': tabShowing === 'Comments' }]" @click="tabShowing = 'Comments'">
                                    <h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Comments' }]"> Comments</h5>
                                </div>
                                <!-- <div class="col-auto padding-5 m-l-15 m-r-15 pointer" :class="[{ 'text-primary': tabShowing === 'Timeline' }, { 'b-b': tabShowing === 'Timeline' }]" @click="tabShowing = 'Timeline'">
                                    <h5 class="large-text bold l-20" :class="[{ 'text-primary': tabShowing === 'Timeline' }]"> Activity Timeline</h5>
                                </div> -->
                            </div>
                            <div class="row p-l-10 p-r-10">
                                <div class="col rounded padding-15">
                                    <div class="row" v-if="tabShowing === 'Comments'">
                                        <div class="col">
                                            <div class="row" v-for="remarks in container.remarks">
                                                <div class="col">
                                                    <container-comment-component :section="section" :data="remarks"></container-comment-component>
                                                </div>
                                            </div>
                                            <container-comment-form-component :section="section" :id="container.id"></container-comment-form-component>
                                        </div>
                                    </div>
                                    <div class="row" v-if="tabShowing === 'Timeline'">
                                        <div class="col">
                                            <div class="row align-items-center justify-content-center p-t-50 p-b-50">
                                                <div class="col-10">
                                                    <div class="row align-items-center justify-content-center  hint-text">
                                                        <div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
                                                    </div>
                                                    <div class="row text-center">
                                                        <div class="col">
                                                            <div class="row m-t-20">
                                                                <div class="col">
                                                                    <p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
                                                                </div>
                                                            </div>
                                                            <div class="row m-t-5 align-items-center justify-content-center hide">
                                                                <div class="col">
                                                                    <small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found, Try adjusting your filters to find what you are looking for.</small>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        id: {
            type: Number,
            required: true,
        }
    },
    data() {
        return {
            section: 'containerPofileSection',
            isLoading: true,
            container: null,
            expanded: false,
            CBMcapacity: 30,
            // tabShowing: 'Timeline',
            tabShowing: 'Comments',
            selectAllPackingList: false,
            selectedPackageList: [],
            deleteCommentId: '',
        }
    },
    computed: {
        pendingQueue() {
            return this.$store.getters.isInCompleteQueue(this.section);
        },
        loadedCBM() {
            return (Math.ceil((this.container.packing_lists.reduce((total, obj) => total + obj.packages.reduce((total, obj) => obj.cbm + total, 0), 0)) * 1000) / 1000).toFixed(3)
        },
    },
    watch: {
        pendingQueue(inComplete) {
            if (inComplete) {
                this.fetchCompany();
            }
        }
    },
    created() {
        this.$store.dispatch('updateListQueue', { 'name': this.section });
    },
    methods: {
        fetchCompany() {
            this.isLoading = true;
            this.submit(route('api.packing_list.container.show', this.id) + '?with_packing_list_data=0', 'get', this.section, false, false)
        },
        successHandler(response) {
            this.$store.dispatch('completeList', { 'name': this.section, 'data': [] });
            this.isLoading = false;
            this.container = response.payload.data;
        },
    }
}
</script>