<admin-page-header [title]="'Reports'"></admin-page-header>

<!--Reports List-->
<div class="row row-deck">
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-0">
        <h4 class="card-title">{{'Employees' | translate}}</h4>
        <div class="card-options">
          <a class="btn btn-light btn-sm" href="javascript:;" routerLink="/admin/manage-roles/employees-list">{{'View All' | translate}}</a>
        </div>
      </div>
      <div class="card-body">
        <div id="userchart" class="">
          @if (reports?.agentactivec || reports?.agentinactive) {
          <apx-chart #employeechart [series]="employeechartOptions?.series" [chart]="employeechartOptions?.chart"
            [labels]="employeechartOptions?.labels" [colors]="employeechartOptions?.colors"
            [dataLabels]="employeechartOptions?.dataLabels" [responsive]="employeechartOptions?.responsive"></apx-chart>
          } @else {
          <div class="d-flex justify-content-center align-items-center flex-column">
            <img src="./assets/images/no-data.png" style="width:200px; height: 200px" alt="No data" loading="lazy"
              decoding="async">
            <hr>
            <div class="text-muted fs-20">{{'No Data Available' | translate}}</div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-0">
        <h4 class="card-title">{{'Customers' | translate}}</h4>
        <div class="card-options">
          <a class="btn btn-light btn-sm" href="javascript:;" routerLink="/admin/customer">{{'View All' |
            translate}}</a>
        </div>
      </div>
      <div class="card-body">
        <div id="customerchart" class="">
          @if (reports?.customeractive || reports?.customerinactive) {
          <apx-chart #customerschart [series]="customerOptions?.series" [chart]="customerOptions?.chart"
            [labels]="customerOptions?.labels" [colors]="customerOptions?.colors"
            [dataLabels]="customerOptions?.dataLabels" [responsive]="customerOptions?.responsive"
            [noData]="customerOptions.noData"></apx-chart>
          } @else {
          <div class="d-flex justify-content-center align-items-center flex-column">
            <img src="./assets/images/no-data.png" style="width:200px; height: 200px" alt="No data" loading="lazy"
              decoding="async">
            <hr>
            <div class="text-muted fs-20">{{'No Data Available' | translate}}</div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-0">
        <h4 class="card-title">{{'Ticket' | translate}}</h4>
        <div class="card-options">
          <a class="btn btn-light btn-sm" href="javascript:;" routerLink="/admin/global-tickets/total-tickets">{{'View All' | translate}}</a>
        </div>

      </div>
      <div class="card-body">
        <div id="ticketchart" class="">
          @if (reports?.newticket || reports?.inprogressticket || reports?.onholdticket
          || reports?.reopenticket
          || reports?.closedticket) {
          <apx-chart #ticketchart [series]="ticketchartOptions?.series" [chart]="ticketchartOptions?.chart"
            [labels]="ticketchartOptions?.labels" [colors]="ticketchartOptions?.colors"
            [dataLabels]="ticketchartOptions?.dataLabels" [responsive]="ticketchartOptions?.responsive"></apx-chart>
          } @else {
          <div class="d-flex justify-content-center align-items-center flex-column">
            <img src="./assets/images/no-data.png" style="width:200px; height: 200px" alt="No data" loading="lazy"
              decoding="async">
            <hr>
            <div class="text-muted fs-20">{{'No Data Available' | translate}}</div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-bottom-0">
        <h3 class="card-title">
          {{'Ticket Priority' | translate}}
        </h3>
      </div>
      <div class="card-body pb-8">
        <div id="priority" class="mx-auto apex-dount">
          @if (reports?.prioritylow || reports?.prioritymedium || reports?.priorityhigh || reports?.prioritycritical ) {
          <apx-chart #ticketPrioritychart [series]="ticketPrioritychartOptions?.series"
            [chart]="ticketPrioritychartOptions?.chart" [labels]="ticketPrioritychartOptions?.labels"
            [colors]="ticketPrioritychartOptions?.colors" [dataLabels]="ticketPrioritychartOptions?.dataLabels"
            [responsive]="ticketPrioritychartOptions?.responsive"></apx-chart>
          } @else {
          <div class="d-flex justify-content-center align-items-center flex-column">
            <img src="./assets/images/no-data.png" style="width:200px; height: 200px" alt="No data" loading="lazy"
              decoding="async">
            <hr>
            <div class="text-muted fs-20">{{'No Data Available' | translate}}</div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-bottom-0">
        <h3 class="card-title">
          {{'Knowledge Base' | translate}}
        </h3>
        <div class="card-options">
          <a class="btn btn-light btn-sm" href="javascript:;" routerLink="/admin/knowledge/articles">{{'View All' |
            translate}}</a>
        </div>
      </div>
      <div class="card-body pb-8">
        <div id="article" class="mx-auto apex-dount">
          @if (reports?.articlepublished || reports?.articleunpublished) {
          <apx-chart #knowledgeBasechart [series]="knowledgeBasechartOptions?.series"
            [chart]="knowledgeBasechartOptions?.chart" [labels]="knowledgeBasechartOptions?.labels"
            [colors]="knowledgeBasechartOptions?.colors" [dataLabels]="knowledgeBasechartOptions?.dataLabels"
            [responsive]="knowledgeBasechartOptions?.responsive"></apx-chart>
          } @else {
          <div class="d-flex justify-content-center align-items-center flex-column">
            <img src="./assets/images/no-data.png" style="width:200px; height: 200px" alt="No data" loading="lazy"
              decoding="async">
            <hr>
            <div class="text-muted fs-20">{{'No Data Available' | translate}}</div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-bottom-0">
        <h3 class="card-title">{{'Ratings For Employee' | translate}}</h3>
        <div class="card-options">
          <a routerLink="/admin/reports/ticketreports" href="javascript:;" class="btn btn-light btn-sm">{{'View All' |
            translate}}</a>
        </div>
      </div>
      <div class="card-body">
        <div class="list-group">
          @for (user of reports?.users; track user) {
          <a href="javascript:void(0);">
            <div class="list-group-item border-0 px-0 pt-0">
              <div class="media mt-0 align-items-center">
                <img [src]="user?.profileimage || './assets/images/user-profile.png'"
                  class="avatar-lg rounded-circle me-3 my-auto" alt="" loading="lazy" decoding="async">

                <div class="media-body">
                  <div class="d-flex align-items-center">
                    <div class="mt-0">
                      @if (user?.roles?.length) {
                      <h5 class="mb-0 fs-13 font-weight-sembold text-dark">{{user?.name}}
                      </h5>
                      <p class="mb-0 fs-12 text-muted">{{user?.roles[0]?.name}}</p>
                      } @else {
                      <h5 class="mb-0 fs-13 font-weight-sembold text-dark">{{user?.name}}
                      </h5>
                      }
                    </div>
                    <span class="rating-stars block uhelp-rating ms-auto w-auto allemployeerating">
                      <ng-template #t let-fill="fill">
                        <span class="profilerating" [class.full]="fill === 100">
                          <span class="ratingstar" [style.width.%]="fill">&#x2605;</span>&#x2605;
                        </span>
                      </ng-template>
                      <ngb-rating [rate]="user?.rating" [max]="5" [readonly]="true" class="ng-rating"
                        [starTemplate]="t"></ngb-rating>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </a>
          }

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

  <div class="col-xl-4 col-md-12 col-sm-12 col-lg-12">
    <div class="card">
      <div class="card-header d-flex border-bottom-0">
        <h3 class="card-title">{{'Employee Activity Report' | translate}}</h3>
        <div class="card-options">
          <a routerLink="/admin/reports/employee-activity" class="btn btn-light btn-sm">{{'View All' | translate}}</a>
        </div>
      </div>
      <div class="card-body">
        <div class="list-group">
          @for (act of reports?.activity; track act.id) {
            <a href="javascript:void(0);">
              <div class="list-group-item border-0 px-0 pt-0">
                <div class="media mt-0 align-items-center">
                  <img [src]="act?.user?.profileimage" class="avatar-lg rounded-circle me-3 my-auto"
                    [alt]="act?.user?.profileimage" loading="lazy" decoding="async" />
                  <div class="flex-fill w-50">
                    <a href="javascript:void(0);" class="fw-semibold me-1">{{act?.user?.name | translate }}</a>
                    <span class="fw-semibold">{{act?.activity_type | translate }}</span>
                    <div class="d-flex">
                      <a href="javascript:void(0);" class="text-primary ">{{act?.ip_address | translate }}</a>
                      @if(act?.browser){
                        <span class="text-muted ms-2">{{act?.browser | translate }}</span>
                      }
                      @if(act?.device){
                        <span class="text-muted ms-2">{{act?.device | translate }}</span>
                      } 
                    </div>
                  </div>
                  <div class="text-end">
                    <span class="text-muted d-block">{{ act?.created_at | date : setting?.time_format : timezone }}</span>
                    <span class="d-block">{{ act?.created_at | date: setting?.date_format : timezone }}</span>
                  </div>
                </div>
              </div>
            </a>
          }
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Reports List-->