<div class="buttonCard">
    <button mat-stroked-button (click)="backButton()" class="backButton">
        <i class="fa fa-arrow-left" aria-hidden="true"
            style="top: 0px;position: relative;font-size: small;"></i> 
            Back
    </button>
</div>



<div id="section-to-print" class="container" style="background-color: white;">
    
    

    
<div class="table-container" #table>


<div class="reportHeader">
    <div class="row" style="text-align: center;">
        <h2 class="bidHeading">Payment Details</h2>
    </div>

    <div class="row">
        <h3 class="tenderInfo">Tender Information:</h3>
    </div>

    
    <div class="row">
        <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
            <span class="subHead">
                {{'tender'|translate}} :
                   <span class="subDetail"> {{headerData?.title}} </span>
                </span>
        </div>
       
    </div>


    <div class="row" style="margin-top: 5px;">
        <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
            <span class="subHead">
                {{'tenderId'|translate}} :
                <span class="subDetail"> {{tenderInputId}} </span>
                </span>
        </div>
       
    </div>

    <br>
    <div class="row">
        <h3 class="tenderInfo">Payment Summary:</h3>
    </div>
</div>

<table hidden="true">
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th>{{title | translate}}</th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>

        <td>Tender Name</td>
        <td>
            {{headerData?.title}}
        </td>

        <td></td>
        <td>Published Date</td>
        <td>
            {{headerData?.publishDate }}
        </td>
    </tr>
    <tr>
        <td></td>

        <td>Tender Id</td>
        <td>
            {{tenderInputId }}
        </td>
        <td></td>
        <td>Bid Open Date</td>
        <td>
            {{headerData?.bidOpenDate}}
        </td>

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



<div class="table-responsive">
    <mat-table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort matSortDisableClear="true"
        (matSortChange)="sortData($event)">

        <ng-container matColumnDef="slNo">
            <th mat-header-cell *matHeaderCellDef style="text-align: center;width:80px" class="table-headers">
                <div>
                    {{'slNo'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element let i=index" class="table-content" style="text-align: center;">
                {{i+1}}
            </td>

        </ng-container>

        <ng-container matColumnDef="name">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:140px"
                class="table-headers">
                <div>
                    {{'name'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
                {{element?.userName}}
            </td>

        </ng-container>

        <ng-container matColumnDef="admissionNo">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;" class="table-headers">
                <div>
                    {{'admissionNo'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
                {{element.rollNo }}
            </td>

        </ng-container>



        <ng-container matColumnDef="mobileNumber">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:170px"
                class="table-headers">
                <div>
                    {{'mobileNumber'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
                {{element?.mobileNumber}}
            </td>

        </ng-container>

        <ng-container matColumnDef="email">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:170px" class="table-headers">
                <div>
                    {{'emailId'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
                {{element?.email}}
            </td>

        </ng-container>



        <ng-container matColumnDef="transId">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:200px" class="table-headers">
                <div>
                    {{'TransactionId'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
                {{element?.transId}}

            </td>
        </ng-container>




        <ng-container matColumnDef="Paymentstatus">
            <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;width:200px" class="table-headers">
                <div>
                    {{'Paymentstatus'|translate}}
                </div>
            </th>
            <td mat-cell *matCellDef="let element" class="table-content">
               
                    
                        <mat-select style="width: 65%;font-family: nucleo;"
                            [(ngModel)]="element.paymentStatus"
                            [ngModelOptions]="{standalone: true}" (ngModelChange)="onPaymentStatusChange(element.userId, element.paymentStatus)">
                            <mat-option *ngIf="element.status === 'P';" style="font-family: nucleo;" value="P">Pending</mat-option>
                            <mat-option  style="font-family: nucleo;" value="D">Decline</mat-option>
                            <mat-option  style="font-family: nucleo;"  value="S" (click)="ConfirmMail(element.userName, element.email)" >Confirm</mat-option>
                        </mat-select>
                    

             
            </td>
        </ng-container>




        <tr mat-header-row *matHeaderRowDef="displaycolumns ;sticky: true;"></tr>
        <tr mat-row *matRowDef="let row; columns: displaycolumns;"></tr>

    </mat-table>
</div>


</div>
</div>
<div class="buttonCardBottom">

</div>