<?php include 'header.php'; ?>

      <!-- State Master Form - Place this in your main content area -->
      <div class="state-master-wrapper" id="stateMasterContainer" style="display: none;">
        <div class="state-master-grid">
          <!-- Form Card -->
          <div class="form-card">
            <div class="form-header">
              <div class="header-icon">
                <i class="bi bi-map"></i>
              </div>
              <div class="header-text">
                <h3>STATE MASTER</h3>
                <p>State Entry</p>
              </div>
            </div>
            <div class="form-body">
              <div class="form-row">
                <div class="form-group">
                  <label><i class="bi bi-hash"></i> State Code</label>
                  <input type="text" id="stateCode" class="form-control" value="2" placeholder="Enter State Code">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-pin-map-fill"></i> State Name</label>
                  <input type="text" id="stateName" class="form-control" value="WEST BENGAL" placeholder="Enter State Name">
                </div>
              </div>
              <div class="form-actions">
                <button class="btn-new" id="newBtn"><i class="bi bi-plus-circle"></i> New</button>
                <button class="btn-save" id="saveBtn"><i class="bi bi-save"></i> Save</button>
              </div>
            </div>
          </div>

          <!-- State List Table Card -->
          <div class="table-card">
            <div class="table-header">
              <h4><i class="bi bi-table"></i> State List</h4>
              <span class="record-count" id="recordCount">0 Records</span>
            </div>
            <div class="table-responsive">
              <table class="data-table" id="stateTable">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>State Code</th>
                    <th>State Name</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="stateTableBody">
                  <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>WEST BENGAL</td>
                    <td><button class="btn-delete" onclick="deleteState(0)"><i class="bi bi-trash"></i> Delete</button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!--State Master Form-->

      <!-- Relation Master Form -->
      <div class="master-form-container" id="relationMasterContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-people"></i>
            </div>
            <div class="header-text">
              <h3>RELATION MASTER</h3>
              <p>Relation Manager</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="relation-layout">
              <!-- Left Side - Current Selection -->
              <div class="relation-selection">
                <label><i class="bi bi-tag"></i> Relation</label>
                <div class="selected-relation" id="selectedRelation">MOTHER</div>
                <input type="hidden" id="relationValue" value="MOTHER">
              </div>
              
              <!-- Right Side - Relations List -->
              <div class="relations-list">
                <div class="relation-grid" id="relationGrid">
                  <span data-rel="MOTHER">MOTHER</span>
                  <span data-rel="FATHER">FATHER</span>
                  <span data-rel="DAUGHTER">DAUGHTER</span>
                  <span data-rel="BROTHER">BROTHER</span>
                  <span data-rel="SISTER">SISTER</span>
                  <span data-rel="HUSBAND">HUSBAND</span>
                  <span data-rel="GRAND FATHER">GRAND FATHER</span>
                  <span data-rel="GRAND MOTHER">GRAND MOTHER</span>
                  <span data-rel="GRAND DAUGHTER">GRAND DAUGHTER</span>
                  <span data-rel="NEPHEW">NEPHEW</span>
                  <span data-rel="NEPHEW-IN-LAW">NEPHEW-IN-LAW</span>
                  <span data-rel="MOTHER-IN-LAW">MOTHER-IN-LAW</span>
                  <span data-rel="SISTER-IN-LAW">SISTER-IN-LAW</span>
                  <span data-rel="SON-IN-LAW">SON-IN-LAW</span>
                  <span data-rel="DAUGHTER-IN-LAW">DAUGHTER-IN-LAW</span>
                  <span data-rel="NEIGHBOURS">NEIGHBOURS</span>
                  <span data-rel="FRIENDS">FRIENDS</span>
                  <span data-rel="NO RELATION">NO RELATION</span>
                  <span data-rel="LEGAL GUARDIAN">LEGAL GUARDIAN</span>
                </div>
              </div>
            </div>
            
            <div class="master-form-actions">
              <button class="btn-new" id="relationNewBtn"><i class="bi bi-plus-circle"></i> NEW</button>
              <button class="btn-save" id="relationSaveBtn"><i class="bi bi-save"></i> SAVE</button>
              <button class="btn-trash" id="relationTrashBtn"><i class="bi bi-trash"></i> TRASH</button>
              <button class="btn-clear" id="relationClearBtn"><i class="bi bi-eraser"></i> CLEAR</button>
              <button class="btn-exit" id="relationExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!--Relation Master Form-->

      <!-- Branch Master Form (Fixed with Prefix before Branch Name) -->
      <div class="master-form-container" id="branchMasterContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-diagram-3"></i>
            </div>
            <div class="header-text">
              <h3>BRANCH MASTER</h3>
              <p>Branch Information Management</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="form-two-columns">
              <!-- Left Column -->
              <div class="form-column">
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-tag"></i> Prefix</label>
                    <input type="text" id="branchPrefix" class="form-control" value="HLY">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-building"></i> Branch Name</label>
                    <input type="text" id="branchName" class="form-control" value="HEAD OFFICE">
                  </div>
                </div>
                <div class="form-group">
                  <label><i class="bi bi-hash"></i> Branch Code</label>
                  <input type="text" id="branchCode" class="form-control" value="001">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-geo-alt"></i> Address</label>
                  <textarea id="branchAddress" class="form-control" rows="3">109, SHANTIGARH, GRAHAM ROAD, KOLKATA, WEST BENGAL, PIN-700040</textarea>
                </div>
                <div class="form-group">
                  <label><i class="bi bi-person"></i> Manager Name</label>
                  <input type="text" id="managerName" class="form-control" value="ARITRA DAS">
                </div>
              </div>
              
              <!-- Right Column -->
              <div class="form-column">
                <div class="form-group">
                  <label><i class="bi bi-telephone"></i> Phone Number</label>
                  <input type="text" id="phoneNumber" class="form-control" value="908548761">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-calendar"></i> Opening Date</label>
                  <input type="text" id="openingDate" class="form-control" value="02/01/2023">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-code-square"></i> Branch Codes List</label>
                  <div class="code-list">
                    <div class="code-item">002 : HEAD OFFICE</div>
                    <div class="code-item">003 : HOOGHLY</div>
                    <div class="code-item">004 : NABAVIHP</div>
                    <div class="code-item">005 : BADKULLA</div>
                  </div>
                </div>
                <!--<div class="form-row-three">
                  <div class="form-group">
                    <label><i class="bi bi-arrow-right"></i> Next</label>
                    <input type="text" id="next" class="form-control" value="NBD">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-arrow-left"></i> Previous</label>
                    <input type="text" id="previous" class="form-control" value="BOX">
                  </div>
                </div>-->
              </div>
            </div>
            
            <div class="master-form-actions">
              <button class="btn-add" id="branchAddBtn"><i class="bi bi-plus-lg"></i> ADD</button>
              <button class="btn-update" id="branchUpdateBtn"><i class="bi bi-pencil"></i> UPDATE</button>
              <button class="btn-trash" id="branchTrashBtn"><i class="bi bi-trash"></i> TRASH</button>
              <button class="btn-clear" id="branchClearBtn"><i class="bi bi-eraser"></i> CLEAR</button>
              <button class="btn-exit" id="branchExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!--Branch Master Form-->

      <!-- Zone Master Form (Fixed) -->
      <div class="master-form-container" id="zoneMasterContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-pin-map-fill"></i>
            </div>
            <div class="header-text">
              <h3>ZONE MASTER</h3>
              <p>Zone & State Configuration</p>
            </div>
          </div>
          <div class="master-form-body">
            <!-- Zone Entry Section -->
            <div class="zone-entry">
              <div class="form-row-two">
                <div class="form-group">
                  <label><i class="bi bi-hash"></i> Zone Code</label>
                  <input type="text" id="zoneCode" class="form-control" value="4">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-map"></i> Zone Name</label>
                  <input type="text" id="zoneName" class="form-control" value="RUST REVEAL">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-building"></i> Under State</label>
                  <input type="text" id="underState" class="form-control" placeholder="Enter State Name">
                </div>
              </div>
              <div class="zone-actions-inline">
                <button class="btn-new-small" id="zoneNewBtn">NEW</button>
                <button class="btn-save-small" id="zoneSaveBtn">SAVE</button>
              </div>
            </div>
            
            <!-- Zone Data Table -->
            <div class="data-table-container">
              <table class="data-table" id="zoneDataTable">
                <thead>
                  <tr>
                    <th>Zone Code</th>
                    <th>State Code</th>
                    <th>Zone Name</th>
                  </tr>
                </thead>
                <tbody id="zoneTableBody">
                  <tr>
                    <td>1</td>
                    <td>1</td>
                    <td>ROOTKEY</td>
                  </tr>
                  <tr>
                    <td>2</td>
                    <td>1</td>
                    <td>ROLE/IA</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td>ROLEA</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- Zone Master Form -->

      <!-- Company Profile Form -->
      <div class="master-form-container" id="companyProfileContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-building"></i>
            </div>
            <div class="header-text">
              <h3>COMPANY PROFILE</h3>
              <p>Company Information Management</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="profile-layout">
              <!-- Left Column -->
              <div class="profile-column">
                <div class="form-group">
                  <label><i class="bi bi-building"></i> Company Name</label>
                  <input type="text" id="companyName" class="form-control" value="ANJU MICRO SELFHELP ASSOCIATION">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-tag"></i> Short Name</label>
                  <input type="text" id="shortName" class="form-control" value="ANJU MICRO SELFHELP ASSOCIATION">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-info-circle"></i> About</label>
                  <textarea id="about" class="form-control" rows="2">ANJU MICRO SELFHELP ASSOCIATION</textarea>
                </div>
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-file-text"></i> CIN</label>
                    <input type="text" id="cin" class="form-control" value="U85100WB2023NPL259433">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-file-text"></i> PAN</label>
                    <input type="text" id="pan" class="form-control" value="AAYCA15736">
                  </div>
                </div>
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-file-text"></i> TAN</label>
                    <input type="text" id="tan" class="form-control" value="CALA33159G">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-file-text"></i> GSTIN</label>
                    <input type="text" id="gstin" class="form-control" placeholder="Enter GSTIN">
                  </div>
                </div>
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-tags"></i> Category</label>
                    <input type="text" id="category" class="form-control" value="MICRO FINANCE">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-layer"></i> Class</label>
                    <input type="text" id="class" class="form-control" placeholder="Enter Class">
                  </div>
                </div>
              </div>

              <!-- Right Column -->
              <div class="profile-column">
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-currency-rupee"></i> Authorized Capital</label>
                    <input type="text" id="authorizedCapital" class="form-control" value="150000">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-currency-rupee"></i> Paid up Capital</label>
                    <input type="text" id="paidUpCapital" class="form-control" value="150000">
                  </div>
                </div>
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-coin"></i> Share Nominal Value</label>
                    <input type="text" id="shareValue" class="form-control" value="10">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-map"></i> State Of Registration</label>
                    <input type="text" id="stateRegistration" class="form-control" value="WEST BENGAL">
                  </div>
                </div>
                <div class="form-group">
                  <label><i class="bi bi-calendar"></i> Date Of Incorporation</label>
                  <input type="text" id="incorporationDate" class="form-control" value="02/01/2023">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-geo-alt"></i> Address</label>
                  <textarea id="address" class="form-control" rows="2">109, SHANTIGARH, GRAHAM ROAD, GROUND FLOOR, FLAT-F-2, KOLKATA, WEST BENGAL, PIN: 700040</textarea>
                </div>
                <div class="form-row-two">
                  <div class="form-group">
                    <label><i class="bi bi-envelope"></i> Email</label>
                    <input type="email" id="email" class="form-control" value="ANJUMICRO23@GMAIL.COM">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-telephone"></i> Phone No</label>
                    <input type="text" id="phoneNo" class="form-control" value="9674690076">
                  </div>
                </div>
                <div class="form-group">
                  <label><i class="bi bi-telephone"></i> Land Line</label>
                  <input type="text" id="landline" class="form-control" value="033 48100137">
                </div>
              </div>
            </div>

            <!-- Radio Options Row -->
            <div class="radio-row">
              <div class="radio-group">
                <span class="radio-label">Allocate New Share</span>
                <label class="radio-option"><input type="radio" name="allocateShare" value="Yes"> Yes</label>
                <label class="radio-option"><input type="radio" name="allocateShare" value="No" checked> No</label>
              </div>
              <div class="radio-group">
                <span class="radio-label">Split Promoter Share</span>
                <label class="radio-option"><input type="radio" name="splitShare" value="Yes"> Yes</label>
                <label class="radio-option"><input type="radio" name="splitShare" value="No" checked> No</label>
              </div>
            </div>

            <!-- Logo & Signature Row -->
            <div class="upload-row">
              <div class="upload-box">
                <label><i class="bi bi-image"></i> Company Logo</label>
                <div class="upload-preview">
                  <span class="preview-text">Anju</span>
                  <div class="upload-actions">
                    <button class="btn-upload"><i class="bi bi-folder2-open"></i> Browse Logo</button>
                    <button class="btn-remove"><i class="bi bi-x"></i> X</button>
                  </div>
                </div>
              </div>
              <div class="upload-box">
                <label><i class="bi bi-person-badge"></i> Authorized Signatory</label>
                <div class="upload-preview">
                  <span class="preview-text">Bubba Das</span>
                  <div class="upload-actions">
                    <button class="btn-upload"><i class="bi bi-folder2-open"></i> Browse Signature</button>
                    <button class="btn-remove"><i class="bi bi-x"></i> X</button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Software Background -->
            <div class="form-group">
              <label><i class="bi bi-display"></i> Software Background (1368x768)</label>
              <div class="bg-preview">
                <!--<div class="bg-placeholder">
                  <i class="bi bi-brush"></i>
                  <i class="bi bi-palette"></i>
                  <span>Background Image Preview</span>
                </div>-->
                <button class="btn-upload-bg"><i class="bi bi-folder2-open"></i>Browse Background</button>
              </div>
            </div>

            <!-- Action Buttons -->
            <div class="master-form-actions">
              <button class="btn-save" id="companySaveBtn"><i class="bi bi-save"></i> SAVE</button>
              <button class="btn-update" id="companyUpdateBtn"><i class="bi bi-pencil"></i> UPDATE</button>
              <button class="btn-clear" id="companyClearBtn"><i class="bi bi-eraser"></i> CLEAR</button>
              <button class="btn-exit" id="companyExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Company Profile Form -->

      <!-- Rank Master Form -->
      <div class="master-form-container" id="rankMasterContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-star-fill"></i>
            </div>
            <div class="header-text">
              <h3>RANK MASTER</h3>
              <p>Rank And Designation Management</p>
            </div>
          </div>
          <div class="master-form-body">
            <!-- Rank Entry Section -->
            <div class="rank-entry-section">
              <div class="form-row-two">
                <div class="form-group">
                  <label><i class="bi bi-trophy"></i> Rank</label>
                  <input type="text" id="rankInput" class="form-control" placeholder="Enter Rank Number">
                </div>
                <div class="form-group">
                  <label><i class="bi bi-person-badge"></i> Designation</label>
                  <input type="text" id="designationInput" class="form-control" placeholder="Enter Designation">
                </div>
              </div>
              <div class="rank-actions-inline">
                <button class="btn-add-small" id="rankAddBtn"><i class="bi bi-plus-lg"></i> ADD</button>
              </div>
            </div>

            <!-- Rank Data Table -->
            <div class="data-table-container">
              <table class="data-table" id="rankTable">
                <thead>
                  <tr>
                    <th>Rank</th>
                    <th>Designation</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody id="rankTableBody">
                  <tr><td>1</td><td>CLERICAL</td><td><button class="btn-delete-row" onclick="deleteRank(0)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>2</td><td>RECEPTIONIST</td><td><button class="btn-delete-row" onclick="deleteRank(1)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>3</td><td>BACK OFFICE EXECUTIVE</td><td><button class="btn-delete-row" onclick="deleteRank(2)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>4</td><td>FRONT OFFICE EXECUTIVE</td><td><button class="btn-delete-row" onclick="deleteRank(3)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>5</td><td>BRANCH COORDINATOR</td><td><button class="btn-delete-row" onclick="deleteRank(4)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>6</td><td>HO COORDINATOR</td><td><button class="btn-delete-row" onclick="deleteRank(5)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>7</td><td>FIELD OFFICER</td><td><button class="btn-delete-row" onclick="deleteRank(6)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>8</td><td>LOAN OFFICER</td><td><button class="btn-delete-row" onclick="deleteRank(7)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>9</td><td></td><td><button class="btn-delete-row" onclick="deleteRank(8)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>10</td><td></td><td><button class="btn-delete-row" onclick="deleteRank(9)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>11</td><td></td><td><button class="btn-delete-row" onclick="deleteRank(10)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>12</td><td>ASSISTANT BR MANAGER</td><td><button class="btn-delete-row" onclick="deleteRank(11)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>13</td><td>BRANCH MANAGER</td><td><button class="btn-delete-row" onclick="deleteRank(12)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>14</td><td>BRANCH HEAD</td><td><button class="btn-delete-row" onclick="deleteRank(13)"><i class="bi bi-trash"></i></button></td></tr>
                  <tr><td>15</td><td>CLUSTER HEAD</td><td><button class="btn-delete-row" onclick="deleteRank(14)"><i class="bi bi-trash"></i></button></td></tr>
                </tbody>
              </table>
            </div>

            <div class="master-form-actions">
              <button class="btn-new" id="rankNewBtn"><i class="bi bi-plus-circle"></i> NEW</button>
              <button class="btn-save" id="rankSaveBtn"><i class="bi bi-save"></i> SAVE</button>
              <button class="btn-trash" id="rankTrashBtn"><i class="bi bi-trash"></i> TRASH LAST</button>
              <button class="btn-exit" id="rankExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Rank Master Form -->

      <!-- Accounts Code Sequence Form -->
      <div class="master-form-container" id="accountsCodeContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-sort-numeric-down"></i>
            </div>
            <div class="header-text">
              <h3>ACCOUNTS CODE SEQUENCE</h3>
              <p>Code Sequence is an essential part of a system.</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="info-note">
              <i class="bi bi-info-circle-fill"></i>
              You can set sequence for members and accounts for the very first time. After that the sequence will be auto incremental.
            </div>

            <div class="sequence-table-container">
              <table class="sequence-table">
                <thead>
                  <tr>
                    <th></th>
                    <th>Prefix</th>
                    <th>Start From</th>
                    <th>No. Of Digit</th>
                    <th>Last No.</th>
                    <th>Preview Code</th>
                    <th></th>
                  </tr>
                  <tr class="sub-header">
                    <th></th>
                    <th>ex. MA, CM</th>
                    <th>ex. 1</th>
                    <th>ex. 5 digit (00001)</th>
                    <th></th>
                    <th>ex. MA00001</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="label-cell"><strong>Member Code.</strong></td>
                    <td><input type="text" class="seq-input" id="memberPrefix" value="MA"></td>
                    <td><input type="text" class="seq-input" id="memberStartFrom" value="1"></td>
                    <td><input type="text" class="seq-input" id="memberDigits" value="6"></td>
                    <td><input type="text" class="seq-input" id="memberLastNo" value="99"></td>
                    <td><input type="text" class="seq-input preview" id="memberPreview" value="MA000001" readonly></td>
                    <td><button class="btn-set" onclick="updatePreview('member')">SET</button></td>
                  </tr>
                  <tr>
                    <td class="label-cell"><strong>Collector Code.</strong></td>
                    <td><input type="text" class="seq-input" id="collectorPrefix" value="C"></td>
                    <td><input type="text" class="seq-input" id="collectorStartFrom" value="1"></td>
                    <td><input type="text" class="seq-input" id="collectorDigits" value="5"></td>
                    <td><input type="text" class="seq-input" id="collectorLastNo" value="26"></td>
                    <td><input type="text" class="seq-input preview" id="collectorPreview" value="C00001" readonly></td>
                    <td><button class="btn-set" onclick="updatePreview('collector')">SET</button></td>
                  </tr>
                  <tr>
                    <td class="label-cell"><strong>Personal Loan.</strong></td>
                    <td><input type="text" class="seq-input" id="personalPrefix" value="PL"></td>
                    <td><input type="text" class="seq-input" id="personalStartFrom" value="1"></td>
                    <td><input type="text" class="seq-input" id="personalDigits" value="6"></td>
                    <td><input type="text" class="seq-input" id="personalLastNo" value="92"></td>
                    <td><input type="text" class="seq-input preview" id="personalPreview" value="PL000001" readonly></td>
                    <td><button class="btn-set" onclick="updatePreview('personal')">SET</button></td>
                  </tr>
                  <tr>
                    <td class="label-cell"><strong>Group Loan.</strong></td>
                    <td><input type="text" class="seq-input" id="groupPrefix" value="GR"></td>
                    <td><input type="text" class="seq-input" id="groupStartFrom" value="1"></td>
                    <td><input type="text" class="seq-input" id="groupDigits" value="5"></td>
                    <td><input type="text" class="seq-input" id="groupLastNo" value="1"></td>
                    <td><input type="text" class="seq-input preview" id="groupPreview" value="GR00001" readonly></td>
                    <td><button class="btn-set" onclick="updatePreview('group')">SET</button></td>
                  </tr>
                  <tr>
                    <td class="label-cell"><strong>Product Loan.</strong></td>
                    <td><input type="text" class="seq-input" id="productPrefix" value="PRL"></td>
                    <td><input type="text" class="seq-input" id="productStartFrom" value="1"></td>
                    <td><input type="text" class="seq-input" id="productDigits" value="6"></td>
                    <td><input type="text" class="seq-input" id="productLastNo" value="2"></td>
                    <td><input type="text" class="seq-input preview" id="productPreview" value="PRL000001" readonly></td>
                    <td><button class="btn-set" onclick="updatePreview('product')">SET</button></td>
                  </tr>
                </tbody>
              </table>
            </div>

            <div class="master-form-actions">
              <button class="btn-save" id="sequenceSaveBtn"><i class="bi bi-save"></i> SAVE ALL</button>
              <button class="btn-exit" id="sequenceExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Accounts Code Sequence Form -->

      <!-- Global Configuration Settings Form -->
      <div class="master-form-container" id="globalConfigContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-gear-wide-connected"></i>
            </div>
            <div class="header-text">
              <h3>GLOBAL CONFIGURATION SETTINGS</h3>
              <p>System Wide Configuration Parameters</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="config-grid">
              <!-- Regd. Fees Configuration -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-currency-rupee"></i>
                  <h4>Regd. Fees Configuration</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>Member</label>
                    <input type="text" class="config-input" id="memberFees" value="0/500">
                  </div>
                  <div class="config-row">
                    <label>Collector</label>
                    <input type="text" class="config-input" id="collectorFees" value="0">
                  </div>
                  <div class="config-row-text">
                    <label>Like</label>
                    <span class="config-text">10/20/50/100/150</span>
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveRegdFees()">Save</button>
                </div>
              </div>

              <!-- Gold Rate Configuration -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-gem"></i>
                  <h4>Gold Rate Configuration</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>Gold Rate /1gm</label>
                    <input type="text" class="config-input" id="goldRate" value="3500">
                  </div>
                  <div class="config-row">
                    <label>Silver Rate /1gm</label>
                    <input type="text" class="config-input" id="silverRate" value="150">
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveGoldRate()">Save</button>
                </div>
              </div>

              <!-- TDS Configuration -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-percent"></i>
                  <h4>TDS Configuration</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>TDS With PAN</label>
                    <input type="text" class="config-input" id="tdsPan" value="20">
                  </div>
                  <div class="config-row">
                    <label>TDS Without PAN</label>
                    <input type="text" class="config-input" id="tdsWithoutPan" value="30">
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveTDS()">Save</button>
                </div>
              </div>

              <!-- Loan EMI Fine Configuration -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-exclamation-triangle"></i>
                  <h4>Loan EMI Fine Configuration</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>EMI Grace Period (Days)</label>
                    <input type="text" class="config-input" id="gracePeriod" value="30">
                  </div>
                  <div class="config-row">
                    <label>Fine % Per Month</label>
                    <input type="text" class="config-input" id="finePercent" value="5">
                  </div>
                  <div class="config-row">
                    <label>Fine Counting Interval</label>
                    <input type="text" class="config-input" id="fineInterval" value="0">
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveLoanFine()">Save</button>
                </div>
              </div>

              <!-- Opening Balance Date Configuration -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-calendar"></i>
                  <h4>Opening Balance Date Configuration</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>Opening Balance Date</label>
                    <input type="text" class="config-input" id="openingBalanceDate" value="02/03/2017">
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveOpeningBalance()">Save</button>
                </div>
              </div>

              <!-- Net Owned Fund [NOF] - Separate Section -->
              <div class="config-card">
                <div class="config-card-header">
                  <i class="bi bi-pie-chart"></i>
                  <h4>Net Owned Fund [NOF]</h4>
                </div>
                <div class="config-card-body">
                  <div class="config-row">
                    <label>Net Owned Fund [NOF]</label>
                    <input type="text" class="config-input" id="nof" value="0">
                  </div>
                </div>
                <div class="config-save-btn">
                  <button class="btn-config-save" onclick="saveNOF()">Save</button>
                </div>
              </div>
            </div>

            <div class="master-form-actions">
              <button class="btn-clear" id="configClearBtn"><i class="bi bi-eraser"></i> CLEAR ALL</button>
              <button class="btn-exit" id="configExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Global Configuration Settings Form -->

      <!-- Biometric Scanner Form - Complete with all options -->
      <div class="master-form-container" id="biometricScannerContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-fingerprint"></i>
            </div>
            <div class="header-text">
              <h3>BIOMETRIC SCANNER</h3>
              <p>frmFPrint - Fingerprint Capture & Verification System</p>
            </div>
          </div>
          <div class="master-form-body">
            <div class="biometric-main-grid">
              <!-- Left Column - Device Controls -->
              <div class="biometric-left-panel">
                <!-- Device Info Section -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-hdd-stack"></i>
                    <h4>Device Info</h4>
                  </div>
                  <div class="biometric-card-body">
                    <div class="info-row">
                      <span class="info-label">Version:</span>
                      <span class="info-value" id="deviceVersion">-</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">Status:</span>
                      <span class="info-value" id="deviceStatus">Not Initialized</span>
                    </div>
                    <div class="info-row">
                      <span class="info-label">Device:</span>
                      <span class="info-value" id="deviceName">-</span>
                    </div>
                  </div>
                </div>

                <!-- Device Control Buttons -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-sliders2"></i>
                    <h4>Device Controls</h4>
                  </div>
                  <div class="biometric-card-body">
                    <div class="control-btn-group">
                      <button class="btn-device" id="checkDeviceBtn"><i class="bi bi-check-lg"></i> Check Device</button>
                      <button class="btn-device" id="initBtn"><i class="bi bi-play-circle"></i> Init</button>
                      <button class="btn-device" id="uninitBtn"><i class="bi bi-stop-circle"></i> Uninit</button>
                    </div>
                  </div>
                </div>

                <!-- Capture Section -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-camera"></i>
                    <h4>Capture</h4>
                  </div>
                  <div class="biometric-card-body">
                    <div class="control-btn-group">
                      <button class="btn-capture-start" id="startCaptureBtn"><i class="bi bi-play-fill"></i> Start Capture</button>
                      <button class="btn-capture-stop" id="stopCaptureBtn"><i class="bi bi-stop-fill"></i> Stop Capture</button>
                    </div>
                    <div class="capture-options">
                      <div class="option-row">
                        <label>Timeout (ms):</label>
                        <input type="number" id="timeoutValue" class="timeout-input" value="5000">
                      </div>
                      <div class="option-row">
                        <label>Quality Threshold:</label>
                        <input type="number" id="qualityThreshold" class="quality-input" value="50">
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Match Section -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-check-circle"></i>
                    <h4>Match</h4>
                  </div>
                  <div class="biometric-card-body">
                    <div class="control-btn-group">
                      <button class="btn-match-iso" id="matchIsoBtn"><i class="bi bi-file-text"></i> Match ISO</button>
                      <button class="btn-match-ansi" id="matchAnsiBtn"><i class="bi bi-file-binary"></i> Match ANSI</button>
                    </div>
                  </div>
                </div>

                <!-- Finger Detection -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-hand-index"></i>
                    <h4>Finger Detection</h4>
                  </div>
                  <div class="biometric-card-body">
                    <div class="control-btn-group">
                      <button class="btn-detect" id="detectFingerBtn"><i class="bi bi-eye"></i> Detect Finger</button>
                      <button class="btn-clear-image" id="clearImageBtn"><i class="bi bi-trash"></i> Clear Image</button>
                    </div>
                    <div class="detect-status" id="detectStatus">
                      <span>No finger detected</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- Right Column - Fingerprint Preview & Data -->
              <div class="biometric-right-panel">
                <!-- Show Preview & Quality -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-image"></i>
                    <h4>Fingerprint Preview</h4>
                  </div>
                  <div class="biometric-card-body preview-body">
                    <div class="preview-actions">
                      <button class="btn-preview" id="showPreviewBtn"><i class="bi bi-eye"></i> Show Preview</button>
                      <button class="btn-quality" id="checkQualityBtn"><i class="bi bi-graph-up"></i> Quality</button>
                    </div>
                    <div class="fingerprint-preview" id="fingerprintPreview">
                      <div class="preview-placeholder">
                        <i class="bi bi-fingerprint"></i>
                        <span>No fingerprint captured</span>
                      </div>
                    </div>
                    <div class="quality-score" id="qualityScore" style="display: none;">
                      <span>Quality Score: <strong id="qualityValue">0</strong>%</span>
                    </div>
                  </div>
                </div>

                <!-- Finger Detail -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-hand-index-thumb"></i>
                    <h4>Finger Detail</h4>
                  </div>
                  <div class="biometric-card-body">
                    <select id="fingerSelect" class="finger-select">
                      <option value="Right Thumb">Right Thumb</option>
                      <option value="Right Index">Right Index</option>
                      <option value="Right Middle">Right Middle</option>
                      <option value="Right Ring">Right Ring</option>
                      <option value="Right Little">Right Little</option>
                      <option value="Left Thumb">Left Thumb</option>
                      <option value="Left Index">Left Index</option>
                      <option value="Left Middle">Left Middle</option>
                      <option value="Left Ring">Left Ring</option>
                      <option value="Left Little">Left Little</option>
                    </select>
                  </div>
                </div>

                <!-- ISO Data -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-file-text"></i>
                    <h4>ISO Data</h4>
                  </div>
                  <div class="biometric-card-body">
                    <textarea id="isoData" class="data-textarea" rows="2" placeholder="ISO fingerprint data will appear here..." readonly></textarea>
                  </div>
                </div>

                <!-- ANSI Data -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-file-binary"></i>
                    <h4>ANSI Data</h4>
                  </div>
                  <div class="biometric-card-body">
                    <textarea id="ansiData" class="data-textarea" rows="2" placeholder="ANSI fingerprint data will appear here..." readonly></textarea>
                  </div>
                </div>

                <!-- User Name & Set Fingerprint -->
                <div class="biometric-card">
                  <div class="biometric-card-header">
                    <i class="bi bi-person"></i>
                    <h4>User Name</h4>
                  </div>
                  <div class="biometric-card-body">
                    <input type="text" id="userName" class="user-name-input" placeholder="Enter User Name">
                    <button class="btn-set-fingerprint" id="setFingerprintBtn"><i class="bi bi-save"></i> Set as User Fingerprint</button>
                  </div>
                </div>
              </div>
            </div>

            <div class="master-form-actions">
              <button class="btn-clear" id="biometricClearBtn"><i class="bi bi-eraser"></i> CLEAR ALL</button>
              <button class="btn-exit" id="biometricExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- Biometric Scanner Form -->

      <!-- User Master Form -->
      <div class="master-form-container" id="userMasterContainer" style="display: none;">
        <div class="master-form-card">
          <div class="master-form-header">
            <div class="header-icon">
              <i class="bi bi-people"></i>
            </div>
            <div class="header-text">
              <h3>USER MASTER</h3>
              <p>User Management - Create, Edit & Manage System Users</p>
            </div>
          </div>
          <div class="master-form-body">
            <!-- User Details Information Section -->
            <div class="user-details-section">
              <div class="section-title">
                <i class="bi bi-info-circle-fill"></i>
                <h4>User Details Information</h4>
              </div>
              <div class="details-form">
                <div class="form-row-three">
                  <div class="form-group">
                    <label><i class="bi bi-person-badge"></i> User ID</label>
                    <input type="text" id="userId" class="form-control" value="HOWRAH">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-lock"></i> Password</label>
                    <input type="password" id="password" class="form-control" value="**********">
                  </div>
                  <div class="form-group">
                    <label><i class="bi bi-tag"></i> User Type</label>
                    <input type="text" id="userType" class="form-control" value="HOWRAH">
                  </div>
                </div>
                
                <!-- Access Options -->
                <div class="access-section">
                  <div class="access-row">
                    <span class="access-label">Update Accounts</span>
                    <div class="access-checkboxes">
                      <label><input type="checkbox" id="allPlanAccess"> All Plan Access</label>
                      <label><input type="checkbox" id="allBranchAccess"> All Branch Access</label>
                      <span class="access-yes">YES</span>
                    </div>
                  </div>
                  <div class="access-row">
                    <span class="access-label">Delete Accounts</span>
                    <div class="access-checkboxes">
                      <label><input type="checkbox" id="rankAuto"> Rank Auto</label>
                      <label><input type="checkbox" id="backDate"> Back Date</label>
                      <label><input type="checkbox" id="rePrint"> Re-Print</label>
                      <label><input type="checkbox" id="allRepBranch"> All Rep Branch</label>
                      <span class="access-yes">YES</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- User Master Table -->
            <div class="user-master-section">
              <div class="section-title">
                <i class="bi bi-table"></i>
                <h4>USER MASTER</h4>
              </div>
              <div class="table-responsive">
                <table class="data-table" id="userMasterTable">
                  <thead>
                    <tr>
                      <th>User ID</th>
                      <th>User Type</th>
                      <th>Login Branch</th>
                      <th>Full Name</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody id="userMasterBody">
                    <tr onclick="selectUser('admin', 'Administrator', 'HEAD OFFICE', '')">
                      <td>admin</td>
                      <td>Administrator</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('admin', 'Administrator', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO MANA.', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO MANA.</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO MANA.', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO YL LO', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO YL LO</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO YL LO', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO BDL MANA.', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO BDL MANA.</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO BDL MANA.', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO NBD LO', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO NBD LO</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO NBD LO', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO EXE', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO EXE</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO EXE', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                    <tr onclick="selectUser('', 'MICRO HO COOR.', 'HEAD OFFICE', '')">
                      <td></td>
                      <td>MICRO HO COOR.</td>
                      <td>HEAD OFFICE</td>
                      <td></td>
                      <td><button class="btn-select-row" onclick="event.stopPropagation(); selectUser('', 'MICRO HO COOR.', 'HEAD OFFICE', '')"><i class="bi bi-check-circle"></i> Select</button></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Two Column Layout for Login Branch & User Type Access -->
            <div class="two-col-grid">
              <!-- Log In Branch Section -->
              <div class="login-branch-section">
                <div class="section-title">
                  <i class="bi bi-box-arrow-in-right"></i>
                  <h4>Log In Branch</h4>
                </div>
                <div class="branch-list">
                  <div class="branch-item">
                    <input type="checkbox" id="branchHowrah"> <label for="branchHowrah">HOWRAH</label>
                  </div>
                </div>
              </div>

              <!-- User Type Access Section -->
              <div class="user-type-access-section">
                <div class="section-title">
                  <i class="bi bi-shield-lock"></i>
                  <h4>User Type Access</h4>
                </div>
                <div class="access-list">
                  <div class="access-item">
                    <input type="checkbox" id="accessHowrah"> <label for="accessHowrah">HOWRAH</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroBdl"> <label for="accessMicroBdl">MICRO BDL MANAGER</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroBrCoord"> <label for="accessMicroBrCoord">MICRO BR COORDINATOR</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroBroHly"> <label for="accessMicroBroHly">MICRO BRO HLY</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroHlyLo"> <label for="accessMicroHlyLo">MICRO HLY LO</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroHoManager"> <label for="accessMicroHoManager">MICRO HO MANAGER</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroHoRecept"> <label for="accessMicroHoRecept">MICRO HO RECEPTION</label>
                  </div>
                  <div class="access-item">
                    <input type="checkbox" id="accessMicroNbdLo"> <label for="accessMicroNbdLo">MICRO NBD LO</label>
                  </div>
                </div>
              </div>
            </div>

            <!-- Mobile No & E-Mail ID Row -->
            <div class="contact-row">
              <div class="form-group half-width">
                <label><i class="bi bi-phone"></i> Mobile No</label>
                <input type="text" id="mobileNo" class="form-control" placeholder="Enter Mobile Number">
              </div>
              <div class="form-group half-width">
                <label><i class="bi bi-envelope"></i> E-Mail ID</label>
                <input type="email" id="emailId" class="form-control" placeholder="Enter Email Address">
              </div>
            </div>

            <!-- Action Buttons -->
            <div class="master-form-actions">
              <button class="btn-save" id="userSaveBtn"><i class="bi bi-save"></i> SAVE</button>
              <button class="btn-trash" id="userDeleteBtn"><i class="bi bi-trash"></i> DELETE</button>
              <button class="btn-clear" id="userClearBtn"><i class="bi bi-eraser"></i> CLEAR</button>
              <button class="btn-exit" id="userExitBtn"><i class="bi bi-box-arrow-right"></i> EXIT</button>
            </div>
          </div>
        </div>
      </div>
      <!-- User Master Form -->

      <!-- Survey Area Form -->
      <div class="area-survey-container">
          <div class="form-header">
              <h1>AREA SURVEY</h1>
              <div class="header-details">
                  <div class="detail-field">
                      <label>Zone Code</label>
                      <input type="text" id="zoneCode" placeholder="Enter Zone Code">
                  </div>
                  <div class="detail-field">
                      <label>Survey Start Date</label>
                      <input type="date" id="surveyDate" value="2024-01-29">
                  </div>
              </div>
          </div>

          <div class="form-grid">
              <div class="form-group">
                  <label>Zone Name</label>
                  <input type="text" id="zoneName" placeholder="Zone Name">
              </div>
              <div class="form-group">
                  <label>Village Name</label>
                  <input type="text" id="villageName" placeholder="Village Name">
              </div>
              <div class="form-group">
                  <label>Branch</label>
                  <input type="text" id="branch" placeholder="Branch">
              </div>
              <div class="form-group">
                  <label>Area Type</label>
                  <input type="text" id="areaType" placeholder="FULAL / RURAL / URBAN" value="FULAL">
              </div>
              <div class="form-group">
                  <label>FO Name</label>
                  <input type="text" id="foName" placeholder="FO Name">
              </div>
              <div class="form-group">
                  <label>FO Code</label>
                  <input type="text" id="foCode" placeholder="FO Code">
              </div>
              <div class="form-group">
                  <label>Pop of Village</label>
                  <input type="number" id="population" placeholder="Population">
              </div>
              <div class="form-group">
                  <label>Political Situation</label>
                  <select id="politicalSituation">
                      <option value="">Select</option>
                      <option value="Stable">Stable</option>
                      <option value="Moderate">Moderate</option>
                      <option value="Unstable">Unstable</option>
                      <option value="Critical">Critical</option>
                  </select>
              </div>
              <div class="form-group">
                  <label>Law Order Situation</label>
                  <select id="lawOrder">
                      <option value="">Select</option>
                      <option value="Good">Good</option>
                      <option value="Satisfactory">Satisfactory</option>
                      <option value="Poor">Poor</option>
                      <option value="Critical">Critical</option>
                  </select>
              </div>
              <div class="form-group">
                  <label>Distance From Branch (km)</label>
                  <input type="number" id="distance" step="0.1" placeholder="Distance in km">
              </div>
              <div class="form-group">
                  <label>No of Centre Possible</label>
                  <input type="number" id="centresPossible" placeholder="Number">
              </div>
              <div class="form-group">
                  <label>No of MFI Working</label>
                  <input type="number" id="mfiWorking" placeholder="Number">
              </div>
              <div class="form-group">
                  <label>Major Operation of People</label>
                  <input type="text" id="majorOperation" placeholder="e.g., Agriculture, Business">
              </div>
              <div class="form-group">
                  <label>Conveyance / Road Status</label>
                  <select id="roadStatus">
                      <option value="">Select</option>
                      <option value="Excellent">Excellent</option>
                      <option value="Good">Good</option>
                      <option value="Average">Average</option>
                      <option value="Poor">Poor</option>
                  </select>
              </div>
          </div>

          <div class="section-title">Caste In Percentage</div>
          <div class="percentage-grid">
              <div class="perc-group"><label>General</label><input type="number" id="casteGeneral" placeholder="%"></div>
              <div class="perc-group"><label>ST</label><input type="number" id="casteST" placeholder="%"></div>
              <div class="perc-group"><label>OBC</label><input type="number" id="casteOBC" placeholder="%"></div>
              <div class="perc-group"><label>Others</label><input type="number" id="casteOthers" placeholder="%"></div>
          </div>

          <div class="section-title">Religion In Percentage</div>
          <div class="percentage-grid">
              <div class="perc-group"><label>Hindu</label><input type="number" id="religionHindu" placeholder="%"></div>
              <div class="perc-group"><label>Muslim</label><input type="number" id="religionMuslim" placeholder="%"></div>
              <div class="perc-group"><label>Sikh</label><input type="number" id="religionSikh" placeholder="%"></div>
              <div class="perc-group"><label>Christian</label><input type="number" id="religionChristian" placeholder="%"></div>
              <div class="perc-group"><label>Others</label><input type="number" id="religionOthers" placeholder="%"></div>
          </div>

          <div class="button-group">
              <button class="btn btn-new" id="newBtn">New</button>
              <button class="btn btn-save" id="saveBtn">Save</button>
              <button class="btn btn-update" id="updateBtn">Update</button>
              <button class="btn btn-delete" id="deleteBtn">Delete</button>
          </div>

          <div id="messageArea" class="message-area"></div>
      </div>
      <!-- Survey Area Form -->

      <!-- Center Master Form -->
      <div class="center-master-container" style="display: none;">
          <div class="cm-form-header">
              <h1>CENTER MASTER</h1>
          </div>

          <div class="cm-section-title">Center Information</div>
          <div class="cm-form-grid">
              <div class="cm-form-group">
                  <label>Opening Date</label>
                  <input type="date" id="cmOpeningDate" value="2026-04-02">
              </div>
              <div class="cm-form-group">
                  <label>Center Code</label>
                  <input type="text" id="cmCenterCode" placeholder="Enter Center Code">
              </div>
              <div class="cm-form-group">
                  <label>Center Name</label>
                  <input type="text" id="cmCenterName" placeholder="Enter Center Name">
              </div>
              <div class="cm-form-group">
                  <label>Under Branch</label>
                  <select id="cmUnderBranch">
                      <option value="">Select Branch</option>
                      <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                      <option value="BRANCH - 002">BRANCH - 002</option>
                      <option value="BRANCH - 003">BRANCH - 003</option>
                  </select>
              </div>
              <div class="cm-form-group">
                  <label>Zone</label>
                  <select id="cmZone">
                      <option value="">Select Zone</option>
                      <option value="TEST ZONE">TEST ZONE</option>
                      <option value="NORTH ZONE">NORTH ZONE</option>
                      <option value="SOUTH ZONE">SOUTH ZONE</option>
                      <option value="EAST ZONE">EAST ZONE</option>
                      <option value="WEST ZONE">WEST ZONE</option>
                  </select>
              </div>
              <div class="cm-form-group">
                  <label>Address</label>
                  <input type="text" id="cmAddress" placeholder="Enter Address">
              </div>
              <div class="cm-form-group">
                  <label>Pin code</label>
                  <input type="text" id="cmPincode" placeholder="Enter Pin code">
              </div>
              <div class="cm-form-group">
                  <label>Phone No</label>
                  <input type="tel" id="cmPhoneNo" placeholder="Enter Phone Number">
              </div>
              <div class="cm-form-group">
                  <label>FO Code</label>
                  <input type="text" id="cmFOCode" placeholder="Enter FO Code">
              </div>
              <div class="cm-form-group">
                  <label>Center Head Name</label>
                  <input type="text" id="cmCenterHeadName" placeholder="Enter Center Head Name">
              </div>
              <div class="cm-form-group">
                  <label>Group Capacity</label>
                  <input type="number" id="cmGroupCapacity" placeholder="Enter Group Capacity">
              </div>
          </div>

          <div class="cm-button-group">
              <button class="cm-btn cm-btn-refresh" id="cmRefreshBtn">Refresh</button>
              <button class="cm-btn cm-btn-save" id="cmSaveBtn">Save</button>
              <button class="cm-btn cm-btn-update" id="cmUpdateBtn">Update</button>
              <button class="cm-btn cm-btn-delete" id="cmDeleteBtn">Delete</button>
              <button class="cm-btn cm-btn-close" id="cmCloseBtn">Close</button>
          </div>

          <div class="cm-table-section">
              <div class="cm-table-header">
                  <h3>Center List</h3>
              </div>
              <div class="cm-table-wrapper">
                  <table class="cm-data-table" id="cmDataTable">
                      <thead>
                          <tr>
                              <th>BCode</th>
                              <th>CenterName</th>
                              <th>PhoneNo</th>
                              <th>CenterHead</th>
                              <th>Capacity</th>
                          </tr>
                      </thead>
                      <tbody id="cmTableBody">
                          <tr>
                              <td>C001</td>
                              <td>CENTER1</td>
                              <td>5455545</td>
                              <td>5454544445</td>
                              <td>5</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>

          <div id="cmMessageArea" class="cm-message-area"></div>
      </div>
      <!-- Center Master Form -->

      <!-- Lead Generation Form -->
      <div class="lead-generation-container" style="display: none;">
          <div class="lg-form-header">
              <h1>LEAD GENERATION</h1>
          </div>

          <!-- Personal Information Section -->
          <div class="lg-section-title">Personal Information</div>
          <div class="lg-form-grid">
              <div class="lg-form-group">
                  <label>Branch Name/Code</label>
                  <select id="lgBranchName">
                      <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                      <option value="BRANCH - 002">BRANCH - 002</option>
                      <option value="BRANCH - 003">BRANCH - 003</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Center</label>
                  <select id="lgCenter">
                      <option value="CENTER1">CENTER1</option>
                      <option value="CENTER2">CENTER2</option>
                      <option value="CENTER3">CENTER3</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Loan Type Applied</label>
                  <select id="lgLoanType">
                      <option value="GROUP LOAN">GROUP LOAN</option>
                      <option value="INDIVIDUAL LOAN">INDIVIDUAL LOAN</option>
                      <option value="EMERGENCY LOAN">EMERGENCY LOAN</option>
                      <option value="EDUCATION LOAN">EDUCATION LOAN</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Proposed Loan Amount (₹)</label>
                  <input type="number" id="lgProposedAmount" placeholder="Enter amount">
              </div>
              <div class="lg-form-group">
                  <label>Field Officer</label>
                  <select id="lgFieldOfficer">
                      <option value="ARITRA DAS - C000">ARITRA DAS - C000</option>
                      <option value="SUMIT ROY - C001">SUMIT ROY - C001</option>
                      <option value="POOJA SHARMA - C002">POOJA SHARMA - C002</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Aadhar No</label>
                  <input type="text" id="lgAadharNo" placeholder="Enter 12-digit Aadhar Number">
              </div>
              <div class="lg-form-group">
                  <label>Voter ID No</label>
                  <input type="text" id="lgVoterId" placeholder="Enter Voter ID Number">
              </div>
              <div class="lg-form-group">
                  <label>Name</label>
                  <input type="text" id="lgName" placeholder="Enter Full Name">
              </div>
              <div class="lg-form-group">
                  <label>Guardian Name</label>
                  <input type="text" id="lgGuardianName" placeholder="Enter Guardian Name" value="CO">
              </div>
              <div class="lg-form-group">
                  <label>Gender</label>
                  <select id="lgGender">
                      <option value="MALE">MALE</option>
                      <option value="FEMALE" selected>FEMALE</option>
                      <option value="OTHER">OTHER</option>
                  </select>
              </div>
              <div class="lg-form-group lg-dob-group">
                  <label>Date of Birth</label>
                  <div class="lg-dob-wrapper">
                      <input type="date" id="lgDob" value="2026-04-02">
                      <span class="lg-age-display" id="lgAgeDisplay">Age: 0 years</span>
                  </div>
              </div>
              <div class="lg-form-group">
                  <label>Nominee Name</label>
                  <input type="text" id="lgNomineeName" placeholder="Enter Nominee Name">
              </div>
              <div class="lg-form-group">
                  <label>Nominee Relation</label>
                  <input type="text" id="lgNomineeRelation" placeholder="Enter Relation with Nominee">
              </div>
              <div class="lg-form-group">
                  <label>Age</label>
                  <input type="text" id="lgAge" placeholder="Auto-calculated age" readonly>
              </div>
              <div class="lg-form-group">
                  <label>Phone No</label>
                  <input type="tel" id="lgPhoneNo" placeholder="Enter 10-digit Mobile Number">
              </div>
              <div class="lg-form-group">
                  <label>Application Date</label>
                  <input type="date" id="lgApplicationDate" value="2026-04-02">
              </div>
              <div class="lg-form-group">
                  <label>Request Form No</label>
                  <input type="text" id="lgRequestFormNo" placeholder="Enter Request Form Number">
              </div>
              <div class="lg-form-group lg-full-width">
                  <label>Residential Address</label>
                  <input type="text" id="lgResidentialAddress" placeholder="Enter Full Residential Address">
              </div>
              <div class="lg-form-group">
                  <label>PIN Code</label>
                  <input type="text" id="lgPincode" placeholder="Enter PIN Code">
              </div>
              <div class="lg-form-group lg-checkbox-group">
                  <label>
                      <input type="checkbox" id="lgSameAsResidential"> Permanent Address Same As Residential
                  </label>
              </div>
              <div class="lg-form-group lg-full-width" id="lgPermanentAddressGroup">
                  <label>Permanent Address</label>
                  <input type="text" id="lgPermanentAddress" placeholder="Enter Permanent Address">
              </div>
          </div>

          <!-- Housing Index Section -->
          <div class="lg-section-title">Housing Index</div>
          <div class="lg-form-grid">
              <div class="lg-form-group">
                  <label>Does Monthly Savings</label>
                  <select id="lgMonthlySavings">
                      <option value="">Select</option>
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Has Active Loans</label>
                  <select id="lgActiveLoans">
                      <option value="">Select</option>
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Borrow Money Frequently</label>
                  <select id="lgBorrowFrequently">
                      <option value="">Select</option>
                      <option value="Yes">Yes</option>
                      <option value="No">No</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Living Type</label>
                  <select id="lgLivingType">
                      <option value="">Select</option>
                      <option value="Own House">Own House</option>
                      <option value="Rented">Rented</option>
                      <option value="Parental">Parental</option>
                      <option value="Shared">Shared</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>No of Members in Home</label>
                  <input type="number" id="lgFamilyMembers" placeholder="Number of family members">
              </div>
              <div class="lg-form-group">
                  <label>Monthly Income (₹)</label>
                  <input type="number" id="lgMonthlyIncome" placeholder="Monthly income amount">
              </div>
              <div class="lg-form-group">
                  <label>Religion</label>
                  <select id="lgReligion">
                      <option value="">Select</option>
                      <option value="Hindu">Hindu</option>
                      <option value="Muslim">Muslim</option>
                      <option value="Sikh">Sikh</option>
                      <option value="Christian">Christian</option>
                      <option value="Other">Other</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Marital Status</label>
                  <select id="lgMaritalStatus">
                      <option value="">Select</option>
                      <option value="Married">Married</option>
                      <option value="Unmarried">Unmarried</option>
                      <option value="Divorced">Divorced</option>
                      <option value="Widowed">Widowed</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>House Stability</label>
                  <select id="lgHouseStability">
                      <option value="">Select</option>
                      <option value="Stable">Stable</option>
                      <option value="Moderate">Moderate</option>
                      <option value="Temporary">Temporary</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Bank Name</label>
                  <input type="text" id="lgBankName" placeholder="Enter Bank Name">
              </div>
              <div class="lg-form-group">
                  <label>Branch Name</label>
                  <input type="text" id="lgBankBranch" placeholder="Enter Bank Branch Name">
              </div>
              <div class="lg-form-group">
                  <label>Account No</label>
                  <input type="text" id="lgAccountNo" placeholder="Enter Bank Account Number">
              </div>
              <div class="lg-form-group">
                  <label>IFSC Code</label>
                  <input type="text" id="lgIfscCode" placeholder="Enter IFSC Code">
              </div>
              <div class="lg-form-group lg-full-width">
                  <label>Loan Purpose</label>
                  <textarea id="lgLoanPurpose" rows="2" placeholder="Describe the purpose of loan"></textarea>
              </div>
          </div>

          <!-- KYC Details Section -->
          <div class="lg-section-title">KYC Details</div>
          <div class="lg-form-grid">
              <div class="lg-form-group">
                  <label>Address Proof</label>
                  <select id="lgAddressProof">
                      <option value="NoID">No ID</option>
                      <option value="Aadhar Card">Aadhar Card</option>
                      <option value="Voter ID">Voter ID</option>
                      <option value="Passport">Passport</option>
                      <option value="Driving License">Driving License</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Address Proof Number</label>
                  <input type="text" id="lgAddressProofNumber" placeholder="Enter Address Proof Number">
              </div>
              <div class="lg-form-group">
                  <label>ID Proof</label>
                  <select id="lgIdProof">
                      <option value="NoID">No ID</option>
                      <option value="Aadhar Card">Aadhar Card</option>
                      <option value="Voter ID">Voter ID</option>
                      <option value="PAN Card">PAN Card</option>
                      <option value="Passport">Passport</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>ID Proof Number</label>
                  <input type="text" id="lgIdProofNumber" placeholder="Enter ID Proof Number">
              </div>
          </div>

          <!-- Address Proof Document Section -->
          <div class="lg-subsection-title">Address Proof Document</div>
          <div class="lg-document-grid">
              <div class="lg-doc-group">
                  <label>Address Proof Document</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgAddressProofDoc" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgAddressProofDoc').click()">Browse</button>
                  </div>
              </div>
          </div>

          <!-- ID Proof Document Section -->
          <div class="lg-subsection-title">ID Proof Document</div>
          <div class="lg-document-grid">
              <div class="lg-doc-group">
                  <label>ID Proof Document</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgIdProofDoc" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgIdProofDoc').click()">Browse</button>
                  </div>
              </div>
              <div class="lg-doc-group">
                  <label>Passbook Front Page</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgPassbookFront" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgPassbookFront').click()">Browse</button>
                  </div>
              </div>
              <div class="lg-doc-group">
                  <label>Passport Photo</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgPassportPhoto" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgPassportPhoto').click()">Browse</button>
                  </div>
              </div>
          </div>

          <!-- Joint Photo Section -->
          <div class="lg-subsection-title">Joint Photo</div>
          <div class="lg-document-grid">
              <div class="lg-doc-group">
                  <label>Joint Photo</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgJointPhoto" accept="image/*">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgJointPhoto').click()">Browse</button>
                  </div>
              </div>
          </div>

          <!-- Nominee KYC Details Section -->
          <div class="lg-section-title">Nominee KYC Details</div>
          <div class="lg-form-grid">
              <div class="lg-form-group">
                  <label>ID Proof</label>
                  <select id="lgNomineeIdProof">
                      <option value="No/ID">No ID</option>
                      <option value="Aadhar Card">Aadhar Card</option>
                      <option value="Voter ID">Voter ID</option>
                      <option value="PAN Card">PAN Card</option>
                  </select>
              </div>
              <div class="lg-form-group">
                  <label>Nominee ID Proof Number</label>
                  <input type="text" id="lgNomineeIdProofNumber" placeholder="Enter Nominee ID Proof Number">
              </div>
              <div class="lg-form-group">
                  <label>Aadhar No.</label>
                  <input type="text" id="lgNomineeAadhar" placeholder="Enter Nominee Aadhar Number">
              </div>
          </div>

          <!-- Nominee Documents -->
          <div class="lg-document-grid">
              <div class="lg-doc-group">
                  <label>Nominee ID Proof Document</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgNomineeIdDoc" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgNomineeIdDoc').click()">Browse</button>
                  </div>
              </div>
              <div class="lg-doc-group">
                  <label>Nominee Aadhar Document</label>
                  <div class="lg-file-input-group">
                      <input type="file" id="lgNomineeAadharDoc" accept="image/*,application/pdf">
                      <button type="button" class="lg-browse-btn" onclick="document.getElementById('lgNomineeAadharDoc').click()">Browse</button>
                  </div>
              </div>
          </div>

          <!-- Action Buttons -->
          <div class="lg-button-group">
              <button class="lg-btn lg-btn-refresh" id="lgRefreshBtn">Refresh</button>
              <button class="lg-btn lg-btn-save" id="lgSaveBtn">Save</button>
              <button class="lg-btn lg-btn-update" id="lgUpdateBtn">Update</button>
              <button class="lg-btn lg-btn-delete" id="lgDeleteBtn">Delete</button>
              <button class="lg-btn lg-btn-close" id="lgCloseBtn">Close</button>
          </div>

          <div id="lgMessageArea" class="lg-message-area"></div>
      </div>
      <!-- Lead Generation Form -->

      <!-- CGT Setup Form -->
      <!-- CGT MAIN CONTAINER -->
      <div class="cgt-main-container" style="display: none;">
          
          <!-- ========== VIEW 1: CGT LIST VIEW ========== -->
          <div id="cgtListView" class="cgt-list-view">
              <div class="cgt-header">
                  <h1>CGT MANAGEMENT</h1>
              </div>

              <!-- Search Section -->
              <div class="cgt-search-section">
                  <div class="cgt-search-wrapper">
                      <input type="text" id="cgtSearchInput" placeholder="Search CGT by CGT Code or Center Code or FO Code" class="cgt-search-input">
                      <button class="cgt-search-btn" id="cgtSearchBtn">Search</button>
                  </div>
                  <div class="cgt-filter-group">
                      <label>
                          <input type="checkbox" id="cgtShowAll"> All
                      </label>
                  </div>
                  <button class="cgt-add-new-btn" id="cgtAddNewBtn">+ Add New CGT</button>
              </div>

              <!-- CGT List Table -->
              <div class="cgt-table-section">
                  <div class="cgt-table-wrapper">
                      <table class="cgt-data-table" id="cgtListTable">
                          <thead>
                              <tr>
                                  <th>CGT Code</th>
                                  <th>CGT Start Date</th>
                                  <th>Center</th>
                                  <th>FO Code</th>
                                  <th>CGT Duration</th>
                                  <th>Status</th>
                                  <th>Edit</th>
                                  <th>Entry</th>
                              </tr>
                          </thead>
                          <tbody id="cgtListBody">
                              <!-- Dynamic CGT list will appear here -->
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>

          <!-- ========== VIEW 2: CGT SETUP FORM VIEW ========== -->
          <div id="cgtFormView" class="cgt-form-view" style="display: none;">
              <div class="cgt-form-header-section">
                  <button class="cgt-back-btn" id="cgtBackBtn">← Back to List</button>
                  <h1>CGT SETUP</h1>
              </div>

              <!-- CGT Setup Form -->
              <div class="cgt-form-section">
                  <div class="cgt-form-grid">
                      <div class="cgt-form-group">
                          <label>Select Branch</label>
                          <select id="cgtBranch">
                              <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                              <option value="BRANCH - 002">BRANCH - 002</option>
                              <option value="BRANCH - 003">BRANCH - 003</option>
                          </select>
                      </div>
                      <div class="cgt-form-group">
                          <label>Select Center</label>
                          <select id="cgtCenter" onchange="loadLeadsForCenter()">
                              <option value="CENTER1">CENTER1</option>
                              <option value="CENTER2">CENTER2</option>
                              <option value="CENTER3">CENTER3</option>
                          </select>
                      </div>
                      <div class="cgt-form-group">
                          <label>Field Officer</label>
                          <input type="text" id="cgtFieldOfficer" placeholder="Description">
                      </div>
                      <div class="cgt-form-group">
                          <label>CGT Start Date</label>
                          <input type="date" id="cgtStartDate">
                      </div>
                      <div class="cgt-form-group">
                          <label>No of Days for CGT</label>
                          <input type="number" id="cgtDuration" placeholder="Enter number of days">
                      </div>
                      <div class="cgt-form-group cgt-full-width">
                          <label>Description</label>
                          <textarea id="cgtDescription" rows="3" placeholder="Enter CGT description / remarks"></textarea>
                      </div>
                  </div>

                  <!-- Action Buttons -->
                  <div class="cgt-button-group">
                      <button class="cgt-btn cgt-btn-refresh" id="cgtRefreshBtn">Refresh</button>
                      <button class="cgt-btn cgt-btn-save" id="cgtSaveBtn">Save</button>
                      <button class="cgt-btn cgt-btn-exit" id="cgtExitBtn">Exit</button>
                  </div>
              </div>

              <!-- Leads Selection Section -->
              <div class="cgt-leads-section">
                  <div class="cgt-section-title">Select Leads that you want to add in this CGT by checking the Check Box adjacent to the Lead</div>
                  
                  <div class="cgt-leads-table-wrapper">
                      <table class="cgt-leads-table" id="cgtLeadsTable">
                          <thead>
                              <tr>
                                  <th>Select</th>
                                  <th>Lead Code</th>
                                  <th>Lead Name</th>
                                  <th>Phone No</th>
                                  <th>Aadhar No</th>
                                  <th>Loan Type Applied</th>
                                  <th>Applied On</th>
                                  <th>Add Lead</th>
                              </tr>
                          </thead>
                          <tbody id="cgtLeadsBody">
                              <!-- Dynamic leads will appear here -->
                          </tbody>
                      </table>
                  </div>
              </div>

              <!-- Selected Leads Section -->
              <div class="cgt-selected-leads-section">
                  <div class="cgt-section-title">Selected Leads for CGT</div>
                  <div class="cgt-selected-table-wrapper">
                      <table class="cgt-selected-table" id="cgtSelectedTable">
                          <thead>
                              <tr>
                                  <th>Lead Code</th>
                                  <th>Lead Name</th>
                                  <th>Phone No</th>
                                  <th>Aadhar No</th>
                                  <th>Status</th>
                                  <th>Remove</th>
                              </tr>
                          </thead>
                          <tbody id="cgtSelectedBody">
                              <!-- Selected leads will appear here -->
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>

          <div id="cgtMessageArea" class="cgt-message-area"></div>
      </div>
      <!-- CGT Setup Form -->

      <!-- GRT MAIN CONTAINER -->
      <div class="grt-main-container" style="display: none;">
          
          <!-- ========== VIEW 1: GRT LIST VIEW ========== -->
          <div id="grtListView" class="grt-list-view">
              <div class="grt-header">
                  <h1>GRT MANAGEMENT</h1>
              </div>

              <!-- Search Section -->
              <div class="grt-search-section">
                  <div class="grt-search-wrapper">
                      <input type="text" id="grtSearchInput" placeholder="Search GRT by GRT Code or Center Code or FO Code" class="grt-search-input">
                      <button class="grt-search-btn" id="grtSearchBtn">Search</button>
                  </div>
                  <div class="grt-filter-group">
                      <label>
                          <input type="checkbox" id="grtShowAll"> All
                      </label>
                  </div>
                  <button class="grt-close-search-btn" id="grtCloseSearchBtn">Close</button>
                  <button class="grt-add-new-btn" id="grtAddNewBtn">+ Add New GRT</button>
              </div>

              <!-- GRT Cards View (Grid Layout) -->
              <div class="grt-cards-container" id="grtCardsContainer">
                  <!-- Dynamic GRT cards will appear here -->
              </div>
          </div>

          <!-- ========== VIEW 2: GRT SETUP FORM VIEW ========== -->
          <div id="grtFormView" class="grt-form-view" style="display: none;">
              <div class="grt-form-header-section">
                  <button class="grt-back-btn" id="grtBackBtn">← Back to List</button>
                  <h1>GRT SETUP</h1>
              </div>

              <!-- GRT Setup Form -->
              <div class="grt-form-section">
                  <div class="grt-form-grid">
                      <div class="grt-form-group">
                          <label>Select Branch</label>
                          <select id="grtBranch">
                              <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                              <option value="BRANCH - 002">BRANCH - 002</option>
                              <option value="BRANCH - 003">BRANCH - 003</option>
                          </select>
                      </div>
                      <div class="grt-form-group">
                          <label>Select Center</label>
                          <select id="grtCenter" onchange="loadLeadsForGRTCenter()">
                              <option value="CENTER1">CENTER1</option>
                              <option value="CENTER2">CENTER2</option>
                              <option value="CENTER3">CENTER3</option>
                          </select>
                      </div>
                      <div class="grt-form-group">
                          <label>Field Officer</label>
                          <input type="text" id="grtFieldOfficer" placeholder="Description">
                      </div>
                      <div class="grt-form-group">
                          <label>GRT Start Date</label>
                          <input type="date" id="grtStartDate">
                      </div>
                      <div class="grt-form-group">
                          <label>No of Days for GRT</label>
                          <input type="number" id="grtDuration" placeholder="Enter number of days">
                      </div>
                      <div class="grt-form-group grt-full-width">
                          <label>Description</label>
                          <textarea id="grtDescription" rows="3" placeholder="Enter GRT description / remarks"></textarea>
                      </div>
                  </div>

                  <!-- Action Buttons -->
                  <div class="grt-button-group">
                      <button class="grt-btn grt-btn-refresh" id="grtRefreshBtn">Refresh</button>
                      <button class="grt-btn grt-btn-save" id="grtSaveBtn">Save</button>
                      <button class="grt-btn grt-btn-close" id="grtCloseBtn">Close</button>
                  </div>
              </div>

              <!-- Leads Selection Section -->
              <div class="grt-leads-section">
                  <div class="grt-section-title">Select Leads that you want to add in this GRT by Checking the Check Box adjacent to the Lead</div>
                  
                  <div class="grt-leads-table-wrapper">
                      <table class="grt-leads-table" id="grtLeadsTable">
                          <thead>
                              <tr>
                                  <th>Select</th>
                                  <th>Lead Code</th>
                                  <th>Lead Name</th>
                                  <th>Phone No</th>
                                  <th>Aadhar No</th>
                                  <th>Loan Type Applied</th>
                                  <th>Applied On</th>
                                  <th>Add Lead</th>
                              </tr>
                          </thead>
                          <tbody id="grtLeadsBody">
                              <!-- Dynamic leads will appear here -->
                          </tbody>
                      </table>
                  </div>
              </div>

              <!-- Selected Leads Section -->
              <div class="grt-selected-leads-section">
                  <div class="grt-section-title">Selected Leads for GRT</div>
                  <div class="grt-selected-table-wrapper">
                      <table class="grt-selected-table" id="grtSelectedTable">
                          <thead>
                              <tr>
                                  <th>Lead Code</th>
                                  <th>Lead Name</th>
                                  <th>Phone No</th>
                                  <th>Aadhar No</th>
                                  <th>Status</th>
                                  <th>Remove</th>
                              </tr>
                          </thead>
                          <tbody id="grtSelectedBody">
                              <!-- Selected leads will appear here -->
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>

          <div id="grtMessageArea" class="grt-message-area"></div>
      </div>
      <!-- GRT MAIN CONTAINER -->

      <!-- Group Master Container -->
      <div id="groupMasterContainer" style="display:none;">
        <div class="group-master-wrapper">
            <div class="gm-card">
                <div class="gm-card-header">
                    <h2><i class="fas fa-users"></i> Group Master</h2>
                    <span class="gm-badge">Loan Preparation</span>
                </div>
                
                <div class="gm-form-section">
                    <div class="gm-row">
                        <div class="gm-field">
                            <label>Group Code</label>
                            <input type="text" id="groupCode" placeholder="Auto / Manual">
                        </div>
                        <div class="gm-field">
                            <label>Opening Date</label>
                            <input type="date" id="openingDate" value="2026-04-08">
                        </div>
                        <div class="gm-field">
                            <label>Group Branch</label>
                            <select id="branch">
                                <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                <option value="BRANCH - 002">BRANCH - 002</option>
                                <option value="BRANCH - 003">BRANCH - 003</option>
                            </select>
                        </div>
                        <div class="gm-field">
                            <label>ID No.</label>
                            <input type="text" id="idNo" placeholder="ID No.">
                        </div>
                    </div>
                    
                    <div class="gm-row">
                        <div class="gm-field">
                            <label>Center</label>
                            <select id="center">
                                <option value="CENTER1-001">CENTER1-001</option>
                                <option value="CENTER1-002">CENTER1-002</option>
                                <option value="CENTER2-001">CENTER2-001</option>
                            </select>
                        </div>
                        <div class="gm-field">
                            <label>FO Code</label>
                            <input type="text" id="foCode" placeholder="FO Code">
                        </div>
                        <div class="gm-field">
                            <label>Group Name</label>
                            <input type="text" id="groupName" placeholder="Enter group name">
                        </div>
                        <div class="gm-field">
                            <label>Group Head</label>
                            <input type="text" id="groupHead" placeholder="Group head name">
                        </div>
                    </div>
                    
                    <div class="gm-row">
                        <div class="gm-field">
                            <label>Phone No.</label>
                            <input type="tel" id="phoneNo" placeholder="Phone number">
                        </div>
                        <div class="gm-field">
                            <label>Address</label>
                            <input type="text" id="address" placeholder="Full address">
                        </div>
                        <div class="gm-field checkbox-field">
                            <label class="checkbox-label">
                                <input type="checkbox" id="includeLead"> Include Lead
                            </label>
                        </div>
                    </div>
                </div>
                
                <!-- Lead section (togglable) -->
                <div class="gm-lead-section" id="leadSection" style="display: none;">
                    <div class="gm-section-title">Lead Details</div>
                    <div class="gm-row">
                        <div class="gm-field">
                            <label>Lead Code</label>
                            <input type="text" id="leadCode" placeholder="Lead code">
                        </div>
                        <div class="gm-field">
                            <label>Name</label>
                            <input type="text" id="leadName" placeholder="Lead name">
                        </div>
                        <div class="gm-field" style="justify-content: flex-end;">
                            <button type="button" class="gm-btn-secondary" id="addToQueueBtn"><i class="fas fa-plus-circle"></i> Add to Queue >></button>
                        </div>
                    </div>
                </div>
                
                <!-- Member queue table -->
                <div class="gm-queue-section">
                    <div class="gm-section-title">Member Queue</div>
                    <div class="gm-table-wrapper">
                        <table class="gm-table" id="memberQueueTable">
                            <thead>
                                <tr><th>Member Code</th><th>Lead Code</th><th>Member Name</th><th style="width:50px">Action</th></tr>
                            </thead>
                            <tbody id="queueBody">
                                <tr><td colspan="4" class="empty-row">No members added yet</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Search group by name -->
                <div class="gm-search-section">
                    <div class="gm-field search-field">
                        <label>Search Group By Name:</label>
                        <div class="search-input-group">
                            <input type="text" id="searchGroupName" placeholder="Type group name...">
                            <button type="button" id="searchGroupBtn" class="gm-btn-search"><i class="fas fa-search"></i> Search</button>
                        </div>
                    </div>
                    <div id="searchResults" class="search-results"></div>
                </div>
                
                <!-- Existing groups table -->
                <div class="gm-existing-section">
                    <div class="gm-section-title">Existing Groups</div>
                    <div class="gm-table-wrapper">
                        <table class="gm-table" id="groupsListTable">
                            <thead>
                                <tr><th>GroupCode</th><th>GroupName</th><th>DateOfJoin</th><th>Collector</th><th>Branch</th><th>Center</th></tr>
                            </thead>
                            <tbody id="groupsListBody">
                                <tr><td colspan="6" class="empty-row">No groups found</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <!-- Action buttons -->
                <div class="gm-actions">
                    <button type="button" class="gm-btn-primary" id="confirmCreateBtn"><i class="fas fa-check-circle"></i> Confirm And Create</button>
                    <button type="button" class="gm-btn-warning" id="updateGroupBtn"><i class="fas fa-sync-alt"></i> Update Group</button>
                    <button type="button" class="gm-btn-danger" id="deleteGroupBtn"><i class="fas fa-trash-alt"></i> Delete Group</button>
                </div>
            </div>
        </div>
      </div>
      <!-- Group Master Container -->

      <!-- New Member Container -->
      <div id="memberEntryContainer" style="display: none;">
          <div class="member-entry-wrapper">
              <div class="member-card">
                  <div class="member-card-header">
                      <h2><i class="bi bi-person-plus-fill"></i> MEMBER ENTRY MODULE</h2>
                      <div class="member-action-buttons">
                          <button class="member-action-btn print-btn" onclick="printMoneyReceipt()"><i class="bi bi-printer"></i> Print Money Receipt</button>
                          <button class="member-action-btn new-btn" onclick="resetMemberForm()"><i class="bi bi-file-plus"></i> New</button>
                          <button class="member-action-btn post-btn" onclick="postMemberData()"><i class="bi bi-send"></i> POST</button>
                          <button class="member-action-btn print-btn" onclick="printMemberDetails()"><i class="bi bi-printer"></i> Print</button>
                          <button class="member-action-btn exit-btn" onclick="exitMemberModule()"><i class="bi bi-box-arrow-right"></i> Exit</button>
                          <button class="member-action-btn delete-btn" onclick="deleteMember()"><i class="bi bi-trash"></i> Delete</button>
                      </div>
                  </div>
                  
                  <div class="member-form-container">
                      <!-- Left Column -->
                      <div class="member-left-column">
                          <!-- Enter Code Section -->
                          <div class="member-section">
                              <div class="member-section-title">Enter Code</div>
                              <div class="member-field-group">
                                  <label>MEMBERSHIP CODE</label>
                                  <input type="text" id="membershipCode" placeholder="Enter membership code">
                              </div>
                          </div>
                          
                          <!-- INFORMATION Section -->
                          <div class="member-section">
                              <div class="member-section-title">INFORMATION</div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Date of Joining</label>
                                      <input type="date" id="dateOfJoining" value="2026-04-03">
                                  </div>
                                  <div class="member-field">
                                      <label>Secondary Member Code</label>
                                      <input type="text" id="secondaryMemberCode" placeholder="Secondary code">
                                  </div>
                              </div>
                              <div class="member-field full-width">
                                  <label>Member Name</label>
                                  <input type="text" id="memberName" placeholder="Enter member name">
                              </div>
                              <div class="member-field full-width">
                                  <label>Father/Husband Name</label>
                                  <input type="text" id="fatherHusbandName" placeholder="Father or Husband name">
                              </div>
                              <div class="member-field full-width">
                                  <label>Address</label>
                                  <textarea id="address" rows="2" placeholder="Enter full address"></textarea>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>PIN Code</label>
                                      <input type="text" id="pinCode" placeholder="PIN code">
                                  </div>
                                  <div class="member-field">
                                      <label>Email Address</label>
                                      <input type="email" id="email" placeholder="Email address">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Date of Birth</label>
                                      <input type="date" id="dob" value="2026-04-02" onchange="calculateAge()">
                                  </div>
                                  <div class="member-field">
                                      <label>Age</label>
                                      <input type="text" id="age" readonly placeholder="Auto calculated">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Nominee Name</label>
                                      <input type="text" id="nomineeName" placeholder="Nominee name">
                                  </div>
                                  <div class="member-field">
                                      <label>Nominee Relation</label>
                                      <input type="text" id="nomineeRelation" placeholder="Relation">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Blood Group</label>
                                      <select id="bloodGroup">
                                          <option value="">Select</option>
                                          <option>A+</option><option>A-</option>
                                          <option>B+</option><option>B-</option>
                                          <option>O+</option><option>O-</option>
                                          <option>AB+</option><option>AB-</option>
                                      </select>
                                  </div>
                                  <div class="member-field">
                                      <label>Phone No</label>
                                      <input type="tel" id="phoneNo" placeholder="Phone number">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>EDUCATION</label>
                                      <input type="text" id="education" placeholder="Education qualification">
                                  </div>
                                  <div class="member-field">
                                      <label>Occupation</label>
                                      <input type="text" id="occupation" placeholder="Occupation">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Branch Name/Code</label>
                                      <input type="text" id="branchNameCode" placeholder="Branch name or code">
                                  </div>
                                  <div class="member-field">
                                      <label>MemberShip Fees</label>
                                      <input type="number" id="membershipFees" placeholder="Membership fees amount">
                                  </div>
                              </div>
                              <div class="member-field full-width">
                                  <label>Remarks</label>
                                  <textarea id="remarks" rows="2" placeholder="Any remarks"></textarea>
                              </div>
                          </div>
                          
                          <!-- Bank Details -->
                          <div class="member-section">
                              <div class="member-section-title">Bank Details</div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>A/C No</label>
                                      <input type="text" id="accountNo" placeholder="Account number">
                                  </div>
                                  <div class="member-field">
                                      <label>Bank Name</label>
                                      <input type="text" id="bankName" placeholder="Bank name">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>IFSC</label>
                                      <input type="text" id="ifscCode" placeholder="IFSC code">
                                  </div>
                                  <div class="member-field">
                                      <label>Branch</label>
                                      <input type="text" id="bankBranch" placeholder="Bank branch">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- ID Details -->
                          <div class="member-section">
                              <div class="member-section-title">ID Details</div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>PAN No</label>
                                      <input type="text" id="panNo" placeholder="PAN number">
                                  </div>
                                  <div class="member-field">
                                      <label>Passport No</label>
                                      <input type="text" id="passportNo" placeholder="Passport number">
                                  </div>
                              </div>
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>RationCard No</label>
                                      <input type="text" id="rationCardNo" placeholder="Ration card number">
                                  </div>
                                  <div class="member-field">
                                      <label>Aadhar No.</label>
                                      <input type="text" id="aadharNo" placeholder="Aadhar number">
                                  </div>
                              </div>
                          </div>
                      </div>
                      
                      <!-- Right Column -->
                      <div class="member-right-column">
                          <!-- Upload Images -->
                          <div class="member-section">
                              <div class="member-section-title">Upload Images</div>
                              <div class="upload-row">
                                  <div class="upload-box">
                                      <label>Applicant</label>
                                      <div class="file-input-wrapper">
                                          <input type="file" id="applicantImage" accept="image/*">
                                          <span class="file-name">Browse</span>
                                      </div>
                                  </div>
                                  <div class="upload-box">
                                      <label>Signature</label>
                                      <div class="file-input-wrapper">
                                          <input type="file" id="signatureImage" accept="image/*">
                                          <span class="file-name">Browse</span>
                                      </div>
                                  </div>
                                  <div class="upload-box">
                                      <label>Fingureprint</label>
                                      <button class="capture-btn" onclick="captureFingerprint()"><i class="bi bi-fingerprint"></i> Capture</button>
                                  </div>
                              </div>
                          </div>
                          
                          <!-- KYC Submitted Document -->
                          <div class="member-section">
                              <div class="member-section-title">KYC Submitted Document</div>
                              <div class="kyc-row">
                                  <div class="kyc-field">
                                      <label>Id Proof Doc.</label>
                                      <input type="text" id="idProofDoc" placeholder="Document name">
                                  </div>
                                  <div class="kyc-field">
                                      <label>Id Proof Doc No.</label>
                                      <input type="text" id="idProofDocNo" placeholder="Document number">
                                  </div>
                              </div>
                              <div class="kyc-row">
                                  <div class="kyc-field">
                                      <label>Addr. Proof Doc.</label>
                                      <input type="text" id="addrProofDoc" placeholder="Address proof document">
                                  </div>
                                  <div class="kyc-field">
                                      <label>Addr. Proof Doc No.</label>
                                      <input type="text" id="addrProofDocNo" placeholder="Document number">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- Nominee Document -->
                          <div class="member-section">
                              <div class="member-section-title">Nominee Document</div>
                              <div class="file-input-wrapper full-width">
                                  <input type="file" id="nomineeDocument" accept=".pdf,.jpg,.png">
                                  <span class="file-name">Browse</span>
                              </div>
                          </div>
                          
                          <!-- Company Code & Document Links -->
                          <div class="member-section">
                              <div class="member-row">
                                  <div class="member-field">
                                      <label>Company Code</label>
                                      <input type="text" id="companyCode" placeholder="Company code">
                                  </div>
                              </div>
                              <div class="doc-links">
                                  <a href="#" onclick="uploadDocument('ID Proof')">ID Proof <i class="bi bi-x-circle"></i></a>
                                  <a href="#" onclick="uploadDocument('Prof. DOC')">Prof. DOC <i class="bi bi-x-circle"></i></a>
                                  <a href="#" onclick="uploadDocument('Addr. Proof')">Addr. Proof <i class="bi bi-x-circle"></i></a>
                                  <a href="#" onclick="uploadDocument('Bank Doc')">Bank Doc <i class="bi bi-x-circle"></i></a>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- New Member Container -->

      <!-- Document Verification Container -->
      <div id="docApprovalContainer" style="display: none;">
          <div class="doc-approval-wrapper">
              <div class="doc-approval-card">
                  <!-- Header -->
                  <div class="doc-approval-header">
                      <h2><i class="bi bi-check2-square"></i> Document Approval</h2>
                  </div>
                  
                  <!-- Search Section -->
                  <div class="doc-search-section">
                      <div class="doc-search-title">Search</div>
                      <div class="doc-search-row">
                          <div class="doc-search-field">
                              <label>Enter Member Code</label>
                              <input type="text" id="memberCode" placeholder="Enter Member Code" value="101">
                              <button class="doc-search-btn" onclick="searchMember()"><i class="bi bi-search"></i> Search</button>
                          </div>
                          <div class="doc-search-field">
                              <label>Member Name</label>
                              <input type="text" id="memberName" placeholder="Member Name" readonly>
                          </div>
                      </div>
                      <div class="doc-note">
                          <i class="bi bi-info-circle"></i> Click on each DOC for zooming.
                      </div>
                  </div>
                  
                  <!-- Document Grid -->
                  <div class="doc-grid">
                      <!-- ID Proof -->
                      <div class="doc-card" onclick="zoomDocument('ID Proof', 'idProofImage')">
                          <div class="doc-card-title">ID Proof</div>
                          <div class="doc-image-placeholder" id="idProofContainer">
                              <img id="idProofImage" src="" alt="ID Proof" style="display: none;">
                              <div class="placeholder-text" id="idProofPlaceholder">
                                  <i class="bi bi-file-earmark-text"></i>
                                  <span>No Document</span>
                              </div>
                          </div>
                          <div class="doc-status" id="idProofStatus">Pending</div>
                      </div>
                      
                      <!-- Address proof -->
                      <div class="doc-card" onclick="zoomDocument('Address Proof', 'addressProofImage')">
                          <div class="doc-card-title">Address proof</div>
                          <div class="doc-image-placeholder" id="addressProofContainer">
                              <img id="addressProofImage" src="" alt="Address Proof" style="display: none;">
                              <div class="placeholder-text" id="addressProofPlaceholder">
                                  <i class="bi bi-file-earmark-text"></i>
                                  <span>No Document</span>
                              </div>
                          </div>
                          <div class="doc-status" id="addressProofStatus">Pending</div>
                      </div>
                      
                      <!-- Photo -->
                      <div class="doc-card" onclick="zoomDocument('Photo', 'photoImage')">
                          <div class="doc-card-title">Photo</div>
                          <div class="doc-image-placeholder" id="photoContainer">
                              <img id="photoImage" src="" alt="Photo" style="display: none;">
                              <div class="placeholder-text" id="photoPlaceholder">
                                  <i class="bi bi-person-circle"></i>
                                  <span>No Photo</span>
                              </div>
                          </div>
                          <div class="doc-status" id="photoStatus">Pending</div>
                      </div>
                      
                      <!-- Signature -->
                      <div class="doc-card" onclick="zoomDocument('Signature', 'signatureImage')">
                          <div class="doc-card-title">Signature</div>
                          <div class="doc-image-placeholder" id="signatureContainer">
                              <img id="signatureImage" src="" alt="Signature" style="display: none;">
                              <div class="placeholder-text" id="signaturePlaceholder">
                                  <i class="bi bi-pen"></i>
                                  <span>No Signature</span>
                              </div>
                          </div>
                          <div class="doc-status" id="signatureStatus">Pending</div>
                      </div>
                      
                      <!-- Prof. DOC -->
                      <div class="doc-card" onclick="zoomDocument('Prof. DOC', 'profDocImage')">
                          <div class="doc-card-title">Prof. DOC</div>
                          <div class="doc-image-placeholder" id="profDocContainer">
                              <img id="profDocImage" src="" alt="Prof. DOC" style="display: none;">
                              <div class="placeholder-text" id="profDocPlaceholder">
                                  <i class="bi bi-file-earmark-text"></i>
                                  <span>No Document</span>
                              </div>
                          </div>
                          <div class="doc-status" id="profDocStatus">Pending</div>
                      </div>
                      
                      <!-- Bank Doc -->
                      <div class="doc-card" onclick="zoomDocument('Bank Doc', 'bankDocImage')">
                          <div class="doc-card-title">Bank Doc</div>
                          <div class="doc-image-placeholder" id="bankDocContainer">
                              <img id="bankDocImage" src="" alt="Bank Doc" style="display: none;">
                              <div class="placeholder-text" id="bankDocPlaceholder">
                                  <i class="bi bi-bank"></i>
                                  <span>No Document</span>
                              </div>
                          </div>
                          <div class="doc-status" id="bankDocStatus">Pending</div>
                      </div>
                  </div>
                  
                  <!-- Action Buttons -->
                  <div class="doc-action-buttons">
                      <button class="doc-approve-btn" onclick="approveDocuments()"><i class="bi bi-check-lg"></i> Approve</button>
                      <button class="doc-reject-btn" onclick="rejectDocuments()"><i class="bi bi-x-lg"></i> Reject</button>
                  </div>
              </div>
          </div>
      </div>

      <!-- Zoom Modal for Document Preview -->
      <div id="zoomModal" class="zoom-modal">
          <div class="zoom-modal-content">
              <span class="zoom-close" onclick="closeZoomModal()">&times;</span>
              <h3 id="zoomTitle">Document Preview</h3>
              <img id="zoomImage" src="" alt="Document">
              <div class="zoom-actions">
                  <button onclick="approveCurrentDoc()"><i class="bi bi-check-lg"></i> Approve</button>
                  <button onclick="rejectCurrentDoc()"><i class="bi bi-x-lg"></i> Reject</button>
              </div>
          </div>
      </div>
      <!-- Document Verification Container -->

      <!-- Cibil Score Check Container -->
      <div id="creditScoreContainer" style="display: none;">
          <div class="credit-score-wrapper">
              <div class="credit-score-card">
                  <!-- Header -->
                  <div class="credit-score-header">
                      <h2><i class="bi bi-graph-up"></i> CREDIT SCORE</h2>
                  </div>
                  
                  <!-- Balance Section -->
                  <div class="credit-balance-section">
                      <div class="balance-item">
                          <div class="balance-label">Wallet Balance (INR)</div>
                          <div class="balance-value" id="walletBalance">4700.00</div>
                      </div>
                      <div class="balance-item">
                          <div class="balance-label">Cibil Charges (INR)</div>
                          <div class="balance-value" id="cibilCharges">60.00</div>
                      </div>
                      <div class="balance-item">
                          <div class="balance-label">Com Code</div>
                          <div class="balance-value" id="comCode">2381</div>
                      </div>
                  </div>
                  
                  <!-- CIBIL Generation Form -->
                  <div class="credit-form-section">
                      <div class="form-title">Generate CIBIL Report</div>
                      <div class="form-row">
                          <div class="form-field">
                              <label>Name <span class="required">*</span></label>
                              <input type="text" id="fullName" placeholder="Enter full name as per PAN">
                          </div>
                          <div class="form-field">
                              <label>Mobile Number <span class="required">*</span></label>
                              <input type="tel" id="mobileNumber" placeholder="Enter 10 digit mobile number" maxlength="10">
                          </div>
                      </div>
                      <div class="form-row">
                          <div class="form-field">
                              <label>PAN Number <span class="required">*</span></label>
                              <input type="text" id="panNumber" placeholder="Enter PAN number (e.g., ABCDE1234F)" maxlength="10">
                          </div>
                          <div class="form-field">
                              <label>Date of Birth <span class="required">*</span></label>
                              <input type="date" id="dob">
                          </div>
                      </div>
                      <div class="form-row">
                          <div class="form-field">
                              <label>OTP</label>
                              <input type="text" id="otp" placeholder="Enter OTP">
                          </div>
                          <div class="form-field otp-buttons-field">
                              <button class="send-otp-btn" onclick="sendOTP()"><i class="bi bi-envelope-paper"></i> Send OTP</button>
                              <button class="insert-otp-btn" onclick="verifyOTP()"><i class="bi bi-key"></i> Insert OTP</button>
                          </div>
                      </div>
                      <div class="generate-button-wrapper">
                          <button class="generate-btn" onclick="generateCIBIL()"><i class="bi bi-file-earmark-spreadsheet"></i> Generate CIBIL >></button>
                      </div>
                  </div>
                  
                  <!-- Terms and Conditions -->
                  <div class="credit-terms-section">
                      <div class="terms-title">Terms and Conditions</div>
                      <ul class="terms-list">
                          <li>Phone number must match with the number which was provided at the time of PAN registration.</li>
                          <li>Date of Birth must be same as document.</li>
                          <li>Phone number must be 10 digit. No country code is required.</li>
                          <li>Every request is chargeable.</li>
                      </ul>
                  </div>
                  
                  <!-- Last 6 Month Records Table -->
                  <div class="credit-records-section">
                      <div class="records-title">Last 6 Month Records</div>
                      <div class="table-wrapper">
                          <table class="credit-records-table">
                              <thead>
                                  <tr>
                                      <th>Utime</th>
                                      <th>File Name</th>
                                      <th>Action</th>
                                  </tr>
                              </thead>
                              <tbody id="recordsTableBody">
                                  <tr>
                                      <td>10/21/2024 19:41:34</td>
                                      <td>PARTHA SARATHI BISWAL [AIUPB0745R]</td>
                                      <td><button class="download-btn" onclick="downloadReport(this)"><i class="bi bi-download"></i> Download</button></td>
                                  </tr>
                                  <tr>
                                      <td>10/21/2024 13:54:27</td>
                                      <td>MANOJ KUMAR BISWAL [AYLPB9381N]</td>
                                      <td><button class="download-btn" onclick="downloadReport(this)"><i class="bi bi-download"></i> Download</button></td>
                                  </tr>
                                  <tr>
                                      <td>7/26/2024 17:51:10</td>
                                      <td>KOSURU NAGA SATYANARAYANA [AGYPK10...]</td>
                                      <td><button class="download-btn" onclick="downloadReport(this)"><i class="bi bi-download"></i> Download</button></td>
                                  </tr>
                                  <tr>
                                      <td>7/26/2024 14:56:27</td>
                                      <td>PENUMALLU REVATHI [AKVPV5597J]</td>
                                      <td><button class="download-btn" onclick="downloadReport(this)"><i class="bi bi-download"></i> Download</button></td>
                                  </tr>
                                  <tr>
                                      <td>7/6/2024 15:07:22</td>
                                      <td>BISWAJIT KUMAR DAS [AXLPD1825A]</td>
                                      <td><button class="download-btn" onclick="downloadReport(this)"><i class="bi bi-download"></i> Download</button></td>
                                  </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>

      <!-- Loading Modal -->
      <div id="loadingModal" class="loading-modal">
          <div class="loading-content">
              <div class="spinner"></div>
              <p>Processing request...</p>
          </div>
      </div>
      <!-- Cibil Score Check Container -->

      <!-- CKYC Container -->
      <div id="ckycGenerateContainer" style="display: none;">
          <div class="ckyc-wrapper">
              <div class="ckyc-card">
                  <!-- Header -->
                  <div class="ckyc-header">
                      <h2><i class="bi bi-shield-check"></i> CKYC Generate</h2>
                  </div>
                  
                  <!-- Search Section with Show/Hide Button -->
                  <div class="ckyc-search-section">
                      <div class="ckyc-search-header">
                          <div class="ckyc-search-title">Search</div>
                          <button class="ckyc-search-toggle" onclick="toggleSearchSection()">
                              <i class="bi bi-chevron-up" id="searchToggleIcon"></i>
                          </button>
                      </div>
                      <div class="ckyc-search-content" id="searchContent">
                          <div class="ckyc-search-row">
                              <div class="ckyc-search-field">
                                  <label>Branch</label>
                                  <select id="branch">
                                      <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                      <option value="BRANCH - 002">BRANCH - 002</option>
                                      <option value="BRANCH - 003">BRANCH - 003</option>
                                  </select>
                              </div>
                              <div class="ckyc-search-field">
                                  <label>Date</label>
                                  <input type="date" id="fromDate" value="2026-03-01">
                              </div>
                              <div class="ckyc-search-field">
                                  <label>To</label>
                                  <input type="date" id="toDate" value="2026-03-31">
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Headers Section with Branch Field -->
                  <div class="ckyc-headers-section">
                      <div class="ckyc-headers-row">
                          <div class="ckyc-header-field">
                              <label>Branch</label>
                              <input type="text" id="headerBranch" value="HEAD OFFICE - 001" placeholder="Branch">
                          </div>
                          <div class="ckyc-header-field">
                              <label>FL Code</label>
                              <input type="text" id="flCode" value="B0402">
                          </div>
                          <div class="ckyc-header-field">
                              <label>Batch No</label>
                              <input type="text" id="batchNo" placeholder="Batch No">
                          </div>
                          <div class="ckyc-header-field">
                              <label>UserID</label>
                              <input type="text" id="userId" placeholder="UserID">
                          </div>
                          <div class="ckyc-header-field">
                              <label>TimeStamp</label>
                              <input type="text" id="timestamp" value="02042026143844" readonly>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Select All Pending & Select All Checkboxes -->
                  <div class="ckyc-selectall-section">
                      <div class="selectall-row">
                          <label class="selectall-label">
                              <input type="checkbox" id="selectAllPendingCheckbox" onclick="toggleSelectAllPending()"> Select All Pending
                          </label>
                          <label class="selectall-label">
                              <input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"> Select All
                          </label>
                      </div>
                  </div>
                  
                  <!-- Records Table -->
                  <div class="ckyc-table-section">
                      <div class="table-wrapper">
                          <table class="ckyc-table">
                              <thead>
                                  <tr>
                                      <th><input type="checkbox" id="headerSelectAll" onclick="toggleSelectAllFromHeader()"></th>
                                      <th>Date of Join</th>
                                      <th>Member Code</th>
                                      <th>Member Name</th>
                                      <th>a. IP Photo</th>
                                      <th>b. Signature</th>
                                      <th>c. Doc</th>
                                      <th>GenOrNot</th>
                                      <th>Selection</th>
                                  </tr>
                              </thead>
                              <tbody id="ckycTableBody">
                                  <!-- Dynamic rows will be added here -->
                              </tbody>
                          </table>
                      </div>
                  </div>
                  
                  <!-- Output Folder Section -->
                  <div class="ckyc-output-section">
                      <div class="output-field">
                          <label>Select Output Folder:</label>
                          <input type="text" id="outputFolder" placeholder="Enter output folder path">
                          <button class="browse-btn" onclick="browseFolder()"><i class="bi bi-folder2-open"></i> Browse</button>
                      </div>
                      <div class="output-note">
                          <i class="bi bi-info-circle"></i> Make sure that output folder's name should not contain any space or special characters
                      </div>
                  </div>
                  
                  <!-- Confirm Button -->
                  <div class="ckyc-confirm-section">
                      <button class="confirm-generate-btn" onclick="confirmAndGenerate()"><i class="bi bi-check-lg"></i> Confirm And Generate >></button>
                  </div>
              </div>
          </div>
      </div>

      <!-- Loading Modal -->
      <div id="ckycLoadingModal" class="loading-modal" style="display: none;">
          <div class="loading-content">
              <div class="spinner"></div>
              <p>Generating CKYC reports...</p>
          </div>
      </div>
      <!-- CKYC Container -->

      <!-- Member Synopsis Container -->
      <div id="memberLoanContainer" style="display: none;">
          <div class="member-loan-wrapper">
              <div class="member-loan-card">
                  <!-- Header -->
                  <div class="member-loan-header">
                      <h2><i class="bi bi-person-vcard"></i> Member Details & Loan Sections</h2>
                  </div>
                  
                  <div class="member-loan-two-column">
                      <!-- LEFT COLUMN - Member Details -->
                      <div class="member-loan-left">
                          <!-- Enter Member Code -->
                          <div class="member-loan-section">
                              <div class="section-title">Enter Member Code</div>
                              <div class="member-code-row">
                                  <input type="text" id="memberCodeSearch" placeholder="Enter Member Code">
                                  <button class="search-member-btn" onclick="searchMemberDetails()"><i class="bi bi-search"></i> Search</button>
                              </div>
                          </div>
                          
                          <!-- Member Photos -->
                          <div class="member-loan-section">
                              <div class="section-title">Member Photo & Signature</div>
                              <div class="photo-signature-row">
                                  <div class="photo-box">
                                      <div class="photo-placeholder" id="memberPhoto">
                                          <i class="bi bi-person-circle"></i>
                                          <span>Member Photo</span>
                                      </div>
                                  </div>
                                  <div class="photo-box">
                                      <div class="photo-placeholder" id="memberSignature">
                                          <i class="bi bi-pen"></i>
                                          <span>Signature</span>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          
                          <!-- Member Information -->
                          <div class="member-loan-section">
                              <div class="section-title">Member Information</div>
                              <div class="info-grid">
                                  <div class="info-row">
                                      <div class="info-label">Member Code :</div>
                                      <div class="info-value" id="displayMemberCode">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Member Name :</div>
                                      <div class="info-value" id="displayMemberName">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Father Name :</div>
                                      <div class="info-value" id="displayFatherName">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Date Of Join :</div>
                                      <div class="info-value" id="displayDateOfJoin">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Address :</div>
                                      <div class="info-value" id="displayAddress">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">PIN Code :</div>
                                      <div class="info-value" id="displayPinCode">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Date of Birth :</div>
                                      <div class="info-value" id="displayDob">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Nominee Name :</div>
                                      <div class="info-value" id="displayNomineeName">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Nominee Relation :</div>
                                      <div class="info-value" id="displayNomineeRelation">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Phone No :</div>
                                      <div class="info-value" id="displayPhoneNo">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Identity Proof :</div>
                                      <div class="info-value" id="displayIdentityProof">-</div>
                                  </div>
                                  <div class="info-row">
                                      <div class="info-label">Branch Name/Code :</div>
                                      <div class="info-value" id="displayBranch">-</div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      
                      <!-- RIGHT COLUMN - Loan Sections -->
                      <div class="member-loan-right">
                          <!-- Personal Loan -->
                          <div class="member-loan-section">
                              <div class="section-title">Personal Loan</div>
                              <div class="loan-field">
                                  <label>No. of Recurring Deposits</label>
                                  <input type="number" id="personalRecurringDeposits" placeholder="Enter number">
                              </div>
                              <div class="loan-field">
                                  <label>Loan Amount (₹)</label>
                                  <input type="number" id="personalLoanAmount" placeholder="Enter amount">
                              </div>
                              <div class="loan-field">
                                  <label>Tenure (Months)</label>
                                  <input type="number" id="personalTenure" placeholder="Enter tenure">
                              </div>
                          </div>
                          
                          <!-- Group Loan -->
                          <div class="member-loan-section">
                              <div class="section-title">Group Loan</div>
                              <div class="loan-field">
                                  <label>No. of long term deposits</label>
                                  <input type="number" id="groupLongTermDeposits" placeholder="Enter number">
                              </div>
                              <div class="loan-field">
                                  <label>Group Loan Amount (₹)</label>
                                  <input type="number" id="groupLoanAmount" placeholder="Enter amount">
                              </div>
                              <div class="loan-field">
                                  <label>Tenure (Months)</label>
                                  <input type="number" id="groupTenure" placeholder="Enter tenure">
                              </div>
                          </div>
                          
                          <!-- Sections -->
                          <div class="member-loan-section">
                              <div class="section-title">Sections</div>
                              <div class="sections-row">
                                  <div class="section-field">
                                      <label>Age :</label>
                                      <input type="text" id="age" readonly placeholder="Auto calculated">
                                  </div>
                                  <div class="section-field">
                                      <label>N.Age :</label>
                                      <input type="text" id="nAge" placeholder="Nominee age">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- Action Buttons -->
                          <div class="member-loan-actions">
                              <button class="save-loan-btn" onclick="saveLoanDetails()"><i class="bi bi-save"></i> Save Details</button>
                              <button class="calculate-btn" onclick="calculateLoanEligibility()"><i class="bi bi-calculator"></i> Calculate Eligibility</button>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- Member Synopsis Container -->

      <!-- Member Details Report Container -->
      <div id="memberDetailsReportContainer" style="display: none;">
          <div class="member-report-wrapper">
              <div class="member-report-card">
                  <!-- Header -->
                  <div class="member-report-header">
                      <h2><i class="bi bi-file-text-fill"></i> MEMBER DETAILS REPORT</h2>
                  </div>
                  
                  <!-- Header Section with Branch, Date, Show, Close -->
                  <div class="member-report-header-section">
                      <div class="report-header-title">Header</div>
                      <div class="report-header-row">
                          <div class="report-header-field">
                              <label>Branch</label>
                              <select id="reportBranch">
                                  <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                  <option value="BRANCH - 002">BRANCH - 002</option>
                                  <option value="BRANCH - 003">BRANCH - 003</option>
                              </select>
                          </div>
                          <div class="report-header-field">
                              <label>Date</label>
                              <input type="date" id="reportDate" value="2026-04-02">
                          </div>
                          <div class="report-header-field">
                              <label>To</label>
                              <input type="date" id="reportToDate" value="2026-04-02">
                          </div>
                          <div class="report-header-buttons">
                              <button class="show-btn" onclick="showMemberReport()"><i class="bi bi-eye"></i> Show</button>
                              <button class="close-btn" onclick="closeMemberReport()"><i class="bi bi-x-circle"></i> Close</button>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Table Headers -->
                  <div class="member-report-table-section">
                      <div class="table-title">Member Details Reports</div>
                      <div class="table-wrapper">
                          <table class="member-report-table">
                              <thead>
                                  <tr>
                                      <th>SL NO</th>
                                      <th>Member No</th>
                                      <th>Member Name</th>
                                      <th>DOJ</th>
                                      <th>Age</th>
                                      <th>Father</th>
                                      <th>Address</th>
                                      <th>PIN</th>
                                      <th>PAN</th>
                                      <th>Branch</th>
                                  </tr>
                              </thead>
                              <tbody id="memberReportTableBody">
                                  <!-- Dynamic data will be loaded here -->
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- Member Details Report Container -->

      <!-- Member Search Container -->
      <div id="memberSearchContainer" style="display: none;">
          <div class="member-search-wrapper">
              <div class="member-search-card">
                  <!-- Header -->
                  <div class="member-search-header">
                      <h2><i class="bi bi-search"></i> MEMBER SEARCH</h2>
                  </div>
                  
                  <!-- Search Section -->
                  <div class="member-search-section">
                      <div class="search-row">
                          <div class="search-field">
                              <label>Search By</label>
                              <select id="searchBy">
                                  <option value="memberCode">Member Code</option>
                                  <option value="memberName">Member Name</option>
                                  <option value="panNo">PAN No</option>
                                  <option value="phoneNo">Phone No</option>
                              </select>
                          </div>
                          <div class="search-field">
                              <label>Type Text Value</label>
                              <input type="text" id="searchValue" placeholder="Enter search value">
                          </div>
                          <div class="search-buttons">
                              <button class="search-btn" onclick="performSearch()"><i class="bi bi-search"></i> Search</button>
                              <button class="edit-btn" onclick="editSelectedMember()"><i class="bi bi-pencil"></i> Edit Selected</button>
                              <button class="report-btn" onclick="generateMemberReport()"><i class="bi bi-file-text"></i> Report</button>
                              <button class="close-search-btn" onclick="closeMemberSearch()"><i class="bi bi-x-circle"></i> Close</button>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Results Table -->
                  <div class="member-search-table-section">
                      <div class="table-wrapper">
                          <table class="member-search-table">
                              <thead>
                                  <tr>
                                      <th><input type="checkbox" id="selectAllSearch" onclick="toggleSelectAllSearch()"></th>
                                      <th>SL NO</th>
                                      <th>M. CODE</th>
                                      <th>M. NAME</th>
                                      <th>GENDER</th>
                                      <th>D.O.J.</th>
                                      <th>M. Type</th>
                                      <th>PAN NO</th>
                                      <th>PHONE NO</th>
                                      <th>NOMINEE</th>
                                      <th>BRANCH</th>
                                      <th>STATUS</th>
                                  </tr>
                              </thead>
                              <tbody id="memberSearchTableBody">
                                  <!-- Dynamic search results will be loaded here -->
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- Member Search Container -->

      <!-- Collector Entry Container -->
      <div id="collectorEntryContainer" style="display: none;">
          <div class="collector-entry-wrapper">
              <div class="collector-entry-card">
                  <!-- Header with Search and Print Menus -->
                  <div class="collector-entry-header">
                      <div class="header-top">
                          <div class="search-code-box">
                              <label>Search Using Code</label>
                              <div class="search-input-group">
                                  <input type="text" id="searchAssociateCode" placeholder="Enter Associate Code">
                                  <button class="search-code-btn" onclick="searchByCode()"><i class="bi bi-search"></i> Search</button>
                              </div>
                          </div>
                          <div class="print-menus">
                              <button class="print-menu-btn" onclick="printMoneyReceipt()"><i class="bi bi-receipt"></i> Print Money Receipt</button>
                              <button class="print-menu-btn" onclick="printCollectorCard()"><i class="bi bi-printer"></i> Print Collector Card</button>
                              <button class="print-menu-btn" onclick="printIdCard()"><i class="bi bi-credit-card"></i> Print ID Card</button>
                          </div>
                      </div>
                      <h2><i class="bi bi-person-badge"></i> COLLECTOR ENTRY MODULE</h2>
                  </div>
                  
                  <div class="collector-entry-two-column">
                      <!-- LEFT COLUMN -->
                      <div class="collector-left-column">
                          <!-- ASSOCIATE CODE Section -->
                          <div class="collector-section">
                              <div class="collector-section-title">ASSOCIATE CODE</div>
                              <div class="collector-field-group">
                                  <div class="collector-field">
                                      <label>Associate Code</label>
                                      <input type="text" id="associateCode" placeholder="Enter Associate Code">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- MANDATORY INFORMATION Section -->
                          <div class="collector-section">
                              <div class="collector-section-title">MANDATORY INFORMATION</div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Membership No :</label>
                                      <input type="text" id="membershipNo" placeholder="Membership Number">
                                  </div>
                                  <div class="collector-field">
                                      <label>Date of Joining</label>
                                      <input type="date" id="dateOfJoining" value="2026-04-04">
                                  </div>
                                  <div class="collector-field">
                                      <label>Application No</label>
                                      <input type="text" id="applicationNo" placeholder="Application Number">
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Agent Name</label>
                                      <input type="text" id="agentName" placeholder="Agent Name">
                                  </div>
                                  <div class="collector-field">
                                      <label>Father/Husband Name</label>
                                      <input type="text" id="fatherHusbandName" placeholder="Father/Husband Name">
                                  </div>
                                  <div class="collector-field">
                                      <label>Agent Rank</label>
                                      <select id="agentRank">
                                          <option value="">Select Rank</option>
                                          <option value="Junior Collector">Junior Collector</option>
                                          <option value="Senior Collector">Senior Collector</option>
                                          <option value="Master Collector">Master Collector</option>
                                          <option value="Regional Collector">Regional Collector</option>
                                          <option value="National Collector">National Collector</option>
                                      </select>
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Position</label>
                                      <select id="position">
                                          <option value="1-CLERICAL">1-CLERICAL</option>
                                          <option value="2-SUPERVISOR">2-SUPERVISOR</option>
                                          <option value="3-MANAGER">3-MANAGER</option>
                                          <option value="4-EXECUTIVE">4-EXECUTIVE</option>
                                          <option value="5-DIRECTOR">5-DIRECTOR</option>
                                      </select>
                                  </div>
                                  <div class="collector-field full-width">
                                      <label>Address</label>
                                      <textarea id="address" rows="2" placeholder="Enter full address"></textarea>
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>PIN Code :</label>
                                      <input type="text" id="pinCode" placeholder="PIN Code">
                                  </div>
                                  <div class="collector-field">
                                      <label>Date of Birth</label>
                                      <input type="date" id="dob" value="2026-04-04" onchange="calculateCollectorAge()">
                                  </div>
                                  <div class="collector-field">
                                      <label>AGE :</label>
                                      <input type="text" id="age" readonly placeholder="Auto calculated">
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Nominee Name</label>
                                      <input type="text" id="nomineeName" placeholder="Nominee Name">
                                  </div>
                                  <div class="collector-field">
                                      <label>Nominee Relation</label>
                                      <input type="text" id="nomineeRelation" placeholder="Nominee Relation">
                                  </div>
                                  <div class="collector-field">
                                      <label>Nominee Age</label>
                                      <input type="text" id="nomineeAge" placeholder="Nominee Age">
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Blood Group</label>
                                      <select id="bloodGroup">
                                          <option value="A+">A+</option>
                                          <option value="A-">A-</option>
                                          <option value="B+">B+</option>
                                          <option value="B-">B-</option>
                                          <option value="O+">O+</option>
                                          <option value="O-">O-</option>
                                          <option value="AB+">AB+</option>
                                          <option value="AB-">AB-</option>
                                      </select>
                                  </div>
                                  <div class="collector-field">
                                      <label>Sex</label>
                                      <select id="sex">
                                          <option value="MALE">MALE</option>
                                          <option value="FEMALE">FEMALE</option>
                                          <option value="OTHER">OTHER</option>
                                      </select>
                                  </div>
                                  <div class="collector-field">
                                      <label>Phone No</label>
                                      <input type="tel" id="phoneNo" placeholder="Phone Number">
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Introducer Code</label>
                                      <input type="text" id="introducerCode" placeholder="Introducer Code">
                                  </div>
                                  <div class="collector-field">
                                      <label>Introducer Name</label>
                                      <input type="text" id="introducerName" placeholder="Introducer Name">
                                  </div>
                                  <div class="collector-field">
                                      <label>Introducer Rank</label>
                                      <select id="introducerRank">
                                          <option value="">Select Rank</option>
                                          <option value="Junior">Junior</option>
                                          <option value="Senior">Senior</option>
                                          <option value="Master">Master</option>
                                          <option value="Regional">Regional</option>
                                      </select>
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Branch Name/Code</label>
                                      <select id="branchNameCode">
                                          <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                          <option value="BRANCH - 002">BRANCH - 002</option>
                                          <option value="BRANCH - 003">BRANCH - 003</option>
                                      </select>
                                  </div>
                                  <div class="collector-field">
                                      <label>REG AMT :</label>
                                      <input type="number" id="regAmt" value="0" step="0.01">
                                  </div>
                                  <div class="collector-field">
                                      <label>Status</label>
                                      <select id="status">
                                          <option value="Active">Active</option>
                                          <option value="Inactive">Inactive</option>
                                          <option value="Suspended">Suspended</option>
                                      </select>
                                  </div>
                              </div>
                              
                              <div class="collector-row">
                                  <div class="collector-field full-width">
                                      <label>REMARKS :</label>
                                      <input type="text" id="remarks" placeholder="Remarks">
                                  </div>
                              </div>
                          </div>
                      </div>
                      
                      <!-- RIGHT COLUMN -->
                      <div class="collector-right-column">
                          <!-- ID Details Section -->
                          <div class="collector-section">
                              <div class="collector-section-title">ID Details</div>
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>PAN Card No.</label>
                                      <input type="text" id="panCardNo" placeholder="PAN Card Number">
                                  </div>
                                  <div class="collector-field">
                                      <label>Passport No.</label>
                                      <input type="text" id="passportNo" placeholder="Passport Number">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- Bank Details Section -->
                          <div class="collector-section">
                              <div class="collector-section-title">Bank Details</div>
                              <div class="collector-row">
                                  <div class="collector-field">
                                      <label>Bank Name</label>
                                      <input type="text" id="bankName" placeholder="Bank Name">
                                  </div>
                                  <div class="collector-field">
                                      <label>Account No.</label>
                                      <input type="text" id="accountNo" placeholder="Account Number">
                                  </div>
                              </div>
                          </div>
                          
                          <!-- Photo Section -->
                          <div class="collector-section">
                              <div class="collector-section-title">Photo</div>
                              <div class="photo-upload-area">
                                  <div class="photo-placeholder" id="photoPlaceholder" onclick="document.getElementById('photoUpload').click()">
                                      <i class="bi bi-camera"></i>
                                      <span>Click to upload photo</span>
                                  </div>
                                  <input type="file" id="photoUpload" accept="image/*" style="display: none;" onchange="previewPhoto(this)">
                                  <img id="photoPreview" style="display: none; max-width: 100%; margin-top: 10px;">
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Collector List Table -->
                  <div class="collector-table-section">
                      <div class="collector-section-title">Collector List</div>
                      <div class="table-wrapper">
                          <table class="collector-list-table">
                              <thead>
                                  <tr>
                                      <th>Rank</th>
                                      <th>Agent Code</th>
                                      <th>Agent Name</th>
                                  </tr>
                              </thead>
                              <tbody id="collectorTableBody">
                                  <tr><td colspan="3" style="text-align:center">No records found</td></tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
                  
                  <!-- Action Buttons -->
                  <div class="collector-actions">
                      <button class="collector-save-btn" onclick="saveCollector()"><i class="bi bi-save"></i> Save Collector</button>
                      <button class="collector-update-btn" onclick="updateCollector()"><i class="bi bi-pencil"></i> Update</button>
                      <button class="collector-clear-btn" onclick="clearCollectorForm()"><i class="bi bi-eraser"></i> Clear Form</button>
                      <button class="collector-delete-btn" onclick="deleteCollector()"><i class="bi bi-trash"></i> Delete</button>
                  </div>
              </div>
          </div>
      </div>
      <!-- Collector Entry Container -->

      <!-- Collector Downline Container -->
        <div id="associateDownlineContainer" style="display: none;">
            <div class="associate-downline-wrapper">
                <div class="associate-downline-card">
                    <!-- Header -->
                    <div class="associate-downline-header">
                        <h2><i class="bi bi-diagram-3"></i> Associate Downline</h2>
                    </div>
                    
                    <!-- Associate Details Section -->
                    <div class="downline-details-section">
                        <div class="details-row">
                            <div class="details-field">
                                <label>Associate Code</label>
                                <input type="text" id="associateCode" placeholder="Enter Associate Code">
                            </div>
                            <div class="details-field">
                                <label>Rank</label>
                                <input type="text" id="associateRank" placeholder="Rank" readonly>
                            </div>
                            <div class="details-field">
                                <label>Branch</label>
                                <input type="text" id="associateBranch" placeholder="Branch" readonly>
                            </div>
                        </div>
                        <div class="details-row">
                            <div class="details-field full-width">
                                <label>Associate Name</label>
                                <input type="text" id="associateName" placeholder="Associate Name" readonly>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Action Buttons -->
                    <div class="downline-action-buttons">
                        <button class="downline-view-btn" onclick="viewDownline()"><i class="bi bi-eye"></i> Downline View</button>
                        <button class="download-report-btn" onclick="downloadDownlineReport()"><i class="bi bi-download"></i> Download Report</button>
                    </div>
                    
                    <!-- Downline Table -->
                    <div class="downline-table-section">
                        <div class="table-wrapper">
                            <table class="downline-table">
                                <thead>
                                    <tr>
                                        <th>Code</th>
                                        <th>Name</th>
                                        <th>Rank</th>
                                        <th>D.O.J.</th>
                                        <th>Sponsor</th>
                                        <th>Sponsor Name</th>
                                        <th>Branch</th>
                                    </tr>
                                </thead>
                                <tbody id="downlineTableBody">
                                    <tr><td colspan="7" style="text-align:center">Enter Associate Code and click Downline View</td>\n</tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Collector Downline Container -->

      <!-- Agent Promotion Container -->
      <div id="agentPromotionContainer" style="display: none;">
          <div class="agent-promotion-wrapper">
              <div class="agent-promotion-card">
                  <!-- Header -->
                  <div class="agent-promotion-header">
                      <h2><i class="bi bi-arrow-up-circle"></i> AGENT PROMOTION</h2>
                  </div>
                  
                  <div class="agent-promotion-two-column">
                      <!-- LEFT COLUMN -->
                      <div class="agent-promotion-left">
                          <!-- Agent Code & Rank -->
                          <div class="promotion-row">
                              <div class="promotion-field">
                                  <label>Agent Code</label>
                                  <input type="text" id="agentCode" placeholder="Agent Code">
                              </div>
                              <div class="promotion-field">
                                  <label>Rank</label>
                                  <input type="text" id="agentRank" placeholder="Rank" readonly>
                              </div>
                          </div>
                          
                          <!-- Agent Name (no rank) -->
                          <div class="promotion-row">
                              <div class="promotion-field full-width">
                                  <label>Agent Name</label>
                                  <input type="text" id="agentName" placeholder="Agent Name" readonly>
                              </div>
                          </div>
                          
                          <!-- Sponsor Code & Rank -->
                          <div class="promotion-row">
                              <div class="promotion-field">
                                  <label>Sponsor Code</label>
                                  <input type="text" id="sponsorCode" placeholder="Sponsor Code" readonly>
                              </div>
                              <div class="promotion-field">
                                  <label>Rank</label>
                                  <input type="text" id="sponsorRank" placeholder="Rank" readonly>
                              </div>
                          </div>
                          
                          <!-- Sponsor Name (no rank) -->
                          <div class="promotion-row">
                              <div class="promotion-field full-width">
                                  <label>Sponsor Name</label>
                                  <input type="text" id="sponsorName" placeholder="Sponsor Name" readonly>
                              </div>
                          </div>
                          
                          <!-- Service Branch -->
                          <div class="promotion-row">
                              <div class="promotion-field">
                                  <label>Service Branch</label>
                                  <select id="serviceBranch">
                                      <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                      <option value="BRANCH - 002">BRANCH - 002</option>
                                      <option value="BRANCH - 003">BRANCH - 003</option>
                                  </select>
                              </div>
                          </div>
                          
                          <!-- Rank Promotion (no rank field after it) -->
                          <div class="promotion-row">
                              <div class="promotion-field">
                                  <label>Rank Promotion</label>
                                  <select id="rankPromotion">
                                      <option value="">Select Rank</option>
                                      <option value="Junior Collector">Junior Collector</option>
                                      <option value="Senior Collector">Senior Collector</option>
                                      <option value="Master Collector">Master Collector</option>
                                      <option value="Regional Collector">Regional Collector</option>
                                      <option value="National Collector">National Collector</option>
                                  </select>
                              </div>
                          </div>
                          
                          <!-- New Sponsor & Rank -->
                          <div class="promotion-row">
                              <div class="promotion-field">
                                  <label>New Sponsor</label>
                                  <input type="text" id="newSponsorCode" placeholder="New Sponsor Code">
                              </div>
                              <div class="promotion-field">
                                  <label>Rank</label>
                                  <input type="text" id="newSponsorRank" placeholder="Rank" readonly>
                              </div>
                          </div>
                          
                          <!-- Sponsor Name (no rank) -->
                          <div class="promotion-row">
                              <div class="promotion-field full-width">
                                  <label>Sponsor Name</label>
                                  <input type="text" id="newSponsorName" placeholder="Sponsor Name" readonly>
                              </div>
                          </div>
                          
                          <!-- Remarks -->
                          <div class="promotion-row">
                              <div class="promotion-field full-width">
                                  <label>Remarks</label>
                                  <input type="text" id="remarks" placeholder="Remarks">
                              </div>
                          </div>
                          
                          <!-- New & Update Buttons -->
                          <div class="promotion-buttons">
                              <button class="promotion-new-btn" onclick="clearPromotionForm()">New</button>
                              <button class="promotion-update-btn" onclick="updatePromotion()">Update</button>
                          </div>
                      </div>
                      
                      <!-- RIGHT COLUMN (Top right section - previously ignored) -->
                      <!-- RIGHT COLUMN (Top right section - exact as per image) -->
                      <div class="agent-promotion-right">
                          <div class="right-field-group">
                              <div class="right-field">
                                  <label>Down Max Result</label>
                                  <input type="text" id="downMaxResult" placeholder="Down Max Result">
                              </div>
                              <div class="right-field">
                                  <label>Agent Code</label>
                                  <input type="text" id="rightAgentCode" placeholder="Agent Code">
                              </div>
                          </div>
                          <div class="right-field-group">
                              <div class="right-field">
                                  <label>Agent Name</label>
                                  <input type="text" id="rightAgentName" placeholder="Agent Name">
                              </div>
                          </div>
                          <div class="right-field-group">
                              <div class="right-field">
                                  <label>Upline Min Rank</label>
                                  <input type="text" id="uplineMinRank" placeholder="Upline Min Rank">
                              </div>
                              <div class="right-field">
                                  <label>Agent Code</label>
                                  <input type="text" id="rightAgentCode2" placeholder="Agent Code">
                              </div>
                          </div>
                          <div class="right-field-group">
                              <div class="right-field">
                                  <label>Agent Name</label>
                                  <input type="text" id="rightAgentName2" placeholder="Agent Name">
                              </div>
                          </div>
                      </div>
                  </div>
                  
                  <!-- NEW UPLINE Table -->
                  <div class="promotion-table-section">
                      <div class="promotion-section-title">NEW UPLINE</div>
                      <div class="table-wrapper">
                          <table class="promotion-table">
                              <thead>
                                  <tr>
                                      <th>Rank</th>
                                      <th>Agent Code</th>
                                      <th>Agent Name</th>
                                  </tr>
                              </thead>
                              <tbody id="newUplineTableBody">
                                  <tr><td colspan="3" style="text-align:center">No records found</td></tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
                  
                  <!-- OLD UPLINE Table -->
                  <div class="promotion-table-section">
                      <div class="promotion-section-title">OLD UPLINE</div>
                      <div class="table-wrapper">
                          <table class="promotion-table">
                              <thead>
                                  <tr>
                                      <th>Rank</th>
                                      <th>Agent Code</th>
                                      <th>Agent Name</th>
                                  </tr>
                              </thead>
                              <tbody id="oldUplineTableBody">
                                  <tr><td colspan="3" style="text-align:center">No records found</td></tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
                  
                  <!-- Commit Section -->
                  <div class="promotion-commit-section">
                      <div class="commit-note">
                          <i class="bi bi-info-circle"></i> To Apply This Changes In Chain Please Click on "Commit And Close" Button
                      </div>
                      <button class="commit-close-btn" onclick="commitAndClose()">Commit And Close</button>
                  </div>
              </div>
          </div>
      </div>
      <!-- Agent Promotion Container -->

      <!-- Associate Block Container -->
      <div id="associateBlockContainer" style="display: none;">
          <div class="associate-block-wrapper">
              <div class="associate-block-card">
                  <!-- Header -->
                  <div class="associate-block-header">
                      <h2><i class="bi bi-lock"></i> Associate Block / UnBlock</h2>
                  </div>
                  
                  <!-- Search Section -->
                  <div class="associate-search-section">
                      <div class="search-row">
                          <div class="search-field">
                              <label>Branch</label>
                              <select id="associateBranch">
                                  <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                  <option value="BRANCH - 002">BRANCH - 002</option>
                                  <option value="BRANCH - 003">BRANCH - 003</option>
                              </select>
                          </div>
                          <div class="search-field">
                              <label>From Date</label>
                              <input type="date" id="fromDate" value="2026-04-04">
                          </div>
                          <div class="search-field">
                              <label>To Date</label>
                              <input type="date" id="toDate" value="2026-04-04">
                          </div>
                      </div>
                  </div>
                  
                  <!-- Select All -->
                  <div class="associate-selectall-section">
                      <label class="selectall-label">
                          <input type="checkbox" id="selectAllAssociates" onclick="toggleSelectAllAssociates()"> Select All
                      </label>
                  </div>
                  
                  <!-- Associates Table -->
                  <div class="associate-table-section">
                      <div class="table-wrapper">
                          <table class="associate-table">
                              <thead>
                                  <tr>
                                      <th><input type="checkbox" id="headerSelectAllAssociates" onclick="toggleSelectAllFromHeader()"></th>
                                      <th>SL NO</th>
                                      <th>Agent Code</th>
                                      <th>Agent Name</th>
                                      <th>Rank</th>
                                      <th>DOJ</th>
                                      <th>Phone No</th>
                                      <th>Branch</th>
                                      <th>Status</th>
                                  </tr>
                              </thead>
                              <tbody id="associateTableBody">
                                  <tr><td colspan="9" style="text-align:center">No records found</td></tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
                  
                  <!-- Action Buttons -->
                  <div class="associate-action-buttons">
                      <button class="view-btn" onclick="viewAssociates()"><i class="bi bi-eye"></i> View</button>
                      <button class="block-btn" onclick="blockAssociates()"><i class="bi bi-lock"></i> Block</button>
                      <button class="unblock-btn" onclick="unblockAssociates()"><i class="bi bi-unlock"></i> UnBlock</button>
                  </div>
              </div>
          </div>
      </div>
      <!-- Associate Block Container -->

      <!-- Collector Search Container -->
      <div id="collectorSearchContainer" style="display: none;">
          <div class="collector-search-wrapper">
              <div class="collector-search-card">
                  <!-- Header -->
                  <div class="collector-search-header">
                      <h2><i class="bi bi-search"></i> COLLECTOR SEARCH</h2>
                  </div>
                  
                  <!-- Search Section -->
                  <div class="collector-search-section">
                      <div class="search-row">
                          <div class="search-field">
                              <label>Search By</label>
                              <select id="searchBy">
                                  <option value="agentCode">Agent Code</option>
                                  <option value="agentName">Agent Name</option>
                                  <option value="panNo">PAN No</option>
                                  <option value="phoneNo">Phone No</option>
                              </select>
                          </div>
                          <div class="search-field">
                              <label>Type Text Value</label>
                              <input type="text" id="searchValue" placeholder="Enter search value">
                          </div>
                          <div class="search-buttons">
                              <button class="search-btn" onclick="performCollectorSearch()"><i class="bi bi-search"></i> Search</button>
                              <button class="edit-record-btn" onclick="editSelectedRecord()"><i class="bi bi-pencil"></i> Edit Selected Record</button>
                              <button class="close-search-btn" onclick="closeCollectorSearch()"><i class="bi bi-x-circle"></i> Close</button>
                          </div>
                      </div>
                  </div>
                  
                  <!-- Results Table -->
                  <div class="collector-search-table-section">
                      <div class="table-wrapper">
                          <table class="collector-search-table">
                              <thead>
                                  <tr>
                                      <th><input type="checkbox" id="selectAllCollectorSearch" onclick="toggleSelectAllCollectorSearch()"></th>
                                      <th>SL NO</th>
                                      <th>M. CODE</th>
                                      <th>M. NAME</th>
                                      <th>RANK</th>
                                      <th>D.O.J.</th>
                                      <th>INT. CODE</th>
                                      <th>INT. NAME</th>
                                      <th>PAN NO</th>
                                      <th>PHONE NO</th>
                                      <th>BRANCH</th>
                                      <th>Status</th>
                                  </tr>
                              </thead>
                              <tbody id="collectorSearchTableBody">
                                  <tr><td colspan="12" style="text-align:center">No records found</td></tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <!-- Collector Search Container -->

        <!-- Appointment Letter Container -->
        <div id="appointmentLetterContainer" style="display: none;">
            <div class="appointment-letter-wrapper">
                <div class="appointment-letter-card">
                    <!-- Header -->
                    <div class="appointment-letter-header">
                        <h2><i class="bi bi-envelope-paper"></i> Appointment Letter</h2>
                    </div>
                    
                    <div class="appointment-letter-two-column">
                        <!-- LEFT COLUMN - Employee Information -->
                        <div class="appointment-left">
                            <div class="letter-section">
                                <div class="letter-section-title">EMPLOYEE BASIC DETAILS</div>
                                
                                <div class="letter-row">
                                    <div class="letter-field">
                                        <label>Employee Code</label>
                                        <input type="text" id="employeeCode" placeholder="Employee Code">
                                    </div>
                                    <div class="letter-field">
                                        <label>Date</label>
                                        <input type="date" id="appointmentDate" value="2026-04-04">
                                    </div>
                                </div>
                                
                                <div class="letter-row">
                                    <div class="letter-field full-width">
                                        <label>Employee Name</label>
                                        <input type="text" id="employeeName" placeholder="Employee Name">
                                    </div>
                                </div>
                                
                                <div class="letter-row">
                                    <div class="letter-field full-width">
                                        <label>Employee Address</label>
                                        <textarea id="employeeAddress" rows="2" placeholder="Employee Address"></textarea>
                                    </div>
                                </div>
                                
                                <div class="letter-row">
                                    <div class="letter-field full-width">
                                        <label>Designation</label>
                                        <input type="text" id="designation" placeholder="Designation">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="letter-section">
                                <div class="letter-section-title">EMPLOYEE SALARY DETAILS</div>
                                
                                <div class="letter-row">
                                    <div class="letter-field">
                                        <label>Basic Salary</label>
                                        <input type="text" id="basicSalary" placeholder="Basic Salary" oninput="calculateEarning()">
                                    </div>
                                    <div class="letter-field">
                                        <label>H.R.A.</label>
                                        <input type="text" id="hra" placeholder="H.R.A." oninput="calculateEarning()">
                                    </div>
                                </div>
                                
                                <div class="letter-row">
                                    <div class="letter-field">
                                        <label>Conveyance</label>
                                        <input type="text" id="conveyance" placeholder="Conveyance" oninput="calculateEarning()">
                                    </div>
                                    <div class="letter-field">
                                        <label>P.D.A.</label>
                                        <input type="text" id="pda" placeholder="P.D.A." oninput="calculateEarning()">
                                    </div>
                                </div>
                                
                                <div class="letter-row">
                                    <div class="letter-field">
                                        <label>Special Allowance</label>
                                        <input type="text" id="specialAllowance" placeholder="Special Allowance" oninput="calculateEarning()">
                                    </div>
                                    <div class="letter-field">
                                        <label>Medical Remb.</label>
                                        <input type="text" id="medicalRemb" placeholder="Medical Remb." oninput="calculateEarning()">
                                    </div>
                                </div>
                                
                                <!-- Image Upload above Save button -->
                                <div class="letter-image-section">
                                    <label>Upload Signature / Stamp</label>
                                    <div class="image-upload-area" onclick="document.getElementById('signatureUpload').click()">
                                        <i class="bi bi-image"></i>
                                        <span>Click to upload image</span>
                                    </div>
                                    <input type="file" id="signatureUpload" accept="image/*" style="display: none;" onchange="previewSignature(this)">
                                    <img id="signaturePreview" style="display: none; max-width: 150px; margin-top: 10px;">
                                </div>
                                
                                <div class="letter-actions">
                                    <label class="print-checkbox">
                                        <input type="checkbox" id="printSlip"> Print Slip
                                    </label>
                                    <button class="save-btn" onclick="saveAppointment()">SAVE</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN - Employee List Table -->
                        <div class="appointment-right">
                            <div class="employee-list-section">
                                <div class="table-wrapper">
                                    <table class="employee-list-table">
                                        <thead>
                                            <tr>
                                                <th>Employee Code</th>
                                                <th>Employee Name</th>
                                                <th>Date</th>
                                            </tr>
                                        </thead>
                                        <tbody id="employeeListTableBody">
                                            <tr><td style="cursor:pointer">C00001</td><td style="cursor:pointer">ARITRA DAS</td><td style="cursor:pointer">09/06/2025</td></tr>
                                            <tr><td style="cursor:pointer">C00018</td><td style="cursor:pointer">SUDESHA GHOSH</td><td style="cursor:pointer">11/11/2025</td></tr>
                                            <tr><td style="cursor:pointer">C00019</td><td style="cursor:pointer">SAYANTANI GHOSH</td><td style="cursor:pointer">11/11/2025</td></tr>
                                            <tr><td style="cursor:pointer">C00020</td><td style="cursor:pointer">SHOVANIKA DEY</td><td style="cursor:pointer">11/11/2025</td></tr>
                                            <tr><td style="cursor:pointer">C00021</td><td style="cursor:pointer">SAYANTAN HALDER</td><td style="cursor:pointer">17/11/2025</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Appointment Letter Container -->

        <!-- Loan Tables/Master Container -->
        <div id="loanTablesContainer" style="display: none;">
            <div class="loan-tables-wrapper">
                <div class="loan-tables-card">
                    <div class="loan-tables-header">
                        <h2>ANU MICRO SELFHELP ASSOCIATION - [Loan Tables]</h2>
                    </div>
                    
                    <div class="loan-nav-tabs">
                        <button class="nav-tab">Master</button>
                        <button class="nav-tab">Loan Preparation</button>
                        <button class="nav-tab">Member</button>
                        <button class="nav-tab">Collector</button>
                        <button class="nav-tab active">Loan Section</button>
                        <button class="nav-tab">Modification</button>
                        <button class="nav-tab">Accounts</button>
                        <button class="nav-tab">Report</button>
                        <button class="nav-tab">Mobile</button>
                    </div>
                    
                    <h3 class="loan-section-title">Loan Scheme Details</h3>
                    
                    <div class="loan-form">
                        <!-- Row 1 -->
                        <div class="form-row">
                            <div class="form-group"><label>Loan Code:</label><input type="text" id="loanCode" placeholder="Loan Code"></div>
                            <div class="form-group"><label>Loan Name:</label><input type="text" id="loanName" placeholder="Loan Name"></div>
                            <div class="form-group"><label>Loan Mode</label><select id="loanMode"><option>WLY</option><option>MLY</option><option>QLY</option></select></div>
                            <div class="form-group"><label>Min Amount Rs.</label><input type="text" id="minAmount" placeholder="Min Amount"></div>
                            <div class="form-group"><label>Max Amount Rs.</label><input type="text" id="maxAmount" placeholder="Max Amount"></div>
                        </div>
                        
                        <!-- Row 2 -->
                        <div class="form-row">
                            <div class="form-group"><label>Min Term</label><input type="text" id="minTerm" placeholder="Min Term"></div>
                            <div class="form-group"><label>Max Term</label><input type="text" id="maxTerm" placeholder="Max Term"></div>
                            <div class="form-group"><label>Min ROI (%)</label><input type="text" id="minRoi" placeholder="Min ROI"></div>
                            <div class="form-group"><label>Max ROI (%)</label><input type="text" id="maxRoi" placeholder="Max ROI"></div>
                            <div class="form-group"><label>Service Charge (%)</label><input type="text" id="serviceCharge" placeholder="Service Charge"></div>
                        </div>
                        
                        <!-- Row 3 -->
                        <div class="form-row">
                            <div class="form-group"><label>Loan Type:</label><select id="loanType"><option>PERSONAL LOAN</option><option>PRODUCT LOAN</option><option>GROUP LOAN</option></select></div>
                            <div class="form-group"><label>Min Age</label><input type="text" id="minAge" placeholder="Min Age"></div>
                            <div class="form-group"><label>Max Age</label><input type="text" id="maxAge" placeholder="Max Age"></div>
                            <div class="form-group"><label>GST (%)</label><input type="text" id="gst" placeholder="GST %"></div>
                            <div class="form-group"><label>Processing Fees %</label><input type="text" id="processingFees" placeholder="Processing Fees"></div>
                        </div>
                        
                        <!-- Row 4 - Deductions (Labels only as per image, not inputs) -->
                        <div class="form-row">
                            <div class="form-group"><label>Scheme Deduction:</label><input type="text" id="schemeDeduction" placeholder="Scheme Deduction" value="0" readonly style="background:#e9ecef"></div>
                            <div class="form-group"><label>Legal Amt. %</label><input type="text" id="legalAmt" placeholder="Legal Amt"></div>
                            <div class="form-group"><label>Insurance Amt. %</label><input type="text" id="insuranceAmt" placeholder="Insurance Amt"></div>
                            <div class="form-group"><label>Late fine (Deductions are optional):</label><input type="text" id="lateFine" placeholder="Late Fine"></div>
                        </div>
                        
                        <!-- Row 5 -->
                        <div class="form-row">
                            <div class="form-group"><label>Grace Period (Days)</label><input type="text" id="gracePeriod" placeholder="Grace Period"></div>
                            <div class="form-group"><label>Fine Interest [Per Inst %]</label><input type="text" id="fineInterest" placeholder="Fine Interest"></div>
                            <div class="form-group"><label>EMI Type:</label><select id="emiType"><option>Fixed EMI</option><option>Non EMI</option></select></div>
                            <div class="form-group"><label>Select Loan Type:</label><select id="selectLoanType"><option>GROUP LOAN</option><option>PERSONAL LOAN</option><option>PRODUCT LOAN</option></select></div>
                        </div>
                    </div>
                    
                    <!-- Table Tabs -->
                    <div class="table-tabs-bar">
                        <span>Table Tabs</span>
                        <button class="tab-btn">LoanTable No</button>
                        <button class="tab-btn">LoanName</button>
                        <button class="tab-btn">MinAmount</button>
                        <button class="tab-btn">MaxAmount</button>
                        <button class="tab-btn">LoanType</button>
                        <button class="tab-btn">MinTerm</button>
                        <button class="tab-btn">MaxTerm</button>
                        <button class="tab-btn">Mode</button>
                        <button class="tab-btn">ROI</button>
                        <button class="tab-btn">ProcessingFees</button>
                        <button class="tab-btn">Stax</button>
                    </div>
                    
                    <!-- Loan Table -->
                    <div class="table-container">
                        <table class="loan-table">
                            <thead>
                                <tr><th>LoanTable No</th><th>LoanName</th><th>MinAmount</th><th>MaxAmount</th><th>LoanType</th><th>MinTerm</th><th>MaxTerm</th><th>Mode</th><th>ROI</th><th>ProcessingFees</th><th>Stax</th></tr>
                            </thead>
                            <tbody id="loanTableBody"></tbody>
                        </table>
                    </div>
                    
                    <!-- Eligibility Button -->
                    <div class="eligibility-row">
                        <button class="eligibility-btn" onclick="showEligibility()">Click For eligibility slab.</button>
                    </div>
                    
                    <!-- Code Sequence -->
                    <div class="code-sequence">
                        <div class="code-title">Code Sequence</div>
                        <div class="code-row">
                            <div class="code-item"><label>Prefix</label><input type="text" id="prefix" value="GP" placeholder="ex. GP"></div>
                            <div class="code-item"><label>Start From</label><input type="text" id="startFrom" value="1" placeholder="Start From"></div>
                            <div class="code-item"><label>No. Of Digit</label><select id="digitCount"><option value="4">4 digit (0001)</option><option value="5">5 digit (00001)</option><option value="6" selected>6 digit (000001)</option></select></div>
                            <div class="code-item"><label>Last No.</label><input type="text" id="lastNo" readonly placeholder="Last No."></div>
                            <div class="code-item"><label>Preview Code</label><input type="text" id="previewCode" readonly placeholder="ex. GP000001"></div>
                        </div>
                    </div>
                    
                    <!-- Type of Security with Dropdown -->
                    <div class="security-bar">
                        <div class="security-left">
                            <span>Type Of Security</span>
                            <select id="securityType" class="security-dropdown">
                                <option value="">Select Security Type</option>
                                <option value="Collateral">Collateral</option>
                                <option value="Guarantor">Guarantor</option>
                                <option value="Hypothecation">Hypothecation</option>
                                <option value="Pledge">Pledge</option>
                                <option value="Mortgage">Mortgage</option>
                            </select>
                        </div>
                        <div class="security-buttons">
                            <button class="sec-btn new" onclick="newLoan()">New</button>
                            <button class="sec-btn delete" onclick="deleteLoan()">Delete</button>
                            <button class="sec-btn save" onclick="saveLoan()">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan Tables/Master Container -->

        <!-- Product Master Container -->
        <div id="vendorMasterContainer" style="display: none;">
            <div class="vendor-master-wrapper">
                <div class="vendor-master-card">
                    <div class="vendor-master-header">
                        <h2><i class="bi bi-building"></i> PRODUCT MASTER</h2>
                    </div>
                    
                    <div class="vendor-form">
                        <div class="vendor-row">
                            <div class="vendor-field">
                                <label>Vendor Code:</label>
                                <input type="text" id="vendorCode" placeholder="Vendor Code">
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field full-width">
                                <label>Vendor Name:</label>
                                <input type="text" id="vendorName" placeholder="Vendor Name">
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field full-width">
                                <label>Vendor Address:</label>
                                <textarea id="vendorAddress" rows="2" placeholder="Vendor Address"></textarea>
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field">
                                <label>Vendor Mobile No:</label>
                                <input type="text" id="vendorMobile" placeholder="Vendor Mobile No">
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field full-width">
                                <label>Vendor Email:</label>
                                <input type="email" id="vendorEmail" placeholder="Vendor Email">
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field">
                                <label>GST Number:</label>
                                <input type="text" id="gstNumber" placeholder="GST Number">
                            </div>
                        </div>
                        
                        <div class="vendor-row">
                            <div class="vendor-field">
                                <label>Account No:</label>
                                <input type="text" id="accountNo" placeholder="Account No">
                            </div>
                            <div class="vendor-field">
                                <label>Bank Name:</label>
                                <input type="text" id="bankName" placeholder="Bank Name">
                            </div>
                            <div class="vendor-field">
                                <label>IFSC Code:</label>
                                <input type="text" id="ifscCode" placeholder="IFSC Code">
                            </div>
                        </div>
                    </div>
                    
                    <div class="vendor-buttons">
                        <button class="vendor-btn new" onclick="newVendor()">New</button>
                        <button class="vendor-btn save" onclick="saveVendor()">Save</button>
                        <button class="vendor-btn update" onclick="updateVendor()">Update</button>
                        <button class="vendor-btn delete" onclick="deleteVendor()">Delete</button>
                    </div>
                    
                    <div class="vendor-table-section">
                        <div class="table-wrapper">
                            <table class="vendor-table">
                                <thead>
                                    <tr><th>Code</th><th>Name</th></tr>
                                </thead>
                                <tbody id="vendorTableBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product Master Container -->

        <!-- Loan Requisition Container -->
        <div id="loanEntryMemberContainer" style="display: none;">
            <div class="loan-entry-wrapper">
                <div class="loan-entry-card">
                    <div class="loan-entry-header">
                        <h2><i class="bi bi-file-text"></i> LOAN ENTRY - MEMBER</h2>
                    </div>
                    
                    <div class="loan-entry-two-column">
                        <!-- LEFT COLUMN -->
                        <div class="loan-entry-left">
                            <div class="loan-section">
                                <div class="loan-section-title">Search Details</div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Applicant Name:</label><input type="text" id="applicantName" placeholder="Applicant Name"></div>
                                    <div class="loan-field"><label>Loan ID:</label><input type="text" id="loanId" placeholder="Loan ID"></div>
                                    <div class="loan-field"><label>Form Member</label><input type="text" id="formMember" placeholder="Form Member"></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Processing Fee:</label><input type="text" id="processingFee" placeholder="Processing Fee"></div>
                                    <div class="loan-field"><label>GST Amt.</label><input type="text" id="gstAmt" placeholder="GST Amt"></div>
                                    <div class="loan-field"><label>Legal Amt.</label><input type="text" id="legalAmt" placeholder="Legal Amt"></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Date:</label><input type="date" id="loanDate" value="2026-04-04"></div>
                                    <div class="loan-field"><label>Head Office - 001</label><input type="text" id="branch" value="HEAD OFFICE - 001" readonly></div>
                                    <div class="loan-field"><label>Insurance Amt.</label><input type="text" id="insuranceAmt" placeholder="Insurance Amt"></div>
                                </div>
                            </div>
                            
                            <div class="loan-section">
                                <div class="loan-section-title">Previous Loan</div>
                                <div class="loan-row">
                                    <div class="loan-field full-width"><label>Loan Amount that already taken</label><input type="text" id="previousLoan" placeholder="Previous Loan Amount"></div>
                                </div>
                            </div>
                            
                            <div class="loan-section">
                                <div class="loan-section-title">Personal Info</div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Holder's DOB:</label><input type="date" id="holderDob" value="2026-04-04"></div>
                                    <div class="loan-field"><label>Loan Holder's Age:</label><input type="text" id="holderAge" readonly placeholder="Auto"></div>
                                    <div class="loan-field"><label>Relation:</label><input type="text" id="relation" placeholder="Relation"></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field full-width"><label>Address:</label><textarea id="address" rows="2" placeholder="Address"></textarea></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Pin Code:</label><input type="text" id="pinCode" placeholder="Pin Code"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN -->
                        <div class="loan-entry-right">
                            <div class="loan-section">
                                <div class="loan-section-title">Scheme Details</div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Loan Name:</label><input type="text" id="loanName" value="TEST LOAN" placeholder="Loan Name"></div>
                                    <div class="loan-field"><label>Loan Term:</label><input type="text" id="loanTerm" value="12 months" placeholder="Loan Term"></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Loan Amount:</label><input type="text" id="loanAmount" placeholder="Loan Amount"></div>
                                    <div class="loan-field"><label>Interest Type:</label><select id="interestType"><option>FLAT</option><option>REDUCING</option></select></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Cheque Date:</label><input type="date" id="chequeDate" value="2026-04-04"></div>
                                    <div class="loan-field"><label>Cheque No:</label><input type="text" id="chequeNo" placeholder="Cheque No"></div>
                                    <div class="loan-field"><label>Bank/Branch:</label><input type="text" id="bankBranch" placeholder="Bank/Branch"></div>
                                </div>
                            </div>
                            
                            <div class="loan-section">
                                <div class="loan-section-title">Guaranter Cheque Details</div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Guarantee Date:</label><input type="date" id="guaranteeDate" value="2026-04-04"></div>
                                    <div class="loan-field"><label>Cheque Date:</label><input type="date" id="guaranteeChequeDate" value="2026-04-04"></div>
                                </div>
                                <div class="loan-row">
                                    <div class="loan-field"><label>Cheque No:</label><input type="text" id="guaranteeChequeNo" placeholder="Cheque No"></div>
                                    <div class="loan-field"><label>Bank/Branch:</label><input type="text" id="guaranteeBankBranch" placeholder="Bank/Branch"></div>
                                </div>
                            </div>
                            
                            <div class="loan-section">
                                <div class="loan-section-title">Primary Security</div>
                                <div class="loan-file-row">
                                    <button class="browse-btn" onclick="document.getElementById('primarySecurity').click()">Browse</button>
                                    <input type="file" id="primarySecurity" style="display:none">
                                    <span id="primaryFileName" class="file-name">No file chosen</span>
                                </div>
                            </div>
                            
                            <div class="loan-section">
                                <div class="loan-section-title">Secondary Security</div>
                                <div class="loan-file-row">
                                    <button class="browse-btn" onclick="document.getElementById('secondarySecurity').click()">Browse</button>
                                    <input type="file" id="secondarySecurity" style="display:none">
                                    <span id="secondaryFileName" class="file-name">No file chosen</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="loan-footer-buttons">
                        <button class="loan-footer-btn new" onclick="newLoanEntry()">New</button>
                        <button class="loan-footer-btn save" onclick="saveLoanEntry()">Save</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan Requisition Container -->

        <!-- Group Loan Requisition Container -->
        <div id="groupCashLoanContainer" style="display: none;">
            <div class="group-loan-wrapper">
                <div class="group-loan-card">
                    <div class="group-loan-header">
                        <h2><i class="bi bi-people-fill"></i> LOAN ENTRY - GROUP CASH LOAN</h2>
                    </div>
                    
                    <div class="group-loan-two-column">
                        <!-- LEFT COLUMN -->
                        <div class="group-loan-left">
                            <div class="group-section">
                                <div class="group-section-title">Group Info</div>
                                <div class="group-row">
                                    <div class="group-field"><label>Group ID</label><select id="groupId"><option value="">Select a group</option><option value="GRP001">GRP001 - Women Group</option><option value="GRP002">GRP002 - Farmer Group</option><option value="GRP003">GRP003 - Self Help Group</option></select></div>
                                    <div class="group-field"><label>Group Head</label><input type="text" id="groupHead" placeholder="Group Head" readonly></div>
                                    <div class="group-field"><label>F/O Code</label><input type="text" id="foCode" placeholder="F/O Code"></div>
                                </div>
                                <div class="group-row">
                                    <div class="group-field"><label>Loan Date</label><input type="date" id="loanDate" value="2026-04-09"></div>
                                    <div class="group-field"><label>GRT Close Date</label><input type="date" id="grtCloseDate" value="2026-04-09"></div>
                                    <div class="group-field"><label>Phone No</label><input type="text" id="phoneNo" placeholder="Phone No"></div>
                                </div>
                                <div class="group-row">
                                    <div class="group-field full-width"><label>Address</label><textarea id="address" rows="2" placeholder="Address"></textarea></div>
                                </div>
                            </div>
                            
                            <div class="group-section">
                                <div class="group-row">
                                    <div class="group-field"><label>Group Name</label><input type="text" id="groupName" placeholder="Group Name" readonly></div>
                                    <div class="group-field"><label>Branch</label><select id="branch"><option>HEAD OFFICE - 001</option><option>BRANCH - 002</option><option>BRANCH - 003</option></select></div>
                                    <div class="group-field"><label>State</label><input type="text" id="state" placeholder="State"></div>
                                    <div class="group-field"><label>PIN</label><input type="text" id="pin" placeholder="PIN"></div>
                                </div>
                            </div>
                            
                            <div class="group-section">
                                <div class="group-row">
                                    <div class="group-field"><label>Product Name</label><select id="productName"><option>TEST LOAN</option><option>GOLD LOAN</option><option>PERSONAL LOAN</option></select></div>
                                    <div class="group-field"><label>Interest Type</label><select id="interestType"><option>FLAT</option><option>REDUCING</option></select></div>
                                    <div class="group-field"><label>Loan Term</label><input type="text" id="loanTerm" value="12" placeholder="Loan Term"></div>
                                </div>
                                <div class="group-row">
                                    <div class="group-field"><label>Loan Amount</label><input type="text" id="loanAmount" value="0" placeholder="Loan Amount"></div>
                                    <div class="group-field"><label>ROI</label><input type="text" id="roi" value="8" placeholder="ROI"></div>
                                    <div class="group-field"><label>Mode</label><select id="mode"><option>WLY</option><option>MLY</option><option>QLY</option></select></div>
                                </div>
                            </div>
                            
                            <div class="group-section">
                                <div class="group-section-title">Membership Fees And Other Deductions</div>
                                <div class="group-row">
                                    <div class="group-field"><label>Processing Fees</label><input type="text" id="processingFees" value="0" placeholder="0 %"><span class="field-suffix">%</span></div>
                                    <div class="group-field"><label>Legal Amount</label><input type="text" id="legalAmount" value="0" placeholder="0 %"><span class="field-suffix">%</span></div>
                                    <div class="group-field"><label>GST</label><input type="text" id="gst" value="0" placeholder="0 %"><span class="field-suffix">%</span></div>
                                    <div class="group-field"><label>Insurance Amount</label><input type="text" id="insuranceAmount" value="0" placeholder="0 %"><span class="field-suffix">%</span></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN - Member Table -->
                        <div class="group-loan-right">
                            <div class="group-section">
                                <div class="group-section-title">Member Details</div>
                                <div class="table-wrapper">
                                    <table class="member-loan-table">
                                        <thead>
                                            <tr>
                                                <th>Member Code</th>
                                                <th>MemberName</th>
                                                <th>Loan Amount</th>
                                                <th>EMI</th>
                                                <th>Processing Fees</th>
                                                <th>GST</th>
                                                <th>Legal Ant</th>
                                                <th>Amount</th>
                                                <th>LoanID</th>
                                                <th>IsOK</th>
                                            </tr>
                                        </thead>
                                        <tbody id="memberLoanTableBody">
                                            <tr><td colspan="10" style="text-align:center">Select a group to view members</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="group-loan-buttons">
                        <button class="group-btn delete" onclick="deleteLoan()">Delete</button>
                        <button class="group-btn new" onclick="newGroupLoan()">New</button>
                        <button class="group-btn submit" onclick="submitGroupLoan()">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Group Loan Requisition Container -->

        <!-- Loan Search Container -->
        <div id="loanSearchContainer" style="display: none;">
            <div class="loan-search-wrapper">
                <div class="loan-search-card">
                    <div class="loan-search-header">
                        <h2><i class="bi bi-search"></i> Loan Search</h2>
                    </div>
                    
                    <div class="loan-search-form">
                        <div class="search-row">
                            <div class="search-field full-width">
                                <label>Search by LoanID / Member Name</label>
                                <input type="text" id="searchText" placeholder="Enter Loan ID or Member Name">
                            </div>
                        </div>
                        <div class="search-row">
                            <div class="search-field full-width">
                                <label>Search by Loan Requisition date</label>
                                <input type="date" id="searchDate">
                            </div>
                        </div>
                    </div>
                    
                    <div class="loan-search-table-section">
                        <div class="table-wrapper">
                            <table class="loan-search-table">
                                <thead>
                                    <tr>
                                        <th>Serial No</th>
                                        <th>Loan Id</th>
                                        <th>Requisition Date</th>
                                        <th>Member ID</th>
                                        <th>Member Name</th>
                                        <th>Loan Scheme</th>
                                        <th>Loan Amount</th>
                                        <th>EMI</th>
                                        <th>Approval Date</th>
                                        <th>Status</th>
                                        <th>Pay</th>
                                    </tr>
                                </thead>
                                <tbody id="loanSearchTableBody">
                                    <tr><td colspan="11" style="text-align:center">No records found</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="loan-search-footer">
                        <div class="footer-row">
                            <div class="footer-field">
                                <label>Status:</label>
                                <select id="statusFilter">
                                    <option value="UnPaid">UnPaid</option>
                                    <option value="Paid">Paid</option>
                                    <option value="Partial">Partial</option>
                                </select>
                            </div>
                            <div class="footer-field">
                                <label>Branch:</label>
                                <select id="branchFilter">
                                    <option value="All Branch">All Branch</option>
                                    <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                                    <option value="BRANCH - 002">BRANCH - 002</option>
                                    <option value="BRANCH - 003">BRANCH - 003</option>
                                </select>
                            </div>
                            <div class="footer-buttons">
                                <button class="search-footer-btn" onclick="searchLoans()">Search</button>
                                <button class="close-footer-btn" onclick="closeLoanSearch()">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan Search Container -->

        <!-- Group Payment Container -->
        <div id="loanPaymentGroupContainer" style="display: none;">
            <div class="loan-payment-wrapper">
                <div class="loan-payment-card">
                    <div class="loan-payment-header">
                        <h2><i class="bi bi-credit-card"></i> LOAN PAYMENT - GROUP</h2>
                    </div>
                    
                    <div class="loan-payment-two-column">
                        <!-- LEFT COLUMN -->
                        <div class="loan-payment-left">
                            <div class="payment-section">
                                <div class="payment-section-title">Group Info</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Member ID:</label><select id="memberId" onchange="loadGroupForPayment()"><option value="">Select a group</option><option value="GRP001">GRP001 - Women Group</option><option value="GRP002">GRP002 - Farmer Group</option></select></div>
                                    <div class="payment-field"><label>Group Name:</label><input type="text" id="groupName" readonly placeholder="Group Name"></div>
                                    <div class="payment-field"><label>FO Name:</label><input type="text" id="foName" readonly placeholder="FO Name"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Branch:</label><input type="text" id="branch" value="HEAD OFFICE - 001" readonly></div>
                                    <div class="payment-field"><label>State:</label><input type="text" id="state" readonly placeholder="State"></div>
                                    <div class="payment-field"><label>PIN:</label><input type="text" id="pin" readonly placeholder="PIN"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field full-width"><label>Address:</label><textarea id="address" rows="2" readonly placeholder="Address"></textarea></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Phone No:</label><input type="text" id="phoneNo" readonly placeholder="Phone No"></div>
                                </div>
                            </div>
                            
                            <div class="payment-section">
                                <div class="payment-section-title">Loan Info</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Product Name:</label><input type="text" id="productName" value="TEST LOAN" readonly></div>
                                    <div class="payment-field"><label>Interest Type:</label><input type="text" id="interestType" value="FLAT" readonly></div>
                                    <div class="payment-field"><label>Loan Term:</label><input type="text" id="loanTerm" value="12" readonly></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Loan Amount:</label><input type="text" id="loanAmount" readonly></div>
                                    <div class="payment-field"><label>ROI</label><input type="text" id="roi" value="8" readonly></div>
                                    <div class="payment-field"><label>EMI:</label><input type="text" id="emi" readonly></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Processing Fees:</label><input type="text" id="processingFees" value="2%" readonly></div>
                                    <div class="payment-field"><label>Legal Amount:</label><input type="text" id="legalAmount" value="0" readonly></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>GST:</label><input type="text" id="gst" value="0%" readonly></div>
                                    <div class="payment-field"><label>Insurance Amount:</label><input type="text" id="insuranceAmount" value="0%" readonly></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN -->
                        <div class="loan-payment-right">
                            <div class="payment-section">
                                <div class="payment-section-title">Center</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>SELECT</label><select id="centerSelect"><option>SELECT</option><option>CENTER A</option><option>CENTER B</option></select></div>
                                    <div class="payment-field"><label>SELECT</label><select id="subCenterSelect"><option>SELECT</option><option>SUB CENTER 1</option><option>SUB CENTER 2</option></select></div>
                                </div>
                            </div>
                            
                            <div class="payment-section">
                                <div class="payment-section-title">Member Details</div>
                                <div class="table-wrapper">
                                    <table class="member-payment-table">
                                        <thead>
                                            <tr>
                                                <th>Member Code</th><th>MemberName</th><th>Loan Amount</th><th>EMI</th>
                                                <th>Processing Fees</th><th>GST</th><th>Legal Ant</th><th>Amount</th><th>LoanID</th><th>IoK</th>
                                            </tr>
                                        </thead>
                                        <tbody id="paymentMemberTableBody">
                                            <tr><td colspan="10" style="text-align:center">Select a group to view members</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <div class="payment-section">
                                <div class="payment-options">
                                    <span class="options-label">Payment Options</span>
                                    <button class="payment-option paid" onclick="setPaymentStatus('PAID')">PAID</button>
                                    <button class="payment-option notpaid" onclick="setPaymentStatus('NOT PAID')">NOT PAID</button>
                                    <button class="payment-option pay" onclick="processPayment()">PAY</button>
                                    <button class="payment-option revert" onclick="revertPayment()">REVERT</button>
                                </div>
                            </div>
                            
                            <div class="payment-section">
                                <div class="installment-row">
                                    <div class="installment-field">
                                        <label>Installment Start Date and Time</label>
                                        <input type="date" id="installmentDate" value="2026-04-09">
                                    </div>
                                    <div class="installment-field">
                                        <label>&nbsp;</label>
                                        <input type="text" id="installmentTime" value="12:42 PM" placeholder="Time">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Group Payment Container -->

        <!-- Collection Scheduler Container -->
        <div id="paymentSchedulerContainer" style="display: none;">
            <div class="payment-scheduler-wrapper">
                <div class="payment-scheduler-card">
                    <div class="payment-scheduler-header">
                        <h2><i class="bi bi-calendar-check"></i> Payment Scheduler</h2>
                    </div>
                    
                    <div class="scheduler-title">
                        <h3>Group Collection Scheduler</h3>
                    </div>
                    
                    <div class="scheduler-two-column">
                        <!-- LEFT COLUMN -->
                        <div class="scheduler-left">
                            <div class="scheduler-row">
                                <div class="scheduler-field">
                                    <label>Group Code:</label>
                                    <select id="groupCode" onchange="loadGroupSchedulerData()">
                                        <option value="">Select Group</option>
                                        <option value="GRP001">GRP001</option>
                                        <option value="GRP002">GRP002</option>
                                        <option value="GRP003">GRP003</option>
                                    </select>
                                </div>
                                <div class="scheduler-field">
                                    <label>Group Name:</label>
                                    <input type="text" id="groupName" readonly placeholder="Group Name">
                                </div>
                                <div class="scheduler-field">
                                    <label>Branch Code</label>
                                    <input type="text" id="branchCode" readonly placeholder="Branch Code">
                                </div>
                                <div class="scheduler-field">
                                    <label>Center Code</label>
                                    <input type="text" id="centerCode" readonly placeholder="Center Code">
                                </div>
                            </div>
                            
                            <div class="scheduler-row">
                                <div class="scheduler-field">
                                    <label>Branch Name:</label>
                                    <input type="text" id="branchName" readonly placeholder="Branch Name">
                                </div>
                                <div class="scheduler-field">
                                    <label>Center Name:</label>
                                    <input type="text" id="centerName" readonly placeholder="Center Name">
                                </div>
                                <div class="scheduler-field">
                                    <label>&nbsp;</label>
                                    <button class="confirm-generate-btn" onclick="confirmAndGenerate()">Confirm And Generate</button>
                                </div>
                            </div>
                            
                            <div class="scheduler-row">
                                <div class="scheduler-field">
                                    <label>Collector:</label>
                                    <input type="text" id="collector" placeholder="Collector Name">
                                </div>
                                <div class="scheduler-field">
                                    <label>Loan Mode:</label>
                                    <select id="loanMode">
                                        <option>WLY</option>
                                        <option>MLY</option>
                                        <option>QLY</option>
                                    </select>
                                </div>
                                <div class="scheduler-field">
                                    <label>Collection Start From:</label>
                                    <input type="date" id="collectionStartDate" value="2026-04-09">
                                </div>
                                <div class="scheduler-field">
                                    <label>Day of Week:</label>
                                    <select id="dayOfWeek">
                                        <option>Monday</option>
                                        <option>Tuesday</option>
                                        <option>Wednesday</option>
                                        <option>Thursday</option>
                                        <option>Friday</option>
                                        <option>Saturday</option>
                                        <option>Sunday</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="scheduler-row">
                                <div class="scheduler-field">
                                    <label>Loan Term:</label>
                                    <input type="text" id="loanTerm" placeholder="Loan Term">
                                </div>
                                <div class="scheduler-field full-width">
                                    <label>Loan paid on this Group on</label>
                                    <input type="date" id="loanPaidDate" value="2026-04-09">
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN - Member List Table -->
                        <div class="scheduler-right">
                            <div class="scheduler-table-section">
                                <div class="table-wrapper">
                                    <table class="member-scheduler-table">
                                        <thead>
                                            <tr>
                                                <th>MemberCode</th>
                                                <th>MemberName</th>
                                                <th>LoanID</th>
                                                <th>LoanAmount</th>
                                                <th>PayDate</th>
                                                <th>Term</th>
                                                <th>EMI</th>
                                            </tr>
                                        </thead>
                                        <tbody id="schedulerMemberTableBody">
                                            <tr><td colspan="7" style="text-align:center">Select a group to view members</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Collection Scheduler Container -->

        <!-- Product Loan Requisition Container -->
        <div id="ProductLoanEntry" style="display: none;">
            <div class="product-loan-entry-wrapper">
                <div class="product-loan-entry-card">
                    <div class="product-loan-entry-header">
                        <h2>ANJU MICRO SELFHELP ASSOCIATION - [Loan Entry - Member]</h2>
                    </div>
                    
                    <div class="product-loan-nav-tabs">
                        <button class="nav-tab">Master</button>
                        <button class="nav-tab">Loan Preparation</button>
                        <button class="nav-tab">Member</button>
                        <button class="nav-tab">Collector</button>
                        <button class="nav-tab active">Loan Section</button>
                        <button class="nav-tab">Modification</button>
                        <button class="nav-tab">Accounts</button>
                        <button class="nav-tab">Report</button>
                        <button class="nav-tab">Mobile</button>
                    </div>
                    
                    <div class="product-loan-title">
                        <h3>LOAN ENTRY - MEMBER</h3>
                    </div>
                    
                    <div class="product-loan-two-column">
                        <!-- LEFT COLUMN -->
                        <div class="product-loan-left">
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Search Details</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Applicant Name</label><input type="text" id="pleApplicantName" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Loan ID</label><input type="text" id="pleLoanId" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Member ID</label><input type="text" id="pleMemberId" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Branch</label><input type="text" id="pleBranch" value="HEAD OFFICE - 001" readonly></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Form No</label><input type="text" id="pleFormNo" placeholder="Form No"></div>
                                    <div class="product-loan-field"><label>Date</label><input type="date" id="pleLoanDate" value="2026-04-04"></div>
                                    <div class="product-loan-field"><label>Loan Amount</label><input type="text" id="pleLoanAmount" placeholder="Loan Amount"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Deductions</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Processing Fee.</label><input type="text" id="pleProcessingFee" placeholder="Processing Fee"></div>
                                    <div class="product-loan-field"><label>GST Amt.</label><input type="text" id="pleGstAmt" placeholder="GST Amt"></div>
                                    <div class="product-loan-field"><label>Legal Amt.</label><input type="text" id="pleLegalAmt" placeholder="Legal Amt"></div>
                                    <div class="product-loan-field"><label>Insurance Amt.</label><input type="text" id="pleInsuranceAmt" placeholder="Insurance Amt"></div>
                                </div>
                            </div>
                            
                            <!-- 1st GUARANTOR SECTION -->
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">1st Guarantor</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Member No.</label><input type="text" id="pleGuarantor1MemberNo" placeholder="Member No."></div>
                                    <div class="product-loan-field"><label>Guarantor Name</label><input type="text" id="pleGuarantor1Name" placeholder="Guarantor Name"></div>
                                    <div class="product-loan-field"><label>Guardian Name</label><input type="text" id="pleGuarantor1Guardian" placeholder="Guardian Name"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Address</label><input type="text" id="pleGuarantor1Address" placeholder="Address"></div>
                                    <div class="product-loan-field"><label>Phone No</label><input type="text" id="pleGuarantor1Phone" placeholder="Phone No"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>PAN No.</label><input type="text" id="pleGuarantor1Pan" placeholder="PAN No."></div>
                                    <div class="product-loan-field"><label>Aadhar No.</label><input type="text" id="pleGuarantor1Aadhar" placeholder="Aadhar No."></div>
                                    <div class="product-loan-field"><label>Relation</label><input type="text" id="pleGuarantor1Relation" placeholder="Relation"></div>
                                </div>
                            </div>
                            
                            <!-- 2nd GUARANTOR SECTION -->
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">2nd Guarantor</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Member No.</label><input type="text" id="pleGuarantor2MemberNo" placeholder="Member No."></div>
                                    <div class="product-loan-field"><label>Guarantor Name</label><input type="text" id="pleGuarantor2Name" placeholder="Guarantor Name"></div>
                                    <div class="product-loan-field"><label>Guardian Name</label><input type="text" id="pleGuarantor2Guardian" placeholder="Guardian Name"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Address</label><input type="text" id="pleGuarantor2Address" placeholder="Address"></div>
                                    <div class="product-loan-field"><label>Phone No</label><input type="text" id="pleGuarantor2Phone" placeholder="Phone No"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>PAN No.</label><input type="text" id="pleGuarantor2Pan" placeholder="PAN No."></div>
                                    <div class="product-loan-field"><label>Aadhar No.</label><input type="text" id="pleGuarantor2Aadhar" placeholder="Aadhar No."></div>
                                    <div class="product-loan-field"><label>Relation</label><input type="text" id="pleGuarantor2Relation" placeholder="Relation"></div>
                                </div>
                            </div>
                            
                            <!-- 3rd GUARANTOR SECTION -->
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">3rd Guarantor</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Member No.</label><input type="text" id="pleGuarantor3MemberNo" placeholder="Member No."></div>
                                    <div class="product-loan-field"><label>Guarantor Name</label><input type="text" id="pleGuarantor3Name" placeholder="Guarantor Name"></div>
                                    <div class="product-loan-field"><label>Guardian Name</label><input type="text" id="pleGuarantor3Guardian" placeholder="Guardian Name"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Address</label><input type="text" id="pleGuarantor3Address" placeholder="Address"></div>
                                    <div class="product-loan-field"><label>Phone No</label><input type="text" id="pleGuarantor3Phone" placeholder="Phone No"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>PAN No.</label><input type="text" id="pleGuarantor3Pan" placeholder="PAN No."></div>
                                    <div class="product-loan-field"><label>Aadhar No.</label><input type="text" id="pleGuarantor3Aadhar" placeholder="Aadhar No."></div>
                                    <div class="product-loan-field"><label>Relation</label><input type="text" id="pleGuarantor3Relation" placeholder="Relation"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Previous Loan</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field full-width"><input type="text" id="plePreviousLoan" placeholder="Blank"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Personal Info</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Holder's DOB</label><input type="date" id="pleHolderDob" value="2026-04-04" onchange="calculateProductLoanAge()"></div>
                                    <div class="product-loan-field"><label>Loan Holder's Age</label><input type="text" id="pleHolderAge" readonly placeholder="Auto"></div>
                                    <div class="product-loan-field"><label>Guardian Name</label><input type="text" id="pleGuardianName" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Phone No</label><input type="text" id="plePhoneNo" placeholder="Blank"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field full-width"><label>Address</label><textarea id="pleAddress" rows="2" placeholder="Blank"></textarea></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Pin Code</label><input type="text" id="plePinCode" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Relation</label><input type="text" id="pleRelation" placeholder="Blank"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Member Cheque Details</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Cheque Date</label><input type="date" id="pleMemberChequeDate" value="2026-04-04"></div>
                                    <div class="product-loan-field"><label>Cheque No</label><input type="text" id="pleMemberChequeNo" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Bank/Branch</label><input type="text" id="pleMemberBankBranch" placeholder="Blank"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Guarantor Cheque Details</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Cheque Date</label><input type="date" id="pleGuarantorChequeDate" value="2026-04-04"></div>
                                    <div class="product-loan-field"><label>Cheque No</label><input type="text" id="pleGuarantorChequeNo" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Bank/Branch</label><input type="text" id="pleGuarantorBankBranch" placeholder="Blank"></div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN -->
                        <div class="product-loan-right">
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Scheme Details</div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Product Name</label><select id="pleProductName"><option>PRODUCT LOAN</option><option>TEST LOAN</option><option>GOLD LOAN</option></select></div>
                                    <div class="product-loan-field"><label>Item Name</label><input type="text" id="pleItemName" value="LED 28\"" placeholder="Item Name"></div>
                                    <div class="product-loan-field"><label>Down Payment</label><input type="text" id="pleDownPayment" placeholder="Down Payment"></div>
                                    <div class="product-loan-field"><label>Available Stock</label><input type="text" id="pleAvailableStock" placeholder="Available Stock"></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>Loan Term</label><input type="text" id="pleLoanTerm" placeholder="Term"></div>
                                    <div class="product-loan-field"><label>Mode</label><select id="pleMode"><option>WLY</option><option>MLY</option><option>QLY</option></select></div>
                                    <div class="product-loan-field"><label>ROI + EMI</label><input type="text" id="pleRoiEmi" placeholder="ROI + EMI"></div>
                                    <div class="product-loan-field"><label>Interest Type</label><select id="pleInterestType"><option>FLAT</option><option>REDUCING</option></select></div>
                                </div>
                                <div class="product-loan-row">
                                    <div class="product-loan-field"><label>S.Tax</label><input type="text" id="pleStax" placeholder="S.Tax"></div>
                                    <div class="product-loan-field"><label>Vendor Name</label><select id="pleVendorName"><option>SAYONARA</option><option>FINSPERITY LIMITED</option></select></div>
                                    <div class="product-loan-field"><label>Collector Code</label><input type="text" id="pleCollectorCode" placeholder="Blank"></div>
                                    <div class="product-loan-field"><label>Purpose</label><input type="text" id="plePurpose" placeholder="Blank"></div>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="fill-product-btn-section">
                                    <button class="fill-product-data-btn" onclick="fillProductData()">Fill Product Data</button>
                                </div>
                            </div>
                            
                            <div class="product-loan-section">
                                <div class="product-loan-section-title">Primary Security</div>
                                <div class="security-row">
                                    <button class="browse-security-btn" onclick="triggerPrimarySecurity()">Browse</button>
                                    <input type="file" id="plePrimarySecurity" style="display:none">
                                    <span id="plePrimaryFileName" class="file-name">No file chosen</span>
                                </div>
                            </div>
                            
                            <div class="product-loan-footer-buttons">
                                <button class="product-loan-footer-btn new" onclick="resetProductLoanForm()">New</button>
                                <button class="product-loan-footer-btn save" onclick="saveProductLoanEntry()">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Product Loan Requisition Container -->

        <!-- Collection Sheet Print Container -->
        <div id="collectionSheetPrintContainer" style="display: none;">
            <div class="collection-sheet-wrapper">
                <div class="collection-sheet-card">
                    <div class="collection-sheet-header">
                        <h2><i class="bi bi-printer"></i> Collection Sheet Print</h2>
                    </div>
                    
                    <div class="collection-sheet-tabs">
                        <button class="sheet-tab active" onclick="switchCollectionTab('collector')">Collector Wise Search</button>
                        <button class="sheet-tab" onclick="switchCollectionTab('group')">Group Wise Search</button>
                    </div>
                    
                    <!-- Collector Wise Search Panel -->
                    <div id="collectorWisePanel" class="sheet-panel active">
                        <div class="sheet-form">
                            <div class="sheet-row">
                                <div class="sheet-field">
                                    <label>Collector Code</label>
                                    <select id="collectorCode">
                                        <option value="">Select Collector</option>
                                        <option value="COL001">COL001 - RAHUL KUMAR</option>
                                        <option value="COL002">COL002 - PRIYA SHARMA</option>
                                        <option value="COL003">COL003 - AMIT PATEL</option>
                                    </select>
                                </div>
                                <div class="sheet-field">
                                    <label>&nbsp;</label>
                                    <input type="date" id="collectorFromDate" value="2026-04-07">
                                </div>
                                <div class="sheet-field">
                                    <label>&nbsp;</label>
                                    <input type="date" id="collectorToDate" value="2026-04-09">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Group Wise Search Panel -->
                    <div id="groupWisePanel" class="sheet-panel">
                        <div class="sheet-form">
                            <div class="sheet-row">
                                <div class="sheet-field">
                                    <label>Group ID</label>
                                    <select id="groupId">
                                        <option value="">Select Group</option>
                                        <option value="GRP001">GRP001 - Women Group</option>
                                        <option value="GRP002">GRP002 - Farmer Group</option>
                                        <option value="GRP003">GRP003 - Self Help Group</option>
                                    </select>
                                </div>
                                <div class="sheet-field">
                                    <label>&nbsp;</label>
                                    <input type="date" id="groupFromDate" value="2026-04-07">
                                </div>
                                <div class="sheet-field">
                                    <label>&nbsp;</label>
                                    <input type="date" id="groupToDate" value="2026-04-09">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="sheet-buttons">
                        <button class="sheet-search-btn" onclick="searchCollectionSheet()"><i class="bi bi-search"></i> Search</button>
                        <button class="sheet-exit-btn" onclick="exitCollectionSheet()"><i class="bi bi-x-circle"></i> Exit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Collection Sheet Print Container -->

        <!-- Loan RePayment Single Container -->
        <div id="LoanPaymentModule" style="display: none;">
            <div class="loan-payment-module-wrapper">
                <div class="loan-payment-module-card">
                    <div class="loan-payment-module-header">
                        <h2><i class="bi bi-credit-card"></i> Loan Re-Payment-Single</h2>
                    </div>
                    
                    <!-- Search Section -->
                    <div class="payment-search-section">
                        <div class="payment-search-title">Search</div>
                        <div class="payment-search-row">
                            <div class="payment-search-field">
                                <label>Enter Loan ID</label>
                                <input type="text" id="lpmLoanId" placeholder="Enter Loan ID">
                                <button class="payment-search-btn" onclick="searchLoanPayment()">Search</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="payment-two-column">
                        <!-- LEFT COLUMN - Loan Details -->
                        <div class="payment-left">
                            <div class="payment-section">
                                <div class="payment-section-title">Loan Details</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Loan ID:</label><input type="text" id="lpmLoanIdDisplay" readonly placeholder="Loan ID"></div>
                                    <div class="payment-field"><label>Form No</label><input type="text" id="lpmFormNo" readonly placeholder="Form No"></div>
                                    <div class="payment-field"><label>Member ID:</label><input type="text" id="lpmMemberId" readonly placeholder="Member ID"></div>
                                    <div class="payment-field"><label>Date</label><input type="date" id="lpmDate" value="2026-04-09"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Holder Name:</label><input type="text" id="lpmHolderName" readonly placeholder="Holder Name"></div>
                                    <div class="payment-field"><label>Phone No:</label><input type="text" id="lpmPhoneNo" readonly placeholder="Phone No"></div>
                                    <div class="payment-field"><label>Holders Age:</label><input type="text" id="lpmHolderAge" readonly placeholder="Age"></div>
                                    <div class="payment-field"><label>Term:</label><input type="text" id="lpmTerm" readonly placeholder="Term"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Loan Name:</label><input type="text" id="lpmLoanName" readonly placeholder="Loan Name"></div>
                                    <div class="payment-field"><label>Loan Amount:</label><input type="text" id="lpmLoanAmount" readonly placeholder="Loan Amount"></div>
                                    <div class="payment-field"><label>Mode:</label><input type="text" id="lpmMode" readonly placeholder="Mode"></div>
                                    <div class="payment-field"><label>ROI:</label><input type="text" id="lpmRoi" readonly placeholder="ROI"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Processing Fee:</label><input type="text" id="lpmProcessingFee" readonly placeholder="Processing Fee"></div>
                                    <div class="payment-field"><label>GST:</label><input type="text" id="lpmGst" readonly placeholder="GST"></div>
                                    <div class="payment-field"><label>Insurance Amount:</label><input type="text" id="lpmInsuranceAmt" readonly placeholder="Insurance Amount"></div>
                                    <div class="payment-field"><label>EMI Amount:</label><input type="text" id="lpmEmiAmount" readonly placeholder="EMI Amount"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Account No:</label><input type="text" id="lpmAccountNo" readonly placeholder="Account No"></div>
                                    <div class="payment-field"><label>Cheque Date:</label><input type="date" id="lpmChequeDate" placeholder="Cheque Date"></div>
                                    <div class="payment-field"><label>Bank Name:</label><input type="text" id="lpmBankName" placeholder="Bank Name"></div>
                                    <div class="payment-field"><label>Cheque No:</label><input type="text" id="lpmChequeNo" placeholder="Cheque No"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field full-width"><label>Loan Against Deposit (Policy):</label><input type="text" id="lpmLoanAgainstDeposit" placeholder="Loan Against Deposit"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Payment By:</label><input type="text" id="lpmPaymentBy" placeholder="Payment By"></div>
                                    <div class="payment-field"><label>Bank A/C:</label><input type="text" id="lpmBankAc" placeholder="Bank A/C"></div>
                                </div>
                            </div>
                            
                            <!-- PAID EMIs Table -->
                            <div class="payment-section">
                                <div class="payment-section-title">PAID EMIs</div>
                                <div class="table-wrapper">
                                    <table class="paid-emis-table">
                                        <thead>
                                            <tr><th>EMI No</th><th>Due Date</th><th>Pay Date</th><th>Amount</th><th>Late Fine</th></tr>
                                        </thead>
                                        <tbody id="lpmPaidEmisTable">
                                            <tr><td colspan="5" style="text-align:center">No paid EMIs found</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <!-- RIGHT COLUMN - LOAN PAYMENT -->
                        <div class="payment-right">
                            <div class="payment-section">
                                <div class="payment-section-title">LOAN PAYMENT</div>
                                <div class="payment-subsection-title">Amount Details</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Total Payable Rs.:</label><input type="text" id="lpmTotalPayable" readonly placeholder="0.00"></div>
                                    <div class="payment-field"><label>Total Paid:</label><input type="text" id="lpmTotalPaid" readonly placeholder="0.00"></div>
                                    <div class="payment-field"><label>Due Amount:</label><input type="text" id="lpmDueAmount" readonly placeholder="0.00"></div>
                                    <div class="payment-field"><label>Advance Amt:</label><input type="text" id="lpmAdvanceAmt" readonly placeholder="0.00"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Payment Number:</label><input type="text" id="lpmPaymentNumber" placeholder="Payment Number"></div>
                                    <div class="payment-field"><label>Payment Amount:</label><input type="text" id="lpmPaymentAmount" placeholder="0.00"></div>
                                    <div class="payment-field"><label>Total Amount:</label><input type="text" id="lpmTotalAmount" readonly placeholder="0.00"></div>
                                    <div class="payment-field"><label>Date:</label><input type="date" id="lpmPaymentDate" value="2026-04-09"></div>
                                </div>
                            </div>
                            
                            <div class="payment-section">
                                <div class="payment-subsection-title">Payment Details</div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Deposit Branch</label><input type="text" id="lpmDepositBranch" value="HEAD OFFICE - 001" placeholder="Deposit Branch"></div>
                                    <div class="payment-field"><label>Payment By:</label><select id="lpmPaymentMode"><option>CASH</option><option>CHEQUE</option><option>ONLINE</option></select></div>
                                    <div class="payment-field"><label>Cheque Date:</label><input type="date" id="lpmPaymentChequeDate" placeholder="Cheque Date"></div>
                                    <div class="payment-field"><label>Cheque No:</label><input type="text" id="lpmPaymentChequeNo" placeholder="Cheque No"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Bank Name:</label><input type="text" id="lpmPaymentBankName" placeholder="Bank Name"></div>
                                    <div class="payment-field"><label>Savings Ac:</label><input type="text" id="lpmSavingsAc" placeholder="Savings Ac"></div>
                                    <div class="payment-field"><label>Receipted A/C:</label><input type="text" id="lpmReceiptedAc" placeholder="Receipted A/C"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field full-width"><label>Payment Remarks:</label><input type="text" id="lpmPaymentRemarks" placeholder="Payment Remarks"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field"><label>Penalty Deduct:</label><input type="text" id="lpmPenaltyDeduct" placeholder="Penalty Deduct"></div>
                                    <div class="payment-field"><label>Penalty Charges:</label><input type="text" id="lpmPenaltyCharges" placeholder="Penalty Charges"></div>
                                    <div class="payment-field checkbox-field">
                                        <label><input type="checkbox" id="lpmPayDueLateFine"> Pay Due LateFine</label>
                                    </div>
                                    <div class="payment-field"><label>Due Late Fine:</label><input type="text" id="lpmDueLateFine" placeholder="Due Late Fine"></div>
                                </div>
                                <div class="payment-row">
                                    <div class="payment-field checkbox-field">
                                        <label><input type="checkbox" id="lpmCashCheckbox"> CASH</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="payment-buttons-row">
                                <button class="payment-btn save" onclick="saveLoanPayment()">Save</button>
                                <button class="payment-btn delete-emi" onclick="deleteLastEmi()">Delete Last EMI</button>
                                <button class="payment-btn print-mr" onclick="printMoneyReceipt()">Print MR.</button>
                                <button class="payment-btn print" onclick="printPaymentDetails()">Print</button>
                                <button class="payment-btn new" onclick="resetLoanPayment()">New</button>
                            </div>
                            
                            <!-- NEW EMI TABLE SECTION -->
                            <div class="payment-section">
                                <div class="payment-section-title">NEW EMI</div>
                                <div class="table-wrapper">
                                    <table class="new-emis-table">
                                        <thead>
                                            <tr><th>EMI No</th><th>Due Date</th><th>Pay Date</th><th>Amount</th><th>Late Fine</th><th>Action</th></tr>
                                        </thead>
                                        <tbody id="lpmNewEmisTable">
                                            <tr><td colspan="6" style="text-align:center">No new EMI entries</td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="add-emi-row">
                                    <button class="add-emi-btn" onclick="addNewEmiRow()">+ Add EMI</button>
                                </div>
                            </div>
                            
                            <div class="advance-emis-section">
                                <label>ADVANCE EMIs</label>
                                <input type="text" id="lpmAdvanceEmis" value="0.00" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan RePayment Single Container -->

        <!-- Loan RePayment Group Container -->
        <div id="RepaymentSettingsContainer" style="display: none;">
            <div class="repayment-settings-wrapper">
                <div class="repayment-settings-card">
                    <div class="repayment-settings-header">
                        <h2><i class="bi bi-arrow-repeat"></i> REPAYMENT SETTINGS</h2>
                    </div>
                    
                    <div class="repayment-form">
                        <div class="repayment-row">
                            <div class="repayment-field">
                                <label>Repayment Date:</label>
                                <input type="date" id="rsRepaymentDate" value="2026-04-09">
                            </div>
                            <div class="repayment-field">
                                <label>Select Group:</label>
                                <select id="rsSelectGroup" onchange="loadGroupLoanIds()">
                                    <option value="">Select Group</option>
                                    <option value="GRP001">GRP001 - Women Empowerment Group</option>
                                    <option value="GRP002">GRP002 - Farmer Producer Group</option>
                                    <option value="GRP003">GRP003 - Self Help Group</option>
                                </select>
                            </div>
                            <div class="repayment-field">
                                <label>Group Loan ID:</label>
                                <select id="rsGroupLoanId" onchange="loadRepaymentData()">
                                    <option value="">Select Group Loan ID</option>
                                </select>
                            </div>
                            <div class="repayment-field">
                                <label>&nbsp;</label>
                                <button class="repayment-load-btn" onclick="loadRepaymentData()">LOAD</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Repayment Table -->
                    <div class="repayment-table-section">
                        <div class="table-wrapper">
                            <table class="repayment-table">
                                <thead>
                                    <tr>
                                        <th>LoanID</th>
                                        <th>MemberID</th>
                                        <th>ApplicantName</th>
                                        <th>PayNo</th>
                                        <th>EMNo</th>
                                        <th>EMI</th>
                                        <th>TotalPaid</th>
                                        <th>PrevAdvance</th>
                                        <th>CollectionAmount</th>
                                        <th>TotalAmount</th>
                                        <th>NoOFEMI</th>
                                        <th>NewAdvance</th>
                                    </tr>
                                </thead>
                                <tbody id="rsRepaymentTableBody">
                                    <tr><td colspan="12" style="text-align:center">Select Group and click LOAD to view data</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="repayment-footer">
                        <div class="footer-row">
                            <div class="footer-field">
                                <label>Payment Date:</label>
                                <input type="date" id="rsPaymentDate" value="2026-04-09">
                            </div>
                            <div class="footer-field">
                                <label>Total Projection Amount:</label>
                                <input type="text" id="rsTotalProjectionAmount" readonly placeholder="0.00">
                            </div>
                            <div class="footer-field">
                                <label>Total Collection Amount:</label>
                                <input type="text" id="rsTotalCollectionAmount" readonly placeholder="0.00">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan RePayment Group Container -->

        <!-- Loan Pre Closer Container -->
        <div id="LoanPreCloserContainer" style="display: none;">
            <div class="loan-precloser-wrapper">
                <div class="loan-precloser-card">
                    <div class="loan-precloser-header">
                        <h2><i class="bi bi-search"></i> Search Loan</h2>
                    </div>
                    
                    <!-- Search Section -->
                    <div class="precloser-search-section">
                        <div class="precloser-search-title">Enter Loan ID</div>
                        <div class="precloser-search-row">
                            <div class="precloser-search-field">
                                <input type="text" id="lpcLoanId" placeholder="Enter Loan ID">
                                <button class="precloser-search-btn" onclick="searchLoanForPreCloser()">Search</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Loan Info Row -->
                    <div class="precloser-info-row">
                        <div class="precloser-info-group">
                            <label>Loan ID</label>
                            <input type="text" id="lpcLoanIdDisplay" readonly>
                        </div>
                        <div class="precloser-info-group">
                            <label>Form No</label>
                            <input type="text" id="lpcFormNo" readonly>
                        </div>
                        <div class="precloser-info-group">
                            <label>Member ID</label>
                            <input type="text" id="lpcMemberId" readonly>
                        </div>
                        <div class="precloser-info-group">
                            <label>Date</label>
                            <input type="date" id="lpcDate" value="2026-04-09">
                        </div>
                    </div>
                    
                    <div class="precloser-info-row">
                        <div class="precloser-info-group">
                            <label>Holder Name</label>
                            <input type="text" id="lpcHolderName" readonly>
                        </div>
                        <div class="precloser-info-group">
                            <label>Phone No</label>
                            <input type="text" id="lpcPhoneNo" readonly>
                        </div>
                        <div class="precloser-info-group">
                            <label>Holder's Age</label>
                            <input type="text" id="lpcHolderAge" readonly>
                        </div>
                    </div>
                    
                    <!-- Loan Product Information -->
                    <div class="precloser-section-title">Loan Product Information</div>
                    <div class="precloser-product-row">
                        <div class="precloser-product-group">
                            <label>Product</label>
                            <input type="text" id="lpcProduct" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Term</label>
                            <input type="text" id="lpcTerm" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Loan Amount</label>
                            <input type="text" id="lpcLoanAmount" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Mode</label>
                            <input type="text" id="lpcMode" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>ROI</label>
                            <input type="text" id="lpcRoi" readonly>
                        </div>
                    </div>
                    
                    <div class="precloser-product-row">
                        <div class="precloser-product-group">
                            <label>Membership</label>
                            <input type="text" id="lpcMembership" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Processing Fees</label>
                            <input type="text" id="lpcProcessingFees" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Service Tax</label>
                            <input type="text" id="lpcServiceTax" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>Insurance Amount</label>
                            <input type="text" id="lpcInsuranceAmount" readonly>
                        </div>
                        <div class="precloser-product-group">
                            <label>EMI Amount</label>
                            <input type="text" id="lpcEmiAmount" readonly>
                        </div>
                    </div>
                    
                    <div class="precloser-product-row">
                        <div class="precloser-product-group">
                            <label>Transfer To SB Account</label>
                            <input type="text" id="lpcTransferToSb" placeholder="Transfer To SB Account">
                        </div>
                        <div class="precloser-product-group">
                            <label>Account No</label>
                            <input type="text" id="lpcAccountNo" placeholder="Account No">
                        </div>
                    </div>
                    
                    <!-- Loan Against Deposit -->
                    <div class="precloser-section-title">Loan Against Deposit (Policy)</div>
                    <div class="precloser-deposit-row">
                        <div class="precloser-deposit-group">
                            <label>Payment By</label>
                            <input type="text" id="lpcPaymentBy" placeholder="Payment By">
                        </div>
                        <div class="precloser-deposit-group">
                            <label>Cheque No</label>
                            <input type="text" id="lpcChequeNo" placeholder="Cheque No">
                        </div>
                        <div class="precloser-deposit-group">
                            <label>Cheque Date</label>
                            <input type="date" id="lpcChequeDate" value="2026-04-09">
                        </div>
                        <div class="precloser-deposit-group">
                            <label>Bank A/C</label>
                            <input type="text" id="lpcBankAc" placeholder="Bank A/C">
                        </div>
                        <div class="precloser-deposit-group">
                            <label>Bank Name</label>
                            <input type="text" id="lpcBankName" placeholder="Bank Name">
                        </div>
                    </div>
                    
                    <!-- Principal Info -->
                    <div class="precloser-section-title">Principal Info</div>
                    <div class="precloser-principal-row">
                        <div class="precloser-principal-group">
                            <label>Loan Principal</label>
                            <input type="text" id="lpcLoanPrincipal" readonly>
                        </div>
                        <div class="precloser-principal-group">
                            <label>Paid Principal</label>
                            <input type="text" id="lpcPaidPrincipal" readonly>
                        </div>
                        <div class="precloser-principal-group">
                            <label>Due Principal</label>
                            <input type="text" id="lpcDuePrincipal" readonly>
                        </div>
                    </div>
                    
                    <div class="precloser-principal-row">
                        <div class="precloser-principal-group">
                            <label>Payable Principal</label>
                            <input type="text" id="lpcPayablePrincipal" readonly>
                        </div>
                        <div class="precloser-principal-group">
                            <label>Payable Interest</label>
                            <input type="text" id="lpcPayableInterest" readonly>
                        </div>
                    </div>
                    
                    <div class="precloser-principal-row">
                        <div class="precloser-principal-group">
                            <label>Payment Date</label>
                            <input type="date" id="lpcPaymentDate" value="2026-04-09">
                        </div>
                        <div class="precloser-principal-group">
                            <label>Branch Name</label>
                            <input type="text" id="lpcBranchName" value="HEAD OFFICE - 001">
                        </div>
                        <div class="precloser-principal-group checkbox-group">
                            <label><input type="checkbox" id="lpcCashCheckbox"> CASH</label>
                        </div>
                        <div class="precloser-principal-group">
                            <label>Cheque No</label>
                            <input type="text" id="lpcCashChequeNo" placeholder="Cheque No">
                        </div>
                        <div class="precloser-principal-group">
                            <label>Cheque Bank</label>
                            <input type="text" id="lpcChequeBank" placeholder="Cheque Bank">
                        </div>
                    </div>
                    
                    <div class="precloser-principal-row">
                        <div class="precloser-principal-group full-width">
                            <label>Remarks</label>
                            <input type="text" id="lpcRemarks" placeholder="Remarks">
                        </div>
                    </div>
                    
                    <!-- LOAN PRE CLOSER -->
                    <div class="precloser-section-title">LOAN PRE CLOSER</div>
                    <div class="precloser-precloser-row">
                        <div class="precloser-precloser-group">
                            <label>Loan Interest</label>
                            <input type="text" id="lpcLoanInterest" readonly>
                        </div>
                        <div class="precloser-precloser-group">
                            <label>Paid Interest</label>
                            <input type="text" id="lpcPaidInterest" readonly>
                        </div>
                        <div class="precloser-precloser-group">
                            <label>Due Interest</label>
                            <input type="text" id="lpcDueInterest" readonly>
                        </div>
                    </div>
                    
                    <div class="precloser-precloser-row">
                        <div class="precloser-precloser-group">
                            <label>Waiver Interest</label>
                            <input type="text" id="lpcWaiverInterest" placeholder="0.00">
                        </div>
                        <div class="precloser-precloser-group">
                            <label>Settlement Charge</label>
                            <input type="text" id="lpcSettlementCharge" placeholder="0.00">
                        </div>
                        <div class="precloser-precloser-group">
                            <label>Total Amount</label>
                            <input type="text" id="lpcTotalAmount" readonly>
                        </div>
                    </div>
                    
                    <!-- Payable Principal -->
                    <div class="precloser-payable-row">
                        <div class="precloser-payable-group full-width">
                            <label>Payable Principal</label>
                            <input type="text" id="lpcPayablePrincipalBottom" readonly>
                        </div>
                    </div>
                    
                    <!-- Payment Date -->
                    <div class="precloser-payable-row">
                        <div class="precloser-payable-group full-width">
                            <label>Payment Date</label>
                            <input type="date" id="lpcPaymentDateBottom" value="2026-04-09">
                        </div>
                    </div>
                    
                    <!-- Remarks -->
                    <div class="precloser-payable-row">
                        <div class="precloser-payable-group full-width">
                            <label>Remarks</label>
                            <input type="text" id="lpcRemarksBottom" placeholder="Remarks">
                        </div>
                    </div>
                    
                    <!-- TABLE AT THE BOTTOM -->
                    <div class="precloser-table-section">
                        <div class="precloser-table-title">EMI Payment Schedule</div>
                        <div class="precloser-table-wrapper">
                            <table class="precloser-emi-table">
                                <thead>
                                    <tr>
                                        <th>Loan ID</th>
                                        <th>Pay No</th>
                                        <th>Pay Date</th>
                                        <th>Principal</th>
                                        <th>Interest</th>
                                        <th>Amount</th>
                                        <th>Branch</th>
                                        <th>PayBy</th>
                                    </tr>
                                </thead>
                                <tbody id="lpcEmiTableBody">
                                    <tr><td colspan="8" style="text-align:center">Search loan to view EMI schedule</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <!-- Buttons -->
                    <div class="precloser-buttons">
                        <button class="precloser-btn update" onclick="updatePreCloser()">Update</button>
                        <button class="precloser-btn close" onclick="closePreCloser()">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Loan Pre Closer Container -->

<!-- Loan Document Print Container -->
<div id="LoanDocumentPrintContainer" style="display: none;">
    <div class="loan-document-print-wrapper">
        <div class="loan-document-print-card">
            <div class="loan-document-print-header">
                <h2><i class="bi bi-printer"></i> LOAN DOCUMENT PRINT</h2>
            </div>
            
            <!-- Loan No Display -->
            <div class="document-loan-no">
                <label>Loan No. :</label>
                <span id="ldpLoanNo">ARCHANA CHATTOPADHYAY - PL000001</span>
            </div>
            
            <!-- Loan Details Grid -->
            <div class="document-details-grid">
                <div class="document-detail-row">
                    <div class="document-detail-field">
                        <label>Loan ID</label>
                        <input type="text" id="ldpLoanId" value="PL000001" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>Applicant Name</label>
                        <input type="text" id="ldpApplicantName" value="ARCHANA CHATTOPADHYAY" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>Member Code</label>
                        <input type="text" id="ldpMemberCode" value="M001" readonly>
                    </div>
                </div>
                <div class="document-detail-row">
                    <div class="document-detail-field">
                        <label>Loan Name</label>
                        <input type="text" id="ldpLoanName" value="PERSONAL LOAN" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>Term</label>
                        <input type="text" id="ldpTerm" value="12 months" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>Loan Amount</label>
                        <input type="text" id="ldpLoanAmount" value="50,000" readonly>
                    </div>
                </div>
                <div class="document-detail-row">
                    <div class="document-detail-field">
                        <label>ROI</label>
                        <input type="text" id="ldpRoi" value="8%" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>EMI</label>
                        <input type="text" id="ldpEmi" value="4,500" readonly>
                    </div>
                    <div class="document-detail-field">
                        <label>Interest Type</label>
                        <input type="text" id="ldpInterestType" value="FLAT" readonly>
                    </div>
                </div>
            </div>
            
            <!-- Document Checkboxes -->
            <div class="document-checkboxes-section">
                <div class="document-checkbox-row">
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpLoanAgreement"> Loan Agreement
                    </label>
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpApplicationForm"> Application Form
                    </label>
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpTerm"> Term
                    </label>
                </div>
                <div class="document-checkbox-row">
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpSchemeDetails"> Scheme Details
                    </label>
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpLoanPaymentSchedule"> Loan Payment Schedule
                    </label>
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpTermAndCondition"> Term And Condition
                    </label>
                </div>
                <div class="document-checkbox-row">
                    <label class="document-checkbox">
                        <input type="checkbox" id="ldpPaymentDueNotice"> Payment Due Notice
                    </label>
                </div>
            </div>
            
            <!-- Print Button -->
            <div class="document-print-btn-section">
                <button class="document-print-btn" onclick="printLoanDocuments()">Print</button>
            </div>
        </div>
    </div>
</div>
<!-- Loan Document Print Container -->

<!-- Loan Calculator Container -->
<div id="LoanCalculatorContainer" style="display: none;">
    <div class="loan-calculator-wrapper">
        <div class="loan-calculator-card">
            <div class="loan-calculator-header">
                <h2><i class="bi bi-calculator-fill"></i> Loan Calculator</h2>
            </div>
            
            <div class="loan-calculator-form">
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Loan Amount</label>
                        <input type="text" id="calcLoanAmount" value="10000" placeholder="Loan Amount">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Rate of Interest per annum</label>
                        <input type="text" id="calcRateOfInterest" placeholder="Rate of Interest">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>No of Installments</label>
                        <input type="text" id="calcNoOfInstallments" placeholder="No of Installments">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Loan Date</label>
                        <input type="date" id="calcLoanDate" value="2026-04-09">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Loan Mode</label>
                        <select id="calcLoanMode">
                            <option value="">Select Loan Mode</option>
                            <option value="WLY">WLY (Weekly)</option>
                            <option value="MLY">MLY (Monthly)</option>
                            <option value="QLY">QLY (Quarterly)</option>
                        </select>
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Loan Interest Type</label>
                        <select id="calcInterestType">
                            <option value="">Select Interest Type</option>
                            <option value="FLAT">FLAT</option>
                            <option value="REDUCING">REDUCING</option>
                        </select>
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Interest Amount</label>
                        <input type="text" id="calcInterestAmount" readonly placeholder="Interest Amount">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>Total Repayment Amount</label>
                        <input type="text" id="calcTotalRepayment" readonly placeholder="Total Repayment Amount">
                    </div>
                </div>
                
                <div class="calculator-row">
                    <div class="calculator-field">
                        <label>EMI</label>
                        <input type="text" id="calcEmi" readonly placeholder="EMI">
                    </div>
                </div>
            </div>
            
            <div class="calculator-buttons">
                <button class="calculator-card-btn" onclick="showLoanCard()">Click here for Loan Card</button>
                <button class="calculator-calc-btn" onclick="calculateLoan()">CALCULATE</button>
            </div>
        </div>
    </div>
</div>
<!-- Loan Calculator Container -->

<!-- Loan NOC Container -->
<div id="LoanDocumentContainer" style="display: none;">
    <div class="loan-document-wrapper">
        <div class="loan-document-card">
            <div class="loan-document-header">
                <h2><i class="bi bi-file-text-fill"></i> LOAN DOCUMENT</h2>
            </div>
            
            <!-- Loan ID Section -->
            <div class="loan-document-id-section">
                <div class="loan-id-row">
                    <div class="loan-id-field">
                        <label>LOAN ID</label>
                        <input type="text" id="ldocLoanId" placeholder="Enter Loan ID">
                    </div>
                    <div class="loan-id-buttons">
                        <button class="show-btn" onclick="showLoanDocument()">Show</button>
                        <button class="close-btn" onclick="closeLoanDocument()">Close</button>
                    </div>
                </div>
            </div>
            
            <!-- NOC Certificate Card -->
            <div class="noc-certificate-card">
                <div class="noc-card-header">
                    <h3><i class="bi bi-file-check-fill"></i> NOC Certificate</h3>
                </div>
                <div class="noc-card-body">
                    <p class="noc-warning">
                        <i class="bi bi-exclamation-triangle-fill"></i> 
                        Loan Should be Closed before printing of NOC Certificate
                    </p>
                    <button class="download-noc-btn" onclick="downloadNOCCertificate()">
                        <i class="bi bi-download"></i> Download NOC Certificate
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Loan NOC Container -->

<!-- EMI Daywise Report Container -->
<div id="LoanEmiDaywiseReportContainer" style="display: none;">
    <div class="loan-emi-report-wrapper">
        <div class="loan-emi-report-card">
            <div class="loan-emi-report-header">
                <h2><i class="bi bi-calendar-day"></i> LOAN EMI DAYWISE REPORT</h2>
            </div>
            
            <!-- Filter Section -->
            <div class="report-filter-section">
                <div class="filter-row">
                    <div class="filter-field">
                        <label>Branch</label>
                        <select id="reportBranch">
                            <option value="All Branch">All Branch</option>
                            <option value="HEAD OFFICE - 001">HEAD OFFICE - 001</option>
                            <option value="BRANCH - 002">BRANCH - 002</option>
                            <option value="BRANCH - 003">BRANCH - 003</option>
                        </select>
                    </div>
                    <div class="filter-field">
                        <label>Week Day</label>
                        <select id="reportWeekDay">
                            <option value="">-- Select --</option>
                            <option value="Monday">Monday</option>
                            <option value="Tuesday">Tuesday</option>
                            <option value="Wednesday">Wednesday</option>
                            <option value="Thursday">Thursday</option>
                            <option value="Friday">Friday</option>
                            <option value="Saturday">Saturday</option>
                            <option value="Sunday">Sunday</option>
                        </select>
                    </div>
                </div>
                
                <div class="filter-row">
                    <div class="filter-field">
                        <label>Date</label>
                        <input type="date" id="reportFromDate" value="2026-04-09">
                    </div>
                    <div class="filter-field">
                        <label>To</label>
                        <input type="date" id="reportToDate" value="2026-04-09">
                    </div>
                </div>
                
                <div class="filter-buttons">
                    <button class="report-show-btn" onclick="showLoanEmiReport()">Show</button>
                    <button class="report-close-btn" onclick="closeLoanEmiReport()">Close</button>
                </div>
            </div>
            
            <!-- LOAN SEARCH Title -->
            <div class="loan-search-title">
                <h3>LOAN SEARCH</h3>
            </div>
            
            <!-- Report Table -->
            <div class="report-table-section">
                <div class="table-wrapper">
                    <table class="loan-emi-report-table">
                        <thead>
                            <tr>
                                <th>SL No</th>
                                <th>Loan ID</th>
                                <th>Member Name</th>
                                <th>Member Code</th>
                                <th>EMI Amount</th>
                                <th>Due Date</th>
                                <th>Status</th>
                                <th>Branch</th>
                            </tr>
                        </thead>
                        <tbody id="loanEmiReportTableBody">
                            <tr><td colspan="8" style="text-align:center">Click Show to view report</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- EMI Daywise Report Container -->

<!-- Loan Part Payment Container -->
<div id="LoanPartPaymentContainer" style="display: none;">
    <div class="loan-partpayment-wrapper">
        <div class="loan-partpayment-card">
            <div class="loan-partpayment-header">
                <h2><i class="bi bi-credit-card"></i> LOAN PAYMENT</h2>
            </div>
            
            <!-- Enter Loan ID Section -->
            <div class="partpayment-search-section">
                <div class="partpayment-search-title">Enter Loan ID</div>
                <div class="partpayment-search-row">
                    <div class="partpayment-search-field">
                        <input type="text" id="lppLoanId" placeholder="Enter Loan ID">
                        <button class="partpayment-search-btn" onclick="searchPartPaymentLoan()">Search</button>
                    </div>
                </div>
            </div>
            
            <div class="partpayment-two-column">
                <!-- LEFT COLUMN -->
                <div class="partpayment-left">
                    <div class="partpayment-section">
                        <div class="partpayment-section-title">Loan Details information</div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Member ID</label><input type="text" id="lppMemberId" readonly placeholder="Member ID"></div>
                            <div class="partpayment-field"><label>Loan ID</label><input type="text" id="lppLoanIdDisplay" readonly placeholder="Loan ID"></div>
                            <div class="partpayment-field"><label>Holder Name</label><input type="text" id="lppHolderName" readonly placeholder="Holder Name"></div>
                            <div class="partpayment-field"><label>Phone No</label><input type="text" id="lppPhoneNo" readonly placeholder="Phone No"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Product</label><input type="text" id="lppProduct" readonly placeholder="Product"></div>
                            <div class="partpayment-field"><label>Loan Amount</label><input type="text" id="lppLoanAmount" readonly placeholder="Loan Amount"></div>
                            <div class="partpayment-field"><label>Membership</label><input type="text" id="lppMembership" readonly placeholder="Membership"></div>
                            <div class="partpayment-field"><label>Service Tax</label><input type="text" id="lppServiceTax" readonly placeholder="Service Tax"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>EMI Amount</label><input type="text" id="lppEmiAmount" readonly placeholder="EMI Amount"></div>
                            <div class="partpayment-field"><label>Account No</label><input type="text" id="lppAccountNo" readonly placeholder="Account No"></div>
                            <div class="partpayment-field"><label>Loan Against Deposit (Policy)</label><input type="text" id="lppLoanAgainstDeposit" placeholder="Loan Against Deposit"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Payment By</label><input type="text" id="lppPaymentBy" placeholder="Payment By"></div>
                            <div class="partpayment-field"><label>Cheque Date</label><input type="date" id="lppChequeDate" value="2026-04-09"></div>
                            <div class="partpayment-field"><label>Bank Name</label><input type="text" id="lppBankName" placeholder="Bank Name"></div>
                        </div>
                    </div>
                    
                    <div class="partpayment-section">
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Total Payable Rs.</label><input type="text" id="lppTotalPayable" readonly placeholder="0.00"></div>
                            <div class="partpayment-field"><label>Payment Number</label><input type="text" id="lppPaymentNumber" placeholder="Payment Number"></div>
                            <div class="partpayment-field"><label>Payment Amount</label><input type="text" id="lppPaymentAmount" placeholder="0.00"></div>
                            <div class="partpayment-field"><label>Transfer To SB Account</label><input type="text" id="lppTransferToSb" placeholder="Transfer To SB Account"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Total Paid</label><input type="text" id="lppTotalPaid" readonly placeholder="0.00"></div>
                            <div class="partpayment-field"><label>Due Amount</label><input type="text" id="lppDueAmount" readonly placeholder="0.00"></div>
                            <div class="partpayment-field"><label>Date</label><input type="date" id="lppDate" value="2026-04-09"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field checkbox-field">
                                <label><input type="checkbox" id="lppCashCheckbox"> Cash</label>
                            </div>
                            <div class="partpayment-field"><label>Cheque No</label><input type="text" id="lppCashChequeNo" placeholder="Cheque No"></div>
                            <div class="partpayment-field"><label>From A/C</label><input type="text" id="lppFromAc" placeholder="From A/C"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>Payment By</label><select id="lppPaymentMode"><option>CASH</option><option>CHEQUE</option><option>ONLINE</option></select></div>
                            <div class="partpayment-field"><label>Bank Name</label><input type="text" id="lppPaymentBankName" placeholder="Bank Name"></div>
                            <div class="partpayment-field"><label>Payment Remarks</label><input type="text" id="lppPaymentRemarks" placeholder="Payment Remarks"></div>
                        </div>
                        <div class="partpayment-row">
                            <div class="partpayment-field"><label>1001</label><input type="text" id="lppCode1001" placeholder="1001"></div>
                        </div>
                    </div>
                </div>
                
                <!-- RIGHT COLUMN - Payment Table -->
                <div class="partpayment-right">
                    <div class="partpayment-section">
                        <div class="partpayment-section-title">Payment Schedule</div>
                        <div class="table-wrapper">
                            <table class="partpayment-table">
                                <thead>
                                    <tr>
                                        <th>Pay No</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                        <th>Branch</th>
                                        <th>Pay Mode</th>
                                        <th>Cheque No</th>
                                        <th>Account No</th>
                                        <th>Pay User</th>
                                        <th>Remarks</th>
                                    </tr>
                                </thead>
                                <tbody id="lppPaymentTableBody">
                                    <tr><td colspan="9" style="text-align:center">No payment records found</td></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="partpayment-buttons">
                        <button class="partpayment-btn new" onclick="newPartPayment()">New</button>
                        <button class="partpayment-btn save" onclick="savePartPayment()">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Loan Part Payment Container -->

<?php include 'footer.php'; ?>