@extends('sysadmin.layouts.app')
@section('post-header')
    <div class="breadcome-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="breadcome-list">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                                <div class="row">
                                <form method="POST" action="{{route('sysadmin.drivers.ordering.filter')}}" id="filter-form">
                                        {{ csrf_field() }}
                                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
                                        <select class="form-control mg-b-15" name="manuallyCreated">
                                            <option value="false">Manually Created</option>
                                            <option value="true" selected>Manually Created</option>
                                            <option value="false">No Manually Created </option>

                                        </select>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
                                        <select class="form-control mg-b-15" name="status">
                                            <option value="">Select Status</option>
                                            <option value="PENDING"  {{ isset($request) && $request->status  == 'PENDING' ? 'selected' : '' }}>PENDING</option>
                                            <option value="ACCEPTED" {{ isset($request) && $request->status  == 'ACCEPTED' ? 'selected' : '' }}>ACCEPTED</option>
                                            <option value="REJECTED" {{ isset($request) && $request->status  == 'REJECTED' ? 'selected' : '' }}>REJECTED</option>
                                            <option value="COOKED" {{ isset($request) && $request->status  == 'COOKED' ? 'selected' : '' }}>COOKED</option>
                                            <option value="ACCEPTED_TO_PICK_UP" {{ isset($request) && $request->status  == 'ACCEPTED_TO_PICK_UP' ? 'selected' : '' }}>ACCEPTED TO PICK UP</option>
                                            <option value="COLLECTED" {{ isset($request) && $request->status  == 'COLLECTED' ? 'selected' : '' }}>COLLECTED</option>
                                            <option value="DELIVERED" {{ isset($request) && $request->status  == 'DELIVERED' ? 'selected' : '' }}>DELIVERED</option>

                                        </select>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
                                        <select class="form-control mg-b-15" name="driver_id" id="driver_id">
                                            <option value="0">Select Driver</option>
                                            @foreach($drivers as $driver)
                                            <option value="{{$driver->id}}" {{ isset($request) && $request->driver_id  == $driver->id ? 'selected' : '' }}>{{$driver->name}} {{$driver->surname}}</option>
                                            @endforeach

                                        </select>
                                    </div>
                                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                                        {{--<div class="form-group data-custon-pick" id="data_1">--}}
                                            {{--<div class="input-group date">--}}
                                                {{--<span class="input-group-addon"><i class="fa fa-calendar"></i></span>--}}
                                                {{--<input type="text" class="form-control" placeholder="Date" name="date">--}}
                                            {{--</div>--}}
                                        {{--</div>--}}
                                        <div class="form-group data-custon-pick data-custom-mg" id="data_5">
                                            <div class="input-daterange input-group" id="datepicker">
                                                <input type="text" class="form-control" name="start" id="date-start" value="{{isset($request) && isset($request->start)  ?  $request->start : now()->format('m/d/Y')}}" />
                                                <span class="input-group-addon">to</span>
                                                <input type="text" class="form-control" name="end" id="date-end" value="{{isset($request) && isset($request->end) ?  $request->end : date("m/d/Y", strtotime('tomorrow'))}}" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
                                        <select class="form-control mg-b-15" name="lastLocation" id="lastLocation">
                                            <option value="-1">Select Location</option>
                                            <option value="1" {{ isset($request) && $request->lastLocation  == 1 ? 'selected' : '' }} >Last Location</option>
                                            <option value="0" {{ isset($request) && $request->lastLocation  == 0 ? 'selected' : '' }}>All Locations </option>

                                        </select>
                                    </div>
                                    <div class="col-lg-1 col-md-1 col-sm-3 col-xs-3">
                                        <button type="submit" class="btn btn-default">Filter</button>
                                    </div>
                                </form>
                                </div>
                                <div class="row">
                                    <div class="col-lg-1 col-md-1 col-sm-3 col-xs-3 col-md-offset-11">
                                        <button class="btn btn-primary"  id="order-detail-btn">Details </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('custom-css')
    <style>
        #map {
            height: 680px;
            margin: 0;
            padding: 0
        }
    </style>
@endsection

