diff --git a/package-lock.json b/package-lock.json
index 6f350ba12..a955d32b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,8 @@
                 "vue-flatpickr-component": "^8.1.3",
                 "vue-router": "^3.1.3",
                 "vue2-editor": "^2.10.3",
-                "vue2-transitions": "^0.3.0"
+                "vue2-transitions": "^0.3.0",
+                "vuedraggable": "^2.24.3"
             },
             "devDependencies": {
                 "@babel/core": "^7.15.5",
@@ -23415,6 +23416,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "node_modules/source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -25861,6 +25867,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "node_modules/vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "dependencies": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -46042,6 +46056,11 @@
                 "is-plain-obj": "^1.0.0"
             }
         },
+        "sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -47994,6 +48013,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "requires": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/package.json b/package.json
index 72877b2a9..7bd769dc1 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,8 @@
         "vue-flatpickr-component": "^8.1.3",
         "vue-router": "^3.1.3",
         "vue2-editor": "^2.10.3",
-        "vue2-transitions": "^0.3.0"
+        "vue2-transitions": "^0.3.0",
+        "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
         "@babel/core": "^7.15.5",
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index 3b68c573d..f98d2045f 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -14,6 +14,7 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
+import draggable from 'vuedraggable';
 
 // plugin setup
 Vue.use(DashboardPlugin);
