<nav class="navbar navbar-expand-lg navbar-light Navbar-top px-0 sticky-top shadow">
    <div>
        <a role="button" class="btn-open first ps-3 payment-page-hide"><span
                class="fas fa-bars fa-lg text-secondary"></span></a>
    </div>
    <!-- <div class="d-flex align-items-center nav-logo-responsive payment-page-remove-link">
        <div class="Nvest-Solutions-Priv partnerLogo  p-md-0 ps-md-4 py-1 ps-3 textWhtClr">
            <img onclick="redirectToDash()" class="align-self-center cursor-pointer contain-fit">
        </div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3">
            
            <img onclick="redirectToDash()" src="/assets/images/simbalogo.png" style=" max-width: 100px;" class="contain-fit cursor-pointer ms-auto">
        </div>

        
        
    </div> -->

    <div class="d-flex align-items-center nav-logo-responsive payment-page-remove-link" >
        <div class="Nvest-Solutions-Priv partnerLogo p-md-0 ps-md-4 py-1 ps-3 textWhtClr">
            <img class="align-self-center contain-fit">
        </div>
        <!-- <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3">
            <img src="/assets/images/simbaaaa.svg" style="max-width: 130px;" class="contain-fit ms-auto">
        </div>

        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3">
            <img src="/assets/images/simbaaaa.svg" style="max-width: 130px;" class="contain-fit ms-auto">
        </div> -->


        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3">
            <img
              src="https://dip.sbigeneral.in/Content/images/PartnerLogo/partner_logo.png"
              style="max-width: 130px"
              class="contain-fit me-auto"
            />
          </div>

        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3"></div>
        
       

        <div class="textWhtClr m-2 ps-md-3 ps-2 pe-3 d-flex justify-content-end">
            <img onclick="redirectToDash()" src="https://dip.sbigeneral.in/Content/images/logo.svg"
                style="max-width: 120px;" class="contain-fit cursor-pointer">
        </div>



        <!-- <div class="textWhtClr m-2 ps-md-3 ps-1 pe-3">            
        <img onclick="redirectToDash()" src="https://dip.sbigeneral.in/Content/images/logo.svg" style=" max-width: 100px;" class="contain-fit cursor-pointer ms-auto">
    </div> -->

    </div>


    <div>
        <button class="navbar-toggler collapsed border-0 payment-page-hide"
            onclick="$('#page-wrapper').toggleClass('blurContent');" type="button"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
            aria-label="Toggle navigation" data-bs-toggle="collapse">
            <span class="navbar-toggler-icon"></span>

        </button>
    </div>
    <!-- Rest of your navbar code here -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto bg-white header-navbar" style="align-items: center;">
            <div id="filter-Drawer" style="display: none">
                <div class="d-flex">
                    <div class="drawer-controls d-flex">
                        <a href="#filterDrawer" data-toggle="drawer" aria-foldedopen="false"
                            aria-controls="filterDrawer" class="btnSecondry filter-icon"><i
                                class="fa fa-solid fa-filter"></i></a>
                    </div>
                </div>
            </div>
            <li class="nav-item ps-3 d-lg-none d-block mt-1">
                <a onclick="redirectHome()" class=" waves-effect waves-light">Home</a>
            </li>
            <li class="nav-item ps-3 mt-1" style="display:none;" id="optOurPlan">
                <a target="_blank" onclick="redirectOurPlans()" class=" waves-effect waves-light">Our Plans</a>
            </li>
            <li class="nav-item ps-3 mt-1" style="display:none;" id="optRetrieve">
                <a target="_blank" onclick="redirectRetriveQuote()" class=" waves-effect waves-light">Retrieve Quote</a>
            </li>
            <li class="nav-item ps-3 mt-1" id="contactNumber" style="display: none;">

                <div class="fw-bold">
                    For any Assistance
                </div>
                <div><i class="fa fa-phone"></i>&nbsp &nbsp+0XX-0XXXXXXXX</div>
            </li>
            <li class="nav-item pl-1 mt-1 dropdown hide" id="notificationWrapper">
                <a class="fs-20 position-relative overflow-visible" data-bs-toggle="dropdown">
                    <i class="fa fa-bell-o" id="Notification-icon"></i>
                    <span class="notification-badge">&nbsp;</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end ps-0 rounded-0 shadow"
                    aria-labelledby="navbarDropdownMenuLink" id="noti-content" onclick="event.stopPropagation();">


                    <li id="notificationText"></li>
                </ul>
            </li>
            <li class="nav-item ps-1 mt-1">
                <a class="fs-20" onclick="redirectToSearch()"><i class="fa fa-search payment-page-hide"></i></a>
            </li>
            <li class="nav-item ps-1 me-2 mt-1 payment-page-hide">
                <a href="/Login/Logout" id="logoutOption" class="fs-20 text-decoration-none"><i
                        class="icon-logout"></i></a>
            </li>


        </ul>
    </div>
