<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>

      <div
        *ngIf="showTransactionDetails"
        class="d-flex justify-content-between align-items-center mt-3"
      >
        <div class="form-inline">
          <label class="me-2">Items per page:</label>
          <select
            class="form-select form-select-sm"
            [(ngModel)]="itemsPerPage"
            (change)="page = 1"
          >
            <option [ngValue]="5">5</option>
            <option [ngValue]="10">10</option>
            <option [ngValue]="20">20</option>
            <option [ngValue]="50">50</option>
            <option [ngValue]="100">100</option>
          </select>
        </div>

        <!-- <div
          *ngIf="filteredReportTransaction.length > 0"
          class="filter-summary text-muted small"
        >
          Showing {{ (page - 1) * itemsPerPage + 1 }} to
          {{ Math.min(page * itemsPerPage, filteredReportTransaction.length) }}
          of {{ filteredReportTransaction.length }} transactions
        </div> -->

        <!-- <pagination-controls
          (pageChange)="onPageChange($event)"
        ></pagination-controls> -->
      </div>
      <div *ngIf="showTransactionDetails" class="filter-bar mb-4">
        <div class="row">
          <!-- <div class="col-md-4 mb-2">
                <div class="input-group">
                  <span class="input-group-text"
                    ><i class="fas fa-search"></i
                  ></span>
                  <input
                    type="text"
                    class="form-control"
                    placeholder=" Search ..."
                    [(ngModel)]="filters.search"
                    (input)="applyFilters()"
                  />
                  <button
                    *ngIf="filters.search"
                    class="btn btn-outline-secondary"
                    type="button"
                    (click)="clearSearch()"
                  >
                    <i class="fas fa-times"></i>
                  </button>
                </div>
              </div> -->

          <div class="col-md-8 mb-2">
            <div class="row">
              <!-- <div class="col-md-3 mb-2">
                <select
                  class="form-select"
                  [(ngModel)]="filters.dateRange"
                  (change)="filterTransactions()"
                >
                  <option value="all">All Dates</option>
                  <option value="today">Today</option>
                  <option value="this-week">This Week</option>
                  <option value="this-month">This Month</option>
                  <option value="last-month">Last Month</option>
                </select>
              </div> -->

              <div class="col-md-3 mb-2">
                <input
                  type="date"
                  class="form-control"
                  [(ngModel)]="filters.startDate"
                  (change)="filterTransactions()"
                />
              </div>
              <div class="col-md-3 mb-2">
                <input
                  type="date"
                  class="form-control"
                  [(ngModel)]="filters.endDate"
                  (change)="filterTransactions()"
                />
              </div>
              <div class="col-md-3 mb-2">
                <select
                  class="form-select"
                  [(ngModel)]="replenishFilter"
                  (change)="filterTransactions()"
                >
                  <option value="all">All</option>
                  <option value="Y">Success Payment</option>
                  <option value="N">Pending</option>
                </select>
              </div>

              <div class="col-md-3 mb-2">
                <button
                  class="btn btn-outline-secondary w-100"
                  (click)="resetFilters()"
                >
                  Reset Filters
                </button>
              </div>
            </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;
              "
            >
              Transaction ID
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Policy Number
              <button (click)="togglePolicySearch()" class="btn btn-link p-0">
                🔍
                <!-- Search Icon -->
              </button>

              <div *ngIf="showPolicySearch">
                <input
                  type="text"
                  [(ngModel)]="policyNumberFilter"
                  (input)="filterTransactions()"
                  placeholder="Enter Policy Number"
                  class="form-control"
                />
              </div>
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Quote Number
              <button (click)="togglePolicySearch()" class="btn btn-link p-0">
                🔍
                <!-- Search Icon -->
              </button>

              <div *ngIf="showPolicySearch">
                <input
                  type="text"
                  [(ngModel)]="QuoteNumberFilter"
                  (input)="filterTransactions()"
                  placeholder="Enter Quote Number"
                  class="form-control"
                />
              </div>
            </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;
              "
            >
              Premium Amount
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Issuance Date
              <button (click)="togglePolicySearch()" class="btn btn-link p-0">
                🔍
                <!-- Search Icon -->
              </button>

              <div *ngIf="showPolicySearch">
                <input
                  type="date"
                  [(ngModel)]="InsurenceFilter"
                  (input)="filterTransactions()"
                  placeholder="Enter Insurence Date"
                  class="form-control"
                />
              </div>
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Replenish Status
              <span
                (click)="toggleDropdown()"
                style="cursor: pointer; margin-left: 5px"
              >
                🔍
              </span>

              <!-- Dropdown for Filtering (Initially Hidden) -->
              <div *ngIf="showDropdown" class="mt-2">
                <select
                  [(ngModel)]="replenishFilter"
                  (change)="filterTransactions()"
                  class="form-control"
                >
                  <option value="all">All</option>
                  <option value="N">Pending</option>
                  <option value="Y">Completed</option>
                </select>
              </div>
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Pending 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;
              "
            >
              Payment Mode
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              UTR Number
            </th>
            <th
              *ngIf="showTransactionDetails"
              class="th-sm text-center"
              style="
                border-right: 1px solid #ffffffff;
                border-left: 1px solid #4e73df;
              "
            >
              Cheque Number
            </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 paymentstatus
                | paginate
                  : {
                      itemsPerPage: itemsPerPage,
                      currentPage: page,
                      totalItems: filteredReportTransaction.length
                    }
            "
          >
            <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.logTransactionId }}
            </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.quoteNumber }}
            </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.premium | currency : "INR" }}
            </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"
              [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">
              {{
                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">
              {{ transaction.paymentMode }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.utrnumber }}
            </td>
            <td class="text-center text-font" style="border: 1px solid #858796">
              {{ transaction.chequeNumber }}
            </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>
transaction filter when selected all it is not working but pending and success is working  filterTransactions() {
    // Check if there are no transactions to filter
    if (!this.reporttransaction || this.reporttransaction.length === 0) {
      console.warn('No transactions available to filter.');
      this.paymentstatus = []; // Clear display if no data
      return;
    }

    console.log(
      'Filtering based on: Replenish Status =',
      this.replenishFilter,
      'Policy Number =',
      this.policyNumberFilter,
      'Quote Number =',
      this.QuoteNumberFilter,
      'Start Date =',
      this.filters.startDate,
      'End Date =',
      this.filters.endDate
    );

    // Convert selected dates to Date objects, handle invalid date input
    const startDate = this.filters.startDate
      ? new Date(this.filters.startDate)
      : null;
    const endDate = this.filters.endDate
      ? new Date(this.filters.endDate)
      : null;

    // Clear previous filtered results
    this.paymentstatus = this.reporttransaction.filter((transaction) => {
      const transactionDate = new Date(transaction.insurenceDate); // Adjust based on the actual date format of your data

      // Check if filter is applied as per date
      const isInDateRange =
        (!startDate || transactionDate >= startDate) &&
        (!endDate || transactionDate <= endDate);

      return (
        isInDateRange && // Ensure transaction is in the selected date range
        (this.replenishFilter === '' ||
          (transaction.replenish_status &&
            transaction.replenish_status.toLowerCase() ===
              this.replenishFilter.toLowerCase())) &&
        (this.policyNumberFilter === '' ||
          (transaction.policyNumber &&
            transaction.policyNumber
              .toLowerCase()
              .includes(this.policyNumberFilter.toLowerCase()))) &&
        (this.QuoteNumberFilter === '' ||
          (transaction.quoteNumber &&
            transaction.quoteNumber
              .toLowerCase()
              .includes(this.QuoteNumberFilter.toLowerCase())))
      );
    });

    console.log('Filtered Transactions:', this.paymentstatus);
  }