@@ -25,6 +26,10 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        draggable
+    },
+
     data: function () {
         return {
             form: new Form('document'),
@@ -77,6 +82,7 @@ const app = new Vue({
             ],
             email_template: false,
             send_to: false,
+            drag: false
         }
     },
 
@@ -111,6 +117,16 @@ const app = new Vue({
     },
 
     methods: {
+        onEnd() {
+            this.dragging = false;
+        },
+
+        onUpdate(event) {
+            let fromIndex = this.form.items.indexOf(this.form.items[event.oldIndex]);
+            let element = this.form.items.splice(fromIndex, 1)[0];
+            this.form.items.splice(event.newIndex, 0, element);  
+        },
+
         onRefFocus(ref) {
             let index = this.form.items.length - 1;
             
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 2180995ab..1c57e1b9b 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -1,427 +1,430 @@
-<tr v-for="(row, index) in items" :index="index">
-    @stack('name_td_start')
+<tbody is="draggable" tag="tbody" handle=".handle" @start="dragging = true" @end="dragging = false" @update="onUpdate">
+    <tr v-for="(row, index) in items" :index="index">
+        @stack('name_td_start')
 
-    <td class="border-r-0 border-b-0 p-0"
-        :class="[{'has-error': form.errors.has('items.' + index + '.name') }]"
-        colspan="7">
-        <table class="w-full border-b pb-3">
-            <colgroup>
-                <col class="small-col" style="width: 24px;">
-                <col class="small-col" style="width: 20%;">
-                <col class="small-col description-col" style="width: 30%;">
-                <col class="small-col" style="width: 12%;">
-                <col class="small-col" style="width: 15%;">
-                <col class="small-col amount-col" style="width: 20%;">
-                <col class="small-col" style="width: 24px;">
-            </colgroup>
+        <td class="border-r-0 border-b-0 p-0"
+            :class="[{'has-error': form.errors.has('items.' + index + '.name') }]"
+            colspan="7">
+            <table class="w-full border-b pb-3">
+                <colgroup>
+                    <col class="small-col" style="width: 24px;">
+                    <col class="small-col" style="width: 20%;">
+                    <col class="small-col description-col" style="width: 30%;">
+                    <col class="small-col" style="width: 12%;">
+                    <col class="small-col" style="width: 15%;">
+                    <col class="small-col amount-col" style="width: 20%;">
+                    <col class="small-col" style="width: 24px;">
+                </colgroup>
 
-            <tbody>
-                <tr>
-                    @stack('move_td_start')
-                    <td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
-                        <span class="w-6 material-icons">list</span>
-                    </td>
-                    @stack('move_td_end')
-
-                    @stack('items_td_start')
-
-                    @if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
-                        @stack('name_td_start')
-
-                        <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
-                            @if (! $hideItemName)
-                                <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
-                                    <div v-html="row.name"></div>
-                                </span>
-
-                                <div v-else>
-                                    @stack('name_input_start')
-
-                                    <input
-                                        type="text"
-                                        :ref="'items-' + index + '-name'"
-                                        class="w-full text-sm px-3 py-2.5 mt-0 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple mt-0"
-                                        :name="'items.' + index + '.name'"
-                                        autocomplete="off"
-                                        required="required"
-                                        data-item="name"
-                                        v-model="row.name"
-                                        @input="onBindingItemField(index, 'name')"
-                                        @change="form.errors.clear('items.' + index + '.name')"
-                                    />
-
-                                    <div class="text-red text-sm mt-1 block"
-                                        v-if="form.errors.has('items.' + index + '.name')"
-                                        v-html="form.errors.get('items.' + index + '.name')"
-                                    ></div>
-
-                                    @stack('name_input_end')
-                                </div>
-                            @endif
+                <tbody>
+                    <tr>
+                        @stack('move_td_start')
+                        <td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
+                            <div class="handle mt-2 hidden lg:block cursor-move">
+                                <span class="w-6 material-icons">list</span>
+                            </div>
                         </td>
+                        @stack('move_td_end')
 
-                        @stack('name_td_end')
+                        @stack('items_td_start')
 
-                        @stack('description_td_start')
+                        @if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
+                            @stack('name_td_start')
+                            <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
+                                @if (! $hideItemName)
+                                    <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">
+                                        <div v-html="row.name"></div>
+                                    </span>
 
-                        <td class="px-3 py-3 border-b-0 description">
-                            @if (! $hideItemDescription)
-                                <textarea
-                                    class="w-full text-sm px-3 py-2.5 mt-1.5 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
-                                    style="height:42px;"
-                                    :ref="'items-' + index + '-description'"
-                                    placeholder="{{ trans('items.enter_item_description') }}"
-                                    :name="'items.' + index + '.description'"
-                                    v-model="row.description"
-                                    data-item="description"
-                                    resize="none"
-                                    @input="onBindingItemField(index, 'description')"
-                                ></textarea>
-                            @endif
-                        </td>
+                                    <div v-else>
+                                        @stack('name_input_start')
 
-                        @stack('description_td_end')
-                    @endif
+                                        <input
+                                            type="text"
+                                            :ref="'items-' + index + '-name'"
+                                            class="w-full text-sm px-3 py-2.5 mt-0 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple mt-0"
+                                            :name="'items.' + index + '.name'"
+                                            autocomplete="off"
+                                            required="required"
+                                            data-item="name"
+                                            v-model="row.name"
+                                            @input="onBindingItemField(index, 'name')"
+                                            @change="form.errors.clear('items.' + index + '.name')"
+                                        />
 
-                    @stack('items_td_end')
+                                        <div class="text-red text-sm mt-1 block"
+                                            v-if="form.errors.has('items.' + index + '.name')"
+                                            v-html="form.errors.get('items.' + index + '.name')"
+                                        ></div>
 
-                    @stack('quantity_td_start')
-
-                    <td class="px-3 py-3 border-b-0 quantity">
-                        @if (! $hideItemQuantity)
-                            <div>
-                                @stack('quantity_input_start')
-
-                                <input
-                                    type="number"
-                                    min="0"
-                                    :ref="'items-' + index + '-quantity'"
-                                    class="w-full text-sm px-3 py-2.5 mt-0 text-right rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple input-number-disabled"
-                                    :name="'items.' + index + '.quantity'"
-                                    autocomplete="off"
-                                    required="required"
-                                    data-item="quantity"
-                                    v-model="row.quantity"
-                                    @input="onCalculateTotal"
-                                    @change="form.errors.clear('items.' + index + '.quantity')"
-                                />
-
-                                <div class="text-red text-sm mt-1 block"
-                                    v-if="form.errors.has('items.' + index + '.quantity')"
-                                    v-html="form.errors.get('items.' + index + '.quantity')">
-                                </div>
-
-                                @stack('quantity_input_end')
-                            </div>
-                        @endif
-                    </td>
-
-                    @stack('quantity_td_end')
-
-                    @stack('price_td_start')
-
-                    <td class="px-3 py-3 pr-1 border-b-0 price">
-                        @if (! $hideItemPrice)
-                            <div>
-                                @stack('price_input_start')
-
-                                <x-form.input.money
-                                    name="price"
-                                    value="0"
-                                    row-input
-                                    data-item="price"
-                                    v-model="row.price"
-                                    v-error="form.errors.get('items.' + index + '.price')"
-                                    v-error-message="form.errors.get('items.' + index + '.price')"
-                                    change="row.price = $event; form.errors.clear('items.' + index + '.price'); onCalculateTotal"
-                                    :currency="$currency"
-                                    dynamicCurrency="currency"
-                                    money-class="text-right mt-0"
-                                    form-group-class="text-right"
-                                />
-
-                                @stack('price_input_end')
-                            </div>
-                        @endif
-                    </td>
-
-                    @stack('price_td_end')
-
-                    @stack('total_td_start')
-
-                    <td class="px-3 py-3 text-right border-b-0 total">
-                        @if (! $hideItemAmount)
-                            <div>
-                                <x-form.input.money
-                                    name="total"
-                                    value="0"
-                                    disabled
-                                    row-input
-                                    data-item="total"
-                                    v-model="row.total"
-                                    :currency="$currency"
-                                    dynamicCurrency="currency"
-                                    money-class="ltr:text-right rtl:text-left mt-0 disabled-money px-0"
-                                    form-group-class="ltr:text-right rtl:text-left disabled-money"
-                                />
-                            </div>
-                        @endif
-                    </td>
-
-                    @stack('total_td_end')
-
-                    @stack('delete_td_start')
-
-                    <td class="text-right group">
-                        <button type="button" @click="onDeleteItem(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
-                            <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
-                        </button>
-                    </td>
-
-                    @stack('delete_td_end')
-                </tr>
-
-                <tr>
-                    <td colspan="3">
-                        @stack('item_custom_fields')
-                    </td>
-
-                    <td colspan="4" class="px-0 pb-3">
-                        <div class="relative">
-                            <div class="absolute -top-6 ltr:left-3 rtl:right-3 flex items-center">
-                                @if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
-                                    <div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
-                                        <x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
-                                            <x-button.hover color="to-purple">
-                                                {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
-                                            </x-button.hover>
-                                        </x-button>
+                                        @stack('name_input_end')
                                     </div>
                                 @endif
+                            </td>
 
-                                <div class="text-right border-0 p-0 pr-4">
-                                    <x-button type="button" class="text-xs text-purple" @click="onAddTax(index)" override="class">
-                                        <x-button.hover color="to-purple">
-                                            {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
-                                        </x-button.hover>
-                                    </x-button>
-                                </div>
-                            </div>
-                        </div>
+                            @stack('name_td_end')
 
-                        <div v-if="row.add_discount" class="flex items-center justify-between pb-3 ml-2">
-                            @stack('discount_input_start')
+                            @stack('description_td_start')
 
-                            <div class="mb-0" style="display: inline-block; position: relative;">
-                                <div class="flex items-center">
-                                    <div class="w-16 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
-                                        <button type="button"
-                                            class="w-7 flex justify-center px-2"
-                                            :class="[{'btn-outline-primary' : row.discount_type !== 'percentage'}, {'bg-white rounded-lg' : row.discount_type === 'percentage'}]"
-                                            @click="onChangeLineDiscountType(index, 'percentage')"
-                                        >
-                                            <span class="material-icons text-lg">percent</span>
-                                        </button>
+                            <td class="px-3 py-3 border-b-0 description">
+                                @if (! $hideItemDescription)
+                                    <textarea
+                                        class="w-full text-sm px-3 py-2.5 mt-1.5 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
+                                        style="height:42px;"
+                                        :ref="'items-' + index + '-description'"
+                                        placeholder="{{ trans('items.enter_item_description') }}"
+                                        :name="'items.' + index + '.description'"
+                                        v-model="row.description"
+                                        data-item="description"
+                                        resize="none"
+                                        @input="onBindingItemField(index, 'description')"
+                                    ></textarea>
+                                @endif
+                            </td>
 
-                                        <button type="button"
-                                            class="w-7 px-2"
-                                            :class="[{'btn-outline-primary' : row.discount_type !== 'fixed'}, {'bg-white rounded-lg' : row.discount_type === 'fixed'}]"
-                                            @click="onChangeLineDiscountType(index, 'fixed')"
-                                        >
-                                            <span class="text-base">{{ $currency->symbol }}</span>
-                                        </button>
-                                    </div>
+                            @stack('description_td_end')
+                        @endif
 
-                                    <input type="number"
+                        @stack('items_td_end')
+
+                        @stack('quantity_td_start')
+
+                        <td class="px-3 py-3 border-b-0 quantity">
+                            @if (! $hideItemQuantity)
+                                <div>
+                                    @stack('quantity_input_start')
+
+                                    <input
+                                        type="number"
                                         min="0"
-                                        placeholder="Discount"
-                                        class="w-full text-sm px-3 py-2.5 mt-0 text-center rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
-                                        :name="'items.' + index + '.discount'"
+                                        :ref="'items-' + index + '-quantity'"
+                                        class="w-full text-sm px-3 py-2.5 mt-0 text-right rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple input-number-disabled"
+                                        :name="'items.' + index + '.quantity'"
                                         autocomplete="off"
                                         required="required"
-                                        data-item="discount"
-                                        v-model="row.discount"
+                                        data-item="quantity"
+                                        v-model="row.quantity"
                                         @input="onCalculateTotal"
-                                        @change="form.errors.clear('items.' + index + '.discount')"
+                                        @change="form.errors.clear('items.' + index + '.quantity')"
                                     />
 
                                     <div class="text-red text-sm mt-1 block"
-                                        v-if="form.errors.has('items.' + index + '.discount')"
-                                        v-html="form.errors.get('items.' + index + '.discount')">
+                                        v-if="form.errors.has('items.' + index + '.quantity')"
+                                        v-html="form.errors.get('items.' + index + '.quantity')">
                                     </div>
+
+                                    @stack('quantity_input_end')
                                 </div>
-                            </div>
+                            @endif
+                        </td>
 
-                            @stack('discount_input_end')
+                        @stack('quantity_td_end')
+
+                        @stack('price_td_start')
+
+                        <td class="px-3 py-3 pr-1 border-b-0 price">
+                            @if (! $hideItemPrice)
+                                <div>
+                                    @stack('price_input_start')
 
-                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
-                                <div class="text-right">
                                     <x-form.input.money
-                                        name="discount_amount"
+                                        name="price"
                                         value="0"
-                                        disabled
                                         row-input
-                                        data-item="discount_amount"
-                                        v-model="row.discount_amount"
+                                        data-item="price"
+                                        v-model="row.price"
+                                        v-error="form.errors.get('items.' + index + '.price')"
+                                        v-error-message="form.errors.get('items.' + index + '.price')"
+                                        change="row.price = $event; form.errors.clear('items.' + index + '.price'); onCalculateTotal"
                                         :currency="$currency"
                                         dynamicCurrency="currency"
-                                        money-class="ltr:text-right rtl:text-left disabled-money px-0"
-                                        form-group-class="ltr:text-right rtl:text-left disabled-money"
+                                        money-class="text-right mt-0"
+                                        form-group-class="text-right"
                                     />
+
+                                    @stack('price_input_end')
                                 </div>
+                            @endif
+                        </td>
 
-                                <div class="pl-2 group">
-                                    <button type="button" @click="onDeleteDiscount(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
-                                        <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
+                        @stack('price_td_end')
 
-                        <div class="flex items-center justify-between h-10 ml-3 my-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
-                            :index="row_tax_index"
-                        >
-                            <span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
+                        @stack('total_td_start')
 
-                            <div class="lg:w-1/4 lg:absolute">
-                                @stack('taxes_input_start')
-
-                                <akaunting-select
-                                    class="mb-0 select-tax"
-                                    :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
-                                    :icon="''"
-                                    :title="''"
-                                    :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
-                                    :name="'items.' + index + '.taxes.' + row_tax_index"
-                                    :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
-                                    :dynamic-options="dynamic_taxes"
-                                    :disabled-options="form.items[index].tax_ids"
-                                    :value="row_tax.id"
-                                    :add-new="{{ json_encode([
-                                        'status' => true,
-                                        'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
-                                        'path' => route('modals.taxes.create'),
-                                        'type' => 'modal',
-                                        'field' => [
-                                            'key' => 'id',
-                                            'value' => 'title'
-                                        ],
-                                        'new_text' => trans('modules.new'),
-                                        'buttons' => [
-                                            'cancel' => [
-                                                'text' => trans('general.cancel'),
-                                                'class' => 'btn-outline-secondary'
-                                            ],
-                                            'confirm' => [
-                                                'text' => trans('general.save'),
-                                                'class' => 'disabled:bg-green-100'
-                                            ]
-                                        ]
-                                    ])}}"
-                                    @interface="row_tax.id = $event"
-                                    @change="onCalculateTotal()"
-                                    @new="dynamic_taxes.push($event)"
-                                    :form-error="form.errors.get('items.' + index + '.taxes')"
-                                    :no-data-text="'{{ trans('general.no_data') }}'"
-                                    :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
-                                ></akaunting-select>
-
-                                @stack('taxes_input_end')
-                            </div>
-
-                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
-                                <div class="text-right">
+                        <td class="px-3 py-3 text-right border-b-0 total">
+                            @if (! $hideItemAmount)
+                                <div>
                                     <x-form.input.money
-                                        name="tax"
+                                        name="total"
                                         value="0"
                                         disabled
                                         row-input
                                         data-item="total"
-                                        v-model="row_tax.price"
+                                        v-model="row.total"
                                         :currency="$currency"
                                         dynamicCurrency="currency"
-                                        money-class="text-right disabled-money px-0"
-                                        form-group-class="text-right disabled-money"
+                                        money-class="ltr:text-right rtl:text-left mt-0 disabled-money px-0"
+                                        form-group-class="ltr:text-right rtl:text-left disabled-money"
                                     />
                                 </div>
+                            @endif
+                        </td>
 
-                                <div class="pl-2 group">
-                                    <button type="button" @click="onDeleteTax(index, row_tax_index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
-                                        <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
-                                    </button>
+                        @stack('total_td_end')
+
+                        @stack('delete_td_start')
+
+                        <td class="text-right group">
+                            <button type="button" @click="onDeleteItem(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
+                                <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
+                            </button>
+                        </td>
+
+                        @stack('delete_td_end')
+                    </tr>
+
+                    <tr>
+                        <td colspan="3">
+                            @stack('item_custom_fields')
+                        </td>
+
+                        <td colspan="4" class="px-0 pb-3">
+                            <div class="relative">
+                                <div class="absolute -top-6 ltr:left-3 rtl:right-3 flex items-center">
+                                    @if (! $hideDiscount && in_array(setting('localisation.discount_location'), ['item', 'both']))
+                                        <div class="text-left border-0 p-0 mr-16" v-if="!row.add_discount">
+                                            <x-button type="button" class="text-xs text-purple" @click="onAddLineDiscount(index)" override="class">
+                                                <x-button.hover color="to-purple">
+                                                    {{ trans('general.title.add', ['type' => trans('invoices.discount')]) }}
+                                                </x-button.hover>
+                                            </x-button>
+                                        </div>
+                                    @endif
+
+                                    <div class="text-right border-0 p-0 pr-4">
+                                        <x-button type="button" class="text-xs text-purple" @click="onAddTax(index)" override="class">
+                                            <x-button.hover color="to-purple">
+                                                {{ trans('general.title.add', ['type' => trans_choice('general.taxes', 1)]) }}
+                                            </x-button.hover>
+                                        </x-button>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div v-if="row.add_tax" class="flex items-center justify-between h-10 ml-3 my-3" :class="{'pt-2' : row.add_discount}">
-                            <span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
+                            <div v-if="row.add_discount" class="flex items-center justify-between pb-3 ml-2">
+                                @stack('discount_input_start')
 
-                            <div class="lg:w-1/4 lg:absolute">
-                                @stack('taxes_input_start')
+                                <div class="mb-0" style="display: inline-block; position: relative;">
+                                    <div class="flex items-center">
+                                        <div class="w-16 flex items-center bg-gray-200 p-1 ltr:mr-2 rtl:ml-2 rounded-lg">
+                                            <button type="button"
+                                                class="w-7 flex justify-center px-2"
+                                                :class="[{'btn-outline-primary' : row.discount_type !== 'percentage'}, {'bg-white rounded-lg' : row.discount_type === 'percentage'}]"
+                                                @click="onChangeLineDiscountType(index, 'percentage')"
+                                            >
+                                                <span class="material-icons text-lg">percent</span>
+                                            </button>
 
-                                <akaunting-select
-                                    class="mb-0 select-tax"
-                                    style="margin-left: 1px; margin-right: -2px;"
-                                    :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
-                                    :icon="''"
-                                    :title="''"
-                                    :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
-                                    :name="'items.' + index + '.taxes.999'"
-                                    :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
-                                    :dynamic-options="dynamic_taxes"
-                                    :disabled-options="form.items[index].tax_ids"
-                                    :value="tax_id"
-                                    :add-new="{{ json_encode([
-                                        'status' => true,
-                                        'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
-                                        'path' => route('modals.taxes.create'),
-                                        'type' => 'modal',
-                                        'field' => [
-                                            'key' => 'id',
-                                            'value' => 'title'
-                                        ],
-                                        'new_text' => trans('modules.new'),
-                                        'buttons' => [
-                                            'cancel' => [
-                                                'text' => trans('general.cancel'),
-                                                'class' => 'btn-outline-secondary'
-                                            ],
-                                            'confirm' => [
-                                                'text' => trans('general.save'),
-                                                'class' => 'disabled:bg-green-100'
-                                            ]
-                                        ]
-                                    ])}}"
-                                    @interface="tax_id = $event"
-                                    @visible-change="onSelectedTax(index)"
-                                    @new="dynamic_taxes.push($event)"
-                                    :form-error="form.errors.get('items.' + index + '.taxes')"
-                                    :no-data-text="'{{ trans('general.no_data') }}'"
-                                    :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
-                                ></akaunting-select>
+                                            <button type="button"
+                                                class="w-7 px-2"
+                                                :class="[{'btn-outline-primary' : row.discount_type !== 'fixed'}, {'bg-white rounded-lg' : row.discount_type === 'fixed'}]"
+                                                @click="onChangeLineDiscountType(index, 'fixed')"
+                                            >
+                                                <span class="text-base">{{ $currency->symbol }}</span>
+                                            </button>
+                                        </div>
 