</nav>

<div class="col-12 header-title">
    <h5 class="fw-bold mb-0 cursor-pointer" onclick="goBack()"> <i ></i>
        &nbsp;&nbsp; Limit Allocation Creation </h5>
</div>

<!-- <div class="watermark1"></div> -->

<div class="main-content" >
    <!-- <div id="page-wrapper" class="px-md-4 pb-4 container-fluid">
        <input type="hidden" id="hdnSelectedProdID" value="" />
        <input type="hidden" id="hdnCatID" value="" />
        <input type="hidden" id="hdnProductType" value="" />
        <input type="hidden" id="hdnDashboardData"
            value="[{&quot;ProposalUniqueId&quot;:null,&quot;FK_QuotationId&quot;:null,&quot;IsPaymentDone&quot;:null,&quot;IsPFSubmitted&quot;:null,&quot;IsRenewalDone&quot;:null,&quot;ProductID&quot;:0,&quot;ProductName&quot;:&quot;Super Top Up&quot;,&quot;ProductId&quot;:1016,&quot;ProductCategory&quot;:&quot;HLTH&quot;,&quot;CategoryId&quot;:&quot;INDI&quot;,&quot;ProductURL&quot;:&quot;/Content/images/SuperTopUp.svg&quot;,&quot;QuotationCount&quot;:0,&quot;PendingDocumentCount&quot;:0,&quot;PendingPaymentCount&quot;:0,&quot;UpcomingRenewalCount&quot;:0,&quot;RejectedQuotesCount&quot;:0,&quot;InprogressQuotesCount&quot;:0},{&quot;ProposalUniqueId&quot;:null,&quot;FK_QuotationId&quot;:null,&quot;IsPaymentDone&quot;:null,&quot;IsPFSubmitted&quot;:null,&quot;IsRenewalDone&quot;:null,&quot;ProductID&quot;:0,&quot;ProductName&quot;:&quot;Four Wheeler&quot;,&quot;ProductId&quot;:40001,&quot;ProductCategory&quot;:&quot;MOTO&quot;,&quot;CategoryId&quot;:&quot;1&quot;,&quot;ProductURL&quot;:&quot;/Content/images/fourwheeler.svg&quot;,&quot;QuotationCount&quot;:0,&quot;PendingDocumentCount&quot;:0,&quot;PendingPaymentCount&quot;:0,&quot;UpcomingRenewalCount&quot;:0,&quot;RejectedQuotesCount&quot;:0,&quot;InprogressQuotesCount&quot;:0}]" />
        <input type="hidden" id="hdnPassword" />
        <input type="hidden" id="hdnUserType" value="1" />
    


    </div> -->


</div>



<!-- <div class="loader-bg hide">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-pause="false" data-interval="2500" data-wrap="true">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <div class="loader-bor">
                    <i class="fa fa-spinner fa-spin" style="font-size:24px"></i>
                </div>
                <div class="f-18 fw-bold text-sentence-case mt-3">Please wait it may take few Moments.</div>
            </div>
        </div>
    </div>
</div> -->


<!-- 

