<app-dns-loading [isDnsLoading]="isLoadingData"></app-dns-loading>
<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="row" style="padding-top: 100px;">
                <div class="col-sm-12">
                    <h1 style="font-weight: 500;margin-bottom: 10px;">Entity</h1>
                    <div style="display: flex; align-items: center;">
                        <div style="height: 20%; position: relative;width: 200px;">
                            <i class="fas fa-search"
                                style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #ccc; /* Light gray color */"></i>
                            <input type="text" placeholder="Search"
                                style="margin-left: 0px; padding: 8px 10px; height: 38px;
                           width:100%; margin-top: 0px; margin-bottom: 0px; padding-right: 35px; /* Increased padding-right */" [(ngModel)]="searchText"
                                (ngModelChange)="applyFilter()" matInput #input>
                        </div>
                    </div>

                    <section class="example-container" style="margin-top: 10px;">
                        <!-- <div *ngIf="noDataFound" class="no-results-message">
              No data found.
            </div> -->

                        <table id="table1" mat-table [dataSource]="entitiesDataSource" matSort matSortActive="entity"
                            matSortDirection="desc" class="mat-elevation-z8">

                            <ng-container matColumnDef="organisationDetailsId">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Organisation Id</th>
                                <td style="cursor: pointer;text-decoration: underline;color: blue;"
                                    (click)="navigateToEntityDetails(entity)" mat-cell *matCellDef="let entity">
                                    {{entity.organisationDetailsId}}</td>
                            </ng-container>


                            <ng-container matColumnDef="institutionName">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Entity Name</th>
                                <td mat-cell *matCellDef="let entity" class="entity-name-column">
                                    {{entity.institutionName | nullFallback}}</td>
                            </ng-container>
                            <ng-container matColumnDef="submissionDate">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Submission Date</th>
                                <td mat-cell *matCellDef="let entity">{{entity.submissionDate|date:'MMM d, y, h:mm a'}}
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="organisationApplicationStatus">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Organisation Status</th>
                                <td mat-cell *matCellDef="let entity">
                                    <div style="display: flex; align-items: center;"
                                        [style.color]="getStatusColor(entity.organisationApplicationStatus)">
                                        <span>{{ entity.organisationApplicationStatus ?? 'Incomplete' | titlecase }}</span>
                                    </div>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="latestPaymentStatus">

    <th mat-header-cell *matHeaderCellDef mat-sort-header>
        Payment Status
    </th>

    <td mat-cell *matCellDef="let entity">

        <span [ngClass]="{

          'payment-ready':
            entity.latestPaymentStatus === 'Ready For Payment',

          'payment-review':
            entity.latestPaymentStatus === 'Payment Under Review',

          'payment-completed':
            entity.latestPaymentStatus === 'Payment Completed',

          'payment-approved':
            entity.latestPaymentStatus === 'Payment Approved',

          'payment-cancelled':
            entity.latestPaymentStatus === 'Payment Cancelled'

        }">

            {{ entity.latestPaymentStatus || 'NA' }}

        </span>

    </td>

