<?php 
  $loc = '';
  $drvLatLng = '0,0';
  $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><?= $menu ?></li>
   <li class="active"><?= $sub_menu ?></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="col-12">
        <div id="map-canvas" style="width: 100%; height: 300px;"></div>
      </div> 
    <div class="box-body">
      <table id="driverTable" class="table table-bordered table-striped datatable ">
       <thead>
        <tr>
         <th class="hidden">ID</th>
         <th width="150px;">Driver Name</th> 
         <th width="150px;">Email ID</th> 
         <th width="150px;">Phone</th>
         <th width="150px;">Company</th>
         <th width="50px;">Status</th>
         <th width="500px;">Action</th>
       </tr>
     </thead> 
     <tbody>
      <?php
      if(!empty($drivers_data)){
        foreach($drivers_data as $driver) {
         ?>
         <tr>
           <th class="hidden"><?= $driver->driver_id ?></th>
           <td class="center"><?= $driver->first_name.' '.$driver->last_name ?></th> 
           <td class="center"><?= $driver->email_id ?></th> 
           <td class="center"><?= $driver->phone ?></th>
           <td class="center"><?= $driver->company_name ?></th>
           <td class="center"><?= ($driver->status == '1')?'Active':'Inactive'?></td>
           <td class="center">	 
              <a class="btn btn-sm btn-primary" id="viewDriver" driver_id="<?= encode_param($driver->driver_id) ?>">
                <i class="fa fa-fw fa-edit"></i>View
              </a>
              <a class="btn btn-sm btn-danger" 
                href="<?= base_url('Driver/edit/'.encode_param($driver->driver_id)) ?>">
                <i class="fa fa-fw fa-trash"></i>Edit
              </a> 
              <a class="btn btn-sm btn-danger" 
                href="<?= base_url("Driver/changeStatus/".encode_param($driver->driver_id))."/2" ?>" 
                onClick="return doconfirm()">
                <i class="fa fa-fw fa-trash"></i>Delete
              </a>    
              <?php if($driver->status == 1){ ?>
                <a class="btn btn-sm btn-success" style="background-color:#ac2925" href="<?= base_url("Driver/changeStatus/".encode_param($driver->driver_id))."/0" ?>">
                  <i class="fa fa-cog"></i> De-activate
                </a>
              <?php } else { ?>
                <a class="btn btn-sm btn-success" href="<?= base_url("Driver/changeStatus/".encode_param($driver->driver_id))."/1" ?>">
                  <i class="fa fa-cog"></i> Activate
                </a>
              <?php } ?>
            </td>
          </tr>
      <?php 
          if(!empty($driver->active_loc_lat) && !empty($driver->active_loc_lng))
            $drvLatLng = $driver->active_loc_lat.','.$driver->active_loc_lng;

          $mapLocData[]=array('DisplayText'=>$driver->first_name.' '.$driver->last_name,
                              'MarkerId'=>base_url('assets/images/mapCarIconPref.png'),
                              'LatitudeLongitude'=>$drvLatLng,'driver_id'=>encode_param($driver->driver_id));
        } 
      }?>
    </tbody>
 </table>
</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(<?= $drvLatLng ?>),
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), 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) {
        markCalBak(people["driver_id"]);
      });
      google.maps.event.addListener(marker, 'mouseout', function(event) {
        infowindow.close(map, this);
      });
      google.maps.event.addListener(marker, 'mouseover', function(event) {
        infowindow.setContent(this.html);
        infowindow.setPosition(event.latLng);
        infowindow.open(map, this);
      });
    }
  }

  jQuery('[id="viewDriver"]').on('click',function() {
    markCalBak(jQuery(this).attr('driver_id'));
  });
  
  function markCalBak(driver_id){
    if(driver_id=='' || driver_id==undefined || driver_id=='undefined' || driver_id==null || driver_id=='null'){
      return true;
    }
    modalTrigger('Ride Details','');
    addModalLoader();
    jQuery.ajax({
      url  : base_url+"Driver/getDriverData", 
      type : 'POST',
      data : {'driver_id':driver_id},
      success: function(resp){
        if(resp == '' || resp == undefined || resp == 'undefined' || resp == null || resp == 'null'){
          remModalLoader();
          jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
          return false;
        }
        var resp_data = jQuery.parseJSON(resp);
        if(resp_data['status'] == '0'){
          remModalLoader();
          jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
          return false;
        }
        var driver_data = resp_data['driver_data'];
        jQuery.each(driver_data, function (index, value) {
          if(value == '' || value == null || value == undefined || value == 'null' || value == 'undefined'){
            driver_data[index] = ' -- ';
          }
        });

        var html = '<div class="col-xs-12">'+
                      '<div class="col-md-2">'+
                        '<div class="form-group">'+
                          '<img  id="driverProfileImg" src="'+base_url+driver_data['profile_image']+'" height="100" width="100" />'+
                        '</div>'+
                      '</div>'+
                      '<div class="col-md-5">'+
                        '<div class="form-group">'+
                          '<span style="padding-right: 52px;">Name </span> : '+
                          '<label style="padding-left: 10px;">'+
                            driver_data['first_name']+' '+driver_data['last_name']+
                          '</label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 38px;">Email ID </span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['email_id']+'</label>'+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 49px;">Phone </span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['email_id']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 31px;">Company </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['company_name']+'</label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 41px;">Address </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['address']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 65px;">City </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['city']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 58px;">State </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['state']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 60px;">Type </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['vehicle_type']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 46px;">Vehicle </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['vehicle_model']+' </label> '+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 18px;">Vehicle Reg.</span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['vehicle_reg_no']+'</label>'+
                        '</div> '+
                      '</div> '+
                      '<div class="col-md-5"> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 35px;">Online Timing </span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['online_time']+' </label>'+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 27px;">Active Location </span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['active_location']+'</label>'+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 50px;">Licence No. </span> : '+
                          '<label style="padding-left: 10px;"> '+driver_data['licence_number']+' </label>'+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 33px;">Licence Expiry </span> : '+
                          '<label style="padding-left: 10px;">'+driver_data['licence_exp_date']+'</label>'+
                        '</div> '+
                        '<div class="form-group"> '+
                          '<span style="padding-right: 37px;">Licence Proof </span> : '+
                          '<div class="col-md-12" style="height: 200px;"> '+
                            '<img id="driverLicenceImg" src="'+base_url+driver_data['licence']+'"'+
                              'style="margin-top: 10px; width: 100%; height: auto;"/>'+
                          '</div> '+
                        '</div> '+
                      '</div> '+
                    '</div>'+
                    '<div style="text-align:center;">'+
                      '<a href="'+base_url+'Driver/view/'+driver_id+'">View</a>'+
                    '</div>';

        remModalLoader();
        jQuery('[id="modal_content"]').html(html);

        jQuery('[id="driverLicenceImg"]').error(function() {
          jQuery('[id="driverLicenceImg"]').attr('src',base_url+'assets/images/no_image.png');
        });

        jQuery('[id="driverProfileImg"]').error(function() {
          jQuery('[id="driverProfileImg"]').attr('src',base_url+'assets/images/user_avatar.jpg');
        });

      },
      fail: function(xhr, textStatus, errorThrown){
        remModalLoader();
        jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
      },
      error: function (ajaxContext) {
        remModalLoader();
        jQuery('[id="modal_content"]').html('Something went wrong, please try again later...!');
      }
    });
  }
</script>