@extends('layouts.main_track')

@push('styles')
<!-- Include Date Range Picker -->
<link rel="stylesheet" type="text/css" href="{{asset('css/daterangepicker.css')}}" />
<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>{{ __('strings.historical') }}</h1><code>[{{ __('strings.backup') }}]</code>
                </div>
                <div class="col-md-12">
                    <div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;" class="col-md-6">
                        <i class="fa fa-calendar"></i>&nbsp;
                        <span></span> <i class="fa fa-caret-down"></i>
                    </div>
                </div>
                <div class="card-body">
                    <div class="dashboard-widget-content">
                        <div class="col-md-6 col-sm-12 col-xs-12" style="height:650px;">
                            <div id='map'></div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12" style="height:650px;">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Gráficas</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Histórico</a>
                                </li>
                            </ul>

                            <div class="tab-content">
                                <div class="tab-pane active" id="home" role="tabpanel">
                                    <div style="height: 290px;">
                                            <div id="t_chart" style="width: 100%; height: 290px;"></div>
                                    </div>
                                    <div style="height: 290px; display: none;">
                                            <div id="ph_chart" style="width: 100%; height: 290px;"></div>
                                    </div>
                                    <div style="height: 290px;">
                                            <div id="h_chart" style="width: 100%; height: 290px;"></div>
                                    </div>
                                </div>

                                <div class="tab-pane" id="profile" role="tabpanel">
                                    <div class="table-responsive" style="height: 580px; overflow: auto;" >
                                        <h3 id="dist"></h3>
                                        <table id="tramas-mini-table" class="table hover mb-0">
                                            <thead class="thead-inverse-mini">
                                                <tr>
                                                    <th>Datos</th>
                                                </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
        </div>
    </div>
 </div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12" >
        <div class="card">
            
            <div class="col-md-1 col-sm-1 col-xs-1">                
                <button id="pdf_button" type="button" class="btn btn-primary">
                    <i id="pdfIcon" class="fa fa-file-pdf"></i> &nbsp; PDF
                </button>
            </div>
            <div class="table-responsive">
                             
                <hr>
                <table id="tramas-table" class="table hover mb-0">
                    <thead class="thead-inverse">
                        <tr>
                            <th>ID</th>
                            <th>ALIAS</th>
                            <th>IMEI</th>
                            <th>CMD</th>
                            <th>TRAD</th>
                            <th>LAT</th>
                            <th>LNG</th>
                            <th>DATA</th>
                            <th>{{$device->trama->BEGIN == 'PH' ? 'TEMP':'HUM'}}</th>
                            <th></th>
                            <th>BAT</th>
                            <th>FECHA</th>
                            <th>HORA</th>
                            <th>S.View</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript" src="{{asset('js/daterangepicker.js')}}"></script>
<script src="{{asset('js/leaflet-ant-path.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet.lineextremities.js')}}" type="text/javascript"></script>
<script src="{{asset('js/beautify-marker-icon.js')}}" type="text/javascript"></script>
<script src="{{asset('js/echarts.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/pdfmake.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/vfs_fonts.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet-image.js')}}" type="text/javascript"></script>
<script>
var map; // leaflet map object
var geoJson; // leaftlet geoJson layer
var path; // leaftlet ant layer
var sMarker; // start marker
var eMarker; // end marker
// chrar objecs
var tChart = null; // temperature chart
var hChart = null; // humidity chart
var phChart = null;
var table;
var table_mini;
    
$(document).ready(function () {
    // setting moment.js language
    moment.locale('es');
    initMap();
    initRangePicker();
    initCharts();
    initDataTable({});
    initPdfExporter();
});

function initMap() {
    map = new L.map('map',{attributionControl: true, preferCanvas: true});
    map.setView([{{$device->trama->LAT}}, {{$device->trama->LNG}}], 15);
    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();
    });
    
    addMarker({!!$device!!});
}

