<template>
    <div class="row parentContainer">
        <div class="col">
            <div class="row align-items-center p-t-5 p-b-5">
                <div class="col-auto p-r-0" v-if="!$store.getters.isAdmin">
                    <div class="padding-5 lh-25 btn-rounded bg-white" v-if="item.type === 0">
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             width="30" height="30"
                             viewBox="0 0 172 172"
                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M21.5,21.5v129h129v-129zM25.8,25.8h45.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15h21.5c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15h45.15v120.4h-45.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-21.5c0,-1.18418 -0.96582,-2.15 -2.15,-2.15c-1.18418,0 -2.15,0.96582 -2.15,2.15h-45.15zM73.1,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,30.1c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,36.55c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,36.55c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,36.55c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,36.55c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,36.55c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM72.025,49.45c-1.15898,-0.0168 -2.24238,0.59629 -2.83027,1.5957c-0.58789,1.00781 -0.58789,2.25078 0,3.25859c0.58789,0.99941 1.67129,1.6125 2.83027,1.5957h27.95c1.15899,0.0168 2.24238,-0.59629 2.83027,-1.5957c0.58789,-1.00781 0.58789,-2.25078 0,-3.25859c-0.58789,-0.99941 -1.67129,-1.6125 -2.83027,-1.5957zM73.1,131.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM79.55,131.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM86,131.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM92.45,131.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,131.15c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM73.1,137.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15zM98.9,137.6c-1.18418,0 -2.15,0.96582 -2.15,2.15c0,1.18418 0.96582,2.15 2.15,2.15c1.18418,0 2.15,-0.96582 2.15,-2.15c0,-1.18418 -0.96582,-2.15 -2.15,-2.15z"></path></g></g></svg>
                    </div>
                    <div class="icon-thumbnail padding-5 lh-25 btn-rounded bg-master-lightest m-r-0" v-if="item.type === 1">
                        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                             width="30" height="30"
                             viewBox="0 0 172 172"
                             style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#000000"><path d="M60.2252,36.52061c-0.12239,-0.00062 -0.24461,0.00922 -0.36533,0.02939h-25.45986c-0.98721,-0.00039 -1.84785,0.6715 -2.08701,1.6293c-5.73407,22.93414 -11.46597,45.86604 -17.2,68.8c-0.00627,0.03067 -0.01187,0.06147 -0.0168,0.09238c-0.00768,0.03064 -0.01468,0.06144 -0.021,0.09238c-0.00324,0.02514 -0.00604,0.05034 -0.0084,0.07559c-0.00628,0.05441 -0.01049,0.10904 -0.0126,0.16377c-0.00212,0.03216 -0.00352,0.06436 -0.0042,0.09658v27.95c0.00012,1.18736 0.96264,2.14988 2.15,2.15h17.2c0.0056,0.00002 0.0112,0.00002 0.0168,0c0.06595,-0.00117 0.1318,-0.00537 0.19736,-0.0126c0.06192,-0.00572 0.12357,-0.01413 0.18477,-0.0252c0.00981,-0.00133 0.01961,-0.00273 0.02939,-0.0042c0.0056,-0.00138 0.0112,-0.00278 0.0168,-0.0042c0.06372,-0.01392 0.12677,-0.03074 0.18897,-0.05039c0.06684,-0.01919 0.1327,-0.04161 0.19736,-0.06719c0.0014,-0.0014 0.0028,-0.0028 0.0042,-0.0042c0.0014,0 0.0028,0 0.0042,0c0.06454,-0.02906 0.12761,-0.0613 0.18897,-0.09658c0.05014,-0.02743 0.09917,-0.05685 0.14697,-0.08818c0.01267,-0.00687 0.02527,-0.01387 0.03779,-0.021c0.01839,-0.01232 0.03659,-0.02491 0.05459,-0.03779c0.04025,-0.02942 0.07947,-0.06024 0.11758,-0.09238c0.00422,-0.00418 0.00842,-0.00838 0.0126,-0.0126c0.04961,-0.0426 0.09725,-0.08744 0.14277,-0.13438c0.05032,-0.05215 0.09797,-0.10681 0.14277,-0.16377c0.03382,-0.04216 0.06604,-0.08559 0.09658,-0.13018c0.00996,-0.01388 0.01976,-0.02788 0.02939,-0.04199c0.01147,-0.01803 0.02267,-0.03623 0.03359,-0.05459c0.02537,-0.04394 0.04918,-0.08876 0.07139,-0.13438c0.00282,-0.00559 0.00562,-0.01119 0.0084,-0.0168c0.02935,-0.05894 0.05597,-0.11919 0.07979,-0.18057c0.02213,-0.05791 0.04174,-0.11676 0.05879,-0.17637c0.00285,-0.00838 0.00565,-0.01678 0.0084,-0.0252c0.00592,-0.02091 0.01152,-0.04191 0.0168,-0.06299c0.00762,-0.02924 0.01462,-0.05864 0.021,-0.08818l0.0126,-0.05879c0.00001,-0.0028 0.00001,-0.0056 0,-0.0084l2.6707,-13.25693h93.61738l2.6833,13.31572c-0.00001,0.0042 -0.00001,0.0084 0,0.0126c0.02839,0.13961 0.07059,0.27606 0.12598,0.40732c0.05578,0.13254 0.12471,0.25915 0.20576,0.37793c0.0406,0.0581 0.08404,0.11416 0.13018,0.16797c0,0.0014 0,0.0028 0,0.0042c0.09202,0.10932 0.19471,0.2092 0.30654,0.29814c0.0014,0 0.0028,0 0.0042,0c0.11106,0.08859 0.23062,0.16595 0.35693,0.23096c0.0014,0 0.0028,0 0.0042,0c0.0629,0.03256 0.12736,0.06199 0.19316,0.08818c0.0014,0 0.0028,0 0.0042,0c0.06466,0.02557 0.13053,0.048 0.19736,0.06719c0.0014,0 0.0028,0 0.0042,0c0.06772,0.02017 0.13639,0.03698 0.20576,0.05039c0.0014,0 0.0028,0 0.0042,0c0.06953,0.01184 0.1396,0.02025 0.20996,0.0252c0.0014,0 0.0028,0 0.0042,0c0.0028,0.00001 0.0056,0.00001 0.0084,0c0.04753,0.00298 0.09515,0.00438 0.14277,0.0042c0.0196,0.00027 0.03919,0.00027 0.05879,0h17.14121c1.18736,-0.00012 2.14988,-0.96264 2.15,-2.15v-27.95c0.00002,-0.0056 0.00002,-0.0112 0,-0.0168c-0.00117,-0.06595 -0.00537,-0.1318 -0.0126,-0.19736c-0.00479,-0.05624 -0.0118,-0.11228 -0.021,-0.16797c-0.00263,-0.01543 -0.00543,-0.03083 -0.0084,-0.04619c-0.00135,-0.00841 -0.00275,-0.01681 -0.0042,-0.0252c-0.00524,-0.02248 -0.01084,-0.04488 -0.0168,-0.06719c-5.73403,-22.93396 -11.46593,-45.86586 -17.2,-68.8c-0.23916,-0.9578 -1.09981,-1.62969 -2.08701,-1.6293h-25.43887c-0.14971,-0.02579 -0.30173,-0.03564 -0.45352,-0.02939c-0.0873,0.0045 -0.17424,0.01431 -0.26035,0.02939h-25.11553c-0.12072,-0.02018 -0.24294,-0.03001 -0.36533,-0.02939c-0.10416,0.00226 -0.20801,0.01208 -0.31074,0.02939h-25.11133c-0.1055,-0.01772 -0.21218,-0.02755 -0.31914,-0.02939zM36.07969,40.85h21.68057l-0.50811,4.03125l-0.5417,4.3c-0.04143,0.31452 -0.01274,0.6343 0.08399,0.93643l-0.06299,0.34434l1.31855,1.40674l0.74326,0.13437l1.72168,-0.86084l0.07559,-0.42412c0.21105,-0.2952 0.34395,-0.63901 0.38633,-0.99941l0.5417,-4.3l0.57529,-4.56875h21.75615v4.3v4.3c-0.01097,0.77537 0.39641,1.49657 1.06613,1.88746c0.66972,0.39088 1.49803,0.39088 2.16775,0c0.66972,-0.39088 1.07709,-1.11209 1.06613,-1.88746v-4.3v-4.3h21.75615l0.55849,4.41758c0.00381,0.05057 0.00942,0.10099 0.0168,0.15117l0.5417,4.3c0.02311,0.19927 0.074,0.39433 0.15117,0.57949l-0.02939,0.16377l0.37793,0.40732c0.05013,0.05882 0.1034,0.11489 0.15957,0.16797l0.77686,0.83145l0.74746,0.13437l1.72168,-0.86084l0.11338,-0.62988c0.22378,-0.40546 0.31068,-0.87233 0.24776,-1.33115l-0.5417,-4.3l-0.50811,-4.03125h21.68057c5.37556,21.5005 10.74946,42.9994 16.125,64.5h-29.68428l-0.57529,-4.56875c-0.12489,-1.12257 -1.09704,-1.95716 -2.22559,-1.91064c-0.60664,0.02496 -1.17444,0.30523 -1.56321,0.77158c-0.38877,0.46636 -0.56225,1.07534 -0.47761,1.67656l0.50811,4.03125h-29.87744v-4.3c0.00796,-0.58115 -0.21968,-1.14076 -0.63105,-1.55134c-0.41137,-0.41057 -0.97142,-0.63714 -1.55255,-0.62806c-1.18576,0.01854 -2.13264,0.9936 -2.11641,2.17939v4.3h-29.87744l0.50811,-4.03125c0.08573,-0.61255 -0.09647,-1.23235 -0.50006,-1.70106c-0.40359,-0.46871 -0.98946,-0.74092 -1.60795,-0.74709c-1.10305,-0.01106 -2.03555,0.8144 -2.1584,1.91064l-0.57529,4.56875h-29.68428c5.37554,-21.5006 10.74944,-42.9995 16.125,-64.5zM86,55.9l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86504l0.34014,-1.89385l-1.31436,-1.40674zM57.71826,56.23594l-1.72168,0.86504l-0.34014,1.89385l1.31855,1.40674l0.74326,0.13437l1.72588,-0.86084l0.33594,-1.89805l-1.31436,-1.40674zM114.28174,56.23594l-1.72588,0.86504l-0.33594,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86084l0.34014,-1.89805l-1.31855,-1.40674zM86,64.5l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13438l1.72168,-0.86504l0.34014,-1.89385l-1.31436,-1.40674zM56.64746,64.76875l-1.72588,0.86504l-0.33594,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86084l0.34014,-1.89805l-1.31856,-1.40674zM115.35254,64.76875l-1.72168,0.86504l-0.34014,1.89385l1.31856,1.40674l0.74326,0.13437l1.72588,-0.86084l0.33594,-1.89805l-1.31436,-1.40674zM86,73.1l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86504l0.34014,-1.89385l-1.31436,-1.40674zM55.57246,73.30156l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13438l1.72168,-0.86084l0.34014,-1.89805l-1.31856,-1.40674zM116.42754,73.30156l-1.72168,0.86504l-0.34014,1.89385l1.31856,1.40674l0.74326,0.13438l1.72168,-0.86084l0.34014,-1.89805l-1.31436,-1.40674zM86,81.7l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13438l1.72168,-0.86504l0.34014,-1.89385l-1.31436,-1.40674zM54.49746,81.83437l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86084l0.34014,-1.89805l-1.31436,-1.40674zM117.50254,81.83437l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86084l0.34014,-1.89805l-1.31436,-1.40674zM86,90.3l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13437l1.72168,-0.86504l0.34014,-1.89385l-1.31436,-1.40674zM53.42246,90.36719l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13438l1.72168,-0.86084l0.34014,-1.89805l-1.31436,-1.40674zM118.57754,90.36719l-1.72168,0.86504l-0.34014,1.89385l1.31436,1.40674l0.74746,0.13438l1.72168,-0.86084l0.34014,-1.89805l-1.31436,-1.40674zM19.35,109.65h133.3v23.65h-12.9v-12.9c-0.00012,-1.18736 -0.96264,-2.14988 -2.15,-2.15h-103.2c-1.18736,0.00012 -2.14988,0.96264 -2.15,2.15v12.9h-12.9z"></path></g></g></svg>
                    </div>
                </div>
                <div class="col">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <p class="no-margin all-caps fs-10 light">Arrival Date</p>
                            <p class="no-margin text-success bold">{{item.transport ? item.transport.drop_date : 'n/a'}}</p>
                        </div>
                        <div class="col-auto p-l-0 p-r-0 text-center">
                            <p class="no-margin all-caps fs-10 light">Qty</p>
                            <p class="no-margin bold">{{item.quantity}}</p>
                        </div>
                        <div class="col-auto">
                            <p class="no-margin all-caps fs-10 light">Est. CBM</p>
                            <p class="no-margin">{{((parseFloat(item.cbm) * 1000) / 1000).toFixed(3)}}</p>
                        </div>
                        <div class="col" v-if="$store.getters.isAdmin">
                            <p class="no-margin all-caps fs-10 light">Warehouse</p>
                            <p class="no-margin" v-if="item.order">{{item.order.warehouse.reference}}</p>
                            <span class='text-danger' v-if="!item.order">Unclaimed</span>
                        </div>
                        <div class="col-auto text-right">
                            <div class="btn btn-xs btn-default" @click="expanded = !expanded"><i class="fa" :class="{'fa-angle-up': expanded, 'fa-angle-down': !expanded}"></i></div>
                        </div>
                        <div class="col-auto p-l-0 p-r-0 d-flex justify-content-center align-items-center" v-if="$store.getters.isSuperAdmin">
                            <span class="d-inline-block m-r-15 pointer requestModal bg-white btn-xs" data-type="deleteParcel">
                                <i class="fa fa-close"></i>
                            </span>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteParcel">
                                <delete-parcel-form-component :data="item" :section="section"></delete-parcel-form-component>
                            </modal-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="expanded" >
                <div class="col bg-white p-t-15 p-b-15">
                    <div class="row m-b-5">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Description</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12">{{item.description}}</p>
                        </div>
                    </div>
                    <div class="row" v-if="item.transport.tracking_number">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Tracking Number:</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12">{{item.transport.tracking_number}}</p>
                        </div>
                    </div>
                    <div class="row m-b-5" v-if="$store.getters.isAdmin">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Marking</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12"><a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a></p>
                        </div>
                    </div>
                    <div class="row m-b-5" v-if="$store.getters.isAdmin">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Reference</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12">{{item.reference}}</p>
                        </div>
                    </div>
                    <div class="row m-b-5">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Order Number</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></p>
                        </div>
                    </div>
                    <div class="row m-b-5" v-if="$store.getters.isAdmin">
                        <div class="col-auto p-r-5">
                            <p class="no-margin all-caps fs-10 light">Delivery Address</p>
                        </div>
                        <div class="col p-l-5">
                            <p class="no-margin bold text-info fs-12">{{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}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        data(){
            return {
                expanded: false
            }
        },
        props: {
            section:{
                type: String,
                default: null,
            }
        },
        mixins: [componentHandler]
    }
</script>
