<!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <section class="content-header">

          <h1><?php echo $this->lang->line('My_Order_History');?> <!-- <button onclick="window.location.href='<?php echo base_url(); ?>customer/dashboard/restaurant_map_view'" type="button" class="btn btn-info Custom-btn pull-right" style="border-radius: 32px !important;">Find All Restaurants</button> -->
              </h1>
        </section>
        <div class="clearfix"></div>
        <!-- Main content -->
        <section class="content">
            <!-- tab section -->
            <div class="nav-tabs-custom">
                <div class="tab-content no-padding">
                  <div id="home" class="tab-pane fade in active">
                    <div class="box-body">
                          <div class="order-history">
                            
                                <div class="col-md-2 col-sm-12 paddingleft0">
                                  <div class="input-group margin-bottom-5" >
                                    <span class="input-group-btn">
                                        <button class="btn btn-sm default" type="button">
                                          <?php echo $this->lang->line('Order_ID');?>
                                        </button>
                                    </span>
                                    <input id="order_id" name="order_id" class="form-control form-filter input-sm" name="order_id" type="text">
                                  </div>
                                </div>
                                <div class="col-md-2 col-sm-12 paddingleft0">
                                  <div class="input-group date date-picker margin-bottom-5">
                                      <input class="form-control form-filter input-sm" name="order_date_from" id='datepicker' placeholder="From" type="text">
                                      <span class="input-group-btn">
                                          <button class="btn btn-sm default" type="button">
                                              <i class="fa fa-calendar"></i>
                                          </button>
                                      </span>
                                  </div>
                                </div>
                                <div class="col-md-2 col-sm-12 paddingleft0">
                                  <div class="input-group date date-picker">
                                      <input class="form-control form-filter input-sm" id='datepicker1' name="order_date_to" placeholder="To" type="text">
                                      <span class="input-group-btn">
                                          <button class="btn btn-sm default" type="button">
                                              <i class="fa fa-calendar"></i>
                                          </button>
                                      </span>
                                  </div>
                                </div>
								<!--
                                <div class="col-md-3 col-sm-12 custom-padding-padding-0">
                                  <div class="input-group margin-bottom-5" >
                                      <span class="input-group-btn">
                                          <button class="btn btn-sm default" type="button">
                                            Order Status
                                          </button>
                                      </span>
                                      <select name="order_status" id="order_status" class="form-control form-filter input-sm">
                                        <option value="">Select...</option>
                                        <option value="2">In Preparation</option>
                                        <option value="3">Out for delivery</option>
                                        <option value="4">Delivered</option>
                                        <option value="5">Cancelled</option>
                                      </select>
                                  </div>
                                </div>
								-->

                                <div class="col-md-3 col-sm-12 custom-padding-0" style="margin-bottom: 15px;">
                                  <button onclick="findorder();" class="btn btn-sm btn-success filter-submit"><i class="fa fa-search"></i> <?php echo $this->lang->line('Search');?></button>
                                  <button onclick="clearall();" class="btn btn-sm btn-default filter-cancel"><i class="fa fa-times"></i> <?php echo $this->lang->line('Reset');?></button>
                                  </div>
                                  <div class="clearfix"></div>
                              
                              <div class="clearfix"></div>

                              <div class="table-responsive" id="postList">
                                <?php $this->load->view('customer/order_list_ajax'); ?>

                                <div id="testPopupBottom" class="testPopupBottom"></div>
                              </div>
                              <!-- Modal -->
                              <div id="myModal" class="modal fade" role="dialog">
                                <div class="modal-dialog">

                                  <!-- Modal content-->
                                  <div class="modal-content">
                                    <div class="modal-header">
                                      <h4 class="modal-title"><b><?php echo $this->lang->line('Review_Rating');?></b></h4>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="modal-body">
                                      <div class="form-group col-md-12 custom-padding-0">
                                        <div><label class="ps_inform"><?php echo $this->lang->line('Rating');?></label></div>
                                        <label class="fontweightNone top5">
                                          <input name="" type="radio" class="minimal">
                                          1
                                        </label>&nbsp;&nbsp;&nbsp;
                                        <label class="fontweightNone">
                                          <input name="" type="radio" class="minimal">
                                          2
                                        </label>&nbsp;&nbsp;&nbsp;
                                        <label class="fontweightNone top5">
                                          <input name="" type="radio" class="minimal">
                                          3
                                        </label>&nbsp;&nbsp;&nbsp;
                                        <label class="fontweightNone top5">
                                          <input name="" type="radio" class="minimal">
                                          4
                                        </label>&nbsp;&nbsp;&nbsp;
                                        <label class="fontweightNone top5">
                                          <input name="" type="radio" class="minimal">
                                          5
                                        </label>
                                      </div>
                                      <div class="form-group col-md-12 custom-padding-0">
                                        <div><label class="ps_inform"><?php echo $this->lang->line('Message');?></label></div>
                                        <textarea class="fs_input" rows="3"></textarea>
                                      </div>
                                      <div class="form-group clearfix mb0">
                                          <div class="col-sm-12 text-left custom-padding-0">
                                            <button  type="button" class="btn btn-info Custom-btn "><?php echo $this->lang->line('Submit');?></button>
                                          </div>
                                      </div>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="modal-footer">
                                      <button type="button" class="btn btn-default" data-dismiss="modal"><?php echo $this->lang->line('Close');?></button>
                                    </div>
                                  </div>

                                </div>
                              </div>
                              
                          </div><!-- /.table-responsive -->
                      </div>
                  </div>
              </div>
            </div>
      <!-- ./tab section -->
  <div class="clearfix"></div>
  </section><!-- /.content -->
 </div><!-- /.content-wrapper -->