function initRangePicker() {
     $('#reportrange').daterangepicker({
        "timePicker": true,
        "timePicker24Hour": true,
        "locale": {
            "format": "YYYY-MM-DD HH:mm",
            "separator": " - ",
            "applyLabel": "Aceptar",
            "cancelLabel": "Cancelar",
            "fromLabel": "De",
            "toLabel": "A",
            "customRangeLabel": "Personalizado",
            "weekLabel": "S",
        }
    });
    function cb(start, end) {
        $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm') + ' - ' + end.format('YYYY-MM-DD HH:mm'));
    }

    $('#reportrange').on('apply.daterangepicker', function (ev, picker) {  
        $('#reportrange span').html(picker.startDate.format('YYYY-MM-DD HH:mm') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm'));
        getData(picker.startDate.format('YYYY-MM-DD HH:mm'), picker.endDate.format('YYYY-MM-DD HH:mm'));
    });
    
    // call business trips on load page
    cb(moment().startOf('day'),  moment().endOf('day'));
}

function initCharts() {
    //resize the chart when window resize
    $(window).resize(function () {
        if(tChart != null) {
            tChart.resize();
            hChart.resize();
            phChart.resize();
        }
    });
    tChart = echarts.init(document.getElementById('t_chart'));
    hChart = echarts.init(document.getElementById('h_chart'));
    phChart = echarts.init(document.getElementById('ph_chart'));
}

function initDataTable() {
    table_mini = $('#tramas-mini-table').DataTable({
            processing: true,
            paging: false,
            ordering: false,
            columns: [

                { data: 'CREATED_AT', name: 'CREATED_AT', render: function ( data, type, row ) {
                            if(data){
                                var value = data;
                                switch(row.BEGIN) {
                                    case "PJ":
                                        value = "ºC";
                                        break;
                                    case "PM":
                                        value = "ºC";
                                        break;                
                                    case "PH":
                                        value = " PH";
                                        break;
                                    case "BF":
                                        value =" LTRS";
                                        break;
                                    case "PF":
                                        value = " LTRS";
                                        break;
                                    case "MVT":
                                        value = " LTRS";
                                        break;
                                    case "CL":
                                        value = "mg/L Cloro";
                                        break;
                                    case "OX":
                                        value = "mg/L Oxigeno";
                                        break;
                                    case "RP":
                                        value = "mV";
                                        break;
                                    case "HT":
                                        value = "PH";
                                        break;
                                    case "ANDR":
                                        value = "---";
                                        break;
                                }
                            }
                            return moment.utc(data).local().format("YYYY-MM-DD")+" / "+moment.utc(data).local().format("HH:mm")
                            +"<br>"+"Bateria: "+row.BAT+"%" 
                            +"<br>"+"Humedad: "+row.HUM+"%" 
                            //+"<br>"+row.TEMP+value
                            +"<br>"+'<a href="https://www.google.com/maps/search/?api=1&query=' + row.LAT + ',' + row.LNG + '" target="_blank">Dirección</a>'
                            ;
                        } 
                    },
                ],
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel',{
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    }
                ],
                language: {
                    url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
                },
        });


    table = $('#tramas-table').DataTable({
            processing: true,
            paging: false,
            ordering: false,
            columns: [
                { data: 'ID', name: 'ID', defaultContent: "<i>NO DEFINIDO</i>" },
                { data: 'trama_device.device.ALIAS', name: 'trama_device.device.ALIAS', defaultContent: "<code>NO DEFINIDO</code>"},
                { data: 'IMEI', name: 'IMEI', type: "string", defaultContent: "" },
                { data: 'CMD', name: 'CMD', defaultContent: ""  },
                { data: 'cmd_translate', name: 'cmd_translate', defaultContent: ""  },
                { data: 'LAT', name: 'LAT', defaultContent: ""  },
                { data: 'LNG', name: 'LNG', defaultContent: ""  },                
                { data: 'TEMP', name: 'TEMP',  defaultContent: "", render: function(data, type, trama) { 
                        if(data){
                            var value = data;
                            switch(trama.BEGIN) {
                                case "PJ":
                                    value = data + "ºC";
                                    break;
                                case "PM":
                                    value = data + "ºC";
                                    break;                
                                case "PH":
                                    value = data + " PH";
                                    break;
                                case "BF":
                                    value = data + " LTRS";
                                    break;
                                case "PF":
                                    value = data + " LTRS";
                                    break;
                                case "MVT":
                                    value = data + " LTRS";
                                    break;
                                case "PS":
                                    value = data + " Km/s";
                                    break;
                                case "CL":
                                    value = data + " mg/L Cloro";
                                    break;
                                case "OX":
                                    value = data + " mg/L Oxigeno";
                                    break;
                                case "RP":
                                    value = data + " mV";
                                    break;
                                case "HT":
                                    value = data + " PH";
                                    break;
                                case "ANDR":
                                    value = "---";
                                    break;
                            }
                            return "<font color='black'>" + value + "</font>";
                        }
                        return null
                    } 
                },
                { data: 'HUM', name: 'HUM',  defaultContent: "", render: function(data, type, trama) { 
                        if(data != null){
                            var value = "";
                            switch(trama.BEGIN) {
                                case "PJ":
                                    value = data + "%";
                                    break;
                                case "PM":
                                    value = data + "%";
                                    break;
                                case "PS":
                                    value = data + " Km/h";
                                    break;                
                                case "PH":
                                    value = data + "%";
                                    break;
                                case "BF":
                                    value = data + "%";
                                    break;
                                case "PF":
                                    value = data + "%";
                                    break;
                                case "MVT":
                                    value = data + " LTRS";
                                    break;
                                case "CL":
                                    value = data + " ºC";
                                    break;
                                case "OX":
                                    value = data + " ºC";
                                    break;
                                case "RP":
                                    value = data + "";
                                    break;
                                case "HT":
                                    value = data + " ºC";
                                    break;
                                case "ANDR":
                                    value = "---";
                                    break;
                            }
                            return "<font color='black'>" + value + "</font>";
                        }
                        return null
                    } 
                },
                { data: 'END', name: 'END', defaultContent: "---" },
                { data: 'BAT', name: 'BAT', render: function(data, type, row){ return data + "%";} },
                { data: 'CREATED_AT', name: 'CREATED_AT', render: function ( data, type, row ) {
                        return moment.utc(data).local().format("YYYY-MM-DD");
                    } 
                },
                { data: 'CREATED_AT', name: 'CREATED_AT', render: function ( data, type, row ) {
                        return moment.utc(data).local().format("HH:mm");
                    } 
                },
                {data:"ID", name:"trama", defaultContent:"<i>{{__('strings.undefined')}}</i>", render: function(data, type, row){
                        if(row) {
                            return '<a href="http://maps.google.com/maps?q=&layer=c&cbll=' + row.LAT + ',' + row.LNG + '" target="_blank">StreetView</a>';
                        }
                        return null;
                }}
                ],
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel',{
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    }
                ],
                language: {
                    url: "{{asset('DataTables/languages/spanish.json')}}"
                },
        }); 
}

