<div class="widget">
    <div class="widget-content">
        <div class="headline">
            <h4>Purchase Order Summary</h4>
        </div>
        <br>
        <div ng-show="loading">
            <i class="fa fa-spinner fa-spin"></i> Loading the order, please be patient...
            <br>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <table class="table table-striped" style="border: 1px solid #e1e1e1;">
                    <thead class="table-header"><tr><th colspan="2">Basic Details</th></tr></thead>
                    <tr><th>Ordered Date:</th><td>{[{ order.created_at | fromNow }]}</td></tr>
                    <tr><th>Reference Number:</th><td><span editable-text="order.reference_number" onaftersave="updateOrder(order)">{[{ order.reference_number }]}</span></td></tr>
                    <tr><th>Purchase Order Number:</th><td>{[{ order.purchase_order_number }]}</td></tr>
                    <tr>
                        <th>Supplier:</th>
                        <td>
                            <span class="text-info dropdown">
                            <a href="#" data-toggle="dropdown" data-eat-click><span class="editable editable-click">{[{ order.supplier.name }]}</span></a>
                                <ul class="dropdown-menu dropdown-menu-arrow">
                                    <li>
                                        <ul class="dropdown-menu scroll-menu">
                                            <li ng-repeat="supplier in suppliers" ng-class="{active: order.supplier_id == supplier.id }"><a tabindex="-1" href="#" ng-click="updateOrder({supplier_id: supplier.id })" ng-bind="supplier.name" data-eat-click></a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="col-sm-6 text right">
                <table class="table table-striped" style="border: 1px solid #e1e1e1;">
                    <thead class="table-header"><tr><th colspan="2">Cost Details Excl. VAT</th></tr></thead>
                    <tr><th>Delivery Cost:</th><td><span editable-number="order.delivery_cost" e-step="any" onaftersave="updateOrder(order)">{[{ order.delivery_cost | currency: "£" }]}</span></td></tr>
                    <tr><th>Discount Amount:</th><td><span editable-number="order.discount_amount"  e-step="any" onaftersave="updateOrder(order)">{[{ order.discount_amount | currency: "£" }]}</span></td></tr>
                    <tr><th>Items Cost:</th><td>{[{ order.items_cost | currency: "£" }]}</td></tr>
                    <tr><th>Total Cost:</th><td>{[{ order.total_cost | currency: "£" }]}</td></tr>
                    <tr><th>Total VAT:</th><td>{[{ order.total_cost * (order.vat/100) | currency: "£" }]}</td></tr>
                    <tr><th>Total Paid:</th><td>{[{ order.total_paid | currency: "£" }]}</td></tr>
                    <tr><th>Payment method</th><td>{[{order.payment_method.name}]}</td></tr>
                </table>
            </div>
        </div>
        <h4>Order Items:</h4>
        <table class="table table-striped">
            <thead class="table-header">
                <th>Product Name</th>
                <th class="centered">serial numbers</th>
                <th class="centered">Quantity</th>
                <th class="centered">Received</th>
                <th class="centered">Refused</th>
                <th class="centered">Unit Cost</th>
                <th class="centered">Unit Retail Price</th>
                <th class="centered">Unit VAT</th>
                <th class="centered">Total Cost</th>
                <th></th>
            </thead>
            <tbody>
                <tr ng-repeat="item in order.items">
                    <td>{[{ item.stock.name }]}</td>
                    <td class="centered" >                       
                        <p ng-repeat="serials in item.serials">{[{ serials.serial_number }]}</p>
                    </td>
                    <td class="centered">{[{ item.quantity }]}</td>
                    <td class="centered"><span editable-number="item.received" onaftersave="receive(item)">{[{ item.received_quantity }]}</span></td>
                    <td class="centered"><span editable-number="item.refused" onaftersave="refuse(item)">{[{ item.refused_quantity}]}</span></td>
                    <td class="centered"><span editable-text="item.unit_cost" onaftersave="updateItem(item)">{[{ item.unit_cost | currency : "£"}]}</span></td>
                    <td class="centered">{[{ item.stock.retail_price | currency : "£" }]}</td>
                    <td class="centered">{[{ item.unit_cost * (order.vat/100) | currency : "£" }]}</td>
                    <td class="centered">{[{ item.total_paid | currency : "£" }]}</td>
                    <td>
                        <span class="label label-success pull-right" ng-if="item.refused_quantity + item.received_quantity == item.quantity">Completed</span>
                        <span class="label label-warning pull-right" ng-if="item.refused_quantity + item.received_quantity != item.quantity">Pending</span>
                    </td>
                </tr>
            </tbody>
        </table>
        <div paginator="paginator"></div>
        <div class="alert alert-danger" ng-if="errorMessage">
            <p class="lead"><i class="fa fa-warning"></i> Invalid values:</p>
            <ul>
               <li>{[{ errorMessage }]}</li>
            </ul>
        </div>
    </div>
</div>

<script type="text/ng-template" id="stock/order_items_serials.html">
    @include('stock::order_items_serials')
</script>