@extends('layouts.master')
@section('css')
  <link href="{{ url('public/assets/vendors/fullcalendar/dist/fullcalendar.min.css') }}" rel="stylesheet">
  <link href="{{ url('public/assets/vendors/fullcalendar/dist/fullcalendar.print.css') }}" rel="stylesheet" media="print">
@endsection
@section('content')



<div class="">
    
<div class="right_cols" role="main">
  <div class="">
    <div class="row top_tiles">
      <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
          <div class="icon"><i class="fa fa-sun-o"></i></div>
          <div class="count">{{ $total }}</div>
          <h3>Total Clients</h3>
          <!-- <p>Lorem ipsum psdea itgum rixt.</p> -->
        </div>
      </div>
      <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
          <div class="icon"><i class="fa fa-comments-o"></i></div>
          <div class="count">{{ $sms }}</div>
          <h3>SMS Clients</h3>
          <!-- <p>Lorem ipsum psdea itgum rixt.</p> -->
        </div>
      </div>
      <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
          <div class="icon"><i class="fa fa-mobile-phone"></i></div>
          <div class="count">{{ $ussd }}</div>
          <h3>USSD Client</h3>
          <!-- <p>Lorem ipsum psdea itgum rixt.</p> -->
        </div>
      </div>
      <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="tile-stats">
          <div class="icon"><i class="fa fa-bullhorn"></i></div>
          <div class="count">{{ $voice }}</div>
          <h3>Voice Clients</h3>
          <!-- <p>Lorem ipsum psdea itgum rixt.</p> -->
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>User Activities</h2>                    
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
          <div class="col-md-9" style="">
              <canvas id="mybarChart"></canvas>
          </div>
        <div class="col-md-3 col-sm-12 col-xs-12">
          <div>
            <div class="x_title">
              <h2>New Clients</h2>
              <div class="clearfix"></div>
            </div>
            <ul class="list-unstyled top_profiles scroll-view">
              <li class="media event">
                <div class="media-body">
                  <a class="title" href="#">Frosty Bites in the building</a>
                  <p>Added by: Mansa Olympio </p>
                  <p> 2023-10-23</p>
                </div>
              </li>
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>


<div class="row">              
  <div class="col-md-4">
    <div class="x_panel">
      <div class="x_title">
        <h2>Expiring Contracts </h2>
        
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        @if($expiring_contracts->isEmpty() == false)
        @foreach($expiring_contracts as $row)
        <article class="media event">
          <a class="pull-left date" style="background-color: #de9a24">
            <p class="month">{{ date("M", strtotime($row->contract_validity)) }}</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" title="View Client Details" href="{{ url('clients', $row->id) }}">{{ $row->name }}</a>
            <p class="">Contract Type : {{ strtoupper($row->contract_type) }}</p>
          </div>
        </article>
        @endforeach
        @else
          <article class="media event">
          <a class="pull-left date">
            <p class="month">00</p>
            <p class="day">00</p>
          </a>
          <div class="media-body">
            <a class="title" href="#"></a>
            <p>No Records</p>
          </div>
        </article>
        @endif
        
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="x_panel">
      <div class="x_title">
        <h2>Expiring Certificates</h2>                    
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item One Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Three Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="x_panel">
      <div class="x_title">
        <h2>Upcoming Reminders </h2>
        <ul class="nav navbar-right panel_toolbox">
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Settings 1</a>
              </li>
              <li><a href="#">Settings 2</a>
              </li>
            </ul>
          </li>
          <li><a class="close-link"><i class="fa fa-close"></i></a>
          </li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="x_content">
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item One Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Two Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
        <article class="media event">
          <a class="pull-left date">
            <p class="month">April</p>
            <p class="day">23</p>
          </a>
          <div class="media-body">
            <a class="title" href="#">Item Three Title</a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

</div>
@endsection
@section('javascript')
<script src="{{ url('public/assets/vendors/fullcalendar/dist/fullcalendar.min.js') }}"></script>
  
  <!-- Chart.js -->
  <script src="{{ url('public/assets/vendors/Chart.js/dist/Chart.min.js') }}"></script>

  <!-- jQuery Sparklines -->
  <script src="{{ url('public/assets/vendors/jquery-sparkline/dist/jquery.sparkline.js') }}"></script>

  <!-- DateJS -->
  <script src="{{ url('public/assets/vendors/DateJS/build/date.js') }}"></script>
  <script src="{{ url('public/assets/js/dashboard.js') }}"></script>


@endsection