function initPdfExporter() {
    document.getElementById('pdf_button').onclick = function(){       
        document.getElementById('pdfIcon').className = 'fa fa-circle-notch fa-spin fa-3x';
        if(path) {
            map.fitBounds(path.getBounds());
            map.removeLayer(path);
        }
        if(sMarker) {
           map.removeLayer(sMarker); 
        }
        if(eMarker) {
           map.removeLayer(eMarker); 
        }
        leafletImage(map, function(err, canvas) {
            // now you have canvas
            makePDF(table, canvas.toDataURL());
        });
    };
}


function getData(startDate, endDate) {
    $.showPreloader("{{__('strings.wait_momment')}}");
     $.post( "{{route('get_device_backup_data')}}",{
         imei: "{{$device->IMEI}}",
         start_date: moment(startDate).utc().format('YYYY-MM-DD HH:mm'),
         end_date: moment(endDate).utc().format('YYYY-MM-DD HH:mm')
     }, function( response ) {
         // replace 0's on temp, hum and ph with last data.
         if(response.tramas.length) {
            for(var id in response.tramas) {             
               if(response.tramas[id].TEMP == 85) {response.tramas.TEMP = 0; }
               if(id > 0 ) {
                    // Set current values equal to latest (id - 1) if there are equal to zero
                    if(response.tramas[id].TEMP == 0){
                        response.tramas[id].TEMP = response.tramas[id - 1].TEMP;
                    }
                    if(Math.floor(response.tramas[id].LAT) == 0){
                        response.tramas[id].LAT = response.tramas[id - 1].LAT;
                        response.tramas[id].LNG = response.tramas[id - 1].LNG;
                    }                    
                    if(response.tramas[id].HUM == 0 || response.tramas[id].HUM == -1){
                        response.tramas[id].HUM = response.tramas[id - 1].HUM;
                    }                      
                    if(response.tramas[id].BAT == 0){
                        response.tramas[id].BAT = response.tramas[id - 1].BAT;
                    }     
                    if(response.tramas[id].trama_device == null) {
                        response.tramas[id].trama_device = response.tramas[id - 1].trama_device;
                    }             
               }               
            }
            drawRoute(response.tramas);
            updateCharts(response.tramas);
            table.clear();
            table.rows.add(response.tramas).draw();
            table_mini.clear();
            table_mini.rows.add(response.tramas).draw();
        }        
        $.hidePreloader();
    }).fail(function(error){
        console.log(error);
        $.hidePreloader();
        $.alert("{{__('errors.error')}}");
        table.clear();
        table.rows.add({}).draw();
        table_mini.clear();
        table_mini.rows.add({}).draw();
    });
}

/**
 * Draw trip from given data (tramas). 
 * If the length of data is greater than 1500 or if route service response 
 * with error, the draw route are just the join of given data.
 * @param {type} tramas
 * @returns {undefined}
 */
