@extends('admin.layout.layout')

@section('page-level-css')
@endsection

@section('content')
<!-- START PAGE-CONTAINER -->
<div class="page-container ">
  <!-- START HEADER -->
  @include('admin.partials.header')
  <!-- END HEADER -->
  <!-- START PAGE CONTENT WRAPPER -->
  <div class="page-content-wrapper ">
    <!-- START PAGE CONTENT -->
    <div class="content sm-gutter">
      <!-- START JUMBOTRON -->
      <div data-pages="parallax">
        <div class="container-fluid p-l-25 p-r-25 sm-p-l-0 sm-p-r-0">
          <div class="inner">
            <!-- START BREADCRUMB -->
            <ol class="breadcrumb sm-p-b-5">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Dashboard</li>
            </ol>
          </div>
        </div>
      </div>
      <!-- END JUMBOTRON -->
      <!-- START CONTAINER FLUID -->
      <div class="container-fluid p-l-25 p-r-25 p-t-0 p-b-25 sm-padding-10">
        <!-- START ROW -->
        <div class="row">

          <!-- START WIDGET widget_map_sales-->

          <!-- START WIDGET widget_weekly_sales_card-->
          <div class="col-lg-4 col-sm-6  d-flex flex-column">
            <div class="card no-border widget-loader-bar m-b-10">
              <div class="container-xs-height full-height">
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="card-header  top-left top-right">
                      <div class="card-title">
                        <a href="{{route('products.index')}}">
                          <span class="font-montserrat fs-11 all-caps">Products <i class="fa fa-chevron-right"></i>
                          </span>
                        </a>
                      </div>
                      <div class="card-controls">
                        <ul>
                          <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i
                                class="portlet-icon portlet-icon-refresh"></i></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                      <h3 class="no-margin p-b-5">{{$products}}</h3>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-bottom">
                    <div class="progress progress-small m-b-0">
                      <!-- START BOOTSTRAP PROGRESS (http://getbootstrap.com/components/#progress) -->
                      <div class="progress-bar progress-bar-primary" style="width:100%"></div>
                      <!-- END BOOTSTRAP PROGRESS -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END WIDGET -->

          <!-- START WIDGET widget_weekly_sales_card-->
          <div class="col-lg-4 col-sm-6  d-flex flex-column">
            <div class="card no-border widget-loader-bar m-b-10">
              <div class="container-xs-height full-height">
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="card-header  top-left top-right">
                      <div class="card-title">
                        <a href="{{route('user.get.data')}}">
                          <span class="font-montserrat fs-11 all-caps">Users <i class="fa fa-chevron-right"></i>
                          </span>
                        </a>
                      </div>
                      <div class="card-controls">
                        <ul>
                          <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i
                                class="portlet-icon portlet-icon-refresh"></i></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                      <h3 class="no-margin p-b-5">{{$users}}</h3>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-bottom">
                    <div class="progress progress-small m-b-0">
                      <!-- START BOOTSTRAP PROGRESS (http://getbootstrap.com/components/#progress) -->
                      <div class="progress-bar progress-bar-primary" style="width:100%"></div>
                      <!-- END BOOTSTRAP PROGRESS -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-sm-6  d-flex flex-column">
            <div class="card no-border widget-loader-bar m-b-10">
              <div class="container-xs-height full-height">
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="card-header  top-left top-right">
                      <div class="card-title">
                        <a href="{{route('get.user.orders')}}">
                          <span class="font-montserrat fs-11 all-caps">Orders <i class="fa fa-chevron-right"></i>
                          </span>
                        </a>
                      </div>
                      <div class="card-controls">
                        <ul>
                          <li><a href="#" class="portlet-refresh text-black" data-toggle="refresh"><i
                                class="portlet-icon portlet-icon-refresh"></i></a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-top">
                    <div class="p-l-20 p-t-50 p-b-40 p-r-20">
                      <h3 class="no-margin p-b-5">{{$orders}}</h3>
                    </div>
                  </div>
                </div>
                <div class="row-xs-height">
                  <div class="col-xs-height col-bottom">
                    <div class="progress progress-small m-b-0">
                      <!-- START BOOTSTRAP PROGRESS (http://getbootstrap.com/components/#progress) -->
                      <div class="progress-bar progress-bar-primary" style="width:100%"></div>
                      <!-- END BOOTSTRAP PROGRESS -->
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- END WIDGET -->

        </div>
        <!-- END ROW -->
        <!-- START ROW -->
        <!-- END ROW -->
      </div>
      <!-- END CONTAINER FLUID -->
    </div>
    <!-- END PAGE CONTENT -->
    <!-- START COPYRIGHT -->
    <!-- START CONTAINER FLUID -->
    <!-- START CONTAINER FLUID -->
    @include('admin.partials.footer')
    <!-- END COPYRIGHT -->
  </div>
  <!-- END PAGE CONTENT WRAPPER -->
</div>
<!-- END PAGE CONTAINER -->
@endsection

@section('page-level-js')
@endsection