@extends('layouts.main')
@push('styles')
<link href='{{asset('css/L.Control.Locate.min.css')}}' rel='stylesheet' />
<link href='{{asset('css/leaflet-gplaces-autocomplete.css')}}' rel='stylesheet' />
<link href='{{asset('css/redtrack.css')}}' rel='stylesheet' />
<link href='{{asset('css/leaflet.css')}}' rel='stylesheet' />
<script src='{{asset('js/leaflet.js')}}'></script>
<link rel="manifest" href="{{asset('manifest.json')}}">

<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

<style>
.success { 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; } .success h4 { margin: 0 0 5px; color: #37474F; }
.legend { text-align: left; font-size: medium; line-height: 18px; background: white; background: rgba(255,255,255,0.8);} .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 1; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; } .info h4 { margin: 0 0 5px; color: #777; }

</style>
@endpush
@section('content')
<div class="card">
    <div class="card-block">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading"><h5>{{ __('strings.index_header') }}</h5> {{Auth::user()->PRODUCER_TYPE}}</div>
                <div class="panel-body" style="width: 100%; height: 640px;">                    
                    <div id="map" style="height: 100%;"></div>                              
                </div>                
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="panel panel-default">                   
                <div class="panel-heading"><h5>{{ __('strings.select_payment_method') }}</h5></div>
                <br><hr>
                <div class="cc-selector panel-body">

                    @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>
                <br><hr>
                <div class="panel-body">                
                    <button id="request_driver_button" disabled type="button" class="btn btn-primary btn-lg btn-block">{{ __('strings.button_get_driver') }}</button>                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src='{{asset('js/Leaflet.fullscreen.min.js')}}'></script>
<script src='{{asset('js/L.Control.Locate.min.js')}}'></script>
<script src="{{asset('js/Marker.Rotate.js')}}" type="text/javascript"></script>
<script src='{{asset('js/leaflet-gplaces-autocomplete.js')}}'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5esDo7OmysS7b-Yy4xvxZU5wFaa3R6y8&libraries=places"></script>
<script type="text/javascript">
    // google geocoder api key for QuiQ Project ->  AIzaSyDBrgUtGNAdLm3D-WbjwhYthDq_JOKmHJY 
    // google places api key for QuiQ Project ->   AIzaSyA5esDo7OmysS7b-Yy4xvxZU5wFaa3R6y8 
    
    $("#request_driver_button").click(function(event) {
        if(waiting) {
            $.alert("{{__('strings.try_again')}}");
            return;
        }
        if(!driverMap.size) {
            $.alert("{{__('strings.no_drivers_available')}}");
            return;
        }
        
        taxiRequest();
        
    });
        
    // array to clear / remove driver marker that not are in the response
    var driverMap = new Map();
    var map;
    var info;
    var startLocation;
    var search;
    var geocoder = new google.maps.Geocoder;
    // start latitude and longitude. When the user locate it's position, lat, lng
    // are stored in coockies to nex load of web page.
    var startLat = Cookies.get('start_lat') === undefined ? 22.148757 : parseFloat(Cookies.get('start_lat'));
    var startLng = Cookies.get('start_lng') === undefined ? -100.991894 : parseFloat(Cookies.get('start_lng'));

    // custom icons for leaftet
    var quiq_taxi_marker = L.icon({
        iconUrl: '{{asset('images/taxi.png')}}',
        iconSize:     [26, 48], // size of the icon
        iconAnchor:   [13, 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
    });

    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
    });

    var pin_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
    });

    $(document).ready(function () {
        // setting moemnt.js language
        moment.locale('es');
        map = new L.map('map');
        // control that shows state info
        info = L.control();   

        map.on('load', function() {
            console.log('map loaded');
            
            startLocation = L.marker([startLat,startLng], {icon: pin_start_marker})    
                                    .bindTooltip("Punto de partida", {permanent: true,offset: [-13, -30]})
                                    .on('click', function(e){
                                        map.setView(e.latlng, map.zoom);
                                    })
                                    .addTo(map);
            // request location update and set location
            if(Cookies.get('start_lat') == undefined) {
                lc.start();
            } else {
                geocodeLatLng(startLocation.getLatLng().lat, startLocation.getLatLng().lng);
            }

            // on map move
            map.on('move', function(ev) {
                startLocation.setLatLng(map.getCenter());
            });

            // on map end moving
            map.on('moveend', function(ev){
                geocodeLatLng(startLocation.getLatLng().lat, startLocation.getLatLng().lng);
            });

            map.on('locationfound', function(evt) {
                console.log("locationfound");
                Cookies.set('start_lat', evt.latlng.lat, { expires: 30 });
                Cookies.set('start_lng', evt.latlng.lng, { expires: 30 });
                // stop location listener
                map.stopLocate();
            });

            getNearestTaxis();

            info.onAdd = function (map) {
                this._div = L.DomUtil.create('div', 'success');
                this.update();
                return this._div;
            };

            info.update = function (message) {
                this._div.innerHTML = '<h4>Disponibles</h4>' +  (message ?
                    '<b>' + message + '</b>'
                    : '<i class="fa fa-spinner fa-spin fa-fw"></i>')
                    +"    </div>";
            };
            info.addTo(map);
        });

        L.tileLayer('https://mapas.rtplataforma.com:8443/styles/klokantech-basic/{z}/{x}/{y}.png', {
            maxZoom: 18,
        }).addTo(map);
        
        
        
        // adding controls to map
        L.control.fullscreen().addTo(map);

        var lc = L.control.locate({
            icon: 'fas fa-crosshairs', 
            locateOptions: {
               maxZoom: 16,
               enableHighAccuracy: true,
           },
           showPopup: false,
           strings: {
                title: "Ir a mi posición"
            }
        }).addTo(map);

        search = new L.Control.GPlaceAutocomplete({
            callback: function(place){
                    var loc = place.geometry.location;
                    map.setView( [loc.lat(), loc.lng()], 18);
            }
        }).addTo(map);

        map.setView([startLat, startLng], 14);

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
                map.invalidateSize();
        });
        //resize the chart when window resize
        $(window).resize(function () {
            map.invalidateSize();
        });
    });

   
    
    function getNearestTaxis() {
        $.ajax({
            url: "{{Auth::user()->getRestForNearest()}}",
            type: "POST",
            data: JSON.stringify({
                user_secure_token: '{{Auth::user()->SECURE_TOKEN}}',
                user_email: '{{Auth::user()->EMAIL}}',
                user_latitude: startLocation.getLatLng().lat,
                user_longitude: startLocation.getLatLng().lng,
                user_city: 'San Luis Potosí',
                user_state: 'SLP',
            }),
            dataType: "json",
            success: function (json) {
                console.log(json);
                driversList = json.data;
                driverMap.forEach(removeMarker);
                
                for(var i in json.data) {
                    drawDriver(json.data[i]);
                }
                if(json.data != undefined) {
                    info.update(json.data.length);
                } else {                    
                    info.update("0");
                }
            },
            error: function (err) { 
                console.log(err);
                driverMap.forEach(removeMarker);
                info.update("0");
            },
            complete: setTimeout(function() {getNearestTaxis()}, 10000),
        });
    }


    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>';

        var icon = quiq_taxi_marker;
        if (driver.TAXI_TYPE === 'PLUS') {
            icon = quiq_plus_marker;
        }
        if(driver.LAT != null && driver.LNG != null ) {
            var marker = L.marker([driver.LAT, driver.LNG], {icon: icon, iconAngle: driver.BEARING, html: driver.ECO})    
            .bindPopup(popup)
            .bindTooltip(driver.ECO, {permanent: true})
            .on('click', function(e){
                map.setView(e.latlng, map.zoom);
            })
            .addTo(map);
            //marker.bindLabel('My Label', {pane: 'popupPane'})
            driverMap.set(driver.SECURE_TOKEN, marker);
        }
    }

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

    function geocodeLatLng(lat, lng) {
            var latlng = {lat: parseFloat(lat), lng: parseFloat(lng)};
            geocoder.geocode({'location': latlng}, function(results, status) {
              if (status === 'OK') {
                if (results[0]) {
                    search.searchBox.value = results[0].formatted_address
                } 
              } else {
                console.log('Geocoder failed due to: ' + status);
              }
            });
    }
    
    function taxiRequest() {
        var address = search.searchBox.value;
        var payment = JSON.parse($('input[name="payment"]:checked').val());
        var deviceToken = Cookies.get('device_token');
        
        if(deviceToken == undefined) {
            $.alert("{{__('strings.no_device_token')}}");
            return;
        }
        
        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: startLocation.getLatLng().lat,
                start_longitude: startLocation.getLatLng().lng,
                start_address: address,
                user_phone: '{{Auth::user()->PHONE_NUMBER}}',
                user_device_token: deviceToken,
                user_photo: '{{Auth::user()->EMAIL}}',
                app_name: 'quiq_producer',
                app_type: '{{Auth::user()->PRODUCER_TYPE}}',
            };
        var drivers = [];
        driverMap.forEach(function (item, index) {
            drivers.push(index);
        });
        
        waiting = true;
        $.showPreloader("{{__('strings.waiting_for_driver')}}");

        $.ajax({
            url: "{{Auth::user()->getREST()}}driver/notify",
            type: "POST",
            data: JSON.stringify({
                data: data,
                drivers: drivers
            }),
            dataType: "json",
            success: function (json) {
                console.log(json);
            },
            error: function (err) {
                console.log(err);
            },
        });
        
        // timer for close loading modal
        setTimeout(function() {
            if(waiting) {
                waiting = false;
                $.hidePreloader(); // hide the preloader
                $.alert("{{__('strings.reject_service')}}");
            }
        }, 60000);
    }
    
</script>
@endpush