<div class="layout-container">

  <app-side-menu></app-side-menu>

  <div class="content-area">
    <app-main-header></app-main-header>

    <div class="container-fluid">

      <div class="card shadow-sm p-4">
        <h2 class="page-title">Renewal Requests</h2>


        <!-- 🔍 SEARCH + FILTER -->
<div class="row mb-3">

  <!-- Search by Domain ID -->
  <div class="col-md-4">
    <input type="text"
           class="form-control"
           placeholder="Search by Domain ID"
           [(ngModel)]="searchDomainId"
           (input)="applyFilters()" />
  </div>

  <!-- Filter by Status -->
  <div class="col-md-4">
    <select class="form-select"
            [(ngModel)]="searchPaymentStatus"
            (change)="applyFilters()">

      <option value="">All Status</option>
      <option value="Payment Under Review">Payment Under Review</option>
      <option value="Payment Completed">Payment Completed</option>
      <option value="Payment Approved">Payment Approved</option>
      <option value="Renewed">Renewed</option>

    </select>
  </div>

  <!-- Clear Button -->
  <div class="col-md-2">
    <button class="btn btn-outline-secondary w-100"
            (click)="clearFilters()">
      Clear
    </button>
  </div>

</div>

        <div class="table-scroll-container mt-3">

          <table class="table table-hover table-bordered align-middle">
            <thead class="table-header">
              <tr>
                <th>Domain Id</th>
                <th>Domain</th>
                <th>Renewal Period</th>
                <th>Amount</th>
                <th>Status</th>
                <th class="text-center">Action</th>
              </tr>
            </thead>

            <tbody>
             <tr *ngFor="let r of filteredRenewals">

                <!-- ✅ Domain ID (Clickable) -->
                <td class="fw-semibold text-primary">
                  <span class="domain-link">
                    {{r.domainId}}
                  </span>
                </td>

                <!-- ✅ Domain + Renewal ID -->
                <td class="fw-semibold">
                  {{r.domainName}} <br>
                  <small class="text-muted">
                    Renewal Id:
                    <span class="fw-semibold">{{r.renewalId}}</span>
                  </small>
                </td>

                <td>{{r.renewalTenure}}</td>

                <td>₹ {{r.totalAmount}}</td>

                <td>
                  <span class="badge"
                    [ngClass]="{
                      'badge-completed': r.paymentStatus === 'Payment Completed',
                      'badge-review': r.paymentStatus === 'Payment Under Review',
                      'badge-approved': r.paymentStatus === 'Payment Approved',
                      'badge-renewed': r.paymentStatus === 'Renewed'
                    }">
                    {{r.paymentStatus}}
                  </span>
                </td>

   <td class="text-center">
  <button
  class="btn btn-primary"
  [disabled]="!canViewReceipt(r)"
  (click)="openModal(r)"
  data-bs-toggle="modal"
  data-bs-target="#renewalModal">

  View

</button>
                </td>

              </tr>
            </tbody>
          </table>

        </div>

      </div>

    </div>
  </div>
</div>

<!-- ================= MODAL ================= -->
<div id="renewalModal" 
     #renewalModalRef
     class="modal fade dsc-modal" 
     tabindex="-1">

  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- HEADER -->
      <div class="modal-header">
        <h5 class="modal-title">Renewal Request</h5>
        <button type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close">
        </button>
      </div>

      <!-- BODY -->
      <div class="modal-body">

        <p><b>Domain:</b> {{selectedRenewal?.domainName}}</p>
        <p><b>Renewal ID:</b> {{selectedRenewal?.renewalId}}</p>

        <div class="alert alert-warning mt-2"
             *ngIf="selectedRenewal?.paymentStatus === 'Payment Under Review'">
          Review the uploaded receipt before approval or rejection.
        </div>

        <iframe *ngIf="openReciptasPdf"
                [src]="paymentRecieptPdf"
                width="100%" height="400px">
        </iframe>

      </div>

      <!-- FOOTER -->
      <div class="modal-footer">

        <!-- <button class="btn btn-success"
                (click)="approveRenewal()"
                [disabled]="
                  approvingMap[selectedRenewal?.renewalId] ||
                  selectedRenewal?.paymentStatus === 'Renewed'
                ">
          Approve Renewal
        </button> -->

<button
  class="btn btn-success"
  (click)="approveRenewal()"
  [disabled]="selectedRenewal?.paymentStatus === 'Renewed'">

  Approve Renewal

</button>

        <button class="btn btn-danger"
                [disabled]="selectedRenewal?.paymentStatus === 'Renewed'"
                (click)="rejectRenewal()">
          Reject
        </button>

      </div>

    </div>
  </div>
</div>



<!-- DSC MODAL -->
<div class="modal-backdrop fade show" *ngIf="showDscModal"></div>

<div class="modal fade show d-block" *ngIf="showDscModal">
  <div class="modal-dialog" style="max-width:550px;">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Sign Using DSC</h5>
        <button class="btn-close" (click)="closeDscModal()"></button>
      </div>

      <div class="modal-body">
<div *ngIf="isLoading" class="dsc-loader"></div>
        <!-- TOKEN -->
        <label>Select Token</label>
        <div style="display:flex; gap:10px;">
          <select class="form-control"
                  [(ngModel)]="selectedToken"
                  (change)="onTokenSelect()">

            <option value="">Select Token</option>
            <option *ngFor="let t of tokens" [ngValue]="t">{{t}}</option>
          </select>

          <button class="btn btn-primary btn-sm" (click)="getDscTokens()">⟳</button>
        </div>

        <!-- CERTIFICATE -->
        <label class="mt-3">Select Certificate</label>
        <select class="form-control" [(ngModel)]="selectedCertificate">
          <option value="">Select Certificate</option>
          <option *ngFor="let c of certificates" [ngValue]="c">
            {{c.commonName}} - {{c.validTill}}
          </option>
        </select>

        <!-- PIN -->
        <label class="mt-3">Token PIN</label>
        <input type="password"
               class="form-control"
               [(ngModel)]="tokenPassword"
               placeholder="Enter token PIN"/>

      </div>

      <div class="modal-footer">
        <button class="btn btn-primary" (click)="signWithDSC()">Sign</button>
        <button class="btn btn-secondary" (click)="closeDscModal()">Cancel</button>
      </div>

    </div>
  </div>
</div>