@extends('layouts.main')
@push('styles')
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<link href='{{asset('css/redtrack-suburb-search.css')}}' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-datetimepicker.min.css')}}">
<!-- BEGIN DataTables-->
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
<!-- END DataTables-->
<style>
.info { 
    padding: 6px 8px; 
    text-align: center; 
    font: 36px Arial, Helvetica, sans-serif; 
    background: white; 
    background: rgba(255,255,255,0.9); 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    border-radius: 5px; 
} 
.info h4 { 
    margin: 0 0 5px; 
    color: #37474F; 
}
</style>
@endpush

@section('content')
<div id="driver_request" class="card">
    
    <div class="card-block">
        <h1> {{$route->route_name}}</h1>
        <hr>
        <div class="col-md-6">
        <div class="col-md-12">
            <div class="col-md-12 mb-4">
                <div class="panel panel-default">
                    <div class="panel-body" style="width: 100%; height: 440px;">                    
                        <div id="map" style="height: 100%;"></div>                              
                    </div>                
                </div>
            </div>
        </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="cc-selector panel-body">
                    
                    <div class="col-md-12 mb-4"></div>
                        <table>
                            <tr>
                                <th>Nombre:</th>
                                <td>{{$route->waypoints['start_address1']['name'] ?? 'undefined'}}</td>
                            </tr>
                            <tr>
                                <th>Departamento: </th>
                                <td>{{$route->waypoints['start_address1']['department'] ?? 'undefined'}}</td>
                            </tr>
                            <tr>
                                <th>Teléfono:</th>
                                <td>{{$route->waypoints['start_address1']['phone'] ?? 'undefined'}}</td>
                            </tr>
                        </table> 
                    </div>

                    <div class="col-md-12 mb-4"></div>
                        
                        <div class="form-group col-md-12">
                            <label for="number_of_passengers">{{ __('strings.number_of_passengers') }}</label>
                            <input id="number_of_passengers" type="number" class="form-control" name="number_of_passengers" value="{{$route->waypoints->count()-1}}" min="1" max="4" disabled>
                        </div>
                        
                        <div class="form-group col-md-12">
                            <input id="txt_is_foreign" type="text" class="form-control" readonly style="text-align: center;">
                        </div>

                        @foreach (Auth::user()->payments as $payment)
                        @php $item = json_decode($payment->JSON_DATA); @endphp
                        <input id="{{$item->alias}}" type="radio" name="payment" value="{{$payment->JSON_DATA}}" />
                        <label class="drinkcard-cc {{$item->type}}" for="{{$item->alias}}" onclick="$('#request_driver_button').prop('disabled',false);">{{$item->alias}}</label>
                        @endforeach
                </div>
                <hr>
                <div class="panel-body">   
                    <div class="form-group col-md-6">
                        <button id="reload_button" type="button" class="btn btn-default btn-lg btn-block">{{ __('strings.reload') }}</button>                    
                    </div>
                    <div class="form-group col-md-6">
                        <button id="request_driver_button" disabled type="button" class="btn btn-success btn-lg btn-block">{{ __('strings.button_get_driver') }}</button>                    
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<div id="loading" style="display:none;">
    <div class="card">
        <div class="card-block">
            <div class="flex-orw align-items-center">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-md-12 text-center">
                            <span class="display-1 d-block">
                                <span class="fa-stack fa-1x">
                                    <i id="icon" class="fas fa-circle-notch fa-stack-1x fa-spin"></i>
                                </span>
                            </span>
                            <div class="mb-4"><h1 id="message">Conectando con conductores cercanos,<br> espera un momento.</h1></div>
                            <a id="home" href="{{route('home')}}" class="btn btn-link" style="visibility: hidden;">{{__('strings.oter_trip')}}</a>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='{{asset('js/leaflet-image.js')}}'></script>
