<div class="content-header">
    <div class="row">
        <div class="col-md-8">
            <h2>{{::vm.translate.get('Order Details')}} #{{vm.order.id}}</h2>
        </div>
        <div class="col-md-4 text-right">
            <a href="/api/invoices/print/{{vm.order.id}}" target="_blank" class="btn btn-info"><span class="fa fa-print"></span> {{::vm.translate.get('Print Invoice')}}</a>
            <!--<a href="/api/invoices/download/{{vm.order.id}}" target="_blank" class="btn btn-info"><span class="fa fa-download-alt"></span> {{::vm.translate.get('Download Invoice')}}</a>-->
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Order & Customer Information')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Order')}} #{{vm.order.id}}</h5>
                        <table class="table table-striped">
                            <tr>
                                <td>{{::vm.translate.get('Order Date')}}</td>
                                <td>{{vm.order.createdOn | date:'medium'}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Order Status')}}</td>
                                <td>{{vm.order.orderStatusString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Order Total')}}</td>
                                <td>{{vm.order.orderTotalString}}</td>
                            </tr>
                            <tr ng-if="vm.order.isMasterOrder">
                                <td>{{::vm.translate.get('Sub Orders')}}</td>
                                <td>
                                    <ul class="list-inline">
                                        <li ng-repeat="id in vm.order.subOrderIds">
                                            <a ui-sref="order-detail({id: id})">{{::vm.translate.get('Order')}} #{{id}}</a>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Customer Information')}}</h5>
                        <table class="table table-striped">
                            <tr>
                                <td>{{::vm.translate.get('Customer Name')}}</td>
                                <td><a ui-sref="customer-edit({id: vm.order.customerId})">{{vm.order.customerName}}</a></td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Email')}}</td>
                                <td>{{vm.order.customerEmail}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Customer Group')}}</td>
                                <td></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Address Information')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Billing Address')}}</h5>
                    </div>
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Shipping Address')}}</h5>
                        <p>
                            {{::vm.translate.get('Contact Name')}}: <strong>{{vm.order.shippingAddress.contactName}}</strong> <br />
                            {{::vm.translate.get('Address Line 1')}}: {{vm.order.shippingAddress.addressLine1}} <br />
                            {{::vm.translate.get('Address Line 2')}}: {{vm.order.shippingAddress.addressLine2}} <br />
                            {{::vm.translate.get('Phone')}}: {{vm.order.shippingAddress.phone}}
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Product Information')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped order-item-list">
                            <thead>
                                <tr>
                                    <th>{{::vm.translate.get('Product')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Price')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Quantity')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Total')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Tax Amount')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Tax Percent')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Discount Amount')}}</th>
                                    <th class="text-right">{{::vm.translate.get('Row Total')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in vm.order.orderItems">
                                    <td>
                                        <a ui-sref="product-edit({id: item.productId})">{{item.productName}}</a>
                                        <ul ng-if="item.variationOptions.length > 0" class="list-unstyled">
                                            <li ng-repeat="opt in item.variationOptions">
                                                <span>{{opt.optionName}}:</span> {{opt.value}}
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="text-right">{{item.productPriceString}}</td>
                                    <td class="text-right">
                                        {{::vm.translate.get('Ordered')}} {{item.quantity}}
                                        <span ng-if="item.shippedQuantity">
                                            <br />
                                            {{::vm.translate.get('Shipped')}} {{item.shippedQuantity}}
                                        </span>
                                    </td>
                                    <td class="text-right">{{item.totalString}}</td>
                                    <td class="text-right">{{item.taxAmountString}}</td>
                                    <td class="text-right">{{item.taxPercent}}</td>
                                    <td class="text-right">{{item.discountAmountString}}</td>
                                    <td class="text-right">{{item.rowTotalString}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="col-6"></div>
                    <div class="col-6">
                        <table class="table table-striped">
                            <tr>
                                <td>{{::vm.translate.get('Subtotal')}}</td>
                                <td class="text-right">{{vm.order.subtotalString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Shipping')}}</td>
                                <td class="text-right">{{vm.order.shippingAmountString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Tax')}}</td>
                                <td class="text-right">{{vm.order.taxAmountString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Discount')}}</td>
                                <td class="text-right">{{vm.order.discountAmountString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Payment Fee')}}</td>
                                <td class="text-right">{{vm.order.paymentFeeAmountString}}</td>
                            </tr>
                            <tr>
                                <td>{{::vm.translate.get('Order Total')}}</td>
                                <td class="text-right"><strong>{{vm.order.orderTotalString}}</strong></td>
                            </tr>
                        </table>
                    </div>
                </div>

            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Order Note')}}</h3>
            </div>
            <div class="card-body">
                {{vm.order.orderNote}}
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Payment & Shipping Method')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Payment')}}: {{vm.order.paymentMethod}}</h5>
                        <payment-list-by-order order-id="vm.orderId"></payment-list-by-order>
                    </div>
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Shipping')}}: {{vm.order.shippingMethod}}</h5>
                        <shipment-list-by-order order-id="vm.orderId"></shipment-list-by-order>
                        <div class="text-right">
                            <button class="btn btn-success" ui-sref="shipment-create({orderId: vm.order.id})">{{::vm.translate.get('Add Shipment')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{::vm.translate.get('Status History & Action')}}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h5 class="pb-2">{{::vm.translate.get('History')}}</h5>
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>{{::vm.translate.get('Date')}}</th>
                                    <th>{{::vm.translate.get('Status')}}</th>
                                    <th>{{::vm.translate.get('Changed by')}}</th>
                                    <th>{{::vm.translate.get('Note')}}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="item in vm.orderHistories">
                                    <td>{{item.createdOn | date:'medium'}}</td>
                                    <td><span ng-if="item.oldStatus">{{item.oldStatus}} &rarr; </span>{{item.newStatus}}</td>
                                    <td>
                                        <a ng-if="item.createdById >= 10" ui-sref="user-edit({id: item.createdById})">{{item.createdByFullName}}</a>
                                        <span ng-if="item.createdById < 10">{{item.createdByFullName}}</span>
                                    </td>
                                    <td>{{item.note}}</td>
                                </tr>
                            </tbody>
                        </table>
                        
                    </div>
                    <div class="col-md-6">
                        <h5>{{::vm.translate.get('Action Form')}}</h5><hr />
                        <form name="orderStatusForm" class="form-horizontal">
                            <div class="col-sm-offset-2 bg-danger" ng-show="vm.validationErrors">
                                <ul>
                                    <li ng-repeat="error in vm.validationErrors">{{error}}</li>
                                </ul>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Order Status')}}</label>
                                <div>
                                    <select class="form-control" ng-model="vm.order.orderStatus" ng-options="s.id as s.name for s in vm.orderStatus"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Note')}}</label>
                                <div>
                                    <textarea name="description" ng-model="vm.orderStatusNote" rows="3" class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <div>
                                    <button class="btn btn-success float-right" ng-click="vm.changeOrderStatus()"><span class="fa fa-save"></span> {{::vm.translate.get('Save')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <button ui-sref="order" class="btn btn-default float-right">{{::vm.translate.get('Back')}}</button>
            </div>
        </div>
        <br />
    </div>
</section>