<!-- <div class="container-fluid">
    <div class="row justify-content-center mt-5 mb-5">
        <div class="col-md-12 col-lg-10">
            
            
            <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-primary" id="setNewLimitBtn">Set New Limit</button>
            </div>

            <table id="filtertable1" class="table table-bordered table-striped table-sm">
                <thead>
                    <tr class="header">
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">IMD Code</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Child Code</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Name</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">ACD Number</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Credit Limit</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Available Limit</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Activation Status</th>
                        <th class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Action</th>
                    </tr>
                </thead>
                <tbody id="dataTableBody">
                    
                </tbody>
            </table>
        </div>
    </div>
</div>  -->


<div class="container-fluid"  style="height: 100vh; background: linear-gradient(rgb(255, 225, 255),rgb(248, 248, 248),rgb(156, 240, 255));">
    <div class="row justify-content-center mt-5 mb-5">
        <div class="col-md-12 col-lg-10">

            <div class="d-flex justify-content-between align-items-center mb-3"></div>

            

            <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-primary" id="setNewLimitBtn">Set New Limit</button>
            </div> -->

            

            <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-primary set-new-limit-btn" id="setNewLimitBtn" (click)="openPopup()">Set New Limit</button>
                <!-- <button class="btn btn-primary set-new-limit-btn" id="setNewLimitBtn" (click)="showTransactionPopup()">View Transaction Details</button> -->
                <div class="button-container">
                    <div *ngIf="!showTransactionDetails">
                      <button
                        class="btn btn-primary set-new-limit-btn"
                        id="setNewLimitBtn"
                        (click)="showTransactionPopup()"
                      >
                        View Parent Transaction Details
                      </button>
                    </div>
                    <div *ngIf="showTransactionDetails">
                      <button
                        class="btn btn-primary go-back-btn"
                        id="goBackBtn"
                        (click)="goBack()"
                      >
                        Check Credit Limit
                      </button>
                    </div>
                  </div>
                
                <div class="container-fluid">
                    <div class="row justify-content-end">
                        <div class="col-md-12 col-lg-3">
                            <table id="filtertable2" class="table table-bordered table-striped table-sm" >
                                <thead>
                                    <tr  >
                                        <th colspan="7">Parent Info</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="parent-info-row " *ngFor="let item1 of report1; let i = index">
                                        <td colspan="8" style="display: flex; justify-content: space-between;">
                                            <div class="text-secondary" style="font-weight: bold;">Parent Code:</div>
                                            <div class="text-primary">{{item1.imd_PARENT_CODE}}</div>
                                        </td>
                                        <td colspan="5" style="display: flex; justify-content: space-between;">
                                            <div class="text-secondary" style="font-weight: bold;">Name:</div>
                                            <div class="text-primary">{{item1.customerName}}</div>
                                        </td>
                                        <td colspan="5" style="display: flex; justify-content: space-between;">
                                            <div class="text-secondary" style="font-weight: bold;">Credit Limit:</div>
                                            <div class="text-primary">{{item1.parent_CREDIT_LIMIT|currency:'INR' }}</div>
                                        </td>
                                        <td colspan="5" style="display: flex; justify-content: space-between;">
                                            <div class="text-secondary" style="font-weight: bold;">Available Limit:</div>
                                            <div class="text-primary">{{item1.availabaleAmount|currency:'INR'}}</div>
                                        </td>
                                        <td colspan="5" style="display: flex; justify-content: space-between;">
                                            <div class="text-secondary" style="font-weight: bold;">Credit Period:</div>
                                            <div class="text-primary">{{item1.creditperiod}}</div>
                                        </td>
                                    </tr>
                                    
                                    <!-- Existing child rows -->
                                   
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            

            
            <app-creditlimit-popup [isPopupOpen]="isPopupOpen" (closePopupEvent)="handlePopupClose()"></app-creditlimit-popup>

            <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-primary" id="setNewLimitBtn" (click)="openNewLimitDialog()">Set New Limit</button>
            </div> -->

            <div class="d-flex justify-content-between align-items-center mb-3"></div>

            

            <!-- <button type="button" class="btnPrimary p-ripple me-2 " id="refreshDash">
                Refresh Dashboard
            </button> -->

            <!-- <div class="d-flex justify-content-between align-items-center mb-3">
                <button class="btn btn-16" id="setNewLimitBtn">Set New Limit</button>
            </div> -->


            <table id="filtertable1" class="table table-bordered table-striped table-sm">
                <thead>
                    <tr class="header">
                      <!-- Original Table Headers -->
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Child  Code</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Name</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">ACD Number</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Allocate Limit(INR)</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Used Limit(INR)</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Balance Limit(INR)</th>
                       <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Credit Days</th> 
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Edit Action</th>
                      <th *ngIf="!showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">View Transaction</th>
                
                      <!-- New Table Headers -->
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Select</th>
                      <!-- <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Tran ID</th> -->
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Policy Number</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Customer Name</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Quote Number</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Issuance Date</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Risk Start Date</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Premium Amount</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Elapsed Days</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">ACD Number</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Replenish Status</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Replenish Date</th>
                      <th *ngIf="showTransactionDetails" class="th-sm text-center" style="border-right: 1px solid #ffffffff; border-left: 1px solid #4e73df;">Vehicle No</th> 
                    </tr>
                  </thead>
                  <tbody *ngIf="!showTransactionDetails">
                    <tr *ngFor="let item of report ">
                      <td class="text-center owner-account text-font" style="border: 1px solid #858796;">{{item.imd_child_code}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;width: 10px;">{{item.imd_Name}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{item.acd_number}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{item.credit_Limit|currency:'INR'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{item.usedLimit|currency:'INR'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{item.balanceLimit|currency:'INR'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{item.credit_period}}</td>
                      <!-- <td class="text-center text-font" style="border: 1px solid #858796;"
                        [ngStyle]="{'color': item.active_status === 'ACTIVE'? 'green' :'red'}">{{ item.active_status }}</td> -->
                        <td class="text-center" style="border: 1px solid #858796;">
                            <button (click)="openPopupForEdit(item)">
                              <p class="required"><i class="fas fa-edit"></i></p>
                            </button>
                        </td>
                           
                          
                      <td class="text-center" style="border: 1px solid #858796;">
                        <button class="button-solid" (click)="navigateToTransaction(item)"
                               >
                          <p class="required"><i class="fas fa-eye"></i></p>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                  <tbody *ngIf="showTransactionDetails">
                    <tr *ngFor="let transaction of reporttransaction | paginate: { itemsPerPage: 5, currentPage: page }">
                        <td class="text-center text-font" style="border: 1px solid #858796;">
                            <input
                              type="checkbox"
                              (change)="onCheckboxClick(transaction, $event)"
                              [disabled]="transaction.replenish_status === 'Y'"
                            >
                          </td>
                      <!-- <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.tran_id}}</td> -->
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.policyNumber}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.customerName }}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.quoteNumber}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.insurenceDate| date: 'dd-MM-yyyy'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.tran_date| date: 'dd-MM-yyyy'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.premium|currency:'INR'}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.replenish_status === 'Y' ? '0' : transaction.elapsed_days}}</td> 
                      <td class="text-center text-font" style="border: 1px solid #858796;"align-items="Rights">{{transaction.acd_number}}</td>
                      <td class="text-center text-font" style="border: 1px solid #858796;"
                      [ngStyle]="{'color': transaction.replenish_status === 'Y' ? 'green' : 'red'}">
                      {{ transaction.replenish_status === 'Y' ? 'Success Payment' : 'Pending' }}
                    </td>
                    <td class="text-center text-font" style="border: 1px solid #858796;"
                      [ngStyle]="{'color': transaction.replenish_status === 'Y' ? 'green' : 'red'}">
                      {{ transaction.replenishDate | date: 'dd-MM-yyyy'}}
                    </td>
                    <td class="text-center text-font" style="border: 1px solid #858796;">{{transaction.vehicleNo}}</td>
                    </tr>
                  </tbody>
            </table>
        </div>
            <div *ngIf="showTransactionDetails" style="display: flex; justify-content: flex-end; margin-top: 5px;">
                <pagination-controls (pageChange)="onPageChange($event)"></pagination-controls>
              </div>
             

            
     <app-credit-update-popup
  [isupdatePopupOpen]="isupdatePopupOpen"
  [ImdCode]="selectedImdCode"
  [AgreementCode]="selectedAgreementCode"
  [ACDNumber]="selectedAcdNumber"
  [CreditLimit]="selectedCreditLimit"
  (closePopupEvent)="handlePopupClose()">
