diff --git a/app/Controllers/LeadsController.php b/app/Controllers/LeadsController.php
index 28a7725f..fd394c90 100644
--- a/app/Controllers/LeadsController.php
+++ b/app/Controllers/LeadsController.php
@@ -681,6 +681,7 @@ class LeadsController extends BaseController
         ], 200);
     }
 
+
     public function createQCR()
     {
 
@@ -3341,5 +3342,4 @@ class LeadsController extends BaseController
         // kint::dump($data);
         return $data;
     }
-    
 }
diff --git a/app/Views/policyRegisterModel.php b/app/Views/policyRegisterModel.php
index 680b2b12..12f86dce 100644
--- a/app/Views/policyRegisterModel.php
+++ b/app/Views/policyRegisterModel.php
@@ -1128,7 +1128,11 @@
                 prependTable(policySummary[key],key);
             });
         }
+        $('.loader').fadeIn();
+        $('.loader-mask').fadeIn();
         toastr.success("Policy Information Collected ","SUCCESS");
+        $('.loader').fadeOut();
+        $('.loader-mask').delay(350).fadeOut('slow');
         console.log("Updated policy data in localStorage:", existingData);
     }
 
diff --git a/app/Views/view_rfq_non_eb.php b/app/Views/view_rfq_non_eb.php
index 5822cb9f..bea3553e 100644
--- a/app/Views/view_rfq_non_eb.php
+++ b/app/Views/view_rfq_non_eb.php
@@ -10,35 +10,58 @@
         color: #fff;
         margin-right: 10px;
     }
+    .readonly-select {
+        pointer-events: none;
+        background-color: #f0f0f0; 
+        color: #666; 
+    }
 
     table {
         /* border-collapse: collapse; */
         margin-bottom: 20px;
         /* max-width: 800px; */
         /* table-layout: fixed; */
-        width: 1200px;
-        /* Set a fixed width */
+        width: 1400px;
+        min-width: 1200px;
         table-layout: fixed;
-        /* Ensures equal column widths */
         border-collapse: collapse;
-        /* Optional: Makes borders cleaner */
         word-wrap: break-word;
 
     }
 
 
 
-    th:nth-child(1),
-    td:nth-child(1) {
+    /* Apply styles to the first column, accounting for rowspan */
+    table th:nth-child(1),
+    table td:nth-child(1) {
         width: 110px;
-        /* Adjust first column width */
+        background-color: #bfe0e2;
+    }
+
+
+
+    /* Ensure rowspan cells in the first column inherit the same styles */
+    table td[rowspan]:nth-child(1) {
+        width: 110px;
+        /* background-color: #bfe0e2; */
+    }
+
+    .table th[contenteditable],
+    .table td[contenteditable] {
+        border: 1px solid #007bff;
+        outline: none;
     }
 
     th:nth-child(2),
     td:nth-child(2) {
         width: 720px;
+        background-color: #bfe0e2;
         /* Adjust first column width */
     }
+    .bold {
+        font-weight: bold;
+        color: red;
+    }
 
     th:nth-last-child(1),
     td:nth-last-child(1) {
@@ -53,7 +76,7 @@
     }
 
     th {
-        background-color: #f2f2f2 !important;
+        /* background-color: #f2f2f2 !important; */
         position: relative !important;
     }
 
@@ -68,6 +91,12 @@
         box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
         z-index: 1;
     }
+    /* Selects the last cell in each row */
+    table tr td:last-child,
+    table tr th:last-child {
+        background-color: white !important; 
+    }
+
 
     .dropdown-content button {
         display: block;
@@ -98,11 +127,13 @@
         cursor: pointer;
         min-width: 80px;
         user-select: none;
+        background-color: #ff9999;
     }
 
     /* Hover effect for options */
     .dropdown-option:hover {
-        background-color: #f0f0f0;
+        background-color: #333;
+        color : white;
     }
 
     /* Optional: Add transition for smoother hover effect */
@@ -115,11 +146,6 @@
         cursor: pointer;
     }
 
-    [contenteditable="true"] {
-        pointer-events: auto;
-        /* Ensure clicking works */
-    }
-
     /* Optional: Style for selected state */
     .selected-option {
         background-color: #f8f9fa;
@@ -160,6 +186,56 @@
         color: white !important;
         margin-right: 5px;
     }
+
+    .table-collapsible-bar {
+        background-color: #f1f1f1;
+        padding: 10px;
+        cursor: pointer;
+        border: 1px solid #ddd;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0;
+    }
+
+    .table-collapsible-bar .collapse-icon {
+        transition: transform 0.3s ease;
+    }
+
+    .table-collapsible-bar.collapsed .collapse-icon {
+        transform: rotate(-90deg);
+    }
+
+    .table-content {
+        overflow-x: auto;
+        width: 100%;
+    }
+
+    /* Ensure these styles are present */
+    .table-content {
+        transition: all 0.3s ease;
+        /* overflow: hidden; */
+    }
+
+    .table-content.collapse:not(.show) {
+        display: none;
+    }
+
+    .table-content.collapse.show {
+        display: block;
+    }
+
+    .collapse-icon {
+        transition: transform 0.3s ease;
+    }
+
+    .table-collapsible-bar {
+        cursor: pointer;
+        user-select: none;
+    }
+    
 </style>
 
 
@@ -389,6 +465,7 @@
 </div><!-- /.modal -->
 
 <script>
+    // var randomColor = 'hsl(' + Math.random() * 360 + ', 100%, 93%)';
     var rfq_data = <?= isset($rfq_data['json']) ? json_encode($rfq_data['json'], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) : '""' ?>;
     rfq_data = rfq_data ? JSON.parse(rfq_data) : {}; // Convert to object if not already
 
@@ -409,7 +486,7 @@
     var suggestions = {};
     var policyInformationData = <?= isset($rfq_data['registration_json']) ? json_encode($rfq_data['registration_json'], JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT) : '""' ?>;
     var storedData = {};
