FIX_Implement search icon and clear icon toggle type

app/Views/UserList.php

@@ -950,11 +950,15 @@ table.dataTable tbody td {
             pageLength: 10,  
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                    searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             initComplete: function () {
                 $(".dt-buttons").prepend(`

app/Views/add_image_list.php

@@ -237,9 +237,12 @@ $(document).ready(function() {
         ],
         language: {
                 search: `
-                <div class="datatable-search-wrapper">
+                <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                     _INPUT_
-                    <i class="mdi mdi-magnify datatable-search-icon"></i>
+                    <i class="mdi mdi-magnify datatable-search-icon" 
+                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                    <i class="mdi mdi-close-circle datatable-clear-icon" 
+                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                 </div>`,
                 searchPlaceholder: "Search",
                 emptyTable: '<div class="text-center text-muted">No Data found</div>'

app/Views/batch_list.php

@@ -255,11 +255,15 @@
                 ],
             language: {
                 search: `
-                        <div class="datatable-search-wrapper">
+                <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                     _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                    <i class="mdi mdi-magnify datatable-search-icon" 
+                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                    <i class="mdi mdi-close-circle datatable-clear-icon" 
+                    style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                 </div>`,
-                        searchPlaceholder: "Search"
+                searchPlaceholder: "Search",
+                emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true
         });

app/Views/bds_multi_report.php

@@ -114,11 +114,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true,
                 pageLength: 10,

app/Views/bds_renewal_report_list.php

@@ -144,11 +144,15 @@ $(document).ready(function() {
             ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 20, // Set default number of rows per page (optional)
@@ -163,13 +167,16 @@ $(document).ready(function() {
 $.extend(true, $.fn.dataTable.defaults, {
     language: {
                     search: `
-            <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
     },
-
     paging: true,
     pageLength: 10,
     ordering: false

app/Views/bds_report_Insurer_wise_Data.php

@@ -106,11 +106,15 @@ table.dataTable tbody td {
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/bds_report_bap_wise_data.php

@@ -108,11 +108,15 @@ table.dataTable tbody td {
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/bds_tat_wise_report.php

@@ -131,11 +131,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true,
                 pageLength: 10,

app/Views/business_team_list.php

@@ -386,9 +386,12 @@
             ],
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
                     searchPlaceholder: "Search",
                     emptyTable: '<div class="text-center text-muted">No Data found</div>'

app/Views/cd_master_list.php

@@ -254,11 +254,15 @@ table.dataTable thead th {
           ],
           language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
           },
           paging: true,
           pageLength: 10,

app/Views/claim_dump_file_list.php

@@ -298,11 +298,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 15, // Set default number of rows per page (optional)

app/Views/claims_report_acc_manager_wise.php

@@ -100,11 +100,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true,
                 pageLength: 10,

app/Views/claims_report_tpa_wise.php

@@ -98,11 +98,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true,
                 pageLength: 10,

app/Views/client_deposit_list.php

@@ -100,11 +100,15 @@ $(document).ready(function() {
                 ],
         language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
 
     });

app/Views/client_list.php

@@ -341,9 +341,12 @@ $(document).ready(function()
                 ],
         language: {
                     search: `
-            <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
                     searchPlaceholder: "Search",
                     emptyTable: '<div class="text-center text-muted">No Data found</div>'

app/Views/employee_data_list.php

@@ -368,11 +368,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 25 // Set default number of rows per page (optional)

app/Views/endorsement_list.php

@@ -651,11 +651,15 @@
             },
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true,
             // pagingType: 'full_numbers'

app/Views/file_list.php

@@ -486,11 +486,15 @@ $(document).ready(function() {
                 ],
             language: {
                     search: `
-                <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                    <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
         // "buttons": [{
         //     "extend": 'csv',

app/Views/finance_team_list.php

@@ -386,11 +386,15 @@ $(document).ready(function () {
             ],
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true,
             pageLength: 10,

app/Views/hr_file_upload.php

@@ -378,11 +378,15 @@
                 ],
             language: {
                     search: `
-                <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                    <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true,
         });

app/Views/insurer_list.php

@@ -212,11 +212,15 @@
                 ],
         language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
         paging: true,
     });

app/Views/irda_bap_client_report_list.php

@@ -238,11 +238,15 @@ $(document).ready(function() {
                 ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 20, // Set default number of rows per page (optional)

app/Views/irda_bap_insurer_report_list.php

@@ -362,11 +362,15 @@ $(document).ready(function() {
                 ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 20, // Set default number of rows per page (optional)

app/Views/irda_client_report_list.php

@@ -196,11 +196,15 @@ $(document).ready(function() {
                 ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/kyc_list.php

@@ -208,11 +208,15 @@
                 ],
         language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
         paging: true ,
     });

app/Views/layout/footer.php

@@ -1210,6 +1210,30 @@ $(function(){
         $(object).select2();
     }
 
+    // SVR asked - Add padding to input so text doesn’t merge with icon
+    $(document).on('init.dt', function () {
+        $('.dataTables_filter input[type="search"]').css('padding-right', '30px');
+    });
+
+    // SVR asked - Toggle icons
+    $(document).on('input', '.dataTables_filter input', function() {
+        const wrapper = $(this).closest('.datatable-search-wrapper');
+        if ($(this).val()) {
+            wrapper.find('.datatable-search-icon').hide();
+            wrapper.find('.datatable-clear-icon').show();
+        } else {
+            wrapper.find('.datatable-search-icon').show();
+            wrapper.find('.datatable-clear-icon').hide();
+        }
+    });
+
+    // SVR asked - Clear search
+    $(document).on('click', '.datatable-clear-icon', function() {
+        const input = $(this).closest('.datatable-search-wrapper').find('input');
+        input.val('').trigger('input');
+        table.search('').draw();   
+    });
+
 </script>
 
 

app/Views/layout/header.php

@@ -1660,6 +1660,12 @@
         .right-btn {
             right: 0;
         }
+
+        input[type="search"]::-webkit-search-cancel-button {
+            -webkit-appearance: none;
+            appearance: none;
+        }
+        
     </style>
 
 

app/Views/leads_list.php

@@ -488,11 +488,15 @@ table.dataTable tbody td {
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/nhance_branch_list.php

@@ -124,11 +124,15 @@
             ],
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                    searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/outstanding_report_list.php

@@ -227,11 +227,15 @@
                 }],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 25 // Set default number of rows per page (optional)

app/Views/policy_transaction_endorsement_list.php

@@ -520,11 +520,15 @@ table.dataTable thead th {
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/policy_transaction_inception_list.php

@@ -592,11 +592,15 @@ $(document).ready(function() {
                 ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/policy_type_list.php

@@ -251,11 +251,15 @@
 
         language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
         paging: true ,
 

app/Views/report_bds.php

@@ -457,11 +457,15 @@ $(document).ready(function() {
             ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/report_bds_new.php

@@ -501,11 +501,15 @@
                 ],
                 language: {
                     search: `
-                            <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                                <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                            searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/report_bds_old.php

@@ -189,8 +189,16 @@ $(document).ready(function() {
 
             ],
             language: {
-                search: "_INPUT_",
-                searchPlaceholder: "Search..."
+                    search: `
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
+                        _INPUT_
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
+                    </div>`,
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/retail_endorsement_list.php

@@ -392,11 +392,15 @@
             },
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true,
             // pagingType: 'full_numbers'

app/Views/rto_master_list.php

@@ -147,11 +147,15 @@
             ],
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                    searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
             },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/tat_report_band_wise_list.php

@@ -135,11 +135,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/test_members_list.php

@@ -558,11 +558,15 @@ document.addEventListener("DOMContentLoaded", function () {
                 }],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 25 // Set default number of rows per page (optional)

app/Views/thz_list.php

@@ -357,11 +357,15 @@ table.dataTable tbody td {
                 ],
                  language: {
                     search: `
-                  <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                      <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                  searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true,
                 pageLength: 10,

app/Views/ticket_feedback_list.php

@@ -139,11 +139,15 @@ $(document).ready(function() {
           ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/ticket_history.php

@@ -61,11 +61,15 @@ if (ticketsTable.length) {
         // ],
         language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
         paging: true, // Enable pagination
         pageLength: 10, // Set default number of rows per page (optional)

app/Views/ticket_list.php

@@ -326,11 +326,15 @@ $(document).ready(function() {
           ],
             language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/ticket_mail_template.php

@@ -266,11 +266,15 @@
                 }],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 paging: true, // Enable pagination
                 pageLength: 10, // Set default number of rows per page (optional)

app/Views/tpa_list.php

@@ -209,11 +209,15 @@
           ],
         language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
         },
       paging: true,
     });

app/Views/variance_report_list.php

@@ -270,11 +270,15 @@
                 }],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
             paging: true, // Enable pagination
             pageLength: 25 // Set default number of rows per page (optional)

app/Views/vehicle_master_list.php

@@ -511,11 +511,15 @@ $(document).ready(function() {
           ],
           language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
           paging: true,
           pageLength: 10,

app/Views/vehicle_type_list.php

@@ -857,11 +857,15 @@
             pageLength: 10,  
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                    searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
             initComplete: function () {
                 $(".dt-buttons").prepend(`

app/Views/vehicle_type_master_list.php

@@ -124,11 +124,15 @@
             ],
             language: {
                     search: `
-                    <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                        <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                    searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
             paging: true, // Enable pagination
             pageLength: 10, // Set default number of rows per page (optional)

app/Views/view_deposit.php

@@ -348,11 +348,15 @@
                 ],
                 language: {
                     search: `
-                        <div class="datatable-search-wrapper">
+                    <div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
                         _INPUT_
-                            <i class="mdi mdi-magnify datatable-search-icon"></i>
+                        <i class="mdi mdi-magnify datatable-search-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
+                        <i class="mdi mdi-close-circle datatable-clear-icon" 
+                        style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none;"></i>
                     </div>`,
-                        searchPlaceholder: "Search"
+                    searchPlaceholder: "Search",
+                    emptyTable: '<div class="text-center text-muted">No Data found</div>'
                 },
                 ordering: false,
                 paging: true