@section('content')
<div class="advanced-form-area mg-b-15">
  <div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">

            <div class="courses-inner res-mg-b-30 order-list">
            @if(count($orders) !=0)
            @foreach($orders as $key =>$order)
               <div class="single-order">
                <div class="courses-title">
                    <h2>{{$order->orderID}}. {{$order->restaurantName}}</h2>
                </div>
                {{--<div class="courses-alaltic">--}}
                    {{--<span class="cr-ic-r"><span class="course-icon"><i class="fa fa-clock"></i></span> 1 Year</span>--}}
                    {{--<span class="cr-ic-r"><span class="course-icon"><i class="fa fa-heart"></i></span> 50</span>--}}
                    {{--<span class="cr-ic-r"><span class="course-icon"><i class="fa fa-dollar"></i></span> 500</span>--}}
                {{--</div>--}}
                <div class="course-des">
                    <p><span><i class="fa fa-clock"></i></span>@if($order->courierUser->transportType == 0) <i class="fa fa-bicycle theme-color"></i> Bicycle @elseif ($order->courierUser->transportType == 1) <i class="fa fa-motorcycle theme-color"></i> Motocycle @else <i class="fa fa-car theme-color"></i> Auto @endif </p>
                    <p><span><i class="fa fa-clock"></i></span> <b>Courier Name: </b>{{$order->courierUser->name}}</p>
                    <p><span><i class="fa fa-clock"></i></span> <b>Status: </b><label class="btn btn-{{orderStatus($order->status)}} btn-xs"> {{$order->status}}</label></p>
                    <p><span><i class="fa fa-clock"></i></span> <b>Date: </b> {{$order->date}}</p>
                    {{--<p><i class="fa fa-map theme-color"></i> <b>Address: </b> </p>--}}
                    <p><i class="fa fa-box theme-color"></i> <b>Total Order: </b> {{$order->total}} L</p>
                    <p><i class="fa fa-box theme-color"></i> <b>Transport Cost: </b> {{$order->transportCost}} L</p>

                    <p><i class="fa fa-map theme-color"></i> <b>Address: </b> {{$order->address}}</p>
                    <input type="hidden" id="start" value="{{$order->latitude}}">
                    <input type="hidden" id="end" value="{{$order->longitude}}">
                    <input type="hidden" id="render" value="{{$order->orderID}}">
                    <input type="hidden" id="status" value="{{$order->status}}">
                    <input type="hidden" id="restName" value="{{$order->restaurantName}}">
                    <input type="hidden" id="transportCost" value="{{$order->transportCost}}">
                    <input type="hidden" id="totalVal" value="{{$order->total}}">
                  {{--<input type="hidden" id="end1" value="">--}}
                </div>
               </div>
            <hr>
            @endforeach
            @else
                    <h5>No orders found from this request! Try again...</h5>
            @endif
            </div>
        </div>
        <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
            <div id="map"></div>
        </div>
    </div>
  </div>
</div>
    <!-- Information Modal -->
    <div id="InformationproModalhdbgcl" class="modal modal-edu-general fullwidth-popup-InformationproModal fade" role="dialog">
        <div class="modal-dialog custom-modal-dialog">
            <div class="modal-content">
                <div class="modal-header header-color-modal bg-color-6">
                    <h4 class="modal-title"> <span class="educate-icon educate-info modal-check-pro information-icon-pro"> </span>
                        Order <span id="o-id"></span> - <span class="o-status"></span>
                    </h4>
                    <div class="modal-close-area modal-close-df">
                        <a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
                    </div>
                </div>
                {{--<div class="modal-body">--}}
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="sparkline10-list mt-b-30">
                                <div class="sparkline10-graph">
                                    <div class="static-table-list">
                                        <table class="table border-table">
                                            <input type="hidden" id="order-id">
                                            <thead style="background-color: #edf5fb;">
                                            <tr>
                                                <th colspan="2">PICKUP : BUSINESS DETAILS</th>
                                                <th  colspan="2">DELIVERY : CUSTOMER DETAILS</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td><img id="r-logo" src="" alt="restPhoto" width="25" height="25"></td>
                                                <td id="r-name"></td>
                                                <td><i class="fa fa-envelope"></i></td>
                                                <td id="c-name">Customer</td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-phone"></i></td>
                                                <td id="r-phone"></td>
                                                <td><i class="fa fa-phone"></i></td>
                                                <td id="c-phone"></td>
                                            </tr>
                                            <tr>
                                                <td><i class="fa fa-map-marker" aria-hidden="true"></i></td>
                                                <td id="r-address"></td>

                                                <td ><button class="btn btn-success" type="button" data-toggle="modal" data-target="#add-address-modal"><i class="fa fa-edit"></i></button></td>
                                                <td id="c-address">
                                                    <select class="form-control mg-b-15"  name="address" id="my-select">
                                                        <option  id="user-location" data-lat="" data-lng=""></option>
                                                    </select>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="sparkline10-list mt-b-30">
                            <div class="sparkline10-graph">
                                <div class="static-table-list">
                                    <table class="table border-table" >
                                        <thead style="background-color: #edf5fb;">
                                        <tr>
                                            <th >Produkti </th>
                                            <th >Pershkrimi </th>
                                            <th >Cmimi </th>
                                            <th >Sasia </th>
                                        </tr>
                                        </thead>
                                        <tbody class="items-body">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="sparkline10-list mt-b-30">
                                <div class="sparkline10-graph">
                                    <div class="static-table-list">
                                        <table class="table border-table">
                                            <input type="hidden" id="order-id">
                                            <thead style="background-color: #edf5fb;">
                                            <tr>
                                                <th colspan="4">Order Detail</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td colspan="3">Subtotal</td>
                                                <td id="subtotal"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="3">Total</td>
                                                <td id="total"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="3">Delivery Fee</td>
                                                <td id="del-fee"></td>
                                            </tr>
                                            <tr>
                                                <td colspan="3">Status</td>
                                                <td class="o-status"></td>

                                            </tr>
                                            <tr>
                                                <td colspan="3">Date</td>

                                                <td id="o-date"></td>

                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                {{--</div>--}}
                <div class="modal-footer ">
                    <a data-dismiss="modal" href="#">OK</a>

                </div>
            </div>
        </div>
    </div>

    <!-- add address modal content -->
    <div id="add-address-modal" class="modal modal-edu-general fullwidth-popup-InformationproModal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header header-color-modal bg-color-6">
                    <h4 class="modal-title">Shto nje adrese tjeter</h4>
                    <div class="modal-close-area modal-close-df">
                        <a class="close" data-dismiss="modal" href="#"><i class="fa fa-close"></i></a>
                    </div>
                </div>
                <form>
                    <div class="modal-body">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <div class="col-md-12">
                                <input  id="autocomplete"  onFocus="geolocate()" type="text" class="form-control"  placeholder="Kerko adresen tende ketu:">
                                <div id="address-book-map">
                                </div>
                            </div>
                        </div>
                        <div class="form-group{{ $errors->has('addressStreet') ? ' has-error' : '' }}">
                            <div class="col-md-12">
                                <label for="addressStreet" class="control-label">Adresa</label>
                                <input  id="route"  type="text" class="form-control" name="addressStreet" value="" placeholder="Adresa" required>


                            </div>
                            <div class="col-md-12 " aria-hidden="true">
                                <label for="name" class="control-label"> Detajet e Adreses</label>
                                <input type="text" class="form-control" name="addressDetails" placeholder="Vendosni detajet e adreses" id="add-user-add-detail">
                            </div>
                        </div>


                        <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                            <div class="col-md-12">
                                <label for="name" class="control-label">Qyteti</label>
                                <input id="locality" type="text" class="form-control" name="city" value="Tirane" placeholder="Qyteti" >

                                @if ($errors->has('city'))
                                    <span class="help-block">
                                    <strong>{{ $errors->first('city') }}</strong>
                                </span>
                                @endif
                            </div>
                        </div>

                        <input type="hidden" name="latitude" id="add-lat" value="">
                        <input type="hidden" name="longitude" id="add-lng" value="">
                        <input type="hidden" name="user_id" id="add-user-id" value="">

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal" id="modal-save-add">OK</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /.modal -->

