@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 col-sm-12 col-xs-12">
        <div class="card">
            <div class="card-header">
                <h1>Test Debug</h1>
            </div>
            <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>CMD</th>
                            <th>USER</th>
                            <th>HMR</th>
                            <th>HMR_TEST</th>
                            <th>{{__('strings.date')}}</th>
                            <th>{{__('strings.time')}}</th>
                            <th>RAW</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 () {
    initDataTable();
});


function initDataTable() {
     table = $('#tramas-table').dataTable({
            processing: true,
            serverSide: true,
            ajax: "{!! route('testing_debug_request') !!}",
            columns: [
                { data: 'ID', name: 'ID', defaultContent: "<i>NO DEFINIDO</i>", searchable: false},
                { data: 'trama_device.device.ALIAS', name: 'trama_device.device.ALIAS', defaultContent: "<code>NO DEFINIDO</code>", searchable:false},
                { data: 'IMEI', name: 'IMEI', type: "string", defaultContent: "" },
                { data: 'CMD', name: 'CMD', 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: 'HMR_TEST', 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");
                    } 
                },
                { data: 'RAW', name: 'RAW', defaultContent: "<i>{{__('strings.undefined')}}</i>"  }
                ],
                dom: 'Bfrtip',
                buttons: [
                    'pageLength','copy', 'excel'
                ],
                "lengthMenu": [[20, 100, 500], [20,  100, 500]],
                language: {
                    url: "{{asset('DataTables/languages')}}/{{App::getLocale()}}.json"
                },
                initComplete: function() {
                    $('#tramas-table_filter input').unbind();
                    $('#tramas-table_filter input').bind('keyup', function(e) {
                        if(e.keyCode == 13) {
                            table.fnFilter(this.value);
                        }
                    });
                }
        });
     
}
</script>
@endpush