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

{% block stylesheets %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
{% endblock %}

{% block body %}
    <div id="dashboard_map" style="height:100%;z-index:2"></div>
    <!-- BEGIN: Subheader -->
    <!-- END: Subheader -->
{% 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>
{% if dashboard_enable == 'true' %}
    {{ include('map/' ~ map_js_file) }}
{% endif %}
<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': true,
        'enable_popup': true,
        'access_token': '{{ maptiler_api_key }}',
        'div_id': 'dashboard_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,
        'rider_availability_url': '{{ absolute_url('/riders/[id]/available')|raw }}'
    };

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

    return dashmap;
}

function initEventHandler(dashmap, icons, ssl) {
    var options = {
        'track_jo': true,
        'track_rider': true,
        'channels': {
            'rider_location': 'rider/+/location',
            'rider_status': 'rider/+/status',
            'jo_location': 'jo/+/location',
            'jo_status': 'jo/+/status',
            'jo_origin': 'jo/+/origin',
            'rider_availability': 'rider/+/availability',
        },
    };

    var event_handler = new MapEventHandler(options, dashmap, ssl);
    event_handler.connect('{{ app.user.getID }}', '{{ mqtt_host }}', {{ mqtt_port }});
}

{% if dashboard_enable == 'true' %}
// 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]
    }),
    'mobile_customer': L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#A200FF;' class='marker-pin'></div><i class='fa fa-user awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    })
};

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

    var ssl = false;
    {% if ssl_enable == 'true' %}
        ssl = true;
    {% endif %}

    var dashmap = initMap(r_markers, c_markers, icons);
    initEventHandler(dashmap, icons, ssl);
{% endif %}

</script>
{% endblock %}