@section('title') {{ config('app.name') }} | Detail profile: {{ $user->name }} @endsection
@extends('admin.layouts.master')
@section('content')
<div class="nk-content nk-content-fluid">
  <div class="container-xl wide-lg">
      <div class="nk-content-body">
          <div class="nk-block">
              <div class="card card-bordered">
                  <div class="card-aside-wrap">
                      <div class="card-content">
                          <ul class="nav nav-tabs nav-tabs-mb-icon nav-tabs-card">
                              <li class="nav-item">
                                  <a class="nav-link"><em class="icon ni ni-activity"></em><span>Orders</span></a>
                              </li>
                          </ul><!-- .nav-tabs -->
                          <div class="card-inner">
                              <div class="nk-block">
                                <div class="row g-2">
                                      <div class="col-sm-4">
                                          <div class="card bg-success text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h3 class="nk-wgw-title title">Orders</h3>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $user->orders_count }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                      <div class="col-sm-4">
                                          <div class="card bg-primary text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h5 class="nk-wgw-title title">Terminée</h5>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $user->finished_orders }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                      <div class="col-sm-4">
                                          <div class="card bg-danger text-white">
                                              <div class="nk-wgw nk-wgw-inner">
                                                  <div class="nk-wgw-name">
                                                      <h5 class="nk-wgw-title title">Annulé</h5>
                                                  </div>
                                                  <div class="nk-wgw-balance">
                                                    <div class="amount text-white">{{ $user->canceled_orders }}</div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div><!-- .col -->
                                  </div>
                                <livewire:orders-table userId="{{$user->id}}" />
                              </div><!-- .nk-block -->
                          </div><!-- .card-inner -->
                      </div><!-- .card-content -->
                      <div class="card-aside card-aside-left user-aside toggle-slide toggle-slide-right toggle-break-xxl" data-content="userAside" data-toggle-screen="xxl" data-toggle-overlay="true" data-toggle-body="true">
                          <div class="card-inner-group" data-simplebar>
                              <div class="card-inner">
                                  <div class="user-card user-card-s2">
                                      <div class="user-avatar lg bg-primary">
                                      @if($user->getFirstMedia('avatar'))
                                      <img src="{{ $user->getFirstMedia('avatar')?->getFullUrl('thumb') }}">
                                      @else
                                      <span>{{ substr($user->name, 0, 1) }}</span>
                                      @endif
                                      </div>
                                      <div class="user-info">
                                        <div class="badge bg-outline-light rounded-pill ucap">{{ $user->role }}</div>
                                          <h5>{{ $user->name }}</h5>
                                      </div>
                                  </div>
                              </div><!-- .card-inner -->
                              <div class="card-inner">
                                <h6 class="overline-title-alt mb-2">Information personel</h6>
                                <ul class="team-info">
                                  <li><span>Address e-mail</span><span>{{ $user->email }}</span></li>
                                  <li><span>Téléphone</span><span>{{ $user->phone }}</span></li>
                                  <li><span>Inscrit le</span><span>{{ $user->created_at->format('d M Y') }}</span></li>
                                  <li><span>Adresse e-mail vérifiée</span><span class="badge rounded-pill bg-{{ $user->email_verified_at === null ? 'warning': 'success' }}">{{ $user->email_verified_at === null ? 'Non vérifié' : 'Vérifié' }}</span></li>
                                  <li><span>Active</span><span class="badge rounded-pill bg-{{ $user->is_active ? 'success' : 'danger' }}">{{ $user->is_active ? 'Oui' : 'Non' }}</span></li>
                                </ul>
                              </div>
                          </div><!-- .card-inner -->
                      </div><!-- .card-aside -->
                  </div><!-- .card-aside-wrap -->
              </div><!-- .card -->
          </div><!-- .nk-block -->
      </div>
  </div>
</div>
@endsection