@extends('layouts.main')
@push('styles')
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<link rel="manifest" href="{{asset('manifest.json')}}">
<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; 
}
.labelstyle {
    all: revert;
    color: "#09091a";
    fillColor: none;
    fillOpacity: 0;
    background-color: none;
    border-color: none;
    background: none;
    border: none;
    box-shadow: none;
    margin: 0px;
    cursor: none;
    direction: 'center';
    interactive: false;
    fill: false;
}

.affix {
    width: 520px;
    height: 440px;
    position:fixed;
    z-index: 999;
}
</style>
@endpush

@section('content')
<div id="driver_request"  class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#trip" role="tab" aria-controls="trip">{{ __('strings.config_trip') }}</a>
            </li>

            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#calendar" role="tab" aria-controls="calendar">{{ __('strings.config_datetime') }}</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="trip" role="tabpanel">
                <div class="row">
                    <div class="col-md-12">
                                <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 class="affix">                 
                                                    <div id="map" style="height: 100%;"></div>     
                                                </div>                         
                                            </div>                
                                        </div>
                                    </div>

                                    <div class="input-group mb-1">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i id="driver_phone_icon" class="fa fa-phone danger"></i></span>
                                            </div>
                                            <input id="driver_phone_input" type="text" value="" class="form-control" placeholder="{{__('strings.phone')}} {{__('strings.driver')}} ">
                                    </div>
                                </div>
                                
                                @include('shared.last_trips_table')
                                
                                </div>
                                <div class="col-md-6">
                                    <div class="panel panel-default">
                                        <div class="panel-body">

                                            <div class="col-md-12 mb-4">
                                            <label>Tipo de ruta</label>                              
                                                    <select id="route_type" class="form-control mb-4">
                                                        @php $type = App\RouteType::all(); @endphp
                                                        @foreach($type as $t)
                                                        <option value="{{$t->name}}">{{$t->name ?? ''}}</option>
                                                        @endforeach
                                                    </select>
                                            </div>

                                            <div id="directions">

                                            @include('shared.input_directions')
                                            
                                            <div class="form-group col-md-12 mb-4">
                                                <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="1" min="1" max="4" disabled="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>
                                            
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="textarea">{{__('strings.driver_message')}}</label>
                                                    <textarea id="driver_message" name="driver_message" class="form-control" rows="4" placeholder="{{__('strings.driver_message_placeholder')}}" maxlength="255"></textarea>
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane" id="calendar" role="tabpanel">
                <div class="row">
                    <div class="col-md-12">
                        <p>{{__('strings.calendar_legend')}}</p>
                        <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="normal-input" class="form-control-label">{{__('strings.date_time')}}</label>
                                <input type='text' class="form-control" id='date_time' required/>
                            </div>
                        </div>
                        </div>
                        <hr> 

                        <div class="col-md-12 mb-4">
                            <label>Clasificación</label>                              
                            <select id="route_classification" class="form-control mb-4">
                                @php $classification = App\RouteClassification::all(); @endphp
                                @foreach($classification as $cls)
                                <option value="{{$cls->classification}}">{{$cls->classification ?? ''}}</option>
                                @endforeach
                            </select>
                        </div>
                        <hr>
                        
                        <p>{{__('strings.selec_paymebt')}}</p>
                        <div class="row cc-selector">                          
                            <div class="col-md-12">    
                            @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>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-12">    
                            <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>
        </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>
                                    <i id="error" class="fas fa-ban fa-stack-2x" style="color:Tomato;visibility: hidden;"></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/redtrack-employee-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 userNip = null;
