@extends('admin.layout.master')
@section('content')
@section('dashboard', 'active')
@section('title', 'Dashboard')
<div class="page-wrapper">
    <div class="page-content">
        <div class="row row-cols-1 row-cols-lg-4">
           {{-- <a class="col" href="{{ route('admin.freelancer') }}">
                <div class="card rounded-4 bg-gradient-rainbow bubble position-relative overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-0">
                           <div class="">
                              <h4 class="mb-0 text-white">{{$freelancer_count}}</h4>
                              <p class="mb-0 text-white">Freelancers</p>
                           </div>
                           <div class="fs-1 text-white">
                            <i class='bx bx-group'></i>
                           </div>
                        </div>
                        <small class="mb-0 text-white">+{{ $last_week_freelancer_count }} Since Last Week</small>
                    </div>
                </div>
            </a> --}}
            <a class="col" href="{{ route('admin.influencer') }}">
                <div class="card rounded-4 bg-gradient-burning bubble position-relative overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-0">
                           <div class="">
                              <h4 class="mb-0 text-white">{{$influencer_count}}</h4>
                              <p class="mb-0 text-white">Influencers</p>
                           </div>
                           <div class="fs-1 text-white">
                            <i class='bx bx-group'></i>
                           </div>
                        </div>
                        <small class="mb-0 text-white">+{{ $last_week_influencer_count }} Since Last Week</small>
                    </div>
                </div>
            </a>
            <a class="col" href="{{ route('admin.client') }}">
                <div class="card rounded-4 bg-gradient-moonlit bubble position-relative overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-0">
                           <div class="">
                              <h4 class="mb-0 text-white">{{$client_count}}</h4>
                              <p class="mb-0 text-white">Clients</p>
                           </div>
                           <div class="fs-1 text-white">
                              <i class='bx bx-group' ></i>
                           </div>
                        </div>
                        <small class="mb-0 text-white">+{{ $last_week_client_count }} Since Last Week</small>
                    </div>
                </div>
            </a>
            {{-- <div class="col">
                <div class="card rounded-4 bg-gradient-cosmic bubble position-relative overflow-hidden">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-0">
                           <div class="">
                              <h4 class="mb-0 text-white">22%</h4>
                              <p class="mb-0 text-white">Total Growth</p>
                           </div>
                           <div class="fs-1 text-white">
                             <i class='bx bx-line-chart-down'></i>
                           </div>
                        </div>
                        <small class="mb-0 text-white">+2.6% Since Last Week</small>
                    </div>
                </div>
            </div> --}}
         </div><!--end row-->


        {{-- <div class="row">
           <div class="col-12 col-lg-8 d-flex">
              <div class="card rounded-4 w-100">
                  <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div>
                            <h6 class="mb-0">Sales Overview</h6>
                        </div>
                        <div class="dropdown ms-auto">
                            <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="javascript:;">Action</a>
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                     <div class="chart-container-0">
                        <canvas id="chart1"></canvas>
                      </div>
                  </div>
              </div>
           </div>
           <div class="col-12 col-lg-4 d-flex">
               <div class="card rounded-4 w-100">
                   <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div>
                            <h6 class="mb-0">Monthly Orders</h6>
                        </div>
                        <div class="dropdown ms-auto">
                            <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="javascript:;">Action</a>
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="chart-container-0">
                        <canvas id="chart2"></canvas>
                      </div>
                   </div>
               </div>
           </div>
        </div> --}}
        <!--end row-->


        <div class="row">
            <div class="col-12 col-lg-4 d-flex">
                <div class="card rounded-4 w-100">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div>
                                <h6 class="mb-0">Top Categories</h6>
                            </div>
                            <div class="dropdown ms-auto">
                                <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                                </a>
                                {{-- <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul> --}}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="categories-list">
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div class="">
                                    <img src="assets/images/products/01.png" class="product-img-2" alt="product img">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-2">Mobiles <span class="float-end">75%</span></p>
                                    <div class="progress" style="height: 4px;">
                                       <div class="progress-bar bg-gradient-cosmic" role="progressbar" style="width: 75%"></div>
                                    </div>
                                 </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div class="">
                                    <img src="assets/images/products/02.png" class="product-img-2" alt="product img">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-2">Mobiles <span class="float-end">75%</span></p>
                                    <div class="progress" style="height: 4px;">
                                       <div class="progress-bar bg-gradient-ibiza" role="progressbar" style="width: 75%"></div>
                                    </div>
                                 </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div class="">
                                    <img src="assets/images/products/03.png" class="product-img-2" alt="product img">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-2">Mobiles <span class="float-end">75%</span></p>
                                    <div class="progress" style="height: 4px;">
                                       <div class="progress-bar bg-gradient-quepal" role="progressbar" style="width: 75%"></div>
                                    </div>
                                 </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div class="">
                                    <img src="assets/images/products/04.png" class="product-img-2" alt="product img">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-2">Mobiles <span class="float-end">75%</span></p>
                                    <div class="progress" style="height: 4px;">
                                       <div class="progress-bar bg-gradient-kyoto" role="progressbar" style="width: 75%"></div>
                                    </div>
                                 </div>
                            </div>
                            <hr>
                            <div class="d-flex align-items-center justify-content-between gap-3">
                                <div class="">
                                    <img src="assets/images/products/05.png" class="product-img-2" alt="product img">
                                </div>
                                <div class="flex-grow-1">
                                    <p class="mb-2">Mobiles <span class="float-end">75%</span></p>
                                    <div class="progress" style="height: 4px;">
                                       <div class="progress-bar bg-gradient-blues" role="progressbar" style="width: 75%"></div>
                                    </div>
                                 </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 d-flex">
                <div class="card rounded-4 w-100">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div>
                                <h6 class="mb-0">New Clients</h6>
                            </div>
                            <div class="dropdown ms-auto">
                                <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                                </a>
                                {{-- <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul> --}}
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="new-users-list">
                            @foreach($users as $user)
                            <div class="d-flex align-items-center justify-content-between gap-2">
                                <div class="">
                                    <img src="{{ $user->image }}" class="rounded-circle" width="45" height="45" alt="user img">
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-0">{{$user->full_name}}</h6>
                                    <p class="mb-0 extra-small-font">{{$user->email}}</p>
                                 </div>
                                 <div class="">
                                    <a href="{{route('admin.client.details',['id'=>$user->id])}}" class="btn btn-gradient-primary btn-sm rounded-4 px-4">View</a>
                                 </div>
                            </div>
                            <hr>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 d-flex">
                <div class="card rounded-4 w-100">
                    <div class="card-body">
                        <ul class="nav nav-pills nav-fill mb-3">
                            <li class="nav-item">
                                <a class="nav-link rounded-5" data-bs-toggle="pill" href="#primary-pills-home">Monthly</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link active rounded-5" data-bs-toggle="pill" href="#primary-pills-profile">Weekly</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link rounded-5" data-bs-toggle="pill" href="#primary-pills-contact">Daily</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade" id="primary-pills-home">
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <div>
                                        <h3 class="mb-0">$ 9845.43</h3>
                                        <p class="mb-0">+3% Since Last Week</p>
                                    </div>
                                    <div class="fs-1">
                                        <i class="lni lni-arrow-up"></i>
                                    </div>
                                </div>
                                <div class="chart-container-0">
                                    <canvas id="chart3"></canvas>
                                  </div>
                            </div>
                            <div class="tab-pane fade show active" id="primary-pills-profile">
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <div>
                                        <h3 class="mb-0">$ 45,245.37</h3>
                                        <p class="mb-0">+4% Since Last Month</p>
                                    </div>
                                    <div class="fs-1">
                                        <i class="lni lni-arrow-up"></i>
                                    </div>
                                </div>
                                <div class="chart-container-0">
                                    <canvas id="chart4"></canvas>
                                  </div>
                            </div>
                            <div class="tab-pane fade" id="primary-pills-contact">
                                <div class="d-flex align-items-center justify-content-center gap-3">
                                    <div>
                                        <h3 class="mb-0">$ 7395.23</h3>
                                        <p class="mb-0">+4% Since Tomorrow</p>
                                    </div>
                                    <div class="fs-1">
                                        <i class="lni lni-arrow-up"></i>
                                    </div>
                                </div>
                                <div class="chart-container-0">
                                    <canvas id="chart5"></canvas>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--end row-->

        {{-- <div class="row">
            <div class="col-12 col-lg-4 d-flex">
               <div class="card rounded-4 w-100">
                <div class="card-header">
                    <div class="d-flex align-items-center">
                        <div>
                            <h6 class="mb-0">Browser Statistics</h6>
                        </div>
                        <div class="dropdown ms-auto">
                            <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="javascript:;">Action</a>
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                  <div class="card-body">
                    <div class="chart-container-1">
                        <canvas id="chart6"></canvas>
                      </div>
                  </div>
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center border-top">Chrome <span class="badge bg-danger rounded-pill">10</span>
                    </li>
                    <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Opera <span class="badge bg-primary rounded-pill">65</span>
                    </li>
                    <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Firefox <span class="badge bg-warning text-dark rounded-pill">14</span>
                    </li>
                </ul>
               </div>
            </div>
            <div class="col-12 col-lg-8 d-flex">
                <div class="card rounded-4 w-100">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div>
                                <h6 class="mb-0">Top Selling Countries</h6>
                            </div>
                            <div class="dropdown ms-auto">
                                <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                   <div class="card-body">
                      <div id="geographic-map-2" style="height: 280px;"></div>
                   </div>
                   <table class="table table-borderless align-items-center">
                    <tbody>
                      <tr>
                       <td><i class="bx bxs-circle me-2" style="color: #5a52db;"></i> Russia</td>
                       <td>18 %</td>
                       <td><i class="bx bxs-circle me-2" style="color: #f09c15;"></i> Australia</td>
                       <td>14.2 %</td>
                     </tr>
                     <tr>
                       <td><i class="bx bxs-circle me-2" style="color: #b659ff;"></i> India</td>
                       <td>15 %</td>
                       <td><i class="bx bxs-circle me-2" style="color: #2ccc72;"></i> United States</td>
                       <td>11.6 %</td>
                     </tr>
                    </tbody>
                  </table>
                </div>
             </div>

        </div> --}}
        <!--end row-->

            {{-- <div class="card radius-10">
                 <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div>
                            <h6 class="mb-0">Recent Orders</h6>
                        </div>
                        <div class="dropdown ms-auto">
                            <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="javascript:;">Action</a>
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                </li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                 <div class="table-responsive">
                   <table class="table align-middle mb-0">
                    <thead class="table-light">
                     <tr>
                       <th>Product</th>
                       <th>Photo</th>
                       <th>Product ID</th>
                       <th>Status</th>
                       <th>Amount</th>
                       <th>Date</th>
                       <th>Shipping</th>
                     </tr>
                     </thead>
                     <tbody><tr>
                      <td>Iphone 5</td>
                      <td><img src="assets/images/products/01.png" class="product-img-2" alt="product img"></td>
                      <td>#9405822</td>
                      <td><span class="btn btn-outline-success btn-sm px-4 rounded-5 w-100">Completed</span></td>
                      <td>$1250.00</td>
                      <td>03 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-quepal" role="progressbar" style="width: 100%"></div>
                          </div></td>
                     </tr>

                     <tr>
                      <td>Earphone GL</td>
                      <td><img src="assets/images/products/02.png" class="product-img-2" alt="product img"></td>
                      <td>#8304620</td>
                      <td><span class="btn btn-outline-warning btn-sm px-4 rounded-5 w-100">Pending</span></td>
                      <td>$1500.00</td>
                      <td>05 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-blooker" role="progressbar" style="width: 60%"></div>
                          </div></td>
                     </tr>

                     <tr>
                      <td>HD Hand Camera</td>
                      <td><img src="assets/images/products/03.png" class="product-img-2" alt="product img"></td>
                      <td>#4736890</td>
                      <td><span class="btn btn-outline-danger btn-sm px-4 rounded-5 w-100">Failed</span></td>
                      <td>$1400.00</td>
                      <td>06 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-bloody" role="progressbar" style="width: 70%"></div>
                          </div></td>
                     </tr>

                     <tr>
                      <td>Clasic Shoes</td>
                      <td><img src="assets/images/products/04.png" class="product-img-2" alt="product img"></td>
                      <td>#8543765</td>
                      <td><span class="btn btn-outline-success btn-sm px-4 rounded-5 w-100">Paid</span></td>
                      <td>$1200.00</td>
                      <td>14 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-quepal" role="progressbar" style="width: 100%"></div>
                          </div></td>
                     </tr>
                     <tr>
                      <td>Sitting Chair</td>
                      <td><img src="assets/images/products/06.png" class="product-img-2" alt="product img"></td>
                      <td>#9629240</td>
                      <td><span class="btn btn-outline-warning btn-sm px-4 rounded-5 w-100">Pending</span></td>
                      <td>$1500.00</td>
                      <td>18 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-blooker" role="progressbar" style="width: 60%"></div>
                          </div></td>
                     </tr>
                     <tr>
                      <td>Hand Watch</td>
                      <td><img src="assets/images/products/05.png" class="product-img-2" alt="product img"></td>
                      <td>#8506790</td>
                      <td><span class="btn btn-outline-danger btn-sm px-4 rounded-5 w-100">Failed</span></td>
                      <td>$1800.00</td>
                      <td>21 Feb 2020</td>
                      <td><div class="progress" style="height: 6px;">
                            <div class="progress-bar bg-gradient-bloody" role="progressbar" style="width: 40%"></div>
                          </div></td>
                     </tr>
                    </tbody>
                  </table>
                  </div>
                 </div>
            </div> --}}

            {{-- <div class="row">
                <div class="col-12 col-lg-12 col-xl-12 col-xxl-6 d-flex">
                  <div class="card rounded-4 w-100">
                    <div class="card-header bg-transparent">
                        <div class="d-flex align-items-center">
                            <div>
                                <h6 class="mb-0">Recent Orders</h6>
                            </div>
                            <div class="dropdown ms-auto">
                                <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                       </div>
                     <div class="card-body">
                        <div class="row row-cols-1 row-cols-lg-3 g-3">
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart7"></div>
                                        <p class="mb-0">New Visits</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart8"></div>
                                        <p class="mb-0">Bounce Rate</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart9"></div>
                                        <p class="mb-0">Server Load</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart10"></div>
                                        <p class="mb-0">Used RAM</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart11"></div>
                                        <p class="mb-0">Web Traffic</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="card border shadow-none rounded-4 mb-0">
                                    <div class="card-body text-center">
                                         <div id="chart12"></div>
                                        <p class="mb-0">Page Views</p>
                                    </div>
                                </div>
                            </div>
                        </div><!--end row-->
                     </div>
                   </div>
                </div>

                <div class="col-12 col-xl-12 col-xxl-6 d-flex">
                    <div class="card rounded-4 w-100">
                        <div class="card-header bg-transparent">
                            <div class="d-flex align-items-center">
                                <div>
                                    <h6 class="mb-0">Traffic Referrals</h6>
                                </div>
                                <div class="dropdown ms-auto">
                                    <a class="dropdown-toggle dropdown-toggle-nocaret" href="#" data-bs-toggle="dropdown"><i class='bx bx-dots-horizontal-rounded font-22 text-option'></i>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="javascript:;">Action</a>
                                        </li>
                                        <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                        </li>
                                        <li>
                                            <hr class="dropdown-divider">
                                        </li>
                                        <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                           </div>
                           <div class="table-responsive p-3">
                            <table class="table align-items-center mb-0">
                              <thead class="table-light">
                                <tr>
                                  <th>Referral</th>
                                  <th>Visitors</th>
                                  <th>Unique Users</th>
                                  <th>Bounce Rate</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>Facebook</td>
                                  <td>8,584</td>
                                  <td>263</td>
                                  <td>12.5% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>Twetter</td>
                                  <td>7,682</td>
                                  <td>563</td>
                                  <td>32.2% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>Instagram</td>
                                  <td>5,524</td>
                                  <td>274</td>
                                  <td>14.7% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>LinkedIn</td>
                                  <td>5,574</td>
                                  <td>863</td>
                                  <td>14.7% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>Google</td>
                                  <td>9,834</td>
                                  <td>963</td>
                                  <td>14.7% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>Dribbble</td>
                                  <td>6,572</td>
                                  <td>897</td>
                                  <td>12.7% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                                <tr>
                                  <td>Behance</td>
                                  <td>7,634</td>
                                  <td>863</td>
                                  <td>11.3% <i class="bx bx-up-arrow-alt ms-2"></i></td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                       </div>
                </div>
            </div> --}}
            <!--end row-->

    </div>
</div>

@endsection