@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>Viajes Pendientes</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></th>        	
                                    <th>Id de Viaje</th> 	
                                    <th>Precio</th>
                                    <th>Pasajeros</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/trips/lost",
            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: 'broadcast_token', render: function(data, type, row) {
                return `<button type="button" class="btn btn-sm btn-danger" onclick="nipRequest(\'${data}\')"><i class="fa fa-trash"></i></button>`;
            }, defaultContent: ''},
            { data: 'id', name: 'id',  defaultContent: ""},
            { data: 'data.trip_fare.rate', name: 'data.trip_fare.rate',  defaultContent: ""},
            { data: 'data.data.locations', render: function(data, type, row) { 
                    if(data) {
                        var result = "";
                        for(var id in data) {
                            if( data[id].employee_number) {
                                result += '*[' + data[id].employee_number + '] ' + data[id].name  + " / " + data[id].department + " / " + data[id].address + " <br>"; 
                            } else if(data[id].passenger) {
                                result +=  '*' + data[id].passenger + " / " + data[id].address + " <br>"; 
                            }
                        }
                        return result;
                    } else {
                        return null
                    }
                },
                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