<admin-page-header [title]="'Customer Ticket History'" ></admin-page-header>
<div class="row mt-3">
  <div class="col-xl-3">
    <div class="card user-pro-list overflow-hidden">
      <div class="card-body">
        <div class="user-pic text-center">
            <img [src]="data?.users?.profileimage || './assets/images/user-profile.png'" class="avatar avatar-xxl brround" alt="" loading="lazy" decoding="async">

          <div class="pro-user mt-3">
            <h5 class="pro-user-username text-dark mb-1 fs-16">{{data?.users?.username}}</h5>
            <h6 class="pro-user-desc text-muted fs-12">{{data?.users?.email}}</h6>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header border-0">
        <h4 class="card-title"> {{'Personal Details' | translate}}</h4>
      </div>
      <div class="card-body px-0 pb-0">

        <div class="table-responsive tr-lastchild">
          <table class="table mb-0 table-information">
            <tbody>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Name' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.username}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Email' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.email}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Customer Type' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.userType | translate}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Login Type' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.logintype | translate}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Status' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.status | translate}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Phone Number' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.phone}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Login IP' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.last_login_ip}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Customer Country' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.country}}</td>
              </tr>
              <tr>
                <td class="py-2">
                  <span class="font-weight-semibold w-50"> {{'Customer Timezone' | translate}} </span>
                </td>
                <td class="py-2 ps-4">: {{data?.users?.timezone}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <div class="col-xl-9 px-3">
    <div class="row">
      <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-7">
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{'Total Tickets' | translate}}</span>
                  <h3 class="mb-0 mt-1 text-primary fs-25">{{data?.total}}</h3>
                </div>
              </div>
              <div class="col-5">
                <div class="icon1 bg-primary-transparent my-auto float-end"> <i class="las la-ticket-alt"></i> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-7">
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{'Active Tickets' | translate}}</span>
                  <h3 class="mb-0 mt-1 text-success fs-25">

                    {{data?.active}}

                  </h3>
                </div>
              </div>
              <div class="col-5">
                <div class="icon1 bg-success-transparent my-auto float-end"> <i class="ri-ticket-2-line"></i> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-7">
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{'On-Hold Tickets' | translate}}</span>
                  <h3 class="mb-0 mt-1 text-secondary fs-25">{{data?.onhold}}</h3>
                </div>
              </div>
              <div class="col-5">
                <div class="icon1 bg-warning-transparent my-auto  float-end"> <i class="ri-coupon-2-line"></i> </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-12">
        <div class="card">
          <div class="card-body">
            <div class="row">
              <div class="col-7">
                <div class="mt-0 text-start">
                  <span class="fs-16 font-weight-semibold">{{'Closed Tickets' | translate}}</span>
                  <h3 class="mb-0 mt-1 text-secondary fs-25">{{data?.closed}}</h3>
                </div>
              </div>
              <div class="col-5">
                <div class="icon1 bg-danger-transparent my-auto  float-end"> <i class="ri-coupon-2-line"></i> </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div>
      <div class="card ">
        <div class="card-header border-0">
          <h4 class="card-title">{{'Previous Tickets Of Customer' | translate}}</h4>
        </div>
        <div class="card-body">
          <div class="spruko-delete">
            <app-admin-ticket-table
            [isloader]="isloader"
            [tableData]="activeTickets"
            [permission]="permission"
            [timezone]="timezone"
              [displayedColumns]="displayedColumns"
              (loadDataFn)="loadData($event)"
            ></app-admin-ticket-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>