@extends('layouts.app')
@section('title', 'User Analytics')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <x-table-filter-card
                    action="{{ route('useranalytics.index') }}"
                    id="userAnalyticsFilterForm"
                    :resetUrl="route('useranalytics.index')"
                >
                    <div class="pms-filter-field">
                        <label for="filter-search">Search</label>
                        <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                               placeholder="Search by IP, country, URL…" value="{{ $search ?? '' }}">
                    </div>
                </x-table-filter-card>
                <x-active-filter-chips :chips="$activeChips ?? []" />

                <x-layouts.index-card
                    :createRoute="null"
                    tableHeading="User Analytics"
                    :headers="[
                        'ID',
                        'IP Address',
                        'Country',
                        'Page URL',
                        'Time Spent (ms)',
                        'Time Spent (s)',
                        'Time Spent (min)',
                        'Created At',
                    ]"
                    :sortColumns="['id', 'ip_address', 'country', 'current_url', 'on_page_time', null, null, 'created_at']"
                    :perPageSlot="view('components.per-page-selector', ['current' => $perPage ?? 25, 'baseUrl' => route('useranalytics.index')])"
                    :pagination="$userAnalytics->links('vendor.pagination.bootstrap-4')"
                >
                    @forelse ($userAnalytics as $analytics)
                        <tr>
                            <td>{{ $analytics->id }}</td>
                            <td>{{ $analytics->ip_address }}</td>
                            <td>{{ $analytics->country }}</td>
                            <td>{{ $analytics->current_url }}</td>
                            <td>{{ $analytics->on_page_time }} ms</td>
                            <td>{{ round($analytics->on_page_time / 1000, 2) }} s</td>
                            <td>{{ round($analytics->on_page_time / 60000, 2) }} min</td>
                            <td>{{ $analytics->created_at->format('d M Y h:i A') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8">
                                <x-table-empty-state
                                    :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                    :createRoute="null"
                                    createLabel=""
                                    :resetUrl="route('useranalytics.index')"
                                />
                            </td>
                        </tr>
                    @endforelse
                </x-layouts.index-card>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
    $(function () {
        if ($('#example1').length && typeof window.PmsIndexDataTable !== 'undefined') {
            PmsIndexDataTable.initLaravelPaginated('#example1');
            PmsIndexDataTable.attachServerSort('#example1', {
                baseUrl: '{{ route("useranalytics.index") }}',
                currentQuery: @json(request()->except(['page'])),
                currentSortCol: '{{ request('sort_col', 'id') }}',
                currentSortDir: '{{ request('sort_dir', 'desc') }}'
            });
        }
    });
</script>
@endpush