function drawRoute(tramas) {
    var apiUrl = "https://mapas.rtplataforma.com:8444/route/v1/driving/#cords?overview=full&geometries=geojson";
    var waypoints = [];
    
    tramas.forEach(function(trama) {
        if(trama.LAT != 0 && trama.LNG != 0) {
            waypoints.push([trama.LNG, trama.LAT]);
        }
    });
    
    // if length of points are lower than 1500, draw road route, else just join the points with a polyline.
    if(tramas.length < 1500){    
        // http request to redtrack route api
        $.getJSON(apiUrl.replace('#cords', waypoints.join(";")), function (json){ 
            
            removeRouteLayers();
            
            geoJson = L.geoJson(json.routes[0].geometry,{
                style: {
                    weight: 6,
                    color: "#42a5f5"
                }
            }).addTo(map); 
            
            waypoints = [];
            json.routes[0].geometry.coordinates.forEach(function(coord) {
                waypoints.push([coord[1], coord[0]]);
            });
            
            // draw start marker
            var options = {
                iconShape: 'circle-dot'
                   , borderWidth: 8
                   , borderColor: '#000'
            };
            sMarker = L.marker(waypoints[0], { icon: L.BeautifyIcon.icon(options)}).addTo(map).bindPopup("{!!__('strings.start')!!}");

            // draw end marker
            options = {
                iconShape: 'rectangle-dot'
                   , borderWidth: 8
                   , borderColor: '#000'
            };

            eMarker = L.marker(waypoints[waypoints.length - 1], { 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}
            );

            var distK = (json.routes[0].distance/1000).toFixed(2);
            document.getElementById("dist").innerHTML = "{!!__('strings.distance_traveled')!!}:  "+distK+"Km";
    
            //path.showExtremities('dotM');
            map.addLayer(path);             
            map.fitBounds(path.getBounds());
        }).fail(function(err) {
            removeRouteLayers();
            
            geoJson = L.geoJson({coordinates: waypoints, type: "LineString"},{
                style: {
                    weight: 6,
                    color: "#42a5f5"
                }
            }).addTo(map);
            
            waypoints = [];
            tramas.forEach(function(trama) {
                if(trama.LAT != 0 && trama.LNG != 0) {
                    waypoints.push([trama.LAT, trama.LNG]);
                }
            });
            
            // draw start marker
            var options = {
                iconShape: 'circle-dot'
                   , borderWidth: 8
                   , borderColor: '#000'
            };
            sMarker = L.marker(waypoints[0], { icon: L.BeautifyIcon.icon(options)}).addTo(map).bindPopup("{!!__('strings.start')!!}");

            // draw end marker
            options = {
                iconShape: 'rectangle-dot'
                   , borderWidth: 8
                   , borderColor: '#000'
            };

            eMarker = L.marker(waypoints[waypoints.length - 1], { 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}
            );
            
            path.showExtremities('dotM');
            map.addLayer(path);             
            map.fitBounds(path.getBounds());
        });
    } else {        
        document.getElementById("dist").innerHTML = "No se puede estimar esa distancia";
        removeRouteLayers();
        
        geoJson = L.geoJson({coordinates: waypoints, type: "LineString"},{
                style: {
                    weight: 6,
                    color: "#42a5f5"
                }
            }).addTo(map);
            
        waypoints = [];
        tramas.forEach(function(trama) {
            if(trama.LAT != 0 && trama.LNG != 0) {
                waypoints.push([trama.LAT, trama.LNG]);
            }
        });
        
        // draw start marker
        var options = {
            iconShape: 'circle-dot'
               , borderWidth: 8
               , borderColor: '#000'
        };
        sMarker = L.marker(waypoints[0], { icon: L.BeautifyIcon.icon(options)}).addTo(map).bindPopup("{!!__('strings.start')!!}");

        // draw end marker
        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 8
               , borderColor: '#000'
        };

        eMarker = L.marker(waypoints[waypoints.length - 1], { 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}
        );

        path.showExtremities('dotM');
        map.addLayer(path);             
        map.fitBounds(path.getBounds());
    }
}

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

function updateCharts(tramas) {
    var serie = [];
    for(var id in tramas) {
        var milis = moment(moment.utc(tramas[id].CREATED_AT)).local().unix();
        serie.push({date: milis, temp1: parseFloat(tramas[id].TEMP), temp2: (parseFloat(tramas[id].TEMP).toFixed(3) * 1.8 + 32).toFixed(3), hum: parseFloat(tramas[id].HUM), ph: parseFloat(tramas[id].END), cmd: tramas[id].CMD, json:tramas[id]});
    }
    tChart.clear();
    hChart.clear();
    phChart.clear();
    // draw temperature chart
    tChart.setOption(getTempOption(serie));
    hChart.setOption(getHumOption(serie));
    phChart.setOption({});
}

/**
 * Gets temperature serie's data format 
 * @param {type} data
 * @return {Array}     */
function getTempOption(data) {
    @php
    $sName = "TEMP";
    switch($device->trama->BEGIN){
        case "MVT":
            $sName = "LTRS";
            break;
        case "BF":
            $sName = "LTRS";
            break;
        case "PS":
            $sName = "LTRS";
            break;
        case "PH":
            $sName = "PH";
            break;
        case "CL":
            $sName = "mg/L Cloro";
            break;
        case "OX":
            $sName = "mg/L Oxigeno";
            break;
        case "RP":
            $sName = "mV";
            break;
        case "HT":
            $sName = "PH";
            break;
    }
    @endphp
    var serieName = '{{$sName}}';
    for (var i in data) {
        data[i].cmd = data[i].cmd === 'OFF' ? "<li class='fa fa-lightbulb-o no-ligth' arial-hidden='true'></i>" : "<li class='fa fa-lightbulb-o ligth' arial-hidden='true'></i>";
    }
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var item = data[params[0].dataIndex];
                if (item.json.LAT != 0.00 && item.json.LNG != 0.00) {
                    var popup = '<div id="content">';
                        popup += ' <b>' + serieName + ': </b>' + item.json.TEMP;
                        popup += ' <br><b>BAT: </b>' + item.json.BAT;
                        popup += ' <br><b>CMD: </b>' + item.json.CMD; 
                        popup += ' <br><b>TRAD: </b>' + item.json.cmd_translate;
                        popup += ' <br>' + moment.utc(item.json.CREATED_AT).local().format('YYYY/MM/DD HH:mm');
                        popup += '</div>';
                        L.popup()
                        .setLatLng([item.json.LAT, item.json.LNG])
                        .setContent(popup)
                        .openOn(map);
                        map.setView([item.json.LAT, item.json.LNG], map.getZoom());
                        
                }
                if(serieName == "LTRS") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + ' LTRS<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "PH") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + ' PH<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "mg/L Cloro") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + ' mg/L Cloro<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "mg/L Oxigeno") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + ' mg/L Oxigeno<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "mV") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + ' mV<br>'
                        + item.json.cmd_translate;
                }  else {                    
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.temp1 + '°C<br>'
                        + item.temp2 + '°F<br>'
                        + item.json.cmd_translate;
                }
            },
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#e0e0e0',
            borderWidth: 1,
            extraCssText: 'text-align: center',
            textStyle: {
                color: '#000000'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    return moment.unix(value).format("MMM/DD");
                }
            }
        },
        yAxis: {
            name: serieName,
            nameLocation: 'middle',
            nameGap: 25,
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
        },
        toolbox: {
            feature: {
                saveAsImage: {title: 'Save',name:'chart',type:'png'}
            }
        },
        series: [
            {
                name: serieName,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                showSymbol: true,
                showAllSymbol: true,
                symbolSize: 5,
                lineStyle: {
                    normal: {
                        color: '#00B0FF',
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#00B0FF'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#e0f2f1'
                            }, {
                                offset: 1,
                                color: '#00B0FF'
                            }])
                    }
                },
                data: data.map(function (item) {
                    return item.temp1
                }),
                markLine: {
                    data: [{type: 'average', name: 'Max.'}]
                }
            }
        ]
    };
    return option;
}

