From a2cdc2c3d9ce31324472cc1f1c381124407a9021 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Mon, 10 Feb 2020 00:24:18 +0300
Subject: [PATCH] Invoice/ bill item price row calculate..

---
 .../assets/js/components/AkauntingMoney.vue   | 63 +++++++++++++----
 .../assets/js/components/AkauntingSelect.vue  |  3 +
 .../js/components/AkauntingSelectRemote.vue   |  3 +
 resources/assets/js/plugins/bulk-action.js    |  3 -
 resources/assets/js/views/purchases/bills.js  | 41 +++++++++++-
 resources/assets/js/views/sales/invoices.js   | 41 +++++++++++-
 .../views/partials/form/money_group.blade.php | 18 ++++-
 .../views/purchases/bills/create.blade.php    | 10 ++-
 .../views/purchases/bills/edit.blade.php      |  8 ++-
 .../views/purchases/bills/item.blade.php      | 67 ++++++++++++-------
 .../views/sales/invoices/create.blade.php     |  5 +-
 resources/views/sales/invoices/edit.blade.php |  8 ++-
 resources/views/sales/invoices/item.blade.php | 67 ++++++++++++-------
 13 files changed, 259 insertions(+), 78 deletions(-)

diff --git a/resources/assets/js/components/AkauntingMoney.vue b/resources/assets/js/components/AkauntingMoney.vue
index b584299eb..4f9d733b1 100644
--- a/resources/assets/js/components/AkauntingMoney.vue
+++ b/resources/assets/js/components/AkauntingMoney.vue
@@ -10,7 +10,7 @@
                 </span>
             </div>
 
-            <money :name="name" :placeholder="placeholder" v-model="model" v-bind="money" class="form-control"></money>
+            <money :name="name" @input="input" :placeholder="placeholder" v-bind="money" :value="value" :masked="masked" class="form-control"></money>
         </div>
 
         <div class="invalid-feedback d-block" v-if="error" v-html="error"></div>
@@ -43,11 +43,7 @@ export default {
             default: null,
             description: "Selectbox attribute name"
         },
