<?php 
  $loc = $pickup_lat.','.$pickup_lng;
  $mapLocData = array(); 
?>
<div class="content-wrapper" >
 <!-- Content Header (Page header) -->
 <section class="content-header">
  <h1>
     <?= $page_title ?>
      <small><?= $page_desc ?></small>
  </h1>
  <ol class="breadcrumb">
   <li><a href="<?= base_url() ?>"><i class="fa fa-star-o" aria-hidden="true"></i>Home</a></li>
   <li>User</li>
   <li class="active">View User</li>
 </ol>
</section>
<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-12">
      <?php if($this->session->flashdata('message')) { 
          $flashdata = $this->session->flashdata('message'); ?>
          <div class="alert alert-<?= $flashdata['class'] ?>">
             <button class="close" data-dismiss="alert" type="button">×</button>
             <?= $flashdata['message'] ?>
          </div>
      <?php } ?>
    </div>
    <div class="col-xs-12">
      <div class="box box-warning">
        <div class="box-header">
          <h3 class="box-title">Select Driver</h3>
        </div>
        <div "class="col-12">
          <div id="map-canvas-assign" style="width: 100%; height: 300px;"></div>
          <div "class="col-xs-12">
            <img src="<?=base_url('assets/images/mapPickupIcon.png')?>" style="padding-left:230px;">
            Patient Pick Up
            <img src="<?=base_url('assets/images/mapCarIcon.png')?>" style="padding-left:100px;">
            Available Drivers
            <img src="<?=base_url('assets/images/mapCarIconPref.png')?>" style="padding-left:100px;">
            Preferred Driver
          </div>
        </div>  
        <div class="box-body">
          <table id="" class="table table-bordered table-striped datatable ">
           <thead>
            <tr>
             <th width="100px;">Driver Image</td> 
             <th width="120px;">Driver Name</td> 
             <th width="120px;">Driver Phone</td>
             <th width="150px;">Driver Email</td>
             <th width="170px;">Pick-Up Distance <small>(In Miles)</small></td>
             <th width="150px;">Action</td>
            </tr>
           </thead> 
           <tbody>
            <?php
              $prefDriver = $ride_data->driver_id;
              $forceAssign = ($ride_data->status == 7)?1:0;
              $mapLocData[] = array('DisplayText'=>'Patient Pick Up',
                                    'LatitudeLongitude'=>$pickup_lat.','.$pickup_lng,
                                    'MarkerId'=>base_url('assets/images/mapPickupIcon.png')); 
              if(!empty($driver_list)){
                foreach($driver_list as $driver) {
                 ?>
                 <tr <?= ($prefDriver == $driver['driver_id'])?'style="background:#bedef6;"':'' ?>>
                  <td class="center">
                    <img src="<?= base_url($driver['profile_image']) ?>" onerror="this.src='<?=base_url("assets/images/user_avatar.jpg")?>';" height="50" width="50" />
                  </td> 
                  <td class="center"><?= $driver['first_name'].' '.$driver['last_name'] ?></td> 
                  <td class="center"><?= $driver['phone'] ?></td>
                  <td class="center"><?= $driver['email_id'] ?></td>
                  <td class="center" style="padding-left:7%;">
                    <strong><?= round($driver['distance'],1) ?></strong>
                  </td>
                  <td class="center">
                    <a class="btn btn-sm btn-success" style="width:100%;" 
                       href="<?= base_url("Ride/assignRide/".encode_param($ride_id)."/".encode_param($driver['driver_id']).'/'.$forceAssign) ?>" >
                      <i class="fa fa-fw fa-arrow-circle-right" style="padding-right:10px;"></i>Assign Ride
                    </a>
                  </td>
                </tr>
              <?php 
                $drvLatLng = (!empty($driver['lat_driver']) && !empty($driver['lng_driver']))?
                                     $driver['lat_driver'].','.$driver['lng_driver']:'';

                $markIcon = ($prefDriver == $driver['driver_id'])?'mapCarIconPref':'mapCarIcon';
                $mapLocData[] = array('DisplayText'=>$driver['first_name'].' '.$driver['last_name'],
                                    'MarkerId'=>base_url('assets/images/'.$markIcon.'.png'),
                                    'LatitudeLongitude'=>$drvLatLng);
                }
              }?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
</section>
</div>


<script type="text/javascript">
  var map, geocoder, marker, people = new Array(), latlng, infowindow;

  jQuery(document).ready(function() {
    ViewCustInGoogleMap();
  });

  function ViewCustInGoogleMap() {
    var mapOptions = {
      center: new google.maps.LatLng(<?= $loc ?>),
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas-assign"), mapOptions);

    var data = '<?= json_encode($mapLocData) ?>';
    people = JSON.parse(data); 

    for (var i = 0; i < people.length; i++) {
      setMarker(people[i]);
    }
  }

  function setMarker(people) {
    geocoder = new google.maps.Geocoder();
    infowindow = new google.maps.InfoWindow();
    if(people["LatitudeLongitude"] != '') {
      var latlngStr = people["LatitudeLongitude"].split(",");
      var lat = parseFloat(latlngStr[0]);
      var lng = parseFloat(latlngStr[1]);
      latlng = new google.maps.LatLng(lat, lng);
      marker = new google.maps.Marker({
        position: latlng,
        map: map,
        draggable: false,
        html: people["DisplayText"],
        icon: people["MarkerId"]
      });
      google.maps.event.addListener(marker, 'click', function(event) {
        infowindow.setContent(this.html);
        infowindow.setPosition(event.latLng);
        infowindow.open(map, this);
      });
    }
  }
</script>