/**
 * Gets humidity serie's data format 
 * @param {type} data
 * @return {Array}     */
function getHumOption(data) {
    @php
    $sName = "HUM";
    switch($device->trama->BEGIN){
        case "MVT":
            $sName = "DATA";
            break;
        case "BF":
            $sName = "DATA";
            break;
        case "PS":
            $sName = "VEL";
            break;
        case "PH":
            $sName = "TEMP";
            break;
        case "CL":
            $sName = "ºC";
            break;
        case "OX":
            $sName = "ºC";
            break;
        case "RP":
            $sName = "";
            break;
        case "HT":
            $sName = "ºC";
            break;
    }
    @endphp
    var temh;
    var serieName = '{{$sName}}';
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var item = data[params[0].dataIndex];
                if (item.json.LAT != 0.00 && item.json.LNG != 0.00) {
                    if(serieName == "VEL"){
                        temh = item.json.HUM;;
                    }else{
                        temh = item.json.TEMP;
                    }
                    var popup = '<div id="content">';
                        popup += ' <b>' + serieName + ': </b>' + temh;
                        popup += ' <br><b>BAT: </b>' + item.json.BAT;
                        popup += ' <br><b>CMD: </b>' + item.json.CMD;  
                        popup += ' <br><b>TRAD: </b>' + item.json.cmd_translate;
                        popup += ' <br>' + moment.utc(item.json.CREATED_AT).local().format('YYYY/MM/DD HH:mm');
                        popup += '</div>';
                        L.popup()
                        .setLatLng([item.json.LAT, item.json.LNG])
                        .setContent(popup)
                        .openOn(map);
                        map.setView([item.json.LAT, item.json.LNG], map.getZoom());
                }
                
                if(serieName == "TEMP") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + item.hum + ' ºC<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "VEL") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + 'VEL: ' + item.hum + 'Km/h<br>'
                        + item.json.cmd_translate;
                } else if (serieName == "ºC") {                                   
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") + '</b><br>'
                        + 'TEMP: ' + item.hum + 'ºC<br>'
                        + item.json.cmd_translate;
                } else {
                    return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") 
                        + '</b><br>'
                        + 'HUM: ' + item.hum + '%<br>'
                        + item.json.cmd_translate;
                }
            },
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#e0e0e0',
            borderWidth: 1,
            extraCssText: 'text-align: center',
            textStyle: {
                color: '#000000'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    return moment.unix(value).format("MMM/DD");
                }
            }
        },
        yAxis: {
            name: serieName,
            nameLocation: 'middle',
            nameGap: 25,
            type: 'value',
            min: -10,
            max: 100,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {title: 'Save',name:'chartHum',type:'png'}
            }
        },
        series: [
            {
                name: serieName,
                type: 'line',
                smooth: true,
                symbol: 'circle',
                showSymbol: true,
                itemStyle: {
                    normal: {
                        color: '#E65100'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FFE082'
                            }, {
                                offset: 1,
                                color: '#E65100'
                            }])
                    }
                },
                data: data.map(function (item) {
                    return item.hum
                }),
                markLine: {
                    data: [{type: 'average', name: 'Max.'}]
                }
            }
        ]
    };
    return option;
}

/**
 * Gets ph serie's data format 
 * @param {type} data
 * @return {Array}     */
