@extends('layouts.main')

@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>{{$device->ALIAS}} [{{$device->IMEI}}]</h1>
                </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>            
        </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" hidden>                
                <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 table-hover mb-0">
                    <thead class="thead">
                        <tr>
                            <th>ID</th>
                            <th>ALIAS</th>
                            <th>IMEI</th>
                            <th>USER</th>
                            <th>HMR</th>
                            <th>HMR_TEST</th>
                            <th>{{__('strings.date')}}</th>
                            <th>{{__('strings.time')}}</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/vfs_fonts.js')}}" type="text/javascript"></script>
<script src="{{asset('js/leaflet-image.js')}}" type="text/javascript"></script>
<script>
var table;

    
$(document).ready(function () {
    initRangePicker();
    initDataTable({});
});


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 initDataTable() {
     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: 'USER_TESTER', name: 'USER_TESTER', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
                { data: 'HMR', name: 'HMR', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
                { data: 'HMR_TEST', name: 'HUM', defaultContent: "<i>{{__('strings.undefined')}}</i>"  },
                { 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");
                    } 
                }
                ],
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'excel',
                    /*{
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'A4'
                    }*/
                ],
                language: {
                    url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
                },
        });
     
}

function getData(startDate, endDate) {
    $.showPreloader("{{__('strings.wait_momment')}}");
     $.post( "{{route('get_device_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) {
            table.clear();
            table.rows.add(response.tramas).draw();
        } else {
            table.clear();
            table.rows.add({}).draw();
        }        
        $.hidePreloader();
    }).fail(function(error){
        $.hidePreloader();
        $.alert("{{__('errors.error')}}");
        table.clear();
        table.rows.add({}).draw();
    });
}


</script>
@endpush