<template>
    <div class="inline">
        <notification-component ref="notification"></notification-component>
        <div class="btn btn-sm btn-success b-rad-none requestModal" v-if="this.packingList.confirmed"  data-type="packed">Order Packed</div>
        <div class="btn btn-sm btn-complete b-rad-none requestModal" data-type="packingList">Packing List</div>
        <modal-component type="packingList" large>
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <div class="row p-t-30">
                        <div class="col no-padding">
                            <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                                <h6 class="bold all-caps no-margin text-success">Packing List</h6>
                                <div class="muted all-caps fs-12">Order Packages Details</div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group form-group-default input-group">
                        <div class="row w-100">
                            <div class="col no-padding">
                                <label class="muted block">Packing List No.</label>
                                <input class="form-control block" v-model="packingList.reference_no">
                            </div>
                        </div>
                    </div>
                    <div class="row m-l-0 m-r-0 m-b-15">
                        <div class="col no-padding">
                            <div class="row packages" v-for="i in Math.ceil(packingList.packages.length / 3)">
                                <div class="col-4 b-r b-grey bg-master-lightest no-padding text-center package-thumbnail"  v-for="(item, index) in packingList.packages.slice((i - 1) * 3, i * 3)">
                                    <div class="row">
                                        <div class="col no-padding">
                                            <div class="row">
                                                <div class="col no-padding text-left">
                                                    <div class="status-border"  :class="[{'active': item.length > 0 && item.height > 0 && item.width > 0 && item.description !== '' }]"></div>
                                                </div>
                                                <div class="col text-right no-padding">
                                                    <i @click="removePackage(index)" class="fa fa-times  text-white bg-danger padding-5 pointer"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row align-items-center justify-content-center p-t-25 p-b-25">
                                        <div class="col-auto hint-text p-r-10">
                                            <svg v-if="item.type === 0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
                                                <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,192v-192h192v192z" fill="none"></path>
                                                    <g fill="#000">
                                                        <path d="M187.5,43.05l-50.7,-18c-1.2,-0.45 -2.4,-0.3 -3.45,0.15c-1.65,0.75 -89.85,31.95 -89.85,31.95c-2.25,0.75 -3.75,2.85 -3.75,5.25v21c0,1.95 1.2,3.6 3,4.2l11.7,4.2c3,1.05 6,-1.05 6,-4.2v-17.55c0,-2.4 1.5,-4.5 3.75,-5.25l79.65,-27.6l28.8,10.2l-78.15,27.45v0c-1.65,0.6 -3,2.25 -3,4.2v91.2l-81,-28.65v-91.2l87,-30.75c2.4,-0.9 3.6,-3.45 2.7,-5.7c-0.9,-2.4 -3.45,-3.6 -5.7,-2.7l-90,31.8c-1.8,0.6 -3,2.4 -3,4.2v97.5c0,1.95 1.2,3.6 3,4.2l90,31.8c0.45,0.15 1.05,0.3 1.5,0.3c0.3,0 0.45,0 0.75,0h0.15c0.15,0 0.3,-0.15 0.6,-0.15v0l90,-31.8c1.8,-0.6 3,-2.4 3,-4.2v-97.5v0c0,-2.1 -1.2,-3.75 -3,-4.35z"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                            <svg v-if="item.type === 1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40" height="40" viewBox="0 0 192 192" style="fill: rgb(0, 0, 0);">
                                                <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,192v-192h192v192z" fill="none"></path>
                                                    <g fill="#000">
                                                        <g id="surface1">
                                                            <path d="M95.07692,29.53846c-0.80769,0.11538 -1.58654,0.34615 -2.30769,0.69231l-87,43.61538c-0.72115,0.11538 -1.41346,0.34615 -2.07692,0.69231c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.14423,0.0577 -0.31731,0.14423 -0.46154,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c-0.08654,0.14423 -0.17307,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.14423 0,0.31731 0,0.46154c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c-0.08654,0.08654 -0.14423,0.14423 -0.23077,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.08654,0.14423 -0.17308,0.31731 -0.23077,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.14423 0,0.31731 0,0.46154c0,0.14423 0,0.31731 0,0.46154c0,0.08654 0,0.14423 0,0.23077c0,0.08654 0,0.14423 0,0.23077c-0.02885,0.375 -0.02885,0.77885 0,1.15385v33.46154c-0.02885,2.85577 1.58654,5.45192 4.15385,6.69231l22.15385,11.07692c1.99038,0.98077 4.32693,0.98077 6.34615,0.0577c2.01923,-0.95193 3.49038,-2.74039 4.03846,-4.90385l29.76923,15.92308v6c0.02884,2.71154 1.52884,5.19231 3.92308,6.46154l22.15385,11.76923c2.16346,1.15385 4.75961,1.15385 6.92308,0l88.61538,-45.69231c2.39423,-1.26923 3.89423,-3.75 3.92308,-6.46154v-33.92308c0.0577,-0.54808 0.0577,-1.06731 0,-1.61538c0,-0.63461 -0.08654,-1.24039 -0.23077,-1.84615c-0.11538,-0.40384 -0.28846,-0.77885 -0.46154,-1.15385c0,-0.08654 0,-0.14423 0,-0.23077c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c0,-0.08654 0,-0.14423 0,-0.23077c-0.05769,-0.14423 -0.14423,-0.31731 -0.23077,-0.46154c-0.20192,-0.31731 -0.43269,-0.63461 -0.69231,-0.92308c-0.08654,-0.08654 -0.14423,-0.14423 -0.23077,-0.23077c-0.14423,-0.08654 -0.31731,-0.17307 -0.46154,-0.23077c-0.40384,-0.43269 -0.86538,-0.83654 -1.38462,-1.15385c-0.08654,0 -0.14423,0 -0.23077,0l-0.46154,-0.23077c-0.23077,-0.08654 -0.46154,-0.17307 -0.69231,-0.23077l-24.69231,-12.46154c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-23.76923,-11.76923c-1.35577,-1.84615 -3.49038,-2.9423 -5.76923,-3l-27.46154,-13.61538c-1.29808,-0.63461 -2.74039,-0.86538 -4.15385,-0.69231zM96,45.23077l12.92308,6.46154l-72,36l-12.92308,-6.46154zM125.53846,60l12.92308,6.46154l-72,36l-12.92308,-6.46154zM155.07692,74.76923l12.92308,6.46154l-72,36l-12.92308,-6.46154zM14.76923,93.23077l17.30769,8.53846c0.80769,0.66346 1.75961,1.125 2.76923,1.38462l27,13.61538c0.375,0.17308 0.75,0.34615 1.15385,0.46154l0.23077,0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077h0.23077c0.14423,0.08654 0.31731,0.17308 0.46154,0.23077l28.38462,14.30769c0.43269,0.20192 0.92308,0.34615 1.38462,0.46154c0.23077,0.08654 0.46154,0.17308 0.69231,0.23077l1.15385,0.69231v20.53846l-14.76923,-7.84615v-6c-0.02884,-2.71153 -1.52884,-5.19231 -3.92308,-6.46154l-44.30769,-23.76923c-2.07692,-1.15385 -4.58654,-1.24039 -6.72115,-0.23077c-2.13462,1.00962 -3.69231,2.97116 -4.125,5.30769l-7.38462,-3.69231z"></path>
                                                        </g>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <div class="col-auto no-padding">
                                            <i class="fa fa-times fs-14 lh-26"></i>
                                        </div>
                                        <div class="col text-left p-l-10">
                                            <div class="row">
                                                <div class="col no-padding"><input type="text" class="fs-22 bold b-l b-t b-b b-grey bg-transparent w-100 h-100 font-montserrat p-l-10" v-model="item.quantity" v-on:keypress="isNumber(true)"></div>
                                                <div class="col-auto bg-master-lighter no-padding h-100">
                                                    <div @click="item.quantity++" class="row align-items-center justify-content-center h-50 pointer">
                                                        <div class="col p-l-5 p-r-5">
                                                            <i class="fa fa-angle-up text-success"></i>
                                                        </div>
                                                    </div>
                                                    <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50 pointer">
                                                        <div class="col p-l-5 p-r-5">
                                                            <i class="fa fa-angle-down text-success"></i>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-auto p-t-5 p-b-5 bg-master-light">
                                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                                                 width="15" height="15"
                                                 viewBox="0 0 192 192"
                                                 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,192v-192h192v192z" fill="none"></path><g fill="#000000"><path d="M6,1.5c-2.55,0 -4.5,1.95 -4.5,4.5v180c0,2.55 1.95,4.5 4.5,4.5h33c2.55,0 4.5,-1.95 4.5,-4.5v-180c0,-2.55 -1.95,-4.5 -4.5,-4.5zM75,1.5c-10.8,0 -19.5,8.7 -19.5,19.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-5.85 4.65,-10.5 10.5,-10.5h76.5v10.5c0,10.8 8.7,19.5 19.5,19.5h14.39942h0.60058c1.8,0 3.45117,-1.20117 4.20117,-2.70117c0.3,-0.6 0.44825,-1.19883 0.44825,-1.79883v-0.60059c-0.3,-9 -3.89825,-17.39824 -10.19825,-23.69824c-6.6,-6.6 -15.15117,-10.20117 -24.45117,-10.20117zM10.5,10.5h24v171h-24v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5v-21h4.5c2.55,0 4.5,-1.95 4.5,-4.5c0,-2.55 -1.95,-4.5 -4.5,-4.5h-4.5zM160.5,10.95117c5.1,0.9 9.75,3.29883 13.5,7.04883c3.75,3.75 6.14883,8.4 7.04883,13.5h-10.04883c-5.85,0 -10.5,-4.65 -10.5,-10.5zM59.71289,40.54395c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v141c0,2.55 1.95,4.5 4.5,4.5h126c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-126,-141c-0.9,-1.0125 -2.22188,-1.51934 -3.58594,-1.45605zM186,51c-2.55,0 -4.5,1.95 -4.5,4.5v100.5c0,2.55 1.95,4.5 4.5,4.5c2.55,0 4.5,-1.95 4.5,-4.5v-100.5c0,-2.55 -1.95,-4.5 -4.5,-4.5zM64.5,56.85059l111.45117,124.64941h-111.45117zM89.71289,119.14453c-0.45469,0.02109 -0.9123,0.10488 -1.3623,0.25488c-1.65,0.6 -2.85059,2.40117 -2.85059,4.20117v32.39941c0,2.55 1.95,4.5 4.5,4.5h28.95117c1.8,0 3.44883,-1.05117 4.04883,-2.70117c0.75,-1.65 0.45,-3.44883 -0.75,-4.79883l-28.95117,-32.39941c-0.9,-1.0125 -2.22187,-1.51934 -3.58594,-1.45605zM94.5,135.45117l14.39941,16.04883h-14.39941z"></path></g></g></svg>
                                            <div class="absolute padding-5 bg-danger btn-rounded" style=" right: 10px; top: 6px; ">

                                            </div>
                                        </div>
                                        <div class="col no-padding">
                                            <input type="text" class="fs-12 bold bg-master-lighter no-border w-100 font-montserrat p-l-15 p-r-15 p-t-5 p-b-5 thumbnail-input" placeholder="Description" v-model="item.description">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-15" v-for="(item, index) in packingList.packages">
                        <div class="col p-b-15 bg-master-lightest">
                            <div class="row p-t-10 p-b-10">
                                <div class="col p-l-5 b-l b-grey" style=" border-left-width: 3px; ">
                                    <span class="bold muted fs-10 all-caps">Package {{index + 1}}</span>
                                </div>
                                <div class="col-auto text-danger no-padding">
                                    <i @click="removePackage(index)" v-if="index !== 0" class="fa fa-times"></i>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-l-0">
                                    <div class="form-group form-group-default input-group">
                                        <div class="row w-100">
                                            <div class="col no-padding">
                                                <label class="muted block">Description</label>
                                                <input class="form-control block" v-model="item.description">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 no-padding">
                                    <div class="form-group form-group-default input-group">
                                        <div class="row w-100">
                                            <div class="col no-padding">
                                                <label class="muted block">Quantity</label>
                                                <input class="form-control block" v-model="item.quantity" v-on:keypress="isNumber(false)" >
                                            </div>
                                            <div class="col-auto no-padding">
                                                <div class="input-group-addon pointer inline no-padding" style=" min-width: auto; ">
                                                    <div class="row align-items-center justify-content-center h-100">
                                                        <div class="col no-padding h-100">
                                                            <div @click="item.quantity++" class="row align-items-center justify-content-center h-50">
                                                                <div class="col p-l-10 p-r-10">
                                                                    <i class="fa fa-angle-up text-success"></i>
                                                                </div>
                                                            </div>
                                                            <div @click="item.quantity > 1 ? item.quantity-- : item.quantity" class="row align-items-center justify-content-center h-50">
                                                                <div class="col p-l-10 p-r-10">
                                                                    <i class="fa fa-angle-down text-success"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-l-5 p-r-0">
                                    <div class="form-group form-group-default input-group">
                                        <div class="row w-100">
                                            <div class="col no-padding">
                                                <label class="muted block">Length</label>
                                                <input class="form-control block" v-model="item.length" v-on:keypress="isNumber(true)">
                                            </div>
                                            <div class="col-auto no-padding">
                                                <div class="input-group-addon inline" style="min-width:auto;">
                                                    <div class="row align-items-center justify-content-center h-100">
                                                        <div class="col no-padding text-center">
                                                            <small>cm</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-l-0 p-r-5">
                                    <div class="form-group form-group-default input-group">
                                        <div class="row w-100">
                                            <div class="col no-padding">
                                                <label class="muted block">Width</label>
                                                <input class="form-control block" v-model="item.width" v-on:keypress="isNumber(true)">
                                            </div>
                                            <div class="col-auto no-padding">
                                                <div class="input-group-addon inline" style="min-width:auto;">
                                                    <div class="row align-items-center justify-content-center h-100">
                                                        <div class="col no-padding text-center">
                                                            <small>cm</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col p-l-5 p-r-5">
                                    <div class="form-group form-group-default input-group">
                                        <div class="row w-100">
                                            <div class="col no-padding">
                                                <label class="muted block">Height</label>
                                                <input class="form-control block" v-model="item.height" v-on:keypress="isNumber(true)">
                                            </div>
                                            <div class="col-auto no-padding">
                                                <div class="input-group-addon inline" style="min-width:auto;">
                                                    <div class="row align-items-center justify-content-center h-100">
                                                        <div class="col no-padding text-center">
                                                            <small>cm</small>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col no-padding">
                            <div class="row ">
                                <div @click="AddPackage(0)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
                                        <div class="col padding-15" style=" height: 125px; "><img src="https://www.pngarts.com/files/1/Package-Box-PNG-Free-Download.png" style="width: 100%;"></div>
                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
                                    </div>
                                    <div class="row">
                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Carton</small></div>
                                    </div>
                                </div>
                                <div @click="AddPackage(1)"  class="col-3 hint-text m-r-15 pointer bg-master-lightest text-center no-padding add-package">
                                    <div class="row align-items-center justify-content-center relative" style="opacity: 0.3;">
                                        <div class="col padding-15" style=" height: 125px; "><img src="http://iconbug.com/data/6e/256/2f229a2663bc61dfe5aedeace2ca8837.png" style="width: 100%;"></div>
                                        <div class="absolute w-100 h-100 text-center plus-thumbnail"><i class="fa fa-plus fs-50 m-auto"></i></div>
                                    </div>
                                    <div class="row">
                                        <div class="col bg-master-lighter fs-11 p-t-5 p-b-5 hint-text"><small class="all-caps title">Pallet</small></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-right no-padding">
                            <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn b-rad-none btn-success" @click="updatePackingList" data-dismiss="modal">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
        </modal-component>
        <modal-component type="packed" large>
            <div class="card card-default no-border">
                <div class="card-block no-padding">
                    <div class="row p-t-30">
                        <div class="col no-padding">
                            <div class="b-l b-success p-l-15 m-b-15" style="border-left-width: 3px;">
                                <h6 class="bold all-caps no-margin text-success">Order Packed</h6>
                                <div class="muted all-caps fs-12">Confirm order has been packed</div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-b-20">
                        <div class="col no-padding bg-master-lightest">
                            <div class="form-group form-group-default input-group" style=" overflow: visible; ">
                                <div class="form-input-group">
                                    <label>Action Date</label>
                                    <date-picker-component name="complete_date" v-on:updateDate="setCompleteDate($event)"></date-picker-component>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-t-10 p-b-10 b-b b-grey bg-master-lighter">
                                    <p class="no-margin text-info"><small class="muted all-caps fs-12 m-r-5">Packing List No:</small> {{packingList.reference_no}}</p>
                                </div>
                            </div>
                            <div class="row p-t-10 p-b-10  b-b b-grey align-items-center justify-content-center" v-for="item in packingList.packages">
                                <div class="col">
                                    <p class="no-margin">{{item.description}}</p>
                                </div>
                                <div class="col-2 text-center">
                                    Qty {{item.quantity}}
                                </div>
                                <div class="col-3 text-right">
                                    <p class="no-margin">{{(((item.width/100) * (item.length/100) * (item.height/100)) * item.quantity).toFixed(5)}} CBM</p>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-t-10 p-b-10 b-b b-grey bg-master-lighter text-right">
                                    <h6 class="no-margin all-caps bold">Total: <span class="text-info" v-text="this.totalCBM() + ' CBM'"></span></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col text-right no-padding">
                            <button class="btn b-rad-none btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn b-rad-none btn-success" @click="completePacking" data-dismiss="modal">Confirm</button>
                        </div>
                    </div>
                </div>
            </div>
        </modal-component>
    </div>
