@include('header')
      <!-- partial -->
      <div class="main-panels">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margins">
              <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                  <h3 class="font-weight-bold">Welcome Staff,</h3>
                  <h6 class="font-weight-normal mb-0">This is Project Autosplash</span></h6>
                </div>
                <div class="col-12 col-xl-4">

                </div>
              </div>
            </div>
          </div>
          <br/><br/>
          <div class="row"> 

            <div class="col-md-4 grid-margin stretch-card">
              <div class="card tale-bg" style="background-color:#fff">
                <div class="card-people mt-auto">
            <a href="{{ route('queue.staff') }}">                  
              <img src="{{ asset('images/queue2.jpg') }}" alt="people">
                  <div class="weather-info">
                    <div class="d-flex">
                      <div class="ml-2">
                        <h4 class="location font-weight-normal">My Queue</h4>
                      </div>
                    </div>
                  </div>
            </a>                
                </div>
              </div>
            </div>


            <div class="col-md-4 grid-margin stretch-card">
              <div class="card tale-bg" style="background-color:#fff">
                <div class="card-people mt-auto">
                <a href="{{ route('staff.inventory') }}">   
                <img src="{{ asset('images/inventory.jpg') }}" alt="people">
                  <div class="weather-info">
                    <div class="d-flex">
                      <div class="ml-2">
                        <h4 align="center" class="location font-weight-normal">My Inventory</h4>
                      </div>
                    </div>
                  </div>
                  </a>           
</div>
              </div>
            </div>

            <div class="col-md-4 grid-margin stretch-card">
              <div class="card tale-bg" style="background-color:#308fc9">
                <div class="card-people mt-auto">
                <a href="{{ route('allotment.staff') }}">   
                  <img src="{{ asset('images/job.png') }}" alt="people">
                  <div class="weather-info">
                    <div class="d-flex"> 
                      <div class="ml-2">
                        <h4 class="location font-weight-normal"  style="color:#fff">My Time Allotted Page</h4>
                      </div>
                    </div>
                  </div>
</a>
                </div>
              </div>
            </div>

            <div class="col-md-4 grid-margin stretch-card">
              <div class="card tale-bg"  style="background-color:#fff">
                <div class="card-people mt-auto">
                <a href="{{ route('jobs.staff') }}" style="color:#fff">   
                  <img src="{{ asset('images/job_progress.jpg') }}" alt="people">
                  <div class="weather-info">
                    <div class="d-flex">
                      <div class="ml-2">
                        <h4 class="location font-weight-normal">My Job Progress Page</h4>
                      </div>
                    </div>
                  </div>
