Add Long Desc filter and icon

resources/js/Pages/IkeaRoot.vue

@@ -19,6 +19,7 @@ import GuestLayout from "../Layouts/GuestLayout.vue";
 import { useForm } from "@inertiajs/inertia-vue3";
 import axios from "axios";
 import filterimg from "@/assets/eglass-filter.png";
+import searchimg from "@/assets/search-icon.svg";
 import Popper from "vue3-popper";
 
 const sdropdown = ref([
@@ -36,6 +37,7 @@ const countryHash = ref([]);
 const countryCurrency = ref({});
 const showItemFilter = ref(false);
 const showDescFilter = ref(false);
+const showDescLongFilter = ref(false);
 const showUnitsFilter = ref(false);
 const geoip = ref({});
 
@@ -535,7 +537,7 @@ watch(ccodes, (codes) => {
         </div>
         </form>
         <div class="mt-5">
-            <input placeholder="Search in Long Desc" class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full" type="text" v-model="searchValue">
+            <input v-if="showDescLongFilter" placeholder="Search in Long Desc" class="mb-1 px-2 py-1 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm border border-blueGray-300 outline-none focus:outline-none focus:ring w-full" type="text" v-model="searchValue">
           <EasyTable
             class="none"
             :rows-per-page="20"
@@ -573,6 +575,16 @@ watch(ccodes, (codes) => {
                 </div>
               </div>
             </template>
+            <template #header-descLong="header">
+              <div class="filter-column">
+                <img
+                  :src="searchimg"
+                  class="filter-icon"
+                  @click.stop="showDescLongFilter = !showDescLongFilter"
+                />
+                {{ header.text }}
+              </div>
+            </template>
             <template #header-desc="header">
               <div class="filter-column">
                 <img