@extends('layouts.app')

@section('content')
    <div class="row mt-sm-4">
    <div class="col-12 col-md-12 col-lg-4">
      <div class="card author-box">
        <div class="card-body">
          <div class="author-box-center">
            <img alt="image" src="{{ asset('app/img/user.png') }}" class="rounded-circle author-box-picture">
            <div class="clearfix"></div>
            <div class="author-box-name">
              <a href="#">{{ $data->user->first_name.' '.$data->user->middle_name.' '.$data->user->last_name }}</a>
            </div>
            <div class="author-box-job">{{ App\Models\Role::find($data->user->role_id)->title }}</div>
          </div>
          <div class="text-center">
            <div class="author-box-description">
              <p>
               Date Added:  {{ date('M j, Y g:i A',strtotime($data->user->created_at)) }}
              </p>
            </div>
            <div class="mb-2 mt-3">
            </div>
            <div class="w-100 d-sm-none"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-12 col-lg-8">
      <div class="card bg-secondary">
        <div class="padding-20">
            <h4 class="my-3">Tickets Involved</h4>

            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-purple">
                        <i class="fas fa-th-list"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                              {{ $data->tickets->created }}
                            </h3>
                            <span class="text-muted">Tickets Created</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-green">
                        <i class="fas fa-folder-open"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                            {{ $data->tickets->opened }}
                            </h3>
                            <span class="text-muted">Tickets Opened</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>   
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-cyan">
                        <i class="fas fa-folder"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                              {{ $data->tickets->closed }}
                            </h3>
                            <span class="text-muted">Tickets Closed</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-orange">
                        <i class="fas fa-question"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                             {{ $data->tickets->escalated }}
                            </h3>
                            <span class="text-muted">Tickets Ecalated</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-cyan">
                        <i class="fas fa-share"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                             {{ $data->tickets->escalated_to }}
                            </h3>
                            <span class="text-muted">Escalated Tickets Handled</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-12">
                    <div class="card card-statistic-1">
                      <div class="card-icon l-bg-green">
                        <i class="fas fa-check-double"></i>
                      </div>
                      <div class="card-wrap">
                        <div class="padding-20">
                          <div class="text-right">
                            <h3 class="font-light mb-0">
                             {{ $data->tickets->validated }}
                            </h3>
                            <span class="text-muted">Tickets Validated</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
@endsection