From 782dd2eb7078b90e20561b9648d1489cd9282046 Mon Sep 17 00:00:00 2001
From: vadivelJ96 <jvadivel.1996@gmail.com>
Date: Sat, 30 Aug 2025 12:47:45 +0530
Subject: [PATCH] CHANGE_UI_FIX - VADIVEL J 2025-08-30

---
 app/Controllers/LeadsController.php       |   2 +-
 app/Views/layout/header.php               |  24 ++--
 app/Views/view_rfq.php                    | 140 ++++++++++++++--------
 app/Views/view_rfq_non_eb.php             |  18 +--
 public/assets/js/pages/foo-tables.init.js |   2 +-
 5 files changed, 111 insertions(+), 75 deletions(-)

diff --git a/app/Controllers/LeadsController.php b/app/Controllers/LeadsController.php
index db3e331d..6590496c 100644
--- a/app/Controllers/LeadsController.php
+++ b/app/Controllers/LeadsController.php
@@ -4902,7 +4902,7 @@ class LeadsController extends BaseController
 
                 // Start table with clean styling
                 $html .= "<h3 style='color: #333; font-weight: 500; margin-bottom: 15px;'>{$category}</h3>";
-                $html .= "<table data-custom-table-css="table" style='width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px;'>";
+                $html .= "<table data-custom-table-css='table' style='width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px;'>";
 
                 // Table header with light background
                 $html .= "<tr>";
diff --git a/app/Views/layout/header.php b/app/Views/layout/header.php
index 5783afbf..35ad766e 100755
--- a/app/Views/layout/header.php
+++ b/app/Views/layout/header.php
@@ -97,17 +97,7 @@
     <!-- <script src="<?= base_url('public/unlayer/js/embed.js') . '' ?>"></script> -->
     <!-- srinivas -->
     <style>
-        body[data-sidebar-size=condensed]:not([data-layout=compact]):not(.auth-fluid-pages) {
-            min-height: 0;
-        }
 
