@extends('adminlte::page')

@section('title', 'Users')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Analytics</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Analytics</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header px-1">
                        <div class="col-md-12">
                            <div class="row align-items-center">
                                <div class="col-md-9">
                                    <ul class="analytics__nav nav nav-pills">
                                        <li class="nav-item"><a class="nav-link active" href="#both-table"
                                                data-source="{{ route('admin.analytics.list',[ 'type' => 'both' ]) }}" data-table="both"
                                                data-toggle="tab">All </a></li>
                                        <li class="nav-item"><a class="nav-link" href="#web-table"
                                                data-source="{{ route('admin.analytics.list',[ 'type' => 'web' ]) }}" data-table="web"
                                                data-toggle="tab">Web</a></li>
                                        <li class="nav-item"><a class="nav-link" href="#app-table"
                                                data-source="{{ route('admin.analytics.list',[ 'type' => 'app' ]) }}" data-table="app"
                                                data-toggle="tab">App </a></li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content" style="overflow-x:scroll">
                            @php $tables = [ 'both' => 'both-table', 'web' => 'web-table' ,  'app' => 'app-table' ]; @endphp
                            @foreach ($tables as  $id => $table)
                                <div class="tab-pane @php echo $id == 'both' ? 'active' : '' @endphp" id="{{ $table }}">
                                    <table id="{{ $id }}" class="table table-bordered table-hover" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>User Name</th>
                                                <th>Page URL</th>
                                                <th>Date</th>
                                                <th>IP</th>
                                                <th>Page View</th>
                                                <th>Device</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')

    <script>
         $(".analytics__nav .nav-item").click(function() {
            var source = $(this).children().data("source");
            tableId = $(this).children().data("table");
            initiateTable(tableId, source);
        });

        var table;
        function initiateTable(tableId, source) {
            table =  $('#'+tableId+'').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                search: {
                    regex: true
                },
                order: [[ 2, "desc" ]],
                ajax: source,
                columns: [
                    {data: 'username', name: 'username', defaultContent:'Guest User'},
                    {data: 'path', name: 'path'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'session.client_ip', name:'session.client_ip'},
                    {data: 'page_view', name:'page_view'},
                    {data: 'device', name: 'device'}

                ]
            });


        }

        initiateTable("both", "{{ route('admin.analytics.list',[ 'type' => 'both' ]) }}");


    </script>
@endsection