-                                @stack('taxes_input_end')
-                            </div>
+                                        <input type="number"
+                                            min="0"
+                                            placeholder="Discount"
+                                            class="w-full text-sm px-3 py-2.5 mt-0 text-center rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple"
+                                            :name="'items.' + index + '.discount'"
+                                            autocomplete="off"
+                                            required="required"
+                                            data-item="discount"
+                                            v-model="row.discount"
+                                            @input="onCalculateTotal"
+                                            @change="form.errors.clear('items.' + index + '.discount')"
+                                        />
 
-                            <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
-                                <div class="text-right">
-                                    <div class="required disabled text-right input-price disabled-money">
-                                        <input type="tel" class="v-money form-control ltr:text-right rtl:text-left" name="discount_amount" disabled="disabled" value="__">
+                                        <div class="text-red text-sm mt-1 block"
+                                            v-if="form.errors.has('items.' + index + '.discount')"
+                                            v-html="form.errors.get('items.' + index + '.discount')">
+                                        </div>
                                     </div>
                                 </div>
 
-                                <div class="pl-2 group">
-                                    <button type="button" @click="onDeleteTax(index, 999)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
-                                        <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
-                                    </button>
+                                @stack('discount_input_end')
+
+                                <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
+                                    <div class="text-right">
+                                        <x-form.input.money
+                                            name="discount_amount"
+                                            value="0"
+                                            disabled
+                                            row-input
+                                            data-item="discount_amount"
+                                            v-model="row.discount_amount"
+                                            :currency="$currency"
+                                            dynamicCurrency="currency"
+                                            money-class="ltr:text-right rtl:text-left disabled-money px-0"
+                                            form-group-class="ltr:text-right rtl:text-left disabled-money"
+                                        />
+                                    </div>
+
+                                    <div class="pl-2 group">
+                                        <button type="button" @click="onDeleteDiscount(index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
+                                            <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </td>
 
