<clr-modal [(clrModalOpen)]="detailsOpen">
  <h3 class="modal-title">Approval Details</h3>
  <div class="modal-body">
    <table class="table">
      <thead>
        <tr>
          <th class="left">Name</th>
          <th class="left">Value</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let key of keysArray">
          <td class="left">{{ key }}</td>
          <td
            *ngIf="key.includes('TABLE_ID')"
            class="left link-it"
            [routerLink]="'/stage/' + jsParams[key]"
          >
            {{ jsParams[key] }}
          </td>
          <td *ngIf="!key.includes('TABLE_ID')" class="left">
            {{ jsParams[key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-sm btn-primary"
      (click)="detailsOpen = false"
    >
      Ok
    </button>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="tableFlag">
  <h3 class="modal-title">All Details</h3>
  <div class="modal-body">
    <clr-tabs *ngIf="tableFlag">
      <clr-tab>
        <button clrTabLink>Submitted Table Details</button>
        <clr-tab-content *clrIfActive="true">
          <div class="overflow-auto">
            <table class="table">
              <thead>
                <tr>
                  <th class="left">Name</th>
                  <th class="left">Value</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let detail of submitArr">
                  <td class="left">{{ detail }}</td>
                  <td class="left">{{ submitDetails[detail] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </clr-tab-content>
      </clr-tab>
      <clr-tab>
        <button clrTabLink>Base Table Details</button>
        <clr-tab-content>
          <div class="overflow-auto">
            <table class="table">
              <thead>
                <tr>
                  <th class="left">Name</th>
                  <th class="left">Value</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let key of keysArray">
                  <td class="left">{{ key }}</td>
                  <td class="left">{{ jsParams[key] }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </clr-tab-content>
      </clr-tab>
    </clr-tabs>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-sm btn-primary"
      (click)="tableFlag = false"
    >
      Ok
    </button>
  </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="rejectOpen">
  <h3 class="modal-title">Reason Message</h3>
  <div class="modal-body">
    <form>
      <section class="form-block">
        <div class="form-group">
          <label for="formFields_8">Reason for rejecting?</label>
          <textarea
            class="w-100"
            id="formFields_8"
            rows="5"
            [(ngModel)]="submitReason"
            [ngModelOptions]="{ standalone: true }"
            [innerHTML]="submitReason"
          ></textarea>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline" (click)="rejectOpen = false">
      Cancel
    </button>
    <button
      [clrLoading]="rejectLoading"
      type="submit"
      class="btn btn-success-outline"
      (click)="rejecting()"
    >
      OK
    </button>
  </div>
</clr-modal>

<div class="content-area">
  <div class="card" *ngIf="!submitted">
    <div
      class="card-header d-flex flex-column justify-content-center"
      *ngIf="loaded"
    >
      <div class="card" *ngIf="loaded" class="mt-0">
        <div class="card-header p-0">
          <div class="clr-row">
            <div class="clr-col-md-4 approvalBack">
              <span class="btn btn-outline m-0" (click)="goToApprovalsList()">
                <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
                approvals list
              </span>
            </div>
            <div class="clr-col-md-4 d-flex justify-content-center">
              <h3 class="mt-0 font-weight-300">
                {{ jsParams?.TABLE_NM }}
              </h3>
            </div>
            <div class="clr-col-md-4 approvalInfo">
              <a
                (click)="getDetails()"
                class="tooltip tooltip-sm tooltip-top-left"
              >
                <clr-icon shape="info-standard" size="28"></clr-icon>
                <!-- <span *ngIf="!detailsOpen" class="tooltip-content">Approval Details</span> -->
              </a>
            </div>
          </div>
          <p class="text-center mt-10">
            {{ jsParams?.TABLE_DESC }}
          </p>
        </div>
        <div class="card-block p-0">
          <div class="card-text" *ngIf="loaded">
            <div class="clr-row font-size-15">
              <div class="clr-col-md-5">
                <p *ngIf="!tableDetails" class="text-center font-size-18">
                  There are no details to show
                </p>

                <ng-container *ngIf="tableDetails">
                  <div class="mt-15">
                    <span>Table Id:</span>
                    <strong
                      class="link-it"
                      [routerLink]="'/stage/' + tableDetails?.TABLE_ID"
                    >
                      {{ tableDetails?.TABLE_ID }}
                    </strong>
                  </div>
                  <div>
                    <span>Submitter:</span>
                    <span class="mt-10">
                      {{ tableDetails?.SUBMITTED_BY_NM }}
                    </span>
                  </div>
                  <div>
                    <span>Submitted on:</span>
                    <span class="mt-10">
                      {{ tableDetails?.SUBMITTED_ON_DTTM }}
                    </span>
                  </div>
                  <div>
                    <span>Submitted Reason:</span>
                    <span class="mt-10">
                      {{ tableDetails?.SUBMITTED_REASON_TXT }}
                    </span>
                  </div>
                </ng-container>
              </div>
              <div class="clr-col-md-7">
                <div class="card-block d-flex justify-content-center">
                  <div class="d-flex justify-content-center mt-0">
                    <div class="clr-row clr-gap-5 clr-gap-sm-0">
                      <button
                        class="btn btn-sm btn-outline text-center mt-5 mr-5i"
                        (click)="goToBase(jsParams?.TABLE_NM)"
                      >
                        View base table
                      </button>
                      <button
                        class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
                        (click)="getTable(tableId)"
                      >
                        View staged data
                      </button>
                      <button
                        class="btn btn-sm btn-info-outline text-center mt-5"
                        (click)="goBack(jsParams?.TABLE_NM)"
                      >
                        Edit base table
                      </button>
                    </div>
                  </div>
                </div>
                <div
                  class="card-block d-flex justify-content-center clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0 clr-align-items-center"
                >
                  <button
                    id="acceptBtn"
                    [clrLoading]="acceptLoading"
                    type="submit"
                    class="btn btn-sm btn-success mr-5i"
                    (click)="approveTable()"
                    [disabled]="
                      !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
                    "
                  >
                    ACCEPT
                  </button>
                  <button
                    id="rejectBtn"
                    class="btn btn-sm btn btn-danger mr-5i"
                    (click)="rejectOpen = true"
                    [disabled]="
                      !loadingTable || params?.ISAPPROVER === 'NO' || noChanges
                    "
                  >
                    REJECT
                  </button>

                  <clr-toggle-container class="m-0 ml-20i">
                    <clr-toggle-wrapper>
                      <input
                        type="checkbox"
                        clrToggle
                        checked
                        [(ngModel)]="formattedValues"
                        (change)="formattingChanged()"
                      />
                      <label class="formatted-values-toggle">{{
                        formattedValues ? 'Formatted' : 'Unformatted'
                      }}</label>
                    </clr-toggle-wrapper>
                  </clr-toggle-container>
                </div>

                <div
                  class="card-block d-flex clr-align-items-center clr-flex-column"
                >
                  <span *ngIf="diffsLimit" class="rows-notice">
                    <clr-icon
                      class="mb-5 color-orange"
                      shape="exclamation-triangle"
                    ></clr-icon>
                    Only the first 100 inserts, updates or deletes are displayed
                  </span>
                  <div class="clr-row">
                    <div
                      class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
                    >
                      <span class="label label-warning">
                        Changed Rows
                        <span class="badge">{{ lens.updated }}</span>
                      </span>
                      <span class="label label-success">
                        Added Rows
                        <span class="badge">{{ lens.new }}</span>
                      </span>
                      <span class="label label-danger">
                        Deleted Rows
                        <span class="badge">{{ lens.deleted }}</span>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          *ngIf="!loadingTable"
          class="h-24vh d-flex flex-column justify-content-center align-items-center"
        >
          <span class="spinner"> Loading... </span>
          <div *ngIf="!loadingTable" class="mt-10">
            <p cds-text="section">Loading table</p>
          </div>
        </div>

        <div class="tableCont mt-0">
          <p *ngIf="loadingTable && noChanges" class="text-center font-size-18">
            There are no changes to show
          </p>

          <table class="table">
            <thead>
              <tr class="d-flex">
                <th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
              </tr>
            </thead>
            <tbody>
              <tr
                class="d-flex"
                *ngFor="let key of rowKeys; let i = index"
                [ngClass]="{
                  addedRow: chArr[i] == 'added',
                  deletedRow: chArr[i] == 'deleted',
                  updatedRow: chArr[i] == 'updated'
                }"
              >
                <ng-container *ngIf="chArr[i] === 'updated'">
                  <td
                    class="left"
                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                    [ngClass]="{
                      'ch tooltip tooltip-md tooltip-top-right':
                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
                    }"
                  >
                    {{ diffTable.data[i][col] }}
                    <span
                      *ngIf="
                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
                      "
                      class="tooltip-content"
                      >Original value is: {{ arrOfChanges[i][chIndex] }}</span
                    >
                  </td>
                </ng-container>
                <ng-container *ngIf="chArr[i] !== 'updated'">
                  <td
                    class="left"
                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                  >
                    {{ diffTable.data[i][col] }}
                  </td>
                </ng-container>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="overflow-auto mr-12">
      <div
        *ngIf="!loaded"
        class="h-70vh d-flex justify-content-center flex-column align-items-center"
      >
        <span class="spinner" *ngIf="!loaded"> Loading... </span>
        <div *ngIf="!loaded">
          <h3>Loading preview</h3>
        </div>
      </div>
    </div>
  </div>

  <!-- submitted  page layout -->

  <div *ngIf="submitted">
    <div class="d-flex flex-column justify-content-center" *ngIf="loaded">
      <div class="card m-0" *ngIf="loaded">
        <div class="card-header">
          <div class="clr-row">
            <div class="clr-col-md-4 approvalBack">
              <span class="btn btn-outline" (click)="goToSubmitList()">
                <cds-icon shape="angle" direction="left" size="20"></cds-icon
                >Back to submitted list
              </span>
            </div>
            <div class="clr-col-md-4">
              <h3 class="mt-0 font-weight-300 text-center">
                {{ subObj.base }}
              </h3>
            </div>
            <div class="clr-col-md-4 approvalInfo">
              <a
                (click)="tableFlag = true"
                class="tooltip tooltip-sm tooltip-top-left"
              >
                <clr-icon shape="info-standard" size="28"></clr-icon>
              </a>
            </div>
          </div>
          <p class="m-0 text-center color-darker-gray">
            {{ tableDescription }}
          </p>
        </div>
        <div class="clr-row font-size-15">
          <div class="clr-col-md-5">
            <div class="mt-15">
              <span>Table Id:</span>
              <strong class="link-it" [routerLink]="'/stage/' + subObj.tableId">
                <span> {{ subObj.tableId }}</span>
              </strong>
            </div>
            <div>
              <span>Submitted on:</span>
              <span class="mt-10">
                {{ subObj.submitted }}
              </span>
            </div>
            <div>
              <span>Submit Message:</span>
              <span>
                {{ subObj.submitReason }}
              </span>
            </div>
          </div>
          <div class="clr-col-md-7">
            <div class="card-block d-flex justify-content-center">
              <div class="d-flex justify-content-center mt-0">
                <div class="clr-row clr-gap-5 clr-gap-sm-0">
                  <button
                    class="btn btn-sm btn-outline text-center mt-5 mr-5i"
                    (click)="goToBase(subObj.base)"
                  >
                    View base table
                  </button>
                  <button
                    class="btn btn-sm btn-success-outline text-center mt-5 mr-5i"
                    (click)="getTable(subObj.tableId)"
                  >
                    View staged data
                  </button>
                  <button
                    class="btn btn-sm btn-info-outline text-center mt-5"
                    (click)="goBack(subObj.base)"
                  >
                    Edit base table
                  </button>
                </div>
              </div>
            </div>

            <div
              class="card-block d-flex clr-align-items-center clr-flex-column"
            >
              <span *ngIf="diffsLimit" class="rows-notice">
                <clr-icon
                  class="mb-5 color-orange"
                  shape="exclamation-triangle"
                ></clr-icon>
                Only the first 100 inserts, updates or deletes are displayed
              </span>
              <div class="clr-row">
                <div
                  class="d-flex clr-flex-column clr-gap-5 clr-flex-sm-row clr-gap-sm-0"
                >
                  <span class="label label-warning">
                    Changed Rows
                    <span class="badge">{{ lens.updated }}</span>
                  </span>
                  <span class="label label-success">
                    Added Rows
                    <span class="badge">{{ lens.new }}</span>
                  </span>
                  <span class="label label-danger">
                    Deleted Rows
                    <span class="badge">{{ lens.deleted }}</span>
                  </span>
                </div>
              </div>
            </div>

            <div class="card-block d-flex justify-content-center">
              <clr-toggle-container class="m-0 ml-20-i">
                <clr-toggle-wrapper>
                  <input
                    type="checkbox"
                    clrToggle
                    checked
                    [(ngModel)]="formattedValues"
                    (change)="formattingChanged()"
                  />
                  <label>{{
                    formattedValues ? 'Formatted' : 'Unformatted'
                  }}</label>
                </clr-toggle-wrapper>
              </clr-toggle-container>
            </div>
          </div>
        </div>

        <div class="card-block p-0 overflow-auto mr-12">
          <div class="card-text" *ngIf="loaded"></div>
        </div>

        <div
          *ngIf="!loadingTable"
          class="h-25vh d-flex flex-column justify-content-center align-items-center"
        >
          <span class="spinner"> Loading... </span>
          <div *ngIf="!loadingTable" class="mt-10">
            <p cds-text="section">Loading table</p>
          </div>
        </div>
        <div class="tableCont">
          <table class="table">
            <thead>
              <tr class="d-flex">
                <th class="left" *ngFor="let col of rowHeader">{{ col }}</th>
              </tr>
            </thead>
            <tbody>
              <tr
                class="d-flex"
                *ngFor="let key of rowKeys; let i = index"
                [ngClass]="{
                  addedRow: chArr[i] == 'added',
                  deletedRow: chArr[i] == 'deleted',
                  updatedRow: chArr[i] == 'updated'
                }"
              >
                <ng-container *ngIf="chArr[i] === 'updated'">
                  <td
                    class="left"
                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                    [ngClass]="{
                      'ch tooltip tooltip-md tooltip-top-right':
                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
                    }"
                  >
                    {{ diffTable.data[i][col] }}
                    <span
                      *ngIf="
                        arrChanged[i][chIndex] == true && chArr[i] == 'updated'
                      "
                      class="tooltip-content"
                      >Original value is: {{ arrOfChanges[i][chIndex] }}</span
                    >
                  </td>
                </ng-container>
                <ng-container *ngIf="chArr[i] !== 'updated'">
                  <td
                    class="left"
                    *ngFor="let col of rowKeys[i]; let chIndex = index"
                  >
                    {{ diffTable.data[i][col] }}
                  </td>
                </ng-container>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="card-block" *ngIf="!loaded">
      <div class="loader">
        <span class="spinner"> Loading... </span>
        <div *ngIf="!loaded">
          <h3>Loading submitted table</h3>
        </div>
      </div>
    </div>
  </div>
</div>