var userNipDepartment = null;
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;
    }
    
    if($("#date_time").val() == "") {
        $.alert("{{__('strings.calendar_error')}}");
        return;
    }
    
    // start address validation
    var startAddress =  $("#start_address1").val();
    if(startAddress == '') {
        $.alert("{{__('strings.set_start_marker')}}");
        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;
    }

    // end location validation
    if(endLocation == null) {            
        $.alert("{{__('strings.set_end_address')}}");
        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 tripRate;
var endLocation = null;
var startLocation;
var geocoder;
var polyline, locationFeatures;

// json object to store all locations, including start location.
var waypoints = {};
waypoints.start_address1 = {};
// start latitude and longitude. When the user locate it's position, lat, lng
// are stored in coockies to nex load of web page.    
waypoints.start_address1.lat = "{{Auth::user()->START_LAT}}" === undefined ? 22.148757 : parseFloat("{{Auth::user()->START_LAT}}");
waypoints.start_address1.lng = "{{Auth::user()->START_LNG}}" === undefined ? -100.991894 : parseFloat("{{Auth::user()->START_LNG}}");
waypoints.start_address1.address = "{{Auth::user()->START_ADDRESS}}";

// 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 start_marker = 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
});
// 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 () {
    
    $("a[href='#trip']").on('shown.bs.tab', function(e) {
        map.invalidateSize();
    });
    
    // configuring calendar
     $('#date_time').datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
            stepping: 5,
            icons:{
                time: 'far fa-clock',
                date: 'far fa-calendar-alt',
                up: 'fas fa-plus',
                down: 'fas fa-minus',
                previous: 'fas fa-chevron-left',
                next: 'fas fa-chevron-right',
                clear: 'far fa-trash-alt',
                close: 'fas fa-times'
            },
            locale: 'es',
            sideBySide: true,
            inline: true
    });
       
    // init default autocomplete
    initDefaultAutoCompleteInputs(); 


    // 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();

        // add start marker on map
        startLocation = L.marker([waypoints.start_address1.lat,waypoints.start_address1.lng], {icon: start_marker,draggable: true})    
        .bindTooltip("{{__('strings.start_location')}}", {permanent: true,offset: [0,0]})
        .on('click', function(e){
            map.setView(e.latlng, map.zoom);
        })
        .addTo(map);

        // drag event to start marker
        startLocation.on("drag", function(e) {
            var marker = e.target;
            var position = marker.getLatLng();
            map.panTo(new L.LatLng(position.lat, position.lng));
        });       

        // on map end moving
        startLocation.on('dragend', function(e) { 
            setStartLocationAndGetRates(e.target.getLatLng().lat,e.target.getLatLng().lng);
        });

        // location found event
        map.on('locationfound', function(evt) {

            // stop location listener
            map.stopLocate();

            // configure global variables
            Cookies.set('start_lat', evt.latlng.lat, { expires: 30 });
            Cookies.set('start_lng', evt.latlng.lng, { expires: 30 });                
            waypoints.start_address1.lat = evt.latlng.lat;
            waypoints.start_address1.lng = evt.latlng.lng;
            startLocation.setLatLng([evt.latlng.lat,evt.latlng.lng]);
            drawRoute(waypoints);                
        });



        // function to get drivers near current user location.
        // this function execute itself each 10 seconds
        getNearestTaxis();
        setInterval(function(){ getNearestTaxis();}, 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 (message) {
            this._div.innerHTML = '<h4>Total</h4>' +  (message ?
                '<b>$' + message + ' MXN.</b><input type="hidden" id="prepaid" name="prepaid" value="' + message + '">'
                : '0.0<input type="hidden" id="prepaid" value="0">');
        };
        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([waypoints.start_address1.lat, 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 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) {
    if(driver.LAT != null && driver.LNG != null ) {
        var marker = L.marker([driver.LAT, driver.LNG], {icon: quiq_plus_marker, rotationAngle: driver.BEARING})    
        .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') + '';

    /**
     * waypoints.start_address.address store the user start addres setting from configuration platform.
     * When user search or change start marker, then it's need to update waypoints.start_address.address
     */
    waypoints.start_address1.address = $("#start_address1").val(); 
    
    // build all locations
    for(var i = 1; i < 5; i++) {
        var id = "start_address" + i; 
        if(waypoints[id]) {
            waypoints[id].passenger = $("#passenger_sa" + i).val();
            waypoints[id].passenger_phone = $("#phone_sa" + i).val();
            waypoints[id].passenger_department = $("#department_sa" + i).val();
            waypoints[id].employee_number = $("#employee_number_sa" + i).val();
        }
        
        id = "end_address" + i; 
        if(waypoints[id]) {
            waypoints[id].passenger = $("#passenger_ea" + i).val();
            waypoints[id].passenger_phone = $("#phone_ea" + i).val();
            waypoints[id].passenger_department = $("#department_ea" + i).val();
            waypoints[id].employee_number = $("#employee_number_ea" + i).val();
            endAddress =  waypoints[id].address;
        }
    }
    
    // build json data to send request to QuiQ Platform        
    var data = {
        id_user: '{{Auth::user()->ID_USER}}',
        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.getLatLng().lat),
        end_longitude: parseFloat(endLocation.getLatLng().lng),
        end_address: endAddress,
        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: true,
        scheduled_at: moment($("#date_time").val()).utc().format('YYYY-MM-DD HH:mm'),
        locations: waypoints,
        passengers_number: $("#number_of_passengers").val(),        
        driver_message: $("#driver_message").val(),
        route_type: $("#route_type").val(),
        route_classification: $("#route_classification").val(),
        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: tripRate
        }),
        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(waypoints) {         

    // clear polyline
    if( polyline != undefined ){
        map.removeLayer(polyline);
    }

    if(locationFeatures != undefined) {
        map.removeLayer(locationFeatures);
    }               

    // generating locatons array
    var locations = []; 
    var locFeatures = [];
    // get keys values
    if(waypoints.start_address1) {
        locations.push([parseFloat(waypoints.start_address1.lng), parseFloat(waypoints.start_address1.lat)]);
        locFeatures.push({type:'Point', 'coordinates': [waypoints.start_address1.lng, waypoints.start_address1.lat]});
    }

    var lastLocation = null;
    
    for(var i = 2; i <= 4; i++) {
        if(waypoints["start_address" + i] && waypoints["start_address" + i].address) {
            locations.push([parseFloat(waypoints["start_address" + i].lng), parseFloat(waypoints["start_address" + i].lat)]);   
            locFeatures.push({type:'Point', 'coordinates': [waypoints["start_address" + i].lng, waypoints["start_address" + i].lat]});
            lastLocation = waypoints["end_address" + i];
        }
    }
    
    for(var i = 1; i <= 4; i++) {
        if(waypoints["end_address" + i] && waypoints["end_address" + i].address) {
            locations.push([parseFloat(waypoints["end_address" + i].lng), parseFloat(waypoints["end_address" + i].lat)]);   
            locFeatures.push({type:'Point', 'coordinates': [waypoints["end_address" + i].lng, waypoints["end_address" + i].lat]});
            lastLocation = waypoints["end_address" + i];
        }
    }

    // setting last location marker
    if(lastLocation == null) {
        if(endLocation != null) {
            map.removeLayer(endLocation);
        }
        endLocation = null;
    } else if(endLocation == null) {                    
                // initialize end location marker
                endLocation = L.marker([lastLocation.lat, lastLocation.lng], {icon: end_marker})    
                .bindTooltip("{{__('strings.end_location')}}", {permanent: true,offset: [0,-13]})
                .on('click', function(e){
                    map.setView(e.latlng, map.zoom);
                })
                .addTo(map);
    } else {
        endLocation.setLatLng([lastLocation.lat, lastLocation.lng]);
    }

    var apiUrl = "{!!config('app.route_service')!!}";
        
    $.getJSON(apiUrl.replace('#cords', locations.join(";")), function (json) {
        if(json.routes) {                 

            jsonRoute = json.routes[0]; 

            getTripRate(jsonRoute);               

            polyline = L.geoJson(json.routes[0].geometry,{
                style: {
                    "color": "#1fbad6",
                    "weight": 5
                }
            }).addTo(map);

            locationFeatures = L.geoJson({type:'FeatureCollection', 'features': locFeatures},{
                style: {
                    "color": "#ffffff",
                    "weight": 3
                },
                pointToLayer: function (feature, latlng) {
                    return L.circleMarker(latlng, {
                       radius: 8,
                       fillColor: "#1fbad6",
                       color: "#000",
                       weight: 1,
                       opacity: 1,
                       fillOpacity: 1
                    });
                }
            }).addTo(map);

            map.fitBounds(polyline.getBounds(),{padding: [50, 50]});
        }
    })
    .fail(function (err) {  
        info.update("");
        jsonRoute = null;
        console.log(err);
    });
}

/**
* Show end place control in order
*/
function showEndPlace() {
    var max = $('#number_of_passengers').attr('max');
    if (endCount < max ) {
        $("#end_place_" + endCount).show();
    } else if(endCount = max ){
        $("#end_place_" + endCount).show();
        $("#btn_show_end_address").hide();
    } else {
        $.alert("{{__('strings.place_overflow')}}");
        $("#btn_show_end_address").hide();
    }
    endCount++;
}

/**
* Show start place control in order
*/
function showStartPlace() {
    var max = $('#number_of_passengers').attr('max');
    if (startCount < max ) {
        $("#start_place_" + startCount).show();
    } else if(startCount = max ){
        $("#start_place_" + startCount).show();
        $("#btn_show_start_address").hide();
    } else {
        $.alert("{{__('strings.place_overflow')}}");
        $("#btn_show_start_address").hide();
    }
    startCount++;
}

function getTripRate(jsonRoute) {
    console.log(waypoints);
    $.ajax({
        url: "{{route('api_user_rates')}}",
        type: "POST",
        contentType: "application/json",   
        data: JSON.stringify({
            user_token: '{{Auth::user()->SECURE_TOKEN}}',
            distance: jsonRoute.distance,
            time: jsonRoute.duration,
            locations: waypoints,
            id_zone: '{{Auth::user()->ID_ZONE}}'
        }),
        dataType: "json",
        success: function (json) {
            tripRate = json;
            info.update(json.rate);
            $("#number_of_passengers").val(json.passengers_number);
            if(json.is_foreign) {
                $("#txt_is_foreign").val("{{__('strings.foreign_trip')}}" + " / " + parseFloat(json.km).toFixed(2) + " km");
            } else {                    
                $("#txt_is_foreign").val("{{__('strings.normal_trip')}}" + " / " + parseFloat(json.km).toFixed(2) + " km");
            }
        },
        error: function (err) {
            console.log(err);
            tripRate = {};
            info.update("");  
        },
    });
}

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], direction: 'center', className: 'labelstyle'})
                .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",
                    fillColor: "#ff780000",
                    opacity: 1,
                }
            }).addTo(map);
        },
        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"});
}

