@extends('layouts.main')

@section('content')
    <div class="container">
        <div class="page-inner">
            <div
                class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4"
            >
            </div>
            @if (Auth::user()->role != 'super admin')
            <h1>Welcome to the Dashboard</h1>
                <p>You are not a super admin and HR</p>
            @else
                <div class="container">

                    <h1 class="mb-4">Google Analytics Dashboard</h1>

                    <div class="row">
                        <!-- Active Users Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-users fa-3x mb-3"></i> <!-- Active Users Icon -->
                                    <h3>{{ $metrics['activeUsers'] }}</h3>
                                    <p>Active Users (7 days)</p>
                                </div>
                            </div>
                        </div>

                        <!-- Sessions Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-user-clock fa-3x mb-3"></i> <!-- Sessions Icon -->
                                    <h3>{{ $metrics['sessions'] }}</h3>
                                    <p>Total Sessions (7 days)</p>
                                </div>
                            </div>
                        </div>

                        <!-- Page Views Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-eye fa-3x mb-3"></i> <!-- Page Views Icon -->
                                    <h3>{{ $metrics['screenPageViews'] }}</h3>
                                    <p>Page Views (7 days)</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <!-- Bounce Rate Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-thumbs-down fa-3x mb-3"></i> <!-- Bounce Rate Icon -->
                                    <h3>{{ $metrics['bounceRate'] }}%</h3>
                                    <p>Bounce Rate</p>
                                </div>
                            </div>
                        </div>

                        <!-- Average Session Duration Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-clock fa-3x mb-3"></i> <!-- Session Duration Icon -->
                                    <h3>{{ $metrics['averageSessionDuration'] }} mins</h3>
                                    <p>Avg Session Duration</p>
                                </div>
                            </div>
                        </div>

                        <!-- New Users Card -->
                        <div class="col-md-4">
                            <div class="card shadow-lg">
                                <div class="card-body text-center">
                                    <i class="fas fa-user-plus fa-3x mb-3"></i> <!-- New Users Icon -->
                                    <h3>{{ $metrics['newUsers'] }}</h3>
                                    <p>New Users (7 days)</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card p-3 mb-4">
                        <h4>Overview (Last 7 Days)</h4>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Metric</th>
                                <th>Value</th>
                                <th>Description</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>Active Users</td>
                                <td>{{ number_format($metrics['activeUsers']) }}</td>
                                <td>Total users who were active at least once during the date range</td>
                            </tr>
                            <tr>
                                <td>New Users</td>
                                <td>{{ number_format($metrics['newUsers']) }}</td>
                                <td>Users who interacted with your site for the first time</td>
                            </tr>
                            <tr>
                                <td>Sessions</td>
                                <td>{{ number_format($metrics['sessions']) }}</td>
                                <td>Number of sessions on your website</td>
                            </tr>
                            <tr>
                                <td>Screen Page Views</td>
                                <td>{{ number_format($metrics['screenPageViews']) }}</td>
                                <td>Total number of screen or page views</td>
                            </tr>
                            <tr>
                                <td>Average Session Duration</td>
                                <td>{{ gmdate("i:s", $metrics['averageSessionDuration']) }}</td>
                                <td>Average length of a session in minutes and seconds</td>
                            </tr>
                            <tr>
                                <td>Bounce Rate</td>
                                <td>{{ number_format($metrics['bounceRate'], 2) }}%</td>
                                <td>Percentage of sessions with no interaction</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="card p-3 mb-4">
                        <h4>Traffic Data</h4>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Source</th>
                                <th>Browser</th>
                                <th>Country</th>
                                <th>City</th>
                                <th>Sessions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($trafficData as $item)
                                <tr>
                                    <td>{{ $item['source'] }}</td>
                                    <td>{{ $item['browser'] }}</td>
                                    <td>{{ $item['country'] }}</td>
                                    <td>{{ $item['city'] }}</td>
                                    <td>{{ $item['sessions'] }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        {{ $trafficData->links() }}

                    </div>

                    <div class="card p-3 mb-4">
                        <h4>Top Pages</h4>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Path</th>
                                <th>Views</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach ($pageData as $page)
                                <tr>
                                    <td><a href="{{ $page['full_url'] }}" target="_blank">{{ $page['full_url'] }}</a></td>
                                    <td>{{ number_format($page['views']) }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                        {{ $pageData->links() }}
                    </div>
                </div>
            @endif
@endsection