</ng-container>

                            <ng-container matColumnDef="createdByEmailId">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Added By</th>
                                <td mat-cell *matCellDef="let entity">{{entity.userMailId}}</td>
                            </ng-container>
                            <ng-container matColumnDef="askToResubmit">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Re-Submission</th>
                                
                                <td mat-cell *matCellDef="let entity">
                                    <button
                                        [disabled]="entity.applicationStatus === 'Incomplete' || entity.applicationStatus === 'Resubmitted' || entity.applicationStatus === 'Approved'"
                                        class="btn btn-info" (click)="openModalForResumbitComment(entity)">Ask to
                                        Resubmit</button>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="payment">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Payment</th>
                                <td mat-cell *matCellDef="let entity">
                                    <button style="white-space: nowrap;" *ngIf="(entity.paymentStatus==='Ready For Payment'
                  ||entity.paymentStatus==='Payment Rejected'
                  || entity.paymentStatus=== 'Payment Failed' ||
                entity.paymentStatus === 'Payment Cancelled' || 
              entity.paymentStatus === 'Payment Aborted' || 
            entity.paymentStatus === 'Unknown Status')
                  && entity.applicationStatus=='Submitted'" class="btn btn-primary" (click)="onSubmit2(entity)">
                                        Pay Now
                                    </button>
                                    <button style="white-space: nowrap;"
                                        *ngIf="entity.paymentStatus !='Ready For Payment'&&entity.paymentStatus !='Payment Rejected' && entity.paymentStatus !== 'Payment Failed' 
                  && entity.paymentStatus !== 'Payment Cancelled' && entity.paymentStatus !== 'Payment Aborted' && entity.paymentStatus !== 'Unknown Status'"
                                        disabled class="btn btn-primary">
                                        Pay Now
                                    </button>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="deleteApplication">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Delete Application</th>
                                <td mat-cell *matCellDef="let entity">
                                    <button (click)="deleteEntity(entity)"
                                        class="btn btn-danger">Delete</button>
                                </td>
                            </ng-container>
                            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

                            <!-- <tr mat-row *matRowDef="let domain; columns: displayedColumns; "></tr> -->
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                                [ngClass]="{'marked-delete': row.markAsDelete}"></tr>
                            <tr class="mat-row" *matNoDataRow>
                                <td *ngIf="domainsDataSource.filter" [attr.colspan]="displayedColumns?.length"
                                    style="text-align:center;font-size:15px">
                                    No data matching the search
                                </td>
                                <td *ngIf="!domainsDataSource.filter" [attr.colspan]="displayedColumns?.length"
                                    style="text-align:center;font-size:15px">
                                    No data available
                                </td>
                            </tr>


                        </table>
                    </section>
                    <mat-paginator style="font-size: 13px;" [pageSizeOptions]="[5, 10, 20 , maxDataCount]"
                        showFirstLastButtons [pageSize]="pageSize" aria-label="Select page of periodic elements">
                    </mat-paginator>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">

            <div class="modal-body">
                <div>
                    <div class="detail-item">
                        <p>Application ID</p>
                        <div class="input-group">
                            <input type="text" placeholder="Search Application ID" class="form-control"
                                [(ngModel)]="filters.applicationId" />
                            <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.125 10.5272H11.5325L11.3225 10.3247C12.0575 9.46969 12.5 8.35969 12.5 7.15219C12.5 4.45969 10.3175 2.27719 7.625 2.27719C4.9325 2.27719 2.75 4.45969 2.75 7.15219C2.75 9.84469 4.9325 12.0272 7.625 12.0272C8.8325 12.0272 9.9425 11.5847 10.7975 10.8497L11 11.0597V11.6522L14.75 15.3947L15.8675 14.2772L12.125 10.5272ZM7.625 10.5272C5.7575 10.5272 4.25 9.01969 4.25 7.15219C4.25 5.28469 5.7575 3.77719 7.625 3.77719C9.4925 3.77719 11 5.28469 11 7.15219C11 9.01969 9.4925 10.5272 7.625 10.5272Z"
                                    fill="#A6A6A6" />
                            </svg>
                        </div>
                    </div>
                    <div class="detail-item">
                        <p>Entity Name</p>
                        <div class="input-group">
                            <input type="text" placeholder="Search Entity name" class="form-control"
                                [(ngModel)]="filters.organisationName" />
                            <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.125 10.5272H11.5325L11.3225 10.3247C12.0575 9.46969 12.5 8.35969 12.5 7.15219C12.5 4.45969 10.3175 2.27719 7.625 2.27719C4.9325 2.27719 2.75 4.45969 2.75 7.15219C2.75 9.84469 4.9325 12.0272 7.625 12.0272C8.8325 12.0272 9.9425 11.5847 10.7975 10.8497L11 11.0597V11.6522L14.75 15.3947L15.8675 14.2772L12.125 10.5272ZM7.625 10.5272C5.7575 10.5272 4.25 9.01969 4.25 7.15219C4.25 5.28469 5.7575 3.77719 7.625 3.77719C9.4925 3.77719 11 5.28469 11 7.15219C11 9.01969 9.4925 10.5272 7.625 10.5272Z"
                                    fill="#A6A6A6" />
                            </svg>
                        </div>

                    </div>
                    <div class="detail-item">
                        <p>Domain Name</p>
                        <div class="input-group">
                            <input type="text" placeholder="Search Domain Name" class="form-control"
                                [(ngModel)]="filters.domainName" />
                            <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M12.125 10.5272H11.5325L11.3225 10.3247C12.0575 9.46969 12.5 8.35969 12.5 7.15219C12.5 4.45969 10.3175 2.27719 7.625 2.27719C4.9325 2.27719 2.75 4.45969 2.75 7.15219C2.75 9.84469 4.9325 12.0272 7.625 12.0272C8.8325 12.0272 9.9425 11.5847 10.7975 10.8497L11 11.0597V11.6522L14.75 15.3947L15.8675 14.2772L12.125 10.5272ZM7.625 10.5272C5.7575 10.5272 4.25 9.01969 4.25 7.15219C4.25 5.28469 5.7575 3.77719 7.625 3.77719C9.4925 3.77719 11 5.28469 11 7.15219C11 9.01969 9.4925 10.5272 7.625 10.5272Z"
                                    fill="#A6A6A6" />
                            </svg>
                        </div>
                    </div>
                    <div class="detail-item">
                        <p>NS Record Status</p>
                        <div class="input-group">
                            <select type="text" placeholder="Select NS Record Status" class="form-control"
                                [(ngModel)]="filters.nsRecordStatus">
                                <option value="" disabled selected>Select Status</option>

                                <option value="OnHold">OnHold</option>
                                <option value="Inprogress">Inprogress</option>
                                <option value="Approved">Approved</option>
                                <option value="Rejected">Rejected</option>
                            </select>


                        </div>
                    </div>
                    <div class="detail-item">
                        <p>Status</p>
                        <div class="input-group">
                            <select type="text" placeholder="Select  Status" class="form-control"
                                [(ngModel)]="filters.status">
                                <option value="Active">Active</option>
                                <option value="InActive">In Active</option>
                            </select>

                        </div>
                    </div>
                    <div class="detail-item">
                        <p>Submission Date & Time</p>
                        <div class="date">
                            <h3>From:</h3>
                            <div class="input-group">
                                <input type="datetime-local" [(ngModel)]="filters.submissionDateFrom"
                                    class="form-control" />
                            </div>
                            <h3>To:</h3>
                            <div class="input-group">
                                <input type="datetime-local" [(ngModel)]="filters.submissionDateTo"
                                    class="form-control" />
                            </div>
                        </div>
                    </div>



                    <div class="modal-footer d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            (click)="clearButton()">Cancel</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal"
                            (click)="filterButton()">Apply</button>
                    </div>
                </div>

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


