@extends('layouts.main')

@section('content')
<meta http-equiv="refresh" content="300">
<div class="row" >
    <div class="col-md-12" >
            <div class="card">   
            <div class="card-header">
                <h1 class="form-section">{{ __('strings.my_devices') }}</h1>
            </div>     
            <hr>
            <div class="card-body">
                <div class="dashboard-widget-content">
                    <div class="col-md-8 col-sm-12 col-xs-12" style="height:500px;">
                        <div id='map'></div>
                    </div>
                    <div class="col-md-4 col-sm-12 col-xs-12">

                        <div style="height: 500px; overflow: auto;">                                               
                            <table id="inroute-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><input type='checkbox' class='flat' value='{{$device->IMEI}}' {{$device->IN_ROUTE ? "checked":""}} onclick="updateStatus(this,'{{$device->IMEI}}')"></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
    </div>
 </div>
<p></p>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
        <div class="card">
            <div class="table-responsive">
                <table id="devices-table" class="table hover mb-0">
                    <thead>
                        <tr>
                            <th>{{__('strings.type')}}</th>
                            <th>ALIAS</th>
                            <th>IMEI</th>
                            <th>CMD</th>
                            <th>---</th>
                            <th>LAT</th>
                            <th>LNG</th>
                            <th>DATA</th>
                            <th>HUM</th>
                            <th>PH</th>
                            <th>BAT</th>
                            <th>{{__('strings.last_report')}}</th>
                            <th>{{__('strings.date_time')}}</th>
                            <th>HIST.</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
var map;
$(document).ready(function () {
    initMap();
    
    $('#devices-table').DataTable({
            processing: true,
            data: {!!$devices->toJson()!!},
            paging: false,
            columns: [                
            { data: 'type', name: 'type', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'ALIAS', name: 'ALIAS', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'IMEI', name: 'IMEI', type: "string", defaultContent: "" },
            { data: 'trama.CMD', name: 'CMD', type: "string", defaultContent: "" },
            { data: 'trama.cmd_translate', name: 'trama.cmd_translate', type: "string", defaultContent: "" },
            { data: 'trama.LAT', name: 'LAT', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
            { data: 'trama.LNG', name: 'LNG', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
            { data: 'trama', name: 'trama',  defaultContent: "<i>{{__('strings.undefined')}}</i>", render: function(trama, type, row) { 
                    if(trama){
                        var value = "";
                        switch(trama.BEGIN) {
                            case "PJ":
                                value = trama.TEMP + "ºC";
                                break;
                            case "PM":
                                value = trama.TEMP + "ºC";
                                break;                
                            case "PH":
                                value = trama.TEMP + " PH";
                                break;
                            case "BF":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "PF":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "MVT":
                                value = trama.TEMP + " LTRS";
                                break;
                            case "ANDR":
                                value = "---";
                                break;
                        }
                        return "<font color='black'>" + value + "</font>";
                    }
                    return null
                } 
            },
            { data: 'trama.HUM', name: 'HUM', render: function(data, type, row){ return data + "%";} },
            { data: 'trama.END', name: 'END', defaultContent: "<i>{{__('strings.undefined')}}</i>" },
            { data: 'trama.BAT', name: 'BAT', render: function(data, type, row){ return data + "%";} },
            { data: 'trama.CREATED_AT', name: 'trama.CREATED_AT', render: function ( data, type, row ) {
                    if(data) {
                        return moment.utc(data).local().fromNow();
                    } else {
                        return "0000-00-00 00:00";
                    }
                } 
            },
            { data: 'trama.CREATED_AT', name: 'trama.CREATED_AT', render: function ( data, type, row ) {
                    if(data) {
                        return moment.utc(data).local().format("YYYY-MM-DD HH:mm");
                    } else {
                        return "0000-00-00 00:00";
                    }
                } 
            },
            { data: 'IMEI', name: 'IMEI', defaultContent: "", render: function(data, type, row){
                return "<a href='{{URL::to('/')}}/device/" + data + "/historical' target='_blank'>{{__('strings.historical')}}</a>";
            }},
            {data:"trama", name:"trama", defaultContent:"<i>{{__('strings.undefined')}}</i>", render: function(data, type, row){
                    if(data) {
                        return '<a href="http://maps.google.com/maps?q=&layer=c&cbll=' + data.LAT + ',' + data.LNG + '" target="_blank">StreetView</a>';
                    }
                    return null;
            }},
            ],
            dom: 'Bfrtip',
            buttons: [
                'copy', 'excel',
                /*{
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'A4'
                }*/
            ],
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
            order: [[ 12, "desc" ]],
            rowCallback: function( row, data, index ) {
                if (!data.IN_ROUTE) {
                    $(row).hide();
                }
            },
        });    
    $('#inroute-table').DataTable({
            processing: true,
            ordering: false,
            paging: false,
            info: false,
            dom: 'frtip',
            language: {
                url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
            },
        }); 
});

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

function updateStatus(checked, imei) {
    $.post( "{{route('update_device_inroute')}}",{user_token:"{{\Auth::user()->TOKEN}}", status: checked.checked, imei: imei}, function( response ) {
        $.alert(response.message, function(){            
            location.reload();
        });
    }).fail(function(error){
        $.alert("{{__('errors.error')}}");
    });
}

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