{% extends 'base_minimal.html.twig' %}

{% block body %}
	<div id="tracker_map" style="height:100%;"></div>
    <div class="map-info">
		<div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
            	<div class="row">
            		<div class="col-12 d-flex flex-row justify-content-start">
            			<img class="mr-2 rider-image" src="{{ asset(rider.getImageFile ? "uploads/" ~ rider.getImageFile : "assets/images/user.gif") }}" alt="">
            			<div class="flex-grow-1">
            				<div><strong>Order #{{ jo.getID }}</strong></div>
            				<div>{{ rider.getFullName }}</div>
            				<div class="m-badge m-badge--brand m-badge--wide">{{ service_type }}</div>
            			</div>
            		</div>
            	</div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="{{ asset('assets/js/dashboard_map.js') }}"></script>
<script src="{{ asset('assets/js/map_mqtt.js') }}"></script>
{{ include('map/' ~ map_js_file) }}
<script>

function initMap(r_markers, c_markers, icons) {
    var default_lat = {% trans %}default_lat{% endtrans %};
    var default_lng = {% trans %}default_long{% endtrans %};

    var options = {
        'display_overlay': false,
        'enable_popup': false,
        'access_token': 'pk.eyJ1Ijoia2NvcmRlcm8iLCJhIjoiY2szbzA3ZHdsMDZxdTNsbGl4ZGNnN2VxaSJ9.LRzAe3RlV8sIP1N1x0chdw',
        'div_id': 'tracker_map',
        'center_lat': default_lat,
        'center_lng': default_lng,
        'map_type': 'road',
        'zoom': 13,
        'rider_popup_url': '/riders/[id]/popup',
        'cust_popup_url': '/job-order/[id]/popup',
        'icons': icons
    };

    var dashmap = new DashboardMap(options, r_markers, c_markers);
    dashmap.initialize();
    // dashmap.loadLocations('{{ path('rider_locations') }}');

    return dashmap;
}

function initEventHandler(dashmap) {
    var options = {
        'track_jo': false,
        'track_rider': true,
        'channels': {
            'rider_location': 'rider/{{ rider.getID }}/location',
            'jo_location': 'none',
            'jo_status': 'none'
        },
    };

    var event_handler = new MapEventHandler(options, dashmap);
    event_handler.connect('tracker', '{{ mqtt_host }}', {{ mqtt_port }});
}

// create icons
var icons = {
    'rider_active_jo': L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    }),
    'rider_available': L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    }),
    'customer': L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    }),
    'hub': L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#0055FF;' class='marker-pin'></div><i class='fa fa-home awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    })
};

var r_markers = {};
var c_markers = {};
var h_markers = {};

{% set hub = jo.getHub %}
var dashmap = initMap(r_markers, c_markers, icons);
dashmap.putCustomerMarker({{ jo.getID }}, {{ jo.getCoordinates.getLatitude }}, {{ jo.getCoordinates.getLongitude }});
dashmap.putRiderActiveJOMarker({{ rider.getID }}, {{ rider_pos.getLatitude }}, {{ rider_pos.getLongitude }});
dashmap.putMarker(
    {{ hub.getID }},
    {{ hub.getCoordinates.getLatitude }},
    {{ hub.getCoordinates.getLongitude }},
    h_markers,
    icons['hub'],
    dashmap.map,
    '/'
);
initEventHandler(dashmap, icons);

</script>
{% endblock %}