</a>
                </div>
              </div>
            </div>

            <!--div class="col-md-6 grid-margin transparent">
              <div class="row">
                <div class="col-md-6 mb-4 stretch-card transparent">
                  <div class="card card-tale">
                    <div class="card-body">
                      <p class="mb-4">Total Administrators (Super and Regular)</p>                      
                      <p class="fs-30 mb-2">@php $users = DB::table('users')->count(); echo $users; @endphp</p>
                    </div>
                  </div>
                </div>
                <div class="col-md-6 mb-4 stretch-card transparent">
                  <div class="card card-dark-blue">
                    <div class="card-body">
                      <p class="mb-4">Total Number of Clients</p>                     
                      <p class="fs-30 mb-2">@php $clients = DB::table('clients')->count(); echo $clients; @endphp</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-4 mb-lg-0 stretch-card transparent">
                  <div class="card card-light-blue">
                    <div class="card-body">
                      <p class="mb-4">Total Bookings Made</p>
                      <p class="fs-30 mb-2">@php $clients = DB::table('bookings')->count(); echo $clients; @endphp</p>
                      
                    </div>
                  </div>
                </div>
                <div class="col-md-6 stretch-card transparent">
                  <div class="card card-light-danger">
                    <div class="card-body">
                      <p class="mb-4">My Total Assigned Tasks</p>
                      <p class="fs-30 mb-2">@php $tasks = DB::table('tasks')->where('staff_id', session("id"))->count(); echo $clients; @endphp</p>
                      
                    </div>
                  </div>
                </div>
              </div>
            </div-->
          </div>
          <div class="row">
            <!--div class="col-md-4 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title">Number of Queries</p>
                  <p class="font-weight-500">The total number of queries carried out per hour</p>
                  <div class="d-flex flex-wrap mb-5">
                  </div>
                  <canvas id="order-chart"></canvas>
                </div>
              </div>
            </div-->
            <!--div class="col-md-7 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                 <div class="d-flex justify-content-between">
                  <p class="card-title">Sales Reports</p>
                  
                 </div>
                  <div id="sales-legend" class="chartjs-legend mt-4 mb-2"></div>
                  <canvas id="order-chart"></canvas>
                </div>
              </div>
            </div>
            <div class="col-md-5 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">

                 <p class="card-title">Registration Trend</p>
                 <div class="d-flex flex-wrap mb-5">
                  </div>
                    <!--div id="north-america-legend"></div-->
                    <!--canvas id="sales-chart"></canvas>
                                
                </div>
              </div>
            </div-->            
          </div>


          <!--div class="row">
            <div class="col-md-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <p class="card-title">Advanced Table</p>
                  <div class="row">
                    <div class="col-12">
                      <div class="table-responsive">
                        <table id="example" class="display expandable-table" style="width:100%">
                          <thead>
                            <tr>
                              <th>Quote#</th>
                              <th>Product</th>
                              <th>Business type</th>
                              <th>Policy holder</th>
                              <th>Premium</th>
                              <th>Status</th>
                              <th>Updated at</th>
                              <th></th>
                            </tr>
                          </thead>
                      </table>
                      </div>
                    </div>
                  </div>
                  </div>
                </div>

                
              </div>
            </div>
        </div-->
        <!-- content-wrapper ends -->
        <!-- partial: -->
        <footer class="footer">
          <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"><p align="center" class="mb-0">Copyright &copy; Tritek Consulting Ltd 2022 </p>  </span>
          </div>
        </footer>
        <!-- partial -->

      </div>
      <!-- main-panel ends -->
    </div>   
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- container-scroller -->
  <!-- plugins:js -->
  <script src="{{ asset('vendors/js/vendor.bundle.base.js') }}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/typeahead.js/typeahead.bundle.min.js') }}"></script>
  <script src="{{ asset('vendors/select2/select2.min.js') }}"></script>
  <!-- End plugin js for this page -->
  <!-- inject:js -->
  <script src="{{ asset('js/off-canvas.js') }}"></script>
  <script src="{{ asset('js/hoverable-collapse.js') }}"></script>
  <script src="{{ asset('js/template.jss') }}"></script>
  <script src="{{ asset('js/settings.js') }}"></script>
  <script src="{{ asset('js/todolist.js') }}"></script>
  <!-- endinject -->
  <!-- Custom js for this page-->
  <script src="{{ asset('js/file-upload.js') }}"></script>
  <script src="{{ asset('js/typeahead.js') }}"></script>
  <script src="{{ asset('js/select2.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- Plugin js for this page -->
  <script src="{{ asset('vendors/chart.js/Chart.min.js') }}"></script>
  <!-- Custom js for this page-->
  <script src="{{ asset('js/chart.js') }}"></script>
  <!-- Custom js for this page-->
  <script src="{{ asset('js/dashboard.js') }}"></script>
  <script src="{{ asset('js/Chart.roundedBarCharts.js') }}"></script>
  <!-- End custom js for this page-->

  <!-- End custom js for this page-->
  <!--script>
      let inactivityTime = function() {
        let time;
        window.onload = resetTimer;
        document.onmousemove = resetTimer;
        document.onkeypress = resetTimer;
        function logout() {
          alert("You are now logged out due to 5 minutes of Inactivity.")
          window.location.href = "logoutAuthenticationHandler";
        }
        function resetTimer() {
          clearTimeout(time);
          time = setTimeout(logout, 100000)
        }
      };
      window.onload = function() {
        inactivityTime();
      }
    </script-->

</body>

</html>