@extends('layouts.main')
@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
@endpush
@section('content')

<div class="card">
    <div class="card-block">
        <div class="col-md-12">
            <div class="panel panel-default">                   
                
                <h1>- Mi Actividad -</h1>
                <code>La tabla se actualiza automaticamente cada 60 segundos. También, puedes dar click en el botón 'Actualizar Datos'.</code>
               <br/>
               <br/>
                <div class="cc-selector panel-body">
                    <div class="table-responsive">
                        <table id="lost_trips" class="table hover mb-0">
                            <thead class="thead-inverse">
                                <tr>   
                                    <th>Id</th> 	
                                    <th>Mensaje</th>
                                    <th>Fecha/Hora</th>
                                </tr>
                            </thead>
                            <tbody>
                               
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{asset('datatables/datatables.min.js')}}" type="text/javascript"></script>

<script>
let table = null;
$(document).ready(function () {
    // setting moment.js language
    moment.locale('es');

    // initialize trips table
    table = $('#lost_trips').DataTable({
        ajax: {
            url: "{{Auth::user()->getREST()}}user/logs",
            type: "POST",
            data: {
                token: "{{Auth::user()->SECURE_TOKEN}}"
            }
        },
        serverSide: true,
        processing: true,
        searching: false,
        paging: true,
        lengthMenu: [[10, 50, 100], [10, 50, 100]],
        columns: [
            { data: 'id', name: 'id',  defaultContent: ""},
            { data: 'message', name: 'message',  defaultContent: ""},
            { data: 'created_at', name: 'created_at', render: function(data, type, row, meta) {
                        return moment.utc(data).local().format('YYYY-MM-DD HH:mm');
                },
                defaultContent: ""
            }
        ],
        dom: 'Bfrtip',
        buttons: [ 'pageLength', 'excel', 'pdf', {
                text: 'Actualizar Datos',
                action: function ( e, dt, node, config ) {
                    window.location.reload();
                }
            } ],
        order: [],
        "language": {
                "url": "{!! asset('datatables/languages/spanish.json') !!}"
        }
    });

    setInterval(() => {
        table.ajax.reload();
    }, 60000);
});

function nipRequest(broadcastToken) {
        bootbox.prompt({
            title: "Nip",
            inputType: 'password',
            size: 'small',
            closeButton: false,
            callback: function (nip) { 
                if(nip) {      
                    deleteRequest(broadcastToken, nip);
                }
            }
        });
}

function deleteRequest(broadcastToken, nip) {
    console.log('deleteRequest',broadcastToken, nip);
    $.showPreloader("{{__('strings.processing_request')}}");
    $.post("{{Auth::user()->getREST()}}user/trips/lost/delete",{
        token: '{{Auth::user()->SECURE_TOKEN}}',
        nip: nip,
        broadcast_token: broadcastToken,
        },
    function(data) {
        $.hidePreloader();
        table.ajax.reload();
    })
    .fail(function(err) {
        console.log(err);
        $.hidePreloader();
        if(err.responseJSON) {
            $.alert(err.responseJSON.message);
        } else {
            $.alert("{{__('strings.error_message')}}");  
        }
    });
}

</script>
@endpush