@extends('layout')

@section('css_includes')
    <style>
        #map {
            height: 500px;
        }
    </style>
@endsection

@section('content')
    <!-- top tiles -->
    <div class="row tile_count">
        <div class="animated flipInY col-md-3 col-sm-3 col-xs-6 tile_stats_count">
            <div class="left"></div>
            <div class="right">
                <span class="count_top"><i class="fa fa-user"></i> Total Clients</span>
                <div class="count">0</div>
            </div>
        </div>
        <div class="animated flipInY col-md-3 col-sm-3 col-xs-6 tile_stats_count">
            <div class="left"></div>
            <div class="right">
                <span class="count_top"><i class="fa fa-user"></i> Drivers</span>
                <div class="count">0</div>
            </div>
        </div>
        <div class="animated flipInY col-md-3 col-sm-3 col-xs-6 tile_stats_count">
            <div class="left"></div>
            <div class="right">
                <span class="count_top"><i class="fa fa-user"></i> Owners</span>
                <div class="count">0</div>
            </div>
        </div>
        <div class="animated flipInY col-md-3 col-sm-3 col-xs-6 tile_stats_count">
            <div class="left"></div>
            <div class="right">
                <span class="count_top"><i class="fa fa-user"></i> Passengers</span>
                <div class="count">0</div>
            </div>
        </div>
    </div><!-- /top tiles -->

    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
                <div class="x_content">
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js_includes')
    <script>
        // Note: This example requires that you consent to location sharing when
        // prompted by your browser. If you see the error "The Geolocation service
        // failed.", it means you probably did not give permission for the browser to
        // locate you.
        var map, infoWindow;
        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 6
            });
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {

                    $.post('{{ url("user/updateLocation/" . Auth::user()->id) }}', {
                        current_lat: position.coords.latitude,
                        current_long: position.coords.longitude
                    },
                    function(data, status){
                        alert("Data: " + data + "\nStatus: " + status);
                    });

                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    infoWindow.open(map);
                    map.setCenter(pos);
                }, function() {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }
        }

        function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                'Error: The Geolocation service failed.' :
                'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCakDhk3YWotD-Qc4ZxPtO2E5yYGFAYxGI&callback=initMap"></script>
@endsection