

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

    <button mat-stroked-button (click)="printScreen()" class="printButton">
        Print
    </button>

    <button mat-stroked-button (click)="excelDownload()" class="excelButton">
        Excel
    </button>

    <button mat-stroked-button (click)="sendMail()" class="excelButton">
        <!-- <svg *ngIf="headerData?.sendReport != 'Y'" xmlns="http://www.w3.org/2000/svg" style="height: 50%;"  height="1em" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z" fill="#424242"/></svg> -->
        <svg *ngIf="headerData?.sendReport != 'Y'" xmlns="http://www.w3.org/2000/svg" style="height: 45%;"  height="1em" viewBox="0 0 512 512"><path d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z" fill="#424242"/></svg>
        <svg *ngIf="headerData?.sendReport == 'Y'" xmlns="http://www.w3.org/2000/svg" height="1em" style="height: 50%;" viewBox="0 0 640 512"><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0l57.4-43c23.9-59.8 79.7-103.3 146.3-109.8l13.9-10.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176V384c0 35.3 28.7 64 64 64H360.2C335.1 417.6 320 378.5 320 336c0-5.6 .3-11.1 .8-16.6l-26.4 19.8zM640 336a144 144 0 1 0 -288 0 144 144 0 1 0 288 0zm-76.7-43.3c6.2 6.2 6.2 16.4 0 22.6l-72 72c-6.2 6.2-16.4 6.2-22.6 0l-40-40c-6.2-6.2-6.2-16.4 0-22.6s16.4-6.2 22.6 0L480 353.4l60.7-60.7c6.2-6.2 16.4-6.2 22.6 0z" fill="#424242"/></svg>
        <!-- <svg *ngIf="headerData?.sendReport == 'Y'" xmlns="http://www.w3.org/2000/svg" height="1em" style="height: 50%;" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" fill="#424242"/></svg> -->
        Mail
    </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">Bid Final Report</h2>
            </div>

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

            <!-- <br> -->
            <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 class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: center;">
                    <span class="subHead">
                        {{'publishedDate'|translate}} :
                        <span class="subDetail"> {{headerData?.publishDate | date: 'MMM d, y, h:mm:ss a'}}</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 class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" style="text-align: center;">
                    <span class="subHead">
                        {{'bidOpenDate'|translate}} :
                        <span class="subDetail">{{headerData?.bidOpenDate | date: 'MMM d, y, h:mm:ss a'}}</span>
                        </span>
                </div>
            </div>

            <br>
            <div class="row">
                <h3 class="tenderInfo">Bid 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;" 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="finalBidAmt">
                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;" class="table-headers">
                    <div>
                        {{'totalBidAmount'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content">
                    {{element?.finalBidAmt}}

                </td>
            </ng-container>



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

                        <button mat-button (click)="openDialogBox(captcha,element?.userId)">
                            <!-- <mat-icon style="color: #4a4a4a;">file_download</mat-icon> -->
                            <svg   xmlns="http://www.w3.org/2000/svg" height="1.7em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 464a208 208 0 1 1 0-416 208 208 0 1 1 0 416zM256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM376.9 294.6c4.5-4.2 7.1-10.1 7.1-16.3c0-12.3-10-22.3-22.3-22.3H304V160c0-17.7-14.3-32-32-32l-32 0c-17.7 0-32 14.3-32 32v96H150.3C138 256 128 266 128 278.3c0 6.2 2.6 12.1 7.1 16.3l107.1 99.9c3.8 3.5 8.7 5.5 13.8 5.5s10.1-2 13.8-5.5l107.1-99.9z"  fill="#555555"/></svg>
                        </button>
                        </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>


<ng-template #captcha>

    <div class="row">
        <div class="captchaDiv" >
        <span class="captchaFont">{{captchaText}}</span>
    </div>
    </div>
<br>
    <span>Type the word Above : </span>
    <br>

    <div class="row">
        <mat-form-field appearance="outline">
            <mat-label>Text</mat-label>
              <input type="text" matInput placeholder="{{ 'Type' | translate }}"
                  [(ngModel)]="userCaptchaInput"  style="width:100%;border-bottom: 0px;">
          </mat-form-field>
    </div>
    
    <div class="row" style="text-align: center;">
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button mat-raised-button class="captchaSubmit" (click)="captchaCheck()">submit</button>
        </div>
        <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" style="margin-top: 4px;">
                <mat-icon (click)="generateRandomText()" style="cursor: pointer;" [ngClass]="{'rotate-icon': isIconRotating}">refresh</mat-icon>
        </div>

    
</div>
<br>
    <div class="row" style="text-align: center;">
        <span *ngIf="!captchaMatching" style="color: red;">Captcha Not Matching</span>
    </div>
</ng-template>