@endsection
@section('custom-js')
    <script>
        var loc ='{!! json_encode($couriers) !!}';
        var locs = JSON.parse(loc);

        var restaurants ='{!! json_encode($restaurantsWithCourier) !!} ';
        //console.log(restaurants);
        var rest = JSON.parse(restaurants);
        var cookedOrders ='{!! json_encode($generalCookedOrders) !!}';
        var cooked = JSON.parse(cookedOrders);

        var iconBase = '{{asset('admin/img/')}}';

        function initMap() {

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

            var markers = [], i;
            var orderMarkers = [];
            var restaurantMarkers = [];
            var markersBusy = [];
            var busyLocations = [];
            var freeLocations = [];
            let acceptedToPickUp = [];
            let collected = [];

            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 14,
                center: {lat: 41.3275, lng:19.8187},
            });

            directionsDisplay.setMap(map);

            for (i = 0; i < locs.length; i++) {

                if(locs[i].ordersByStatus){
                    if(locs[i].ordersByStatus.ACCEPTED_TO_PICK_UP || locs[i].ordersByStatus.COLLECTED){
                    busyLocations.push(locs[i]);
                    }
                    else {
                        //do nothing
                    }
                }
                else {
                    freeLocations.push(locs[i]);
                }

            }

            //is bussy
            var markerBusy;
            for (var bi = 0; bi < busyLocations.length; bi++){
                markerBusy = new google.maps.Marker({
                    position: new google.maps.LatLng(busyLocations[bi].latitude, busyLocations[bi].longitude),
                    icon: iconBase + '/red.png',
                    map: map
                });
                markerBusy.setMap(map);
                markersBusy.push(markerBusy);

                if (busyLocations[bi].ordersByStatus.ACCEPTED_TO_PICK_UP){
                    acceptedToPickUp.push(
                        {
                            ACCEPTED_TO_PICK_UP: busyLocations[bi].ordersByStatus.ACCEPTED_TO_PICK_UP,
                        }
                    );
                }
                else {
                    acceptedToPickUp.push(
                        {
                            ACCEPTED_TO_PICK_UP: 0,
                        }
                    );
                }
                if (busyLocations[bi].ordersByStatus.COLLECTED){
                    collected.push(
                        {
                            COLLECTED: busyLocations[bi].ordersByStatus.COLLECTED
                        }
                    );
                }
                else {
                    collected.push(
                        {
                            COLLECTED: 0
                        }
                    );
                }

                google.maps.event.addListener(markerBusy, 'mouseover', (function(markerBusy, bi) {
                    return function() {
                        infowindow.setContent('<b>'+busyLocations[bi].courier.name + ' ' +busyLocations[bi].courier.surname+ '</b>'+'<br>'+'<label class="label label-info" style="margin-bottom: 20px;">ACCEPTED TO PICK UP: <span class="badge" style="background-color: #ff1149;!important;">'+ acceptedToPickUp[0]['ACCEPTED_TO_PICK_UP']+'</span>  </label> <br>'+'<label class="label label-warning">COLLECTED: <span class="badge" style="background-color: #ff1149;!important;">'+ collected[0]['COLLECTED']+'</span> </label> ');
                        infowindow.open(map, markerBusy);
                    }
                })(markerBusy, bi));

                //Filter by Courier
                google.maps.event.addListener(markerBusy, 'click', (function(markerBusy, bi) {
                    return function() {
                        filterMarker(busyLocations[bi].courier.id);
                    }
                })(markerBusy, bi));
            }

            for (var fi = 0; fi < freeLocations.length; fi++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(freeLocations[fi].latitude, freeLocations[fi].longitude),
                    icon: iconBase + '/blue.png',
                    map: map
                });
                marker.setMap(map);
                markers.push(marker);

                google.maps.event.addListener(marker, 'mouseover', (function (marker, fi) {
                    return function () {
                        infowindow.setContent('<b>' + freeLocations[fi].courier.name + ' ' + freeLocations[fi].courier.surname + '</b>');
                        infowindow.open(map, marker);
                    }
                })(marker, fi));

                //Filter by Courier
                google.maps.event.addListener(marker, 'click', (function(marker, fi) {
                    return function() {
                        filterMarker(freeLocations[fi].courier.id);
                    }
                })(marker, fi));
            }


            // Restaurants Pointers
            for (  i=0; i < rest.length ; i++){

                    var marker2 = new google.maps.Marker({
                        position: new google.maps.LatLng(rest[i].latitude, rest[i].longitude),
                        icon: iconBase + '/pin.png',
                        map: map
                    });
                    marker2.setMap(map);
                    restaurantMarkers.push(marker2);

                    google.maps.event.addListener(marker2, 'mouseover', (function (marker2, i) {
                        return function () {
                            infowindow.setContent('<b>'+rest[i].restaurantName + '</b>' );
                            infowindow.open(map, marker2);
                        }
                    })(marker2, i));

            }
           // Accepted Pointers
            for (  i=0; i < cooked.length ; i++){

                    var marker3 = new google.maps.Marker({
                        position: new google.maps.LatLng(cooked[i].latitude, cooked[i].longitude),
                        icon: iconBase + '/pin2.png',
                        map: map
                    });

                    marker3.setMap(map);
                    orderMarkers.push(marker3);
                    google.maps.event.addListener(marker3, 'mouseover', (function (marker3, i) {
                        return function () {
                            infowindow3.setContent('<b>'+cooked[i].restaurantName + '</b>'
                                +'<br>'+
                                '<label class="" style="margin-bottom: 0px;">Total: <span class="badge" style="background-color: #ff1149;!important;">'+ cooked[i].total +' L </span> </label> <br>'+
                                '<label class="" style="margin-bottom: 0px;"> Transport Cost: <span class="badge" style="background-color: #5ac0de;!important;">'+ cooked[i].transportCost +' L </span></label>' );
                            infowindow3.open(map, marker3);
                        }
                    })(marker3, i));
            }


            $(".order-list").each(function() {

                $(this).on('click',".single-order",function () {
                    //console.log('testss23');
                    var lat1= $(this).find("#start").val();
                    var lng1= $(this).find("#end").val();
                    var status= $(this).find("#status").val();
                    var cost= $(this).find("#transportCost").val();
                    var name= $(this).find("#restName").val();
                    var total= $(this).find("#totalVal").val();

                    //calculateAndDisplayRoute(directionsService, directionsDisplay,origin);
                    //var coords = origin.split(",");
                    if(status == 'ACCEPTED') {
                        var mylatLng = new google.maps.LatLng(lat1, lng1);
                        //console.log(coords[0]);
                        var markerOrder = new google.maps.Marker({
                            position: mylatLng,
                            icon: iconBase + '/pin2.png',
                            map: map
                        });

                        //map.setCenter(mylatLng);

                        var infowindowOrder = new google.maps.InfoWindow({
                            content: '<b>' + name + '</b>'
                            + '<br>' +
                            '<label class="" style="margin-bottom: 0px;">Total: <span class="badge" style="background-color: #ff1149;!important;">' + total + ' L </span> </label> <br>' +
                            '<label class="" style="margin-bottom: 0px;"> Transport Cost: <span class="badge" style="background-color: #5ac0de;!important;">' + cost + ' L </span></label>'
                        });

                        infowindowOrder.open(map, markerOrder);
                        //map.setZoom(18);
                        markerOrder.addListener('mouseover', function () {
                            infowindowOrder.open(map, this);
                        });
                    }

                    $('#order-detail-btn').show();
                    var current_id = $(this).find("#render").val();
                    $('#order-id').val(current_id);
                });
            });
            // Sets the map on all markers in the array.
            function setMapOnAllMarkers(map) {
                for (var i = 0; i < markers.length; i++) {
                    markers[i].setMap(map);
                }
            }
            function setMapOnAllMarkersBusy(map) {
                for (var i = 0; i < markersBusy.length; i++) {
                    markersBusy[i].setMap(map);
                }
            }

            function setMapOnAllMarkersCooked(map) {
                for (var i = 0; i < orderMarkers.length; i++) {
                    orderMarkers[i].setMap(map);
                }
            }

            function setMapOnAllMarkersRestaurants(map) {
                for (var i = 0; i < restaurantMarkers.length; i++) {
                    restaurantMarkers[i].setMap(map);
                }
            }

