@extends('layouts.app')

@section('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@endsection

@section('content')
    @php
        $labels = $visitsPerDay->pluck('day')->values();
        $pageViewSeries = $visitsPerDay->pluck('page_views')->values();
        $uniqueUserSeries = $visitsPerDay->pluck('unique_users')->values();
        $sessionSeries = $visitsPerDay->pluck('unique_sessions')->values();
    @endphp
    <article class="active text">
        <header>
            <h2 class="h2 article-title">Analytics</h2>
        </header>
        <section>
            <div class="d-flex justify-content-between align-items-end flex-wrap gap-2 mb-3">
                <form method="GET" action="{{ route('admin.analytics.index') }}" class="d-flex align-items-end gap-2 flex-wrap">
                    <div>
                        <label for="days" class="form-label mb-1">Range (days)</label>
                        <select id="days" name="days" class="form-select form-select-sm">
                            @foreach([7, 30, 90, 180, 365] as $option)
                                <option value="{{ $option }}" @selected($days === $option)>{{ $option }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="btn btn-sm btn-primary" type="submit">Apply</button>
                </form>
                <span>
                    <a href="{{ route('dashboard') }}"><i class="fa-solid fa-left-long"> Back</i></a>
                </span>
            </div>

            <div class="row mb-2">
                <div class="col-md-3 mb-2">
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="text-white fw-semibold small">Page Views</div>
                            <div class="h4 mb-0">{{ number_format($kpis['page_views']) }}</div>
                            <div class="small {{ $comparison['page_views'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ $comparison['page_views'] >= 0 ? '+' : '' }}{{ number_format($comparison['page_views']) }} vs previous period
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-2">
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="text-white fw-semibold small">Sessions</div>
                            <div class="h4 mb-0">{{ number_format($kpis['sessions']) }}</div>
                            <div class="small {{ $comparison['sessions'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ $comparison['sessions'] >= 0 ? '+' : '' }}{{ number_format($comparison['sessions']) }} vs previous period
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-2">
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="text-white fw-semibold small">Users</div>
                            <div class="h4 mb-0">{{ number_format($kpis['users']) }}</div>
                            <div class="small {{ $comparison['users'] >= 0 ? 'text-success' : 'text-danger' }}">
                                {{ $comparison['users'] >= 0 ? '+' : '' }}{{ number_format($comparison['users']) }} vs previous period
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 mb-2">
                    <div class="card bg-dark text-light">
                        <div class="card-body">
                            <div class="text-white fw-semibold small">Avg Pages / Session</div>
                            <div class="h4 mb-0">{{ number_format($kpis['avg_pages_per_session'], 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 m-auto">
                <div class="row">
                    <div class="col mb-2">
                        <div class="card bg-dark text-light">
                            <h5 class="card-header">
                                Traffic Trends
                            </h5>
                            <div class="card-body">
                                <canvas id="visitsPerDayChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <div class="card bg-dark text-light">
                            <h5 class="card-header">
                                OS Chart
                            </h5>
                            <div class="card-body">
                                <canvas id="osChart"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-2">
                        <div class="card bg-dark text-light">
                            <h5 class="card-header">
                                Top Sources
                            </h5>
                            <div class="card-body">
                                <table class="table table-striped table-hover table-dark">
                                    <thead>
                                    <tr>
                                        <th>Source</th>
                                        <th>Page Views</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($top_sources as $source)
                                        <tr>
                                            <td>{{ $source->source }}</td>
                                            <td>{{ $source->page_views }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-2">
                        <div class="card bg-dark text-light">
                            <h5 class="card-header">Pages (Top 15)</h5>
                            <div class="card-body">
                                <table class="table table-striped table-hover table-dark">
                                    <thead>
                                    <tr>
                                        <th>Count</th>
                                        <th>Page URI</th>
                                    </tr>
                                    </thead>
                                    <tbody class="overflow-hidden">
                                    @foreach($analytics_pages as $p)
                                        <tr>
                                            <td>{{ $p->page_count }}</td>
                                            <td title="{{ $p->uri }}">
                                                @if(strlen($p->uri) < 25)
                                                    {{ $p->uri }}
                                                @else
                                                    {{ substr($p->uri, 0, 25) }}&hellip;
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-2">
                        <div class="card bg-dark text-light">
                            <h5 class="card-header">Top Landing Pages</h5>
                            <div class="card-body">
                                <table class="table table-striped table-hover table-dark">
                                    <thead>
                                    <tr>
                                        <th>Page URI</th>
                                        <th>Sessions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($landing_pages as $landing)
                                        <tr>
                                            <td title="{{ $landing->uri }}">
                                                @if(strlen($landing->uri) < 25)
                                                    {{ $landing->uri }}
                                                @else
                                                    {{ substr($landing->uri, 0, 25) }}&hellip;
                                                @endif
                                            </td>
                                            <td>{{ $landing->sessions }}</td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
@endsection

@section('script')
    <script>
        const ctx1 = document.getElementById('osChart');
        new Chart(ctx1, {
            type: 'pie',
            data: {
                labels: @json(array_keys($os_list)),
                datasets: [{
                    label: '# of Users per OS',
                    data: @json(array_values($os_list)),
                    borderWidth: 1
                }]
            },
        });
        const ctx2 = document.getElementById('visitsPerDayChart');
        new Chart(ctx2, {
            type: 'line',
            data: {
                labels: @json($labels),
                datasets: [
                    {
                        label: '# of Page Views per day',
                        data: @json($pageViewSeries),
                        borderWidth: 1
                    },
                    {
                        label: '# of Unique Users per day',
                        data: @json($uniqueUserSeries),
                        borderWidth: 1
                    },
                    {
                        label: '# of Unique Sessions per day',
                        data: @json($sessionSeries),
                        borderWidth: 1
                    },
                ]
            },
        });
    </script>
@endsection