</app-credit-update-popup>
</div>
    <div *ngIf="isDataEmptyMessage" class="required">{{emptyDataMessage}}</div>
    
    
        <app-makepaymentpopup
        [ispaymentPopupOpen]="ispaymentPopupOpen"
        [totalAmount]="selectedPremiumSum"
        [Amount]="selectedAmount"
        [acdNumber]="lastSelectedAcdNumber"
        [Imd_code]="parentcode"
        [child_code]="childcode"
        [policyNumber]="policynumbers"
        [Agrement_code]="agrementcode"
        [userId]="UserId"
        [insurenceDate]="insurenceDate"
        [tran_date]="tran_date"
        [cdcode]="cdcode"
        (closePopupEvent)="handlePopupClose()">
      </app-makepaymentpopup>
   
      <div style="display: flex; justify-content: center; margin-top: 15px;position: relative;z-index: 1;">
        <p *ngIf="showTransactionDetails">         
        <button  class="btn btn-primary set-new-limit-btn" (click)="openPaymentPopup()">Make Payment</button>
        </p></div>
    </div>
<div class="footer position-fixed bottom-0 w-100" style="height: 40px;">
    <div class="footer-content d-flex flex-column align-items-center pb-1">
        <p class="text-muted mb-1">SBIGI does not accept Cash for Premium Payments against the Policy. 2024 SBI General Insurance Company Limited All Rights Reserved</p>
        <div class="d-flex flex-wrap gap-1">
            <!-- <span class="text-muted">&copy; 2024 SBI General Insurance Company Limited</span> -->
            <span class="text-muted">All Rights Reserved</span>
        </div>
    </div>
