@extends('layouts.main')

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/beautify-marker-icon.css')}}" />
@endpush
@section('content')
<div class="row" >
    <div class="col-md-12" >
            <div class="card">         
                <div class="card-header">
                    <h1 class="form-section">{{ __('strings.geofences') }} 
                        <span class="float-sm-right"> <a href="{{route('geofences_simple_create_view')}}" class="btn btn-primary">{{__('strings.create_simple_geofence')}}</a>&nbsp;
                        <span class="float-sm-right"> <a href="{{route('geofences_multi_create_view')}}" class="btn btn-primary">{{__('strings.create_multi_geofence')}}</a>
                        </span>
                    </h1>
                </div>      
                <hr>
            <div class="card-body">                
                <div class="dashboard-widget-content">
                    <div class="col-md-6 col-sm-12 col-xs-12" style="height:500px;">
                        <div id='map'></div>
                    </div>
                    <div class="col-md-6 col-sm-12 col-xs-12">
                        <div style="height: 500px; overflow: auto;">                                               
                            <table id="geofences_table"  class="table table-hover">   
                                <thead>
                                    <tr>
                                        <th>Alias</th>
                                        <th>{{__('strings.alert_type')}}</th>
                                        <th>IMEI</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($geofences as $geofence)
                                    <tr onclick="getGeofenceData({{$geofence->ID}})" style="cursor: pointer;">
                                        <td>{{$geofence['geofence']['alias']}}</td>
                                        <td>     
                                            {{$geofence['geofence']['type']}}
                                        </td>
                                        <td>     
                                            {{$geofence['geofence']['imei']}} / {{$geofence['geofence']['device_alias']}}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
 </div>
@endsection

@push('scripts')
<script src="{{asset('js/polyline_decoder.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet-ant-path.js')}}" type="text/javascript"></script>
<script src="{{asset('js/beautify-marker-icon.js')}}" type="text/javascript"></script>
<script>
var map; // leaflet map object
var path; // leaftlet ant layer
var sMarker; // start marker
var eMarker; // end marker
var mgGroup; // group of marker for multi-geofence

var thermometerIcon = L.icon({
    iconUrl: '{{asset('images/thermometer.png')}}',
    iconSize:     [20, 20], // size of the icon
    iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, -10] // point from which the popup should open relative to the iconAnchor
 });
    
$(document).ready(function () {
    initMap();
    $('#geofences_table').DataTable({
            processing: true,
            paging: false,            
            info: false,
            dom: 'Bfrtip',
            buttons: [
                'excel'
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
            order: [[ 0, "desc" ]]
    });
});

function initMap() {
    map = new L.map('map',{attributionControl: false});
    map.setView([22.148726, -100.991923], 5);
    L.tileLayer("{{config('app.style_map_uri')}}", {
            maxZoom: 19,
    }).addTo(map);
    
    L.control.fullscreen().addTo(map);
    
    $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
        map.invalidateSize();
    });
    //resize the chart when window resize
    $(window).resize(function () {
            map.invalidateSize();
    });
    
}

function getGeofenceData(idGeofence) {
    $.showIndicator(); 
    $.post("{{route('get_geofence_data')}}", {token: "{{Auth::user()->TOKEN}}", geofence_id: idGeofence}, function(response) {
        if(response.geofence.type == "simple"){
            drawGeofence(response.geofence.polyline, 
            [response.geofence.start_location.latitude, response.geofence.start_location.longitude],
            [response.geofence.end_location.latitude, response.geofence.end_location.longitude]);
        } else {
            drawGeofence(response.geofence.polyline);
            drawMarkersForMultipleGeofence(response.geofence);
        }
        $.hideIndicator();
    }).fail(function(err){
        console.log(err);
        $.hideIndicator();
    });
}

function drawGeofence(polyline, startLocation, endLocation) {
    removeRouteLayers();
    var data = toGeoJson(polyline);
    
    waypoints = [];
    data.coordinates.forEach(function(coord) {
        waypoints.push([coord[1], coord[0]]);
    });

    if(startLocation) {
        // draw start marker
        var options = {
            iconShape: 'circle-dot'
               , borderWidth: 8
               , borderColor: '#000'
        };
        sMarker = L.marker(startLocation, { icon: L.BeautifyIcon.icon(options)}).addTo(map).bindPopup("{!!__('strings.start')!!}");
    }
    if(endLocation) {
        // draw end marker
        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 8
               , borderColor: '#000'
        };   
        eMarker = L.marker(endLocation, { icon: L.BeautifyIcon.icon(options) }).addTo(map).bindPopup("{!!__('strings.end')!!}");
    }

    path = L.polyline.antPath(waypoints,
       {"delay":1200,"dashArray":[10,20],"weight":5,"color":"#DDE9FF","pulseColor":"#008DFF","paused":false,"reverse":false}
    ).addTo(map);   
    map.fitBounds(path.getBounds(), {padding: [8, 8]});
}

function drawMarkersForMultipleGeofence(geofence) {
    mgGroup = L.layerGroup();
    geofence.locations.forEach(function (location){        
        var options = {
            isAlphaNumericIcon: true
                , text: location.alias
                , iconShape: 'marker'
                , borderColor: '#00ABDC'
                , textColor: '#00ABDC'
        };
        L.marker([location.latitude, location.longitude], { icon: L.BeautifyIcon.icon(options), draggable: false })
                .bindPopup(location.alias)
                .addTo(mgGroup);
    });
    map.addLayer(mgGroup);
}

function removeRouteLayers() {
    if(path) {
        map.removeLayer(path);
    }
    if(sMarker) {
       map.removeLayer(sMarker); 
    }
    if(eMarker) {
       map.removeLayer(eMarker); 
    }    
    if(mgGroup) {
       map.removeLayer(mgGroup); 
    }
}

</script>
@endpush