<div class="modal" id="paymentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" style="background-color: #EDECFC;">Payment Receipt Number</h2>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" (click)="cancel()">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p style="padding-bottom: 15px;"><b style="color: red;">*</b> Please provide your payment receipt number
                    to confirm your payment.</p>
                <label>Receipt Number</label>
                <input type="text" class="form-control" placeholder="Enter payment receipt number"
                    [(ngModel)]="paymentReceiptNumber" (input)="validatePaymentReceiptNumber()" maxlength="30" />
                <p *ngIf="errorMessage" style="color: red;">{{ errorMessage }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" (click)='onSubmit2(domain)'>Submit</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="cancel()"
                    data-dismiss="#paymentModal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<div id="resubmitModalOpen" hidden data-toggle="modal" data-target="#CommentModal"></div>
<div class="modal" id="CommentModal" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="font-weight: 500; font-size: 14px; margin-bottom: 0px;">Approval comment
                </h5>
                <button type="button" id="closeApproveCommentModal" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <textarea rows="5" cols="40" [(ngModel)]="resubmitComment"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary mr-3"
                    (click)="updateDomainApplicationStatus(clickedDomain)" data-dismiss="modal">Save
                    changes</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<button hidden id="paymentDetailsModalView" type="button" class="btn btn-primary" data-toggle="modal"
    data-target="#viewPaymentDetailsModal">

</button>

<div id="viewPaymentDetailsModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content shadow-lg rounded">

            <!-- Header -->
            <div class="modal-header bg-primary text-white">
                <h3 class="modal-title mb-0">💳 Payment Details</h3>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Body -->
            <div class="modal-body">
                <table class="table table-bordered table-hover">
                    <tbody>
                        <tr>
                            <th scope="row" class="w-50">Domain Cost</th>
                            <td>{{ domainPayment?.domainPrice | currency:'INR':'symbol':'1.2-2' }}</td>

                        </tr>
                        <tr>
                            <th scope="row">Rebate Applied</th>
                            <td>
                                {{ (domainPayment?.rebateAmountOfDomain == null || domainPayment?.rebateAmountOfDomain
                                == 0)
                                ? 0
                                : (domainPayment?.rebateAmountOfDomain | currency:'INR':'symbol':'1.2-2') }}
                            </td>


                        </tr>
                        <tr>
                            <th scope="row">Name Server Cost</th>
                            <td>
                                {{ (domainPayment?.nsRecordPrice == null || domainPayment?.nsRecordPrice == 0)
                                ? 0
                                : (domainPayment?.nsRecordPrice | currency:'INR':'symbol':'1.2-2') }}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">Name Identifier Cost</th>
                            <td>
                                {{ (domainPayment?.aliasPrice == null || domainPayment?.aliasPrice == 0)
                                ? 0
                                : (domainPayment?.aliasPrice | currency:'INR':'symbol':'1.2-2') }}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">GST Applied</th>
                            <td>
                                {{ (domainPayment?.gstAmount == null || domainPayment?.gstAmount == 0)
                                ? 0
                                : (domainPayment?.gstAmount | currency:'INR':'symbol':'1.2-2') }}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">TDS Deducted</th>
                            <td>
                                {{ (domainPayment?.tdsAmountDetected == null || domainPayment?.tdsAmountDetected == 0)
                                ? 0
                                : (domainPayment?.tdsAmountDetected | currency:'INR':'symbol':'1.2-2') }}
                            </td>
                        </tr>
                        <tr class="font-weight-bold table-primary">
                            <th scope="row">Total Payable</th>
                            <td>
                                {{ (domainPayment?.cost == null || domainPayment?.cost == 0)
                                ? 0
                                : (domainPayment?.cost | currency:'INR':'symbol':'1.2-2') }}
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>

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

<div *ngIf="isLoading" class="spinner-container">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>