@extends('layouts.app')

@section('content')

<div class="row">
    <div class="col-md-12 col">
        <div class="x_panel">
            <div class="x_title">
                <h2>Analytics Events</h2>

                <div class="clearfix"></div>
            </div>

            <div class="x_content">
                <div class="col-md-12 col-xs-12">
                    <form class="form-horizontal form-label-left input_mask" id="analyticsfrmfilter" name="analyticsfrmfilter">
                        <div class="item form-group">
                            <label class="control-label col-md-4 col-sm-4 col-xs-12">Date</label>
                            <div class="col-md-8 col-sm-8 col-xs-12">
                                <input type="date" id="date_filter" name="date_filter" class="form-control">
                            </div>

                        </div>
                        <div class="ln_solid"></div>
                        <div class="form-group">
                            <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3 text-center">
                                <button type="button" class="btn btn-primary" id="analytics-btn-reset">Cancel</button>
                                <button type="button" class="btn btn-success" id="analytics-btn-filter">Apply</button>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="ln_solid"></div>

                    </form>
                </div>
                <div class="x_content">
                    <table id="datatableAnalyticsEvents" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>System</th>
                                <th>Event ID</th>
                                <th>Event Name</th>
                                <th>EUserID</th>
                                <th>URL</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Other Params</th>
                            </tr>
                        </thead>


                        <tbody>

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


    @endsection

    @push('scripts')

    <script type="module">
        $(document).ready(function() {
            console.log("here")
            var AnalyticsEvents = $('#datatableAnalyticsEvents').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                pageLength: 50,
                scrollX: true,
                ajax: {
                    url: '{{ route("analytics.event.data") }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = $('meta[name="csrf-token"]').attr("content");
                        d.date_filter = $('#date_filter').val();

                    }

                },
                order: [
                    [7, "desc"]
                ],
                columns: [{
                        data: 'sr_no',
                        name: 'sr_no',
                        orderable: false
                    },
                    {
                        data: 'vSystem',
                        name: 'vSystem'
                    },

                    {
                        data: 'vEventID',
                        name: 'vEventID'
                    },
                    {
                        data: 'vEventName',
                        name: 'vEventName'
                    },
                    {
                        data: 'vEUserId',
                        name: 'vEUserId'
                    },
                    {
                        data: 'vEventUrl',
                        name: 'vEventUrl'
                    },
                    {
                        data: 'vStatus',
                        name: 'vStatus'
                    },
                    {
                        data: 'dDateCreated',
                        name: 'dDateCreated',
                    },
                    {
                        data: 'tParams',
                        name: 'tParams'
                    }



                ],
                columnDefs: [{
                    targets: '_all',
                    orderSequence: ["asc", "desc"]
                }]
            });


            $('#analytics-btn-filter').on('click', function() {
                AnalyticsEvents.ajax.reload();
            });

            // Reset Filter
            $('#analytics-btn-reset').on('click', function() {
                $('#analyticsfrmfilter')[0].reset();

                AnalyticsEvents.ajax.reload();
            });

        });
    </script>

    @endpush