</div>
this was previous add <nav
  class="navbar navbar-expand-lg navbar-light Navbar-top px-0 sticky-top shadow"
>
  <div>
    <a role="button" class="btn-open first ps-3 payment-page-hide">
      <span class="fas fa-bars fa-lg text-secondary"></span>
    </a>
  </div>
  <div
    class="d-flex align-items-center nav-logo-responsive payment-page-remove-link"
  >
    <div
      class="Nvest-Solutions-Priv partnerLogo p-md-0 ps-md-4 py-1 ps-3 textWhtClr"
    >
      <img class="align-self-center contain-fit" />
    </div>
    <div class="textWhtClr m-0 ps-md-3 ps-1 pe-3">
      <img
        src="https://dip.sbigeneral.in/Content/images/PartnerLogo/partner_logo.png"
        style="max-width: 130px"
        class="contain-fit me-auto"
      />
    </div>
    <div class="textWhtClr m-2 ps-md-3 ps-2 pe-3 d-flex justify-content-end">
      <img
        onclick="redirectToDash()"
        src="https://dip.sbigeneral.in/Content/images/logo.svg"
        style="max-width: 120px"
        class="contain-fit cursor-pointer"
      />
    </div>
  </div>
  <div>
    <button
      class="navbar-toggler collapsed border-0 payment-page-hide"
      onclick="$('#page-wrapper').toggleClass('blurContent');"
      type="button"
      data-bs-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent"
      aria-expanded="false"
      aria-label="Toggle navigation"
      data-bs-toggle="collapse"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul
      class="navbar-nav ms-auto bg-white header-navbar"
      style="align-items: center"
    >
      <div id="filter-Drawer" style="display: none">
        <div class="d-flex">
          <div class="drawer-controls d-flex">
            <a
              href="#filterDrawer"
              data-toggle="drawer"
              aria-foldedopen="false"
              aria-controls="filterDrawer"
              class="btnSecondry filter-icon"
            >
              <i class="fa fa-solid fa-filter"></i>
            </a>
          </div>
        </div>
      </div>
      <li class="nav-item ps-3 d-lg-none d-block mt-1">
        <a onclick="redirectHome()" class="waves-effect waves-light">Home</a>
      </li>
      <li class="nav-item ps-3 mt-1" style="display: none" id="optOurPlan">
        <a
          target="_blank"
          onclick="redirectOurPlans()"
          class="waves-effect waves-light"
          >Our Plans</a
        >
      </li>
      <li class="nav-item ps-3 mt-1" style="display: none" id="optRetrieve">
        <a
          target="_blank"
          onclick="redirectRetriveQuote()"
          class="waves-effect waves-light"
          >Retrieve Quote</a
        >
      </li>
      <li class="nav-item ps-3 mt-1" id="contactNumber" style="display: none">
        <div class="fw-bold">For any Assistance</div>
        <div><i class="fa fa-phone"></i>&nbsp &nbsp+0XX-0XXXXXXXX</div>
      </li>
      <li class="nav-item pl-1 mt-1 dropdown hide" id="notificationWrapper">
        <a
          class="fs-20 position-relative overflow-visible"
          data-bs-toggle="dropdown"
        >
          <i class="fa fa-bell-o" id="Notification-icon"></i>
          <span class="notification-badge">&nbsp;</span>
        </a>
        <ul
          class="dropdown-menu dropdown-menu-end ps-0 rounded-0 shadow"
          aria-labelledby="navbarDropdownMenuLink"
          id="noti-content"
          onclick="event.stopPropagation();"
        >
          <li id="notificationText"></li>
        </ul>
      </li>
      <li class="nav-item ps-1 mt-1">
        <a class="fs-20" onclick="redirectToSearch()"
          ><i class="fa fa-search payment-page-hide"></i
        ></a>
      </li>
      <li class="nav-item ps-1 me-2 mt-1 payment-page-hide">
        <a
          href="/Login/Logout"
          id="logoutOption"
          class="fs-20 text-decoration-none"
        >
          <i class="icon-logout"></i>
        </a>
      </li>
    </ul>
  </div>
