
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<!-- <mat-card *ngIf="showPopup" class="popup-card mainCard">
    <br>
    <div class="popup-container">
   
    <mat-card-subtitle style="text-align: center;">
      <div class="row">
        <div class="col-12">
          <span class="resetSpan">{{ 'digitalSignature' | translate }}</span>
          <div class="float-right">
            <a style="cursor: pointer;color: rgb(0, 0, 0); " class="normalText" (click)="openHelpDialog(help)"><h5><i class="bi bi-info-circle"></i></h5></a>
        </div>
        </div>
      </div>
    </mat-card-subtitle><br>
    <mat-card-content class="centered-form">
      

        <mat-form-field class="columns" appearance="outline" style="width: 90%;">
          
          <mat-label style=" font-family: nucleo;" *ngIf="Secretary; else SecretarySignature">
            {{Secretary}}</mat-label>
          <ng-template #SecretarySignature>
            <mat-label style=" font-family: nucleo;"> {{ 'SecretarySignature' | translate }}
            </mat-label>
          </ng-template>


          <input matInput readonly [(ngModel)]="Secretary">
          <button mat-icon-button matSuffix *ngIf="!this.fileSelected"
            (click)="assetFileInput.click();">
            <mat-icon>attach_file</mat-icon>
          </button>
      
          <input  hidden (change)="UploadsecretaryFiles($event,Secretary)" #assetFileInput
            type="file" id="file" value="Secretary">

          
        </mat-form-field>

        <mat-form-field appearance="outline" style="width: 90%;">

          <mat-label style=" font-family: nucleo;" *ngIf="President; else PresidentSignature">
            {{President}}</mat-label>
          <ng-template #PresidentSignature>
            <mat-label style=" font-family: nucleo;"> {{ 'PresidentSignature' | translate }}
            </mat-label>
          </ng-template>

          <input matInput readonly [(ngModel)]="President" >
          <button mat-icon-button matSuffix *ngIf="!this.fileSelected2"
            (click)="assetFileInput2.click();">
            <mat-icon>attach_file</mat-icon>
          </button>
         
          <input hidden  (change)="UploadPresidentFiles($event,President)" #assetFileInput2
            type="file" id="file2" value="President">
          </mat-form-field>
     
    </mat-card-content>
    <mat-card-actions class="float-right">
      <button mat-button (click)="VerifySignature()" class="popUpButtons">Verify</button>
      <button mat-button (click)="closePopup()"  class="popUpButtons">Close</button>
    </mat-card-actions>
  </div>

  <ng-template #help>
    <div class="normalText">
        <div class="row" style="text-align: center;">
            <div class="col-12">
        <span class="helpHeading">How can I Validate Digital Signature? </span>
        </div>
        </div>
        <br>
        <br>
        
        <h6> Connect Security Device
        </h6>
        <ul>
            <li> Plug in the security device that has the necessary security keys.
            </li>
        </ul>
        <h6> Select Key Files
        </h6>
        <ul>
            <li>  Choose the Public key files for both the secretary and the president, usually provided on the security device.
            </li>
            <li>Locate the Public key document or file that you want to validate.</li>
        </ul>
        <div class="row"  style="text-align: center;">
            <div class="col-12" >
                <span style="font-family: nucleo;font-size: larger; color: #1e3d3b;">You can access Tender Reports only after validating the digital signatures of President and Secretary.</span>
            </div>
        </div>

       

        <div style="text-align: right;">
            <a style="color: #46AC9E;cursor: pointer;" (click)="closeDialog()">Close</a>
        </div>
    </div>
</ng-template>
  </mat-card> -->

  <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
   

