@extends('layouts.admin-base')

@section('css')
    
@endsection

@section('under-header')

    <div style="margin-bottom:20px;" class="page-wrapper">
        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <div class="page-breadcrumb border-bottom">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-xs-12 align-self-center">
                    <h5 class="font-medium  mb-0">Evolution</h5>
                </div>
                <div class="col-lg-9 col-md-8 col-xs-12 align-self-center">
                    <!--button class="btn btn-danger text-white float-right ml-3 d-none d-md-block">Buy Ample Admin</button-->
                    <nav aria-label="breadcrumb" class="mt-2 float-md-right float-left">
                        <ol class="breadcrumb mb-0 justify-content-end p-0">
                            <li class="breadcrumb-item"><a href="#">Project-name</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Admin</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
</div>

@endsection

@section('content')

<div class="page-content container-fluid">

    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title text-uppercase">équipes</h5>
                    <div class="d-flex align-items-center mb-2 mt-4">
                        <h2 class="mb-0 display-5"><i class="icon-people text-info"></i></h2>
                        <div class="ml-auto">
                            <h2 class="mb-0 display-6"><span class="font-normal">23</span></h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <h5 class="card-title text-uppercase mb-0">Mothly Site Traffic</h5>
                        <div class="ml-auto">
                            <small class="text-success"><i class="fas fa-sort-up"></i> 18% High then last month</small>
                        </div>
                     </div>
                    <div class="d-flex flex-row">
                        <div class="p-2 pl-0 border-right">
                            <h6 class="font-light">Overall Growth</h6><span class="font-medium">80.40%</span></div>
                        <div class="p-2 border-right">
                            <h6 class="font-light">Montly</h6><span class="font-medium">20.40%</span>
                        </div>
                        <div class="p-2">
                            <h6 class="font-light">Day</h6><span class="font-medium">5.40%</span>
                        </div>
                    </div>
                    <div id="spark1" class="sparkchart mt-3"></div>
                </div>
            </div>
            
        </div>
    </div>
</div>

@endsection


@section('script')

<script src="{{asset('assets/libs/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="{{asset('assets/libs/popper.js/dist/umd/popper.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- apps -->
<script src="{{asset('dist/js/app.min.js')}}"></script>
<script src="{{asset('dist/js/app.init.horizontal-fullwidth.js')}}"></script>
<script src="{{asset('dist/js/app-style-switcher.js')}}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="{{asset('assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js')}}"></script>
<script src="{{asset('assets/extra-libs/sparkline/sparkline.js')}}"></script>
<!--Wave Effects -->
<script src="{{asset('dist/js/waves.js')}}"></script>
<!--Menu sidebar -->
<script src="{{asset('dist/js/sidebarmenu.js')}}"></script>
<!--Custom JavaScript -->
<script src="{{asset('dist/js/custom.min.js')}}"></script>
<!-- This Page JS -->
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-2.0.2.min.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-world-mill-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-in-mill.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-us-aea-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-uk-mill-en.js')}}"></script>
<script src="{{asset('assets/extra-libs/jvector/jquery-jvectormap-au-mill.js')}}"></script>
<script src="{{asset('assets/libs/chartist/dist/chartist.min.js')}}"></script>
<script src="{{asset('dist/js/pages/chartist/chartist-plugin-tooltip.js')}}"></script>
<script src="{{asset('dist/js/pages/dashboards/dashboard3.js')}}"></script>
<script>
  $(function() {
    $('#usa').vectorMap({
      map : 'us_aea_en',
      backgroundColor : 'transparent',
      zoomOnScroll: false,
      regionStyle : {
          initial : {
              fill : '#2cabe3'
          }
      }
    });
  });
</script>

@endsection