</nav>

<div class="col-12 header-title">
  <h5 class="fw-bold mb-0 cursor-pointer" onclick="goBack()">
    <i></i>&nbsp;&nbsp; Limit Allocation Creation
  </h5>
</div>

<div
  class="container-fluid"
  style="
    height: 100vh;
    background: linear-gradient(
      rgb(255, 225, 255),
      rgb(248, 248, 248),
      rgb(156, 240, 255)
    );
  "
>
  <div class="row justify-content-center mt-5 mb-5">
    <div class="col-md-12 col-lg-10">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <button
          class="btn btn-primary set-new-limit-btn"
          id="setNewLimitBtn"
          (click)="openPopup()"
        >
          Set New Limit
        </button>
        <div class="button-container">
          <div *ngIf="!showTransactionDetails">
            <button
              class="btn btn-primary set-new-limit-btn"
              id="setNewLimitBtn"
              (click)="showTransactionPopup()"
            >
              View Parent Transaction Details
            </button>
          </div>
          <div *ngIf="showTransactionDetails">
            <button
              class="btn btn-primary go-back-btn"
              id="goBackBtn"
              (click)="goBack()"
            >
              Check Credit Limit
            </button>
          </div>
        </div>
      </div>

      <div *ngIf="showTransactionDetails">
        <mat-form-field>
          <mat-label>Filter</mat-label>
          <input
            matInput
            (keyup)="applyFilter($event)"
            placeholder="Ex. Policy Number"
          />
        </mat-form-field>

        <table
          mat-table
          [dataSource]="dataSource"
          matSort
          class="mat-elevation-z8"
        >
          <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>Select</th>
            <td mat-cell *matCellDef="let transaction">
              <input
                type="checkbox"
                (change)="onCheckboxClick(transaction, $event)"
                [disabled]="transaction.replenish_status === 'Y'"
              />
            </td>
          </ng-container>

          <ng-container matColumnDef="policyNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Policy Number
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.policyNumber }}
            </td>
          </ng-container>

          <ng-container matColumnDef="customerName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Customer Name
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.customerName }}
            </td>
          </ng-container>

          <ng-container matColumnDef="quoteNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Quote Number
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.quoteNumber }}
            </td>
          </ng-container>

          <ng-container matColumnDef="issuanceDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Issuance Date
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.insurenceDate | date : "dd-MM-yyyy" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="riskStartDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Risk Start Date
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.tran_date | date : "dd-MM-yyyy" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="premiumAmount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Premium Amount
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.premium | currency : "INR" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="elapsedDays">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Elapsed Days
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{
                transaction.replenish_status === "Y"
                  ? "0"
                  : transaction.elapsed_days
              }}
            </td>
          </ng-container>

          <ng-container matColumnDef="acdNumber">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              ACD Number
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.acd_number }}
            </td>
          </ng-container>

          <ng-container matColumnDef="replenishStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Replenish Status
            </th>
            <td
              mat-cell
              *matCellDef="let transaction"
              [ngStyle]="{
                color: transaction.replenish_status === 'Y' ? 'green' : 'red'
              }"
            >
              {{
                transaction.replenish_status === "Y"
                  ? "Success Payment"
                  : "Pending"
              }}
            </td>
          </ng-container>

          <ng-container matColumnDef="replenishDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Replenish Date
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.replenishDate | date : "dd-MM-yyyy" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="vehicleNo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
              Vehicle No
            </th>
            <td mat-cell *matCellDef="let transaction">
              {{ transaction.vehicleNo }}
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>

        <mat-paginator
          [pageSizeOptions]="[5, 10, 25]"
          showFirstLastButtons
        ></mat-paginator>
      </div>

      <app-credit-update-popup
        [isupdatePopupOpen]="isupdatePopupOpen"
        [ImdCode]="selectedImdCode"
        [AgreementCode]="selectedAgreementCode"
        [ACDNumber]="selectedAcdNumber"
        [CreditLimit]="selectedCreditLimit"
        (closePopupEvent)="handlePopupClose()"
      ></app-credit-update-popup>

      <div *ngIf="isDataEmptyMessage" class="required">
        {{ emptyDataMessage }}
      </div>

      <app-makepaymentpopup
        [ispaymentPopupOpen]="ispaymentPopupOpen"
        [totalAmount]="selectedPremiumSum"
        [Amount]="selectedAmount"
        [acdNumber]="lastSelectedAcdNumber"
        [Imd_code]="parentcode"
        [child_code]="childcode"
        [policyNumber]="policynumbers"
        [Agrement_code]="agrementcode"
        [userId]="UserId"
        [insurenceDate]="insurenceDate"
        [tran_date]="tran_date"
        [cdcode]="cdcode"
        (closePopupEvent)="handlePopupClose()"
      ></app-makepaymentpopup>

      <div
        style="
          display: flex;
          justify-content: center;
          margin-top: 15px;
          position: relative;
          z-index: 1;
        "
      >
        <p *ngIf="showTransactionDetails">
          <button
            class="btn btn-primary set-new-limit-btn"
            (click)="openPaymentPopup()"
          >
            Make Payment
          </button>
        </p>
      </div>
    </div>
  </div>

  <div class="footer position-fixed bottom-0 w-100" style="height: 40px">
    <div class="footer-content d-flex flex-column align-items-center pb-1">
      <p class="text-muted mb-1">
        SBIGI does not accept Cash for Premium Payments against the Policy. 2024
        SBI General Insurance Company Limited All Rights Reserved
      </p>
      <div class="d-flex flex-wrap gap-1">
        <span class="text-muted">All Rights Reserved</span>
      </div>
    </div>
  </div>
</div>
add this is current just add sorting and pagination to both table and also data should populate or else for now show dummy data but earlier data was populating