-    console.log("stored data : ", typeof(policyInformationData))
+    // console.log("stored data : ", typeof(policyInformationData))
 
     if (policyInformationData.length) {
 
@@ -419,16 +496,16 @@
 
     var policySummary = [];
 
-    console.log("policy summary is set :", !$.isEmptyObject(policySummary) ? "no" : "yes")
+    // console.log("policy summary is set :", !$.isEmptyObject(policySummary) ? "no" : "yes")
     $(document).ready(function() {
         myModal = new bootstrap.Modal(document.getElementById('policyRegisterModel'));
     });
     var tableCount = 0;
     const policies = <?= json_encode($policies) ?>;
-    console.log('policies', policies); 
+    // console.log('policies', policies);
 
     const child_table_data = <?= json_encode($child_table_data) ?>;
-    console.log('child_table_data', child_table_data); 
+    // console.log('child_table_data', child_table_data);
 
     const policyOrder = [{
             'fire': {
@@ -490,7 +567,7 @@
     let selectedPolicies = new Set();
 
     let proposalCount = 1;
-    console.log("Proposal count changed", proposalCount);
+    // console.log("Proposal count changed", proposalCount);
     let quotesConfig = {
         1: ['Quote asked']
     }; // Stores quote columns for each proposal
@@ -517,7 +594,7 @@
             }
             insertPosition += quotesConfig[proposalNumber].length - 1;
             let table_id = table.id ? table.id : 'parent';
-            console.log('insert position of ' + table.id + ' - ' + insertPosition);
+            // console.log('insert position of ' + table.id + ' - ' + insertPosition);
             // Add new quote sub-header
             const newQuoteHeader = document.createElement('th');
             newQuoteHeader.textContent = newQuote;
@@ -536,9 +613,9 @@
 
     // Show dropdown menu
     function showDropdown(event) {
-        console.log("dropdown function triggered");
+        // console.log("dropdown function triggered");
         const dropdown = event.target.nextElementSibling;
-        console.log(dropdown);
+        // console.log(dropdown);
         dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
         event.stopPropagation();
     }
@@ -546,8 +623,8 @@
     // Remove a proposal column
     function removeProposal(proposalNumber) {
 
-        console.log('removeProposal');
-        console.log(quotesConfig);
+        // console.log('removeProposal');
+        // console.log(quotesConfig);
         if (!quotesConfig[proposalNumber]) return; // If proposal doesn't exist, exit
 
         // Remove all child columns for the proposal
@@ -559,7 +636,12 @@
             // Find the proposal header and calculate its colspan
             const proposalHeader = headerRow1.querySelector(`th[data-proposal="${proposalNumber}"]`);
             if (proposalHeader) {
-                const colspan = parseInt(proposalHeader.getAttribute('colspan'), 10);
+
+                if (rfq_or_qcr == 1){
+                    var colspan = parseInt(quotesConfig[proposalNumber].length);
+                }else{
+                    var colspan = parseInt(proposalHeader.getAttribute('colspan'), 10);
+                }
 
                 // Remove the proposal header
                 proposalHeader.remove();
@@ -571,6 +653,7 @@
                     startIndex += quotesConfig[i]?.length || 1;
                 }
                 for (let i = 0; i < colspan; i++) {
+
                     headerRow2.removeChild(headerRow2.children[startIndex]);
                 }
 
@@ -587,17 +670,21 @@
         delete quotesConfig[proposalNumber];
 
         delete policyConfig[proposalNumber];
+        // console.log("DELETE INSURE : policyConfig",policyConfig);
+        // console.log("DELETE INSURE : quotesConfig",quotesConfig);
+        // alert(quotesConfig);
+        // alert(policyConfig)
     }
 
     // Add a new row
     function addRow(event, element) {
 
-        console.log(' event  ', element);
+        // console.log(' event  ', element);
         const button = event.target;
         const row = button.closest('tr');
         const table = row.closest('table');
         const newRow = row.cloneNode(true);
-        console.log("old Row ", row);
+        // console.log("old Row ", row);
         // return false;
         var tableID = table.id;
 
@@ -605,7 +692,7 @@
         // Clear input values and generate new IDs
         newRow.querySelectorAll('td').forEach((td, index) => {
             if (index === 0) {
-                console.log("Trying to set sno");
+                // console.log("Trying to set sno");
                 td.innerHTML = "";
                 td.innerHTML = `${nextSNO}`;
             }
@@ -622,7 +709,7 @@
         const row = button.closest('tr');
         const table = row.closest('table');
         if (row && row.parentElement.children.length > 1) {
-            console.log("Row Removed");
+            // console.log("Row Removed");
             row.remove();
             updateSNO(table.id);
         }
@@ -630,23 +717,23 @@
 
     //function to hide all the 3 dot actions for the child table
     function hideProposalOptionsForChild() {
-        // console.log('function called');
+        // // console.log('function called');
         const parentTable = document.querySelector("table");
         const tables = document.querySelectorAll('table');
 
-        // console.log('parentTable    : ',parentTable);
+        // // console.log('parentTable    : ',parentTable);
         tables.forEach(table => {
             if (table !== parentTable) {
                 // Hide .three-dot-menu in all other tables
                 $(table).find(".three-dot-menu").hide();
-                // console.log("hided 3 dot menu in the table",table);
+                // // console.log("hided 3 dot menu in the table",table);
             }
         });
     }
     document.addEventListener("change", function(event) {
         const checkbox = event.target;
         if (checkbox.classList.contains("qcr-checkbox")) {
-            console.log("QCR checkbox change detected");
+            // // console.log("QCR checkbox change detected");
 
             // Get the row containing the checkbox
             const row = checkbox.closest('tr');
@@ -660,15 +747,15 @@
 
                 // Optionally, you can trigger any additional logic here
                 if (checkbox.checked) {
-                    console.log("QCR checkbox is checked, client-checkbox is also checked");
+                    // // console.log("QCR checkbox is checked, client-checkbox is also checked");
                 } else {
-                    console.log("QCR checkbox is unchecked, client-checkbox is also unchecked");
+                    // // console.log("QCR checkbox is unchecked, client-checkbox is also unchecked");
                 }
             } else {
-                console.warn("No client-checkbox found in the same row");
+                // console.warn("No client-checkbox found in the same row");
             }
         } else if (checkbox.classList.contains("client-checkbox")) {
-            console.log("trying to change");
+            // console.log("trying to change");
             const row = checkbox.closest('tr');
             const qcrCheckbox = row.querySelector('.qcr-checkbox');
 
@@ -681,6 +768,7 @@
 
     // Add this once during initial page setup
     document.getElementById('tablesContainer').addEventListener('change', function(event) {
+        checkCellValueAndHighlight();
         const container = document.getElementById('tablesContainer');
         const checkbox = event.target;
         if (checkbox.classList.contains('sno-checkbox')) {
@@ -692,7 +780,7 @@
                 child_table_data[rowId]?.forEach(childTable => {
                     if (childTable.table_type == "append") {
                         var tableName = childTable.table_id;
-                        console.log("table name ", tableName);
+                        // console.log("table name ", tableName);
                         // Handle excess table
                         const excessContainer = document.createElement('div');
                         excessContainer.setAttribute('data-parent-row', tableName);
@@ -702,21 +790,21 @@
                         if (result) {
                             generateTable(excessContainer, true, rowId, childTable);
                             container.appendChild(excessContainer);
-                            // console.log('Row id for excess table',rowId);
+                            // // console.log('Row id for excess table',rowId);
                             $("#excess .three-dot-menu").hide();
                             moveExcessTableLast();
-
                         }
                     } else {
                         // Handle regular table
                         childContainer.setAttribute('data-parent-row', rowId);
                         generateTable(childContainer, true, rowId, childTable);
-                        // console.log('Row id for excess table', rowId);
+                        // // console.log('Row id for excess table', rowId);
                         $(childContainer).find(".three-dot-menu").hide();
 
                         // alert(`${rowId.toUpperCase()}_register`);
                         $(`#${rowId.toUpperCase()}_register`).prop("disabled", false);
                         moveExcessTableLast();
+                        
                     }
                 });
 
@@ -724,23 +812,21 @@
                 if (childContainer.hasChildNodes()) {
                     container.appendChild(childContainer);
                 }
-
-
-
+                styleTableColumns();
                 arrangeTables();
                 alignTableColumn();
             } else {
-                console.log('UNCHECKED:', rowId);
+                // console.log('UNCHECKED:', rowId);
                 selectedPolicies.delete(rowId);
                 // Remove regular child tables
                 const regularContainers = container.querySelectorAll(`div[data-parent-row="${rowId}"]:not([data-excess-container])`);
                 regularContainers.forEach(container => {
-                    console.log(" contaitner ", container);
+                    // console.log(" contaitner ", container);
 
                     $(`#${rowId.toUpperCase()}_register`).prop("disabled", true);
                     container.remove();
                 });
-                console.log("row id ", rowId);
+                // console.log("row id ", rowId);
                 // Handle excess table rows
                 const excessTable = document.getElementById('excess');
                 if (excessTable) {
@@ -750,13 +836,15 @@
 
                     // Check if excess table is empty
                     const remainingRows = excessTable.querySelector('tbody').children;
-                    // console.log(remainingRows);
+                    // // console.log(remainingRows);
                     if (remainingRows.length === 0) {
                         // Remove the entire excess table container
                         // const excessContainer = excessTable.closest('div[data-excess-container]');
                         const excessContainer = $('#excess');
+                        const excessCollapseBar = document.querySelector('.table-collapsible-bar.Excess');
                         if (excessContainer) {
                             excessContainer.remove();
+                            excessCollapseBar.remove();
                         }
                     } else {
                         updateSNO('excess')
@@ -764,7 +852,7 @@
                 }
             }
         } else if (checkbox.classList.contains("qcr-checkbox")) {
-            console.log("QCR checkbox change detected");
+            // console.log("QCR checkbox change detected");
 
             // Get the row containing the checkbox
             const row = checkbox.closest('tr');
@@ -778,9 +866,9 @@
 
                 // Optionally, you can trigger any additional logic here
                 if (checkbox.checked) {
-                    console.log("QCR checkbox is checked, client-checkbox is also checked");
+                    // console.log("QCR checkbox is checked, client-checkbox is also checked");
                 } else {
-                    console.log("QCR checkbox is unchecked, client-checkbox is also unchecked");
+                    // console.log("QCR checkbox is unchecked, client-checkbox is also unchecked");
                 }
             } else {
                 console.warn("No client-checkbox found in the same row");
@@ -789,17 +877,17 @@
     });
     // Add a new proposal
     document.getElementById('addProposal').addEventListener('click', () => {
-        console.log("proposal count before ", proposalCount);
+        // console.log("proposal count before ", proposalCount);
         proposalCount++;
-        console.log("proposal count after ", proposalCount);
+        // console.log("proposal count after ", proposalCount);
 
-        quotesConfig[proposalCount] = ['Quote asked']; // Initialize with default quote
+        quotesConfig[proposalCount] = ['Quote asked'];
         policyConfig[proposalCount] = ['Quote asked'];
         const tables = document.querySelectorAll('table');
         let increaseBy = 150;
         increaseTableWidth(increaseBy);
+        var randomColor = `hsl(${Math.random() * 360}, 100%, 93%)`;
 
-        // console.log('parentTable    : ',parentTable);
         tables.forEach(table => {
             const headerRow1 = table.querySelector('thead tr:first-child');
             const headerRow2 = table.querySelector('thead tr:last-child');
@@ -808,50 +896,83 @@
             const newProposalHeader = document.createElement('th');
             newProposalHeader.setAttribute('data-proposal', proposalCount);
             newProposalHeader.colSpan = 1;
+            newProposalHeader.style.backgroundColor = randomColor;
             newProposalHeader.innerHTML = `
-                    Proposal ${proposalCount}
-                    <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)"
+                Proposal ${proposalCount}
+                <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"
+                        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 onclick="removeProposal(${proposalCount})">Remove Proposal</button>
-                        <button class = "newInsurer" onclick="addNewQuote(${proposalCount})">Add New Insurer</button>
-                    </div>
-                `;
+                        class="fa fa-check-square"
+                        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>
+                </div>
+            `;
             headerRow1.insertBefore(newProposalHeader, headerRow1.lastElementChild);
 
             // Add new quote sub-header
             const newQuoteHeader = document.createElement('th');
             newQuoteHeader.textContent = 'Quote asked';
+            newQuoteHeader.style.backgroundColor = randomColor;
             headerRow2.insertBefore(newQuoteHeader, headerRow2.querySelector('th:last-child'));
 
             // Add new cells to all rows
             table.querySelectorAll('tbody tr').forEach(row => {
-                // console.log(row);
+                const cells = Array.from(row.getElementsByTagName('td'));
+                let targetCell = null;
+                let columnCount = 0;
+                let spannedColumns = 0;
+
+                // Account for cells spanned from previous rows
+                const rowIndex = Array.from(table.querySelectorAll('tbody tr')).indexOf(row);
+                table.querySelectorAll('tbody tr').forEach((prevRow, prevIndex) => {
+                    if (prevIndex >= rowIndex) return;
+                    Array.from(prevRow.getElementsByTagName('td')).forEach(cell => {
+                        const rowspan = parseInt(cell.getAttribute('rowspan') || 1);
+                        if (rowspan > 1 && prevIndex + rowspan > rowIndex) {
+                            spannedColumns++;
+                        }
+                    });
+                });
+
+                // Find the actual third column cell
+                for (let i = 0; i < cells.length && columnCount < 3; i++) {
+                    columnCount++;
+                    if (columnCount + spannedColumns === 3) {
+                        targetCell = cells[i];
+                        break;
+                    }
+                }
+
+                if (!targetCell) {
+                    // Fallback: use the last available cell if third column not found
+                    targetCell = cells[cells.length - 1];
+                }
+
+                // console.log("ADD PROPOSAL : targetCell", targetCell);
+                const newCell = targetCell.cloneNode(true);
+                // console.log("ADD PROPOSAL : newCell", newCell);
 
-                // const newCell = document.createElement('td');
-                const lastCell = row.querySelector('td:nth-child(3)');
-                const newCell = lastCell.cloneNode(true);
                 newCell.contentEditable = true;
                 newCell.onclick = () => getAnswer(table.id, row.id);
+                newCell.style.backgroundColor = randomColor;
                 row.insertBefore(newCell, row.querySelector('td:last-child'));
             });
-            // console.log('table ',table);
-
         });
+
         hideProposalOptionsForChild();
         showOrHideFieldsBasedOnRFQorQCR();
+        // styleTableColumns();
     });
 
     // #################################################################################
 
     function addNewQuote(proposalNumber) {
-        console.log("add new Quote start : ", quotesConfig);
+        // console.log("add new Quote start : ", quotesConfig);
         const insurers = <?= json_encode($insurer); ?>;
         selectInsurer(insurers).then(result => {
             insurer = result.selectedInsurer;
@@ -862,16 +983,16 @@
 
             let increaseBy = 100;
             increaseTableWidth(increaseBy);
-            // console.log("Selected Insurer:", insurerName);
-            // console.log("Entered Version:", version);
-            // console.log("Entered data id:", dataId);
-            console.log("add new Quote : ", proposalNumber);
-            console.log("add new Quote : ", quotesConfig);
-            console.log("Add new quote insurer name : ", insurerName);
+            // // console.log("Selected Insurer:", insurerName);
+            // // console.log("Entered Version:", version);
+            // // console.log("Entered data id:", dataId);
+            // console.log("add new Quote : ", proposalNumber);
+            // console.log("add new Quote : ", quotesConfig);
+            // console.log("Add new quote insurer name : ", insurerName);
             if (!quotesConfig[proposalNumber]) return;
-            console.log("add new quote ", quotesConfig[proposalNumber]);
+            // console.log("add new quote ", quotesConfig[proposalNumber]);
             if (quotesConfig[proposalNumber].includes(insurerName)) {
-                console.log("add new quote is duplicate");
+                // console.log("add new quote is duplicate");
                 Swal.fire({
                     title: "Insurer Dublicate Found?",
                     text: "Do you want version control!",
@@ -891,7 +1012,7 @@
                         for (let i = 0; i < quotesConfig[proposalNumber].length; i++) {
                             if (quotesConfig[proposalNumber][i].startsWith(baseInsurerName)) {
                                 count++;
-                                console.log("add count ", count);
+                                // console.log("add count ", count);
                             }
                         }
 
@@ -899,12 +1020,12 @@
                         if (version === "") {
                             insurerName = `${baseInsurerName} v${count + 1}`;
                             version = count + 1;
-                            console.log("add inurer name ", insurerName);
+                            // console.log("add inurer name ", insurerName);
                         } else {
                             // If user already specified version, append count to make it unique
                             insurerName = `${baseInsurerName} v${version}_${count + 1}`;
                             version = `${version}_${count + 1}`;
-                            console.log("add inurer name else", insurerName);
+                            // console.log("add inurer name else", insurerName);
 
                         }
                         var insurerDetails = {
@@ -915,7 +1036,7 @@
                         policyConfig[proposalNumber].push(insurerDetails);
                         const newQuote = insurerName;
                         quotesConfig[proposalNumber].push(newQuote);
-                        console.log("add Quotes config", quotesConfig);
+                        // console.log("add Quotes config", quotesConfig);
                         updateAllTables(proposalNumber, insurerName);
 
                         var proposalName = `Proposal ${proposalNumber}`;
@@ -935,13 +1056,13 @@
                 policyConfig[proposalNumber].push(insurerDetails);
                 const newQuote = insurerName;
                 quotesConfig[proposalNumber].push(newQuote);
-                console.log("add Quotes config", quotesConfig);
+                // console.log("add Quotes config", quotesConfig);
                 updateAllTables(proposalNumber, insurerName);
 
                 var proposalName = `Proposal ${proposalNumber}`;
                 const proposalHeader = document.querySelector(`th[data-proposal="${proposalNumber}"]`);
                 if (proposalHeader) {
-                    console.log("Proposal heade length : ", quotesConfig[proposalNumber].length)
+                    // console.log("Proposal heade length : ", quotesConfig[proposalNumber].length)
                     proposalHeader.colSpan = quotesConfig[proposalNumber].length;
                 }
             }
@@ -949,6 +1070,7 @@
 
 
             showOrHideFieldsBasedOnRFQorQCR();
+            // styleTableColumns();
             hideProposalOptionsForChild();
         });
 
@@ -957,7 +1079,7 @@
     function changeInsurer(event, proposalNumber, currentInsurer) {
         // Stop event propagation
         event.stopPropagation();
-        console.log("insurer change function called ", quotesConfig[proposalNumber]);
+        // console.log("insurer change function called ", quotesConfig[proposalNumber]);
         if (!quotesConfig[proposalNumber]) return;
         const insurers = <?= json_encode($insurer); ?>;
 
@@ -974,24 +1096,24 @@
                 newInsurerName = `${newInsurerName}-${newversion.trim()}`.replace(/\s+/g, '');
             }
 
-            console.log('insurer newInsurerName', newInsurerName);
-            console.log('insurer newversion', newversion);
+            // console.log('insurer newInsurerName', newInsurerName);
+            // console.log('insurer newversion', newversion);
 
             if (newInsurerName) {
-                // console.log("insurer inside new insurer name : ",headerRow2);
+                // // console.log("insurer inside new insurer name : ",headerRow2);
                 // Update all tables with the new insurer
                 document.querySelectorAll('table').forEach(table => {
                     const headerRow2 = table.querySelector('thead tr:last-child');
-                    console.log("insurer inside ", headerRow2);
+                    // console.log("insurer inside ", headerRow2);
                     // Find the header cells that match our criteria
                     Array.from(headerRow2.children).forEach(th => {
                         // Check if this cell contains our insurer and proposal
-                        console.log("insurer proposal number : ", proposalNumber);
-                        console.log("insurer header proposal number : ", th);
+                        // console.log("insurer proposal number : ", proposalNumber);
+                        // console.log("insurer header proposal number : ", th);
                         if (th.getAttribute('data-proposal') === proposalNumber.toString()) {
                             // Get the first text node (the insurer name part)
                             let content = th.innerHTML;
-                            console.log("insurer inside ", content);
+                            // console.log("insurer inside ", content);
                             // Only replace the exact insurer name, not any menu text
                             if (content.includes(currentInsurer)) {
                                 // Create a regex to match just the insurer name
@@ -1015,10 +1137,10 @@
                                         // Generate new quote code based on new insurer
                                         const newQuoteCode = oldQuoteCode.replace(currentInsurer, newInsurerName);
                                         quotesConfig[proposalNumber][quoteIndex] = newQuoteCode;
-                                        console.log("Existing policy data ", policyConfig[proposalNumber][quoteIndex]);
+                                        // console.log("Existing policy data ", policyConfig[proposalNumber][quoteIndex]);
                                         policyConfig[proposalNumber][quoteIndex] = insurerDetailsChange;
-                                        console.log("quote index ", quoteIndex);
-                                        console.log("changed like this ", insurerDetailsChange);
+                                        // console.log("quote index ", quoteIndex);
+                                        // console.log("changed like this ", insurerDetailsChange);
                                         // Update data-quote attribute
                                         th.setAttribute('data-quote', newQuoteCode);
                                     }
@@ -1056,7 +1178,7 @@
 
         // Remove quote from config
         const quoteIndex = quotesConfig[proposalNumber].indexOf(quoteCode);
-        console.log("quote index ", quoteIndex);
+        // console.log("quote index ", quoteIndex);
         if (quoteIndex !== -1) {
             quotesConfig[proposalNumber].splice(quoteIndex, 1);
             policyConfig[proposalNumber].splice(quoteIndex, 1);
@@ -1076,19 +1198,19 @@
                 th.textContent.includes(quoteCode) &&
                 th.getAttribute('data-proposal') === proposalNumber.toString()
             );
-            console.log("quote target index ", targetIndex);
+            // console.log("quote target index ", targetIndex);
             if (targetIndex !== -1) {
-                console.log("quote target index inside if", targetIndex);
+                // console.log("quote target index inside if", targetIndex);
                 // Remove from header row 2
                 headerRow2.removeChild(headerRow2.children[targetIndex]);
 
                 // Update proposal header colspan
                 const proposalHeader = headerRow1.querySelector(`th[data-proposal="${proposalNumber}"]`);
-                console.log("quote target index inside if proposal header", proposalHeader);
+                // console.log("quote target index inside if proposal header", proposalHeader);
 
                 if (proposalHeader) {
                     const newColspan = parseInt(proposalHeader.colSpan) - 1;
-                    console.log("Quote new colspan : ", newColspan);
+                    // console.log("Quote new colspan : ", newColspan);
                     if (newColspan > 0) {
                         proposalHeader.colSpan = newColspan;
                     } else {
@@ -1099,10 +1221,10 @@
                 // Remove from data rows
                 table.querySelectorAll('tbody tr').forEach(row => {
                     const cellIndex = targetIndex; // No need to add 2 since we're using children array
-                    console.log("quote target index inside if proposal header", cellIndex);
+                    // console.log("quote target index inside if proposal header", cellIndex);
                     if (row.children[cellIndex]) {
                         row.removeChild(row.children[cellIndex]);
-                        console.log("quote target index inside if proposal header", row);
+                        // console.log("quote target index inside if proposal header", row);
 
                     }
                 });
@@ -1111,121 +1233,242 @@
     }
 
     function updateAllTables(proposalNumber, newQuote) {
+
         document.querySelectorAll('table').forEach(table => {
+
             const headerRow1 = table.querySelector('thead tr:first-child');
             const headerRow2 = table.querySelector('thead tr:last-child');
+            // console.log('headerRow2 data', headerRow2);
+            // console.log('headerRow2 headerRow2.children', headerRow2.children);
+
+
             const proposalHeader = headerRow1.querySelector(`th[data-proposal="${proposalNumber}"]`);
-            // console.log("Header Row 1 : ", headerRow1);
-            // console.log("Header Row 2 : ", headerRow2);
-            console.log("Proposal Header : ", proposalNumber);
+            // console.log("Proposal Header : ", proposalNumber);
             // Create new quote header
             const newQuoteHeader = document.createElement('th');
-            newQuoteHeader.textContent = newQuote;
             newQuoteHeader.innerHTML = `
-                    ${newQuote}
-                    <span class="three-dot-menu" onclick="showDropdown(event)">&#8942;</span>
-                    <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></button>
-                        <button onclick="changeInsurer(event, ${proposalNumber}, '${newQuote}')">Change Insurer</button>
-                        <button onclick="removeQuote(event, ${proposalNumber}, '${newQuote}')">Remove Quote</button>
-                    </div>
-                `;
+                ${newQuote}
+                <span class="three-dot-menu" onclick="showDropdown(event)">⋮</span>
+                <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>
+                    </button>
+                    <button onclick="changeInsurer(event, ${proposalNumber}, '${newQuote}')">Change Insurer</button>
+                    <button onclick="removeQuote(event, ${proposalNumber}, '${newQuote}')">Remove Quote</button>
+                </div>
+            `;
             newQuoteHeader.dataset.proposal = proposalNumber;
             newQuoteHeader.dataset.quote = newQuote;
 
-            // Find insert position
+            // Calculate header insert position
             let insertPosition = 2;
             for (let i = 1; i < proposalNumber; i++) {
                 insertPosition += quotesConfig[i]?.length || 0;
             }
             insertPosition += quotesConfig[proposalNumber].length - 1;
-            console.log("Header insert position : ", insertPosition);
-            console.log("Header insert position : ", newQuoteHeader.outerHTML);
-            console.log("Header insert position : ", headerRow2.children[insertPosition].outerHTML);
-            console.log("Header insert position : ", quotesConfig[proposalNumber].length);
-            console.log("Header insert position : ", proposalHeader);
-            // Update headers
+            // console.log("Header insert position : ", insertPosition);
+
+            if (headerRow2.children[insertPosition - 1]) {
+                
+                let referenceChild = headerRow2.children[insertPosition - 1]; // Get the target child
+                // console.log("referenceChild", referenceChild);
+                let computedStyle = window.getComputedStyle(referenceChild);
+                // console.log("computedStyle", computedStyle);
+
+
+                // Copy all computed styles
+                for (let prop of computedStyle) {
+                    // console.log("prop", prop);
+                    newQuoteHeader.style[prop] = computedStyle.getPropertyValue(prop);
+                }
+            }
+
             headerRow2.insertBefore(newQuoteHeader, headerRow2.children[insertPosition]);
             if (proposalHeader) proposalHeader.colSpan = quotesConfig[proposalNumber].length;
-            console.log("insert position insertPosition", insertPosition);
-            // Add new cells
-            table.querySelectorAll('tbody tr').forEach(row => {
-                const lastCell = row.querySelector(`td:nth-child(${insertPosition})`);
-                const newCell = lastCell.cloneNode(true);
-                console.log("Header insert position lasr cell: ", lastCell.outerHTML)
-                console.log("Header insert position new cell: ", newCell.outerHTML)
-                newCell.contentEditable = true;
-                newCell.onclick = () => getAnswer(table.id, row.id);
-                row.insertBefore(newCell, row.children[insertPosition]);
+
+            // Add new cells to body rows
+            table.querySelectorAll('tbody tr').forEach((row, rowIndex) => {
+                const cells = Array.from(row.children);
+                let hasRowspanGreaterThan1 = false;
+
+                // Check if any cell in this row or previous rows affecting this row has rowspan > 1
+                for (let r = 0; r <= rowIndex; r++) {
+                    const checkRow = table.querySelectorAll('tbody tr')[r];
+                    Array.from(checkRow.children).forEach(cell => {
+                        const rowspan = parseInt(cell.getAttribute('rowspan') || 1);
+                        if (rowspan > 1 && r + rowspan > rowIndex) {
+                            hasRowspanGreaterThan1 = true;
+                        }
+                    });
+                }
+
+                if (!hasRowspanGreaterThan1) {
+                    // Original method for rowspan = 1 or no rowspan
+                    const lastCell = row.querySelector(`td:nth-child(${insertPosition})`);
+                    const newCell = lastCell.cloneNode(true);
+                    if (lastCell.classList.contains("readonly-select")) {
+                        newCell.classList.remove("readonly-select");
+                    }
+                    newCell.contentEditable = true;
+                    newCell.onclick = () => getAnswer(table.id, row.id);
+                    row.insertBefore(newCell, row.children[insertPosition]);
+                } else {
+                    // Handle rowspan > 1
+                    let visualColumn = 0;
+                    let referenceCell = null;
+                    let insertBeforeCell = null;
+
+                    // Map visual columns considering spans from this and previous rows
+                    const columnOccupancy = new Array(headerRow2.children.length).fill(false);
+                    
+                    // Mark columns occupied by rowspans from previous rows
+                    for (let prevRowIndex = 0; prevRowIndex < rowIndex; prevRowIndex++) {
+                        const prevRow = table.querySelectorAll('tbody tr')[prevRowIndex];
+                        let prevVisualColumn = 0;
+                        Array.from(prevRow.children).forEach(cell => {
+                            const colspan = parseInt(cell.getAttribute('colspan') || 1);
+                            const rowspan = parseInt(cell.getAttribute('rowspan') || 1);
+                            if (prevRowIndex + rowspan > rowIndex) {
+                                for (let i = 0; i < colspan; i++) {
+                                    columnOccupancy[prevVisualColumn + i] = true;
+                                }
+                            }
+                            prevVisualColumn += colspan;
+                        });
+                    }
+
+                    // Process current row
+                    for (let i = 0; i < cells.length; i++) {
+                        const cell = cells[i];
+                        const colspan = parseInt(cell.getAttribute('colspan') || 1);
+
+                        // Skip columns occupied by previous rowspans
+                        while (columnOccupancy[visualColumn]) {
+                            visualColumn++;
+                        }
+
+                        if (visualColumn === insertPosition - 1) {
+                            referenceCell = cell;
+                            insertBeforeCell = cells[i + 1] || null;
+                        } else if (visualColumn < insertPosition && visualColumn + colspan > insertPosition) {
+                            referenceCell = cell;
+                            insertBeforeCell = cells[i + 1] || null;
+                        }
+
+                        visualColumn += colspan;
+                    }
+
+                    // If no reference found, use last cell before insertPosition
+                    if (!referenceCell) {
+                        for (let i = cells.length - 1; i >= 0; i--) {
+                            const cell = cells[i];
+                            let cellStartColumn = 0;
+                            for (let j = 0; j < i; j++) {
+                                cellStartColumn += parseInt(cells[j].getAttribute('colspan') || 1);
+                            }
+                            if (cellStartColumn <= insertPosition - 1) {
+                                referenceCell = cell;
+                                insertBeforeCell = cells[i + 1] || null;
+                                break;
+                            }
+                        }
+                    }
+
+                    // Fallback to first cell if still no reference
+                    if (!referenceCell && cells.length > 0) {
+                        referenceCell = cells[0];
+                        insertBeforeCell = cells[1] || null;
+                    }
+
+                    const newCell = referenceCell.cloneNode(true);
+                    newCell.contentEditable = true;
+                    newCell.onclick = () => getAnswer(table.id, row.id);
+                    newCell.removeAttribute('rowspan');
+                    newCell.removeAttribute('colspan');
+
+                    if (insertBeforeCell) {
+                        row.insertBefore(newCell, insertBeforeCell);
+                    } else {
+                        row.appendChild(newCell);
+                    }
+                }
             });
         });
     }
 
     function generateTable(container, isChildTable = false, parentRowId = null, tableData = null) {
+        const tableContainer = document.createElement('div');
+        tableContainer.className = 'table-container';
+
+        // Create collapsible bar with Bootstrap 4 attributes
+        const collapsibleBar = document.createElement('div');
+        collapsibleBar.className = `table-collapsible-bar ${tableData ? tableData.table_name : 'Particulars'} collapsed`;
+        collapsibleBar.setAttribute('data-toggle', 'collapse'); // Bootstrap 4 collapse trigger
+        const collapseId = `collapse-${tableData ? tableData.table_id : 'parent'}`; // Unique ID
+        collapsibleBar.setAttribute('data-target', `#${collapseId}`);
+        collapsibleBar.innerHTML = `
+        ${tableData ? tableData.table_name : "Particulars"}
+        <span class="collapse-icon">▼</span>
+    `;
+
+        // Create table content wrapper with Bootstrap 4 collapse class
+        const tableContent = document.createElement('div');
+        tableContent.className = 'table-content collapse'; // Bootstrap 4 collapse class
+        tableContent.id = collapseId; // Matches data-target
+
         const table = document.createElement('table');
         if (tableData) {
             table.id = tableData.table_id;
-        };
-        // table_name = tableData.table_name
+        }
 
         tableName = tableData ? tableData.table_name : "Particulars";
-        // console.log("table Name ",tableName);
+        // // console.log("table Name ",tableName);
         // Header setup
         const thead = document.createElement('thead');
         const headerRow1 = document.createElement('tr');
-        headerRow1.innerHTML =
-            `
-                ${isChildTable ? '<th>S.NO</th>' : '<th>Policy</th>'}
-                <th>${tableName}</th>
-                ${Object.keys(quotesConfig).map(proposal => `
-                    <th data-proposal="${proposal}" colspan="${quotesConfig[proposal].length}">
-                        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 onclick="removeProposal(${proposal})">Remove Proposal</button>
-                            <button class = "newInsurer" onclick="addNewQuote(${proposal})">Add New Insurer</button>
-                        </div>
-                    </th>   
-                `).join('')}
-                <th>Action</th>`;
+        headerRow1.innerHTML = `
+        ${isChildTable ? '<th>S.NO</th>' : '<th>Policy</th>'}
+        <th>${tableData ? tableData.table_name : "Particulars"}</th>
+        ${Object.keys(quotesConfig).map(proposal => `
+            <th data-proposal="${proposal}" colspan="${quotesConfig[proposal].length}">
+                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 class = "removeProposal" onclick="removeProposal(${proposal})">Remove Proposal</button>
+                    <button class="newInsurer" onclick="addNewQuote(${proposal})">Add New Insurer</button>
+                </div>
+            </th>   
+        `).join('')}
+        <th>Action</th>`;
 
         const headerRow2 = document.createElement('tr');
         headerRow2.innerHTML = `
-                <th>-</th>
-                <th>-</th>
-                ${Object.entries(quotesConfig).flatMap(([proposal, codes]) =>
-                codes.map(code => `
-                       <th data-proposal="${proposal}" data-quote="${code}" 
-    class="${code !== 'Quote asked' ? 'insurer_proposal' : ''}">
-    ${code}
-    <span class="three-dot-menu" onclick="showDropdown(event)">&#8942;</span>
-    <div class="dropdown-content">
-        <button onclick="removeQuote(event, ${proposal}, '${code}')">Remove Quote</button>
-    </div>
-</th>
-
-                    `)
-            ).join('')}
-                <th>-</th>`;
+        <th>-</th>
+        <th>-</th>
+        ${Object.entries(quotesConfig).flatMap(([proposal, codes]) =>
+            codes.map(code => `
+                <th data-proposal="${proposal}" data-quote="${code}" class="${code !== 'Quote asked' ? 'insurer_proposal' : ''}">
+                    ${code}
+                    <span class="three-dot-menu" onclick="showDropdown(event)">&#8942;</span>
+                    <div class="dropdown-content">
+                        <button onclick="removeQuote(event, ${proposal}, '${code}')">Remove Quote</button>
+                    </div>
+                </th>
+            `)
+        ).join('')}
+        <th>-</th>`;
 
         thead.append(headerRow1, headerRow2);
         table.appendChild(thead);
         let latestWidth = $("table").last().width();
-        // console.log('Latest width', latestWidth);
+        // // console.log('Latest width', latestWidth);
         if (tableData) {
-            // console.log("table ",$(table));
+            // // console.log("table ",$(table));
             $(table).width(latestWidth); // Convert to jQuery object using $(table)
-            // console.log('table data',tableData);
+            // // console.log('table data',tableData);
 
         }
 
@@ -1236,33 +1479,30 @@
             policies.forEach((policy) => {
                 const descriptions = policy.description;
                 const quoteAsked = policy.quote_asked;
-                const allQuotes = Object.values(quotesConfig).flat(); // Flatten all quotes
+                const allQuotes = Object.values(quotesConfig).flat();
 
                 descriptions.forEach((desc, descIndex) => {
                     const row = document.createElement('tr');
                     row.id = policy.name.replace(/\s+/g, '_').toLowerCase();
 
-                    // Generate cells for each quote
                     const quoteCells = allQuotes.map((_, index) => {
-                        const value = quoteAsked[index] || '-'; // Use corresponding quote_asked or '-'
+                        const value = quoteAsked[index] || '-';
                         return `<td contenteditable="true">${value}</td>`;
                     }).join('');
 
                     if (descIndex === 0) {
-                        // First row with rowspan and checkbox
                         row.innerHTML = `
                         <td rowspan="${descriptions.length}">
                             <input type="checkbox" class="sno-checkbox">
                             ${policy.name}
                             ${policy.name === 'Fire' || policy.name === 'Burglary' ? 
-                                `<br><button id = '${policy.name.toUpperCase()}_register'   class = "btn btn-primary btn-sm" onclick = "getPolicyInfo('${policy.name}')" class="policy-link" data-policy-name="${policy.name}" disabled>Register</button>` : 
+                                `<br><button id="${policy.name.toUpperCase()}_register" class="btn btn-primary btn-sm" onclick="getPolicyInfo('${policy.name}')" class="policy-link" data-policy-name="${policy.name}" disabled>Register</button>` : 
                                 ''}
                         </td>
                         <td contenteditable="true">${desc}</td>
                         ${quoteCells}
                         <td></td>`;
                     } else {
-                        // Subsequent rows without checkbox
                         row.innerHTML = `
                         <td contenteditable="true">${desc}</td>
                         ${quoteCells}
@@ -1277,41 +1517,28 @@
             rowsData.forEach((policy, index) => {
                 var row_fields = rowsData[index];
                 let rowID = Object.keys(row_fields)[0];
-                // console.log('row id ? ', rowID);
                 const row = document.createElement('tr');
                 row.id = isChildTable ? `${parentRowId}_child_${index}` : policy.name.replace(/\s+/g, '_').toLowerCase();
                 row.id = isChildTable ? `${rowID}` : policy.name.replace(/\s+/g, '_').toLowerCase();
 
-                // Set data attribute for excess table rows
                 if (tableData && tableData.table_id === 'excess') {
                     row.setAttribute('data-excess-row-parent', parentRowId);
-                    // $('.three-dot-menu').hide();
                 }
                 var policy_question = row_fields[rowID].display_value;
                 var answer_type = row_fields[rowID].answer_type;
                 var tableID = tableData?.table_id ?? null;
-                console.log('row fields :  ', row_fields);
                 var SNO = getSNO(tableID);
                 if (tableData) {
                     suggestions[rowID] = row_fields[rowID].answer_type;
                     if (answer_type == 'dropdown') {
                         default_answers_array = row_fields[rowID].default_answer;
-                        console.log("default ans array : ", typeof(default_answers_array))
-                        // createDropdown(default_answers_array);
                         default_value = default_answers_array[0].key;
                         default_answer = default_answers_array[0].display_value;
-
                     } else {
                         default_answers_array = row_fields[rowID].default_answer ? row_fields[rowID].default_answer : "-";
-                        console.log("default ans array else: ", default_answers_array)
-                        // console.log("defaultansetgoa  : ",default_answers_array);
                         default_value = default_answers_array;
                         default_answer = default_answers_array;
-
-                        // default_value = "-"
-                        // console.log("debug:     ",row_fields[rowID].default_answer);
                     }
-
                 }
 
                 row.innerHTML = `
@@ -1326,18 +1553,37 @@
             <td contenteditable="true">${tableData ? policy_question : policy.description}</td>
             
             ${Object.values(quotesConfig).flatMap(codes =>
-    codes.map((_, colIndex) => {
+            codes.map((codeValue, colIndex) => {
+        // console.log("Subheader th: colinded : ",colIndex);
         // Get the subheader (assuming it's the second <tr> inside <thead>)
-        let subHeaderTh = document.querySelector(`thead tr:nth-child(2) th:nth-child(${colIndex + 1})`);
-        let subHeaderText = subHeaderTh ? subHeaderTh.textContent.trim() : '';
+        let subHeaderThList = [...document.querySelectorAll("thead tr:nth-child(2) th")];
 
+        // Filter <th> elements that have a valid 'data-proposal' attribute
+        let validSubHeaders = subHeaderThList.filter(th => {
+            let dataProposal = th.getAttribute("data-proposal");
+            // console.log("Subheader th: dataProposal : ",dataProposal);
+            return dataProposal !== null && dataProposal !== undefined && dataProposal.trim() !== "";
+        });
+        
+
+        // console.log("Subheader th: subHeaderThList",subHeaderThList);
+        // let validSubHeaders = subHeaderThList.filter(th => th.hasAttribute("data-proposal"));
+        // console.log("Subheader th: validSubHeaders",validSubHeaders);
+        let subHeaderTh = validSubHeaders.find(th => th.textContent.trim() === codeValue) || null;
+        // console.log("Subheader th: subHeaderTh",subHeaderTh);
+        // if (subHeaderTh.classList.contains("insurer_proposal")) {
+        //     alert(subHeaderTh);
+        // }
+        let subHeaderText = subHeaderTh ? subHeaderTh.textContent.trim() : '';
+        // console.log("Subheader th: ",subHeaderText);
         // Check if subheader is NOT "Quote asked"
         let className = subHeaderText !== "Quote asked" && subHeaderText != "-" ? "insurer_proposal" : "";
+        // alert(subHeaderText);
         let defaultJsonString = typeof default_answers_array == "object" ? JSON.stringify(default_answers_array[0]) : String(default_answers_array);
 
-        // console.log("defaultJsonString", defaultJsonString);
-        // console.log("defaultJsonString type",  typeof defaultJsonString);
-        // console.log("defaultJsonString string", String(defaultJsonString));
+        // // console.log("defaultJsonString", defaultJsonString);
+        // // console.log("defaultJsonString type",  typeof defaultJsonString);
+        // // console.log("defaultJsonString string", String(defaultJsonString));
 
 
 
@@ -1367,87 +1613,20 @@
             </td>`;
                 tbody.appendChild(row);
             });
-            table.appendChild(tbody);
-
         }
         table.appendChild(tbody);
-        container.appendChild(table);
-        // Checkbox functionality
-        if (!isChildTable) {
-            table.querySelectorAll('.sno-checkbox').forEach(checkbox => {
-                checkbox.addEventListener('change', function() {
-                    const rowId = this.closest('tr').id;
-                    // if (this.checked) {
-                    //     const childContainer = document.createElement('div');
-                    //     selectedPolicies.add(rowId);
-                    //     child_table_data[rowId]?.forEach(childTable => {
-                    //         if (childTable.table_type == "append") {
-                    //             var tableName = childTable.table_id;
-                    //             // Handle excess table
-                    //             const excessContainer = document.createElement('div');
-                    //             excessContainer.setAttribute('data-parent-row', tableName);
-                    //             excessContainer.setAttribute(`data-${tableName}-container`, 'true');
 
-                    //             var result = generateExcessTable(childTable, rowId, tableName);
-                    //             if (result) {
-                    //                 generateTable(excessContainer, true, rowId, childTable);
-                    //                 container.appendChild(excessContainer);
-                    //                 // console.log('Row id for excess table',rowId);
-                    //                 $("#excess .three-dot-menu").hide();
-                    //                 moveExcessTableLast();
-                    //             }
-                    //         } else {
-                    //             // Handle regular table
-                    //             childContainer.setAttribute('data-parent-row', rowId);
-                    //             generateTable(childContainer, true, rowId, childTable);
-                    //             // console.log('Row id for excess table', rowId);
-                    //             $(childContainer).find(".three-dot-menu").hide();
-                    //             moveExcessTableLast();
-                    //         }
-                    //     });
+        // Apply jQuery classes and width (unchanged)
+        // let latestWidth = $("table").last().width();
+        $(table).width(latestWidth);
+        $(collapsibleBar).width(latestWidth);
+        $(table).addClass("table table-bordered mt-3");
 
-                    //     // Only append regular container if it has content
-                    //     if (childContainer.hasChildNodes()) {
-                    //         container.appendChild(childContainer);
-                    //     }
-
-                    //     arrangeTables();
-                    // } else {
-                    //     console.log('UNCHECKED:', rowId);
-                    //     selectedPolicies.delete(rowId);
-                    //     // Remove regular child tables
-                    //     const regularContainers = container.querySelectorAll(`div[data-parent-row="${rowId}"]:not([data-excess-container])`);
-                    //     regularContainers.forEach(container => {
-                    //         console.log(" contaitner ", container);
-
-                    //         container.remove();
-                    //     });
-                    //     console.log("row id ", rowId);
-                    //     // Handle excess table rows
-                    //     const excessTable = document.getElementById('excess');
-                    //     if (excessTable) {
-                    //         // Remove rows associated with this checkbox
-                    //         const excessRows = excessTable.querySelectorAll(`tbody tr[data-excess-row-parent="${rowId}"]`);
-                    //         excessRows.forEach(row => row.remove());
-
-                    //         // Check if excess table is empty
-                    //         const remainingRows = excessTable.querySelector('tbody').children;
-                    //         // console.log(remainingRows);
-                    //         if (remainingRows.length === 0) {
-                    //             // Remove the entire excess table container
-                    //             // const excessContainer = excessTable.closest('div[data-excess-container]');
-                    //             const excessContainer = $('#excess');
-                    //             if (excessContainer) {
-                    //                 excessContainer.remove();
-                    //             }
-                    //         } else {
-                    //             updateSNO('excess')
-                    //         }
-                    //     }
-                    // }
-                });
-            });
-        }
+        // Append to DOM
+        tableContent.appendChild(table);
+        tableContainer.appendChild(collapsibleBar);
+        tableContainer.appendChild(tableContent);
+        container.appendChild(tableContainer);
     }
 
 
@@ -1458,7 +1637,7 @@
         if (excessTable) {
             // If table exists, append new rows to it
             const tbody = excessTable.querySelector('tbody');
-            // console.log("table data ",tableData);
+            // // console.log("table data ",tableData);
             // Add new rows from tableData
             tableData.table_row_contents.forEach((rowData, index) => {
                 let rowID = Object.keys(rowData)[0];
@@ -1472,8 +1651,56 @@
                 <td>${SNO}</td>
                 <td contenteditable="true">${question}</td>
                 ${Object.values(quotesConfig).flatMap(codes =>
-                        codes.map(() => `<td contenteditable="true">-</td>`)
-                    ).join('')}
+                        codes.map((codeValue, colIndex) => {
+        // console.log("Subheader th: colinded : ",colIndex);
+        // Get the subheader (assuming it's the second <tr> inside <thead>)
+        let subHeaderThList = [...document.querySelectorAll("thead tr:nth-child(2) th")];
+
+        // Filter <th> elements that have a valid 'data-proposal' attribute
+        let validSubHeaders = subHeaderThList.filter(th => {
+            let dataProposal = th.getAttribute("data-proposal");
+            // console.log("Subheader th: dataProposal : ",dataProposal);
+            return dataProposal !== null && dataProposal !== undefined && dataProposal.trim() !== "";
+        });
+        
+
+        // console.log("Subheader th: subHeaderThList",subHeaderThList);
+        // let validSubHeaders = subHeaderThList.filter(th => th.hasAttribute("data-proposal"));
+        // console.log("Subheader th: validSubHeaders",validSubHeaders);
+        let subHeaderTh = validSubHeaders.find(th => th.textContent.trim() === codeValue) || null;
+        // console.log("Subheader th: subHeaderTh",subHeaderTh);
+        // if (subHeaderTh.classList.contains("insurer_proposal")) {
+        //     alert(subHeaderTh);
+        // }
+        let subHeaderText = subHeaderTh ? subHeaderTh.textContent.trim() : '';
+        // console.log("Subheader th: ",subHeaderText);
+        // Check if subheader is NOT "Quote asked"
+        let className = subHeaderText !== "Quote asked" && subHeaderText != "-" ? "insurer_proposal" : "";
+        // alert(subHeaderText);
+        let defaultJsonString = typeof default_answers_array == "object" ? JSON.stringify(default_answers_array[0]) : String(default_answers_array);
+
+        // // console.log("defaultJsonString", defaultJsonString);
+        // // console.log("defaultJsonString type",  typeof defaultJsonString);
+        // // console.log("defaultJsonString string", String(defaultJsonString));
+
+
+
+        return `<td class="${className}" onblur="setValueForHiddenField(this,'${rowID.answer_type}')"
+            onclick="getAnswer('${'excess'}','${rowID}')"
+            contenteditable="true">
+
+           ${tableData ? 
+                (default_value === '-' ? 
+                    `${default_value} <input type="hidden" value="${default_value}" />` 
+                    : `${default_answer} <input type="hidden" value='${defaultJsonString}' />`
+                ) 
+                : policy.quote_asked
+            }
+
+        </td>`;
+    })
+).join('')}
+
                 <td>
                     <input id = "qcrCheckbox" name = "qcr" checked value = "1" type="checkbox" class="qcr-checkbox"> <label for = "qcrCheckbox">QCR</label>
                     <input  name = "stc" checked value = "1" type="checkbox" class="client-checkbox">Client &nbsp;
@@ -1483,6 +1710,7 @@
                 tbody.appendChild(row);
             });
             moveExcessTableLast();
+            styleTableColumns();
             return false;
         } else {
             return true;
@@ -1490,7 +1718,7 @@
     }
     // Initialize the parent table
     document.addEventListener('DOMContentLoaded', () => {
-        // console.log("bjnglfkrg ", rfq_data.length);
+        // // console.log("bjnglfkrg ", rfq_data.length);
         const url = window.location.pathname; // Get the path (e.g., "/nhance/rfq/list/75/1")
         const segments = url.split("/"); // Split by "/"
         segments[segments.length - 1] = "1"; // Change the last segment
@@ -1499,13 +1727,13 @@
         history.pushState(null, "", newUrl); // Change the URL without reloading
 
         if (rfq_data.length) {
-            console.log("inside if conditoon");
+            // console.log("inside if conditoon");
             localStorage.setItem('allTablesJsonData', JSON.stringify(rfq_data));
             jsonToTables();
             proposalDataForDropDown = rfq_data[rfq_data.length - 1].proposal_data;
-            console.log("proposalDataForDropDown", proposalDataForDropDown);
+            // console.log("proposalDataForDropDown", proposalDataForDropDown);
             if (!$.isEmptyObject(storedData)) {
-                console.log("DATA FROM DB : ", JSON.parse(storedData));
+                // console.log("DATA FROM DB : ", JSON.parse(storedData));
                 let data = JSON.parse(storedData);
                 Object.keys(data).forEach(key => {
 
@@ -1516,30 +1744,33 @@
 
                 });
 
-                // console.log("policy summary : ",child_table_data[key])
+                // // console.log("policy summary : ",child_table_data[key])
 
-                console.log("generate policy summary : ", policySummary);
+                // console.log("generate policy summary : ", policySummary);
+                styleTableColumns();
 
             }
             // generateTable(document.getElementById('tablesContainer'));
-            // console.log("polices Length ", policies.length);
+            // // console.log("polices Length ", policies.length);
 
         } else {
             generateTable(document.getElementById('tablesContainer'));
-            console.log("polices Length ", policies.length);
+            styleTableColumns();
+            // console.log("polices Length ", policies.length);
             if (policies.length == 1) {
                 setTimeout(() => {
                     $(".sno-checkbox").each(function() {
-                        console.log("time completed function called");
+                        // console.log("time completed function called");
                         $(".sno-checkbox").prop("checked", true);
                         this.dispatchEvent(new Event("change", {
                             bubbles: true
                         }));
                     });
                 }, 100);
+
             }
         }
-
+        // styleTableColumns();
         showOrHideFieldsBasedOnRFQorQCR();
     });
 
@@ -1552,25 +1783,25 @@
 
     function getAnswer(table_id, rowID) {
         event.stopPropagation();
-        console.log("Function called", table_id);
+        // console.log("Function called", table_id);
         var policy = table_id.split('_').slice(0, -1).join('_');
         // var policy = 'policy_' + table;
-        console.log('policy ', rowID);
+        // console.log('policy ', rowID);
 
         Object.entries(child_table_data).forEach(([key, value]) => {
             if (key == policy) {
                 var table_data = value;
-                // console.log("table data ",table_data);
+                // // console.log("table data ",table_data);
                 // Loop through all available table data (removing hardcoded [0])
                 table_data.forEach(table => {
                     var table_row = table['table_row_contents'];
-                    // console.log("table Row ",table_row);
+                    // // console.log("table Row ",table_row);
                     Object.entries(table_row).forEach(([key, value]) => {
                         var question_id = Object.keys(value)[0];
-                        // console.log("Question ID : ",question_id," row ID : ",rowID);
+                        // // console.log("Question ID : ",question_id," row ID : ",rowID);
                         if (question_id == rowID) {
                             let questionData = value[question_id];
-                            console.log("question data", questionData);
+                            // console.log("question data", questionData);
                             if (questionData.answer_type == 'dropdown') {
 
                                 var answerAndValues = questionData.answers;
@@ -1587,7 +1818,7 @@
 
 
     function createDropdown(answerAndValues) {
-        // console.log(answerAndValues);
+        // // console.log(answerAndValues);
         const originalTd = event.target;
         const dropdown = document.createElement("div");
         dropdown.classList.add("simple-dropdown");
@@ -1602,7 +1833,7 @@
                 e.stopPropagation();
                 originalTd.innerHTML = `${this.textContent} 
                 <input type="hidden" value='${JSON.stringify({ key: answer.key, display_value: answer.display_value })}' />`;
-
+                checkCellValueAndHighlight();
                 // originalTd.dataset.selectedKey = this.dataset.key;
                 dropdown.remove();
             });
@@ -1637,23 +1868,45 @@
 
     function moveExcessTableLast() {
         const excessTable = document.getElementById("excess");
-        const tableContentDiv = document.createElement("div");
-        tableContentDiv.className = 'table-content';
-        // const excessCollapseBar = document.querySelector('.table-collapsible-bar.Excess');
         const overallContainer = document.getElementById('allTableContainer');
-        if (excessTable) {
-            // overallContainer.appendChild(excessCollapseBar); // Move it to the end of the <body>
-            overallContainer.appendChild(tableContentDiv);
-            tableContentDiv.appendChild(excessTable);
 
-            // excessCollapseBar.addEventListener('click', function() {
-            //     this.classList.toggle('collapsed');
-            //     tableContentDiv.classList.toggle('collapsed');
-            // });
-            // console.log("Table moved:", document.body.lastElementChild === excessTable);
-        } else {
+        if (!excessTable) {
             // console.log("Excess table not found.");
+            return;
         }
+
+        // Find or create the collapsible bar
+        let excessCollapseBar = document.querySelector('.table-collapsible-bar.Excess');
+
+        if (!excessCollapseBar) {
+            excessCollapseBar = document.createElement('div');
+            excessCollapseBar.className = 'table-collapsible-bar Excess collapsed';
+            excessCollapseBar.innerHTML = `
+            Excess
+            <span class="collapse-icon">▼</span>
+        `;
+
+            // Add click handler for collapse/expand
+            excessCollapseBar.addEventListener('click', function() {
+                this.classList.toggle('collapsed');
+                const content = this.nextElementSibling;
+                content.classList.toggle('collapsed');
+            });
+        }
+
+        // Create container if needed
+        let tableContainer = excessTable.closest('.table-container');
+        if (!tableContainer) {
+            tableContainer = document.createElement('div');
+            tableContainer.className = 'table-container';
+
+            // Build proper structure
+            tableContainer.appendChild(excessCollapseBar);
+            tableContainer.appendChild(excessTable);
+        }
+
+        // Move to end of container
+        overallContainer.appendChild(tableContainer);
     }
     // Global object to track SNO for each table
     let tableSNOTracker = {};
@@ -1674,9 +1927,9 @@
     }
 
     function updateSNO(tableID) {
-        console.log("Function Called Update Sno");
+        // console.log("Function Called Update Sno");
         const table = document.getElementById(tableID);
-        console.log("table : ", table);
+        // console.log("table : ", table);
         if (!table) return;
 
         const rows = table.querySelectorAll("tbody tr");
@@ -1695,12 +1948,20 @@
     }
 
     function increaseTableWidth(increaseBy) {
-        // console.log("function called tablewidth increase");
+
+        $('.table-collapsible-bar').each(function() {
+            let currentWidth = ($(this).width());
+            // // console.log('table width ', typeof (currentWidth));
+            let increaseTableWidth = (currentWidth + increaseBy);
+            // // console.log(increaseTableWidth);
+            $(this).width(currentWidth + increaseBy);
+        });
+        // // console.log("function called tablewidth increase");
         $("table").each(function() {
             let currentWidth = ($(this).width());
-            // console.log('table width ', typeof(currentWidth));
+            // // console.log('table width ', typeof(currentWidth));
             let increaseTableWidth = (currentWidth + increaseBy);
-            // console.log(increaseTableWidth);
+            // // console.log(increaseTableWidth);
             $(this).width(currentWidth + increaseBy);
         });
     }
@@ -1732,7 +1993,7 @@
         const selectedContainers = containerArray.filter(container =>
             selectedPolicies.has(container.policyName)
         );
-        // console.log('container selected ',selectedContainers);
+        // // console.log('container selected ',selectedContainers);
         // Sort by priority
         selectedContainers.sort((a, b) => a.priority - b.priority);
 
@@ -1743,13 +2004,13 @@
     }
 
     function setValueForHiddenField(element, answer_type) {
-
+        // alert("hi");
         if (answer_type != 'dropdown') {
-            // console.log(element);
+            // // console.log(element);
             const hiddenInput = element.querySelector("input[type='hidden']");
             const updatedText = element.textContent.trim();
             var updated_Text = element.textContent.trim();
-            // console.log('updated text ',updated);
+            // // console.log('updated text ',updated);
             if (hiddenInput) {
 
                 hiddenValue = updated_Text;
@@ -1757,11 +2018,12 @@
                 // Convert it back to a JSON string and set the value
                 hiddenInput.value = JSON.stringify(hiddenValue);
 
-                console.log("Updated Hidden Input Value:", hiddenInput.value);
+                // console.log("Updated Hidden Input Value:", hiddenInput.value);
             } else {
                 console.warn("No hidden input found inside the element.");
             }
         }
+        checkCellValueAndHighlight();
     }
 
     function addOrRemoveIcon(element, event) {
@@ -1825,14 +2087,15 @@
             getPolicyInfo(policyName);
             e.preventDefault();
         }
+        checkCellValueAndHighlight();
     });
 
     function getPolicyInfo(policyName) {
-        console.log("anchor link clicked ", policyName);
+        // console.log("anchor link clicked ", policyName);
 
 
         myModal = new bootstrap.Modal(document.getElementById('policyRegisterModel'));
-        console.log("inside if condition");
+        // console.log("inside if condition");
 
         var leadID = $("#lead_id").val();
         let policy = policies.find(p => p.name === policyName);
@@ -1913,13 +2176,13 @@
         }
 
         var policySummary = tableRowContent;
-        console.log("policy summary ", policySummary);
+        // console.log("policy summary ", policySummary);
         return policySummary;
     }
 
     async function selectInsurer(insurers) {
 
-        console.log("Async function called");
+        // console.log("Async function called");
         // Build the HTML for the Select2 dropdown and the input text field
         const selectHTML = `
         <div class="form-row">
@@ -1980,9 +2243,9 @@
     }
 
     function saveRFQ() {
-        console.log("save button clicked");
+        // console.log("save button clicked");
         leadJson = tablesToJson();
-        console.log("json from function ", leadJson);
+        // console.log("json from function ", leadJson);
         var policyJson = localStorage.getItem("policyData") ?? null;
         saveRFQTODB(leadJson, policyJson);
     }
@@ -2012,10 +2275,10 @@
                     localStorage.removeItem('policyData');
 
                     toastr.success(response.message, "Success");
-                    console.log(rfq_data.length);
+                    // console.log(rfq_data.length);
 
                     $('.actionBtns').show();
-                    if(rfq_or_qcr == 2){
+                    if (rfq_or_qcr == 2) {
                         $("#openQCR").hide();
                     }
 
@@ -2054,7 +2317,7 @@
                 overAllData[proposalKey].qcr = qcrSelected ? 1 : 0;
                 overAllData[proposalKey].stc = stcSelected ? 1 : 0;
             }
-            console.log("Insurers Found", insurers);
+            // console.log("Insurers Found", insurers);
 
             const uniqueInsurers = [];
             insurers.forEach(insurer => {
@@ -2064,11 +2327,11 @@
                     insurerHeaders.forEach(header => {
                         const headerProposalCount = header.getAttribute("data-proposal");
                         if (headerProposalCount == proposalNumber) {
-                            console.log("Found the subheader we are searching");
+                            // console.log("Found the subheader we are searching");
                             if (header.querySelector('.sendInsurerClientProposal .fa-check-square') !== null) {
                                 stcInsurerSelected = true;
                             }
-                            console.log("STC selected for insurer:", stcInsurerSelected);
+                            // console.log("STC selected for insurer:", stcInsurerSelected);
                         }
                     });
                     uniqueInsurers.push({
@@ -2080,10 +2343,10 @@
                     });
                 }
             });
-            console.log("Unique Insurers Found", uniqueInsurers);
+            // console.log("Unique Insurers Found", uniqueInsurers);
             overAllData[proposalKey].insurers = Array.from(uniqueInsurers.values());
         });
-        console.log("overalll data created is ", overAllData);
+        // console.log("overalll data created is ", overAllData);
         return overAllData;
     }
 
@@ -2101,10 +2364,10 @@
         const tables = document.querySelectorAll('table');
 
         tables.forEach(table => {
-            const headers = [];
+            var headers = [];
             const data = [];
             const tableId = table.id; // Ensure each table has a unique ID
-            console.log('Processing table:', tableId);
+            // // console.log('Processing table:', tableId);
 
             // Get parent headers and subheaders for the current table
             const parentHeaders = table.querySelectorAll('thead tr:nth-child(1) th');
@@ -2112,45 +2375,48 @@
 
             let headerIndex = 0;
             parentHeaders.forEach(header => {
-                console.log("Found header ", header);
+                // console.log("Found header ", header);
                 if (header.innerText.trim().startsWith("Proposal")) {
                     var policyNumber = header.getAttribute("data-proposal");
                     var colspan = parseInt(quotesConfig[policyNumber].length);
-                    console.log("Found header true colspan : ", colspan);
+                    // console.log("Found header true colspan : ", colspan);
                 } else {
                     var colspan = parseInt(header.getAttribute('colspan')) || 1;
                 }
                 const subHeaderArray = [];
-                console.log("processing  save function header : ", header);
-                // console.log("processing save colspn : ",colspan);
+                // console.log("processing  save function header : ", header);
+                // // console.log("processing save colspn : ",colspan);
                 for (let i = 0; i < colspan; i++) {
                     const subheaderHTML = subHeaders[headerIndex].innerHTML;
                     const subheaderText = subheaderHTML.replace(/<span class="three-dot-menu"[\s\S]*?<\/div>/g, '').trim();
                     subHeaderArray.push(subheaderText);
                     headerIndex++;
                 }
-                console.log("inside save colspn : ", colspan);
+                // console.log("inside save colspn : ", colspan);
                 const headerHTML = header.innerHTML;
                 const headerText = headerHTML.replace(/<span class="three-dot-menu"[\s\S]*?<\/div>/g, '').trim();
-                console.log("processing sub header array : ", subHeaderArray);
-                console.log("HEader : ", header.innerText == " " ? header.innerText.trim() : headerText);
+                // console.log("processing sub header array : ", subHeaderArray);
+                // console.log("HEader : ", header.innerText == " " ? header.innerText.trim() : headerText);
                 headers.push({
                     // parentHeader: header.innerText.replace('⋮', '').split('\n')[0].replace(/:.*/, '').trim(),
                     parentHeader: headerText,
                     subHeaders: subHeaderArray
                 });
-                console.log("processing sub header array : ", headers);
+                // console.log("processing sub header array : ", headers);
             });
 
             // Process each row in the current table
             const rows = table.querySelectorAll('tbody tr');
+            const rowIdCount = {};
+
+            let rowIdForRemoveFirstIndex = "";
             rows.forEach(row => {
                 const rowId = row.id;
-                console.log("row id : ", rowId);
-                console.log("Suggestions :", suggestions);
+                // console.log("row id : ", rowId);
+                // console.log("Suggestions :", suggestions);
                 const inputType = suggestions[rowId]?.answer_type || 'text'; // Default to 'text' if undefined
                 const cells = row.querySelectorAll('td');
-                // console.log("row id going to submit us ", );
+                // // console.log("row id going to submit us ", );
                 const rowData = {
                     SNO: cells[0] ? getTextExcludingButton(cells[0]) : '',
                     items: cells[1]?.innerText || '',
@@ -2158,14 +2424,91 @@
                     data: []
                 };
                 if (tableId == "excess") {
-                    console.log("row Trying to set : ", row);
-                    console.log("row Trying to set : ", row.outerHTML);
+                    // console.log("row Trying to set : ", row);
+                    // console.log("row Trying to set : ", row.outerHTML);
                     rowData['parentPolicy'] = row.getAttribute("data-excess-row-parent")
                 }
-                console.log("Row data foint to submit ", rowData);
+                // console.log("Row data foint to submit ", rowData);
                 let dataIndex = 0;
-                headers.forEach(header => {
+                if (rowIdCount[rowId] === undefined) {
+                    rowIdCount[rowId] = 0;
+                } else {
+                    rowIdCount[rowId]++;
+                }
+                const occurrence = rowIdCount[rowId];
+                // console.log("NEw Method : rowIdCount",rowIdCount)
+                // console.log("NEw Method : occurrence",occurrence)
+
+                let rowspan_row_id = '';
+
+                if (occurrence > 0) {
+                    var headers2 = headers;
+                    headers2 = headers2.filter((header, index) => !(index === 0 && header.parentHeader === "Policy"));
+                    // console.log("Header 2 ",headers2);
+                    headers2.forEach((header2, TableDataHeaderIndex) => {
+                        header2.subHeaders.forEach(subHeader => {
+                            
+                            if (dataIndex >= cells.length) return; // Prevent out-of-bound errors
+                            const cell = cells[dataIndex];
+                            let content;
+                            // Handle different input types and action cells
+                            if (inputType === "text" && header2.parentHeader === 'Action') {
+                                const qcrInput = cell.querySelector('input[name="qcr"]');
+                                const clientInput = cell.querySelector('input[name="stc"]');
+                                // console.log("QCR INPUT : ", qcrInput);
+
+                                content = {
+                                    qcr: qcrInput?.checked ? 1 : 0,
+                                    stc: clientInput?.checked ? 1 : 0
+                                };
+                            } else {
+                                const input = cell.querySelector('input, select, textarea');
+                                if (input) {
+                                    // console.log("Input type:", input.type);
+
+                                    if (input.type === "checkbox") {
+                                        content = input.checked ? "Checked" : "Not Checked"; // Handling checkboxes
+                                        display_content = input.checked ? "Checked" : "Not Checked";
+                                    } else {
+                                        content = input.value; // Handling other input types like text, select, textarea
+                                        display_content = cell.innerText.trim();
+                                        // console.log("processing sub header array : ", content);
+                                    }
+                                } else {
+                                    content = cell.innerText.trim(); // If no input is found, use the cell's text
+                                    display_content = cell.innerText.trim();
+
+                                }
+                            }
+
+    
+                            rowData.data.push({
+                                parentth: header2.parentHeader,
+                                subth: subHeader,
+                                // value: cell.innerText,
+                                input_value: content,
+                                display_content: display_content,
+                                rowspan: cell.rowSpan
+                            });
+
+                            dataIndex++;
+                        });
+                    });
+                }
+                headers.forEach((header, TableDataHeaderIndex) => {
+
+                    // let headerIndexOffset = occurrence;
+                    // let parentThDataText;
+                    // if (headers[TableDataHeaderIndex + headerIndexOffset]) {
+                    //     parentThDataText = headers[TableDataHeaderIndex + headerIndexOffset].parentHeader;
+                    //     // console.log("NEw Method : parentThDataText",parentThDataText)
+                    // } else {
+                    //     parentThDataText = header.parentHeader; // Fallback if there are no more headers
+                    // }
+                    // // console.log(`Row ${rowId} occurrence ${occurrence} using header: `, parentThDataText);
+
                     header.subHeaders.forEach(subHeader => {
+                        
                         if (dataIndex >= cells.length) return; // Prevent out-of-bound errors
                         const cell = cells[dataIndex];
                         let content;
@@ -2173,7 +2516,7 @@
                         if (inputType === "text" && header.parentHeader === 'Action') {
                             const qcrInput = cell.querySelector('input[name="qcr"]');
                             const clientInput = cell.querySelector('input[name="stc"]');
-                            console.log("QCR INPUT : ", qcrInput);
+                            // console.log("QCR INPUT : ", qcrInput);
 
                             content = {
                                 qcr: qcrInput?.checked ? 1 : 0,
@@ -2182,7 +2525,7 @@
                         } else {
                             const input = cell.querySelector('input, select, textarea');
                             if (input) {
-                                console.log("Input type:", input.type);
+                                // console.log("Input type:", input.type);
 
                                 if (input.type === "checkbox") {
                                     content = input.checked ? "Checked" : "Not Checked"; // Handling checkboxes
@@ -2190,7 +2533,7 @@
                                 } else {
                                     content = input.value; // Handling other input types like text, select, textarea
                                     display_content = cell.innerText.trim();
-                                    console.log("processing sub header array : ", content);
+                                    // console.log("processing sub header array : ", content);
                                 }
                             } else {
                                 content = cell.innerText.trim(); // If no input is found, use the cell's text
@@ -2199,7 +2542,18 @@
                             }
                         }
 
-                        // console.log("trying to find what this is ",cell);
+                        // let parentThDataText =  header.parentHeader;
+                        // if(rowId ==  rowspan_row_id){
+                        //      parentThDataText = rowspan_row_id == rowId ? headers[TableDataHeaderIndex + 1].parentHeader : header.parentHeader;
+
+                        //      // console.log('rowspan_row_id parentThDataText', parentThDataText);
+                        //      // console.log('rowspan_row_id', rowspan_row_id);
+
+                            // rowspan_row_id = rowspan_row_id - 1;
+                            // // console.log('rowspan_row_id after decrement', rowspan_row_id);
+
+                        // }
+                        // // console.log("trying to find what this is ",cell);
                         rowData.data.push({
                             parentth: header.parentHeader,
                             subth: subHeader,
@@ -2214,11 +2568,11 @@
                 });
 
                 data.push(rowData);
-                // console.log("processing sub header array : ",content);
+                // // console.log("processing sub header array : ",content);
             });
             tablePolicyName = [...selectedPolicies].find(policy => tableId.startsWith(policy)) || null;
-            console.log(selectedPolicies);
-            console.log(tablePolicyName);
+            // console.log(selectedPolicies);
+            // console.log(tablePolicyName);
             // Get table-specific over_all_column_data (adjust based on your data structure)
 
 
@@ -2242,7 +2596,7 @@
         });
         // Save all tables' data to localStorage
         localStorage.setItem('allTablesJsonData', JSON.stringify(allTablesData));
-        console.log('All tables data saved:', allTablesData);
+        // console.log('All tables data saved:', allTablesData);
         // toastr.success("RFQ Saved Successfully", "SUCCESS");
         // If needed, reconstruct tables from JSON (implement jsonToTable accordingly)
 
@@ -2256,7 +2610,7 @@
         segments[segments.length - 1] = "2"; // Change the last segment
         const newUrl = segments.join("/"); // Rebuild the URL
 
-        console.log('newUrl', newUrl)
+        // console.log('newUrl', newUrl)
 
         history.pushState(null, "", newUrl); // Change the URL without reloading
 
@@ -2264,11 +2618,13 @@
         $('.loader').fadeIn();
         $('.loader-mask').fadeIn();
         jsonToTables();
+        checkCellValueAndHighlight();
         $('.loader').fadeOut();
         $('.loader-mask').delay(350).fadeOut('slow');
         // $('#rfq_qcr_page_title').text('QCR');
         hideProposalOptionsForChild();
         showOrHideFieldsBasedOnRFQorQCR();
+        styleTableColumns();
     }
 
     function setPolicyConfiguration(overAllColumnData) {
@@ -2321,9 +2677,9 @@
     }
 
     function addSuggestion(rowData) {
-        console.log("child table data ", rowData);
-        console.log("child table data ", rowData.row_id);
-        console.log("child table data ", child_table_data[rowData.row_id]);
+        // console.log("child table data ", rowData);
+        // console.log("child table data ", rowData.row_id);
+        // console.log("child table data ", child_table_data[rowData.row_id]);
 
         var table_data = child_table_data[rowData.row_id];
         table_data.forEach(table => {
@@ -2334,7 +2690,7 @@
             });
         });
 
-        console.log("child table data ", suggestions);
+        // console.log("child table data ", suggestions);
         // child_table_data[rowData.rowID]
     }
 
@@ -2352,54 +2708,56 @@
 
 
     function jsonToTables() {
+
         const container = document.getElementById('tablesContainer');
-        container.innerHTML = ''; // Clear existing content
+        container.innerHTML = '';
         const savedData = JSON.parse(localStorage.getItem('allTablesJsonData'));
         let lastIndex = savedData.length - 1;
         var proposalDataArray = savedData[lastIndex];
-        console.log("json to table : ", savedData);
-        console.log("json to table : ", proposalDataArray);
-        console.log("json to table : ", lastIndex);
-        // console.log("json to table : ",savedData[lastIndex]);
-        console.log("json to table : ", proposalDataArray.proposal_data);
-        console.log("json to table : ", proposalDataArray.proposal_data.over_all_column_data);
-
-        policyConfig = {};
 
+        // Initialize configurations
         policyConfig = setPolicyConfiguration(proposalDataArray.proposal_data.over_all_column_data);
-        console.log("policy configuration : ", policyConfig);
-
-        quotesConfig = {};
         quotesConfig = setQuotesConfig(proposalDataArray.proposal_data.over_all_column_data);
-        console.log("quotes config ... : ", quotesConfig);
-
         proposalCount = Object.keys(proposalDataArray.proposal_data.over_all_column_data).length;
-        console.log("proposal count : ", proposalCount);
-        console.log("proposal count quotes config ... : ", proposalDataArray.proposal_data.over_all_column_data);
 
-        var totalCount = getTotalCount(proposalDataArray);
-        let increaseBy = proposalCount * 150;
-        if (rfq_or_qcr == 1) {
-            console.log("inside if ")
-            increaseBy = proposalCount * 150;
-        } else if (rfq_or_qcr == 2) {
-            increaseBy = totalCount * 150;
-        }
+        // Calculate width increase
+        let increaseBy = rfq_or_qcr == 2 ?
+            getTotalCount(proposalDataArray) * 150 :
+            proposalCount * 150;
 
-        console.log("trying to find checkbox data  : : : ", increaseBy);
+
+        // // console.log("trying to find checkbox data  : : : ", increaseBy);
 
 
         suggestions = {};
 
-        // Group tables by policy name
         const policyTables = {};
+        let excessTableContainer = null;
 
         // Process each table entry
         savedData.forEach((tableEntry, index) => {
-            // console.log("table entry : ", tableEntry);
-            if (!tableEntry.table_data) return; // Skip proposal data entry
+            if (!tableEntry.table_data) return;
 
+            // 1. Create container structure
+            const tableContainer = document.createElement('div');
+            tableContainer.className = 'table-container';
+
+            // 2. Create collapsible bar
+            const collapsibleBar = document.createElement('div');
+            collapsibleBar.className = 'table-collapsible-bar collapsed';
+            collapsibleBar.innerHTML = `
+            ${tableEntry.table_data.headers[1].parentHeader || 'Table'}
+            <span class="collapse-icon">▼</span>
+        `;
+
+            // 3. Create collapsible content area
+            const tableContent = document.createElement('div');
+            tableContent.className = 'table-content collapse';
+            tableContent.style.display = 'none'; // Start collapsed
+
+            // 4. Create the table
             const table = document.createElement('table');
+            $(table).addClass("table table-bordered mt-3");
             if (tableEntry.tableId) table.id = tableEntry.tableId;
 
             // Create header structure
@@ -2410,7 +2768,7 @@
 
             // Create body
             const tbody = document.createElement('tbody');
-            tableEntry.table_data.data.forEach(rowData => {
+            tableEntry.table_data.data.forEach((rowData, rowDataIndex) => {
                 const tr = document.createElement('tr');
                 tr.id = rowData.row_id;
                 if (tableEntry.tableId === "excess" && rowData.parentPolicy) {
@@ -2429,89 +2787,111 @@
                     // Handle SNO column
                     if (cellIndex === 0 && tableEntry.tableId) {
                         td.textContent = rowData.SNO;
-                        // td.classList.add("sno-checkboxes");
                     }
                     // Handle Action column
                     else if (cellData.parentth === 'Action') {
                         if (table.id != "") {
                             td.innerHTML = `
-                            <input class = "qcr-checkbox" id = "qcrCheckbox"  name="qcr" type="checkbox" ${cellData.input_value.qcr ? 'checked' : ''}> <label for = "qcrCheckbox">QCR</label>
-                            <input class="client-checkbox" name="stc" type="checkbox" ${cellData.input_value.stc ? 'checked' : ''}>
-                            Client
-                            <button class="btn btn-primary btn-sm" onclick="addRow(event, this)">+</button>
-                            <button class="btn btn-danger btn-sm" onclick="removeRowQCR(event)">-</button>
-                        `;
-                        } else {
+                        <input class="qcr-checkbox" id="qcrCheckbox" name="qcr" type="checkbox" ${cellData.input_value.qcr ? 'checked' : ''}>
+                        <label for="qcrCheckbox">QCR</label>
+                        <input class="client-checkbox" name="stc" type="checkbox" ${cellData.input_value.stc ? 'checked' : ''}>
+                        Client
+                        <button class="btn btn-primary btn-sm" onclick="addRow(event, this)">+</button>
+                        <button class="btn btn-danger btn-sm" onclick="removeRowQCR(event)">-</button>`;
+                        }else {
                             td.innerHTML = "";
                         }
+                        td.contentEditable = true;
+                        // td.classList.add("readonly-select");
                     }
                     // Handle regular cells
                     else {
+                        // td.onclick = () => getAnswer(table.id, tr.id);
                         td.innerHTML = processCellContent(cellData.input_value, rowData, cellData.display_content);
-                        
+                        // console.log("DEBUG ISSUE : ",cellData.parentth)
                         if (cellData.parentth.startsWith("Proposal")) {
                             td.onclick = () => getAnswer(table.id, tr.id);
                             if (cellData.subth != "Quote asked") {
-                                console.log("debug 1: ","table id : ",table.id,"Cell data parent header :",cellData.parentth,"others:  ",cellData);
-                                console.log("debug 1 : ",td.innerHTML)
-                                // console.log("debug 1: ",cellData," ");
+                                td.onclick = () => getAnswer(table.id, tr.id);
                                 td.classList.add("insurer_proposal");
-                                console.log("debug 1: ",td.className);
                             }
                         }
-                        td.contentEditable = true;
+
+                            td.contentEditable = true;
+                        
+                       
                         if (cellIndex === 0) {
                             td.contentEditable = false;
                         }
                     }
                     tr.appendChild(td);
                 });
-
                 tbody.appendChild(tr);
             });
-
             table.appendChild(tbody);
-
-            // // Determine the policy name from the table ID
-            // const tableIdParts = tableEntry.tableId.split('_'); // Split table ID by underscore
-            // let policyName = tableIdParts[0]; // Initialize with the first part
-
-            // // Handle policy names with two words (e.g., "public_liability")
-            // if (tableIdParts.length > 2) {
-            //     policyName = tableIdParts.slice(0, 2).join('_'); // Join first two parts for two-word policies
-            // }
             selectedPolicies.add(tableEntry.tablePolicy);
-            let policyNameforTable = tableEntry.tablePolicy
-            if (!policyTables[policyNameforTable]) {
-                policyTables[policyNameforTable] = []; // Initialize array for this policy
-            }
-            policyTables[policyNameforTable].push(table); // Add table to the policy group
-        });
 
-        // Create containers for each policy and append tables
-        Object.entries(policyTables).forEach(([policyName, tables]) => {
-            const policyContainer = document.createElement('div');
-            policyContainer.setAttribute('data-parent-row', policyName); // Set data-parent-row to policy name
+            // Set table width
+            const firstTable = document.querySelector('table');
+            const tableWidth = firstTable ? $(firstTable).width() : 1200;
+            $(table).width(tableWidth);
+            $(collapsibleBar).width(tableWidth);
 
-            tables.forEach(table => {
-                policyContainer.appendChild(table); // Append all tables for this policy
+            // Add click handler for collapsible functionality
+            collapsibleBar.addEventListener('click', function() {
+                const isCollapsed = tableContent.style.display === 'none';
+                tableContent.style.display = isCollapsed ? 'block' : 'none';
+                const icon = this.querySelector('.collapse-icon');
+                icon.style.transform = isCollapsed ? 'rotate(0deg)' : 'rotate(-90deg)';
+
+                // Trigger resize if needed
+                setTimeout(() => {
+                    $(window).trigger('resize');
+                }, 10);
             });
 
-            container.appendChild(policyContainer); // Append the policy container to the main container
+            // Build the structure
+            tableContent.appendChild(table);
+            tableContainer.appendChild(collapsibleBar);
+            tableContainer.appendChild(tableContent);
+
+            // Special handling for excess table
+            if (tableEntry.tableId === "excess") {
+                excessTableContainer = tableContainer;
+            } else {
+                const policyName = tableEntry.tablePolicy;
+                if (!policyTables[policyName]) {
+                    policyTables[policyName] = [];
+                }
+                policyTables[policyName].push(tableContainer);
+            }
         });
 
-        // Handle excess table separately (if it exists)
-        const excessTable = document.getElementById('excess');
-        if (excessTable) {
-            container.appendChild(excessTable);
+        // Append tables in policy groups
+        Object.entries(policyTables).forEach(([policyName, tables]) => {
+            const policyContainer = document.createElement('div');
+            policyContainer.setAttribute('data-parent-row', policyName);
+
+            tables.forEach(table => {
+                policyContainer.appendChild(table);
+            });
+
+            container.appendChild(policyContainer);
+        });
+
+        // Append excess table last if exists
+        if (excessTableContainer) {
+            container.appendChild(excessTableContainer);
         }
 
-        // Restore proposal headers and icons
+        // Final initialization
         restoreProposalHeaders(savedData[savedData.length - 1].proposal_data.over_all_column_data);
         reattachEventListeners();
         hideProposalOptionsForChild();
         increaseTableWidth(increaseBy);
         contentNonEditableInsurerAdded(proposalDataArray.proposal_data.over_all_column_data);
+        // styleTableColumns();
+        showOrHideFieldsBasedOnRFQorQCR();
     }
 
     // Helper function to create header rows
@@ -2527,11 +2907,11 @@
             th1.textContent = header.parentHeader;
             if (header.parentHeader.startsWith('Proposal')) {
                 var headerName = header.parentHeader;
-                console.log("header name : ", th1.textContent.trim());
-                console.log("over all column data : ", over_all_column_data)
+                // console.log("header name : ", th1.textContent.trim());
+                // console.log("over all column data : ", over_all_column_data)
                 matchedKey = Object.keys(overallColumnDataProposal).find(key => headerName.startsWith(key));
                 if (matchedKey) {
-                    console.log("something wrong : ", overallColumnDataProposal[matchedKey]);
+                    // console.log("something wrong : ", overallColumnDataProposal[matchedKey]);
                     var headerCheckBoxProperties = overallColumnDataProposal[matchedKey];
                 }
 
@@ -2546,18 +2926,18 @@
                         style="background-color: rgb(221, 221, 221);">Send to Client ${headerCheckBoxProperties['stc'] == 1 ? `<i
                             class="fa fa-check-square"
                             style="color: green; margin-left: 8px; "></i> `:"" }</button>
-                    <button onclick="removeProposal(${header.parentHeader.split(' ')[1]})">Remove Proposal</button>
+                    <button class = "removeProposal" onclick="removeProposal(${header.parentHeader.split(' ')[1]})">Remove Proposal</button>
                     <button class = "newInsurer" onclick="addNewQuote(${header.parentHeader.split(' ')[1]})">Add New Insurer</button>
                     
                 </div>
             `;
                 th1.colSpan = header.subHeaders.length;
 
-                // console.log("insurer data proposal set : ",th1); // See the element's attributes in the console
+                // // console.log("insurer data proposal set : ",th1); // See the element's attributes in the console
 
             }
             headerRow1.appendChild(th1);
-            // console.log("this is the header : ", header);
+            // // console.log("this is the header : ", header);
             // Sub headers
             header.subHeaders.forEach(subHeader => {
                 const th2 = document.createElement('th');
@@ -2566,10 +2946,10 @@
                     const matchedInsurer = insurers.find(ins => ins.ins_name == subHeader);
 
                     if (subHeader != "Quote asked") {
-                        console.log("trying to find something : ", matchedInsurer.stc);
+                        // console.log("trying to find something : ", matchedInsurer.stc);
 
-                        console.log("this is the subheader : ", subHeader);
-                        console.log("debug 2: ",subHeader,"parent header : ",header.parentHeader);
+                        // console.log("this is the subheader : ", subHeader);
+                        // console.log("debug 2: ", subHeader, "parent header : ", header.parentHeader);
                         th2.classList.add("insurer_proposal");
                         th2.innerHTML = `
                     ${subHeader}
@@ -2591,7 +2971,7 @@
                     th2.setAttribute('data-proposal', header.parentHeader.split(' ')[1]);
                     th2.setAttribute("data-quote", subHeader);
                     th1.setAttribute('data-proposal', header.parentHeader.split(' ')[1]);
-                    // console.log("header insert position ",th1.getAttribute())
+                    // // console.log("header insert position ",th1.getAttribute())
 
                 } else {
                     th2.textContent = subHeader;
@@ -2615,7 +2995,7 @@
             if (value == "Checked") {
                 addSuggestion(cellData);
             }
-            // console.log("insude the function value ", value);
+            // // console.log("insude the function value ", value);
             return `<input type="checkbox" ${value == "Checked" ? "checked" :""} class = "sno-checkbox" /> ${cellData.SNO} ${cellData.SNO == 'Fire' || cellData.SNO == 'Burglary'
                                 ? `<br><button  id = '${cellData.SNO.toUpperCase()}_register' class = "btn btn-primary btn-sm" onclick = "getPolicyInfo('${cellData.SNO}')"  class="policy-link" data-policy-name="${cellData.SNO}" ${value == "Checked" ? "" :"disabled"} >Register</a>`
                                 : ""}`;
@@ -2636,7 +3016,7 @@
         Object.entries(proposalData).forEach(([proposal, data]) => {
             const proposalNumber = proposal.split(' ')[1];
             const header = document.querySelector(`th[data-proposal="${proposalNumber}"]`);
-            // console.log("header attribute set");
+            // // console.log("header attribute set");
 
             if (header) {
                 // if (data.qcr) header.querySelector('.qcrProposal').appendChild(createCheckIcon());
@@ -2653,7 +3033,7 @@
         // Three-dot menu handlers
         document.querySelectorAll('.three-dot-menu').forEach(menu => {
             menu.addEventListener('click', showDropdown);
-            // console.log("event listener called ");
+            // // console.log("event listener called ");
         });
 
         // Policy link handlers
@@ -2674,9 +3054,10 @@
     }
 
     function showOrHideFieldsBasedOnRFQorQCR() {
-        console.log("function called rfq or qcr ", rfq_or_qcr);
+        // console.log("function called rfq or qcr ", rfq_or_qcr);
 
         if (rfq_or_qcr == 1) {
+            $(".insurer_proposal").attr("contenteditable",false);
             $(".newInsurer").hide();
             $("#isQCR").show();
             $(".qcr-checkbox").show();
@@ -2692,8 +3073,11 @@
             $(".qcrbtn").hide();
             $("#saveRFQ").css("margin-right", "10px");
             $('#rfq_qcr_page_title').text('RFQ');
+            $(".removeProposal").show();
+
 
         } else if (rfq_or_qcr == 2) {
+            $(".insurer_proposal").attr("contenteditable",true);
             $(".newInsurer").show();
             $("#isQCR").hide();
             $(".qcr-checkbox").hide();
@@ -2706,9 +3090,11 @@
             $("#submitMail").text("Send Client Mail");
             // $(".sno-checkboxes").prop("disabled", true);
             $("#openQCR").hide();
+            $(".removeProposal").hide();
             hideNonQCRRows();
             hideNonQCRColumns();
             disableCheckbox();
+            restoreOnClickToColumnCells();
 
             $(".rfqbtn").hide();
             $(".qcrbtn").show();
@@ -2717,15 +3103,15 @@
 
         }
 
-        if(rfq_data.length){
+        if (rfq_data.length) {
             $('.actionBtns').show();
-            if(rfq_or_qcr == 2){
+            if (rfq_or_qcr == 2) {
                 $("#openQCR").hide();
                 $("#submitPlacement").show();
-            }else{
+            } else {
                 $("#submitPlacement").hide();
             }
-        }else{
+        } else {
             $('.actionBtns').hide();
         }
         makeQuoteAskedColumnNonEditableorEditable();
@@ -2735,11 +3121,11 @@
 
         // Select all checkboxes with the class "sno-checkboxes"
         const checkboxes = document.querySelectorAll('.sno-checkbox');
-        // console.log("inside disable ",checkboxes);
+        // // console.log("inside disable ",checkboxes);
         // Disable all selected checkboxes
         checkboxes.forEach(checkbox => {
             checkbox.disabled = true;
-            // console.log("inside disable loop",checkbox);
+            // // console.log("inside disable loop",checkbox);
         });
     }
 
@@ -2754,16 +3140,16 @@
         };
 
         var proposal = getProposalsWithQCRZero(overallData);
-        console.log("column to hide : ", proposal);
+        // console.log("column to hide : ", proposal);
         proposal.forEach(function(prop) {
-            console.log("column prop : ", prop);
+            // console.log("column prop : ", prop);
             hideColumn(prop);
         })
 
     }
 
     function hideColumn(columnName) {
-        console.log(`Hiding column: ${columnName}`);
+        // console.log(`Hiding column: ${columnName}`);
 
         document.querySelectorAll("table").forEach(table => {
             // 1. Find the main proposal header in the first header row
@@ -2783,7 +3169,7 @@
             });
 
             if (!proposalHeader) {
-                console.log(`Column "${columnName}" not found.`);
+                // console.log(`Column "${columnName}" not found.`);
                 return;
             }
 
@@ -2811,26 +3197,26 @@
     }
 
     function hideNonQCRRows() {
-        console.log("hideNonQCRRows function called");
+        // console.log("hideNonQCRRows function called");
         // Select all tables
         document.querySelectorAll("table").forEach(table => {
 
-            console.log("Processing table:", table);
+            // console.log("Processing table:", table);
             // Loop through each row in the table
             table.querySelectorAll("tr").forEach(row => {
-                console.log("Processing row:", row);
+                // // console.log("Processing row:", row);
                 // Find the qcr-checkbox in the current row
                 const qcrCheckbox = row.querySelector(".qcr-checkbox");
-                console.log("QCR Checkbox:", qcrCheckbox);
+                // console.log("QCR Checkbox:", qcrCheckbox);
 
                 if (qcrCheckbox && !qcrCheckbox.checked) {
                     // If qcr-checkbox exists and is NOT checked, hide the row
-                    console.log("Hiding row:", row);
+                    // console.log("Hiding row:", row);
                     row.style.display = "none"; // Uncomment this line to hide the row
                     updateVisisbleSNO(table.id);
                 } else {
                     // Otherwise, ensure the row is visible
-                    console.log("Showing row:", row);
+                    // // console.log("Showing row:", row);
                     row.style.display = "";
                 }
             });
@@ -2842,18 +3228,18 @@
         const row = button.closest('tr');
         const table = row.closest('table');
         if (row && row.parentElement.children.length > 1) {
-            console.log("Row Removed");
+            // console.log("Row Removed");
             row.remove();
             updateVisisbleSNO(table.id);
         }
     }
 
     function updateVisisbleSNO(tableId) {
-        console.log(`Updating SNO for table: ${tableId}`);
+        // console.log(`Updating SNO for table: ${tableId}`);
 
         const table = document.getElementById(tableId);
         if (!table) {
-            console.log("Table not found!");
+            // console.log("Table not found!");
             return;
         }
 
@@ -2868,7 +3254,7 @@
                 // const snoCell = row.querySelector(".sno"); // Assuming SNO cell has class "sno"
                 // if (snoCell) {
                 //     snoCell.textContent = sno++; // Assign and increment SNO
-                //     console.log(`Updated SNO: ${snoCell.textContent}`);
+                //     // console.log(`Updated SNO: ${snoCell.textContent}`);
                 // }
             }
         });
@@ -2894,14 +3280,39 @@
         });
 
     }
+    function restoreOnClickToColumnCells() {
+        
+        $("table").each(function() {
+            const table = $(this);
+            const tableId = table.attr("id") || "parent"; // Default to "parent" if no ID
+
+            // Find all cells marked with data-onclick-removed
+            table.find("td.insurer_proposal[data-onclick-removed='true']").each(function() {
+                const cell = $(this);
+                const row = cell.closest("tr");
+                const rowId = row.attr("id");
+
+                // Reattach the onclick event
+                cell[0].onclick = () => getAnswer(tableId, rowId);
+
+                // Remove the marker attribute since the event is restored
+                cell.removeAttr("data-onclick-removed");
+
+                // Ensure the cell is editable in QCR mode
+                cell.attr("contenteditable", "true");
+            });
+        });
+    }
 
     function removeOnClickFromColumnCells(cell) {
         cell.removeAttr("onclick");
         cell.off("click");
-        cell[0].onclick = null; // Remove any remaining native listeners    
+        cell[0].onclick = null; // Remove any remaining native listeners
+        cell.attr("data-onclick-removed", "true"); //mark the cell    
     }
 
     function makeQuoteAskedColumnNonEditableorEditable() {
+        // alert("Quote asked");
         $("table").each(function() {
             var table = $(this);
             var subHeaderRow = table.find("tr:nth-child(2)"); // Assuming second row is the sub-header
@@ -2943,6 +3354,10 @@
                         if (rfq_or_qcr == 2) {
                             cell.attr("contenteditable", "false");
                             removeOnClickFromColumnCells(cell);
+
+                            if (!cell.text().trim().startsWith("Proposal")){
+                                cell.addClass("readonly-select");
+                            }
                         } else if (rfq_or_qcr == 1) {
                             // cell.attr("contenteditable", "true");
                         }
@@ -2970,6 +3385,7 @@
     }
 
     function contentNonEditableInsurerAdded(overallcolumnData) {
+        // alert("insurer")
         let insNames = [];
         Object.entries(overallcolumnData).forEach(([proposalKey, proposalValue]) => {
             if (proposalValue.insurers.length > 0) {
@@ -2977,7 +3393,7 @@
             }
         });
 
-        console.log("Insurer names to make non-editable:", insNames);
+        // console.log("Insurer names to make non-editable:", insNames);
 
         $("table").each(function() {
             var table = $(this);
@@ -3007,7 +3423,7 @@
                 visualIndex += colspan;
             });
 
-            console.log("Target column indexes:", Array.from(targetColumnIndexes));
+            // console.log("Target column indexes:", Array.from(targetColumnIndexes));
 
             if (targetColumnIndexes.size === 0) return; // If no matching column is found, exit
 
@@ -3039,6 +3455,7 @@
                     }
 
                     if (makeNonEditable) {
+                        // console.log('Found Cell : ',cell.text());
                         cell.attr("contenteditable", "false");
                         removeOnClickFromColumnCells(cell);
                     }
@@ -3057,14 +3474,14 @@
         });
     }
 
-    function prependTable(policyJson,policyName) {
+    function prependTable(policyJson, policyName) {
 
         // alert("hi");
-        console.log("table to prepened : ", policyJson);
+        // console.log("table to prepened : ", policyJson);
         let parentDiv = document.querySelector(`div[data-parent-row=${policyName}]`);
         // let newTable = document.createElement("table");
-       
-        if (parentDiv){
+
+        if (parentDiv) {
 
             let tables = Array.from(parentDiv.querySelectorAll("table"));
 
@@ -3076,29 +3493,308 @@
 
             policyJson.slice().reverse().forEach(childTable => {
                 generateTable(parentDiv, true, policyName, childTable);
+
             });
 
-        
+
             moveSummaryTableToTop(policyName);
             hideProposalOptionsForChild();
             showOrHideFieldsBasedOnRFQorQCR();
-            
+            styleTableColumns();
+
         }
-        
+
 
     }
 
     function moveSummaryTableToTop(policyName) {
-
         let parentDiv = document.querySelector(`div[data-parent-row="${policyName}"]`);
         if (!parentDiv) return; // Exit if no such div exists
 
-        let tables = Array.from(parentDiv.querySelectorAll("table"));
+        // Find all table containers instead of just tables
+        let tableContainers = Array.from(parentDiv.querySelectorAll(".table-container"));
+
+        tableContainers.forEach(container => {
+            // Check if this container holds a table with "summary" in its ID
+            const table = container.querySelector("table");
+            if (table && table.id.includes("summary")) {
+                parentDiv.prepend(container); // Move the entire table-container to the top
+                updateSNO(table.id); // Update SNO for the moved table
+            }
+        });
+    }
+
+
+    // Calculate the total number of visual columns in the table
+    function calculateTotalColumns(table) {
+        const rows = table.querySelectorAll('tr');
+        let maxColumns = 0;
+        rows.forEach((row) => {
+            const cells = row.querySelectorAll('th, td');
+            let currentColumn = 0;
+            cells.forEach((cell) => {
+                const colspan = parseInt(cell.getAttribute('colspan')) || 1;
+                currentColumn += colspan;
+            });
+            if (currentColumn > maxColumns) {
+                maxColumns = currentColumn;
+            }
+        });
+        return maxColumns;
+    }
+
+    function buildTableGrid(table) {
+        const rows = table.querySelectorAll('tr');
+        const totalColumns = calculateTotalColumns(table);
+        const grid = Array.from({ length: rows.length }, () => Array(totalColumns).fill(null));
+        let activeRowSpans = [];
+
+        rows.forEach((row, rowIndex) => {
+            const cells = row.querySelectorAll('th, td');
+            let currentColumnIndex = 0;
+            let newSpans = []; // Collect new spans for the current row
+
+            // Handle active rowspans from previous rows
+            activeRowSpans.forEach((span) => {
+                for (let c = span.startCol; c < span.startCol + span.colspan; c++) {
+                    if (rowIndex < grid.length && c < totalColumns) {
+                        grid[rowIndex][c] = 'span';
+                    }
+                }
+            });
+
+            cells.forEach((cell) => {
+                // Skip hidden columns
+                if (window.getComputedStyle(cell).display === 'none') return;
+
+                // Find the next available column index
+                while (currentColumnIndex < totalColumns && grid[rowIndex][currentColumnIndex] !== null) {
+                    currentColumnIndex++;
+                }
+                if (currentColumnIndex >= totalColumns) return; // Skip if beyond grid
+
+                const colspan = parseInt(cell.getAttribute('colspan')) || 1;
+                const rowspan = parseInt(cell.getAttribute('rowspan')) || 1;
+
+                // Place the cell and mark spanned cells
+                for (let r = rowIndex; r < rowIndex + rowspan; r++) {
+                    for (let c = currentColumnIndex; c < currentColumnIndex + colspan; c++) {
+                        if (r < grid.length && c < totalColumns) {
+                            grid[r][c] = (r === rowIndex && c === currentColumnIndex) ? cell : 'span';
+                        }
+                    }
+                }
+
+                if (rowspan > 1) {
+                    newSpans.push({
+                        startCol: currentColumnIndex,
+                        colspan: colspan,
+                        remainingRows: rowspan - 1
+                    });
+                }
+                currentColumnIndex += colspan;
+            });
+
+            // Decrement remainingRows and filter out expired spans
+            activeRowSpans = activeRowSpans.filter((span) => {
+                span.remainingRows--;
+                return span.remainingRows > 0;
+            });
+
+            // Add new spans after processing current row
+            activeRowSpans.push(...newSpans);
+        });
+
+        return grid;
+    }
+
+
+    function styleTableColumns() {
+        const tables = document.querySelectorAll('table');
+        const columnColors = {};
+
+        tables.forEach((table) => {
+            const grid = buildTableGrid(table);
+            const totalColumns = grid[0] ? grid[0].length : 0;
+            // console.log("Table grid:", grid);
+
+            const cellStartingCols = new Map();
+            grid.forEach((row) => {
+                row.forEach((cell, colIndex) => {
+                    if (cell && cell !== 'span' && !cellStartingCols.has(cell)) {
+                        cellStartingCols.set(cell, colIndex);
+                    }
+                });
+            });
+
+            // console.log("Setting color:", columnColors);
+            cellStartingCols.forEach((startingCol, cell) => {
+                const colspan = parseInt(cell.getAttribute('colspan')) || 1;
+                
+                // Assign the same color for the whole column span
+                if (!columnColors[startingCol] && startingCol !== 0 && startingCol !== 1 && startingCol !== 2 && startingCol !== totalColumns - 1) {
+                    columnColors[startingCol] = `hsl(${Math.random() * 360}, 100%, 93%)`;
+                }
+
+                if (startingCol === 0 || startingCol === 1) {
+                    cell.style.backgroundColor = '#bfe0e2'; // First & second columns
+                } else if (startingCol === totalColumns - 1) {
+                    cell.style.backgroundColor = 'white'; // Third & last column
+                } else {
+                    // Assign the same color to the full colspan range
+                    const color = columnColors[startingCol] || '#f0f0f0';
+                    
+                    for (let c = startingCol; c < startingCol + colspan; c++) {
+                        columnColors[c] = color; // Ensure all spanned columns match
+                    }
+                }
+            });
+
+            // Apply colors to all cells in their respective columns
+            grid.forEach((row) => {
+                row.forEach((cell, colIndex) => {
+                    if (cell && cell !== 'span' && columnColors[colIndex]) {
+                        cell.style.backgroundColor = columnColors[colIndex];
+                    }
+                });
+            });
+        });
+    }
+
+
+
+    document.querySelectorAll('.table-collapsible-bar').forEach(bar => {
+        bar.addEventListener('click', function() {
+            alert("Hekllo");
+            const content = this.nextElementSibling; // The table-content div
+            const isCollapsed = this.classList.contains('collapsed');
+
+            if (isCollapsed) {
+                this.classList.remove('collapsed');
+                content.style.display = 'block';
+            } else {
+                this.classList.add('collapsed');
+                content.style.display = 'none';
+            }
+        });
+    });
+
+    $(document).on('input change', 'table', function (e) {
+        checkCellValueAndHighlight(e);
+    });
+
+    // Also trigger when new rows or tables are added
+    const observer = new MutationObserver(() => {
+        checkCellValueAndHighlight();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    function checkCellValueAndHighlight(e) {
+
+        // // console.log("highlight:", e.target);
+        // // console.log("highlight:", e.target);
+
+        var rowIdCount = {};
+
+        const tables = document.querySelectorAll('table'); // Select all tables
 
         tables.forEach(table => {
-            if (table.id.includes("summary")) {
-                parentDiv.prepend(table); // Move summary table to the top
-                updateSNO(table.id);
+
+            if (table.id != ""){
+                const headerRows = table.querySelectorAll('thead tr');
+                if (headerRows.length < 2) return; // Ensure there are at least 2 header rows
+
+                const headerRow1 = headerRows[0]; // First header row (main headers)
+                const rows = table.querySelectorAll('tbody tr'); // All body rows
+
+                let startCol = 2; // Start after skipping SNO and items columns
+
+                headerRow1.querySelectorAll('th').forEach((th, index) => {
+                    if (index < 2) return; // Skip SNO and items
+
+                    const colspan = th.getAttribute('colspan') ? parseInt(th.getAttribute('colspan')) : 1;
+                    const rowspan = th.getAttribute('rowspan') ? parseInt(th.getAttribute('rowspan')) : 1;
+                    const compareIndices = [...Array(colspan).keys()].map(i => i + startCol); // Get column indices to compare
+
+                    rows.forEach(row => {
+                        const cells = row.querySelectorAll('td');
+                        compareRange(cells, compareIndices);
+                    });
+
+                    startCol += colspan; // Move to the next set of columns
+                });
+            }else{
+
+                const headerRows = table.querySelectorAll('thead tr');
+                // console.log("Header rows in highlight:", headerRows);
+                if (headerRows.length < 2) return; // Ensure there are at least 2 header rows
+
+                const headerRow1 = headerRows[0]; // First header row (main headers)
+                const rows = table.querySelectorAll('tbody tr'); // All body rows
+
+                let startCol = 2; // Start after skipping SNO and items columns
+                let rowSpanStartCol = 1;
+
+                headerRow1.querySelectorAll('th').forEach((th, index) => {
+                    if (index < 2) return; // Skip SNO and items
+
+                    let colspan = th.getAttribute('colspan') ? parseInt(th.getAttribute('colspan')) : 1;
+                    // console.log('colspan:', colspan);
+
+                    const compareIndices = [...Array(colspan).keys()].map(i => i + startCol); // Get column indices to compare
+                    // console.log("Compare indices:", compareIndices);
+
+                    let rowIdCount = {}; // Reset rowIdCount for each column group
+
+                    rows.forEach(row => {
+                        const rowId = row.id;
+                        // console.log("Row ID:", rowId);
+
+                        if (rowIdCount[rowId] === undefined) {
+                            rowIdCount[rowId] = 0;
+                        } else {
+                            rowIdCount[rowId]++;
+                        }
+                        // console.log("Row ID Count:", rowIdCount[rowId]);
+
+                        let dynamicStartCol = rowIdCount[rowId] > 0 ? rowSpanStartCol : startCol;
+                        // console.log("Dynamic Start Col:", dynamicStartCol);
+
+                        const dynamicCompareIndices = [...Array(colspan).keys()].map(i => i + dynamicStartCol);
+                        // console.log("Dynamic Compare Indices:", dynamicCompareIndices);
+
+                        const cells = row.querySelectorAll('td');
+                        compareRange(cells, dynamicCompareIndices);
+                    });
+
+                    startCol += colspan; // Move to the next set of columns
+                    rowSpanStartCol += colspan; // Move to the next set of columns
+
+
+                });
+
+            }
+            
+        });
+
+        
+    }
+
+    function compareRange(cells, indices) {
+        if (cells.length === 0) return; // Ensure cells exist
+
+        const baseValue = cells[indices[0]]?.textContent.trim(); // Get base value safely
+        // // console.log("cell index : baseValue",baseValue);
+        indices.forEach(index => {
+
+            // // console.log("cell index : ",cells[index].textContent.trim());
+            if (!cells[index]) return; // Skip if index is out of bounds
+
+            if (cells[index].textContent.trim() !== baseValue) {
+                cells[index].classList.add('bold'); // Highlight mismatched cells
+            } else {
+                cells[index].classList.remove('bold');
             }
         });
     }
@@ -3143,11 +3839,11 @@
         const lead_id = segments[segments.length - 2]; // Get the second last segment (15)
         const rfq_type = segments[segments.length - 1]; // Get the last segment (2)
 
-        console.log('Lead ID:', lead_id);
-        console.log('Type:', rfq_type);
+        // console.log('Lead ID:', lead_id);
+        // console.log('Type:', rfq_type);
 
         let excel_url = '<?= base_url('leads/exportQCRandRFQ/') ?>' + lead_id + '/' + rfq_type + '/' + 2
-        console.log(excel_url, excel_url);
+        // console.log(excel_url, excel_url);
 
         $('#submitExcel').attr('data-url', excel_url);
 
@@ -3175,7 +3871,7 @@
         $("textarea.select2-search__field").css('resize', 'none');
 
         let placementLeadData = <?= isset($lead_data) && isset($lead_data['proposel_data']) ? json_encode($lead_data['proposel_data']) : 'null'; ?>;
-        // console.log('placementLeadData', placementLeadData);
+        // // console.log('placementLeadData', placementLeadData);
 
         if (placementLeadData) {
             placementLeadData = JSON.parse(placementLeadData);
@@ -3186,7 +3882,7 @@
             $('#alert_msg').text(txt);
         } else {
             $('#alert_msg').text('');
-            console.log('placementLeadData is null or undefined.');
+            // console.log('placementLeadData is null or undefined.');
         }
 
 
@@ -3284,7 +3980,7 @@
 
     function placementMailPopUp() {
 
-        console.log(proposalDataForDropDown);
+        // console.log(proposalDataForDropDown);
 
         const selectElement = document.getElementById('proposals');
 
@@ -3309,7 +4005,7 @@
 
     function ajaxRequestForGetMailData(url) {
 
-        console.log(url);
+        // console.log(url);
 
         $('.loader').fadeIn();
         $('.loader-mask').fadeIn();
@@ -3334,7 +4030,7 @@
 
     function appendInput(data) {
 
-        console.log(data);
+        // console.log(data);
         var lead_id = $('#lead_id').val();
         $('#input_for_row').empty();
         let html = '';
@@ -3537,11 +4233,11 @@
         var bcc = $('#client_bcc').val();
         var cc = $('#client_cc').val();
 
-        console.log('lead_id', lead_id)
-        console.log('subject', subject)
-        console.log('mail_content', mail_content)
-        console.log('bcc', bcc)
-        console.log('cc', cc)
+        // console.log('lead_id', lead_id)
+        // console.log('subject', subject)
+        // console.log('mail_content', mail_content)
+        // console.log('bcc', bcc)
+        // console.log('cc', cc)
 
         // Convert cc to JSON string
         cc = cc.map(Number);
@@ -3572,7 +4268,7 @@
         }
 
         ajaxRequest(formData)
-        console.log('formData', formData)
+        // console.log('formData', formData)
 
     }
 
@@ -3651,7 +4347,7 @@
     function ajaxRequest(formData) {
 
         var apiURL = '<?= base_url('leads/sendMail') ?>';
-        console.log(apiURL);
+        // console.log(apiURL);
 
         $('.loader').fadeIn();
         $('.loader-mask').fadeIn();
@@ -3668,7 +4364,7 @@
                 $('.loader').fadeOut();
                 $('.loader-mask').delay(350).fadeOut('slow');
 
-                console.log(res);
+                // console.log(res);
                 if (res.status == 'success' && res.code == 200) {
                     toastr.success('Mail send Successfully', 'SUCCESS')
                 } else {
@@ -3718,7 +4414,7 @@
     function getInsurerBranchContacts(input) {
 
         let insurer_and_branch = $(input).val();
-        console.log('insurer_and_branch', insurer_and_branch);
+        // console.log('insurer_and_branch', insurer_and_branch);
 
         $('.loader').fadeIn();
         $('.loader-mask').fadeIn();
@@ -3728,7 +4424,7 @@
             type: "GET",
             dataType: 'json',
             success: function(res) {
-                console.log(res)
+                // console.log(res)
                 $('.loader').fadeOut();
                 $('.loader-mask').delay(350).fadeOut('slow');
                 if (res.status == false) {
@@ -3748,7 +4444,7 @@
 
     function appendInsurerContact(data) {
 
-        console.log(data)
+        // console.log(data)
 
         $('#placement_to').empty();
         $('#placement_to').append($('<option>', {