<section class="content-header">
  <h4 class="subheader-title">
    <span class="subheader-icon fal fa-comments"></span>&nbsp;Query Module
  </h4>
</section>

<section class="content">
  <div class="box padding-15">
    <!-- Filters -->
    <div class="row mb-3">
      <div class="col-md-3">
        <label>Filter by Query Type:</label>
        <select class="form-control" [(ngModel)]="selectedType" (change)="onFilter()">
          <option value="">All</option>
          <option *ngFor="let type of queryTypes" [value]="type">{{ type }}</option>
        </select>
      </div>
      <div class="col-md-3">
        <label>Filter by Status:</label>
        <select class="form-control" [(ngModel)]="selectedStatus" (change)="onFilter()">
          <option value="">All</option>
          <option *ngFor="let status of queryStatuses" [value]="status">{{ status }}</option>
        </select>
      </div>
      <div class="col-md-6 text-right">
        <button class="btn btn-outline-primary btn-sm" (click)="onRefresh()" style="margin-right: 5px;">
          <i class="fal fa-sync"></i> Refresh
        </button>
        <a href="#/reports/vlexreport" class="btn btn-outline-primary btn-sm">
          <i class="fal fa-chart-area"></i> Back to Dashboard
        </a>
      </div>
    </div>

    <!-- Table -->
    <div class="table-responsive">
      <table class="table jambo_table table-striped table-hover table-bordered">
        <thead>
          <tr class="headings">
            <th style="width: 60px;">#</th>
            <th>Reporter Name</th>
            <!--<th>Job Title</th>-->
            <th>Volume</th>
            <th>Edition</th>
            <th>Issue</th>
            <th>Publishing Date</th>
            <th style="min-width: 80px;">Start Page</th>
            <th style="min-width: 80px;">End Page</th>
            <th style="min-width: 120px;">Query Status</th>
            <th style="min-width: 170px;">Query Type</th>
            <th>Query Description</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let comment of filteredComments; let i = index">
            <td>{{ i + 1 }}</td>
            <td>{{ comment.reportername }}</td>
            <!--<td>{{ comment.jobtitle }}</td>-->
            <td>{{ comment.volumne }}</td>
            <td>{{ comment.edition }}</td>
            <td>{{ comment.issue }}</td>
            <td>{{ comment.dateofpublication }}</td>
            <!--<td>{{ comment.startpage }}</td>
            <td>{{ comment.endpage }}</td>-->
            <td>
              <input type="text" trim  type="number" [(ngModel)]="comment.startpage"
              value="comment.startpage" 
              name="startpage" class="form-control" (blur)="updateStartEndpage(comment)" />
            </td>
             <td>
              <input type="text" trim   type="number" [(ngModel)]= "comment.endpage" 
              value="comment.endpage" name="endpage" class="form-control" (blur)="updateStartEndpage(comment)" />
            </td>
            <!-- Auto Update Status -->
            <td>
              <select class="form-control form-control-sm"
                      [(ngModel)]="comment.status"
                      (change)="onStatusChange(comment)">
                <option *ngFor="let status of queryStatuses" [value]="status">{{ status }}</option>
              </select>
            </td>
              <!-- Auto Update Query Type -->
            <td>
              <select class="form-control form-control-sm"
                      [(ngModel)]="comment.querytype"
                      (change)="onQueryTypeChange(comment)">
                <option *ngFor="let type of queryTypes" [value]="type">{{ type }}</option>
              </select>
            </td>            
            <td>{{ comment.comment_text }}</td>
            <!--<td>{{ comment.createdon | date: 'dd-MMM-yyyy' }}</td>-->
          </tr>

          <tr *ngIf="filteredComments.length === 0">
            <td colspan="7" class="text-center">No comments found</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
