@extends('app.master')
@section('title','Dashboard')
@section('content')
    <h2 class="az-content-title tx-24 mg-b-5">Hi, welcome back!</h2>
    <p class="mg-b-20">Azad Rent Mangenent System</p>

    <div class="row row-sm mg-b-20">
      <div class="col-lg-8">
        <div class="row row-xs row-sm--sm">
          <div class="col-sm-6 col-md-3">
            <div class="card card-dashboard-seventeen">
              <div class="card-body">
                <h6 class="card-title">Current Total Tenants</h6>
                <div>
                  <h4>{{ $tenants }}</h4>
                  {{-- <span>Goal: 0</span> --}}
                </div>
              </div>
              <div class="chart-wrapper">
                <div id="flotChart1" class="flot-chart"></div>
              </div><!-- chart-wrapper -->
            </div>
          </div><!-- col -->
          <div class="col-sm-6 col-md-3 mg-t-20 mg-sm-t-0">
            <div class="card card-dashboard-seventeen">
              <div class="card-body">
                <h6 class="card-title">Current Month Rent (CMR)</h6>
                <div>
                  <h4>৳ {{ $currentMonthlyPayment }}</h4>
                  {{-- <span>Goal: 300,000</span> --}}
                </div>
              </div><!-- card-body -->
              <div class="chart-wrapper">
                <div id="flotChart2" class="flot-chart"></div>
              </div><!-- chart-wrapper -->
            </div><!-- card -->
          </div><!-- col -->
          <div class="col-sm-6 col-md-3 mg-t-20 mg-md-t-0">
            <div class="card card-dashboard-seventeen bg-primary-dark tx-white">
              <div class="card-body">
                <h6 class="card-title">Current Month Utility Charge</h6>
                <div>
                  <h4 class="text-white">৳ {{ $utility }}</h4>
                  {{-- <span class="op-7">Goal: 0</span> --}}
                </div>
              </div><!-- card-body -->
              <div class="chart-wrapper">
                <div id="flotChart3" class="flot-chart"></div>
              </div><!-- chart-wrapper -->
            </div><!-- card -->
          </div><!-- col -->
          <div class="col-sm-6 col-md-3 mg-t-20 mg-md-t-0">
            <div class="card card-dashboard-seventeen bg-primary tx-white">
              <div class="card-body">
                <h6 class="card-title">Current Month Service Charge</h6>
                <div>
                  <h4 class="text-white">৳ {{ $servicecharge }}</h4>
                  {{-- <span class="op-7">Goal: $80</span> --}}
                </div>
              </div><!-- card-body -->
              <div class="chart-wrapper">
                <div id="flotChart4" class="flot-chart"></div>
              </div><!-- chart-wrapper -->
            </div>
          </div><!-- col -->
          <div class="col-12 mg-t-20">
            <div class="card card-dashboard-nineteen">
              <div class="card-header">
                <h6 class="card-title">Account &amp; Monthly Recurring Revenue Growth</h6>
                <div class="row">
                  <div class="col-6 col-md-5">
                    <h4><span>৳</span>0.00</h4>
                    <label class="az-content-label">MRR Growth</label>
                    <p>Measure How Fast You’re Growing Monthly Recurring Revenue.</p>
                  </div><!-- col -->
                  <div class="col-6 col-md-5">
                    <h4><span>৳</span>0.00</h4>
                    <label class="az-content-label">Avg. MRR/Customer</label>
                    <p>The revenue generated per account on a monthly or yearly basis. </p>
                  </div><!-- col -->
                </div><!-- row -->
                <div class="chart-legend">
                  <div>Growth Actual</div>
                  <div>Actual</div>
                  <div>Plan</div>
                </div>
              </div><!-- card-header -->
              <div class="card-body">
                <div class="flot-chart-wrapper">
                  <div id="flotChart" class="flot-chart"></div>
                </div><!-- flot-chart-wrapper -->
              </div><!-- card-body -->
            </div><!-- card -->
          </div><!-- col -->
        </div><!-- row -->
      </div><!-- col -->
      <div class="col-lg-4 mg-t-20 mg-lg-t-0">
        <div class="card card-dashboard-eighteen">
          <h6 class="card-title mg-b-5">Finance Monitoring</h6>
          <p class="tx-gray-500 mg-b-0">July 01,2018 - September 30,2018</p>
          <div class="card-body row row-xs">
            <div class="col-6">
              <h6 class="dot-primary"><span>৳</span>0.00</h6>
              <label>Accounts Receivable</label>
            </div><!-- col -->
            <div class="col-6">
              <h6 class="dot-purple"><span>৳</span>0.00</h6>
              <label>Accounts Payable</label>
            </div><!-- col -->
            <div class="col-6 mg-t-30">
              <h6 class="dot-teal"><span>৳</span>{{ $ait }}</h6>
              <label>Monthly AIT</label>
            </div><!-- col -->
            <div class="col-6 mg-t-30">
              <h6 class="dot-dark-blue"><span>৳</span>0.00</h6>
              <label>Net Monthly Burn</label>
            </div><!-- col -->
          </div><!-- card-body --> 
          <h6 class="card-title mg-b-10">Monthly Trends</h6>
          <div class="chartjs-wrapper"><canvas id="chartBar5"></canvas></div>
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-lg-6 mg-t-20">
        <div class="card card-dashboard-twenty ht-md-100p">
          <div class="card-body">
            <h6 class="az-content-label tx-13 mg-b-5">Account Retention <span>(This Year)</span></h6>
            <p class="mg-b-25">Number of customers who have active subscription with you.</p>

            <div class="chartjs-wrapper"><canvas id="chartBar6"></canvas></div>
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-lg-6 mg-t-20">
        <div class="row row-sm">
          <div class="col-sm-6">
            <div class="card card-dashboard-twenty">
              <div class="card-body">
                <label class="az-content-label tx-13 tx-primary">Expansions</label>
                <p>Customers who have upgraded the level of your products or service.</p>
                <div class="expansion-value">
                  <strong>৳1,500</strong>
                  <strong>৳1,120</strong>
                </div>
                <div class="progress">
                  <div class="progress-bar wd-70p" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="expansion-label">
                  <span>This Month</span>
                  <span>Previous Month</span>
                </div>
              </div>
            </div><!-- card -->
          </div><!-- col -->
          <div class="col-sm-6 mg-t-20 mg-sm-t-0">
            <div class="card card-dashboard-twenty ht-md-100p">
              <div class="card-body">
                <label class="az-content-label tx-13 tx-danger">Cancellations</label>
                <p>Customers who have ended their subscription with you.</p>
                <div class="expansion-value">
                  <strong>৳1,900</strong>
                  <strong>৳1,680</strong>
                </div>
                <div class="progress">
                  <div class="progress-bar wd-50p bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
                <div class="expansion-label">
                  <span>This Month</span>
                  <span>Previous Month</span>
                </div>
              </div>
            </div><!-- card -->
          </div><!-- col -->
          <div class="col mg-t-20">
            <div class="card card-dashboard-progress">
              <div class="card-body">
                <div class="d-sm-flex justify-content-between mg-b-20">
                  <label class="az-content-label tx-13 mg-b-10 mg-sm-b-0">MRR (September)</label>
                  <ul class="progress-legend">
                    <li>Expansion</li>
                    <li>New</li>
                  </ul>
                </div>
                <div class="media">
                  <label>None:</label>
                  <div class="media-body">
                    <div id="progressBar1" class="progress">
                      <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div><!-- progress -->
                  </div><!-- media-body -->
                </div><!-- media -->
                <div class="media">
                  <label>Partner:</label>
                  <div class="media-body">
                    <div id="progressBar2" class="progress">
                      <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                      <div class="progress-bar bg-teal" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    </div><!-- progress -->
                  </div><!-- media-body -->
                </div><!-- media -->
              </div><!-- card-body -->
            </div><!-- card -->
          </div><!-- col -->
        </div><!-- row -->
      </div><!-- col -->
    </div><!-- row -->

    <div class="row row-sm mg-b-20">
      <div class="col-sm-6 col-lg-4">
        <div class="card card-dashboard-twentysix">
          <div class="card-header">
            <h6 class="card-title">Customers</h6>
            <div class="chart-legend">
              <div><span class="bg-primary"></span> New</div>
              <div><span class="bg-teal"></span> Returning</div>
            </div><!-- chart-legend -->
          </div><!-- card-header -->
          <div class="card-body">
            <div class="pd-x-15">
              <h6>156 <span class="tx-success"><i class="icon ion-md-arrow-up"></i> 3.7%</span></h6>
              <label>Avg. Customers/Day</label>
            </div>
            <div class="chart-wrapper">
              <div id="flotChart7" class="flot-chart"></div>
            </div><!-- chart-wrapper -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-sm-6 col-lg-4 mg-t-20 mg-sm-t-0">
        <div class="card card-dashboard-twentysix card-dark-one">
          <div class="card-header">
            <h6 class="card-title">Conversions</h6>
          </div><!-- card-header -->
          <div class="card-body">
            <div class="pd-x-15">
              <h6>0.23% <span><i class="icon ion-md-arrow-up"></i> 0.20%</span></h6>
              <label>Purchased</label>
            </div>
            <div class="chart-wrapper">
              <div id="flotChart8" class="flot-chart"></div>
            </div><!-- chart-wrapper -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-lg-4 mg-t-20 mg-lg-t-0">
        <div class="card card-dashboard-twentysix card-dark-two">
          <div class="card-header">
            <h6 class="card-title">Revenue</h6>
          </div><!-- card-header -->
          <div class="card-body">
            <div class="pd-x-15">
              <h6>৳7,299 <span><i class="icon ion-md-arrow-up"></i> 1.18%</span></h6>
              <label>Total Sales</label>
            </div>
            <div class="chart-wrapper">
              <div id="flotChart9" class="flot-chart"></div>
            </div><!-- chart-wrapper -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
    </div><!-- row -->

    <div class="card card-body card-dashboard-twentyfive mg-b-20">
      <h6 class="card-title">Conversions</h6>
      <div class="row row-sm">
        <div class="col-6 col-sm-4 col-lg">
          <label class="card-label">Conversion Rate</label>
          <h6 class="card-value">0.81<small>%</small></h6>
          <div class="chart-wrapper">
            <div id="flotChart1" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
        <div class="col-6 col-sm-4 col-lg">
          <label class="card-label">Revenue</label>
          <h6 class="card-value"><span>$</span>1,095,190</h6>
          <div class="chart-wrapper">
            <div id="flotChart2" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
        <div class="col-6 col-sm-4 col-lg mg-t-20 mg-sm-t-0">
          <label class="card-label">Unique Purchases</label>
          <h6 class="card-value">53</h6>
          <div class="chart-wrapper">
            <div id="flotChart3" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
        <div class="col-6 col-sm-4 col-lg mg-t-20 mg-lg-t-0">
          <label class="card-label">Transactions</label>
          <h6 class="card-value">31</h6>
          <div class="chart-wrapper">
            <div id="flotChart4" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
        <div class="col-6 col-sm-4 col-lg mg-t-20 mg-lg-t-0">
          <label class="card-label">Avg. Order Value</label>
          <h6 class="card-value"><span>$</span>306.20</h6>
          <div class="chart-wrapper">
            <div id="flotChart5" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
        <div class="col-6 col-sm-4 col-lg mg-t-20 mg-lg-t-0">
          <label class="card-label">Quantity</label>
          <h6 class="card-value">52</h6>
          <div class="chart-wrapper">
            <div id="flotChart6" class="flot-chart"></div>
          </div><!-- chart-wrapper -->
        </div><!-- col -->
      </div><!-- row -->
    </div><!-- card -->

    <div class="row row-sm">
      <div class="col-lg-6">
        <div class="card card-dashboard-twentyfour">
          <div class="card-header">
            <h6 class="card-title">Real Time Sales</h6>
            <span>This Week</span>
          </div><!-- card-header -->
          <div class="card-body">
            <div class="card-body-top">
              <div>
                <h6><span>$</span>150,200<small>.00</small></h6>
                <label>Total Sales</label>
              </div>
              <div>
                <h6><span>$</span>21,830<small>.25</small></h6>
                <label>Avg. Sales per Day</label>
              </div>
            </div><!-- card-body-top -->

            <div class="d-flex justify-content-between mg-b-15">
              <label class="az-content-label">Sales Per Hour</label>
              <div class="chart-legend">
                <div><span class="bg-primary"></span> Today</div>
                <div><span class="bg-gray-400"></span> Yesterday</div>
              </div><!-- chart-legend -->
            </div>
            <div class="chart-wrapper">
              <div id="flotBar1" class="flot-chart"></div>
            </div><!-- chart-wrapper -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-lg-6 mg-t-20 mg-lg-t-0">
        <div class="card card-dashboard-twentyfour">
          <div class="card-header">
            <h6 class="card-title">Store Visitors</h6>
            <span>This Week</span>
          </div><!-- card-header -->
          <div class="card-body">
            <div class="card-body-top">
              <div>
                <h6>297,506</h6>
                <label>Total Visitors</label>
              </div>
              <div>
                <h6>38,130</h6>
                <label>Visits per Day</label>
              </div>
              <div>
                <h6>35.07%</h6>
                <label>Bounce Rate</label>
              </div>
            </div><!-- card-body-top -->

            <div class="d-flex justify-content-between mg-b-15">
              <label class="az-content-label">Visitors Per Hour</label>
              <div class="chart-legend">
                <div><span class="bg-pink"></span> Today</div>
                <div><span class="bg-gray-400"></span> Yesterday</div>
              </div><!-- chart-legend -->
            </div>
            <div class="chart-wrapper">
              <div id="flotLine1" class="flot-chart"></div>
            </div><!-- chart-wrapper -->
          </div><!-- card-body -->
        </div><!-- card -->
      </div><!-- col -->
      <div class="col-lg-8 mg-t-20">
        <div class="card card-table-two">
          <h6 class="card-title">Most Recent Earnings</h6>
          <span class="d-block mg-b-20">This is the most recent earnings for today's date.</span>
          <div class="table-responsive">
            <table class="table table-striped table-dashboard-two mg-b-0">
              <thead>
                <tr>
                  <th class="wd-lg-25p">Date</th>
                  <th class="wd-lg-25p tx-right">Sales Count</th>
                  <th class="wd-lg-25p tx-right">Earnings</th>
                  <th class="wd-lg-25p tx-right">Tax Witheld</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>05 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">25</td>
                  <td class="tx-right tx-medium tx-inverse">$380.50</td>
                  <td class="tx-right tx-medium tx-danger">-$23.50</td>
                </tr>
                <tr>
                  <td>04 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">34</td>
                  <td class="tx-right tx-medium tx-inverse">$503.20</td>
                  <td class="tx-right tx-medium tx-danger">-$13.45</td>
                </tr>
                <tr>
                  <td>03 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">30</td>
                  <td class="tx-right tx-medium tx-inverse">$489.65</td>
                  <td class="tx-right tx-medium tx-danger">-$20.98</td>
                </tr>
                <tr>
                  <td>02 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">27</td>
                  <td class="tx-right tx-medium tx-inverse">$421.80</td>
                  <td class="tx-right tx-medium tx-danger">-$22.22</td>
                </tr>
                <tr>
                  <td>01 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">31</td>
                  <td class="tx-right tx-medium tx-inverse">$518.60</td>
                  <td class="tx-right tx-medium tx-danger">-$23.01</td>
                </tr>
                <tr>
                  <td>01 Oct 2018</td>
                  <td class="tx-right tx-medium tx-inverse">31</td>
                  <td class="tx-right tx-medium tx-inverse">$518.60</td>
                  <td class="tx-right tx-medium tx-danger">-$23.01</td>
                </tr>
              </tbody>
            </table>
          </div><!-- table-responsive -->
        </div><!-- card-dashboard-five -->
      </div><!-- col -->
      <div class="col-lg-4 mg-t-20">
        <div class="card card-dashboard-eight bg-white">
          <h6 class="card-title">Your Top Countries</h6>
          <span class="d-block mg-b-20">Sales performance revenue based by country</span>

          <div class="list-group">
            <div class="list-group-item">
              <i class="flag-icon flag-icon-us flag-icon-squared"></i>
              <p>United States</p>
              <span>$1,671.10</span>
            </div><!-- list-group-item -->
            <div class="list-group-item">
              <i class="flag-icon flag-icon-nl flag-icon-squared"></i>
              <p>Netherlands</p>
              <span>$1,064.75</span>
            </div><!-- list-group-item -->
            <div class="list-group-item">
              <i class="flag-icon flag-icon-gb flag-icon-squared"></i>
              <p>United Kingdom</p>
              <span>$1,055.98</span>
            </div><!-- list-group-item -->
            <div class="list-group-item">
              <i class="flag-icon flag-icon-ca flag-icon-squared"></i>
              <p>Canada</p>
              <span>$1,045.49</span>
            </div><!-- list-group-item -->
            <div class="list-group-item">
              <i class="flag-icon flag-icon-au flag-icon-squared"></i>
              <p>Australia</p>
              <span>$1,042.00</span>
            </div><!-- list-group-item -->
          </div><!-- list-group -->
        </div><!-- card -->
      </div><!-- col -->
    </div><!-- row -->
    <div class="az-content-body-right">
      <div class="row mg-b-20">
        <div class="col">
          <label class="az-rating-label">Seller Score</label>
          <h6 class="az-rating-value">98%</h6>
        </div><!-- col -->
        <div class="col">
          <label class="az-rating-label">Rating Score</label>
          <h6 class="az-rating-value">4.5</h6>
        </div><!-- col -->
      </div><!-- row -->
      <hr class="mg-y-25">
      <label class="az-content-label tx-base mg-b-25">2 Recent Reviews</label>
      <div class="az-media-list-reviews">
        <div class="media">
          <div class="az-img-user"><img src="https://via.placeholder.com/500" alt=""></div>
          <div class="media-body">
            <div class="d-flex justify-content-between mg-b-10">
              <div>
                <h6 class="mg-b-0">Socrates Itumay</h6>
                <div class="az-star-group">
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <span>4.1</span>
                </div><!-- star-group -->
              </div>
              <small>1 hour ago</small>
            </div>
            <p class="mg-b-0">Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed amet...<a href="">Read more</a></p>
          </div><!-- media-body -->
        </div><!-- media -->
        <div class="media">
          <div class="az-img-user"><img src="https://via.placeholder.com/500" alt=""></div>
          <div class="media-body">
            <div class="d-flex justify-content-between mg-b-10">
              <div>
                <h6 class="mg-b-0">Reynante Labares</h6>
                <div class="az-star-group">
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <div class="az-star-item"><i class="icon ion-md-star"></i></div>
                  <span>4.5</span>
                </div><!-- star-group -->
              </div>
              <small>2 days ago</small>
            </div>
            <p class="mg-b-0">Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed amet...<a href="">Read more</a></p>
          </div><!-- media-body -->
        </div><!-- media -->
      </div><!-- media-list -->

      <hr class="mg-y-25">
      <label class="az-content-label tx-base mg-b-25">Activity Stream</label>
      <div class="az-media-list-activity mg-b-20">
        <div class="media">
          <div class="media-icon bg-success"><i class="typcn typcn-tick-outline"></i></div>
          <div class="media-body">
            <h6>Successful Purchase</h6>
            <span>Product ID: #0102</span>
          </div>
          <div class="media-right">2 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-primary"><i class="typcn typcn-shopping-cart"></i></div>
          <div class="media-body">
            <h6>Order Verification</h6>
            <span>Product ID: #2200</span>
          </div>
          <div class="media-right">3 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-purple"><i class="typcn typcn-arrow-forward-outline"></i></div>
          <div class="media-body">
            <h6>Orders For Shipment</h6>
            <span>Cleared By: Agent#20</span>
          </div>
          <div class="media-right">5 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-danger"><i class="typcn typcn-times-outline"></i></div>
          <div class="media-body">
            <h6>Purchase Cancellation</h6>
            <span>Product ID: #0102</span>
          </div>
          <div class="media-right">6 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-success"><i class="typcn typcn-tick-outline"></i></div>
          <div class="media-body">
            <h6>Successful Purchase</h6>
            <span>Product ID: #2070</span>
          </div>
          <div class="media-right">10 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-warning"><i class="typcn typcn-tick-outline"></i></div>
          <div class="media-body">
            <h6>Overdue Shipments</h6>
            <span>Reminder from: Agent#30</span>
          </div>
          <div class="media-right">18 hours</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-danger"><i class="typcn typcn-times-outline"></i></div>
          <div class="media-body">
            <h6>Purchase Cancellation</h6>
            <span>Product ID: #0102</span>
          </div>
          <div class="media-right">Yesterday</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-info"><i class="typcn typcn-times-outline"></i></div>
          <div class="media-body">
            <h6>New Item Added</h6>
            <span>Department: Wearables</span>
          </div>
          <div class="media-right">Yesterday</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-orange"><i class="typcn typcn-times-outline"></i></div>
          <div class="media-body">
            <h6>New Registered Seller</h6>
            <span>Seller Name: Socrates</span>
          </div>
          <div class="media-right">3 days</div>
        </div><!-- media -->
        <div class="media">
          <div class="media-icon bg-success"><i class="typcn typcn-tick-outline"></i></div>
          <div class="media-body">
            <h6>Successful Purchase</h6>
            <span>Product ID: #2070</span>
          </div>
          <div class="media-right">4 days</div>
        </div><!-- media -->
      </div><!-- az-media-list-activity -->
      <a href="" class="btn btn-outline-light btn-block">View All Activities</a>
    </div>