function getPhOption(data) {
    var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var item = data[params[0].dataIndex];
                if (item.json.LAT != 0.00 && item.json.LNG != 0.00) {
                    var popup = '<div id="content">';
                        popup += ' <br><b>TEMP: </b>' + item.json.TEMP;
                        popup += ' <br><b>HUM: </b>' + item.json.HUM;
                        popup += ' <br><b>BAT: </b>' + item.json.BAT;
                        popup += ' <br><b>PH: </b>' + item.json.END;    
                        popup += ' <br><b>CMD: </b>' + item.json.CMD;
                        popup += ' <br><b>TRAD: </b>' + item.json.cmd_translate;
                        popup += ' <br>' + moment.utc(item.json.CREATED_AT).local().format('YYYY/MM/DD HH:mm');
                        popup += '</div>';
                        L.popup()
                        .setLatLng([item.json.LAT, item.json.LNG])
                        .setContent(popup)
                        .openOn(map);
                        map.setView([item.json.LAT, item.json.LNG], map.getZoom());
                }
                return  '<b>' + moment.unix(item.date).format("YYYY/MM/DD HH:mm:ss") 
                        + '</b><br>'
                        + 'PH: ' + item.ph + '%<br>'
                        + item.json.cmd_translate;
            },
            backgroundColor: 'rgba(255,255,255,0.9)',
            borderColor: '#e0e0e0',
            borderWidth: 1,
            extraCssText: 'text-align: center',
            textStyle: {
                color: '#000000'
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(function (item) {
                return item.date;
            }),
            axisLabel: {
                formatter: function (value, idx) {
                    return moment.unix(value).format("MMM/DD");
                }
            }
        },
        yAxis: {
            name: 'PH',
            nameLocation: 'middle',
            nameGap: 25,
            type: 'value',
            min: -10,
            max: 100,
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {title: 'Save',name:'chartHum',type:'png'}
            }
        },
        series: [
            {
                name: 'PH',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                showSymbol: true,
                itemStyle: {
                    normal: {
                        color: '#E65100'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FFE082'
                            }, {
                                offset: 1,
                                color: '#E65100'
                            }])
                    }
                },
                data: data.map(function (item) {
                    if (isNaN(item.ph)) {
                        return 0;
                    }
                    return item.ph;
                }),
                markLine: {
                    data: [{type: 'average', name: 'Max.'}]
                }
            }
        ]
    };
    return option;
}


/**
 * Generates pdf document
 * @return {undefined}
 */
