<!--  -->

<!-- <div class="row" id="Headerbutton">
    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
        <button mat-raised-button color="primary" (click)="backButton()"
            style="float: left;margin-top: 5px;margin-bottom: 5px;background-color: #46AC9E;">
            Back
        </button>
    </div>

    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">

        <button mat-raised-button color="primary" (click)="printScreen()"
            style="float: right;margin-top: 5px;margin-bottom: 5px;background-color: #46AC9E;">
            Print
        </button>

       

        <button mat-raised-button color="primary" (click)="excelDownload()"
            style="float: right;margin-top: 5px;margin-bottom: 5px;margin-right: 5px;background-color: #46AC9E;">
            Excel Download
        </button>
    </div>
    
</div> -->

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


<div id="section-to-print" class="container" style="background-color: white;">
    <!-- <div class="outerContainer"> -->
    <!-- <h6 style="width: calc(100vw - 50px);margin-top: 18px;">
        <b>
            <span class="titleSpan">{{title | translate}}</span>
            <br>
            <div class="row" >
                <span class="tenderInfo">Tender Information:</span>
            </div>


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

        <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" id="publishingDateDiv">
            <span class="publishingDate">
                <br>
                {{'publishedDate'|translate}} :
                <span>
                    {{headerData?.publishDate | date: 'MMM d, y, h:mm:ss a'}}
                </span>
            </span>
            </div>
        </div>


        <div class="row" >
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" id="tenderNameDiv">
        <span class="tenderName">
            <br>
            {{'tenderId'|translate}} :
            <span>
                {{tenderInputId}}
            </span>
        </span>
    </div>

    <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" id="publishingDateDiv">
        <span class="publishingDate">
        
            <br>
            {{'bidOpenDate'|translate}} :
            <span>
                {{headerData?.bidOpenDate | date: 'MMM d, y, h:mm:ss a'}}
            </span>
        </span>
        </div>
    </div>
    <br>

    <div class="row" >
        <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" id="tenderNameDiv">
    <span class="tenderName">
        <br>
        <span class="bidComparison">
            Bid Comparison:
        </span>
    </span>
</div>

<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6" id="publishingDateDiv">

    </div>
</div>



        </b>
    </h6> -->
    <!-- <hr class="hiddenLine"> -->
    <!-- <h6>{{'currentDate'|translate}}: {{today | date: 'MMM d, y, h:mm:ss a'}}</h6> -->
    <!-- <h6>{{tenderInputId}}</h6> -->
    

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


            <!-- <br> -->
            <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>
                <td></td>
                <td>Bid Open Date</td>
                <td>
                    {{headerData?.sectionName}}
                </td>
                <td></td>
                
                <td></td>
                
                <td></td>

            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>Current Date: </td>
                <td>
                    {{today | date: 'dd MMMM YYYY'}}
                </td>
                <td></td>

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

        <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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </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}}
                        <!-- <mat-icon>sort</mat-icon> -->
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content" style="text-align: center;">
                    <!-- <button mat-stroked-button (click)="downloadUserDocs(element?.userId)">
                        <mat-icon style="color: #4a4a4a;">file_download</mat-icon></button> -->

                        <button mat-stroked-button (click)="openDialogBox(captcha,element?.userId)">
                            <mat-icon style="color: #4a4a4a;">file_download</mat-icon></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>