<div class="container-responsive">
    <mat-progress-bar mode="indeterminate" *ngIf="loading"></mat-progress-bar>
    <div class="row" style="max-width: 100vw;">
        <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2">
            <button mat-raised-button class="addButton" style="width: 78px;" (click)="backButton()">
                <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;">
            <span class="master-header">Re Quoted Tender Reports </span>
        </div>

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

    </div>


    <div class="container" style="min-height: calc(100vh - 155px);">
       

        <div class="card-responsive">

            <div class="card-body-responsive">
                <div class="table-responsive">
                    <ng-container>
                        <mat-card class="card main-card">
                            <div class="top-bar" style="border-top-left-radius: 31px;border-bottom-left-radius: 31px;">
                                <div class="top-left-float">




                                    <div class="row" style="background-color: #FFFFFF;border-radius: 52px;width: 44vh;
                                box-shadow: 1px 1px 3px #DFCDFF;
                                border: 1px solid #F5F1FF;">
                                        <div class="col-2"
                                            style="align-items: center;display: flex;justify-content: center;">
                                            <mat-icon>search</mat-icon>
                                        </div>
                                        <div class="col-6">

                                            <mat-form-field>
                                                <input matInput placeholder="{{ 'search' | translate }}"
                                                    style="width: fit-content;" [(ngModel)]="searchTerm"
                                                    (keyup)="search()" />
                                            </mat-form-field>
                                        </div>
                                        <div class="col-4"
                                            style="align-items: center;display: flex;justify-content: center;">
                                            <button mat-raised-button class="addButton" (click)="reset()"> {{ 'clear' |
                                                translate }}</button>

                                        </div>


                                    </div>
                                </div>

                            </div>
                            <br>
                            <br>
                            <div class="row mb-5">
                                <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
                                   
                                </div>
                                <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">

                                    <mat-form-field appearance="outline" class="columns"
                                        style="height: 15px;margin-top: -10px;width:90%;">
                                        <mat-label>Select no of Re Quote</mat-label>
                                        <mat-select style="border: none; padding: 0; width: 100%;"
                                            [(ngModel)]="selectedOrder" (ngModelChange)="requoteNoChange(selectedOrder)"
                                            [ngModelOptions]="{standalone: true}">

                                            <mat-option *ngFor="let order of formattedOrders" [value]="order.order">
                                                Round -{{order.order}}
                                            </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>

                            </div>

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

                            <div *ngIf="selectedOrder==null && this.tableData?.length !== 0;">
                                <br>
                                <p class="subHead" style="font-size: larger;">please select the number of tender Re
                                    Quote</p>
                            </div>

                        </mat-card>
                    </ng-container>
                </div>
            </div>


        </div>

    </div>
</div>

<div class="footer">
    <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>