@extends('dispatcher.dispatch.layout.base')

@section('title', 'Dispatcher ')

@section('styles')
<style type="text/css">
     /* For Firefox */
    input[type='number'] {
        -moz-appearance:textfield;
    }
    /* Webkit browsers like Safari and Chrome */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.min.css" />
@endsection

@section('content')
<div class="site-sidebar-second custom-scroll custom-scroll-dark">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab">Create</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Trips</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-4" role="tab" style="display:none;">Settings</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab-1" role="tabpanel">
            @include('dispatcher.dispatch.create')
        </div>
        <div class="tab-pane ride_list" id="tab-2" role="tabpanel">
        </div>
        <div class="tab-pane" id="tab-4" role="tabpanel">
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <span id="message"></span>
            </div>
            <div id="loader" class="center">
                <i class="fa fa-circle-o-notch fa-spin" style="font-size:24px;color:#a377b1;"></i>
            </div>
            <div id="viewer"></div>
        </div>
    </div>
</div>
<!-- driver options -->
<div class="driver-options custom-scroll custom-scroll-dark opened">
    <div class="driver_list"></div>
</div>

@include('dispatcher.dispatch.layout.partials.header')
<div class="site-content">
    <div id="map">
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        worldMapInitialize();
    });
    window.vx = {!! json_encode([
        "minDate" => \Carbon\Carbon::today()->format('Y-m-d\TH:i'),
        "maxDate" => \Carbon\Carbon::today()->addDays(30)->format('Y-m-d\TH:i'),
    ]) !!}
    $('#schedule_time').datetimepicker({
            minDate: window.vx.minDate,
            maxDate: window.vx.maxDate,
            format:'d-m-Y H:i:s',
    });
    $('#trip_types').on('change', function() {
        var val = this.value;
        if(val ==2){
            $('#schedule_time').show();
        }else{
            $('#schedule_time').hide();
        }
    });
    $('#clear').click(function(){
        $('input[type=text]').val('').removeAttr('selected');
        worldMapInitialize();
    });
    $('#cancel').click(function(){
        $('input[type=text]').val('').removeAttr('selected');
        container = $('.site-sidebar-second');
        container.removeClass('opened');
        $('.template-options').show();
        worldMapInitialize();
    });

</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_KEY') }}&libraries=places" async defer></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( "#mobile" ).autocomplete({
          source : '/dispatcher/dispatch/users-phone',
          minlenght:3,
          autoFill:true,
          select:function(e,ui){
            $('#mobile').val(ui.item.value);
            $('#email').val(ui.item.email);
            $('#first_name').val(ui.item.first_name);
            $('#last_name').val(ui.item.last_name);
          }
    });
    $( "#email" ).autocomplete({
          source : '/dispatcher/dispatch/users-email',
          minlenght:3,
          autoFill:true,
          select:function(e,ui){
            $('#email').val(ui.item.value);
            $('#mobile').val(ui.item.phone);
            $('#first_name').val(ui.item.first_name);
            $('#last_name').val(ui.item.last_name);
          }
    });
     $("#create_trip").submit(function(event){
        event.preventDefault();
        event.stopPropagation();
        var require = 0;
        if($('#first_name').val() == ''){
            $('.first_name').show();
            require = 1;
        }else{
            $('.first_name').hide();
        }
        if($('#last_name').val() == ''){
            $('.last_name').show();
            require = 1;
        }else{
            $('.last_name').hide();
        }

        if($('#email').val() == ''){
            $('.email').show();
            require = 1;
        }else{
            $('.email').hide();
        }

        if($('#mobile').val() == ''){
            $('.mobile').show();
            require = 1;
        }else{
            $('.mobile').hide();
        }
        if($('#s_address').val() == ''){
            $('.s_address').show();
            require = 1;
        }else{
            $('.s_address').hide();
        }
        if($('#d_address').val() == ''){
            $('.d_address').show();
            require = 1;
        }else{
            $('.d_address').hide();
        }
        if(require == 1){
            return false;
        }

        $.ajax({
            url: '/dispatcher/dispatch',
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': window.Laravel.csrfToken },
            type: 'POST',
            data: $("#create_trip").serialize(),
            success: function(data) {
                $('input[type=text]').val('').removeAttr('selected');
                worldMapInitialize();
                $('.alert').show();
                $("#message").html(data.message);
                activeTab('tab-4');
                viewer(data.id);
            }
        });
    });

    $(document).on('click','#trips', function() {
        $('.alert').hide();
        var id = $(this).attr("data-id");
            activeTab('tab-4');
            viewer(id);
        });

    function viewer(id){
        $("#loader").show();
        $("#viewer").empty();
        $.get('/dispatcher/dispatch/viewtrip/' +id, function( data ) {
                $("#viewer").html(data);
                $("#loader").hide();
           });
    }
    $(document).on('click','#assign', function() {
        var id = $(this).attr("data-id");
        var provider_id = $(this).attr("data-provider");
        $.get('/dispatcher/dispatch/assign/' +id+'/'+provider_id, function( data ) {
                activeTab('tab-2');
                ride_updates();
           });
    });
    function driver_updates(){
        $.ajax
            ({
              cache: false,
              type: "GET",
              url: "/dispatcher/dispatch/driver-list",
              success: function(data)
              {
                 $('.driver_list').html(data);
              }
            });
    }
    function ride_updates(){
        $.ajax
            ({
              cache: false,
              type: "GET",
              url: "/dispatcher/dispatch/ride-list",
              success: function(data)
              {
                 $('.ride_list').html(data);
              }
            });
    }
    function activeTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
    };
    $(document).ready(function(){
    driver_updates();
    ride_updates()
    setInterval(function(){
            driver_updates();
            }, 10000);
    setInterval(function(){
            ride_updates();
            }, 8000);
    });