-        value: {
-            type: String,
-            default: null,
-            description: "Selectbox selected value"
-        },
+        value: 0,
         icon: {
             type: String,
             description: "Prepend icon (left)"
@@ -67,6 +63,11 @@ export default {
             default: null,
             description: "Selectbox disabled status"
         },
+        required: {
+            type: Boolean,
+            default: false,
+            description: "Selectbox disabled status"
+        },
         readonly: {
             type: Boolean,
             default: false,
@@ -77,6 +78,19 @@ export default {
             default: false,
             description: "Selectbox disabled status"
         },
+        dynamicCurrency: {
+            type: Object,
+            default: function () {
+                return {
+                    decimal_mark: '.',
+                    thousands_separator: ',',
+                    symbol_first: 1,
+                    symbol: '$',
+                    precision: 2,
+                };
+            },
+            description: "Dynamic currency"
+        },
         currency: {
             type: Object,
             default: function () {
@@ -85,7 +99,7 @@ export default {
                     thousands_separator: ',',
                     symbol_first: 1,
                     symbol: '$',
-                    precision: '2',
+                    precision: 2,
                 };
             },
             description: "Default currency"
@@ -105,7 +119,7 @@ export default {
                 thousands: this.currency.thousands_separator,
                 prefix: (this.currency.symbol_first) ? this.currency.symbol : '',
                 suffix: (!this.currency.symbol_first) ? this.currency.symbol : '',
-                precision: this.currency.precision,
+                precision: parseInt(this.currency.precision),
                 masked: this.masked
             }
         }
@@ -117,16 +131,41 @@ export default {
 
     methods: {
         change() {
-            this.$emit('change', this.model);
-            this.$emit('interface', this.model);
+            //this.$emit('change', this.model);
+            //this.$emit('interface', this.model);
         },
+        input(event) {
+            console.log(event);
+            this.model = event;
+            this.$emit('change', event);
+            this.$emit('interface', event);
+        }
     },
 
     watch: {
-        model: function (options) {
-
+        dynamicCurrency: function (currency) {
+            this.money = {
+                decimal: currency.decimal_mark,
+                thousands: currency.thousands_separator,
+                prefix: (currency.symbol_first) ? currency.symbol : '',
+                suffix: (!currency.symbol_first) ? currency.symbol : '',
+                precision: parseInt(currency.precision),
+                masked: this.masked
+            };
+        },
+        value: function (value) {
+            this.model = value;
+        },
+        model: function (model) {
+            this.$emit('change', this.model);
             this.$emit('interface', this.model);
         }
     },
 }
 </script>
+
+<style scoped>
+    .text-right.input-price .v-money {
+        text-align: right;
+    }
+</style>
diff --git a/resources/assets/js/components/AkauntingSelect.vue b/resources/assets/js/components/AkauntingSelect.vue
index d3ae98aea..8197bf468 100644
--- a/resources/assets/js/components/AkauntingSelect.vue
+++ b/resources/assets/js/components/AkauntingSelect.vue
@@ -603,6 +603,9 @@ export default {
         options: function (options) {
             // update options
             this.selectOptions = options;
+        },
+        value: function (value) {
+            this.real_model = value;
         }
     },
 }
diff --git a/resources/assets/js/components/AkauntingSelectRemote.vue b/resources/assets/js/components/AkauntingSelectRemote.vue
index c3a93d76f..410ff88aa 100644
--- a/resources/assets/js/components/AkauntingSelectRemote.vue
+++ b/resources/assets/js/components/AkauntingSelectRemote.vue
@@ -705,6 +705,9 @@ export default {
         options: function (options) {
             // update options
             //this.selectOptions = options;
+        },
+        value: function (value) {
+            this.real_model = value;
         }
     },
 }
diff --git a/resources/assets/js/plugins/bulk-action.js b/resources/assets/js/plugins/bulk-action.js
index 0c89fbd4b..45b447a68 100644
--- a/resources/assets/js/plugins/bulk-action.js
+++ b/resources/assets/js/plugins/bulk-action.js
@@ -79,11 +79,8 @@ export default class BulkAction {
                 'selected': this.selected
             })
             .then(response => {
-                //this.loading = false;
-                //this.modal = false;
                 if (response.data.redirect) {
                     window.location.reload(false);
-                } else {
                 }
             })
             .catch(error => {
diff --git a/resources/assets/js/views/purchases/bills.js b/resources/assets/js/views/purchases/bills.js
index 914e7727d..e8a6fdb6e 100644
--- a/resources/assets/js/views/purchases/bills.js
+++ b/resources/assets/js/views/purchases/bills.js
@@ -50,7 +50,8 @@ const app = new Vue({
             },
             transaction: [],
             items: '',
-            discount: false
+            discount: false,
+            currency: null,
         }
     },
 
@@ -105,6 +106,7 @@ const app = new Vue({
                 }
             })
             .then(response => {
+                this.currency = response.data;
                 this.form.currency_code = response.data.currency_code;
                 this.form.currency_rate = response.data.currency_rate;
             })