function initDefaultAutoCompleteInputs() {
    // init start location autocomplete
    $("#start_address1").RedTrackAutoComplete({
        on_click: function(json){                
            waypoints.start_address1 = {
                lat: parseFloat(json.lat), 
                lng: parseFloat(json.lng),
                address: json.formatted_address
            };     
            setStartLocationAndGetRates(json.lat, json.lng);
        },
        on_clear: function(){}
    });
    // detect paste or typing on start address to proccess lat,lng data        
    $("#start_address1").on('input',function(e){
        // regualar expression to validate if given string has lat,lng values.
        // online regular expresion validator: https://www.debuggex.com/r/mNdKcumz2T5n-fWr#cheatsheet
        var patt = new RegExp(/(.*)place(.*)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)(.*)d(\d+.\d+)(.*)d(\-?\d+\.\d+)$/);
        var patt2 = new RegExp(/.*(\/.*\/)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)/);
        if(patt.test($(this).val())) {                
            var data = patt.exec($(this).val());
            // get string elementos from regular expresion,                
            // replace all '+' characters with white space. 
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            var lat = data[6];
            var lng = data[8];  
            $(this).val(address);
            map.panTo([lat, lng]);
            waypoints.start_address1 = {
                    lat: parseFloat(lat), 
                    lng: parseFloat(lng),
                    address: address
            };
            //$("#start_address1").prop('readonly', true);
            setStartLocationAndGetRates(parseFloat(lat), parseFloat(lng));
        } else if(patt2.test($(this).val())){
            var data = patt2.exec($(this).val());
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            var address = decodeURIComponent(data[1]).replace(/\+/g, " ").replace(/\//g, "");
            var lat = data[2];
            var lng = data[3];  
            
            $(this).val(address);

            map.panTo([lat, lng]);
            waypoints.start_address1 = {
                    lat: parseFloat(lat), 
                    lng: parseFloat(lng),
                    address: address
            };
            //$("#start_address1").prop('readonly', true);
            setStartLocationAndGetRates(parseFloat(lat), parseFloat(lng));
        }
    });  
    
    // init start address autocomplete    
    for(var i = 2; i < 5; i++) {
        var id = "start_address" + i;        
        initializeAutocomplete(id);     
    }
    // init end address autocomplete    
    for(var i = 1; i < 5; i++) {
        var id = "end_address" + i;        
        initializeAutocomplete(id);     
    }

    // init end address autocomplete    
    for(var i = 1; i <= 4; i++) {       
        initializeEmployeeSearch('sa' + i, i); 
        initializeEmployeeSearch('ea' + i, i);   
    }
    
    
}

