<div class="container-responsive">

  <div class="row">
    <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2">
          <button mat-raised-button class="hide-on-print  addButton" style="width: 78px;" (click)="goToDashboard()"> 
             <mat-icon style="font-size: medium;transform: translateY(3px);" >arrow_back</mat-icon>{{ 'Back' | translate }}
           </button>
           </div>
          <!-- <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8" style="display: flex;justify-content: center;align-items: center;">
            <h2 class="tenderHeading">Tender Details</h2> 

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

 </div>
  <!-- <nav class="navbar navbar-expand-lg" style="padding: 16.5px;">
    <div class="container">
      <p class="navbar-brand d-flex align-items-center" href="#">
        <img src="assets/img/emblem2.jpg" alt="" class="img-fluid" style="height: 40px;">
        Thrickodithanam SCB
      </p>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link tender-link" (click)="navigateTo('auth/admin-home')">Tender</a>
          </li>
          <li class="nav-item">
            <p class="nav-link home-link" (click)="goToHome()">Home</p>
          </li>
          <li class="nav-item">
            <p class="nav-link contact-link" (click)="goToContactUs()">Contact Us</p>
          </li>
        </ul>
      </div>


    </div>
  </nav>

  <nav class="navbar navbar-dark-responsive"
    style="background-image: url('assets/img/panel_background.jpg');padding: 50px;"> -->
  <!-- <div class="container-fluid"> -->
  <!-- <a class="navbar-brand" (click)="navigateTo('tender-view')">
          <h6>Home / Tender</h6>
        </a> -->
  <!-- </div> -->

  <!-- </nav> -->
  <!-- <mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar> -->
  <br id="headingBreak">
  <div class="text-center mt-4">
    <h2 class="tenderHeading">Tender Details</h2>
    <div class="row">
      <div class="col-11 text-right">
        <div class="responsive-buttons">
          <button *ngIf="seculevel === 'B'"  (click)="TenderCancelToggle($event)" class="hide-on-print printButton float-left responsive" mat-raised-button>
            Active <mat-slide-toggle  [checked]="activeYn === 'Y'" disabled  style="margin-bottom: 4px; font-family: nucleo;" matTooltip="Slide to Enable / Disable Tender" (change)="TenderCancelToggle($event)"></mat-slide-toggle>
          </button>
          <button *ngIf="!CancelTenderButtons" class="hide-on-print printButton float-left responsive" mat-raised-button (click)="print()">
            Print <i class="fa fa-arrow-down" style="font-size: small;"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <br>

  
  <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>
          <!-- <button mat-icon-button matSuffix *ngIf="this.fileSelected" (click)="deleteSecretaryInput();">
    <mat-icon>delete</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>
          <!-- <button mat-icon-button matSuffix *ngIf="this.fileSelected2" (click)="deletePresidentInput();">
    <mat-icon>delete</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: orangered;cursor: pointer;" (click)="closeDialog()">Close</a>
        </div>
    </div>
