@extends('layouts.main')
@section('content')
<div class="row" >
    <div class="col-md-12" >
            <div class="card">      
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.historical') }}</h1>
            </div>  
            <hr>
            <div class="card-body">
                <div class="dashboard-widget-content">
                    <div class="col-md-7 col-sm-12 col-xs-12" style="height:500px;">
                        <div id='map'></div>
                    </div>
                    <div class="col-md-5 col-sm-12 col-xs-12">
                        <div style="height: 500px; overflow: auto;">                                               
                            <table id="devices-table"  class="table table-hover">  
                                <thead>
                                    <tr>
                                        <th>IMEI</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>   
                                    @foreach($devices as $device)
                                    <tr onclick="centerMap('{{$device->IMEI}}',{{$device['trama']['LAT']}},{{$device['trama']['LNG']}})">
                                        <td>{{$device->ALIAS == NULL ? $device->IMEI : $device->ALIAS}}</td>
                                        <td>
                                            <a href="{{route('device_hostorical_view', ['imei' => $device->IMEI])}}" target="_blank">{{__('strings.historical')}}</a><br>
                                            @if($device['trama']['LAT'] != 0 && $device['trama']['LNG'] != 0)
                                            <a href="http://maps.google.com/maps?q=&layer=c&cbll={{$device->trama->LAT}},{{$device->trama->LNG}}" target="_blank">StreetView</a>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
 </div>
@endsection

@push('scripts')
<script>
var map;    
$(document).ready(function () {    
    initMap();
    initDataTable();
});

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();
    });
    
    @foreach($devices as $device)
        @if($device['trama'] && $device->trama['LAT'] && $device->trama['LNG']) 
            addMarker({!!$device!!});
        @endif
    @endforeach
}

function initDataTable() {
    
    $('#devices-table').DataTable({
            processing: true,
            ordering: false,
            paging: false,
            info: false,
            dom: 'frtip',
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
        });
}

function centerMap(imei, lat, lng) {
    if(lat && lng) {
        map.setView([lat, lng], 15);
        deviceMarkers.get(imei).openPopup();
    }
}
</script>
@endpush