<select multiple id="waypoints" style="display:none;">
      <option selected value="43.653226, -79.383184"><?php echo $this->lang->line('Montreal');?></option>
</select>


<div style="display:none;" id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div style="display:none;" id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
<table border="1"><tr><td>
<div style="display:none;" id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</td></tr><tr><td>
<div style="display:none;" id="direction_details" style="margin:20px;"></div>
</td></tr><tr><td>
<div style="display:none;" id="side_bar" style="margin:20px;"></div>

<!-- <input name="current_latitude" id="current_latitude" value="32.926395" type="hidden">
<input name="current_longitude" id="current_longitude" value="-117.2079488" type="hidden"> -->


 <script type="text/javascript">
  function cancelOrder(orderid, status) {
    base_url='<?php echo base_url(); ?>';
    url= base_url+'dashboardcustomer/cancelOrder';
    $.ajax({
      url: url,
      method: 'POST',
      data: {orderid: orderid, status: status, csrf_token_apm: myCsrfHash},
      success: function(data) {
        if (data != '') {
          alert(data);
        }
        else {
          alert('<?php echo $this->lang->line('Refund_submitted');?>');
          window.location.href = '<?php echo base_url(); ?>customer/dashboard';
        }
        console.log(data);
      }
    })
  }
function view_order_details(orderid,e)
{

    var drawerTop = '0px';
    var documentHeight = 0;

    base_url='<?php echo base_url(); ?>';
    url= base_url+'dashboardcustomer/OrderDetails'
    //alert(url);
    $.ajax({
        method: "POST",
        url: url,
        data: { order_id: orderid, csrf_token_apm: myCsrfHash },
        beforeSend: function(){
            /*$('<?php echo $this->loading; ?>').show();*/
        },
        success: function(data){

             //alert(data);
             document.getElementById("testPopupBottom").innerHTML = data; 
            
            $('body').css('overflow', 'hidden');
            $("#testPopupBottom").animate({
                'top': 0
            }, 1000);
           

        }
    });
}


function view_track_order(orderid,e)
{
    var drawerTop = '0px';
    var documentHeight = 0;

    base_url='<?php echo base_url(); ?>';
    url= base_url+'dashboardcustomer/trackOrder'
    //alert(url);
    $.ajax({
        method: "POST",
        url: url,
        data: { order_id: orderid, csrf_token_apm: myCsrfHash },
        beforeSend: function(){
            /*$('<?php echo $this->loading; ?>').show();*/
        },
        success: function(data){

             //alert(data);
             document.getElementById("testPopupBottom").innerHTML = data; 
             initialize();
            
            $('body').css('overflow', 'hidden');
            $("#testPopupBottom").animate({
                'top': 0
            }, 1000);
           

        }
    });
}


function closeme()
{
    var documentHeight = 0;
     var drawerTop = '0px'; 
    documentHeight = $(document).height();
   
    $("#testPopupBottom").animate({'top': documentHeight},1000);
             $('body').css('overflow', 'auto'); 
}

function do_pdf(orderid){

   // window.location='<?php echo base_url(); ?>superadmin/order_PDF/'+orderid;

    window.open('<?php echo base_url(); ?>dashboardcustomer/order_PDF/'+orderid,'_blank');
}