-    @stack('name_td_end')
-</tr>
+                            <div class="flex items-center justify-between h-10 ml-3 my-3" v-for="(row_tax, row_tax_index) in row.tax_ids"
+                                :index="row_tax_index"
+                            >
+                                <span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
+
+                                <div class="lg:w-1/4 lg:absolute">
+                                    @stack('taxes_input_start')
+
+                                    <akaunting-select
+                                        class="mb-0 select-tax"
+                                        :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
+                                        :icon="''"
+                                        :title="''"
+                                        :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                                        :name="'items.' + index + '.taxes.' + row_tax_index"
+                                        :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
+                                        :dynamic-options="dynamic_taxes"
+                                        :disabled-options="form.items[index].tax_ids"
+                                        :value="row_tax.id"
+                                        :add-new="{{ json_encode([
+                                            'status' => true,
+                                            'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
+                                            'path' => route('modals.taxes.create'),
+                                            'type' => 'modal',
+                                            'field' => [
+                                                'key' => 'id',
+                                                'value' => 'title'
+                                            ],
+                                            'new_text' => trans('modules.new'),
+                                            'buttons' => [
+                                                'cancel' => [
+                                                    'text' => trans('general.cancel'),
+                                                    'class' => 'btn-outline-secondary'
+                                                ],
+                                                'confirm' => [
+                                                    'text' => trans('general.save'),
+                                                    'class' => 'disabled:bg-green-100'
+                                                ]
+                                            ]
+                                        ])}}"
+                                        @interface="row_tax.id = $event"
+                                        @change="onCalculateTotal()"
+                                        @new="dynamic_taxes.push($event)"
+                                        :form-error="form.errors.get('items.' + index + '.taxes')"
+                                        :no-data-text="'{{ trans('general.no_data') }}'"
+                                        :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+                                    ></akaunting-select>
+
+                                    @stack('taxes_input_end')
+                                </div>
+
+                                <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
+                                    <div class="text-right">
+                                        <x-form.input.money
+                                            name="tax"
+                                            value="0"
+                                            disabled
+                                            row-input
+                                            data-item="total"
+                                            v-model="row_tax.price"
+                                            :currency="$currency"
+                                            dynamicCurrency="currency"
+                                            money-class="text-right disabled-money px-0"
+                                            form-group-class="text-right disabled-money"
+                                        />
+                                    </div>
+
+                                    <div class="pl-2 group">
+                                        <button type="button" @click="onDeleteTax(index, row_tax_index)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
+                                            <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div v-if="row.add_tax" class="flex items-center justify-between h-10 ml-3 my-3" :class="{'pt-2' : row.add_discount}">
+                                <span class="absolute text-sm ltr:-ml-7 rtl:-mr-7">{{ trans_choice('general.taxes', 1) }}</span>
+
+                                <div class="lg:w-1/4 lg:absolute">
+                                    @stack('taxes_input_start')
+
+                                    <akaunting-select
+                                        class="mb-0 select-tax"
+                                        style="margin-left: 1px; margin-right: -2px;"
+                                        :form-classes="[{'has-error': form.errors.has('items.' + index + '.taxes') }]"
+                                        :icon="''"
+                                        :title="''"
+                                        :placeholder="'{{ trans('general.form.select.field', ['field' => trans_choice('general.taxes', 1)]) }}'"
+                                        :name="'items.' + index + '.taxes.999'"
+                                        :options="{{ json_encode($taxes->pluck('title', 'id')) }}"
+                                        :dynamic-options="dynamic_taxes"
+                                        :disabled-options="form.items[index].tax_ids"
+                                        :value="tax_id"
+                                        :add-new="{{ json_encode([
+                                            'status' => true,
+                                            'text' => trans('general.title.new', ['type' => trans_choice('general.taxes', 1)]),
+                                            'path' => route('modals.taxes.create'),
+                                            'type' => 'modal',
+                                            'field' => [
+                                                'key' => 'id',
+                                                'value' => 'title'
+                                            ],
+                                            'new_text' => trans('modules.new'),
+                                            'buttons' => [
+                                                'cancel' => [
+                                                    'text' => trans('general.cancel'),
+                                                    'class' => 'btn-outline-secondary'
+                                                ],
+                                                'confirm' => [
+                                                    'text' => trans('general.save'),
+                                                    'class' => 'disabled:bg-green-100'
+                                                ]
+                                            ]
+                                        ])}}"
+                                        @interface="tax_id = $event"
+                                        @visible-change="onSelectedTax(index)"
+                                        @new="dynamic_taxes.push($event)"
+                                        :form-error="form.errors.get('items.' + index + '.taxes')"
+                                        :no-data-text="'{{ trans('general.no_data') }}'"
+                                        :no-matching-data-text="'{{ trans('general.no_matching_data') }}'"
+                                    ></akaunting-select>
+
+                                    @stack('taxes_input_end')
+                                </div>
+
+                                <div class="flex items-center lg:absolute ltr:right-0 rtl:left-0">
+                                    <div class="text-right">
+                                        <div class="required disabled text-right input-price disabled-money">
+                                            <input type="tel" class="v-money form-control ltr:text-right rtl:text-left" name="discount_amount" disabled="disabled" value="__">
+                                        </div>
+                                    </div>
+
+                                    <div class="pl-2 group">
+                                        <button type="button" @click="onDeleteTax(index, 999)" class="w-6 h-7 flex items-center rounded-lg p-0 group-hover:bg-gray-100">
+                                            <span class="w-full material-icons-outlined text-lg text-gray-300 group-hover:text-gray-500">delete</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </td>
+
+        @stack('name_td_end')
+    </tr>
+</tbody>