<script src='{{asset('js/L.Control.Locate.min.js')}}'></script>
<script src='{{asset('js/redtrack-suburb-search.js')}}'></script>
<script src='{{ asset('js/pdfmake.min.js') }}'></script>
<script  src='{{ asset('js/vfs_fonts.js') }}'></script>
<script src='{{asset('js/bootstrap-datetimepicker.min.js')}}'></script>
<!-- BEGIN DataTables-->
<script src="{{asset('datatables/datatables.min.js')}}" type="text/javascript"></script>
<!-- END DataTables-->

<script type="text/javascript">
var route = @json($route);

if(route.rate.is_foreign) {
    $("#txt_is_foreign").val("{{__('strings.foreign_trip')}}" + " / " + parseFloat(route.rate.km).toFixed(2) + " km");
} else {                    
    $("#txt_is_foreign").val("{{__('strings.normal_trip')}}" + " / " + parseFloat(route.rate.km).toFixed(2) + " km");
}

$("#scheduled_at").val(moment.utc(route.scheduled_at).local().format('YYYY-MM-DD HH:mm'));


var endCount = 2;
var startCount = 2;

$("#reload_button").click(function(event) {
    location.reload();
});

$("#request_driver_button").click(function(event) {

    /* 
    * verifyint that user don't make two request at same time 
    * Furute updates: upgrade change waiting as session variable.
    */
    if(waiting) {
        $.alert("{{__('strings.try_again')}}");
        return;
    }

    // trip amount validation
    if(isNaN(Number($('#prepaid').val())) || Number($('#prepaid').val()) == 0 ) {
        $.alert("{{__('strings.no_prepaid_amount')}}");
        return;
    }

    // validating driver's list size
    if(!driverMap.size) {
        $.alert("{{__('strings.no_drivers_available')}}");
        return;
    }


    // geometry constraint
    if(jsonRoute == null) {       
        $.alert("Error 4011. El campo geometry no puede ser null");
        return;
    }

    // device token validation
    //if(Cookies.get('device_token') == undefined) {
    //    $.alert("{{__('strings.no_device_token')}}");
    //    return;
    //}

    // disable "Pide QuiQ" button        
    $('#request_driver_button').prop('disabled',true);

    // request nip to logged user
    bootbox.prompt({
        title: "Nip",
        inputType: 'password',
        size: 'small',
        closeButton: false,
        callback: function (nip) { 
            if(nip) {      
                taxiRequest(nip);
            } else {
             $('#request_driver_button').prop('disabled',false); 
         }
     }
    });        
});


// array to clear / remove driver marker that not are in the response
var driverMap = new Map();
var map;
var info;
var endLocation = null;
var startLocation;
var geocoder;
var polyline, locationFeatures;

// json object to store all locations, including start location.
var waypoints = route.waypoints;

// end marker definition
var end_marker = L.icon({
    iconUrl: '{{asset('images/end.png')}}',
    iconSize:     [26, 26], // size of the icon
    iconAnchor:   [13, 13], // point of the icon which will correspond to marker's location
    popupAnchor:  [13, 13] // point from which the popup should open relative to the iconAnchor
});
// start marker definition
var pin_start = L.icon({
    iconUrl: '{{asset('images/start_pin.png')}}',
    iconSize:     [26, 43], // size of the icon
    iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
});

// end marker definition
var pin_end = L.icon({
    iconUrl: '{{asset('images/end_pin.png')}}',
    iconSize:     [26, 43], // size of the icon
    iconAnchor:   [13, 43], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
});

// driver marker definition
var quiq_plus_marker = L.icon({
    iconUrl: '{{asset('images/plus.png')}}',
    iconSize:     [48, 48], // size of the icon
    iconAnchor:   [24, 24], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -24] // point from which the popup should open relative to the iconAnchor
});

