<script type="text/javascript">
   window.onload = function() {

      var chart = new CanvasJS.Chart("chartContainer", {
         theme: "light1", // "light2", "dark1", "dark2"
         animationEnabled: false, // change to true      
         title: {
            text: "Application Analytics"
         },
         data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: [{
                  label: "Users",
                  y: <?php echo $usersCount; ?>
               },
               {
                  label: "Vendor",
                  y: <?php echo $vendorcount; ?>
               },
               {
                  label: "Categories",
                  y: <?php echo $categoriesCount; ?>
               },
               {
                  label: "Products",
                  y: <?php echo $productsCount; ?>
               }
            ]
         }]
      });
      chart.render();

   }
</script>
<div class="content-header">
   <div class="container-fluid">
      <div class="row mb-2">
         <div class="col-sm-6">
            <h1 class="m-0 text-dark">Dashboard
            </h1>
         </div>
         <!-- /.col -->
         <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
               <li class="breadcrumb-item"><a href="<?= base_url(); ?>/dashboard">Home</a></li>
               <li class="breadcrumb-item active">Dashboard</li>
            </ol>
         </div>
         <!-- /.col -->
      </div>
      <!-- /.row -->
   </div>
   <!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
   <div class="container-fluid">
      <!-- Info boxes -->
      <div class="row">
         <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box">
               <span class="info-box-icon bg-success elevation-1"><a href="<?= base_url('Customer'); ?>"><i class="fa fa-user-secret"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Users Information</span>
                  <span class="info-box-number"><?= $usersCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box">
               <span class="info-box-icon bg-info elevation-1"><a href="<?= base_url('Customer/vendors'); ?>"><i class="fa fa-user-secret"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Podcasts Information</span>
                  <span class="info-box-number"><?= $vendorcount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->
         <div class="col-12 col-sm-6 col-md-4">
            <div class="info-box mb-3">

               <span class="info-box-icon bg-secondary elevation-1"><a href="<?= base_url('Category'); ?>"><i class="fa fa-th-large"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Male</span>
                  <span class="info-box-number"><?= $categoriesCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->
         <!-- /.col -->
         <div class="col-12 col-sm-6 col-md-4 ">
            <div class="info-box mb-3">

               <span class="info-box-icon bg-primary elevation-1"><a href="<?= base_url('Products'); ?>"><i class="fa-brands fa-product-hunt"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Female</span>
                  <span class="info-box-number"><?= $productsCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->


         <!-- fix for small devices only -->