function makePDF(datatable, mapDataUrl) {
    var pdfData = [];
    var rows = datatable.data().toArray();
    var dataColum = "";
    var dataColumSec = "";

    if(rows.length <= 0) {
        document.getElementById('pdfIcon').className = 'fa fa-file-pdf';
        return;
    }
    //gets first and last data
    var firstData = rows[0];
    var endData = rows[rows.length - 1];
    //generates json objects
    if(rows){
        switch(firstData.BEGIN) {
            case "PJ":
            dataColum =" TEMP_C";
            dataColumSec =" HUM";
                break;
            case "PM":
            dataColum =" TEMP_C";
            dataColumSec =" HUM";
                break;                
            case "PH":
            dataColum = " PH";
            dataColumSec = " TEMP";
                break;
            case "BF":
            dataColum = " LTRS";
            dataColumSec = " DATA";
                break;
            case "PF":
            dataColum =" LTRS";
            dataColumSec =" HUM";
                break;
            case "MVT":
            dataColum = " LTRS";
            dataColumSec = " DATA";
                break;
            case "PS":
            dataColum = " LTRS";
            dataColumSec = " VEL";
                break;
            case "CL":
                dataColum = " mg/L de Cloro";
                dataColumSec = " ºC";
                break;
            case "OX":
                dataColum = " mg/L de Oxigeno";
                dataColumSec = " ºC";
                break;
            case "RP":
                dataColum = " mV";
                dataColumSec = " ";
                break;
            case "HT":
                dataColum = " PH";
                dataColumSec = " ºC";
                break;
            case "ANDR":
            dataColum = "---";
            dataColumSec = "---";
                break;
        }
    }

    firstData = {
        ALIAS: firstData.ALIAS,
        DATE: firstData.DATE,
        TIME: firstData.TIME,
        CMD: (firstData.CMD === '1' ? "ON" : "OFF"),
        [dataColum]: firstData.TEMP,
        HUM: firstData.HUM,
        LAT: firstData.LAT,
        LNG: firstData.LNG,
        IMEI: firstData.IMEI
    };
    endData = {
        ALIAS: endData.ALIAS,
        DATE: endData.DATE,
        TIME: endData.TIME,
        CMD: (endData.CMD === '1' ? "ON" : "OFF"),
        [dataColum]: endData.TEMP,
        HUM: firstData.HUM,
        LAT: endData.LAT,
        LNG: endData.LNG,
        IMEI: endData.IMEI
    };
    var minTemp = firstData;
    var maxTemp = firstData;
    var minHum = firstData;
    var maxHum = firstData;
    var avgTemp = 0;
    var avgHum = 0;
    //calculating min, max, mean and generating pdfData json array
    rows.forEach(function (row) {
        // min and max temperature
        if (parseFloat(row.TEMP) < parseFloat(minTemp.dataColum)) {
            minTemp = {
                DATE: row.DATE,
                TIME: row.TIME,
                CMD: row.CMD,
                [dataColum]: row.TEMP,
                HUM: firstData.HUM,
                LAT: row.LAT,
                LNG: row.LNG,
                IMEI: row.IMEI
            };
        }
        if (parseFloat(row.TEMP) > parseFloat(maxTemp.dataColum)) {
            maxTemp = {
                DATE: row.DATE,
                TIME: row.TIME,
                CMD: row.CMD,
                [dataColum]: row.TEMP,
                [dataColumSec]: firstData.HUM,
                LAT: row.LAT,
                LNG: row.LNG,
                IMEI: row.IMEI
            };
        }
        
        // min and max humidity
        if (parseFloat(row.TEMP) < parseFloat(minHum.HUM)) {
            minHum = {
                DATE: row.DATE,
                TIME: row.TIME,
                CMD: row.CMD,
                [dataColum]: row.TEMP,
                HUM: firstData.HUM,
                LAT: row.LAT,
                LNG: row.LNG,
                IMEI: row.IMEI
            };
        }
        if (parseFloat(row[8]) > parseFloat(maxHum.HUM)) {
            maxHum = {
                DATE: row.DATE,
                TIME: row.TIME,
                CMD: row.CMD,
                [dataColum]: row.TEMP,
                HUM: firstData.HUM,
                LAT: row.LAT,
                LNG: row.LNG,
                IMEI: row.IMEI
            };
        }
        
        avgTemp += parseFloat(row.TEMP);
        avgHum += parseFloat(row.HUM);
        var timeDate =  moment.utc(row.DATE + " " + row.TIME);
        pdfData.push({
                DATE: timeDate.local().format("YYYY-MM-DD"),
                TIME: timeDate.local().format("HH:mm") ,
                CMD: row.CMD,
                [dataColum]: row.TEMP,
                [dataColumSec]: row.HUM,
                LAT: row.LAT,
                LNG: row.LNG,
                IMEI: row.IMEI
        });
    });
    avgTemp = (avgTemp / pdfData.length).toFixed(2);
    avgHum = (avgHum / pdfData.length).toFixed(2);
    var alias = firstData.IMEI;
    var fileName = "pdfReport_" + alias + '_' + moment().format("YYMMDDhhmmss");
    var createdAt = moment().format("YYYY-MM-DD_HH.mm.ss");
    //calculating elapsed time beetwen fisrt and last trama
    var firstDate = moment(firstData.DATE + ' ' + firstData.TIME);
    var endDate = moment(endData.DATE + ' ' + endData.TIME);
    var elapsedTime = moment.duration(firstDate.diff(endDate));

    function buildTableBody(data) {
        var body = [];
        var labels = [];

        var item0 = data[0];
        for(var label in item0) {
            labels.push(label);
        }
        body.push(labels);

        data.forEach(function (row) {
            var dataRow = [];
            for(var index in row){
                dataRow.push(row[index].toString());
            }
            body.push(dataRow);
        });
        return body;
    }

    function table(data) {
        return {columns: [
                {width: '*', text: ''},
                {
                    style: 'tableExample',
                    width: 'auto',
                    table: {
                        headerRows: 1,
                        body: buildTableBody(data)
                    },
                    layout: 'lightHorizontalLines'
                },
                {width: '*', text: ''}
            ]};
    }
    
    var dd = {
        header:{
                columns: [
                    {
                        text:  '{{ __("strings.file_name") }} : ' + fileName + '\n {{ __("strings.created_at") }}: ' + createdAt, style: 'small',margin: [40, 10, 0, 0]
                    },
                    {
                        text: 'REDTRACK', style: 'tableHeader', alignment: 'right', margin: [0, 10, 40, 0],fontSize: 20, color: 'red', fontStyle: 'open-sans'
                    }
                ]
        },
        footer:function(currentPage, pageCount){
            return {text:'Page ' + currentPage.toString() + ' of ' + pageCount,
                    style: 'small',
                    margin: [40, 10, 0, 0]
            };
        },
        content: [
            {
                style: 'tableExample',
                table: {
                    body: [
                        [                            
                            {text: '{{ __("strings.data_report") }}', border: [false, false, false, false], style: 'header'},
                        ]
                    ]
                }
            },
            {text: '[notas]', style: 'small', margin: [0, 0, 0, 8]},
            {
                columns: [
                    {
                        text: '{{ __("strings.device_configuration") }}', style: 'tableHeader'
                    }
                ]
            },
            {
                style: 'tableExample',
                table: {
                    widths: ['*', '*'],
                    body: [
                        [
                            [
                                {
                                    table: {
                                        widths: ['*', '*'],
                                        body: [
                                            ['{{ __("strings.device") }}: {{$device->ALIAS}}', 'Firmware: 1.0.1'],
                                            ['{{ __("strings.serial_number ") }}: {{$device->IMEI}}', '{{ __("strings.interval_cycle") }}: 10 min'],
                                            ['{{ __("strings.serial_model") }}: PD', '']
                                        ]
                                    },
                                    layout: 'noBorders'
                                }
                            ],
                            [
                                {
                                    table: {
                                        widths: ['*'],
                                        body: [
                                            ['{{ __("strings.trip_number") }}: {{$device->IMEI}}']
                                        ]
                                    },
                                    layout: 'noBorders'
                                }
                            ]
                        ]
                    ]
                }
            },
            {text: '{{ __("strings.device_information") }}', style: 'tableHeader', margin: [0, 10, 0, 0]},
            {
                style: 'tableExample',
                table: {
                    widths: ['*'],
                    body: [
                        [
                            [
                                {
                                    table: {
                                        widths: ['*', '*'],
                                        body: [
                                            ['{{ __("strings.carrier") }}: {{$device->CARRIER}}', '{{ __("strings.bill") }}:  {{$device->INVOICE}}'],
                                            ['{{ __("strings.commodity") }}: {{$device->COMMODITY}}', '{{ __("strings.personalized") }} 1:  {{$device->CUSTOM_1}}'],
                                            ['{{ __("strings.plates") }}: {{$device->PLATES}}' , '{{ __("strings.personalized") }} 2:  {{$device->CUSTOM_2}}'],
                                            ['{{ __("strings.truck") }}: {{$device->TRUCK}}' , '--']
                                        ]
                                    },
                                    layout: 'noBorders'
                                }
                            ]
                        ]
                    ]
                }
            },
            {text: '{{ __("strings.registration_summary") }}', style: 'tableHeader', margin: [0, 10, 0, 0]},
            {
                style: 'tableExample',
                table: {
                    widths: ['*'],
                    body: [
                        [
                            [
                                {
                                    table: {
                                        widths: ['*', '*'],
                                        body: [
                                            ['{{ __("strings.highest_data") }}'+ dataColum +': '+ maxTemp[dataColum] + '@' + maxTemp.DATE + ' ' + maxTemp.TIME, '{{ __("strings.start_time") }}: ' + firstData.DATE + ' ' + firstData.TIME],
                                            ['{{ __("strings.lowest_data") }}'+ dataColum +': '+ minTemp[dataColum] + '@' + minTemp.DATE + ' ' + minTemp.TIME, '{{ __("strings.end_time") }}: ' + endData.DATE + ' ' + endData.TIME],
                                            ['{{ __("strings.data_media") }}'+ dataColum +': ' + avgTemp + dataColum, '{{ __("strings.data_points") }}: ' + pdfData.length],
                                            ['---', '{{ __("strings.length_of_the_trip") }}: ' + elapsedTime.days() + 'd' + elapsedTime.hours() + 'h' + elapsedTime.minutes() + 'm']
                                        ]
                                    },
                                    layout: 'noBorders'
                                }
                            ]
                        ]
                    ]
                }
            },
            
            {
                style: 'tableExample',
                pageBreak: 'after',
                table: {
                    widths: ['*'],
                    body: [
                        [
                            [
                                {
                                    table: {
                                        widths: ['*', '*'],
                                        body: [
                                            ['{{ __("strings.highest_data") }}'+ dataColumSec+': ' + maxHum.HUM + '@' + maxHum.DATE + ' ' + maxHum.TIME, '{{ __("strings.start_time") }}: ' + firstData.DATE + ' ' + firstData.TIME],
                                            ['{{ __("strings.lowest_data") }}'+ dataColumSec +': '+ minHum.HUM + '@' + minHum.DATE + ' ' + minHum.TIME, '{{ __("strings.end_time") }}: ' + endData.DATE + ' ' + endData.TIME],
                                            ['{{ __("strings.data_media") }}'+ dataColumSec +': '+ avgHum + '°%', '{{ __("strings.data_points") }}: ' + pdfData.length],
                                            ['---', '{{ __("strings.length_of_the_trip") }}: ' + elapsedTime.days() + 'd' + elapsedTime.hours() + 'h' + elapsedTime.minutes() + 'm']
                                        ]
                                    },
                                    layout: 'noBorders'
                                }
                            ]
                        ]
                    ]
                }
            },
            {text: 'Tabla de temperatura.', style: 'tableHeader', margin: [0, 8, 0, 8]},
            {
                image: "tempChartImage", margin: [0, 10, 0, 0], width: 480
            },
            {text: 'Tabla de humedad.', style: 'tableHeader', margin: [0, 8, 0, 8]},
            {
                image: "humChartImage",pageBreak: 'after', margin: [0, 10, 0, 0], width: 480
            },
            /*{text: 'Tabla de PH.', style: 'tableHeader', margin: [0, 8, 0, 8]},
            {
                image: "phChartImage",pageBreak: 'after', margin: [0, 10, 0, 0], width: 480
            },*/
            {text: 'Ruta.', style: 'tableHeader', margin: [0, 8, 0, 8]},
            {
                image: "mapImage", margin: [0, 10, 0, 0], width: 520
                
            },
            {text: 'Data.', style: 'tableHeader', margin: [0, 8, 0, 8]},
            table(pdfData)
        ],
	images: {
            mapImage: mapDataUrl,
            tempChartImage: tChart.getDataURL({pixelRatio: 2, backgroundColor: '#fff'}),  
            humChartImage: hChart.getDataURL({pixelRatio: 2, backgroundColor: '#fff'}),   
            //phChartImage: phChart.getDataURL({pixelRatio: 2, backgroundColor: '#fff'}), 
        }, 
        styles: {
            header: {
                fontSize: 28,
                bold: true
            },
            subheader: {
                fontSize: 15,
                bold: true
            },
            quote: {
                italics: true
            },
            small: {
                fontSize: 8
            },
            tableExample: {
                margin: [0, 3, 0, 5],
                fontSize: 9
            },
            tableHeader: {
                bold: true,
                fontSize: 13,
                color: 'black'
            }
        }
    };
    
    pdfMake.createPdf(dd).download(fileName + '.pdf',function(){
        document.getElementById('pdfIcon').className = 'fa fa-file-pdf';
    });
}
</script>
@endpush