function initializeAutocomplete(id) {
    $("#" + id).RedTrackAutoComplete({
        on_click: function(json){ 
            waypoints[id] = {
                lat: parseFloat(json.lat), 
                lng: parseFloat(json.lng),
                address: json.formatted_address
            };      
            drawRoute(waypoints);
        },
        on_clear: function(){
            waypoints[id]={};                
            drawRoute(waypoints);
        }
    });

    // detect paste or typing lat,lng information
    $("#" + id).on('input',function(e){
        // regualar expression to validate if given string has lat,lng values.
        // online regular expresion validator: https://www.debuggex.com/r/mNdKcumz2T5n-fWr#cheatsheet
        var patt = new RegExp(/(.*)place(.*)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)(.*)d(\d+.\d+)(.*)d(\-?\d+\.\d+)$/);
        var patt2 = new RegExp(/.*(\/.*\/)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)/);

        if(patt.test($(this).val())) {     
            var data = patt.exec($(this).val());
            // get string elementos from regular expresion,                
            // replace all '+' characters with white space. 
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            var lat = data[6];
            var lng = data[8];  
            $(this).val(address);

            map.panTo([lat, lng]);
            waypoints[id] = {
                lat: parseFloat(lat), 
                lng: parseFloat(lng),
                address: address
            };
            //$("#" + id).prop('readonly', true);
            drawRoute(waypoints);
        }  else if(patt2.test($(this).val())) {
            var data = patt2.exec($(this).val());
            var address = decodeURIComponent(data[2]).replace(/\+/g, " ").replace(/\//g, "");
            var address = decodeURIComponent(data[1]).replace(/\+/g, " ").replace(/\//g, "");
            var lat = data[2];
            var lng = data[3];  
            
            $(this).val(address);
            map.panTo([lat, lng]);
            waypoints[id] = {
                lat: parseFloat(lat), 
                lng: parseFloat(lng),
                address: address
            };
            //$("#" + id).prop('readonly', true);
            drawRoute(waypoints);
        }
    }); 
}


function initializeEmployeeSearch(eId, _id) {
    $("#passenger_" + eId).EmployeeAutoComplete({
        eId: eId,
        method: 'POST',
        token: '{{Auth::user()->SECURE_TOKEN}}',
        api_url: "{{route('search_employee')}}",
        on_click: function(data){      
            $('#employee_number_' + eId ).val(data?.data?.employee_number);
            $('#phone_' + eId ).val(data?.data?.phone);
            $('#department_' + eId).val(data?.data?.department);
            if(eId.includes('sa')) {
                $('#start_address' + _id).val(data?.data?.google_url).trigger("input");
            }
            if(eId.includes('ea')) {
                $('#end_address' + _id).val(data?.data?.google_url).trigger("input");
            }
        },
        on_clear: function(){}
    });
}
</script>
@endpush