<style scoped>
    .percentageContainer{
        width: 100px;
        height: 100px;
        border: 1px solid #444;
        position: relative;
    }
    .percentageInner{
        position: absolute;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        margin: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        bottom: 0;
    }
    .percentageInnerText{
        position: absolute;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        margin: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* timeline */
     ul.timeline_ul {
        list-style-type: none;
        position: relative;
    }

    ul.timeline_ul:before {
        content: ' ';
        background: #d4d9df;
        display: inline-block;
        position: absolute;
        left: 21px;
        width: 2px;
        height: 100%;
        z-index: 1;
        margin-top: 13px;
    }

    ul.timeline_ul>li {
        margin: 10px 0;
        padding-left: 20px;
    }

    ul.timeline_ul>li:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        left: 12px;
        z-index: 1;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-top: 3px;
        opacity: 12%;
    }
    ul.timeline_ul>li .row:before {
        content: ' ';
        display: inline-block;
        position: absolute;
        left: 16px;
        z-index: 2;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-top: 7px;
    }

    ul.timeline_ul>li.bg-blue:before,
    ul.timeline_ul>li.bg-blue .row:before {
        background: #00CFE8;
    }

    ul.timeline_ul>li.bg-purple:before,
    ul.timeline_ul>li.bg-purple .row:before {
        background: #7367F0;
    }

    ul.timeline_ul>li.bg-orange:before,
    ul.timeline_ul>li.bg-orange .row:before {
        background: #FF9F43;
    }

    /* delivery_status_ul */
    .delivery_status{
        position: relative;
    }

    .delivery_status hr{
        background: #A6A6A6;
        display: block;
        height: 2px;
        width: 100%;
    }

    .delivery_status .overlay12 {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;

        justify-content: space-between;
        align-self: center;
        display: flex;
    }

    .delivery_status .overlay12 .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-top: auto;
        margin-bottom: auto;

        border: 2px solid #A6A6A6;
        background-color: white;
    }

    .delivery_status .overlay12 .dot.checked {
        border: 2px solid #912873;
        background-color: #912873;
        position:relative;
    }

    .delivery_status .overlay12 .dot.checked::before {
        font-family: FontAwesome;
        position:absolute;
        top:0;
        content: "\f00c"; 
        color: white;

        margin-left: 3px;
        display: block;
        font-size: 10px;
    }

    .line_div{
        height: 36px;
    }

    .status_p{
        top: 25px;
        left: -40px;
        width: 100px;
    }