<!--
         <div class="col-12 col-sm-12 col-md-12">
            <div id="chartContainer" style="height: 370px; width: 100%;"></div>
            <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
         </div>
    -->
         <!-- /.col -->
         <!-- <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
               <span class="info-box-icon bg-danger elevation-1"><a href="<?= base_url('Booking/today'); ?>"><i class="fas fa-id-card"></a></i></span>
               <div class="info-box-content">
                  <span class="info-box-text">Today Bookings</span>
                  <span class="info-box-number"><?= $bookingsTodayCount ?></span>
               </div>
            </div>
         </div> -->
         <!-- /.col -->
      </div>
      <!-- /.row -->
      <!-- /.row -->
       <div class="row">
         <div class="row col-md-12">
            <?php if (userpermission('lr_ie_list')) { ?>
               <div class="col-md-12">
                  <div class="card">
                     <div class="card-header">
                        <h2 class="card-title">Podcasts and Users</h2>
                     </div>
                     <div class="card-header border-transparent">
                        <div class="card-body">
                           <div class="d-flex">
                              <p class="d-flex flex-column">
                              </p>
                              <p class="ml-auto d-flex flex-column text-right">
                                 <span class="text-success">
                                 </span>
                              </p>
                           </div>
                           <div class="position-relative mb-4">
                              <div class="chartjs-size-monitor">
                                 <div class="chartjs-size-monitor-expand">
                                    <div class=""></div>
                                 </div>
                                 <div class="chartjs-size-monitor-shrink">
                                    <div class=""></div>
                                 </div>
                              </div>
                              <canvas id="ie-chart" height="200" width="487" class="chartjs-render-monitor" style="display: block; width: 487px; height: 200px;"></canvas>
                           </div>
                           <div class="d-flex flex-row justify-content-end">
                              <span class="mr-2">
                                 <i class="fas fa-square text-success"></i> PodCasts
                              </span>
                              <span>
                                 <i class="fas fa-square text-danger"></i> Customers
                              </span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            <?php }

            if (userpermission('lr_reminder_list')) { ?>
            <!--
               <div class="col-md-6">
                  <div class="card">
                     <div class="card-header ui-sortable-handle" style="cursor: move;">
                        <h3 class="card-title">
                           <i class="ion ion-clipboard mr-1"></i>
                           Reminder
                        </h3>
                        <div class="card-tools">
                        </div>
                     </div>
                     <div class="card-body">
                        <div class="table-responsive">
                           <table id="custtbl" class="table card-table table-vcenter ">
                              <thead>
                                 <tr>
                                    <th class="w-1">S.No</th>
                                    <th>Vehicle</th>
                                    <th>Date</th>
                                    <th>Message</th>

                                    <th>Action</th>

                                 </tr>
                              </thead>
                              <tbody>
                                 <?php if (!empty($reminderlist)) {
                                    $count = 1;
                                    foreach ($reminderlist as $x => $reminderlists) {
                                 ?>
                                       <tr>
                                          <td> <?php echo output($count);
                                                $count++; ?></td>
                                          <td>

                                             <?php echo (getusername($reminderlists['r_v_id'])); ?></td>
                                          <td> <?php echo output($reminderlists['r_date']); ?></td>
                                          <td><?php echo output($reminderlists['r_message']); ?></td>

                                          <td>

                                             <a class="icon" href="<?php echo base_url(); ?>reminder/deletereminder/<?php echo output($x); ?>">
                                                <i class="fa fa-trash text-danger"></i>
                                             </a>

                                          </td>

                                       </tr>
                                 <?php }
                                 } ?>
                              </tbody>
                           </table>

                        </div>
                     </div>
                     <div class="card-footer clearfix">
                        <a href="<?= base_url() ?>reminder/addreminder"><button type="button" class="btn btn-info float-right"><i class="fas fa-plus"></i> Add Reminder</button></a>
                     </div>
                  </div>
               </div>
         </div>
      <?php }
            if (userpermission('lr_liveloc')) { ?>
         <div class="col-sm-6 col-lg-6 ">
            <div class="card ">
               <div class="card-header">
                  <h2 class="card-title">Drivers Current Location</h2>
               </div>
               <table class="datatable table card-table table-vcenter">
                  <thead>
                     <tr>
                        <th>Name</th>
                        <th>Current Location</th>
                        <th>Online</th>
                        <th>Rating</th>
                     </tr>
                  </thead>
                  <tbody>
                     <?php if (!empty($drivers)) {
                        foreach ($drivers as $vech_details) {
                           $ratings = array_filter($vech_details['ratings']);
                           $averageRating = round(array_sum($ratings) / count($ratings), 1);
                     ?>
                           <tr>
                              <td> <?php echo $vech_details['firstName'] . " " . $vech_details['lastName']; ?></td>
                              <td> <span class="badge badge-<?php //echo ($vech_details['lat'] != '') ? 'success' : 'warning' 
                                                            ?>"><?php //echo ($vech_details['lat'] != '' && $vech_details['lng'] != '') ? wordwrap(getAddress($vech_details['lat'], $vech_details['lng']), 60, "<br />\n") : 'Location Not Updated' 
                                                                  ?></span></td>
                              <td> <i class="fa fa-circle <?php if ($vech_details['isOnline']) echo "text-success";
                                                            else //echo "text-danger"; 
                                                            ?>" aria-hidden="true"></i></td>
                              <td><?php echo $averageRating; ?> <i class="fa fa-star text-warning" aria-hidden="true"></i></td>
                           </tr>
                     <?php }
                     } ?>
                  </tbody>
               </table>
            </div>
         </div>
      <?php }
            if (userpermission('lr_vech_list')) { ?>
         <div class="col-sm-6 col-lg-6 ">
            <div class="card">
               <div class="card-header">
                  <h2 class="card-title">Completed Rides</h2>
               </div>
               <table class="datatable table card-table">
                  <thead>
                     <tr>
                        <th>Name</th>
                        <th>Status</th>
                     </tr>
                  </thead>
                  <tbody>
                     <?php if (!empty($bookings)) {
                        foreach ($bookings as $key => $vechicle_status_arr) {
                           if ($vechicle_status_arr["status"] != "booked" && $vechicle_status_arr["status"] != "cancelled" && $vechicle_status_arr["status"] != "disputed" && $vechicle_status_arr["status"] != "dispute") {

                     ?>
                              <tr>
                                 <td><?php echo getusername($vechicle_status_arr['driverId']); ?></td>
                                 <td>
                                    <?php
                                    switch ($vechicle_status_arr["status"]) {
                                       case 'rideStarted':
                                          $status = '<span class="badge badge-info">Ongoing</span>';
                                          break;
                                       case 'rideCompleted':
                                          $status = '<span class="badge badge-success">Completed</span>';
                                          break;
                                       case 'booked':
                                          $status = '<span class="badge badge-warning">Booked - Yet to start</span>';
                                          break;
                                       case 'cancelled':
                                          $status = '<span class="badge badge-danger">Cancelled</span>';
                                          break;
                                       case 'driverAccepted':
                                          $status = '<span class="badge badge-warning">Driver is Arriving</span>';
                                          break;
                                       case 'driverDriverReached':
                                          $status = '<span class="badge badge-warning">Driver Arrived</span>';
                                          break;
                                       case 'disputed':
                                          $status = '<span class="badge badge-danger">Disputed</span>';
                                          break;
                                       case 'dispute':
                                          $status = '<span class="badge badge-warning">Dispute</span>';
                                          break;
                                       case 'rated':
                                          $status = '<span class="badge badge-success">Rated</span>';
                                          break;
                                    }

                                    echo $status;
                                    ?>
                                 </td>
                              </tr>
                     <?php  }
                        }
                     }  ?>
               </table>
            </div>
         </div>
      <?php }
            if (userpermission('lr_geofence_list')) { ?>
         <div class="col-md-6 d-none">
            <div class="col-sm-12 col-lg-12 ">
               <div class="card">
                  <div class="card-header">
                     <h2 class="card-title">Vehicle Geofence Status</h2>
                  </div>
                  <table class="datatable table card-table table-vcenter">
                     <thead>
                        <tr>
                           <th>Vehicle</th>
                           <th>Event</th>
                           <th>Time</th>
                        </tr>
                     </thead>
                     <tbody>
                        <?php if (!empty($geofenceevents)) {
                           foreach ($geofenceevents as $geofence) {
                        ?>
                              <tr>
                                 <td> <?php echo output($geofence['v_name']); ?></td>
                                 <td> <?php if ($geofence['ge_event'] == 'inside') {
                                          echo 'Moving ' . output($geofence['ge_event']) . ' ' . $geofence['geo_name'];
                                       } else {
                                          echo 'Exiting ' . output($geofence['ge_event']) . ' ' . $geofence['geo_name'];
                                       } ?></td>
                                 <td> <?php echo output($geofence['ge_timestamp']); ?></td>
                              </tr>
                        <?php }
                        } ?>
                     </tbody>
                  </table>
               </div>
            </div>
         </div>
      <?php } ?>
      </div> -->
   </div>
   </div>