<div *ngIf="seculevel === 'Admin' || seculevel === 'SuperAdmin'">

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

    <mat-menu #beforeMenu="matMenu" xPosition="before">

        <button mat-menu-item  (click)="printScreen()" style="font-family: nucleo;font-size: small;">
            <img  style="height: 20px;width:19px;" src="assets/img/printttt.png" alt=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Print screen
    
        </button>

        <button mat-menu-item (click)="excelDownload()"  style="font-family: nucleo;font-size: small;" >
            <img  style="height: 25px;width:21px;" src="assets/img/excel.png" alt=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Download Excel
    
        </button>
        <button *ngIf="headerButtonVisible" mat-menu-item (click)="sendReportMail(sendReport)" style="font-family: nucleo;font-size: small;">
            <!-- <mat-icon style="color: #28bbf7;">send</mat-icon> -->
            <img  style="height: 30px;width:30px;transform: translateX(-3px);" src="assets/img/sendicon.png" alt=""> 
            &nbsp;&nbsp;&nbsp;  Send Report
        </button>
        <button *ngIf="headerButtonVisible" mat-menu-item (click)="sendEmailMsg(sendMail)" style="font-family: nucleo;font-size: small;">

            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 48 48">
            <path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"></path><path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"></path><polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"></polygon><path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z"></path><path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z"></path>
            </svg> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Send Mail</button>

           
      </mat-menu>

    
      <button mat-fab  [matMenuTriggerFor]="beforeMenu"> 
        <mat-icon style="    color: #5d5d5d;margin-top: -4px;margin-left: -3px;">menu</mat-icon> 
    </button>

    
    <button *ngIf="headerButtonVisible" mat-stroked-button (click)="goToReportQouting()"  class="excelButton" style="width: 114px;font-size: smaller;">
        Re Quoting
    </button>

    <button *ngIf="headerButtonVisible" mat-stroked-button (click)="gotoRequotedReport()"  class="excelButton" style="width: 125px;font-size: smaller; ">
         Re Quoting Report
    </button>
    

    <!-- <button mat-stroked-button (click)="sendMail()" class="excelButton">
         <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>
          Mail
    </button> -->
    
    <!-- <img  style="height: 19px;width:19px;" src="assets/img/mail.png" alt=""> -->
   
    <!-- <button mat-stroked-button (click)="sendReportMail(sendReport)" class="excelButton">
        Send Report
    </button>

    <button mat-stroked-button (click)="sendEmailMsg(sendMail)" class="excelButton">
         <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 48 48">
            <path fill="#4caf50" d="M45,16.2l-5,2.75l-5,4.75L35,40h7c1.657,0,3-1.343,3-3V16.2z"></path><path fill="#1e88e5" d="M3,16.2l3.614,1.71L13,23.7V40H6c-1.657,0-3-1.343-3-3V16.2z"></path><polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"></polygon><path fill="#c62828" d="M3,12.298V16.2l10,7.5V11.2L9.876,8.859C9.132,8.301,8.228,8,7.298,8h0C4.924,8,3,9.924,3,12.298z"></path><path fill="#fbc02d" d="M45,12.298V16.2l-10,7.5V11.2l3.124-2.341C38.868,8.301,39.772,8,40.702,8h0 C43.076,8,45,9.924,45,12.298z"></path>
            </svg>
    </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">
                    
                        {{'totalBidAmount'|translate}}
                     
                </th>
                <td mat-cell *matCellDef="let element" class="table-content" style="text-align: center;"   >
                    {{element?.finalBidAmt}}

                </td>
            </ng-container>


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

                </td>
            </ng-container>


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

                </td>
            </ng-container>


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

                </td>
            </ng-container> -->

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

                        <button mat-button (click)="downloadDDdocs(element?.DDFile?.docName)">
                            <mat-icon style="color: #4a4a4a;">file_download</mat-icon>
                        </button>
                        </td>
            </ng-container>

            <ng-container matColumnDef="aadharNo">
                <th mat-header-cell *matHeaderCellDef style="text-align: center; " class="table-headers">
                    <div>
                        {{'BOQ 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"> <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>


            <ng-container matColumnDef="boqStatus">
                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center;" class="table-headers">
                    <div>
                        {{'BOQ Status'|translate}}
                    </div>
                </th>
                <td mat-cell *matCellDef="let element" class="table-content" [ngStyle]="{ 'color': element.boqStatus === 'Uploaded' ? '#00d400' : (element.boqStatus === 'not uploaded' ? '#e96363' : '#7e7eff') }">
                    {{ element.boqStatus }}
                </td>
                
            </ng-container>

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

                        <button *ngIf="element.boqDocument"  mat-button (click)="downloadBoqdocs(element?.boqDocument)">
                            <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 *ngIf="this.tableData?.length === 0;">
        <br>
        <p class="subHead" style="font-size: larger;">No Reports available.</p>
    </div>

    </div>


</div>

<ng-template #sendMail>
   <div class="row">
    <div class="mailDiv">
        <span style="    font-size: large;color: black;font-weight: 500;font-style: italic;">
            {{'Compose an email message'}} </span>

        <div class="home-container" style="margin-top: 10px;">
            <div>
              
                <tag-input  [(ngModel)]="items"
                            [editable]="true"
                            [errorMessages]="errorMessages"
                            [validators]="validators"
                            [separatorKeyCodes]="[32,9,13]"
                            [placeholder]="'+email'"
                            [secondaryPlaceholder]="'Enter Email id'"
                           (onAdd)="onTagEdited($event)">
                </tag-input>
            </div>
        </div>

        <div class="row">
            <mat-form-field appearance="outline" style="margin-top:40px;">
                <mat-label>Subject</mat-label>
                  <input type="text" matInput placeholder="{{ 'Subject' | translate }}"
                      [(ngModel)]="emailData.subject"  style="width:100%;border-bottom: 0px;">
              </mat-form-field>

              <mat-form-field appearance="outline">
                <mat-label>Content</mat-label>
                <textarea matInput placeholder="{{ 'Content' | translate }}"
                          [(ngModel)]="emailData.content" style="width: 100%; border-bottom: 0px; height: 130px; resize: none;"></textarea>
              </mat-form-field>
              
        </div>
        

    <div class="row" style="text-align: center;margin-top: 20px;">
                <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                    <button mat-raised-button (click)="cancelEmailDialog()" style="color: rgb(255, 31, 31);width: 100%;">Cancel</button>
                </div>
            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                <button mat-raised-button (click)="emailSubmit()" style="color: rgb(79, 79, 243);width: 100%">Submit</button>
            </div>
        
    
        
    </div>
    </div>
   </div> 
    </ng-template>




    <ng-template #sendReport>
        <div class="row">
            <div class="mailDiv">
                <span style="    font-size: large;color: black;font-weight: 500;font-style: italic;">
                    {{'Sending Report via Email'}} </span>
            
                    <div class="home-container" style="margin-top: 50px;" >
                        <div>
                          
                            <tag-input [(ngModel)]="items"  
                                       [editable]="true"
                                       [errorMessages]="errorMessages"
                                       [validators]="validators"
                                        [separatorKeyCodes]="[32,9,13]"
                                        [placeholder]="'+email'"
                                        [secondaryPlaceholder]="'Enter Email id'"
                                       (onAdd)="onTagEdited($event)">
                            </tag-input>
                        </div>
                    </div>

                    <div class="row" style="text-align: center;margin-top:70px;">
                        <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                            <button mat-raised-button (click)="close()" style="color: rgb(255, 31, 31);width: 100%;"> Close</button>
                        </div>
                            <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                <button mat-raised-button (click)="sendReportViaMail()" style="color: rgb(79, 79, 243);width: 100%" >submit</button>
                            </div>
                       
                        
                    </div>
                </div> 

        </div>

    </ng-template>
<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>

</div>