//            setInterval(function() {
//
//                    var id =  0;
//                    $('#driver_id').val(id);
//                    $('#lastLocation').val(1);
//                    $('#lastLocation').attr('selected','selected');
//                    var newLocations;
//                    var newCooked;
//                    var newRest;
//                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
//
//                    $.ajax({
//                        url: '/systemadmin/drivers/ordering/filter',
//                        type: 'POST',
//                        data: {_token: CSRF_TOKEN, driver_id:id, start:$('#date-start').val(),end: $('#date-end').val(),lastLocation:1},
//                        dataType: 'JSON',
//                        success: function (data) {
//                            var newMarker;
//                            var newMarkerBusy;
//                            var newMarker3;
//                            var newBusyLocations = [];
//                            var newFreeLocations = [];
//                            newLocations = data.couriers;
//                            newCooked = data.cookedOrders;
//                            newRest = data.restaurantsWithCourier;
//                            $( ".order-list" ).empty();
//
//                            if(data.orders != ''){
//
//                                data.orders.forEach(function(val){
//
//                                    $( ".order-list" ).append(appendOrders(val));
//
//                                });
//                            }
//                            else {
//                                $( ".order-list" ).append($('<h5 > No orders found for this courier!</h5>'));
//                            }
//
//
//                            for (i = 0; i < newLocations.length; i++) {
//                                let acceptedToPickUp = [];
//                                let collected = [];
//                                if(newLocations[i].ordersByStatus){
//                                    if(newLocations[i].ordersByStatus.ACCEPTED_TO_PICK_UP || newLocations[i].ordersByStatus.COLLECTED){
//                                        newBusyLocations.push(newLocations[i]);
//                                    }
//                                    else {
//                                        //do nothing
//                                    }
//                                }
//                                else {
//                                    newFreeLocations.push(newLocations[i]);
//                                }
//
//                            }
//                            if(newBusyLocations.length ===0){
//                                for (var llbf = 0; llbf < markersBusy.length; llbf++) {
//                                    markersBusy[llbf].setMap(null);
//                                }
//                                markersBusy = [];
//                            }
//                            else {
//                                //is bussy
//                                for (var bi = 0; bi < newBusyLocations.length; bi++) {
//                                    for (var llbf = 0; llbf < markersBusy.length; llbf++) {
//                                        markersBusy[llbf].setMap(null);
//                                    }
//                                    markersBusy = [];
//                                    for (var jjb = 0; jjb < newBusyLocations.length; jjb++) {
//                                        var newMarkerBusy = new google.maps.Marker({
//                                            position: new google.maps.LatLng(newBusyLocations[jjb].latitude, newBusyLocations[jjb].longitude),
//                                            icon: iconBase + '/red.png',
//                                            map: map
//                                        });
//                                        newMarkerBusy.setMap(map);
//                                        markersBusy.push(newMarkerBusy);
//
//                                        if (newBusyLocations[jjb].ordersByStatus.ACCEPTED_TO_PICK_UP) {
//                                            acceptedToPickUp.push(
//                                                {
//                                                    ACCEPTED_TO_PICK_UP: newBusyLocations[jjb].ordersByStatus.ACCEPTED_TO_PICK_UP,
//                                                }
//                                            );
//                                        }
//                                        else {
//                                            acceptedToPickUp.push(
//                                                {
//                                                    ACCEPTED_TO_PICK_UP: 0,
//                                                }
//                                            );
//                                        }
//                                        if (newBusyLocations[jjb].ordersByStatus.COLLECTED) {
//                                            collected.push(
//                                                {
//                                                    COLLECTED: newBusyLocations[jjb].ordersByStatus.COLLECTED
//                                                }
//                                            );
//                                        }
//                                        else {
//                                            collected.push(
//                                                {
//                                                    COLLECTED: 0
//                                                }
//                                            );
//                                        }
//
//                                        google.maps.event.addListener(newMarkerBusy, 'mouseover', (function (newMarkerBusy, jjb) {
//                                            return function () {
//                                                infowindow.setContent('<b>' + newBusyLocations[jjb].courier.name + ' ' + newBusyLocations[jjb].courier.surname + '</b>' + '<br>' + '<label class="label label-info" style="margin-bottom: 20px;">ACCEPTED TO PICK UP: <span class="badge" style="background-color: #ff1149;!important;">' + acceptedToPickUp[0]['ACCEPTED_TO_PICK_UP'] + '</span>  </label> <br>' + '<label class="label label-warning">COLLECTED: <span class="badge" style="background-color: #ff1149;!important;">' + collected[0]['COLLECTED'] + '</span> </label> ');
//                                                infowindow.open(map, newMarkerBusy);
//                                            }
//                                        })(newMarkerBusy, jjb));
//
//                                        //Filter by Courier
//                                        google.maps.event.addListener(newMarkerBusy, 'click', (function (newMarkerBusy, jjb) {
//                                            return function () {
//                                                filterMarker(newBusyLocations[jjb].courier.id);
//                                            }
//                                        })(newMarkerBusy, jjb));
//                                    }
//                                }
//                            }
//
//                            if(newFreeLocations.length ===0){
//                                for (var llf = 0; llf < markers.length; llf++) {
//                                    markers[llf].setMap(null);
//                                }
//                                markers = [];
//                            }
//                            else {
//
//                                for (var fi = 0; fi < newFreeLocations.length; fi++) {
//                                    for (var llf = 0; llf < markers.length; llf++) {
//                                        markers[llf].setMap(null);
//                                    }
//                                    markers = [];
//                                    for (var jj = 0; jj < newFreeLocations.length; jj++) {
//                                        var newMarker = new google.maps.Marker({
//                                            position: new google.maps.LatLng(newFreeLocations[jj].latitude, newFreeLocations[jj].longitude),
//                                            icon: iconBase + '/blue.png',
//                                            map: map
//                                        });
//                                        newMarker.setMap(map);
//                                        markers.push(newMarker);
//
//                                        google.maps.event.addListener(newMarker, 'mouseover', (function (newMarker, jj) {
//                                            return function () {
//                                                infowindow.setContent('<b>' + newFreeLocations[jj].courier.name + ' ' + newFreeLocations[jj].courier.surname + '</b>');
//                                                infowindow.open(map, newMarker);
//                                            }
//                                        })(newMarker, jj));
//
//                                        //Filter by Courier
//                                        google.maps.event.addListener(newMarker, 'click', (function (newMarker, jj) {
//                                            return function () {
//                                                filterMarker(newFreeLocations[jj].courier.id);
//                                            }
//                                        })(newMarker, jj));
//                                    }
//                                }
//                            }
//
//                            // Restaurants Pointers
//                            if(newRest.length ===0){
//                                for (var lll = 0; lll < restaurantMarkers.length; lll++) {
//                                    restaurantMarkers[lll].setMap(null);
//                                }
//                                restaurantMarkers = [];
//                            }
//                            else {
//                            for (  i=0; i < newRest.length ; i++){
//                                for (var lll = 0; lll < restaurantMarkers.length; lll++) {
//                                    restaurantMarkers[lll].setMap(null);
//                                }
//                                restaurantMarkers = [];
//                                for(var kki=0;kki < newRest.length ; kki++) {
//
//                                    var newMarker2 = new google.maps.Marker({
//                                        position: new google.maps.LatLng(newRest[kki].latitude, newRest[kki].longitude),
//                                        icon: iconBase + '/pin.png',
//                                        map: map
//                                    });
//
//                                    newMarker2.setMap(map);
//                                    restaurantMarkers.push(newMarker2);
//                                    google.maps.event.addListener(newMarker2, 'mouseover', (function (newMarker2, kki) {
//                                        return function () {
//                                            infowindow.setContent('<b>' + newRest[kki].restaurantName + '</b>');
//                                            infowindow.open(map, newMarker2);
//                                        }
//                                    })(newMarker2, kki));
//                                }
//
//                            }
//                            }
//
//                            // Accepted Pointers
//                            if(newCooked.length ===0){
//                                for (var ll = 0; ll < orderMarkers.length; ll++) {
//                                    orderMarkers[ll].setMap(null);
//                                }
//                                orderMarkers = [];
//                            }
//                            else {
//                                for ( var k=0; k < newCooked.length ; k++){
//
//
//                                    for (var ll = 0; ll < orderMarkers.length; ll++) {
//                                        orderMarkers[ll].setMap(null);
//                                    }
//                                    orderMarkers = [];
//                                    for(var ki=0;ki < newCooked.length ; ki++) {
//
//
//                                        newMarker3 = new google.maps.Marker({
//                                            position: new google.maps.LatLng(newCooked[ki].latitude, newCooked[ki].longitude),
//                                            icon: iconBase + '/pin2.png',
//                                            map: map
//                                        });
//
//                                        orderMarkers.push(newMarker3);
//                                        newMarker3.setMap(map);
//                                        google.maps.event.addListener(newMarker3, 'mouseover', (function (newMarker3, ki) {
//                                            return function () {
//                                                infowindow.setContent('<b>' + newCooked[ki].restaurantName + '</b>'
//                                                    + '<br>' +
//                                                    '<label class="" style="margin-bottom: 0px;">Total: <span class="badge" style="background-color: #ff1149;!important;">' + newCooked[ki].total + ' L </span> </label> <br>' +
//                                                    '<label class="" style="margin-bottom: 0px;"> Transport Cost: <span class="badge" style="background-color: #5ac0de;!important;">' + newCooked[ki].transportCost + ' L </span></label>');
//                                                infowindow.open(map, newMarker3);
//                                            }
//                                        })(newMarker3, ki));
//                                    }
//
//                                }
//                            }
//
//                        }
//                    });
//                    map.setOptions({
//                        styles: [{
//                            "featureType": "road",
//                            "elementType": "geometry.fill",
//                            "stylers": [{
//                                "saturation": Math.random()
//                            }]
//                        }]
//                    })
//                },
//                10000 //reload tiles  every 30 sec
//            );

        }

        function calculateAndDisplayRoute(directionsService, directionsDisplay,origin) {
            directionsService.route({
                origin: origin,
                destination: "41.32807524946767,19.811065136931347",
                travelMode: 'DRIVING'
            }, function(response, status) {
                // console.log(directionsService.route());
                if (status === 'OK') {
                    directionsDisplay.setDirections(response);
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });
        }

        $('#order-detail-btn').on('click', function () {
            var id = $('#order-id').val();
            getDetails(id);

        });

        function getDetails(id){
            $.ajax({
                url: `/systemadmin/drivers/ordering/${id}`,
                type: 'GET',
                success: function(response){
                    console.log(response);
                    fillModal(response);
                    $('#InformationproModalhdbgcl').modal('show');
                }
            });
        }

        function fillModal(response){

            $('.items-body').empty();
            $('.o-status').empty();
            //console.log(response.order.customer['phone']);
            //console.log(response[0].address);
            $('#o-id').text(response[0].orderID);
            $('#r-name').text(response[0].restaurantName);
           // $('#c-address').text(response[0].address);

            $('#c-phone').text(response[0].customer.phone);
            $('#r-phone').text(response[0].restaurant.posNumber);
            $('#del-fee').text(response[0].transportCost  + 'L');
            $('#subtotal').text(response[0].totalNet  + 'L');
            $('#total').text(response[0].total + 'L');
            $('#o-date').text(response[0].date);
//            $('.o-status').text(response[0].status);
            $('#r-logo').attr('src',response[0].restaurant.logo);

            if(response[0].status == 'PENDING'){

                $('.o-status').append( '<span class="label label-warning">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'REJECTED'){

                $('.o-status').append( '<span class="label label-danger">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'ACCEPTED'){

                $('.o-status').append( '<span class="label label-success">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'COLLECTED'){

                $('.o-status').append( '<span class="label label-primary">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'ACCEPTED_TO_PICK_UP'){

                $('.o-status').append( '<span class="label label-info">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'COOKED'){

                $('.o-status').append( '<span class="label label-info">'+ response[0].status+'</span>' );
            }
            else if(response[0].status == 'DELIVERED'){

                $('.o-status').append( '<span class="label label-primary">'+ response[0].status+'</span>' );
            }

            if(response[0].items){
                for(var i= 0; i < response[0].items.length; i++ ){
                    $('.items-body').append(createItemBody(response[0].items[i]));
                }
            }
            console.log(response[0].customer.id);
            $.ajax({
                url: '/systemadmin/orders/get-addresses/' + response[0].customer.id,
                type: 'GET',
                success: function (data) {
                    console.log(data.data);
                    var add = data.data;

                    for (var i = 0; i < add.length; i++) {
                        if(response[0].customerAddress.id == add[i].id ){
                            var option_selected = '<option selected value="' + add[i].id + '" data-lat="' + add[i].latitude + '" data-lng="' + add[i].longitude + '">' + add[i].addressStreet + '</option>';
                            $('#my-select').append(option_selected);
//
                        }

                        var option = '<option value="' + add[i].id + '" data-lat="' + add[i].latitude + '" data-lng="' + add[i].longitude + '">' + add[i].addressStreet + '</option>';
                        $('#my-select').append(option);
                    }
                }
            });

        }
        function createItemBody(items){

            var tr = $('<tr></tr>');
            tr.append('<td>'+ items.itemName +'</td>');
            tr.append('<td>'+ items.itemDescription +'</td>');
            tr.append('<td>'+ items.itemPrice +' Leke</td>');
            tr.append('<td>'+ items.quantity +'</td>');
            return tr;
        }

        function filterMarker(id){

            $('#driver_id').val(id);
            $('#lastLocation').val(1);
            $('#lastLocation').attr('selected','selected');

            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');

            $.ajax({
                url: '/systemadmin/drivers/ordering/filter',
                type: 'POST',
                data: {_token: CSRF_TOKEN, driver_id:id, start:$('#date-start').val(),end: $('#date-end').val(),lastLocation:1},
                dataType: 'JSON',
                success: function (data) {
                    console.log(data.orders);
                    locs = data.couriers;
                    cooked = data.cookedOrders;
                    rest = data.restaurantsWithCourier;

                    $( ".order-list" ).empty();

                    if(data.orders != ''){

                        data.orders.forEach(function(val){

                            $( ".order-list" ).append(appendOrders(val));

                        });
                    }
                    else {
                        $( ".order-list" ).append($('<h5 > No orders found for this courier!</h5>'));
                    }

                    initMap();
                }
            });

        }

        function appendOrders(orders){

            var single_order = $('<div class="single-order"></div>');
            var single_order_title = $(`<div class="courses-title">` +
                `                    <h2>${orders.orderID} ${'. '}  ${orders.restaurantName} </h2>` +
                `                </div>`);
            var cours_desc = $(`<div class="course-des"></div>`);
            var drivers_type = $(`<p><span><i class="fa fa-clock"></i></span>  <i class="fa fa-motorcycle theme-color"></i> Motocycle </p>`);
            var status= $(`<p><span><i class="fa fa-clock"></i></span> <b>Status: </b><label class="btn btn-`+setStatus(orders.status) +` btn-xs"> ${orders.status}</label></p>`);
            var courier_name= $(`<p><span><i class="fa fa-clock"></i></span> <b>Courier Name: </b> ${orders.courierUser.name}</p>`);
            var date= $(`<p><span><i class="fa fa-clock"></i></span> <b>Date: </b> ${orders.date}</p>`);
            var total= $(`<p><i class="fa fa-box theme-color"></i> <b>Total Order: </b> ${orders.total} L</p>`);
            var transportCost= $(`<p><i class="fa fa-box theme-color"></i> <b>Transport Cost: </b> ${orders.transportCost}</p>`);
            var address= $(`<p><span><i class="fa fa-map theme-color"></i></span> <b>Address: </b> ${orders.address}</p>`);
            var start_hidden = $(`<input type="hidden" id="start" value="${orders.latitude}">`);
            var end_hidden = $(`<input type="hidden" id="end" value="${orders.longitude}">`);
            var render_hidden=$(`<input type="hidden" id="render" value="${orders.orderID}" >`);
            var status_hidden=$(`<input type="hidden" id="status" value="${orders.status}">`);
            var name_hidden=$(`<input type="hidden" id="restName" value="${orders.restaurantName}">`);
            var cost_hidden=$(`<input type="hidden" id="transportCost" value="${orders.transportCost}">`);
            var tot_hidden=$(`<input type="hidden" id="totalVal" value="${orders.total}">`);

            cours_desc.append(drivers_type);
            cours_desc.append(courier_name);
            cours_desc.append(status);
            cours_desc.append(date);
            cours_desc.append(total);
            cours_desc.append(transportCost);
            cours_desc.append(address);
            cours_desc.append(start_hidden);
            cours_desc.append(end_hidden);
            cours_desc.append(render_hidden);
            cours_desc.append(status_hidden);
            cours_desc.append(name_hidden);
            cours_desc.append(cost_hidden);
            cours_desc.append(tot_hidden);
            single_order.append(single_order_title);
            single_order.append(cours_desc);
            return  single_order;
        }

        function setStatus(statusName){
            switch (statusName){
                case 'PENDING':
                    $status = 'primary';
                    break;
                case 'ACCEPTED':
                    $status = 'default';
                    break;
                case 'REJECTED':
                    $status = 'danger';
                    break;
                case 'COOKED':
                    $status = 'info';
                    break;
                case 'ACCEPTED_TO_PICK_UP':
                    $status = 'info';
                    break;
                case 'COLLECTED':
                    $status = 'warning';
                    break;
                case 'DELIVERED':
                    $status = 'success';
                    break;
                default:
                    $status = 'success';
            }
            return $status;
        }

    </script>
    <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnjW0QhunXNigl292kadQ-7qLaPiY28QE&callback=initMap">
    </script>

@endsection