<div class="container-responsive">
  <!-- <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 responsive">
      <div class="col-3"></div>
      <div class="col-3"></div>
      <div class="col-5 ">
    <button class="hide-on-print printButton"  mat-raised-button (click)="print()" >Print <i class="fa fa-arrow-down" style="font-size: small;"></i></button>&nbsp;
      </div>
      <div class="col-1 "></div>

  </div>
  </div><br>

  <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 some-element">
                  <thead class="table-dark ">
                    <tr>
                      <th colspan="2">Basic Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <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>Tender Category</th>
                      <td>{{tenderData?.tenderCategoryD?.tenderCategory}}</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.NoCovers}}</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">Tender Fee Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Tender Fee in ₹</th>
                      <td class="col-md-7" >{{tenderData.tenderFee}}</td>
                    </tr>
                    <tr>
                      <th>Fee Payable To</th>
                      <td>{{tenderData.feePayableTo}}</td>
                    </tr>
                    <tr>
                      <th>Tender Fee Exemption Allowed</th>
                      <td>{{tenderData.tenderFeeExemption}}</td>
                    </tr>
                    <!-- <tr>
                      <th>Fee Payable At</th>
                      <td>{{tenderData.feePayableAt}}</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">EMD Fee Details</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th >EMD Amount in ₹</th>
                      <td class="col-md-6" >{{tenderData.emdAmt}}</td>
                    </tr>
                    <tr>
                      <th>EMD Fee Type</th>
                      <td>{{tenderData?.emdFeeTypeD?.emdFeeType}}</td>
                    </tr>
                    <tr>
                      <th>EMD Payable To</th>
                      <td>{{tenderData.emdPayableTo}}</td>
                    </tr>
                    <tr>
                      <th>EMD through BG/ST or EMD Exemption Allowed</th>
                      <td>{{tenderData.allowEmdBgOrSt}}</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">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">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>Product Category</th>
                      <td>{{tenderData?.productCategoryD?.productCategory}}</td>
                    </tr>
                    <tr>
                      <th>Sub category</th>
                      <td>{{tenderData.subCategory}}</td>
                    </tr>
                    <tr>
                      <th>Bid Validity(Days)</th>
                      <td>{{tenderData.bidValidity}}</td>
                    </tr>
                    <tr>
                      <th>Period Of Work(Days)</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, h:mm:ss a'}}</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">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>
                    <!-- <tr class="hide-on-print">

                      <th colspan="12"><button mat-raised-button id="zipFile" class=" float-right btn-sm hide-on-print"
                          (click)="DownloadNIT()"> <i class="bi bi-file-earmark-zip"></i> Download</button></th>

                    </tr> -->
                  </tbody>

                  <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">
                      
                      <th colspan="12"><button *ngIf="showDownloadButton" mat-raised-button id="zipFile" class="hide-on-print DownloadZipButton" (click)="downloadWITZip()"> <i class="bi bi-file-earmark-zip" ></i> Download </button> </th>
                      
                    </tr>
                  </tbody>

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


                    <tr class="hide-on-print">
                      <th colspan="12">Drawings  <button *ngIf="showDownloadButton" mat-raised-button id="zipFile" class="hide-on-print DownloadZipButton" (click)="DownloadDrawingsZIP()"> <i class="bi bi-file-earmark-zip"></i> Download</button></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">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">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><br>
</div>
<footer id="footer" style="background-color: #48746e; padding: 70px 0; color: #ffffff; font-size: 16px; bottom: 0;"
  class="py-3">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
        <p class="mb-0">&copy; <span style="font-weight: bolder;font-family: sans-serif;">Thrickodithanamscb 2023.
          </span>All Rights Reserved</p>
        <p class="mb-0">Designed by <a href="https://www.simssoftware.in/" style="color: #ffffff;">SiMS</a></p>
      </div>
    </div>
  </div>
</footer>