</style>
    <template>
    <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}}</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}}</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">Guangzhou, China</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">Port Klang, Malaysia</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">Greenway Logistic</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 h-100 p-l-10 p-r-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="rescheduleDate">Reschedule Date form</a>
                                            </li>
                                            <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-40 m-b-0">
                <div class="col">
                    <h5 class="bold m-b-40">Overview</h5>
                    <div class="row">
                        <div class="col-auto">
                            <div class="percentageContainer rounded bg-master-lightest b-grey">
                                <div class="percentageInner bg-primary rounded-bottom" :style="{ height: Math.round((loadedCBM / CBMcapacity) * 100, 2) + '%' }"></div>
                                <div class="percentageInnerText muted">
                                     {{ Math.round((loadedCBM / CBMcapacity) * 100, 2) }}%
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <p class="m-b-5 muted">Container No #{{container.container_number}}</p>
                            <h5 class="m-b-5 m-t-0 bold">Your order(s) are ready for shipment</h5>
                            <p class="m-b-5 m-t-0 muted">Total 1 package(s) in this container</p>
                            <p class="m-b-5 m-t-0">Loaded CBM: <span class="text-complete bold fs-20">{{loadedCBM}}</span></p>
                        </div>
                        <div class="col-auto">
                            <a class="btn btn-sm btn-danger b-rad-none all-caps requestModal rounded" data-type="rescheduleDate">Reschedule Date form</a>
                        </div>
                    </div>
                    <div class="row m-t-40">
                        <div class="col">
                            <div class="row m-l-30 m-r-30 m-b-50">
                                <div class="col">
                                    <div class="row">
                                        <div class="col">
                                            <div class="delivery_status">
                                                <div class="line_div w-100 justify-content-center align-content-center d-flex">
                                                    <hr>
                                                </div>
                                                <div class="overlay12 p-l-0">
                                                    <div class="dot checked">
                                                        <div class="position-relative">
                                                            <div class="status_p text-center position-absolute">Warehouse-CN(K2921)</div>
                                                        </div>
                                                    </div>
                                                        <div class="dot requestModal pointer disabled" data-type="rescheduleDate">
                                                            <div class="position-relative">
                                                            <div class="status_p text-center position-absolute">Loading<br>Port</div>
                                                        </div>
                                                    </div>
                                                    <div class="dot">
                                                        <div class="position-relative">
                                                            <div class="status_p text-center position-absolute">In<br>Transit</div>
                                                        </div>
                                                    </div>
                                                    <div class="dot">
                                                        <div class="position-relative">
                                                            <div class="status_p text-center position-absolute">Discharge<br>Port</div>
                                                        </div>
                                                    </div>
                                                        <div class="dot">
                                                        <div class="position-relative">
                                                            <div class="status_p text-center position-absolute">Warehouse-MY(M2525)</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                </div>
                            </div>
                            <div class="row m-t-50">
                                <div class="col">
                                    <input type="text" class="b-a w-100 padding-10 rounded b-grey" placeholder="Search by Package Name, Package Number...">
                                </div>
                                <div class="col-auto">
                                    <div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
                                        Print Custom
                                    </div>
                                    <div class="btn rounded btn-default m-r-10 p-t-10 p-b-10">
                                        Export List
                                    </div>
                                    <div class="btn rounded btn-primary p-t-10 p-b-10">
                                        <div><i class="fa fa-plus m-r-10"></i>Add Container</div>
                                    </div>
                                </div>
                            </div>

                            <div class="row m-t-50">
                                <div class="col">
                                    <div class="row" v-for="packingList in container.packing_lists">
                                        <div class="col">
                                            <div class="row m-t-10 b-a rounded b-grey m-l-5 m-r-5 padding-10 p-t-20 p-b-20" v-for="package_item in packingList.packages">
                                                <div class="col">
                                                    <div class="row">
                                                        <div class="col-auto hide">
                                                            <svg width="97" height="80" viewBox="0 0 97 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                <path d="M60.087 79.4989L0.178711 59.8679V13.3069L60.087 26.6089V79.4989Z" fill="#D3B875"/>
                                                                <path d="M96.2289 58.07L60.0823 79.5V26.61L96.2289 8.46899V58.07Z" fill="#B78C58"/>
                                                                <path d="M0.175781 13.3119L36.7404 0.00390625L96.2288 8.47189L60.087 26.6119L0.175781 13.3119Z" fill="#F2D08B"/>
                                                                <path opacity="0.6" d="M17.5637 6.97882L74.0242 19.8788L75.1844 40.9638L77.1729 43.9878L78.1566 40.0988L79.4932 41.3088L80.8192 38.5438L81.8135 40.0988L80.5344 16.3498L22.5418 5.16382L17.5637 6.97882Z" fill="#846B3D"/>
                                                                <path opacity="0.6" d="M24.7881 18.7679L60.0842 3.31787L66.0891 4.17287L32.2254 20.4189L24.7881 18.7679Z" fill="#846B3D"/>
                                                                <path d="M24.7881 18.7729V67.935L32.2254 70.3719V20.424L24.7881 18.7729Z" fill="#846B3D"/>
                                                                <path d="M73.3618 66.1058C73.3618 66.6788 72.9524 66.8748 72.3675 67.1428L66.2369 70.3708C65.4085 70.8008 65.2427 69.9068 65.2427 69.3338V59.4828C65.2427 58.9098 65.6013 58.7748 66.2369 58.4458L72.3675 55.2178C73.6657 54.5268 73.2764 55.9318 73.3618 58.5878V66.1058Z" fill="white"/>
                                                                <path d="M65.8706 60.4519L71.9552 57.3679V57.7219L65.8706 60.9129V60.4519Z" fill="#4C402C"/>
                                                                <path d="M65.8706 61.668L71.9552 58.584V58.939L65.8706 62.132V61.668Z" fill="#4C402C"/>
                                                                <path d="M65.8706 63.0308L71.9552 59.9468V60.3018L65.8706 63.4928V63.0308Z" fill="#4C402C"/>
                                                                <path d="M66.0134 66.7698L69.8601 64.8198L69.9081 65.1888L66.0144 67.2308L66.0134 66.7698Z" fill="#4C402C"/>
                                                                <path d="M66.0134 67.6949L69.8601 65.7449L69.9081 66.1139L66.0144 68.1559L66.0134 67.6949Z" fill="#4C402C"/>
                                                                <path d="M66.0134 68.6319L69.8601 66.6819L69.9081 67.0509L66.0144 69.0929L66.0134 68.6319Z" fill="#4C402C"/>
                                                            </svg>
                                                        </div>
                                                        <div class="col">
                                                            <div class="row">
                                                                <div class="col">
                                                                    <p class="bold normal-text">Customer: <a :href="route('customer.profile', packingList.order.company_module.marking)">{{packingList.order.company_module.marking}}</a></p>
                                                                    <p class="bold normal-text">Order: <a :href="route('order.show', packingList.order.reference)">{{packingList.order.reference}}</a></p>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="col-auto" v-if="!packingList.transport">
                                                                        <div class="btn btn-xs btn-success pointer" v-if="packingList.status === 5"><i class="fa fa-check m-r-5"></i>Release</div>
                                                                        <div class="btn btn-xs btn-danger pointer" v-if="packingList.status !== 5"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <p class="normal-text bold">{{package_item.description}} <span class="muted normal m-l-10">(Quantity: {{package_item.quantity}})</span></p>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <p class="large-text">{{packingList.order.address.street_one+' '+(packingList.order.address.street_two ? packingList.order.address.street_two : '')+', '+ packingList.order.address.district.name+', '+packingList.order.address.post_code+' '+packingList.order.address.state.name+', '+packingList.order.address.country.name}}</p>
                                                                </div>
                                                                <div class="col-auto">
                                                                    <p class="small-text bold">{{package_item.length}}x{{package_item.width}}x{{package_item.height}} CM / <span class="text-complete bold fs-20">{{ (Math.ceil((package_item.cbm) * 1000) / 1000).toFixed(3)}}CBM</span></p>
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col">
                                                                    <p class="small-text muted">Remark</p>
                                                                </div>
                                                            </div>
                                                            <div class="row m-t-20">
                                                                <div class="col">
                                                                </div>
                                                                <div class="col-auto">
                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Add Remarks</div>
                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Address</div>
                                                                    <div class="btn rounded btn-default btn-lg bold normal-text requestModal" data-type="editContainer">Edit Package</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                            
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="editContainer">
                <edit-container-form-component :section="section" :data="container"></edit-container-form-component>
            </modal-component>

            <div class="row m-t-10">
                <div class="col">
                    <h5 class="fs-20 bold">Create Delivery Packing List</h5>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-8" v-show="!$store.getters.isShowing('createDeliveryPackingListFormSection')">
                            <div class="row">
                                <div class="col b-a b-grey rounded m-l-10 m-r-20">
                                    <div class="row">
                                        <div class="col b-b b-grey bg-master-lightest">
                                            <div class="row">
                                                <div class="col padding-20">
                                                    <div class="row align-items-center">
                                                        <div class="col-auto pointer align-items-center" @click="chooseAllPackingList()">
                                                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selectAllPackingList, 'fa-check-square': selectAllPackingList, 'text-primary':selectAllPackingList}" ></i>
                                                        </div>
                                                        <div class="col">
                                                            <h5 class="no-margin semi-bold">Order No</h5>
                                                        </div>
                                                        <div class="col">
                                                            <h5 class="no-margin semi-bold">Customer Marking</h5>
                                                        </div>
                                                        <div class="col">
                                                            <h5 class="no-margin semi-bold">No. Packgaes</h5>
                                                        </div>
                                                        <div class="col">
                                                            <h5 class="no-margin semi-bold">CBM</h5>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row" v-for="packingList in container.packing_lists">
                                        <div class="col">
                                            <list-packagelist-form-component :data="packingList" :selectedPackageList="selectedPackageList" v-on:input="updateList($event)"></list-packagelist-form-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col"></div>
                                <div class="col-atuo">
                                    <div class="btn rounded btn-primary btn-lg p-t-10 p-b-10 m-t-10 m-r-20" @click="$store.dispatch('toggleSection', {name: 'createDeliveryPackingListFormSection', status: true})">Next <i class="fa fa-arrow-right m-l-10"></i></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-sm-12 col-md-8" v-show="$store.getters.isShowing('createDeliveryPackingListFormSection')">
                            <create-delivery-packinglist-form-component :section="'containerListSection'" :data="selectedPackageList"></create-delivery-packinglist-form-component>
                        </div>

                        <div class="col-12 col-sm-12 col-md-4 mt-2 mt-md-0">
                            <div class="row align-items-center">
                                <div class="col b-a b-grey rounded padding-25">
                                    <div class="row">
                                        <div class="col">
                                            <h6 class="semi-bold muted">Summary</h6>
                                        </div>
                                    </div>
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col">
                                            <h6 class="semi-bold text-primary">{{selectedPackageList.length}} Packing List Selected</h6>
                                        </div>
                                    </div>
                                    <div class="row" v-show="selectedPackageList.length != 0">
                                        <div class="col">
                                            <div class="row" v-for="selectedPackageList in selectedPackageList">
                                                <div class="col">
                                                    <h6 class="no-margin">{{selectedPackageList.order.reference}}</h6>
                                                </div>
                                                <div class="col">
                                                    <h6 class="no-margin">noPackages</h6>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="no-margin">Total Cbm</h6>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col">
                                                    <h6 class="normal m-t-5 m-b-5">Total Packages</h6>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="normal m-t-5 m-b-5">RM 212.15</h6>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <h6 class="normal m-t-5 m-b-5">Total Address</h6>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="normal m-t-5 m-b-5">RM 41.25</h6>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    <h6 class="normal m-t-5 m-b-5">Total Cbm</h6>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="normal m-t-5 m-b-5">RM 0.00</h6>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="row">
                                                <div class="col">
                                                    <h6 class="normal">Total Payments</h6>
                                                </div>
                                                <div class="col-auto">
                                                    <h6 class="text-primary bold">RM 3300.00</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
            <div class="row m-t-10">
                <div class="col">
                    <div class="row">
                        <div class="col-auto padding-5 m-l-15 m-r-15" :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 class="col-auto padding-5 m-l-15 m-r-15" :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>
                    <div class="row p-l-10 p-r-10">
                        <div class="col rounded padding-15">
                            <div class="row" v-if="tabShowing === 'Timeline'">
                                <div class="col">
                                    <ul class="timeline_ul">
                                        <li class="bg-purple">
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin bold">Item Returned</p>
                                                </div>
                                                <div class="col-auto">
                                                    <p class="muted no-margin">5 September 2021</p>
                                                </div>
                                            </div>
                                            <p>Item has been returned due to mismatch</p>
                                        </li>
                                        <li class="bg-orange">
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin bold">Client Report</p>
                                                </div>
                                                <div class="col-auto">
                                                    <p class="muted no-margin">21 August 2021</p>
                                                </div>
                                            </div>
                                            <p>Client report order number #012AS12W</p>
                                        </li>
                                        <li class="bg-blue">
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin bold">Item Cancelled</p>
                                                </div>
                                                <div class="col-auto">
                                                    <p class="muted no-margin">8 May 2021</p>
                                                </div>
                                            </div>
                                            <p>Item has been cancelled by clients number #012ASJ21</p>
                                        </li>
                                        <li class="bg-blue">
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin bold">Item Cancelled</p>
                                                </div>
                                                <div class="col-auto">
                                                    <p class="muted no-margin">8 May 2021</p>
                                                </div>
                                            </div>
                                            <p>Item has been cancelled by clients number #012ASJ21</p>
                                        </li>
                                        <li class="bg-orange">
                                            <div class="row">
                                                <div class="col">
                                                    <p class="no-margin bold">Client Report</p>
                                                </div>
                                                <div class="col-auto">
                                                    <p class="muted no-margin">21 August 2021</p>
                                                </div>
                                            </div>
                                            <p>Client report order number #012AS12W</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <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>
                    </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',
                    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), 'get', this.section, false, false)
                },
                successHandler(response){
                    this.$store.dispatch('completeList', {'name': this.section, 'data': []});
                    this.isLoading = false;
                    this.container = response.payload.data;
                },
                updateList(packageList){
                    this.selectedPackageList.includes(packageList) ? this.selectedPackageList.splice(this.selectedPackageList.indexOf(packageList), 1) : this.selectedPackageList.push(packageList);
                    this.selectedPackageList.length === this.container.packing_lists.length ? this.selectAllPackingList = true : this.selectAllPackingList = false;
                },
                chooseAllPackingList() {
                    this.selectAllPackingList = !this.selectAllPackingList;
                    this.selectedPackageList = [];
                    if (this.selectAllPackingList) {
                        this.selectedPackageList = this.container.packing_lists;
                    }
                },
            }
        }
    </script>