</ng-template>
  </mat-card>


  <div class="row d-flex justify-content-center " >
    <div class="col-sm-11 ">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-md-6">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">Basic Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Tender Category</th>
                      <td>{{tenderData.tenderCategoryD?.productCategory}}</td>
                    </tr>
                    <tr>
                      <th>Organisation Name</th>
                      <td class="col-md-6">{{tenderData?.orgChain}}</td>
                    </tr>
                    <tr>
                      <th>Tender Reference Number</th>
                      <td>{{tenderData.tenderRefNo}}</td>
                    </tr>
                    <tr>
                      <th>Tender ID</th>
                      <td>{{tenderData.tenderId}}</td>
                    </tr>
                    <tr>
                      <th>Tender Type</th>
                      <td>{{tenderData.tenderTypeD?.tenderType}}</td>
                    </tr>
                    
                    <tr>
                      <th>Payment Mode</th>
                      <td>{{tenderData.paymentModeD?.paymentMode}}</td>
                    </tr>
                    <tr>
                      <th>Form of Contract</th>
                      <td>{{tenderData.formOfContractD?.formOfContract}}</td>
                    </tr>
                    <!-- <tr>
                      <th>No. of Covers</th>
                      <td>{{tenderData.noOfCovers}}</td>
                    </tr> -->
                  </tbody>
                </table>
              </div>
            </div>

            


            <div class="col-md-6">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">Tender Fee Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Tender Fee in ₹</th>
                      <td class="col-md-7">{{tenderData.tenderFee ? tenderData.tenderFee : '0' }}</td>
                    </tr>
                    <tr>
                      <th>Fee Payable To</th>
                      <td>{{tenderData.feePayableTo ? tenderData.feePayableTo : 'not applicable' }}</td>
                    </tr>
                    <tr>
                      <th>Tender Fee Exemption Allowed</th>
                      <td>{{ tenderData.tenderFeeExemption !== null && tenderData.tenderFeeExemption !== '' ? tenderData.tenderFeeExemption : 'not applicable' }}</td>
 
                    </tr>
                    <!-- <tr class="hide-on-print">
                      
                      <th colspan="2"> <button class="float-right hide-on-print payButton" *ngIf="!amountPaid && seculevel != 'B' && OnlinePayment && !CancelTenderButtons" mat-raised-button (click)="paymentGateway()">Pay Tender Fee</button></th>
                    </tr> -->
                  </tbody>
                </table>
              </div>
            </div>

            <div class="col-md-6">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">EMD Fee Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>EMD Fee Applicable</th>
                      <td class="col-md-6">{{tenderData.emdFeeApplied ? 'Yes' : 'No'}}</td>
                    </tr>
                    <tr>
                      <th>EMD Amount in ₹</th>
                      <td class="col-md-6">{{ tenderData.emdAmt !== undefined && tenderData.emdAmt !== null ? (tenderData.emdAmt !== 0 ? tenderData.emdAmt : 'not applicable') : 'not applicable' }}</td>
                    </tr>
                    <tr>
                      <th>EMD Fee Type</th>
                      <td>{{tenderData.emdFeeTypeD?.emdFeeType ? tenderData.emdFeeTypeD?.emdFeeType : 'not applicable' }}</td>
                    </tr>
                    <tr>
                      <th>EMD Payable To</th>
                      <td>{{tenderData.emdPayableTo ? tenderData.emdPayableTo : 'not applicable' }}</td>
                    </tr>
                    <tr>
                      <th>EMD through BG/ST or EMD Exemption Allowed</th>
                      <td>{{tenderData.allowEmdBgOrSt ? tenderData.allowEmdBgOrSt : 'not applicable' }}</td>
                    </tr>
                    <!-- <tr>
                      <th>EMD Percentage</th>
                      <td>{{tenderData.emdPercentage}}</td>
                    </tr> -->

                  </tbody>
                </table>

                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">Critical Dates</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Published Date</th>
                      <td class="col-md-6">{{tenderData.publishDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                    <tr>
                      <th>Document Download / Sale Start Date</th>
                      <td>{{tenderData.saleStartDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                    <!-- <tr>
                      <th>Clarification Start Date</th>
                      <td>{{tenderData.clarificationStartDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr> -->
                    <tr>
                      <th>Document Download / Sale End Date</th>
                      <td>{{tenderData.saleEndDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                    <!-- <tr>
                      <th>Clarification End Date</th>
                      <td>{{tenderData.clarificationEndDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr> -->
                    <tr>
                      <th>Bid Submission Start Date</th>
                      <td>{{tenderData.bidSubStartDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                    <tr>
                      <th>Bid Submission End Date</th>
                      <td>{{tenderData.bidSubEndDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                    <tr>
                      <th>Bid Opening Date</th>
                      <td>{{tenderData.bidOpenDate  | date: 'MMM d, y, h:mm:ss a'}}</td>
                    </tr>
                  </tbody>
                </table>

              </div>
            </div>


            <div class="col-md-6">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">Work Item Details</th>
                    </tr>
                  </thead>
                  <tbody>
                   
                    <tr>
                      <th>Title</th>
                      <td class="col-md-6">{{tenderData.title}}</td>
                    </tr>
                    <tr>
                      <th>Work Description</th>
                      <td>{{tenderData.workDesc}}</td>
                    </tr>
                    <tr>
                      <th>Pre Qualification</th>
                      <td>{{tenderData.ndaPreQualification}}</td>
                    </tr>
                    <tr>
                      <th>Tender Value in ₹</th>
                      <td>{{tenderData.tenderValue}}</td>
                    </tr>
                    <tr>
                      <th>  Category</th>
                      <td>{{tenderData?.productCategoryD?.tenderCategory}}</td>
                    </tr>
                    <tr>
                      <th>Sub category</th>
                      <td>
                        <ng-container *ngFor="let subCategory of getUniqueSubCategories();  let last = last">
                          {{ subCategory.tendersubCategoryD?.tenderSubCategory }}
                          <ng-container *ngIf="!last">, </ng-container>
                        </ng-container>
                      </td>
                    </tr>
                    
                    <tr>
                      <th>Bid Validity(Days)</th>
                      <td>{{tenderData.bidValidity}}</td>
                    </tr>
                    <tr>
                      <th>Period Of Work </th>
                      <td>{{tenderData.periodOfWork}}</td>
                    </tr>
                    <tr>
                      <th>Location</th>
                      <td>{{tenderData.location}}</td>
                    </tr>
                    <tr>
                      <th>Pincode</th>
                      <td>{{tenderData.pincode}}</td>
                    </tr>
                    <tr>
                      <th>Bid Opening Place</th>
                      <td>{{tenderData.bidOpeningPlace}}</td>
                    </tr>
                    <tr>
                      <th>Bid Opening Address</th>
                      <td>{{tenderData.bidOpenAddress}}</td>
                    </tr>
                    <!-- <tr>
                      <th>Pre Bid Meeting Place</th>
                      <td>{{tenderData.preBidMeetPlace}}</td>
                    </tr>
                    <tr>
                      <th>Pre Bid Meeting Address</th>
                      <td>{{tenderData.preBidMeetAdd}}</td>
                    </tr>
                    <tr>
                      <th>Pre Bid Meeting Date</th>
                      <td>{{tenderData.preBidDate  | date: 'MMM d, y'}}</td>
                    </tr> -->

                    <!-- <tr>
                      
                      <th>Independent External Monitor/Remarks</th>
                      <td>{{tenderData.remarks}}</td>
                    </tr>
                     -->
                    <!-- <tr>
                      <th>Contract Type</th>
                      <td>{{tenderData.contractType}}</td>
                    </tr> -->


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


            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="12" style="background-image: url('assets/img/thimg3.jpg');">Tenders Documents</th>
                    </tr>
                  </thead>

                  <tbody *ngIf="nitItemDocuments.length > 0">
                    <tr>
                      <th colspan="12" class="text-center" style="background-color:#f0f0f0;">Notice</th>
                    </tr>
                    <tr style="text-align: center;">
                      <th colspan="3">Document Type</th>
                      <th colspan="3">Document Name</th>
                      <th colspan="3">Description</th>
                      <th colspan="3" class="hide-on-print">Download</th>
                    </tr>
                    <tr *ngFor="let document of nitItemDocuments let i = index">
                      <td colspan="3">{{document.documentTypeD.documentType}}</td>
                      <td colspan="3">{{document.docName}}</td>
                      <td colspan="3">{{document.description}}</td>
                      <td style="text-align: center;" class="hide-on-print"><button mat-raised-button class="DownloadNoticeButton hide-on-print"  (click)="DownloadNIT(i)" ><i class="fa fa-arrow-down" style="font-size:large  ;"></i></button></td>
                    </tr>
                  </tbody><br>


                  <tbody *ngIf="workItemDocuments.length > 0">
                    <tr>
                      <th colspan="12" class="text-center" style="background-color:#f0f0f0;">Work Item Documents</th>
                    </tr>
                    <tr style="text-align: center;">
                      <th colspan="3">Document Type</th>
                      <th colspan="5">Document Name</th>
                      <th colspan="4">Description</th>
                    </tr>
                    <tr *ngFor="let document of workItemDocuments">
                      <td colspan="3">{{document.documentTypeD.documentType}}</td>
                      <td colspan="5">{{document.docName}}</td>
                      <td colspan="4">{{document.description}}</td>
                    </tr>
                    <tr class="hide-on-print">

<!--REMOVED BUTTON IF CONDITION [*ngIf="showDownloadButton && !CancelTenderButtons"]-->

                      <th colspan="12"><button  mat-raised-button id="zipFile" (click)="downloadWITZip()" class=" DownloadZipButton hide-on-print"
                          > <i class="bi bi-file-earmark-zip"></i> Download as Zip File</button>

                          <!-- <p *ngIf="!showDownloadButton">Documents can Only be download between {{tenderData.saleStartDate | date: 'MMM d, y, h:mm:ss a'}} and {{tenderData.saleEndDate| date: 'MMM d, y, h:mm:ss a'}}</p> -->
                      </th>

                    </tr>
                  </tbody><br>

                  <!-- <tbody *ngIf="nitItemDocuments.length > 0">
                    <tr>
                      <th colspan="12" class="text-center" style="background-color:#b8b8b8;">Notice</th>
                    </tr>
                    <tr>
                      <th colspan="3">Document Type</th>
                      <th colspan="3">Document Name</th>
                      <th colspan="3">Description</th>
                      <th colspan="3" class="hide-on-print">Download</th>
                    </tr>
                    <tr *ngFor="let document of nitItemDocuments let i = index">
                      <td colspan="3">{{document.documentTypeD.documentType}}</td>
                      <td colspan="3">{{document.docName}}</td>
                      <td colspan="3">{{document.description}}</td>
                      <td class="hide-on-print"><button mat-raised-button class="btn-sm hide-on-print"  (click)="DownloadNIT(i)" style="color: #5faca1;"><mat-icon>download</mat-icon></button></td>
                    </tr>
                  </tbody> -->

                  <tbody *ngIf="drawingsDocuments.length > 0">
                    <tr>
                      <th colspan="12" class="text-center" style="background-color: #f0f0f0;">Drawings Document</th>
                    </tr>

<!--REMOVED BUTTON IF CONDITION  [*ngIf="showDownloadButton && !CancelTenderButtons" ]-->

                    <tr class="hide-on-print">
                      <th colspan="12">Description<button mat-raised-button id="zipFile" class="DownloadZipButton hide-on-print"
                          (click)="DownloadDrawingsZIP()" ><span *ngIf="!spinnerLoading"> <i class="bi bi-file-earmark-zip"></i> Download as Zip
                          File</span>
                          <mat-spinner diameter="20" *ngIf="spinnerLoading"></mat-spinner>
                        </button> 
                          <!-- <p *ngIf="!showDownloadButton">Documents can Only be download between {{tenderData.saleStartDate | date: 'MMM d, y, h:mm:ss a'}} and {{tenderData.saleEndDate| date: 'MMM d, y, h:mm:ss a'}}</p> -->
                        
                        </th>

                    </tr>

                    <tr *ngFor="let document of drawingsDocuments">
                      <td  colspan="12">{{document.description}}</td>
                    </tr>



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

            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="12" style="background-image: url('assets/img/thimg3.jpg');">Required Documents Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="text-align: center;">
                      <th colspan="4">Document Type</th>
                      <th colspan="4">Description</th>
                      <th colspan="4">Document Format</th>

                    </tr>
                    <tr *ngFor="let document of tenderData.covers">
                      <td colspan="4">{{ document.coverTypeD.coverType }}</td>
                      <td colspan="4">{{ document.Description }}</td>
                      <td colspan="4">{{ document.fileFormatD.fileFormat }}</td>
                    </tr>
                    <tr>

                      <!-- <th colspan="12"><button mat-raised-button id="zipFile" class=" float-right btn-sm" (click)="downloadZip()"> <i class="bi bi-file-earmark-zip" ></i> Download as Zip File</button> </th> -->

                    </tr>


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




            <div class="col-md-12">
              <div class="table-responsive">
                <table class="table table-bordered">
                  <thead class="table-dark">
                    <tr>
                      <th colspan="2" style="background-image: url('assets/img/thimg3.jpg');">Tender Inviting</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Name</th>
                      <td class="col-md-6">{{tenderData.tenderInvName}}</td>
                    </tr>
                    <tr>
                      <th>Address</th>
                      <td>{{tenderData.tenderInvAddess}}</td>
                    </tr>

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


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


  </div>
</div>

  <div class="footer" style="background: white;">
    <footer id="footer" style="padding: 70px 0; color: #000000; font-size: 16px; bottom: 0;margin-top: 10px;"
      class="py-3">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center" style="font-size: smaller;">
           
          
              <p class="mb-0" style="font-family: 'nucleo';">
                &copy; <span style="font-weight: bolder;margin-right: 10px;">Art . n Architects</span><span style=" margin-right: 10px;"> All Rights Reserved </span>
                <a href="https://tender.artnouveau.in/#/policy/privacy-policy" style="color: #000000; margin-right: 10px;">Privacy Policy</a> | 
                <a href="https://tender.artnouveau.in/#/policy/refund-policy" style="color: #000000; margin-right: 10px;">Refund Policy</a> | 
                <a href="https://tender.artnouveau.in/#/policy/terms-and-conditions" style="color: #000000; margin-right: 10px;">Terms and conditions</a> |  
                Designed by <a href="https://www.simssoftware.in/" target="_blank" style="color: #000000;">SiMS</a>
            </p>
            </div>
        </div>
      </div>
    </footer>
  </div>