@endsection
@section('script')
<script>
  $(function(){
    'use strict'

    var plot = $.plot('#flotChart', [{
      data: flotSampleData10,
      color: '#80bdff',
      lines: {
        fillColor: { colors: [{ opacity: .6 }, { opacity: .4 }]}
      }
    },{
      data: flotSampleData4,
      color: '#007bff',
      lines: {
        fillColor: { colors: [{ opacity: .8 }, { opacity: .6 }]}
      }
    },{
      data: flotSampleData11,
      color: '#003d80',
      lines: {
        fillColor: { colors: [{ opacity: .9 }, { opacity: .7 }]}
      }
    }], {
      series: {
        shadowSize: 0,
        lines: {
          show: true,
          lineWidth: 0,
          fill: true
        }
      },
      grid: {
        borderWidth: 0,
        aboveData: true
      },
      yaxis: {
        show: true,
        min: 0,
        max: 150,
        color: 'rgba(255,255,255,0.2)',
        ticks: [[0,''],[25,'$25,000'],[50,'$50,000'],[75,'$75,000'],[100,'$100,000']]
      },
      xaxis: {
        show: true,
        ticks: [[0,''],[8,'Jan'],[20,'Feb'],[32,'Mar'],[44,'Apr'],[56,'May'],[68,'Jun'],[80,'Jul'],[92,'Aug'],[104,'Sep'],[116,'Oct'],[128,'Nov'],[140,'Dec']],
        color: 'rgba(255,255,255,0.2)'
      }
    });

    $.plot('#flotChart1', [{
        data: flotSampleData6,
        color: '#70737c'
      }], {
      series: {
        shadowSize: 0,
        lines: {
          show: true,
          lineWidth: 2,
          fill: true,
          fillColor: { colors: [ { opacity: 0 }, { opacity: 0.1 } ] }
        }
      },
      grid: {
        borderWidth: 0,
        labelMargin: 0
      },
      yaxis: {
        show: false,
        min: 0,
        max: 120
      },
      xaxis: { show: false }
    });

    $.plot('#flotChart2', [{
        data: flotSampleData7,
        color: '#007bff'
      }], {
      series: {
        shadowSize: 0,
        lines: {
          show: true,
          lineWidth: 2,
          fill: true,
          fillColor: { colors: [ { opacity: 0 }, { opacity: 0.2 } ] }
        }
      },
      grid: {
        borderWidth: 0,
        labelMargin: 0
      },
      yaxis: {
        show: false,
        min: 0,
        max: 120
      },
      xaxis: { show: false }
    });

    $.plot('#flotChart3', [{
        data: flotSampleData8,
        color: '#fff'
      }], {
      series: {
        shadowSize: 0,
        lines: {
          show: true,
          lineWidth: 2,
          fill: true,
          fillColor: { colors: [ { opacity: 0 }, { opacity: 0.2 } ] }
        }
      },
      grid: {
        borderWidth: 0,
        labelMargin: 0
      },
      yaxis: {
        show: false,
        min: 0,
        max: 120
      },
      xaxis: { show: false }
    });

    $.plot('#flotChart4', [{
        data: flotSampleData9,
        color: '#fff'
      }], {
      series: {
        shadowSize: 0,
        lines: {
          show: true,
          lineWidth: 2,
          fill: true,
          fillColor: { colors: [ { opacity: 0 }, { opacity: 0.2 } ] }
        }
      },
      grid: {
        borderWidth: 0,
        labelMargin: 0
      },
      yaxis: {
        show: false,
        min: 0,
        max: 120
      },
      xaxis: { show: false }
    });

    var ctx5 = document.getElementById('chartBar5').getContext('2d');
    new Chart(ctx5, {
      type: 'horizontalBar',
      data: {
        labels: ['Jul', 'Aug', 'Sep'],
        datasets: [{
          data: [12, 39, 20],
          backgroundColor: '#007bff'
        }, {
          data: [22, 30, 25],
          backgroundColor: '#6f42c1'
        },{
          data: [40, 30, 35],
          backgroundColor: '#00cccc'
        },{
          data: [25, 40, 25],
          backgroundColor: '#004a99'
        }]
      },
      options: {
        maintainAspectRatio: false,
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          yAxes: [{
            barPercentage: 0.75,
            ticks: {
              beginAtZero:true,
              fontSize: 11,
            }
          }],
          xAxes: [{
            ticks: {
              beginAtZero:true,
              fontSize: 11,
              max: 80
            }
          }]
        }
      }
    });

    var ctx6 = document.getElementById('chartBar6').getContext('2d');
    new Chart(ctx6, {
      type: 'bar',
      data: {
        labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        datasets: [{
          data: [150,110,90,115,125,160,160,140,100,110,120,120],
          backgroundColor: '#2b91fe'
        },{
          data: [180,140,120,135,155,170,180,150,140,150,130,130],
          backgroundColor: '#054790'
        }]
      },
      options: {
        maintainAspectRatio: false,
        legend: {
          display: false,
            labels: {
              display: false
            }
        },
        scales: {
          xAxes: [{
            //stacked: true,
            display: false,
            barPercentage: 0.5,
            ticks: {
              beginAtZero:true,
              fontSize: 11
            }
          }],
          yAxes: [{
            ticks: {
              fontSize: 10,
              color: '#eee',
              min: 80,
              max: 200
            }
          }]
        }
      }
    });

    // Progress
    var prog1 = $('#progressBar1 .progress-bar:first-child');
    prog1.css('width','30%');
    prog1.attr('aria-valuenow','30');
    prog1.text('30%');

    var prog2 = $('#progressBar1 .progress-bar:last-child');
    prog2.css('width','53%');
    prog2.attr('aria-valuenow', '53');
    prog2.text('53%');

    // Progress
    var prog3 = $('#progressBar2 .progress-bar:first-child');
    prog3.css('width','35%');
    prog3.attr('aria-valuenow','35');
    prog3.text('35%');

    var prog4 = $('#progressBar2 .progress-bar:last-child');
    prog4.css('width','37%');
    prog4.attr('aria-valuenow', '37');
    prog4.text('37%');

  });
</script>
@endsection