// on load finish function    
$(document).ready(function () {

    // setting moment.js language
    moment.locale('es');

    // initialize map
    map = new L.map('map',{preferCanvas:true, attributionControl: false});
    // control that shows state info
    info = L.control();  

    // detect map load event
    map.on('load', function() {
        // load locations with fixed rates
        //getLocationsWithFixedRates();

        // load foreign area on map
        getForeignLocationsLimits();
        
        // draw pre-route polyline
        drawRoute(route.geojson);
        
        // draw employes locations
        addEmployeesMarkers(route.waypoints);
        
        addStartMarker(route);

        
        // function to get drivers near current user location.
        // this function execute itself each 10 seconds
        getMyNearestTaxis();
        setInterval(function(){ getMyNearestTaxis();  getTrips();}, 5000);

        //info are a legen place into map to show total amount of prepaid trip           
        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info');
            this.update();
            return this._div;
        };
        info.update = function () {
            this._div.innerHTML = '<h4>Total</h4>' +  '<b>$' + route.rate.rate + ' MXN.</b><input type="hidden" id="prepaid" name="prepaid" value="' + route.rate.rate + '">';
        };
        info.addTo(map);
    });

    
    // load mapbox tiles
    L.tileLayer("{{config('app.map_style')}}", {
            maxZoom: 18,
        }).addTo(map);
    
    var baseLayers = {
        "Klokantech Basic": L.tileLayer("{{config('app.map_style')}}",{ maxZoom: 18 }),
        "OSM Bright": L.tileLayer("{{config('app.map_trafic_style')}}",{ maxZoom: 18 }),
    };      
    L.control.layers(baseLayers).addTo(map);

    // add controls to map
    L.control.fullscreen().addTo(map);  

    // location control
    L.control.locate({
            locateOptions: {
             maxZoom: 16,
             enableHighAccuracy: true,
         },
         showPopup: false,
         strings: {
            title: "{{__('strings.go_to_my_position')}}"
        }
    }).addTo(map);

    // initialize map view
    map.setView([route.waypoints.start_address1.lat, route.waypoints.start_address1.lng], 14);
    // full screen support to map view
    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        map.invalidateSize();
    });
    $(window).resize(function () {
        map.invalidateSize();
    });
    
});

function addStartMarker(route) {
    if(route.route_type == 'in') {        
        // add start marker on map
        startLocation = L.marker([route.waypoints.end_address1.lat,route.waypoints.end_address1.lng], {icon: pin_start})    
        .bindTooltip("{{__('strings.start_location')}}", {permanent: true,offset: [0,0]})
        .on('click', function(e){
            map.setView(e.latlng, map.zoom);
        })
        .addTo(map);
    } else {
        // add start marker on map
        startLocation = L.marker([route.waypoints.start_address1.lat,route.waypoints.start_address1.lng], {icon: pin_end})    
        .bindTooltip("{{__('strings.start_location')}}", {permanent: true,offset: [0,0]})
        .on('click', function(e){
            map.setView(e.latlng, map.zoom);
        })
        .addTo(map);
    }
}

/*
* Get at most eight drivers near user location. This function execute itself
* each ten seconds
*/
function getMyNearestTaxis() {
    $.ajax({
        url: "{{Auth::user()->getREST()}}user/drivers",
        type: "POST",
        contentType:"application/json",
        data: JSON.stringify({
            token: '{{Auth::user()->SECURE_TOKEN}}'
        }),
        dataType: "json",
        success: function (json) {
            // remove drivers from map
            driverMap.forEach(removeMarker);                
            for(var i in json.data) {
                drawDriver(json.data[i]); // redraw each driver
            }
        },
        error: function (err) {
            // remove drivers from map
            driverMap.forEach(removeMarker);
        }
    });
}

function setStartLocationAndGetRates(lat, lng){ 
    startLocation.setLatLng([lat, lng]);
    map.panTo(new L.LatLng(lat, lng));
    Cookies.set('start_lat', lat, { expires: 30 });
    Cookies.set('start_lng', lng, { expires: 30 });
    waypoints.start_address1.lat = lat;
    waypoints.start_address1.lng = lng;
    drawRoute(waypoints);
}

