Receipt-sample.html

<button type="button" class="btn btn-inline" ng-click="vm.back()"><</button>
<button type="button" class="btn btn-inline" ng-click="vm.print()">Print</button>
<button type="button" class="btn btn-inline" ng-click="vm.downloadPdf('receipt')">Pdf</button>
<div class="container-fluid" id="receipt" style="background: white">
    <style type="text/css">
        .invoice-title h2, .invoice-title h3 {
            display: inline-block;
        }

        .table > tbody > tr > .no-line {
            border-top: none;
        }

        .table > thead > tr > .no-line {
            border-bottom: none;
        }

        .table > tbody > tr > .thick-line {
            border-top: 2px solid;
        }

        .white-border-color {
            border-color: white
        }
    </style>

    <div class="box-typical box-typical-padding">
        <div class="row">
            <div class="col col-lg-12">
                <!--<div class="row text-center">
                    <h5>
                        <strong>
                            <label class="text-center">
                                Invoice/Bill:
                            </label>
                        </strong>
                    </h5>
                </div>-->
                <div class="row text-center" ng-hide="true">
                    <label class="text-center" style="color: darkgray;">
                        Printed on {{vm.today | date}} from BizBook365, proudly developed by Code Coopers
                    </label>
                </div>
                <div class="col-xs-12" style="margin-top: 20px">
                    <div class="row">
                        <div class="col-xs-6">
                            <img ng-src="{{vm.model.shop.logoUrl}}" style="height:100px;width:100px" />
                        </div>
                        <div class="col-xs-6 text-right">
                            <br />
                            <br />


                            <address class="ng-binding">
                                Order # <strong>{{vm.model.orderNumber}}</strong>
                                {{vm.model.orderDate | date}}<br>
                                <strong>{{vm.model.orderReferenceNumber}}</strong>
                            </address>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-6">
                            <address>
                                <strong>Billed To:</strong><br>
                                {{vm.model.customerName}}<br />
                                {{vm.model.customerPhone}}<br />
                                {{vm.model.address.streetAddress}}<br />

                                <!--{{vm.model.address.addressName}}<br />-->
                                {{vm.model.address.area}} {{vm.model.address.thana}} {{vm.model.address.district}}<br />
                                l.
                                <strong>Note:</strong><br />
                                {{vm.model.customerNote}}<br />
                                Customer Total Due:<strong>( {{vm.model.customer.totalDue}} )</strong>
                            </address>
                        </div>
                        <div class="col-xs-6 text-right">
                            <address>
                                <strong>{{vm.model.shop.name}}</strong><br>
                                {{vm.model.shop.streetAddress}}<br />
                                {{vm.model.shop.area}},{{vm.model.shop.thana}},{{vm.model.shop.postCode}},{{vm.model.shop.district}}<br />
                                {{vm.model.shop.website}}<br />
                                {{vm.model.shop.facebook}}<br />
                                {{vm.model.shop.email}}<br />
                                {{vm.model.shop.phone}}<br />
                            </address>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="panel panel-default white-border-color">
                        <div class="panel-heading">
                            <h4 class="panel-title">Order summary</h4>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <td><strong>Item</strong></td>
                                            <td class="text-center"><strong>Price</strong></td>
                                            <td class="text-center"><strong>Quantity</strong></td>
                                            <td class="text-right"><strong>Totals</strong></td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="p in vm.model.saleDetails track by $index" ng-hide="p.isReturned" ng-if="p.quantity>0">
                                            <td>{{p.productDetailName}}</td>
                                            <td class="text-center">{{p.salePricePerUnit}}</td>
                                            <td class="text-center">{{p.quantity}}</td>
                                            <td class="text-right">{{p.total}}</td>
                                        </tr>
                                        <tr>
                                            <td class="thick-line"><strong>Product Total</strong></td>
                                            <td class="thick-line"></td>
                                            <td class="thick-line"></td>
                                            <td class="thick-line text-right">{{vm.model.productAmount}}</td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Delivery Charge</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right">{{vm.model.shippingAmount}}</td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Total</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right">{{vm.model.totalAmount}}</td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Discount</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right">{{vm.model.discountAmount}}</td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Payable</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right">{{vm.model.payableTotalAmount}}</td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Paid</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right"><strong>{{vm.model.paidAmount}}</strong></td>
                                        </tr>
                                        <tr>
                                            <td class="no-line"><strong>Due</strong></td>
                                            <td class="no-line"></td>
                                            <td class="no-line"></td>
                                            <td class="no-line text-right"><strong>{{vm.model.dueAmount}}</strong></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>