@extends('layouts.contentLayoutMaster')
{{-- page Title --}}
@section('title','Dashboard')
{{-- vendor css --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/charts/apexcharts.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/swiper.min.css')}}">
@endsection
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/dashboard-ecommerce.css')}}">
@endsection

@section('content')
<!-- Dashboard Ecommerce Starts -->
<section id="dashboard-ecommerce">
    <div class="row">
      <!-- Greetings Content Starts -->
      <div class="col-xl-4 col-md-6 col-12 dashboard-greetings">
        <div class="card">
          <div class="card-header">
            <h3 class="greeting-text">Parabens {{ $user->name }}</h3>
            <p class="mb-0">Best seller of the month</p>
          </div>
          <div class="card-content">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-end">
                <div class="dashboard-content-left">
                  <h1 class="text-primary font-large-2 text-bold-500">$89k</h1>
                  <p>You have done 57.6% more sales today.</p>
                  <button type="button" class="btn btn-primary glow">View Sales</button>
                </div>
                <div class="dashboard-content-right">
                  <img src="{{asset('images/icon/cup.png')}}" height="220" width="220" class="img-fluid"
                    alt="Dashboard Ecommerce" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Multi Radial Chart Starts -->
      <div class="col-xl-4 col-md-6 col-12 dashboard-visit">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="card-title">Visits of 2019</h4>
            <i class="bx bx-dots-vertical-rounded font-medium-3 cursor-pointer"></i>
          </div>
          <div class="card-content">
            <div class="card-body">
              <div id="multi-radial-chart"></div>
              <ul class="list-inline d-flex justify-content-around mb-0">
                <li> <span class="bullet bullet-xs bullet-primary mr-50"></span>Target</li>
                <li> <span class="bullet bullet-xs bullet-danger mr-50"></span>Mart</li>
                <li> <span class="bullet bullet-xs bullet-warning mr-50"></span>Ebay</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xl-8 col-12 dashboard-order-summary">
        <div class="card">
          <div class="row">
            <!-- Order Summary Starts -->
            <div class="col-md-8 col-12 order-summary border-right pr-md-0">
              <div class="card mb-0">
                <div class="card-header d-flex justify-content-between align-items-center">
                  <h4 class="card-title">Order Summary</h4>
                  <div class="d-flex">
                    <button type="button" class="btn btn-sm btn-light-primary mr-1">Month</button>
                    <button type="button" class="btn btn-sm btn-primary glow">Week</button>
                  </div>
                </div>
                <div class="card-content">
                  <div class="card-body p-0">
                    <div id="order-summary-chart"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Sales History Starts -->
            <div class="col-md-4 col-12 pl-md-0">
              <div class="card mb-0">
                <div class="card-header pb-50">
                  <h4 class="card-title">Sales History</h4>
                </div>
                <div class="card-content">
                  <div class="card-body py-1">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                      <div class="sales-item-name">
                        <p class="mb-0">Airpods</p>
                        <small class="text-muted">30 min ago</small>
                      </div>
                      <div class="sales-item-amount">
                        <h6 class="mb-0"><span class="text-success">+</span> $50</h6>
                      </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-2">
                      <div class="sales-item-name">
                        <p class="mb-0">iPhone</p>
                        <small class="text-muted">2 hour ago</small>
                      </div>
                      <div class="sales-item-amount">
                        <h6 class="mb-0"><span class="text-danger">-</span> $59</h6>
                      </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                      <div class="sales-item-name">
                        <p class="mb-0">Macbook</p>
                        <small class="text-muted">1 day ago</small>
                      </div>
                      <div class="sales-item-amount">
                        <h6 class="mb-0"><span class="text-success">+</span> $12</h6>
                      </div>
                    </div>
                  </div>
                  <div class="card-footer border-top pb-0">
                    <h5>Total Sales</h5>
                    <span class="text-primary text-bold-500">$82,950.96</span>
                    <div class="progress progress-bar-primary progress-sm my-50">
                      <div class="progress-bar" role="progressbar" aria-valuenow="78" style="width:78%"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Marketing Campaigns Starts -->
      <div class="col-xl-8 col-12 dashboard-marketing-campaign">
        <div class="card marketing-campaigns">
          <div class="card-header d-flex justify-content-between align-items-center pb-1">
            <h4 class="card-title">Marketing campaigns</h4>
            <i class="bx bx-dots-vertical-rounded font-medium-3 cursor-pointer"></i>
          </div>
          <div class="card-content">
            <div class="card-body pb-0">
              <div class="row">
                <div class="col-md-9 col-12">
                  <div class="d-inline-block">
                    <!-- chart-1   -->
                    <div class="d-flex market-statistics-1">
                      <!-- chart-statistics-1 -->
                      <div id="donut-success-chart"></div>
                      <!-- data -->
                      <div class="statistics-data my-auto">
                        <div class="statistics">
                          <span class="font-medium-2 mr-50 text-bold-600">25,756</span><span
                            class="text-success">(+16.2%)</span>
                        </div>
                        <div class="statistics-date">
                          <i class="bx bx-radio-circle font-small-1 text-success mr-25"></i>
                          <small class="text-muted">May 12, 2019</small>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="d-inline-block">
                    <!-- chart-2 -->
                    <div class="d-flex mb-75 market-statistics-2">
                      <!-- chart statistics-2 -->
                      <div id="donut-danger-chart"></div>
                      <!-- data-2 -->
                      <div class="statistics-data my-auto">
                        <div class="statistics">
                          <span class="font-medium-2 mr-50 text-bold-600">5,352</span><span
                            class="text-danger">(-4.9%)</span>
                        </div>
                        <div class="statistics-date">
                          <i class="bx bx-radio-circle font-small-1 text-success mr-25"></i>
                          <small class="text-muted">Jul 26, 2019</small>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-3 col-12 text-md-right">
                  <button class="btn btn-sm btn-primary glow mt-md-2 mb-1">View Report</button>
                </div>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <!-- table start -->
            <table id="table-marketing-campaigns" class="table table-borderless table-marketing-campaigns mb-0">
              <thead>
                <tr>
                  <th>Campaign</th>
                  <th>Growth</th>
                  <th>Charges</th>
                  <th>Status</th>
                  <th class="text-center">Action</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="py-1 line-ellipsis">
                    <img class="rounded-circle mr-1" src="{{asset('images/icon/fs.png')}}" alt="card" height="24"
                      width="24">Fastrack Watches
                  </td>
                  <td class="py-1">
                    <i class="bx bx-trending-up text-success align-middle mr-50"></i><span>30%</span>
                  </td>
                  <td class="py-1">$5,536</td>
                  <td class="text-success py-1">Active</td>
                  <td class="text-center py-1">
                    <div class="dropdown">
                      <span
                        class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu"></span>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#"><i class="bx bx-edit-alt mr-1"></i> edit</a>
                        <a class="dropdown-item" href="#"><i class="bx bx-trash mr-1"></i> delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="py-1 line-ellipsis">
                    <img class="rounded-circle mr-1" src="{{asset('images/icon/puma.png')}}" alt="card" height="24"
                      width="24">Puma Shoes
                  </td>
                  <td class="py-1">
                    <i class="bx bx-trending-down text-danger align-middle mr-50"></i><span>15.5%</span>
                  </td>
                  <td class="py-1">$1,569</td>
                  <td class="text-success py-1">Active</td>
                  <td class="text-center py-1">
                    <div class="dropdown">
                      <span
                        class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                      </span>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#"><i class="bx bx-edit-alt mr-1"></i> edit</a>
                        <a class="dropdown-item" href="#"><i class="bx bx-trash mr-1"></i> delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="py-1 line-ellipsis">
                    <img class="rounded-circle mr-1" src="{{asset('images/icon/nike.png')}}" alt="card" height="24"
                      width="24">Nike Air Jordan
                  </td>
                  <td class="py-1">
                    <i class="bx bx-trending-up text-success align-middle mr-50"></i><span>70.30%</span>
                  </td>
                  <td class="py-1">$23,859</td>
                  <td class="text-danger py-1">Closed</td>
                  <td class="text-center py-1">
                    <div class="dropdown">
                      <span
                        class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                      </span>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#"><i class="bx bx-edit-alt mr-1"></i> edit</a>
                        <a class="dropdown-item" href="#"><i class="bx bx-trash mr-1"></i> delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="py-1 line-ellipsis">
                    <img class="rounded-circle mr-1" src="{{asset('images/icon/one-plus.png')}}" alt="card"
                      height="24" width="24">Oneplus 7 pro
                  </td>
                  <td class="py-1">
                    <i class="bx bx-trending-up text-success align-middle mr-50"></i><span>10.4%</span>
                  </td>
                  <td class="py-1">$9,523</td>
                  <td class="text-success py-1">Active</td>
                  <td class="text-center py-1">
                    <div class="dropdown">
                      <span
                        class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                      </span>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#"><i class="bx bx-edit-alt mr-1"></i> edit</a>
                        <a class="dropdown-item" href="#"><i class="bx bx-trash mr-1"></i> delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td class="py-1 line-ellipsis">
                    <img class="rounded-circle mr-1" src="{{asset('images/icon/google.png')}}" alt="card"
                      height="24" width="24">Google Pixel 4 xl
                  </td>
                  <td class="py-1"><i class="bx bx-trending-down text-danger align-middle mr-50"></i><span>-62.38%</span>
                  </td>
                  <td class="py-1">12,897</td>
                  <td class="text-danger py-1">Closed</td>
                  <td class="text-center py-1">
                    <div class="dropup">
                      <span
                        class="bx bx-dots-vertical-rounded font-medium-3 dropdown-toggle nav-hide-arrow cursor-pointer"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="menu">
                      </span>
                      <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#"><i class="bx bx-edit-alt mr-1"></i> edit</a>
                        <a class="dropdown-item" href="#"><i class="bx bx-trash mr-1"></i> delete</a>
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- table ends -->
          </div>
        </div>
      </div>
    </div>
</section>
<!-- Dashboard Ecommerce ends -->
@endsection

@section('vendor-scripts')
<script src="{{asset('vendors/js/charts/apexcharts.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/swiper.min.js')}}"></script>
@endsection

@section('page-scripts')
<script src="{{asset('js/scripts/pages/dashboard-ecommerce.js')}}"></script>
@endsection