/*
* This function draw given driver on map.
*/
function drawDriver(driver) {
    var popup = '<div id="content"><div id="bodyContent"><h4 class="text-primary">ECO: ' + driver.ECO + '</h4>';
    popup += '<h5>Modelo: ' + driver.CAR_MODEL + '</h5></div></div>';

    if(driver.LAT != null && driver.LNG != null ) {
        var marker = L.marker([driver.LAT, driver.LNG], {icon: quiq_plus_marker, rotationAngle: driver.BEARING})    
        .bindPopup(popup)
        .on('click', function(e){
            map.setView(e.latlng, map.zoom);
        })
        .addTo(map);
        // add driver to gloab map structure
        driverMap.set(driver.SECURE_TOKEN, marker);
    }
}

function removeMarker(item, index, myMap) {
    map.removeLayer(item);
    driverMap.delete(index);
}

/*
* Request driver services. 
* This method sent the request to all nearest drivers. When driver acept the 
* request, this page receive push notification with driver data.
*/
function taxiRequest(nip) {

    var endAddress = "";

    // retive the user selected payment method
    var payment = JSON.parse($('input[name="payment"]:checked').val());

    // device token
    var deviceToken = Cookies.get('device_token') + '';
    
    var endLocation = null;
            
    for(var i = 1; i <= 4; i++) {
        if(waypoints["end_address" + i] && waypoints["end_address" + i].address) {
            endLocation = waypoints["end_address" + i];
        }
    }
    // build json data to send request to QuiQ Platform        
    var data = {
        id_user: '{{Auth::user()->ID_USER}}',
        pre_employe_route_id: '{{$route->id}}',
        user_token: '{{Auth::user()->SECURE_TOKEN}}',
        user_full_name: '{{Auth::user()->NAME}} {{Auth::user()->LAST_NAME}}',
        user_payment_type: {DATA: payment},
        user_secure_token: '{{Auth::user()->SECURE_TOKEN}}',
        start_latitude: parseFloat(waypoints.start_address1.lat),
        start_longitude: parseFloat(waypoints.start_address1.lng),
        start_address: waypoints.start_address1.address,
        end_latitude: parseFloat(endLocation.lat),
        end_longitude: parseFloat(endLocation.lng),
        end_address: "" + endLocation.address,
        user_phone: '{{Auth::user()->PHONE_NUMBER}}',
        user_device_token: deviceToken,
        user_photo: '{{Auth::user()->EMAIL}}',
        app_name: 'quiq_web',
        nip: nip,
        app_type: '{{Auth::user()->PRODUCER_TYPE}}',
        prepaid: $('#prepaid').val(),
        is_scheduled: false,
        locations: waypoints,
        passengers_number: $("#number_of_passengers").val(),
        route_type: "{{$route->route_type2 ?? ''}}",
        geometry: jsonRoute
    };
    // Generating drivers list.
    var drivers = [];
    driverMap.forEach(function (item, index) {
        drivers.push(index);
    });
    
    showLoader();
    
    // make middleware request
    $.ajax({
        url: "{{route('api_quiq_driver_request')}}",
        type: "POST",
        data: JSON.stringify({
            data: data,
            drivers: drivers,
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            nip: nip,
            trip_fare: route.rate
        }),
        dataType: "json",
        contentType: "application/json",
        success: function(response) { 
            if(waiting) {
                var payload = response.trip.route;
                $.hidePreloader(); // hide the preloader.
                processBodyNotification(payload);
            }
            stopLoader();
        },
        error: function (err) {
            hideLoader();
            console.log(err);
            // enable "Pide QuiQ" button  and show error message
            $('#request_driver_button').prop('disabled',false);
            if(err.responseJSON.response) {
               $.alert(err.responseJSON.response.message);
            } else {
                $.alert(err.responseJSON.message);  
            }
        },
});        
}


/*
* Draw polyline on map
*/
function drawRoute(route) { 
    jsonRoute = route;        
    var polyline = L.geoJson(route.geometry,{
                style: {
                    "color": "#222233",
                    "weight": 6
                }
            }).addTo(map);
    map.fitBounds(polyline.getBounds(),{padding: [50, 50]});
}