</template>
<style>
    .plus-thumbnail {
        display: flex;
        opacity: 0.4;
        background-color: #fff;
    }
    .add-package:hover .plus-thumbnail {
        background-color: #ececec;
        color: #787878;
    }
    .add-package:hover .title {
        color: #bababa;
    }
    .thumbnail-input::-webkit-input-placeholder { /* Edge */
        color: #bababa;
        font-weight: normal !important;
    }

    .thumbnail-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #bababa;
        font-weight: normal !important;
    }

    .thumbnail-input::placeholder {
        color: #bababa;
        font-weight: normal !important;
    }
    .packages .package-thumbnail:last-child {
        border-right : none !important;
    }
    .package-thumbnail .status-border {
        border-style: solid;
        border-width: 7px 8px 0 0;
        border-color: transparent;
        border-top-color: #ececec ;
    }
    .package-thumbnail .status-border.active {
        border-top-color: #47b5ab;
        opacity: 0.6;
    }
</style>
<script>
    import notificationConstant from '../../../../../js/notification';
    export default {
        props: {
            'data': {
                type: Number,
                required: true
            },
            'attachments': {
                type: Object
            }
        },
        data(){
            return {
                packingList: {
                    reference_no: '',
                    confirmed: 0,
                    packages: []
                },
                actionData: {
                    complete_date: ''
                }
            }
        },
        created(){
            if(this.attachments !== null){
                this.packingList = this.attachments;
            }
        },
        watch: {
            'attachments': function() {
                this.packingList = this.attachments;
            }
        },
        methods: {
            updatePackingList() {
                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.packages.update', {orderId: this.data}), {
                    method: 'post',
                    body: JSON.stringify(this.packingList),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then((response) => {
                    //turn off loading animation
                    this.isLoading = false;

                    let notification = this.$refs.notification;

                    notification.title = notificationConstant.ORDER.PACKING_LIST_NOTIFICATION.TITLE;
                    notification.message = notificationConstant.ORDER.PACKING_LIST_NOTIFICATION.MESSAGE;


                    notification.execute();

                    Event.$emit('updateOrdersList');

                });
            },
            completePacking() {

                //turn on loading animation
                this.isLoading = true;
                fetch(route('api.order.step.update', {orderId: this.data}), {
                    method: 'post',
                    body: JSON.stringify(this.actionData),
                    headers: {
                        'content-type': 'application/json'
                    }
                }).then(() => {
                    //turn off loading animation
                    this.isLoading = false;

                    let notification = this.$refs.notification;

                    notification.title = notificationConstant.ORDER.ORDER_PACKED.TITLE;
                    notification.message = notificationConstant.ORDER.ORDER_PACKED.MESSAGE;

                    notification.execute();

                    Event.$emit('updateOrdersList', true);


                })
            },
            AddPackage(type){
                this.packingList.packages.push({
                    description: '',
                    type: type,
                    quantity: 1,
                    width: 0.0,
                    height: 0.0,
                    length: 0.0
                });
            },
            isNumber(decimal) {
                let charCode = (window.event.which) ? window.event.which : window.event.keyCode;
                if ((charCode > 31 && (charCode < 48 || charCode > 57 ))) {

                    if(decimal){
                        if(charCode === 46){
                            return true
                        }
                    }

                    window.event.preventDefault();

                } else {
                    return true;
                }
            },
            removePackage(index){
                this.packingList.packages.splice(index, 1);
            },
            totalCBM(){
                var total = 0;
                $.each(this.packingList.packages, function(key, object){
                    total += (((object.width/100) * (object.length/100) * (object.height/100)) * object.quantity)
                });
                return total.toFixed(5);
            },
            setCompleteDate(date){
                this.actionData.complete_date = date;
            }
        }
    }
</script>