function findorder()
{

var order_id = $('#order_id').val();
var order_date_from = $('#datepicker').val();
var order_date_to = $('#datepicker1').val();
var order_status = $('#order_status').val();
//alert(order_id);
  webroot = '<?php echo base_url(); ?>';
  url=webroot+'dashboardcustomer/ajaxPaginationDataOrder/';
  
    $.ajax({
      type: "post",
      url: url,
      cache: false,       
      data:{ order_id: order_id, order_date_from: order_date_from, order_date_to: order_date_to, order_status:order_status, csrf_token_apm: myCsrfHash },
      success: function(data){ 
        
        $('#postList').html(data);

      }
     });
} 

function clearall()
{
  $('#order_id').val('');
  $('#datepicker').val('');
  $('#datepicker1').val('');
  $('#order_status').val('');
  findorder();
}


 </script>


<script src="https://maps.googleapis.com/maps/api/js?key=<?=MAP_API_KEY?>">
    </script>
 <script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
      var gmarkers = [];
      var map = null;
      var startLocation = null;
      var endLocation = null;
      var directionsService = null;
      var waypts = null;
      var polyline = new google.maps.Polyline({
      path: [],
      strokeColor: '#FF0000',
      strokeWeight: 3
  });

  function initialize() {

    driverlatlon();
    directionsDisplay = new google.maps.DirectionsRenderer();
    var chicago = new google.maps.LatLng(32.926395, -117.207948);
    var myOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: chicago
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);
  google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });
    directionsDisplay.setMap(map);
    calcRoute();
  }
  function isEmpty(value)
  {
      value = $.trim(value);
      if(value.length > 0 && value != "undefined" && value != null && value != 0)
      {
        return true;
      }
      return false;
  }
  function calcRoute() {
    var order_latitude = $("#order_latitude").val();
    var order_longitude = $("#order_longitude").val();

    var restaurant_latitude = $("#restaurant_latitude").val();
    var restaurant_longitude = $("#restaurant_longitude").val();

    var current_latitude = $("#current_latitude").val();
    var current_longitude = $("#current_longitude").val();
    var WayPoints = [];
    if(isEmpty(current_latitude) && isEmpty(current_longitude))
    {
        WayPoints = [{location:new google.maps.LatLng(current_latitude,current_longitude),
            stopover:true}];
    }

  directionsService = new google.maps.DirectionsService(); 

    var request = {
        origin: new google.maps.LatLng(restaurant_latitude, restaurant_longitude),
        destination: new google.maps.LatLng(order_latitude, order_longitude),
        waypoints: WayPoints,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, RenderCustomDirections);
  }
function RenderCustomDirections(response, status) {
      console.log(response);
      if (status == google.maps.DirectionsStatus.OK) {
        waypts = [];
        var bounds = new google.maps.LatLngBounds();
        var route = response.routes[0];
        var summaryPanel = document.getElementById("directions_panel");
        var detailsPanel = document.getElementById("direction_details");
        startLocation = new Object();
        endLocation = new Object();

        summaryPanel.innerHTML = "";
        detailsPanel.innerHTML = '<ul>';

        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
          var routeSegment = i + 1;
          summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
          summaryPanel.innerHTML += route.legs[i].start_address + " to ";
          summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
          summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
        }
      var path = response.routes[0].overview_path;
      var legs = response.routes[0].legs;
// alert("processing "+legs.length+" legs");
        for (i=0;i<legs.length;i++) {
          if (i == 0) { 
            startLocation.latlng = legs[i].start_location;
            startLocation.address = legs[i].start_address;
            startLocation.marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green");
          } else { 
            waypts[i] = new Object();
            waypts[i].latlng = legs[i].start_location;
            waypts[i].address = legs[i].start_address;
            waypts[i].marker = createMarker(legs[i].start_location,"waypoint",legs[i].start_address,"yellow");
          }
          endLocation.latlng = legs[i].end_location;
          endLocation.address = legs[i].end_address;
          var steps = legs[i].steps;
// alert("processing "+steps.length+" steps");
          for (j=0;j<steps.length;j++) {
            var nextSegment = steps[j].path;
/*
            detailsPanel.innerHTML += "<li>"+steps[j].instructions;
            var dist_dur = "";
            if (steps[j].distance && steps[j].distance.text) dist_dur += "&nbsp;"+steps[j].distance.text;
            if (steps[j].duration && steps[j].duration.text) dist_dur += "&nbsp;"+steps[j].duration.text;
            if (dist_dur != "") {
              detailsPanel.innerHTML += "("+dist_dur+")<br /></li>";
            } else {
              detailsPanel.innerHTML += "</li>";

            }
*/
            for (k=0;k<nextSegment.length;k++) {
              polyline.getPath().push(nextSegment[k]);
              bounds.extend(nextSegment[k]);



            }
          }
        }

        detailsPanel.innerHTML += "</ul>"
        polyline.setMap(map);
        map.fitBounds(bounds);
        endLocation.marker = createMarker(endLocation.latlng,"end",endLocation.address,"red");
        // == create the initial sidebar ==
        makeSidebar();
                                                
      }
    //else alert(status);
      else alert('<?php echo $this->lang->line('unable_to_track_tight');?>');
    }

