@extends('layout/app')

@section('content')
<div class="row page-titles">
  <div class="col-md-5 align-self-center">
    <h4 class="text-themecolor">Dashboard</h4>
  </div>
  <div class="col-md-7 align-self-center text-end">
    <div class="d-flex justify-content-end align-items-center">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">Home</li>
      </ol>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-lg-3 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">TOTAL APPLICATIONS</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash"></div>
          <div class="ms-auto">
            <h2 class="text-success"><i class="ti-arrow-up"></i> <span class="counter">8659</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">TOTAL INVOICES</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash2"></div>
          <div class="ms-auto">
            <h2 class="text-purple"><i class="ti-arrow-up"></i> <span class="counter">7469</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">TOTAL CLIENTS</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash3"></div>
          <div class="ms-auto">
            <h2 class="text-info"><i class="ti-arrow-up"></i> <span class="counter">6011</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
  <div class="col-lg-3 col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">TOTAL EMAILS</h5>
        <div class="d-flex no-block align-items-center m-t-20 m-b-20">
          <div id="sparklinedash4"></div>
          <div class="ms-auto">
            <h2 class="text-7E1E79"><i class="ti-arrow-down"></i> <span class="counter">18%</span></h2>
          </div>
        </div>
      </div>
      <div id="sparkline8" class="sparkchart"></div>
    </div>
  </div>
</div>
@endsection

@section('js-script')
<script src="{{ asset('js/jquery.sparkline.min.js') }}"></script>
<script>
  var sparklineLogin = function () {
    $('#sparklinedash').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: 'bar'
      , height: '30'
      , barWidth: '4'
      , resize: true
      , barSpacing: '5'
      , barColor: '#4caf50'
    });
    $('#sparklinedash2').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: 'bar'
      , height: '30'
      , barWidth: '4'
      , resize: true
      , barSpacing: '5'
      , barColor: '#9675ce'
    });
    $('#sparklinedash3').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: 'bar'
      , height: '30'
      , barWidth: '4'
      , resize: true
      , barSpacing: '5'
      , barColor: '#03a9f3'
    });
    $('#sparklinedash4').sparkline([0, 5, 6, 10, 9, 12, 4, 9], {
      type: 'bar'
      , height: '30'
      , barWidth: '4'
      , resize: true
      , barSpacing: '5'
      , barColor: '#7E1E79'
    });
  }
  var sparkResize;
  $(window).resize(function (e) {
    clearTimeout(sparkResize);
    sparkResize = setTimeout(sparklineLogin, 500);
  });
  sparklineLogin();
</script>
@endsection