<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 -->

<?php
//echo "<pre>";
//print_r($iechart);
$indexno = date("Y-m-d");
$todayincome = $iechart[$indexno]['income'];
$todayexpense = $iechart[$indexno]['expense'];
//echo "</pre>";
?>
<section class="content">
   <div class="container-fluid">
      <!-- Info boxes -->
      <div class="row">
         <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
               <span class="info-box-icon bg-success elevation-1"><a href="<?= base_url(); ?>/Employee"><i class="fa fa-user-secret"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Employee Information</span>
                  <span class="info-box-number"><?= $employsCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->
         <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">

               <span class="info-box-icon bg-success elevation-1"><a href="<?= base_url(); ?>/drivers"><i class="fa fa-user-secret"></i></a></span>
               <div class="info-box-content">
                  <span class="info-box-text">Drivers Information</span>
                  <span class="info-box-number"><?= $driversCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->
         <!-- fix for small devices only -->
         <div class="clearfix hidden-md-up"></div>
         <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
               <span class="info-box-icon bg-warning elevation-1"><a href="<?= base_url(); ?>/customer"><i class="fa fa-user text-white"></a></i></span>
               <div class="info-box-content">
                  <span class="info-box-text">Customer Information</span>
                  <span class="info-box-number"><?= $customersCount ?> </span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </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(); ?>/trips"><i class="fas fa-id-card"></a></i></span>
               <div class="info-box-content">
                  <span class="info-box-text">Today Trips</span>
                  <span class="info-box-number"><?= $tripsCount ?></span>
               </div>
               <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
         </div>
         <!-- /.col -->
      </div>
      <!-- /.row -->
      <!-- /.row -->

      <style type="text/css">
         #map {
            height: 450px;
         }
      </style>
      <div class=" col-md-12">
         <div id="map"></div>
      </div>


      <div class="row">
         <h1>ba</h1>

         <!-- Left col -->
         <div class="row col-md-12">
            <?php if (userpermission('lr_ie_list')) { ?>
               <div class="col-md-12">
                  <!-- TABLE: LATEST ORDERS -->
                  <div class="card">
                     <div class="card-header">
                        <h2 class="card-title">Income and Expenses</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>
                           <!-- /.d-flex -->
                           <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> Income
                                 <br>
                                 <?php echo " &nbsp;&nbsp;$" . $todayincome; ?>
                              </span>
                              <span>
                                 <i class="fas fa-square text-danger"></i> Expense
                                 <br>
                                 <?php echo " &nbsp;&nbsp;$" . $todayexpense; ?>

                              </span>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-md-12">

               </div>
            <?php }
            if (userpermission('lr_reminder_list')) { ?>

         </div>

      <?php }
            if (userpermission('lr_liveloc')) { ?>
         <div class="col-sm-6 col-lg-6 d-none">
            <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 d-none">
            <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>
      <!-- /.card -->
      <!-- /.col -->
      <!-- /.col -->
   </div>
   <!-- /.row -->
   </div>
   <!--/. container-fluid -->
</section>
<!-- /.content -->
</div>
<script src="<?php echo base_url(); ?>assets/plugins/chart.js/Chart.min.js"></script>

<!-- /.content-wrapper -->
<?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, 'admin')) . "']" ?>,
                  backgroundColor: '#28a745',
                  borderColor: '#28a745',
                  pointBorderColor: '#28a745',
                  pointBackgroundColor: '#28a745',
                  fill: false
                  // pointHoverBackgroundColor: '#007bff',
                  // pointHoverBorderColor    : '#007bff'
               },
               {
                  type: 'bar',
                  data: <?= "['" . implode("', '", array_column($iechart, 'driver')) . "']" ?>,
                  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 } ?>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSW22XgtNdyjJGUq3QeXAjwBT6tFP51tk&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
   var users = <?php echo json_encode($tati); ?>;
   console.log(users);


   function initMap() {
      // const map = new google.maps.Map(document.getElementById("map"), {
      //   center: { lat: -34.397, lng: 150.644 },
      //   zoom: 8,
      // });
      var locations = users;
      /* var locations = [
  ['<b>Name 1</b><br>Address Line 1<br>Bismarck, ND 58501<br>Phone: 701-555-1234<br><a href="#" >Link<a> of some sort.', 46.8133, -100.7790, 4],
  ['<b>Name 2</b><br>Address Line 1<br>Fargo, ND 58103<br>Phone: 701-555-4321<br><a href="#" target="_blank">Link<a> of some sort.', 46.8772, -96.7894, 5]
];*/

      var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 7,
         /* Zoom level of your map */
         center: new google.maps.LatLng(33.67253360017613, 72.99672263429596),
         /* coordinates for the center of your map */
         mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
         marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: '<?= base_url("assets/marker/car.png") ?>' //'https://cdn-icons-png.flaticon.com/32/75/75689.png'
         });

         google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
               infowindow.setContent(locations[i][0]);
               infowindow.open(map, marker);
            }
         })(marker, i));
      }
   }
   window.initMap = initMap;
</script>