-        body[data-sidebar-size=condensed] .navbar-custom {
-            left: 155px !important;
-        }
-
-        body[data-sidebar-size=condensed] .logo-box {
-            width: 155px !important;
-        }
 
         .navbar-custom {
             top: -10px !important;
@@ -671,39 +661,39 @@ a.app-badge-secondary:focus, a.app-badge-secondary.focus {
     outline: 0;
     box-shadow: 0 0 0 0.15rem rgba(226, 103, 40, 0.5); }
 
-thead th {
+table[data-custom-table-css="table"] thead th {
     background-color: #00999E;
     color: #fff !important;
     border-top: 0px solid #fff !important;
     border-bottom: 0px solid #fff !important;
 }
 
-tbody td {
+table[data-custom-table-css="table"] tbody td {
     background: #F5FFFF;   
     padding: 12px;
     border-top: 0px solid #fff !important;
     border-bottom: 2px solid #C3EDEE !important;
 }
 
-thead th:first-child {
+table[data-custom-table-css="table"] thead th:first-child {
     border-top-left-radius: 15px !important;
     border-bottom-left-radius: 15px !important;
 }
-thead th:last-child {
+table[data-custom-table-css="table"] thead th:last-child {
     border-top-right-radius: 15px !important;
     border-bottom-right-radius: 15px !important;
 }
 
-tbody tr td:first-child {
+table[data-custom-table-css="table"] tbody tr td:first-child {
     border-top-left-radius: 15px !important;
     border-bottom-left-radius: 15px !important;
 }
-tbody tr td:last-child {
+table[data-custom-table-css="table"] tbody tr td:last-child {
     border-top-right-radius: 15px !important;
     border-bottom-right-radius: 15px !important;
 }
 
-tbody tr:hover td {
+table[data-custom-table-css="table"] tbody tr:hover td {
     background-color: #e0e0e0;
 }
 
diff --git a/app/Views/view_rfq.php b/app/Views/view_rfq.php
index 3d720833..cf213fad 100644
--- a/app/Views/view_rfq.php
+++ b/app/Views/view_rfq.php
@@ -1,14 +1,9 @@
 <style>
-    /* Custom CSS */
-    body {
-        background-color: #f4f4f4;
-        color: #333;
-        /* padding: 20px; */
-        font-size: small;
-    }
+
+
 
     .table-container {
-        overflow-x: auto;
+        overflow-x: auto !important;
         /* margin-top: 20px; */
     }
 
@@ -19,9 +14,9 @@
 
     .table th,
     .table td {
-        vertical-align: middle;
-        text-align: center;
-        text-wrap: pretty;
+        vertical-align: middle!important;
+        text-align: center!important;
+        text-wrap: pretty!important;
     }
 
     .table th,
@@ -37,18 +32,18 @@
 
     #rfqTable th:nth-child(-n+3),
     #rfqTable td:nth-child(-n+3) {
-        border: none;
+        border: none !important;
     }
 
     #rfqTable th:nth-child(-n+3),
     #rfqTable td:nth-child(-n+3) {
-         border: 2px solid #007bff;
+         border: 2px solid #007bff !important;
     }
 
     #rfqTable th:nth-child(n+4),
     #rfqTable td:nth-child(n+4) {
-        border: 2px solid #007bff;
-        outline: none;
+        border: 2px solid #007bff !important;
+        outline: none !important;
     }
 
     #rfqTable thead th {
@@ -58,7 +53,7 @@
     /* Apply border to all columns */
     #rfqTable_for_calc th,
     #rfqTable_for_calc td {
-        border: 2px solid #007bff;
+        border: 2px solid #007bff !important;
         
     }
 
@@ -67,18 +62,18 @@
     #rfqTable_for_calc td:nth-child(-n+2),
     #rfqTable_for_calc th:last-child,
     #rfqTable_for_calc td:last-child {
-        border: none;
+        border: none !important;
     }
 
     .table th,
     .table td {
-        min-width: 150px;
+        min-width: 150px !important;
     }
 
     .table th.sno,
     .table td.sno {
         width: 10px;
-        background-color: #bfe0e2;
+        background-color: #bfe0e2 !important;
     }
 
     .table th.action,
@@ -88,11 +83,11 @@
 
     .table th.sticky,
     .table td.sticky {
-        position: sticky;
-        left: 0;
-        background-color: #bfe0e2;
-        z-index: 2;
-        width: 10px;
+        position: sticky !important;
+        left: 0 !important;
+        background-color: #bfe0e2 !important;
+        z-index: 2 !important;
+        width: 10px !important;
     }
 
     .suggestion-box {
@@ -239,8 +234,54 @@
 
     .no-border {
         border: none !important;
+        color:black !important;
     }
 
+    .display_name{
+        color:black;
+    }
+
+    #rfqTable{
+        background-color: white;
+    }
+
+    #rfqTable th , #rfqTable td{
+        border-radius: 0px !important;
+    }
+
+    #rfqTable thead th{
+        background-color: white;
+    }
+
+
+    #rfqTable_for_calc,
+    #rfqTable_for_calc th,
+    #rfqTable_for_calc td {
+        border: 2px solid blue;
+        border-collapse: collapse; /* ensures borders don't double */
+    }
+
+    #rfqTable_for_calc {
+        background-color: white;
+        color:black;
+        width: 100%;
+    }
+
+
+    #rfqTable_for_calc th , #rfqTable_for_calc td{
+        border-radius: 0px !important;
+    }
+
+    #rfqTable_for_calc thead th{
+        background-color: white;
+    }
+
+    #rfqTable_for_calc .sticky{
+        background-color: white !important;
+        color: white !important;
+    }
+
+
     .save-indicator {
         position: absolute;
         top: 10px;
@@ -301,24 +342,24 @@
 
                 <div class="save-indicator" id="saveIndicator">Saved</div>
                 <div class="table-container" id="first_table">
-                    <table data-custom-table-css="table" id="rfqTable" class="table table-bordered mt-3">
+                    <table  id="rfqTable" class="table table-bordered mt-3">
                         <thead>
                             <tr>
                                 <th class="sticky no-border" style="border-right: 2px solid rgb(0, 123, 255) !important; border-left: 2px solid rgb(0, 123, 255) !important; border-top: 2px solid rgb(0, 123, 255) !important; min-width: 72px !important;"><span class="key_name" style="display: none;">Sno</span><span class="display_name">S.No.</span></th>
                                 <th class="hidden no-border" style="border-right: 2px solid rgb(0, 123, 255) !important;">Item Key</th>
                                 <th class="sticky no-border" style="border-top: 2px solid rgb(0, 123, 255) !important; border-right: 2px solid rgb(0, 123, 255) !important;">Particulars</th>
-                                <th contenteditable="false" id="first_proposel_title" ><span class="key_name" style="display: none;">Proposal 1</span><span class="display_name">Proposal Coverage 1</span>
+                                <th class="sticky no-border" style="background-color: white !important;" contenteditable="false" id="first_proposel_title" ><span class="key_name" style="display: none;">Proposal 1</span><span class="display_name">Proposal Coverage 1</span>
                                     <span class="dropdown" onclick="showThreeDottedMenu(event)">
                                         <button class="dropbtn">⋮</button>
                                         <div class="dropdown-content">
                                             <a href="#" class="addInsurer">Add Insurer</a>
                                             <a href="#" class="qcrProposal"
                                                 style="background-color: rgb(221, 221, 221);">QCR <i
-                                                    class="fa fa-check-square"
+                                                    class="mdi mdi-checkbox-marked"
                                                     style="color: green; margin-left: 8px;"></i></a>
                                             <a href="#" class="sendClientProposal"
                                                 style="background-color: rgb(221, 221, 221);">Send to Client <i
-                                                    class="fa fa-check-square"
+                                                    class="mdi mdi-checkbox-marked"
                                                     style="color: green; margin-left: 8px;"></i></a>
                                             <a href="#" class="removeProposal">Remove</a>
                                         </div>
@@ -355,7 +396,7 @@
                 <!-- <button id="getjson" class="btn btn-primary" onclick="generateJSONFromTable()">getjson</button> -->
 
                 <div class="table-container" id="second_table" style="display: none;">
-                    <table data-custom-table-css="table" id="rfqTable_for_calc" class="table table-bordered mt-3">
+                    <table  id="rfqTable_for_calc" class="table table-bordered mt-3">
                     </table>
                 </div>
             </div>
@@ -370,7 +411,7 @@
 <!-- Suggestion Box -->
 <div id="suggestionBox" class="suggestion-box">
     <div class="text-right" style="padding-right: 10px;">
-        <i class="fa fa-times remove-icon" aria-hidden="true" style="color: black;text-align: right;"
+        <i class="mdi mdi-close remove-icon" aria-hidden="true" style="color: black;text-align: right;"
             onclick="hideSuggestionBox()"></i>
     </div>
     <ul id="suggestionList"></ul>
@@ -381,8 +422,13 @@
 
 <!-- familiy floater dialog -->
 <div class="dialog" id="familyFloaterDialog">
-    <div class="dialog-header">Family Members <i class="fa fa-times remove-icon" id="closeDialogBtn" aria-hidden="true"
-            style="color: black;text-align: right;margin-left: 99px;"></i></div>
+    <div class="dialog-header ">
+        <span style="color:black;" >Family Members </span>
+        <span>
+            <i class="mdi mdi-close remove-icon" id="closeDialogBtn" aria-hidden="true"
+                style="color: black;text-align: right;margin-left: 80px;margin-top:10px;"></i>
+        </span>
+    </div>
     <div class="dialog-content">
         <label>
             <input type="checkbox" id="family_self" checked>
@@ -1313,10 +1359,10 @@ function addSuggestionsToTable() {
                     <div class="dropdown-content">
                         <a href="#" class="addInsurer">Add Insurer</a>
                         <a href="#" class="qcrProposal" style="background-color: rgb(221, 221, 221);">
-                            QCR <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>
+                            QCR <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>
                         </a>
                         <a href="#" class="sendClientProposal" style="background-color: rgb(221, 221, 221);">
-                            Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>
+                            Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>
                         </a>
                         <a href="#" class="removeProposal">Remove</a>
                     </div>
@@ -1606,8 +1652,8 @@ addQuoteButton.addEventListener('click', function() {
                     <button class="dropbtn">⋮</button>
                     <div class="dropdown-content">
                         <!-- <a href="#" class="addInsurer">Add Insurer</a> -->
-                        <a href="#" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
-                        <a href="#" class="sendClientProposal" style="background-color: rgb(221, 221, 221);">Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
+                        <a href="#" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
+                        <a href="#" class="sendClientProposal" style="background-color: rgb(221, 221, 221);">Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
                         <a href="#" class="removeProposal">Remove</a>
                     </div>
                 </span>`;
@@ -2155,8 +2201,8 @@ function addInsurerData(event, insurerName, dataId, nextIndex = null) {
                             <button class="dropbtn">⋮</button>
                             <div class="dropdown-content">
                                 <a href="#" class="changeInsurer">Change Insurer</a>
-                                <a href="#" class="qcrInsurer" style="background-color: rgb(221, 221, 221);">QCR <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
-                                <a href="#" class="sendClientInsurer" style="background-color: rgb(221, 221, 221);">Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
+                                <a href="#" class="qcrInsurer" style="background-color: rgb(221, 221, 221);">QCR <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
+                                <a href="#" class="sendClientInsurer" style="background-color: rgb(221, 221, 221);">Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
                                 <a href="#" class="removeInsurer">Remove</a>
                                <!-- <a href="#" class="copyInsurerLast">Copy</a> -->
                             </div>
@@ -2376,8 +2422,8 @@ function copyInsurerData(event, insurerName, dataId){
                             <button class="dropbtn">⋮</button>
                             <div class="dropdown-content">
                                 <a href="#" class="changeInsurer">Change Insurer</a>
-                                <a href="#" class="qcrInsurer" style="background-color: rgb(221, 221, 221);">QCR <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
-                                <a href="#" class="sendClientInsurer" style="background-color: rgb(221, 221, 221);">Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></a>
+                                <a href="#" class="qcrInsurer" style="background-color: rgb(221, 221, 221);">QCR <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
+                                <a href="#" class="sendClientInsurer" style="background-color: rgb(221, 221, 221);">Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></a>
                                 <a href="#" class="removeInsurer">Remove</a>
                                 <!-- <a href="#" class="copyInsurerNext">Copy to next</a> -->
                                 <!-- <a href="#" class="copyInsurerLast">Copy</a>  -->
@@ -2902,9 +2948,9 @@ function changeState(event) {
     let type = event.target.className;
     console.log('1 : ', type);
 
-    // if (type.includes('sendClientProposal') && type.includes('fa fa-check-square')) {
+    // if (type.includes('sendClientProposal') && type.includes('mdi mdi-checkbox-marked')) {
     //     type = 'sendClientProposal';
-    // } else if (type.includes('qcrProposal') && type.includes('fa fa-check-square')) {
+    // } else if (type.includes('qcrProposal') && type.includes('mdi mdi-checkbox-marked')) {
     //     type = 'qcrProposal';
     // }
     // console.log('2 : ',type);
@@ -2963,7 +3009,7 @@ function changeState(event) {
 
                              if (!icon) {
                                 icon = $('<i></i>')
-                                    .addClass('fa fa-check-square')
+                                    .addClass('mdi mdi-checkbox-marked')
                                     .css('color', 'green')
                                     .css('margin-left', '8px');
                                 sendClientProposal.append(icon);
@@ -4620,9 +4666,9 @@ function jsonToTable(json) {
                 'style="background-color: rgb(221, 221, 221);"' : '';
 
             const check_icon_qcr = proposels[header.parentHeader]?.qcr == 1 ?
-                `<i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>` : '';
+                `<i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>` : '';
             const check_icon_stc = proposels[header.parentHeader]?.stc == 1 ?
-                `<i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>` : '';
+                `<i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>` : '';
 
 
             let renewal_or_rollover = header.parentHeader;
@@ -4760,10 +4806,10 @@ function jsonToTable(json) {
                         'style="background-color: rgb(221, 221, 221);"' : '';
 
                     checkDropdownDataQCRForInsurer = insurerData.qcr == 1 ?
-                        `<i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>` :
+                        `<i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>` :
                         '';
                     checkDropdownDataSTCForInsurer = insurerData.stc == 1 ?
-                        `<i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>` :
+                        `<i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>` :
                         '';
 
                     // console.log('Proposal data for insurer (insurerData):', insurerData);
diff --git a/app/Views/view_rfq_non_eb.php b/app/Views/view_rfq_non_eb.php
index 3709fb15..a1292e11 100644
--- a/app/Views/view_rfq_non_eb.php
+++ b/app/Views/view_rfq_non_eb.php
@@ -1144,11 +1144,11 @@
                 <span class="three-dot-menu" onclick="showDropdown(event)">⋮</span>
                 <div class="dropdown-content">
                     <button id="isQCR" onclick="addOrRemoveIcon(this,event)" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR <i
-                        class="fa fa-check-square"
+                        class="mdi mdi-checkbox-marked"
                         style="color: green; margin-left: 8px;"></i></button>
                     <button id="isSTC" class="sendClientProposal" onclick="addOrRemoveIcon(this,event)"
                         style="background-color: rgb(221, 221, 221);">Send to Client <i
-                        class="fa fa-check-square"
+                        class="mdi mdi-checkbox-marked"
                         style="color: green; margin-left: 8px;"></i></button>
                     <button class = "removeProposal" onclick="removeProposal(${proposalCount})">Remove Proposal</button>
                     <button class="newInsurer" onclick="addNewQuote(${proposalCount})">Add New Insurer</button>
@@ -1519,7 +1519,7 @@
                 <div class="dropdown-content">
                     <button id="isInsurerSTC" class="sendInsurerClientProposal" onclick="addOrRemoveIconInsurer(this,event)"
                         style="background-color: rgb(221, 221, 221;">
-                        Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i>
+                        Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i>
                     </button>
                     <button onclick="changeInsurer(event, ${proposalNumber}, '${newQuote}')">Change Insurer</button>
                     <button onclick="removeQuote(event, ${proposalNumber}, '${newQuote}')">Remove Quote</button>
@@ -1708,8 +1708,8 @@
                 Proposal ${proposal}
                 <span class="three-dot-menu" onclick="showDropdown(event)">&#8942;</span>
                 <div class="dropdown-content">
-                    <button id="isQCR" onclick="addOrRemoveIcon(this,event)" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></button>
-                    <button id="isSTC" class="sendClientProposal" onclick="addOrRemoveIcon(this,event)" style="background-color: rgb(221, 221, 221);">Send to Client <i class="fa fa-check-square" style="color: green; margin-left: 8px;"></i></button>
+                    <button id="isQCR" onclick="addOrRemoveIcon(this,event)" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></button>
+                    <button id="isSTC" class="sendClientProposal" onclick="addOrRemoveIcon(this,event)" style="background-color: rgb(221, 221, 221);">Send to Client <i class="mdi mdi-checkbox-marked" style="color: green; margin-left: 8px;"></i></button>
                     <button class = "removeProposal" onclick="removeProposal(${proposal})">Remove Proposal</button>
                     <button class="newInsurer" onclick="addNewQuote(${proposal})">Add New Insurer</button>
                 </div>
@@ -3455,11 +3455,11 @@
                     <span class="three-dot-menu" >&#8942;</span>
                     <div class="dropdown-content">
                     <button id = "isQCR" onclick = "addOrRemoveIcon(this,event)" class="qcrProposal" style="background-color: rgb(221, 221, 221);">QCR ${headerCheckBoxProperties['qcr'] == 1 ? `<i
-                            class="fa fa-check-square"
+                            class="mdi mdi-checkbox-marked"
                             style="color: green; margin-left: 8px; "></i> `:"" }</button>
                         <button id = "isSTC" class="sendClientProposal" onclick = "addOrRemoveIcon(this,event)"
                         style="background-color: rgb(221, 221, 221);">Send to Client ${headerCheckBoxProperties['stc'] == 1 ? `<i
-                            class="fa fa-check-square"
+                            class="mdi mdi-checkbox-marked"
                             style="color: green; margin-left: 8px; "></i> `:"" }</button>
                     <button class = "removeProposal" onclick="removeProposal(${proposalHTMLNumber})">Remove Proposal</button>
                     <button class = "newInsurer" onclick="addNewQuote(${proposalHTMLNumber})">Add New Insurer</button>
@@ -3498,7 +3498,7 @@
                     <div class="dropdown-content">
                     <button id = "isInsurerSTC" class="sendInsurerClientProposal" onclick = "addOrRemoveIconInsurer(this,event)"
                         style="background-color: rgb(221, 221, 221);">Send to Client ${matchedInsurer.stc == 1 ? `<i
-                            class="fa fa-check-square"
+                            class="mdi mdi-checkbox-marked"
                             style="color: green; margin-left: 8px; "></i>`: ""} </button>
                         <button onclick="changeInsurer(event, ${proposalHTMLNumber}, '${subHeader}')">Change Insurer</button>
                         <button onclick="removeQuote(event, ${proposalHTMLNumber}, '${subHeader}')">Remove Quote</button>
@@ -3603,7 +3603,7 @@
 
     function createCheckIcon() {
         const icon = document.createElement('i');
-        icon.className = 'fa fa-check-square';
+        icon.className = 'mdi mdi-checkbox-marked';
         icon.style.color = 'green';
         icon.style.marginLeft = '8px';
         return icon;
diff --git a/public/assets/js/pages/foo-tables.init.js b/public/assets/js/pages/foo-tables.init.js
index 480cc5ee..06269a8e 100755
--- a/public/assets/js/pages/foo-tables.init.js
+++ b/public/assets/js/pages/foo-tables.init.js
@@ -1 +1 @@
-$(window).on("load",function(){$("#demo-foo-row-toggler").footable(),$("#demo-foo-accordion").footable().on("footable_row_expanded",function(o){$("#demo-foo-accordion tbody tr.footable-detail-show").not(o.row).each(function(){$("#demo-foo-accordion").data("footable").toggleDetail(this)})}),$("#demo-foo-pagination").footable(),$("#demo-show-entries").change(function(o){o.preventDefault();var t=$(this).val();$("#demo-foo-pagination").data("page-size",t),$("#demo-foo-pagination").trigger("footable_initialized")});var t=$("#demo-foo-filtering");t.footable().on("footable_filtering",function(o){var t=$("#demo-foo-filter-status").find(":selected").val();o.filter+=o.filter&&0<o.filter.length?" "+t:t,o.clear=!o.filter}),$("#demo-foo-filter-status").change(function(o){o.preventDefault(),t.trigger("footable_filter",{filter:$(this).val()})}),$("#demo-foo-search").on("input",function(o){o.preventDefault(),t.trigger("footable_filter",{filter:$(this).val()})});var e=$("#demo-foo-addrow");e.footable().on("click",".demo-delete-row",function(){var o=e.data("footable"),t=$(this).parents("tr:first");o.removeRow(t)}),$("#demo-input-search2").on("input",function(o){o.preventDefault(),e.trigger("footable_filter",{filter:$(this).val()})}),$("#demo-btn-addrow").click(function(){e.data("footable").appendRow('<tr><td style="text-align: center;"><button class="demo-delete-row btn btn-danger btn-xs btn-icon"><i class="fa fa-times"></i></button></td><td>Adam</td><td>Doe</td><td>Traffic Court Referee</td><td>22 Jun 1972</td><td><span class="badge label-table badge-success   ">Active</span></td></tr>')})});
\ No newline at end of file
+$(window).on("load",function(){$("#demo-foo-row-toggler").footable(),$("#demo-foo-accordion").footable().on("footable_row_expanded",function(o){$("#demo-foo-accordion tbody tr.footable-detail-show").not(o.row).each(function(){$("#demo-foo-accordion").data("footable").toggleDetail(this)})}),$("#demo-foo-pagination").footable(),$("#demo-show-entries").change(function(o){o.preventDefault();var t=$(this).val();$("#demo-foo-pagination").data("page-size",t),$("#demo-foo-pagination").trigger("footable_initialized")});var t=$("#demo-foo-filtering");t.footable().on("footable_filtering",function(o){var t=$("#demo-foo-filter-status").find(":selected").val();o.filter+=o.filter&&0<o.filter.length?" "+t:t,o.clear=!o.filter}),$("#demo-foo-filter-status").change(function(o){o.preventDefault(),t.trigger("footable_filter",{filter:$(this).val()})}),$("#demo-foo-search").on("input",function(o){o.preventDefault(),t.trigger("footable_filter",{filter:$(this).val()})});var e=$("#demo-foo-addrow");e.footable().on("click",".demo-delete-row",function(){var o=e.data("footable"),t=$(this).parents("tr:first");o.removeRow(t)}),$("#demo-input-search2").on("input",function(o){o.preventDefault(),e.trigger("footable_filter",{filter:$(this).val()})}),$("#demo-btn-addrow").click(function(){e.data("footable").appendRow('<tr><td style="text-align: center;"><button class="demo-delete-row btn btn-danger btn-xs btn-icon"><i class="mdi mdi-close"></i></button></td><td>Adam</td><td>Doe</td><td>Traffic Court Referee</td><td>22 Jun 1972</td><td><span class="badge label-table badge-success   ">Active</span></td></tr>')})});
\ No newline at end of file