</section>
</div>
<script src="<?php echo base_url(); ?>assets/plugins/chart.js/Chart.min.js"></script>

<?php if (userpermission('lr_ie_list')) { ?>
   <script>
      var ticksStyle = {
         fontColor: '#495057',
         fontStyle: 'bold'
      }
      var mode = 'index';
      var intersect = true;
      var $visitorsChart = $('#ie-chart')
      var visitorsChart = new Chart($visitorsChart, {
         data: {
            labels: <?= "['" . implode("', '", array_keys($iechart)) . "']" ?>,
            datasets: [{
                  type: 'bar',
                  data: <?= "['" . implode("', '", array_column($iechart, 'income')) . "']" ?>,
                  backgroundColor: '#28a745',
                  borderColor: '#28a745',
                  pointBorderColor: '#28a745',
                  pointBackgroundColor: '#28a745',
                  fill: false
                  // pointHoverBackgroundColor: '#007bff',
                  // pointHoverBorderColor    : '#007bff'
               },
               {
                  type: 'bar',
                  data: <?= "['" . implode("', '", array_column($iechart, 'expense')) . "']" ?>,
                  backgroundColor: '#dc3545',
                  borderColor: '#dc3545',
                  pointBorderColor: '#dc3545',
                  pointBackgroundColor: '#dc3545',
                  fill: false
                  // pointHoverBackgroundColor: '#ced4da',
                  // pointHoverBorderColor    : '#ced4da'
               }
            ]
         },
         options: {
            maintainAspectRatio: false,
            tooltips: {
               mode: mode,
               intersect: intersect
            },
            hover: {
               mode: mode,
               intersect: intersect
            },
            legend: {
               display: false
            },
            scales: {
               yAxes: [{
                  // display: false,
                  gridLines: {
                     display: true,
                     lineWidth: '4px',
                     color: 'rgba(0, 0, 0, .2)',
                     zeroLineColor: 'transparent'
                  },
                  ticks: $.extend({
                     beginAtZero: true,
                     suggestedMax: 200
                  }, ticksStyle)
               }],
               xAxes: [{
                  display: true,
                  gridLines: {
                     display: false
                  },
                  ticks: ticksStyle
               }]
            }
         }
      })
   </script> <?php } ?>