var icons = new Array();
icons["red"] = new google.maps.MarkerImage("mapIcons/marker_red.png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
function getMarkerImage(iconColor) {
   if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
      iconColor = "red"; 
   }
   if (!icons[iconColor]) {
      icons[iconColor] = new google.maps.MarkerImage("mapIcons/marker_"+ iconColor +".png",
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 6,20.
      new google.maps.Point(9, 34));
   } 
   return icons[iconColor];

}
  // Marker sizes are expressed as a Size of X,Y
  // where the origin of the image (0,0) is located
  // in the top left of the image.
 
  // Origins, anchor positions and coordinates of the marker
  // increase in the X direction to the right and in
  // the Y direction down.

  var iconImage = new google.maps.MarkerImage('mapIcons/marker_red.png',
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
      // Shapes define the clickable region of the icon.
      // The type defines an HTML &lt;area&gt; element 'poly' which
      // traces out a polygon as a series of X,Y points. The final
      // coordinate closes the poly by connecting to the first
      // coordinate.
  var iconShape = {
      coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
      type: 'poly'
  };
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
    
function createMarker(latlng, label, html, color) {
// alert("createMarker("+latlng+","+label+","+html+","+color+")");
    if(label=='start')
    {
      icon= 'https://www.qikorders.com/HalalCatering/assets/restaurant-pin.png';
    }

    if(label=='end')
    {
      icon= 'https://www.qikorders.com/HalalCatering/assets/home-pin.png';
    }

    if(label=='waypoint')
    {
      icon= 'https://www.qikorders.com/HalalCatering/assets/delivery-pin.png';
    }


    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        draggable: true, 
        map: map,
        shadow: iconShadow,
        icon: icon,
        shape: iconShape,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });
        marker.myname = label;
        gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    google.maps.event.addListener(marker, 'dragend', function() {
// alert("drag ended! start:"+startLocation.marker.getPosition()+" end:"+endLocation.marker.getPosition());
var request = { 
  origin: startLocation.marker.getPosition(), 
  destination: endLocation.marker.getPosition(), 
  travelMode: google.maps.DirectionsTravelMode.WALKING 
  }; 
startLocation.marker.setMap(null);
endLocation.marker.setMap(null);

gmarkers = [];
polyline.setMap(null);
polyline = new google.maps.Polyline({
    path: [],
    strokeColor: '#FF0000',
    strokeWeight: 3
  });
    directionsService.route(request, RenderCustomDirections);

        });
        
        return marker;
}
      function myclick(i) {
        google.maps.event.trigger(gmarkers[i],"click");
      }
      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
        }
        document.getElementById("side_bar").innerHTML = html;
      }
    //]]>



function driverlatlon() {
  setInterval(
    function() {
      webroot = '<?php echo base_url(); ?>';
      url=webroot+'dashboardcustomer/DriverData/';
      driver_id = $("#driver_id").val();
      $.ajax({
      type: "post",
      url: url,
      cache: false,       
      data:{ driver_id: driver_id, csrf_token_apm: myCsrfHash },
      success: function(data){ 

        //alert(data.current_latitude);
        //console.log(data.current_latitude);
        $("#current_latitude").val(data.current_latitude)
        $("#current_longitude").val(data.current_longitude)
        //initialize();
        //calcRoute();
        //alert(data);
            //summaryPanel = document.getElementById('waypoints');
            //summaryPanel.innerHTML = data;
            //initMap();
            //http://stackoverflow.com/questions/32624902/i-am-trying-to-refresh-the-marker-on-google-map-without-refreshing-the-whole-pag
      
             // var directionsService = new google.maps.DirectionsService;
              ///var directionsDisplay = new google.maps.DirectionsRenderer; 
             // calculateAndDisplayRoute(directionsService, directionsDisplay);

      }
     });  
      
    }, 3000);
}

</script>