<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h2>{{::vm.translate.get('Orders')}}</h2>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">{{::vm.translate.get('Create Order')}}</h2>
            </div>
            <div class="card-body order-form">
                <form name="orderForm" novalidate 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="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label class="control-label">{{::vm.translate.get('Customer')}}</label>
                                <div class="search-user">
                                    <div class="form-row">
                                        <div class="col-8">
                                            <input name="customer-search" ng-model="vm.customer.fullName" ng-change="vm.searchCustomers()" class="form-control" placeholder="{{::vm.translate.get('Search customer')}}..." autocomplete="off" />
                                        </div>
                                        <div class="col">
                                            <a ui-sref="customer-create" class="btn btn-default">{{::vm.translate.get('New Customer')}}</a>
                                        </div>
                                    </div>
                                    <div id="search-users-results" ng-show="vm.isSearchingCustomers">
                                        <div class="users" ng-repeat="user in vm.searchedCustomers" ng-click="vm.selectCustomer(user)">{{user.id}} - {{user.fullName}} - {{user.email}} - {{user.phoneNumber}}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" ng-show="vm.customer.id">
                                <label class="control-label">{{::vm.translate.get('Customer Id')}}</label>
                                <div class="search-user">
                                    <input name="customer-name" ng-model="vm.customer.id" class="form-control" />
                                </div>
                            </div>
                            <div class="form-row" ng-show="vm.customer.email">
                                <div class="form-group col-md-6">
                                    <label class="control-label">{{::vm.translate.get('Customer Email')}}</label>
                                    <div class="search-user">
                                        <input name="customer-email" ng-model="vm.customer.email" class="form-control" />
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="control-label">{{::vm.translate.get('Customer Phone')}}</label>
                                    <div class="search-user">
                                        <input name="customer-phone" ng-model="vm.customer.phoneNumber" class="form-control" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <table ng-show="vm.customer.id" class="table table-striped">
                        <tr>
                            <th></th>
                            <th>{{::vm.translate.get('Product Id')}}</th>
                            <th>{{::vm.translate.get('Product Name')}}</th>
                            <th class="text-right">{{::vm.translate.get('Price')}}</th>
                            <th>{{::vm.translate.get('Quantity')}}</th>
                            <th>{{::vm.translate.get('Actions')}}</th>
                        </tr>
                        <tr ng-repeat="item in vm.cart.items">
                            <td><img ng-src="{{item.productImage}}" style="max-height: 60px" /></td>
                            <td>{{item.productId}}</td>
                            <td>{{item.productName}}</td>
                            <td class="text-right">{{item.productPrice | number}}</td>
                            <td><input class="form-control" ng-change="vm.updateCartItemQuantity(item)" ng-model="item.quantity" /></td>
                            <td><button ng-click="vm.removeCartItem(item)" class="btn btn-danger btn-xs delete"> <i class="fas fa-times-circle"></i></button></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input class="form-control" ng-model="vm.addingProduct.id" ng-keypress="vm.enterProductId($event)" placeholder="input id & enter" style="max-width:139px" />
                            </td>
                            <td colspan="4" class="form-inline">
                                <div class="input-group mb-3">
                                    <input class="form-control" placeholder="search by product name" ng-model="vm.addingProduct.name" ng-change="vm.searchProducts()" />
                                    <div class="input-group-append">
                                        <button class="btn btn-default" ng-click="vm.addProduct()">{{::vm.translate.get('Add Product')}}</button>
                                    </div>
                                </div>
                                <div id="search-products-results" ng-show="vm.isSearchingProducts">
                                    <div class="products" ng-repeat="product in vm.searchedProducts" ng-click="vm.selectProduct(product)">{{product.id}} - {{product.name}}</div>
                                </div>
                            </td>
                        </tr>
                    </table>

                    <div ng-show="vm.customer.id && vm.cart.items.length > 0">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4>{{::vm.translate.get('Shipping address')}}</h4>
                                <div class="radio" ng-repeat="address in vm.customerAddress.addresses">
                                    <label>
                                        <input type="radio" ng-change="vm.updateTaxAndShippingPrice()" name="shippingAddressId" value="{{address.userAddressId}}" ng-model="vm.selectedShippingAddressId">
                                        <strong>{{::vm.translate.get('Contact Name')}}: {{address.contactName}} </strong><br />
                                        {{::vm.translate.get('Address Line 1')}}: {{address.addressLine1}} <br />
                                        {{::vm.translate.get('Address Line 2')}}: {{address.addressLine2}} <br />
                                        {{::vm.translate.get('Phone')}}: {{address.phone}}
                                    </label>
                                </div>
                                <div class="radio">
                                    <label>
                                        <input type="radio" ng-change="vm.updateTaxAndShippingPrice()" name="shippingAddressId" ng-model="vm.selectedShippingAddressId" value="0" />
                                        {{::vm.translate.get('Add another address')}}
                                    </label>
                                </div>
                                <div ng-show="vm.selectedShippingAddressId == 0">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label class="control-label">{{::vm.translate.get('Country')}}</label>
                                            <div>
                                                <select required class="form-control" ng-model="vm.shippingAddress.countryId" ng-change="vm.onCountrySelected(vm.shippingAddress.countryId)" ng-options="country.id as country.name for country in vm.countries"></select>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label class="control-label">{{::vm.translate.get('State Or Province')}}</label>
                                            <div>
                                                <select required class="form-control" ng-model="vm.shippingAddress.stateOrProvinceId" ng-change="vm.onStateOrProvinceSelected(vm.shippingAddress.stateOrProvinceId)" ng-options="stateOrProvince.id as stateOrProvince.name for stateOrProvince in vm.countryStatesOrProvinces.statesOrProvinces"></select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6" ng-show="vm.countryStatesOrProvinces.isDistrictEnabled">
                                            <label class="control-label">{{::vm.translate.get('District')}}</label>
                                            <div>
                                                <select name="districtId" class="form-control" ng-change="vm.updateTaxAndShippingPrice()" ng-model="vm.shippingAddress.districtId" ng-options="district.id as district.name for district in vm.districts">
                                                    <option value="0">{{::vm.translate.get('None')}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6" ng-show="vm.countryStatesOrProvinces.isZipCodeEnabled">
                                            <label class="control-label">{{::vm.translate.get('Postal Code')}}</label>
                                            <div>
                                                <input name="zipCode" ng-change="vm.updateTaxAndShippingPrice()" ng-model="vm.shippingAddress.zipCode" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6" ng-show="vm.countryStatesOrProvinces.isCityEnabled">
                                            <label class="control-label">{{::vm.translate.get('City')}}</label>
                                            <div>
                                                <input name="city" ng-model="vm.shippingAddress.city" class="form-control" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{::vm.translate.get('Address Line 1')}}</label>
                                        <div>
                                            <input name="addressLine1" required ng-model="vm.shippingAddress.addressLine1" class="form-control" 
                                                   ng-class="{'is-invalid': orderForm.addressLine1.$invalid}"/>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label class="control-label">{{::vm.translate.get('Contact Name')}}</label>
                                            <div>
                                                <input name="contactName" required ng-model="vm.shippingAddress.contactName" class="form-control" 
                                                       ng-class="{'is-invalid': orderForm.contactName.$invalid}"/>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label class="control-label">{{::vm.translate.get('Phone')}}</label>
                                            <div>
                                                <input name="contactPhone" required ng-model="vm.shippingAddress.phone" class="form-control" 
                                                       ng-class="{'is-invalid': orderForm.contactPhone.$invalid}"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <h4>{{::vm.translate.get('Billing address')}}</h4>
                            </div>
                        </div>
                        <h4>{{::vm.translate.get('Shipping options')}}</h4>
                        <div>
                            <div class="radio" ng-repeat="option in vm.shippingOptions">
                                <label>
                                    <input type="radio" ng-change="vm.updateTaxAndShippingPrice()" ng-model="vm.selectedShippingOption" value="{{option.name}}" /> <strong> {{option.name}} ({{option.priceText}})</strong>
                                </label>
                            </div>
                        </div>
                        <h4>{{::vm.translate.get('Order note')}}</h4>
                        <textarea class="form-control" ng-model="vm.cart.orderNote" rows="2"></textarea>
                        <div class="coupon-form" ng-if="vm.cart.items.length">
                            <h4>{{::vm.translate.get('Coupon code')}}</h4>
                            <div class="row">
                                <div class="col-6">
                                    <div class="input-group">
                                        <input class="form-control" ng-keypress="vm.enterCouponCode($event)" ng-model="vm.couponCode" placeholder="{{::vm.translate.get('Input coupon')}}">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-default" ng-click="vm.applyCoupon()">{{::vm.translate.get('Apply')}}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr />
                        <h4>{{::vm.translate.get('Order summary')}}</h4>
                        <table class="table table-striped">
                            <tr>
                                <th>{{::vm.translate.get('Product Id')}}</th>
                                <th>{{::vm.translate.get('Product')}}</th>
                                <th class="text-right">{{::vm.translate.get('Quantity')}}</th>
                                <th class="text-right">{{::vm.translate.get('Price')}}</th>
                                <th class="text-right">{{::vm.translate.get('Total')}}</th>
                            </tr>
                            <tr ng-repeat="item in vm.cart.items">
                                <td>{{item.productId}}</td>
                                <td>{{item.productName}}</td>
                                <td class="text-right">{{item.quantity}}</td>
                                <td class="text-right">{{item.productPriceString}}</td>
                                <td class="text-right">{{item.totalString}}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right">Subtotal</td>
                                <td class="text-right">{{vm.cart.subTotalString}}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right">Shipping</td>
                                <td class="text-right">{{vm.cart.shippingAmountString}}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right">Disount</td>
                                <td class="text-right">{{vm.cart.discountString}}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right">Tax</td>
                                <td class="text-right">{{vm.cart.taxAmountString}}</td>
                            </tr>
                            <tr>
                                <td colspan="4" class="text-right"><strong>Order Total</strong></td>
                                <td class="text-right"><strong>{{vm.cart.orderTotalString}}</strong></td>
                            </tr>
                        </table>
                    </div>

                    <div class="form-group">
                        <div class="">
                            <button class="btn btn-success float-right" ng-disabled="!vm.selectedShippingOption || vm.cart.items.length === 0 || (vm.selectedShippingAddressId === '0' &&  orderForm.$invalid)" ng-click="vm.createOrder()">
                                <span class="fa fa-save"></span> {{::vm.translate.get('Create Order')}}
                            </button>
                            <button ui-sref="order" class="btn btn-default"> {{::vm.translate.get('Cancel')}}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>


