<div class="app-header bg-header-1">
    <div class="layout-fixed full-h text-center">
        <div class="full-h v-bottom-i pdB15">
            <div class="app-content-header bg-header-1">
                <div class="text-name-header-1 nowrap">{{setCustomerName(OpportunitiesActionData.selectCustomer.company_name,OpportunitiesActionData.selectCustomer.first_name,OpportunitiesActionData.selectCustomer.last_name)}} opportunity history</div>
                <div class="text-title-header-1 nowrap mgT10">View orders</div>
            </div>
        </div>
    </div>
    <button type="button" class="popup-back-button bg-transparent pd0-i biger-3-time" ng-click="closeTarget('#popupOpportunityHistoryOrder')"></button>
</div>
<div class="app-content">
    <div class="app-content-inner content-pd">
        <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollOpportunityHistoryOrder" on-scroll="scrollContent('scrollOpportunityHistoryOrder')">
            <div class="box-expandable box-setting-4" ng-repeat="item in invoice">
                <div class="content content-in">
                    <div class="itm row-one-content">
                        <div class="name clr-clickable capitalize" ng-click="redirectTo('order.html#/board/order/' + OpportunitiesActionData.selectCustomer.id + '/' + item.id + '/invoice/null/0')">{{item.invoice_no}}</div>
                        <div class="layout-fixed mgT8">
                            <div class="layout-w-1:3">
                                <div class="text-name-2 v-bottom-i">$ {{item.balance_due}}</div>
                            </div>
                            <div class="text-title-4 baseline">Appointment date <span class="text-date-1">{{item.created_date}}</span></div>
                        </div>
                    </div>
                    <div class="itm no-saperator item-expandable">
                        <div class="layout-fixed">
                            <div class="v-top-i">
                                <div class="text-title-4">Item</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text-title-4">Qty</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text-title-4">Ext price</div>
                            </div>
                        </div>
                        <div class="layout-fixed mgT4" ng-repeat="items in invoiceData" ng-if="item.id==items.order_id" ng-style="{ 'text-decoration': items.declined==1 ? 'line-through' : 'initial' } ">
                            <div class="v-top-i">
                                <div class="text">{{items.name}}</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text">{{items.quantity}}</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text">{{formatForExtendPrice(items.extended_price)}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="more-overlay no-item-more clear" onclick="toggleExpand(this)">
                        <div class="h30px layout-fixed w-auto-i pdL10">
                            <div class="text-link-1 pdR10"><span class="more-text">Show detail</span><span class="less-text">Hide detail</span></div>
                            <div>
                                <button class="more-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h20px" viewBox="0 0 60 60"> <circle r="3" cy="30" cx="18" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="30" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="42" style="fill:#1075bb;" /> <line y2="16" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="16" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> </svg>
                                </button>
                                <button class="less-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"> <polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /> <polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /> </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-expandable box-setting-4" ng-repeat="item in saleorder">
                <div class="content content-in">
                    <div class="itm row-one-content">
                        <div class="name clr-clickable capitalize" ng-click="redirectTo('order.html#/board/order/' + OpportunitiesActionData.selectCustomer.id + '/' + item.id + '/saleorder/null/0')">{{item.invoice_no}}</div>
                        <div class="layout-fixed mgT8">
                            <div class="layout-w-1:3">
                                <div class="text-name-2 v-bottom-i">$ {{item.balance_due}}</div>
                            </div>
                            <div class="text-title-4 baseline">Appointment date <span class="text-date-1">{{item.created_date}}</span></div>
                        </div>
                    </div>
                    <div class="itm no-saperator item-expandable">
                        <div class="layout-fixed">
                            <div class="v-top-i">
                                <div class="text-title-4">Item</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text-title-4">Qty</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text-title-4">Ext price</div>
                            </div>
                        </div>
                        <div class="layout-fixed mgT4" ng-repeat="items in invoiceData" ng-if="item.id==items.order_id" ng-style="{ 'text-decoration': items.declined==1 ? 'line-through' : 'initial' } ">
                            <div class="v-top-i">
                                <div class="text">{{items.name}}</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text">{{items.quantity}}</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text">{{formatForExtendPrice(items.extended_price)}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="more-overlay no-item-more clear" onclick="toggleExpand(this)">
                        <div class="h30px layout-fixed w-auto-i pdL10">
                            <div class="text-link-1 pdR10"><span class="more-text">Show detail</span><span class="less-text">Hide detail</span></div>
                            <div>
                                <button class="more-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h20px" viewBox="0 0 60 60"> <circle r="3" cy="30" cx="18" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="30" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="42" style="fill:#1075bb;" /> <line y2="16" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="16" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> </svg>
                                </button>
                                <button class="less-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"> <polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /> <polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /> </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-expandable box-setting-4" ng-repeat="item in estimate">
                <div class="content content-in">
                    <div class="itm row-one-content">
                        <div class="name clr-black capitalize" ng-click="redirectTo('order.html#/board/order/' + detailCustomerData.id + '/' + item.id + '/estimate/null/0')">{{item.invoice_no}}</div>
                        <div class="layout-fixed mgT8">
                            <div class="layout-w-1:3">
                                <div class="text-name-2 v-bottom-i">$ {{item.balance_due}}</div>
                            </div>
                            <div class="text-title-4 baseline">Appointment date <span class="text-date-1">{{item.created_date}}</span></div>
                        </div>
                    </div>
                    <div class="itm no-saperator item-expandable" >
                        <div class="layout-fixed">
                            <div class="v-top-i">
                                <div class="text-title-4">Item</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text-title-4">Qty</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text-title-4">Ext price</div>
                            </div>
                        </div>
                        <div class="layout-fixed mgT4" ng-repeat="items in estimateData" ng-if="item.id==items.order_id" ng-style="{ 'text-decoration': items.declined==1 ? 'line-through' : 'initial' } ">
                            <div class="v-top-i">
                                <div class="text">{{items.name}}</div>
                            </div>
                            <div class="w60px v-top-i text-center">
                                <div class="text">{{items.quantity}}</div>
                            </div>
                            <div class="w80px v-top-i">
                                <div class="text">{{formatForExtendPrice(items.extended_price)}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="more-overlay no-item-more clear" onclick="toggleExpand(this)">
                        <div class="h30px layout-fixed w-auto-i pdL10">
                            <div class="text-link-1 pdR10"><span class="more-text">Show detail</span><span class="less-text">Hide detail</span></div>
                            <div>
                                <button class="more-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h20px" viewBox="0 0 60 60"> <circle r="3" cy="30" cx="18" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="30" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="42" style="fill:#1075bb;" /> <line y2="16" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="16" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> </svg>
                                </button>
                                <button class="less-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"> <polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /> <polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /> </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</div>
