From ca849e2d33357be2a6626050fd98e2bb0754cfbc Mon Sep 17 00:00:00 2001
From: Venkatesh <venkatesh.r@venbainfotech.com>
Date: Wed, 8 Apr 2026 15:44:58 +0530
Subject: [PATCH] FIX_OPD_POLICY_TERMS_ALIGNMENT_ISSUE

---
 app/Views/other_policy_terms.php | 345 ++++++++++++++++++-------------
 1 file changed, 204 insertions(+), 141 deletions(-)

diff --git a/app/Views/other_policy_terms.php b/app/Views/other_policy_terms.php
index 22c092f..5b2d307 100755
--- a/app/Views/other_policy_terms.php
+++ b/app/Views/other_policy_terms.php
@@ -23,6 +23,14 @@
     max-width: 440px;
 }
 
+#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-input {
+    margin-right: 4px;
+}
+
+#OtherPolicyTermsForm #familyFloaterDiv_others .form-check-inline .form-check-label {
+    margin-right: 14px;
+}
+
 .btn-si-add-teal {
     background-color: #00a8b5;
     border: 1px solid #00a8b5;
@@ -45,63 +53,60 @@
     -webkit-overflow-scrolling: touch;
 }
 
-/* Fixed columns so Min/Max Age and Payable align across Self / Spouse / Children / Other ages */
-.policy-72-ff-grid {
-    display: grid;
-    grid-template-columns: 248px 148px 148px minmax(200px, 1fr);
-    column-gap: 20px;
-    row-gap: 14px;
-    align-items: center;
-    min-width: 680px;
+.policy-72-ff-table {
+    width: 100%;
+    min-width: 860px;
 }
 
-.policy-72-ff-grid .ff-cell.ff-member {
+.policy-72-ff-table td {
+    vertical-align: middle;
+    padding: 5px 6px;
+}
+
+.policy-72-ff-table .ff-member-label-col {
+    width: 11%;
+}
+
+.policy-72-ff-table .ff-member-control-col {
+    width: 11%;
+}
+
+.policy-72-ff-table .ff-elders-col {
+    width: 22%;
+}
+
+.policy-72-ff-table .ff-min-col {
+    width: 23%;
+}
+
+.policy-72-ff-table .ff-max-col {
+    width: 23%;
+}
+
+.policy-72-ff-table .ff-pay-label-col {
+    width: 20%;
+}
+
+.policy-72-ff-table .ff-pay-check-col {
+    width: 12%;
+}
+
+.policy-72-ff-table .ff-age-wrap {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.policy-72-ff-table .ff-elders-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
-    min-width: 0;
 }
 
-.policy-72-ff-grid .ff-cell.ff-member-children .ff-children-select {
-    flex: 1;
-    min-width: 0;
-    max-width: 110px;
-    width: auto;
-}
-
-.policy-72-ff-grid .ff-cell.ff-min,
-.policy-72-ff-grid .ff-cell.ff-max {
-    display: flex;
+.policy-72-ff-table .ff-pay-wrap {
+    display: inline-flex;
     align-items: center;
     gap: 6px;
-    justify-self: start;
-}
-
-.policy-72-ff-grid .ff-cell.ff-pay {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 10px;
-    justify-self: stretch;
-    text-align: right;
-}
-
-.policy-72-ff-grid .ff-cell.ff-other-top {
-    grid-column: 1 / -1;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    gap: 6px;
-    min-width: 0;
-}
-
-.policy-72-ff-grid .ff-other-select {
-    width: 100%;
-    max-width: 100%;
-}
-
-.policy-72-ff-grid .ff-grid-spacer {
-    min-height: 1px;
 }
 
 .policy-72-other-members-age-row {
@@ -109,20 +114,31 @@
 }
 
 .policy-72-other-members-age-row.policy-72-other-ages-open {
-    display: contents;
+    display: table-row;
 }
 
-.policy-72-ff-grid .ff-field-label {
+.policy-72-ff-table .ff-field-label {
     white-space: nowrap;
     font-size: 0.9rem;
     color: #212529;
 }
 
-.policy-72-ff-grid .ff-age-input {
-    width: 64px;
+.policy-72-ff-table .ff-pay-wrap .ff-field-label {
+    white-space: nowrap;
+    font-size: 12px;
+    line-height: 1.2;
+}
+
+.policy-72-ff-table .ff-age-input {
+    width: 68px;
     min-width: 48px;
 }
 
+.policy-72-ff-table .ff-elders-count-input {
+    width: 64px;
+    background: #d3d3d3;
+}
+
 .button-like {
     display: inline-block;
     padding: 8px 15px;
@@ -242,92 +258,138 @@ label {
         </div>
         <div id="familyFloaterDiv_others_two" class="row mb-3" style="display:none;">
             <div class="col-md-4 col-lg-3 d-none d-md-block"></div>
-            <div class="col-md-8 col-lg-9 policy-72-family-grid">
-                <input type="hidden" name="elder_member_count" id="member_count_others" value="0">
-                <div class="policy-72-ff-grid">
-                    <div class="ff-cell ff-member">
-                        <input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
-                        <span class="text-dark fw-semibold">Self:</span>
-                    </div>
-                    <div class="ff-cell ff-min">
-                        <span class="ff-field-label">Min Age:</span>
-                        <input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
-                    </div>
-                    <div class="ff-cell ff-max">
-                        <span class="ff-field-label">Max Age:</span>
-                        <input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
-                    </div>
-                    <div class="ff-cell ff-pay">
-                        <span class="ff-field-label">Is Payable by employee:</span>
-                        <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
-                    </div>
-                    <div class="ff-cell ff-member">
-                        <input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
-                        <span class="text-dark fw-semibold">Spouse:</span>
-                    </div>
-                    <div class="ff-cell ff-min">
-                        <span class="ff-field-label">Min Age:</span>
-                        <input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
-                    </div>
-                    <div class="ff-cell ff-max">
-                        <span class="ff-field-label">Max Age:</span>
-                        <input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
-                    </div>
-                    <div class="ff-cell ff-pay">
-                        <span class="ff-field-label">Is Payable by employee:</span>
-                        <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
-                    </div>
-                    <div class="ff-cell ff-member ff-member-children">
-                        <span class="text-dark fw-semibold">Children:</span>
-                        <select name="family_floaters[]" id="children_others" class="form-select form-control ff-children-select">
-                            <option value="0">None</option>
-                            <option value="1">1</option>
-                            <option value="2">2</option>
-                            <option value="3">3</option>
-                            <option value="4">4</option>
-                        </select>
-                    </div>
-                    <div class="ff-cell ff-min">
-                        <span class="ff-field-label">Min Age:</span>
-                        <input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
-                    </div>
-                    <div class="ff-cell ff-max">
-                        <span class="ff-field-label">Max Age:</span>
-                        <input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
-                    </div>
-                    <div class="ff-cell ff-pay">
-                        <span class="ff-field-label">Is Payable by employee:</span>
-                        <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
-                    </div>
-                    <div class="ff-cell ff-other-top">
-                        <label class="form-label policy-term-main-label mb-1" for="family_floaters_others">Select Other Members:</label>
-                        <select name="family_floaters[]" id="family_floaters_others" class="form-select form-control ff-other-select">
-                            <option value="0">None</option>
-                            <option value="1P">Only one parent (Either Father / Mother)</option>
-                            <option value="2P">Only two parents (Father+Mother)</option>
-                            <option value="1PIL">Only one parent in law (Either MIL / FIL)</option>
-                            <option value="2PIL">Only two parents in law (FIL + MIL)</option>
-                            <option value="2EPORPIL">Parents or PIL (Any two of Father, Mother, MIL, FIL)</option>
-                            <option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
-                            <option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
-                        </select>
-                    </div>
-                    <div id="other_members_age_row" class="policy-72-other-members-age-row">
-                        <div class="ff-cell ff-grid-spacer" aria-hidden="true"></div>
-                        <div class="ff-cell ff-min">
-                            <span class="ff-field-label">Min Age:</span>
-                            <input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
-                        </div>
-                        <div class="ff-cell ff-max">
-                            <span class="ff-field-label">Max Age:</span>
-                            <input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
-                        </div>
-                        <div class="ff-cell ff-pay">
-                            <span class="ff-field-label">Is Payable by employee:</span>
-                            <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
-                        </div>
-                    </div>
-                </div>
+            <div class="col-md-8 col-lg-8 policy-72-family-grid">
+                <table class="policy-72-ff-table">
+                    <tbody>
+                        <tr>
+                            <td class="ff-member-label-col">
+                                <span class="text-dark fw-semibold">Self:</span>
+                            </td>
+                            <td class="ff-member-control-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="self" id="self_others" checked>
+                            </td>
+                            <td class="ff-min-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Min Age:</span>
+                                    <input class="underline-input ff-age-input min_age" type="number" name="self_min_age" id="self_min_age_others" value="18">
+                                </div>
+                            </td>
+                            <td class="ff-max-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Max Age:</span>
+                                    <input class="underline-input ff-age-input max_age" type="number" name="self_max_age" id="self_max_age_others" value="60">
+                                </div>
+                            </td>
+                            <td class="ff-pay-label-col">
+                                <span class="ff-field-label">Is Payable by employee:</span>
+                            </td>
+                            <td class="ff-pay-check-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_self" id="is_payable_employee_for_self_others" value="1" checked>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="ff-member-label-col">
+                                <span class="text-dark fw-semibold">Spouse:</span>
+                            </td>
+                            <td class="ff-member-control-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="family_floaters[]" value="spouse" id="spouse_others" checked>
+                            </td>
+                            <td class="ff-min-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Min Age:</span>
+                                    <input class="underline-input ff-age-input min_age" type="number" name="spouse_min_age" id="spouse_min_age_others" value="18">
+                                </div>
+                            </td>
+                            <td class="ff-max-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Max Age:</span>
+                                    <input class="underline-input ff-age-input max_age" type="number" name="spouse_max_age" id="spouse_max_age_others" value="60">
+                                </div>
+                            </td>
+                            <td class="ff-pay-label-col">
+                                <span class="ff-field-label">Is Payable by employee:</span>
+                            </td>
+                            <td class="ff-pay-check-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_spouse" id="is_payable_employee_for_spouse_others" value="1">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td class="ff-member-label-col">
+                                <span class="text-dark fw-semibold">Children:</span>
+                            </td>
+                            <td class="ff-member-control-col">
+                                <select name="family_floaters[]" id="children_others" class="form-select form-control d-inline-block ms-2" style="width: 86px;">
+                                    <option value="0">None</option>
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                    <option value="3">3</option>
+                                    <option value="4">4</option>
+                                </select>
+                            </td>
+                            <td class="ff-min-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Min Age:</span>
+                                    <input class="underline-input ff-age-input min_age" type="number" name="child_min_age" id="child_min_age_others" value="0">
+                                </div>
+                            </td>
+                            <td class="ff-max-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Max Age:</span>
+                                    <input class="underline-input ff-age-input max_age" type="number" name="child_max_age" id="child_max_age_others" value="25">
+                                </div>
+                            </td>
+                            <td class="ff-pay-label-col">
+                                <span class="ff-field-label">Is Payable by employee:</span>
+                            </td>
+                            <td class="ff-pay-check-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_child" id="is_payable_employee_for_child_others" value="1">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td colspan="2">
+                                <span class="text-dark">Select Other Members:</span>
+                            </td>
+                            <td colspan="4">
+                                <select name="family_floaters[]" id="family_floaters_others" class="form-select form-control" style="max-width: 430px;">
+                                    <option value="0">None</option>
+                                    <option value="1P">Only one parent (Either Father / Mother)</option>
+                                    <option value="2P">Only two parents (Father+Mother)</option>
+                                    <option value="1PIL">Only one parent in law (Either MIL / FIL)</option>
+                                    <option value="2PIL">Only two parents in law (FIL + MIL)</option>
+                                    <option value="2EPORPIL">Parents or PIL (Any two of Father, Mother, MIL, FIL)</option>
+                                    <option value="EPORPIL">Either Parents or PIL (Parents or Parents In Law)</option>
+                                    <option value="4EPORPIL">Parents + PIL (Father + Mother + MIL + FIL)</option>
+                                </select>
+                            </td>
+                        </tr>
+                        <tr id="other_members_age_row" class="policy-72-other-members-age-row">
+                            <td colspan="2" class="ff-elders-col">
+                                <div class="ff-elders-wrap">
+                                    <span class="ff-field-label">Elders Count:</span>
+                                    <input class="underline-input ff-elders-count-input" type="number" name="elder_member_count" id="member_count_others" value="0" readonly>
+                                </div>
+                            </td>
+                            <td class="ff-min-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Min Age:</span>
+                                    <input class="underline-input ff-age-input" type="number" name="other_member_min_age" id="other_member_min_age_others" value="18">
+                                </div>
+                            </td>
+                            <td class="ff-max-col">
+                                <div class="ff-age-wrap">
+                                    <span class="ff-field-label">Max Age:</span>
+                                    <input class="underline-input ff-age-input" type="number" name="other_member_max_age" id="other_member_max_age_others" value="60">
+                                </div>
+                            </td>
+                            <td class="ff-pay-label-col">
+                                <span class="ff-field-label">Is Payable by employee:</span>
+                            </td>
+                            <td class="ff-pay-check-col">
+                                <input class="form-check-input mt-0" type="checkbox" name="is_payable_employee_for_elders" id="is_payable_employee_for_elders_others" value="1">
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
             </div>
         </div>
         <div id="append_html_for_other_policy_terms_72_after_family"></div>
@@ -754,15 +816,16 @@ function si_keup_num_to_word2(input) {
 function syncPolicy72ElderMemberCount() {
     var map = { '0': 0, '1P': 1, '2P': 2, '1PIL': 1, '2PIL': 2, '2EPORPIL': 2, 'EPORPIL': 1, '4EPORPIL': 4 };
     var v = $('#family_floaters_others').val();
-    $('#member_count_others').val(map[v] !== undefined ? map[v] : 0);
+    var elderCount = map[v] !== undefined ? map[v] : 0;
+    $('#member_count_others').val(elderCount);
 }
 
 function togglePolicy72OtherMembersAgeRow() {
     var v = $('#family_floaters_others').val();
     if (v && v !== '0') {
-        $('#other_members_age_row').addClass('policy-72-other-ages-open');
+        $('#other_members_age_row').addClass('policy-72-other-ages-open').css('display', 'table-row');
     } else {
-        $('#other_members_age_row').removeClass('policy-72-other-ages-open');
+        $('#other_members_age_row').removeClass('policy-72-other-ages-open').css('display', 'none');
     }
 }