<template>
    <div class="row m-b-10 parentContainer bg-white no-margin">
        <div class="col">
            <div class="row no-margin align-items-center justify-content-center p-t-10 p-b-10">
                <div class="col">
                    <div class="row no-margin align-items-center justify-content-center">
                        <div class="col-auto no-padding all-caps">
                            <div class="row">
                                <div class="col fs-10">
                                    <span class="bold">#47586979</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="fs-9 muted all-caps">Importer:

                                        <a href="https://www.izyim.com/company/1/profile">
                                            <span class="fs-9 text-complete bold">CIEF/685CLY</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col text-right p-r-0 all-caps">
                            <div class="row">
                                <div class="col fs-10">
                                    <span class="bold text-danger">pending supplier</span>
                                    <!---->
                                </div>
                            </div>
                            <div class="row fs-9">
                                <div class="col muted">
                                    <span class="inline v-align-middle">Waiting for supplier to deliver order to warehouse</span>
                                    <!---->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="row">
                        <div class="hide">
                            <div class="row">
                                <div class="col no-padding">
                                    <div class="row">
                                        <div class="col all-caps fs-13 bold"></div>
                                    </div>
                                    <div class="row fs-12 m-t-5">
                                        <div class="col"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="row align-items-center justify-content-center">
                                <div class="col-auto p-l-0">
                                    <div class="inline">
                                        <div data-type="receiveNote" class="modal fade modalContainer stick-up">
                                            <div class="modal-dialog">
                                                <div class="modal-content-wrapper">
                                                    <div class="modal-content">
                                                        <div class="modal-body">
                                                            <div class="hide">
                                                                <div class="row">
                                                                    <div class="col no-padding">
                                                                        <div class="row">
                                                                            <div class="col all-caps fs-13 bold"></div>
                                                                        </div>
                                                                        <div class="row fs-12 m-t-5">
                                                                            <div class="col"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="absolute w-100 h-100" style="z-index: 1051; left: 0px; display: none;">
                                                                <div class="absolute w-100 h-100 bg-white" style="opacity: 0.6;"></div>
                                                                <div class="row h-100 align-items-center justify-content-center">
                                                                    <div class="col">
                                                                        <div data-v-7c827517="" class="breeding-rhombus-spinner m-auto" style="height: 60px; width: 60px;">
                                                                            <div data-v-7c827517="" class="rhombus child-1" style="animation-delay: 100ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-2" style="animation-delay: 150ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-3" style="animation-delay: 200ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-4" style="animation-delay: 250ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-5" style="animation-delay: 300ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-6" style="animation-delay: 350ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-7" style="animation-delay: 400ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus child-8" style="animation-delay: 450ms; height: 8px; width: 8px; animation-duration: 1000ms; top: 25.9999px; left: 25.9999px; background-color: rgb(255, 29, 94);"></div>
                                                                            <div data-v-7c827517="" class="rhombus big" style="height: 20px; width: 20px; top: 20px; left: 20px; background-color: rgb(255, 29, 94);"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <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">Warehouse Received</h6>
                                                                                <div class="muted all-caps fs-12">Order Receive Note</div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <form method="post" class="receiveForm" novalidate="novalidate">
                                                                        <div class="row">
                                                                            <div class="col 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">Tracking Number</label>
                                                                                            <input name="tracking_number" class="form-control block">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="form-group form-group-default input-group" style="overflow: visible;">
                                                                                    <div class="form-input-group">
                                                                                        <label>Date Received</label>
                                                                                        <input type="text" class="form-control" name="complete_date">
                                                                                    </div>
                                                                                </div>
                                                                                <div class="row">
                                                                                    <div class="col text-right no-padding">
                                                                                        <div class="row">
                                                                                            <div class="col no-padding">
                                                                                                <button data-dismiss="modal" class="btn b-rad-none btn-default">Cancel</button>
                                                                                                <button type="button" data-dismiss="modal" class="btn b-rad-none btn-success">Confirm</button>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </form>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="dropdown inline">
                                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm btn-default b-rad-none p-t-10 p-b-10">
                                            <i class="fa fa-angle-down"></i>
                                        </button>
                                        <div aria-labelledby="dropdownMenuLink" class="dropdown-menu dropdown-menu-right b-rad-none no-padding pointer" style="box-shadow: none; min-width: 150px;">
                                            <a href="https://www.izyim.com/order/3573/profile">
                                                <div class="row no-margin align-items-center justify-content-center text-black" style="border-bottom: 1px solid rgb(225, 225, 225);">
                                                    <div class="col-3 p-t-15 p-b-15 bg-master-lighter muted">
                                                        <i class="fa fa-chevron-right fs-10"></i>
                                                    </div>
                                                    <div class="col" style="white-space: nowrap;">
                                                        <span class="fs-10 all-caps bold">View Details</span>
                                                    </div>
                                                </div>
                                            </a>
                                            <div class="text-danger all-caps gb-master-lightest" style="white-space: nowrap;">
                                                <div class="row no-margin align-items-center justify-content-center">
                                                    <div class="col-3 p-t-15 p-b-15 bg-master-lighter">
                                                        <i class="fa fa-times fs-10"></i>
                                                    </div>
                                                    <div class="col" style="white-space: nowrap;">
                                                        <span class="fs-10 bold">Cancel Order</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="order-history-border"></div>
                        </div>
                    </div>
                    <div class="row fs-12 p-t-15 p-b-15 m-l-0 m-r-0 ">
                        <div class="col">
                            <div class="row no-margin">
                                <div class="col no-padding relative b-a b-grey b-dashed qr-container">
                                    <a href="https://www.izyim.com/3573/qr/pdf/download" target="_blank">
                                        <div class="absolute padding-10 bg-white b-b b-l b-grey b-dashed pdf-button" style="right: 0px; top: 0px;">
                                            <svg
                                                    xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 172 172" 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,172v-172h172v172z" fill="none"></path>
                                                    <g>
                                                        <path d="M22.575,162.325v-152.65h80.195l38.055,38.055v114.595z" fill="#ffffff"></path>
                                                        <path d="M102.34,10.75l37.41,37.41v113.09h-116.1v-150.5h78.69M103.2,8.6h-81.7v154.8h120.4v-116.1l-38.7,-38.7z" fill="#c74343"></path>
                                                        <path d="M102.125,48.375v-38.7h0.645l38.055,38.055v0.645z" fill="#ffd9d9"></path>
                                                        <path d="M103.2,11.61l35.69,35.69h-35.69v-35.69M103.2,8.6h-2.15v40.85h40.85v-2.15l-38.7,-38.7zM52.245,129c-3.01,0 -4.945,-2.365 -4.945,-4.515c0,-5.805 7.74,-10.75 17.845,-14.19c4.3,-7.525 8.385,-16.985 11.18,-25.585c-2.365,-6.235 -3.87,-12.04 -3.87,-16.125c0,-2.365 0.43,-4.3 1.29,-5.59c1.075,-1.72 2.795,-2.795 4.73,-2.795c1.935,0 3.44,1.075 4.3,2.795c0.645,1.29 1.075,3.01 1.075,5.375c0,4.085 -1.075,9.89 -3.225,16.555c2.795,7.095 7.095,14.405 12.04,19.78c7.74,-0.645 13.975,-0.43 17.845,0.86c4.3,1.505 5.375,3.87 5.375,5.805c0,1.935 -0.86,6.235 -7.955,6.235c-6.02,0 -11.825,-3.44 -16.77,-8.385c-7.955,0.86 -16.125,2.58 -23.005,4.945c-5.16,8.385 -10.75,14.835 -15.91,14.835zM51.6,124.485c0,0 0.215,0.215 0.645,0.215c2.365,0 5.59,-3.225 9.03,-8.17c-5.805,2.58 -9.675,5.375 -9.675,7.955zM97.18,108.575c3.44,2.795 7.095,4.515 10.965,4.515c3.655,0 3.655,-1.29 3.655,-1.935c0,-0.86 -1.72,-1.505 -2.365,-1.72c-2.15,-0.645 -5.16,-1.075 -9.03,-1.075c-1.075,0.215 -2.15,0.215 -3.225,0.215zM78.905,90.73c-2.15,6.02 -4.73,12.255 -7.74,17.845c5.375,-1.505 11.18,-2.58 16.555,-3.225c-3.44,-4.515 -6.45,-9.675 -8.815,-14.62zM78.475,64.5c-0.43,0 -0.645,0 -1.075,0.645c-0.215,0.43 -0.645,1.505 -0.645,3.44c0,2.58 0.43,5.59 1.505,9.03c0.86,-3.655 1.29,-6.88 1.29,-9.46c0,-1.935 -0.43,-3.01 -0.43,-3.44c-0.215,-0.215 -0.43,-0.215 -0.645,-0.215z" fill="#c74343"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                    </a>
                                    <img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl={&quot;hash&quot;:&quot;{1*23456}&quot;,&quot;id&quot;:3573}" class="w-100">
                                </div>
                            </div>
                            <div class="row hide">
                                <div class="col">
                                    <div class="row m-b-15">
                                        <div class="col">
                                            <small class="muted all-caps">Delivery Address</small>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col">
                                            <div class="bold m-b-5">Business Address</div>
                                            <div class="hint-text semi-bold">016-337 8188</div>
                                            <div class="m-t-15 m-b-15 hint-text">20 Jalan Taming 8 Taming Jaya Industrial Park  Balakong 43300 Selangor Malaysia</div>
                                            <small class="block text-complete pointer all-caps">Change Address</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-9 p-l-0">
                            <div class="row m-l-0 m-r-0 m-b-10">
                                <div class="col p-l-0">
                                    <small class="muted all-caps">Order History</small>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col p-l-0">
                                    <div class="row m-l-0 m-r-0 relative order-history p-b-15">
                                        <div class="absolute bullet-connector hint-text"></div>
                                        <div class="col">
                                            <div class="row align-items-center justify-content-center fs-10">
                                                <div class="col-auto p-r-10">
                                                    <div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
                                                </div>
                                                <div class="col-auto hint-text p-l-0">
                                                    30-07-2020
                                                </div>
                                                <div class="col p-l-0 lh-20">Guangzhou confirmed as your order's warehouse</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-l-0 m-r-0 relative order-history p-b-15">
                                        <div class="absolute bullet-connector hint-text"></div>
                                        <div class="col">
                                            <div class="row align-items-center justify-content-center fs-10">
                                                <div class="col-auto p-r-10">
                                                    <div class="bg-master-light btn-rounded hint-text" style="width: 8px; height: 8px;"></div>
                                                </div>
                                                <div class="col-auto hint-text p-l-0">
                                                    30-07-2020
                                                </div>
                                                <div class="col p-l-0 lh-20">Order number has been created</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>