/**
* Show end place control in order
*/

function getLocationsWithFixedRates() {        
    $.ajax({
        url: "{{route('api_user_locations_fixed_rates')}}",
        type: "POST",
        contentType: "application/json",   
        data: JSON.stringify({
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            id_zone: '{{Auth::user()->ID_ZONE}}',
        }),
        dataType: "json",
        success: function (json) {
            for(var id in json.locations) {
                L.circle([json.locations[id].lat, json.locations[id].lng], {
                    color: '#1fbad6',
                    fillColor: '#1fbad6',
                    fillOpacity: 0.2,
                    radius: json.locations[id].radio
                })
                .bindTooltip(json.locations[id].name, {permanent: true,offset: [0,0]})
                .addTo(map);
            }
        },
        error: function (err) {
            console.log(err);
        },
    });        
} 

function getForeignLocationsLimits() {        
    $.ajax({
        url: "{{route('api_quiq_foreign_zone_limits')}}",
        type: "POST",
        contentType: "application/json",   
        data: JSON.stringify({
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            id_zone: '{{Auth::user()->ID_ZONE}}',
        }),
        dataType: "json",
        success: function (json) {                
            var coordinates = [];                
            for(var i in json.data) {
                var coord = [];
                for(var j in json.data[i].location) {
                    coord.push([json.data[i].location[j].lng,json.data[i].location[j].lat ]);
                }
                coordinates.push(coord);
            }

            L.geoJson({
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": coordinates
                }
            },
            {
                style: {
                    "weight": 3,
                    "color": "#ff0000",
                    fill: false,
                }
            }).addTo(map);
            
            addEmployeesMarkers(route.waypoints);
        },
        error: function (err) {
            console.log(err);            
        },
    });        
} 

function showLoader() {  
    waiting = true;
    $("#driver_request").hide();
    $("#loading").show();
}

function hideLoader() {
    waiting = false;
    $("#driver_request").show();
    $("#loading").hide();
    map.invalidateSize();
}

function stopLoader() {  
    waiting = false;
    $("#driver_request").hide();
    $("#icon").addClass("fa-thumbs-up");
    $("#icon").removeClass("fa-circle-notch fa-spin");
    $("#icon").css({"color":"Green"});
    $("#message").text("{{__('strings.successful_trip')}}");
    $("#home").css({"visibility":"visible"});
}



/**
     * Show blue circles on map that shows employees locations
     */
function addEmployeesMarkers(waypoints) {
    var features = [];
    for(var index in waypoints) {
        if(waypoints[index].id) {
            features.push({
                        type:'Point', 
                        coordinates: [waypoints[index].lng, waypoints[index].lat],
                        properties : waypoints[index],
                        popupContent: "<strong><h5>Id: " + waypoints[index].employee_number + " </h5></strong>" 
                                + "<strong>{{__('strings.name')}}:</strong> " + waypoints[index].name + ' ' + waypoints[index].last_name + "<br>"
                                + "<strong>{{__('strings.department')}}:</strong> " + waypoints[index].department + "<br>"
                                + "<strong>{{__('strings.phone')}}:</strong> " + waypoints[index].phone + "<br>"
                                + "<strong>{{__('strings.address')}}:</strong> " + waypoints[index].address + "<br>"
            });
        }
    }
    
    L.geoJson({type:'FeatureCollection', 'features': features},{
        style: {
            "color": "#ffffff",
            "weight": 3
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, {
               radius: 9,
               fillColor: "#00B0FF",
               color: "#000",
               weight: 1,
               opacity: 1,
               fillOpacity: 1
            });
        },
        onEachFeature: function(feature, layer) {
            // does this feature have a property named popupContent?
            if (feature.properties && feature.popupContent) {
                layer.bindPopup(feature.popupContent);
                layer.bindTooltip('' + feature.properties.employee_number, {permanent: true});
            }
        }
    }).addTo(map);
}  
</script>
@endpush