</script>
<script>
    var map;
    var users;
    var providers;
    var latitude;
    var longitude;
    var zooming;
    var datas = [];
    var ajaxMarkers = [];
    var googleMarkers = [];
    var mapIcons = {
        active: "{{asset('asset/img/green_car.png')}}",
        riding: "{{asset('asset/img/blu_car.png')}}",
        offline: "{{asset('asset/img/red_car.png')}}",
       
    }
    var map, mapMarkers = [];
    var source, destination;
    var s_input, d_input;
    var s_latitude, s_longitude;
    var d_latitude, d_longitude;
    var distance;

    function worldMapInitialize() {
        latitude = parseFloat("{{ Setting::get('address_lat', '') }}");
        longitude = parseFloat("{{ Setting::get('address_long', '') }}");
        zooming = parseInt("{{ Setting::get('zoom', '') }}");
            
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: latitude, lng: longitude},
            zoom: zooming,
            mapTypeControl: true,
              mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.SMALL,
                  position: google.maps.ControlPosition.TOP_CENTER,
                  mapTypeIds: ['roadmap', 'satellite']
              },
              zoomControl: true,
              zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.BOTTOM_CENTER
              } 
        });
        setInterval(ajaxMapData, 15000);

        var mapelement = document.getElementById('map');

        var legend = document.createElement('div');
        legend.setAttribute("id", "legend");
        mapelement.append(legend);

        var div = document.createElement('div');
        div.innerHTML = '<img src="' + mapIcons['active'] + '"> ' + 'Acitve' + ' <input type="checkbox" name="filter_list" value="active">';
        legend.appendChild(div);
        
        var div = document.createElement('div');
        div.innerHTML = '<img src="' + mapIcons['riding'] + '"> ' + 'Riding' + ' <input type="checkbox" name="filter_list" value="riding">';
        legend.appendChild(div);

        var div = document.createElement('div');
        div.innerHTML = '<img src="' + mapIcons['offline'] + '"> ' + 'Offline' + ' <input type="checkbox" name="filter_list" value="offline">';
        legend.appendChild(div);
        map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(legend);
        
        google.maps.Map.prototype.clearOverlays = function() {
            for (var i = 0; i < googleMarkers.length; i++ ) {
                googleMarkers[i].setMap(null);
            }
            googleMarkers.length = 0;
        }
    }

    function ajaxMapData() {
    var filterarray = new Array();
    var filters;
    $("input:checkbox[name=filter_list]:checked").each(function(){
        filterarray.push($(this).val());
    });
    if(filterarray.length >0){
        filters = filterarray;
    }else{
        filters = ["active", "riding", "offline"];
    }
    var dataString = "filters="+filters;
        map.clearOverlays();
        $.ajax({
            url: '/dispatcher/dispatch/map',
            dataType: "JSON",
            data: dataString,
            headers: {'X-CSRF-TOKEN': window.Laravel.csrfToken },
            type: "GET",
            success: function(data) {
                ajaxMarkers = data;
            }
        });
        ajaxMarkers ? ajaxMarkers.forEach(addMarkerToMap) : '';
    }

    function addMarkerToMap(element, index) {
       var lat = parseFloat(element.latitude);
        var lng = parseFloat(element.longitude);
              var  status  = element.status;
              if (!status){
                   return;
              }
        marker = new google.maps.Marker({
            position: {
                lat: lat,
                lng: lng
            },
            id: element.id,
            map: map,
            title: element.first_name + " " +element.last_name,
            icon : mapIcons[element.status],
        });

        googleMarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = '/dispatcher/' + element.service ? 'provider' : 'user' + '/' +element.user_id;
        });
    }

    function initrip(){
        s_input = document.getElementById('s_address');
        d_input = document.getElementById('d_address');

        s_latitude = document.getElementById('s_latitude');
        s_longitude = document.getElementById('s_longitude');

        d_latitude = document.getElementById('d_latitude');
        d_longitude = document.getElementById('d_longitude');
        
        distance = document.getElementById('distance');

        latitude = 11.016844;
        longitude = 76.955833;
        zooming = 10;
            
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: latitude, lng: longitude},
            zoom: zooming,
        });
    
        var autocomplete_source = new google.maps.places.Autocomplete(s_input);
        autocomplete_source.bindTo('bounds', map);

        autocomplete_source.setComponentRestrictions(
            {'country': ['au']});

        var autocomplete_destination = new google.maps.places.Autocomplete(d_input);
        autocomplete_destination.bindTo('bounds', map);

        autocomplete_destination.setComponentRestrictions(
            {'country': ['au']});

        var service = new google.maps.places.PlacesService(map);
        var des_service = new google.maps.places.PlacesService(map);

        var marker = new google.maps.Marker({
            map: map,
            draggable: true,
            anchorPoint: new google.maps.Point(0, -29),
            icon: '/asset/img/marker-start.png'
        });

        var markerSecond = new google.maps.Marker({
            map: map,
            draggable: true,
            anchorPoint: new google.maps.Point(0, -29),
            icon: '/asset/img/marker-end.png'
        });

        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});

        google.maps.event.addListener(map, 'click', updateMarker);
        google.maps.event.addListener(map, 'click', updateMarkerSecond);
        
        google.maps.event.addListener(marker, 'dragend', updateMarker);
        google.maps.event.addListener(markerSecond, 'dragend', updateMarkerSecond);

        autocomplete_source.addListener('place_changed', function(event) {
            marker.setVisible(false);
            var place = autocomplete_source.getPlace();

            if (place.hasOwnProperty('place_id')) {
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }
                updateSource(place.geometry.location);
            } else {
                service.textSearch({
                    query: place.name
                }, function(results, status) {
                    if (status == google.maps.places.PlacesServiceStatus.OK) {
                        //console.log('Autocomplete Has No Property');
                        updateSource(results[0].geometry.location);
                        s_input.value = results[0].formatted_address;
                    }
                });
            }
        });

        autocomplete_destination.addListener('place_changed', function(event) {
            markerSecond.setVisible(false);
            var place = autocomplete_destination.getPlace();

            if (place.hasOwnProperty('place_id')) {
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }
                updateDestination(place.geometry.location);
            } else {
                des_service.textSearch({
                    query: place.name
                }, function(results, status) {
                    if (status == google.maps.places.PlacesServiceStatus.OK) {
                        updateDestination(results[0].geometry.location);

                        //console.log('destination', results[0]);
                        d_input.value = results[0].formatted_address;
                    }
                });
            }
        });

        function updateSource(location) {
            map.panTo(location);
            marker.setPosition(location);
            marker.setVisible(true);
            map.setZoom(15);
            updateSourceForm(location.lat(), location.lng());
            if(destination != undefined) {
                updateRoute();
            }
        }

        function updateDestination(location) {
            map.panTo(location);
            markerSecond.setPosition(location);
            markerSecond.setVisible(true);
            updateDestinationForm(location.lat(), location.lng());
            updateRoute();
        }

        function updateRoute() {
            directionsDisplay.setMap(null);
            directionsDisplay.setMap(map);

            directionsService.route({
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING,
                // unitSystem: google.maps.UnitSystem.IMPERIAL,
            }, function(result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);

                    marker.setPosition(result.routes[0].legs[0].start_location);
                    markerSecond.setPosition(result.routes[0].legs[0].end_location);

                    distance.value = result.routes[0].legs[0].distance.value / 1000;
                }
            });
        }

        function updateSourceForm(lat, lng) {
            s_latitude.value = lat;
            s_longitude.value = lng;

            source = new google.maps.LatLng(lat, lng);
        }

        function updateDestinationForm(lat, lng) {
            d_latitude.value = lat;
            d_longitude.value = lng;
            destination = new google.maps.LatLng(lat, lng);
        }

        function updateMarker(event) {

            marker.setVisible(true);
            marker.setPosition(event.latLng);

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': event.latLng}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        s_input.value = results[0].formatted_address;
                        s_state.value = '';
                        s_country.value = '';
                        s_city.value = '';
                        s_pin.value = '';
                    } else {
                        alert('No Address Found');
                    }
                } else {
                    alert('Geocoder failed due to: ' + status);
                }
            });

            updateSource(event.latLng);
        }

        function updateMarkerSecond(event) {

            markerSecond.setVisible(true);
            markerSecond.setPosition(event.latLng);

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode({'latLng': event.latLng}, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        d_input.value = results[0].formatted_address;
                        d_state.value = '';
                        d_country.value = '';
                        d_city.value = '';
                        d_pin.value = '';
                    } else {
                        alert('No Address Found');
                    }
                } else {
                    alert('Geocoder failed due to: ' + status);
                }
            });

            updateDestination(event.latLng);
        }
    }

</script>
@endsection