@extends('layouts.app')

@section('title', 'Smart Storage — Access Logs')

@section('content')
<section class="content-header">
    <h1><i class="fa fa-list"></i> Smart Storage <small>Access logs</small></h1>
</section>

<section class="content">
    @include('smartstorage::partials._nav')

    <div class="box box-default">
        <div class="box-header with-border">
            <h3 class="box-title">Every file call — user, device, IP, location</h3>
        </div>
        <div class="box-body">
            <div class="row" style="margin-bottom:12px;">
                <div class="col-md-2">
                    <label>Action</label>
                    <select id="f-action" class="form-control">
                        <option value="">All</option>
                        <option value="read">read</option>
                        <option value="write">write</option>
                        <option value="delete">delete</option>
                        <option value="denied">denied</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label>Granted</label>
                    <select id="f-granted" class="form-control">
                        <option value="all">All</option>
                        <option value="1">Granted</option>
                        <option value="0">Denied</option>
                    </select>
                </div>
                <div class="col-md-2"><label>IP</label><input id="f-ip" type="text" class="form-control"></div>
                <div class="col-md-2"><label>From</label><input id="f-start" type="date" class="form-control"></div>
                <div class="col-md-2"><label>To</label><input id="f-end" type="date" class="form-control"></div>
                <div class="col-md-2"><label>&nbsp;</label><br><button id="f-apply" class="btn btn-primary">Filter</button></div>
            </div>

            <table class="table table-bordered table-striped" id="ss-logs-table" style="width:100%">
                <thead>
                    <tr>
                        <th>Time</th>
                        <th>Action</th>
                        <th>Granted</th>
                        <th>Reason</th>
                        <th>User</th>
                        <th>File</th>
                        <th>IP</th>
                        <th>Location</th>
                        <th>Device</th>
                        <th>User agent</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    var table = $('#ss-logs-table').DataTable({
        processing: true,
        serverSide: true,
        order: [[0, 'desc']],
        ajax: {
            url: '{{ route('smart-storage.logs.data') }}',
            data: function (d) {
                d.action = $('#f-action').val();
                d.granted = $('#f-granted').val();
                d.ip = $('#f-ip').val();
                d.date_start = $('#f-start').val();
                d.date_end = $('#f-end').val();
            }
        },
        columns: [
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action' },
            { data: 'granted', name: 'granted' },
            { data: 'reason', name: 'reason' },
            { data: 'user_id', name: 'user_id' },
            { data: 'logical_path', name: 'logical_path' },
            { data: 'ip', name: 'ip' },
            { data: 'geo', name: 'geo', orderable: false, searchable: false },
            { data: 'device_fingerprint', name: 'device_fingerprint' },
            { data: 'user_agent', name: 'user_agent' }
        ]
    });
    $('#f-apply').on('click', function () { table.ajax.reload(); });
});
</script>
@endsection