@@ -113,6 +115,37 @@ const app = new Vue({
         },
 
         onCalculateTotal() {
+            let sub_total = 0;
+            let discount_total = 0;
+            let tax_total = 0;
+            let grand_total = 0;
+            let items = this.form.items;
+            let discount = this.form.discount;
+
+            if (items.length) {
+                let index = 0;
+
+                for (index = 0; index < items.length; index++) {
+                    let item = items[index];
+
+                    let item_sub_total = item.price * item.quantity;
+                    let item_tax_total = 0;
+                    let item_discount_total = (discount) ? item_sub_total - (item_sub_total * (discount / 100)) : 0;
+
+                    items[index].total = item_sub_total;
+
+                    sub_total += items[index].total;
+                    discount_total += item_discount_total;
+                    tax_total += item_tax_total;
+                    grand_total += sub_total + tax_total;
+                }
+            }
+
+            this.totals.sub = sub_total;
+            this.totals.discount = discount_total;
+            this.totals.tax = tax_total;
+            this.totals.total = grand_total;
+            /*
             axios.post(url + '/common/items/total', {
                 items: this.form.items,
                 discount: this.form.discount,
@@ -134,9 +167,10 @@ const app = new Vue({
                 this.totals.discount_text = response.data.discount_text;
             })
             .catch(error => {
-            });
+            });*/
         },
 
+        // add bill item row
         onAddItem() {
             let row = [];
 
@@ -182,9 +216,10 @@ const app = new Vue({
             this.form.items[index].price = (item.purchase_price).toFixed(2);
             this.form.items[index].quantity = 1;
             this.form.items[index].tax_id = [item.tax_id.toString()];
-            this.form.items[index].total = item.total;
+            this.form.items[index].total = (item.purchase_price).toFixed(2);
         },
 
+        // remove bill item row => row_id = index
         onDeleteItem(index) {
             this.form.items.splice(index, 1);
         },
diff --git a/resources/assets/js/views/sales/invoices.js b/resources/assets/js/views/sales/invoices.js
index c42787214..e3a07c3bc 100644
--- a/resources/assets/js/views/sales/invoices.js
+++ b/resources/assets/js/views/sales/invoices.js
@@ -50,7 +50,8 @@ const app = new Vue({
             },
             transaction: [],
             items: '',
-            discount: false
+            discount: false,
+            currency: null,
         }
     },
 
@@ -105,6 +106,7 @@ const app = new Vue({
                 }
             })
             .then(response => {
+                this.currency = response.data;
                 this.form.currency_code = response.data.currency_code;
                 this.form.currency_rate = response.data.currency_rate;
             })
@@ -113,6 +115,37 @@ const app = new Vue({
         },
 
         onCalculateTotal() {
+            let sub_total = 0;
+            let discount_total = 0;
+            let tax_total = 0;
+            let grand_total = 0;
+            let items = this.form.items;
+            let discount = this.form.discount;
+
+            if (items.length) {
+                let index = 0;
+
+                for (index = 0; index < items.length; index++) {
+                    let item = items[index];
+
+                    let item_sub_total = item.price * item.quantity;
+                    let item_tax_total = 0;
+                    let item_discount_total = (discount) ? item_sub_total - (item_sub_total * (discount / 100)) : 0;
+
+                    items[index].total = item_sub_total;
+
+                    sub_total += items[index].total;
+                    discount_total += item_discount_total;
+                    tax_total += item_tax_total;
+                    grand_total += sub_total + tax_total;
+                }
+            }
+
+            this.totals.sub = sub_total;
+            this.totals.discount = discount_total;
+            this.totals.tax = tax_total;
+            this.totals.total = grand_total;
+            /*
             axios.post(url + '/common/items/total', {
                 items: this.form.items,
                 discount: this.form.discount,
@@ -134,9 +167,10 @@ const app = new Vue({
                 this.totals.discount_text = response.data.discount_text;
             })
             .catch(error => {
-            });
+            });*/
         },
 
+        // add invoice item row
         onAddItem() {
             let row = [];
 
@@ -182,9 +216,10 @@ const app = new Vue({
             this.form.items[index].price = (item.purchase_price).toFixed(2);
             this.form.items[index].quantity = 1;
             this.form.items[index].tax_id = [item.tax_id.toString()];
-            this.form.items[index].total = item.total;
+            this.form.items[index].total = (item.purchase_price).toFixed(2);
         },
 
+        // remove invocie item row => row_id = index
         onDeleteItem(index) {
             this.form.items.splice(index, 1);
         },
diff --git a/resources/views/partials/form/money_group.blade.php b/resources/views/partials/form/money_group.blade.php
index 0db137599..969e8aed6 100644
--- a/resources/views/partials/form/money_group.blade.php
+++ b/resources/views/partials/form/money_group.blade.php
@@ -1,7 +1,9 @@
 @stack($name . '_input_start')
 
     <akaunting-money :col="'{{ $col }}'"
-        :required="{{ isset($attributes['required']) ? true : false }}"
+        @if (isset($attributes['readonly']))
+        :required="{{ $attributes['required'] }}"
+        @endif
 
         @if (isset($attributes['readonly']))
         :readonly="'{{ $attributes['readonly'] }}'"
@@ -12,7 +14,7 @@
         @endif
 
         @if (isset($attributes['masked']))
-        :masked="'{{ $attributes['masked'] }}'"
+        :masked="{{ ($attributes['masked']) ? 'true' : 'false' }}"
         @endif
 
         :error="{{ isset($attributes['v-error']) ? $attributes['v-error'] : 'form.errors.get("' . $name . '")' }}"
@@ -23,6 +25,18 @@
         :currency="{{ json_encode($attributes['currency']) }}"
         :value="{{ $value }}"
 
+        @if (!empty($attributes['dynamic-currency']))
+        :dynamic-currency="{{ $attributes['dynamic-currency'] }}"
+        @endif
+
+        @if (!empty($attributes['v-model']))
+        v-model="{{ $attributes['v-model'] }}"
+        @endif
+
+        @if (!empty($attributes['change']))
+        @change="{{ $attributes['change'] }}($event)"
+        @endif
+
         @if (!empty($attributes['v-model']))
         @interface="{{ $attributes['v-model'] . ' = $event' }}"
         @elseif (!empty($attributes['data-field']))
diff --git a/resources/views/purchases/bills/create.blade.php b/resources/views/purchases/bills/create.blade.php
index 0e7bc36d8..22fe74f04 100644
--- a/resources/views/purchases/bills/create.blade.php
+++ b/resources/views/purchases/bills/create.blade.php
@@ -65,7 +65,10 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 action-column border-right-0 border-bottom-0"><button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i></button></td>
+                                            <td class="col-md-1 action-column border-right-0 border-bottom-0">
+                                                <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
+                                                </button>
+                                            </td>
                                             <td class="col-md-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
@@ -76,6 +79,7 @@
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-html="totals.sub">0</span>
                                             </td>
                                         </tr>
@@ -112,7 +116,7 @@
                                                         <div class="discount card-footer">
                                                             <div class="row text-center">
                                                                 <div class="col-md-12">
-                                                                    <a href="javascript:void(0)" @click="discount = false"  class="btn btn-icon btn-outline-secondary">
+                                                                    <a href="javascript:void(0)" @click="discount = false" class="btn btn-icon btn-outline-secondary">
                                                                         <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
                                                                         <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
                                                                     </a>
@@ -138,6 +142,7 @@
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-html="totals.tax">0</span>
                                             </td>
                                         </tr>
@@ -149,6 +154,7 @@
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
+                                                {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-html="totals.total">0</span>
                                             </td>
                                         </tr>
diff --git a/resources/views/purchases/bills/edit.blade.php b/resources/views/purchases/bills/edit.blade.php
index a7bc647a5..89156181c 100644
--- a/resources/views/purchases/bills/edit.blade.php
+++ b/resources/views/purchases/bills/edit.blade.php
@@ -66,7 +66,10 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 action-column border-right-0 border-bottom-0"><button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i></button></td>
+                                            <td class="col-md-1 action-column border-right-0 border-bottom-0">
+                                                <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
+                                                </button>
+                                            </td>
                                             <td class="col-md-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
@@ -77,6 +80,7 @@
                                                 <strong>{{ trans('bills.sub_total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-html="totals.sub">0</span>
                                             </td>
                                         </tr>
@@ -139,6 +143,7 @@
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-html="totals.tax">0</span>
                                             </td>
                                         </tr>
@@ -150,6 +155,7 @@
                                                 <strong>{{ trans('bills.total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
+                                                {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-html="totals.total">0</span>
                                             </td>
                                         </tr>
diff --git a/resources/views/purchases/bills/item.blade.php b/resources/views/purchases/bills/item.blade.php
index afdc6e3a1..e69ba0cd6 100644
--- a/resources/views/purchases/bills/item.blade.php
+++ b/resources/views/purchases/bills/item.blade.php
@@ -21,7 +21,7 @@
                 :placeholder="'{{ trans('general.type_item_name') }}'"
                 :name="'item_id'"
                 :options="{{ json_encode($items) }}"
-                :value="'{{ old('item_id', '') }}'"
+                :value="form.items[index].item_id"
                 :add-new="{{ json_encode([
                     'status' => true,
                     'text' => trans('general.add_new'),
@@ -69,15 +69,7 @@
     @stack('price_td_start')
         <td class="col-md-2 border-right-0 border-bottom-0">
             @stack('price_input_start')
-                <input class="form-control text-right input-price"
-                       autocomplete="off"
-                       required="required"
-                       data-item="price"
-                       v-model.lazy="row.price"
-                       v-money="money"
-                       @input="onCalculateTotal"
-                       name="items[][price]"
-                       type="text">
+                {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
                        data-item="currency"
                        v-model="row.currency"
@@ -91,30 +83,55 @@
     @stack('taxes_td_start')
         <td class="col-md-3 border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
-                {{ Form::multiSelectAddNewGroup('tax_id', '', '', $taxes, '', [
-                    'data-item' => 'tax_id',
-                    'v-model' => 'row.tax_id',
-                    'change' => 'onCalculateTotal',
-                    'class' => 'form-control',
-                    'collapse' => 'false',
-                    'path' => route('modals.taxes.create')
-                ], 'mb-0 select-tax') }}
+            <akaunting-select
+                class="mb-0 select-tax"
+                :form-classes="[{'has-error': form.errors.get('tax_id') }]"
+                :icon="''"
+                :title="''"
+                :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                :name="'tax_id'"
+                :options="{{ json_encode($taxes) }}"
+                :value="row.tax_id"
+                :multiple="true"
+                :add-new="{{ json_encode([
+                    'status' => true,
+                    'text' => trans('general.add_new'),
+                    'path' => route('modals.taxes.create'),
+                    'type' => 'modal',
+                    'field' => 'name',
+                    'buttons' => [
+                        'cancel' => [
+                            'text' => trans('general.cancel'),
+                            'icon' => 'fas fa-times',
+                            'class' => 'btn-outline-secondary'
+                        ],
+                        'confirm' => [
+                            'text' => trans('general.save'),
+                            'icon' => 'fas fa-save',
+                            'class' => 'btn-success'
+                        ]
+                    ]
+                ])}}"
+                :collapse="false"
+                @interface="row.tax_id = $event"
+                @change="onCalculateTotal($event)"
+                :form-error="form.errors.get('tax_id')"
+                :no-data-text="'{{ trans('general.no_data') }}'"
+                :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+            ></akaunting-select>
             @stack('tax_id_input_end')
         </td>
     @stack('taxes_td_end')
 
     @stack('total_td_start')
         <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
-            <input name="item[][total]"
-                data-item="total"
-                v-model.lazy="row.total"
-                v-money="money"
-                type="hidden">
+            {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right input-price d-none') }}
             @stack('total_input_start')
+                <span id="item-total" v-if="row.total" v-html="row.total">0</span>
                 @if (empty($item) || !isset($item->total))
-                    <span id="item-total" v-html="row.total">0</span>
+                    <span id="item-total" v-else>@money(0, $currency->code, true)</span>
                 @else
-                    <span id="item-total" v-html="row.total">@money($item->total, $bill->currency_code, true)</span>
+                    <span id="item-total" v-else>@money($item->total, $bill->currency_code, true)</span>
                 @endif
             @stack('total_input_end')
         </td>
diff --git a/resources/views/sales/invoices/create.blade.php b/resources/views/sales/invoices/create.blade.php
index ad746eefd..0bfb367a7 100644
--- a/resources/views/sales/invoices/create.blade.php
+++ b/resources/views/sales/invoices/create.blade.php
@@ -79,6 +79,7 @@
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-html="totals.sub">0</span>
                                             </td>
                                         </tr>
@@ -115,7 +116,7 @@
                                                         <div class="discount card-footer">
                                                             <div class="row text-center">
                                                                 <div class="col-md-12">
-                                                                    <a href="javascript:void(0)" @click="discount = false"  class="btn btn-icon btn-outline-secondary">
+                                                                    <a href="javascript:void(0)" @click="discount = false" class="btn btn-icon btn-outline-secondary">
                                                                         <span class="btn-inner--icon"><i class="fas fa-times"></i></span>
                                                                         <span class="btn-inner--text">{{ trans('general.cancel') }}</span>
                                                                     </a>
@@ -141,6 +142,7 @@
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-html="totals.tax">0</span>
                                             </td>
                                         </tr>
@@ -152,6 +154,7 @@
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
+                                                {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-html="totals.total">0</span>
                                             </td>
                                         </tr>
diff --git a/resources/views/sales/invoices/edit.blade.php b/resources/views/sales/invoices/edit.blade.php
index 82ac81391..95f961abc 100644
--- a/resources/views/sales/invoices/edit.blade.php
+++ b/resources/views/sales/invoices/edit.blade.php
@@ -66,7 +66,10 @@
 
                                     @stack('add_item_td_start')
                                         <tr class="row" id="addItem">
-                                            <td class="col-md-1 action-column border-right-0 border-bottom-0"><button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i></button></td>
+                                            <td class="col-md-1 action-column border-right-0 border-bottom-0">
+                                                <button type="button" @click="onAddItem" id="button-add-item" data-toggle="tooltip" title="{{ trans('general.add') }}" class="btn btn-icon btn-outline-success btn-lg" data-original-title="{{ trans('general.add') }}"><i class="fa fa-plus"></i>
+                                                </button>
+                                            </td>
                                             <td class="col-md-11 text-right border-bottom-0"></td>
                                         </tr>
                                     @stack('add_item_td_end')
@@ -77,6 +80,7 @@
                                                 <strong>{{ trans('invoices.sub_total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('sub_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.sub', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="sub-total" v-html="totals.sub">0</span>
                                             </td>
                                         </tr>
@@ -139,6 +143,7 @@
                                                 <strong>{{ trans_choice('general.taxes', 1) }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right border-bottom-0 long-texts">
+                                                {{ Form::moneyGroup('tax_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.tax', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="tax-total" v-html="totals.tax">0</span>
                                             </td>
                                         </tr>
@@ -150,6 +155,7 @@
                                                 <strong>{{ trans('invoices.total') }}</strong>
                                             </td>
                                             <td class="col-md-2 text-right long-texts">
+                                                {{ Form::moneyGroup('grand_total', '', '', ['disabled' => 'disabled', 'required' => 'required', 'v-model' => 'totals.total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right d-none') }}
                                                 <span id="grand-total" v-html="totals.total">0</span>
                                             </td>
                                         </tr>
diff --git a/resources/views/sales/invoices/item.blade.php b/resources/views/sales/invoices/item.blade.php
index 705e8bc73..70846fb4e 100644
--- a/resources/views/sales/invoices/item.blade.php
+++ b/resources/views/sales/invoices/item.blade.php
@@ -21,7 +21,7 @@
                 :placeholder="'{{ trans('general.type_item_name') }}'"
                 :name="'item_id'"
                 :options="{{ json_encode($items) }}"
-                :value="'{{ old('item_id', '') }}'"
+                :value="form.items[index].item_id"
                 :add-new="{{ json_encode([
                     'status' => true,
                     'text' => trans('general.add_new'),
@@ -69,15 +69,7 @@
     @stack('price_td_start')
         <td class="col-md-2 border-right-0 border-bottom-0">
             @stack('price_input_start')
-                <input class="form-control text-right input-price"
-                       autocomplete="off"
-                       required="required"
-                       data-item="price"
-                       v-model.lazy="row.price"
-                       v-money="money"
-                       @input="onCalculateTotal"
-                       name="items[][price]"
-                       type="text">
+                {{ Form::moneyGroup('name', '', '', ['required' => 'required', 'v-model' => 'row.price', 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; onCalculateTotal'], 0.00, 'text-right input-price') }}
                 <input name="items[][currency]"
                        data-item="currency"
                        v-model="row.currency"
@@ -91,30 +83,55 @@
     @stack('taxes_td_start')
         <td class="col-md-3 border-right-0 border-bottom-0">
             @stack('tax_id_input_start')
-                {{ Form::multiSelectAddNewGroup('tax_id', '', '', $taxes, '', [
-                    'data-item' => 'tax_id',
-                    'v-model' => 'row.tax_id',
-                    'change' => 'onCalculateTotal',
-                    'class' => 'form-control',
-                    'collapse' => 'false',
-                    'path' => route('modals.taxes.create')
-                ], 'mb-0 select-tax') }}
+            <akaunting-select
+                class="mb-0 select-tax"
+                :form-classes="[{'has-error': form.errors.get('tax_id') }]"
+                :icon="''"
+                :title="''"
+                :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                :name="'tax_id'"
+                :options="{{ json_encode($taxes) }}"
+                :value="row.tax_id"
+                :multiple="true"
+                :add-new="{{ json_encode([
+                    'status' => true,
+                    'text' => trans('general.add_new'),
+                    'path' => route('modals.taxes.create'),
+                    'type' => 'modal',
+                    'field' => 'name',
+                    'buttons' => [
+                        'cancel' => [
+                            'text' => trans('general.cancel'),
+                            'icon' => 'fas fa-times',
+                            'class' => 'btn-outline-secondary'
+                        ],
+                        'confirm' => [
+                            'text' => trans('general.save'),
+                            'icon' => 'fas fa-save',
+                            'class' => 'btn-success'
+                        ]
+                    ]
+                ])}}"
+                :collapse="false"
+                @interface="row.tax_id = $event"
+                @change="onCalculateTotal($event)"
+                :form-error="form.errors.get('tax_id')"
+                :no-data-text="'{{ trans('general.no_data') }}'"
+                :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+            ></akaunting-select>
             @stack('tax_id_input_end')
         </td>
     @stack('taxes_td_end')
 
     @stack('total_td_start')
         <td class="col-md-2 text-right total-column border-bottom-0 long-texts">
-            <input name="item[][total]"
-                data-item="total"
-                v-model.lazy="row.total"
-                v-money="money"
-                type="hidden">
+            {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency', 'masked' => 'true'], 0.00, 'text-right input-price d-none') }}
             @stack('total_input_start')
+                <span id="item-total" v-if="row.total" v-html="row.total">0</span>
                 @if (empty($item) || !isset($item->total))
-                    <span id="item-total" v-html="row.total">0</span>
+                    <span id="item-total" v-else>@money(0, $currency->code, true)</span>
                 @else
-                    <span id="item-total" v-html="row.total">@money($item->total, $invoice->currency_code, true)</span>
+                    <span id="item-total" v-else>@money($item->total, $invoice->currency_code, true)</span>
                 @endif
             @stack('total_input_end')
         </td>