@extends('layouts.main')
@section('title')
Device
@endsection
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Device</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{url('dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Device</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<div class="card card-default color-palette-box">
    <div class="card-header">
        <h3 class="card-title">
           Device
        </h3>
        <!-- <a href="note/create" class="btn btn-primary btn-sm float-right">+ create</a> -->
    </div>
    <div class="card-body">


        <table style="width: 100%;" id="data-table" class="table table-hover table-striped table-bordered">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Device</th>
                    <th>IP Address</th>
                    <th>Location </th>
                    <th>Last Activity</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>

        </table>
    </div>
</div>

<script>
   documentReady(function() {
         datatableObj=$('#data-table').DataTable({
            stateSave : true,
            ajax: {
                url:'{{route("device/list")}}',
                dataSrc:'data',
                method: 'post',
                data: {
                    '_token': CSRF_TOKEN
                }
            },
            columns:[
                {data: "id",responsivePriority: 6},
                {data: "client",responsivePriority: 6},
                {data: "ip",responsivePriority: 4},
                {data: "location",responsivePriority: 4},
                {data: "last_activity",responsivePriority: 1},
                {data: "action",responsivePriority: 4},
            ],
            drawCallback:function(){
                router.checkLinks();
            },
            responsive: true,
            serverSide:true,
            "order": [[ 4, "desc" ]]
        });
    });
</script>


 

@endsection