@extends('admin.layout')

@section('title', 'Analytics')
@section('page-title', 'Website Analytics')
@section('page-subtitle', 'Track page views and visitor statistics')

@section('content')
<div class="stats">
    <div class="card">
        <div class="statTop">
            <span>Total Views</span>
            <span class="icon">👁</span>
        </div>
        <div class="number">{{ App\Models\PageView::count() }}</div>
        <span class="up">↑ All time</span>
    </div>
    
    <div class="card">
        <div class="statTop">
            <span>Unique Visitors</span>
            <span class="icon">👤</span>
        </div>
        <div class="number">{{ App\Models\PageView::distinct('ip_address')->count('ip_address') }}</div>
        <span class="up">↑ By IP</span>
    </div>
    
    <div class="card">
        <div class="statTop">
            <span>Today</span>
            <span class="icon">📅</span>
        </div>
        <div class="number">{{ App\Models\PageView::whereDate('viewed_at', today())->count() }}</div>
        <span class="up">↑ Today's views</span>
    </div>
    
    <div class="card">
        <div class="statTop">
            <span>This Week</span>
            <span class="icon">📊</span>
        </div>
        <div class="number">{{ App\Models\PageView::whereBetween('viewed_at', [now()->startOfWeek(), now()->endOfWeek()])->count() }}</div>
        <span class="up">↑ Weekly</span>
    </div>
</div>

<!-- Views by IP Address -->
<div class="card" style="margin-top: 30px;">
    <h3>Views by IP Address</h3>
    <div class="table" style="margin-top: 20px; overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">IP Address</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Total Views</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Last Visit</th>
                </tr>
            </thead>
            <tbody>
                @forelse($viewsByIp as $view)
                    <tr style="border-bottom: 1px solid #e9ecef;">
                        <td style="padding: 12px;"><strong>{{ $view->ip_address }}</strong></td>
                        <td style="padding: 12px;">{{ $view->view_count }}</td>
                        <td style="padding: 12px;">{{ App\Models\PageView::where('ip_address', $view->ip_address)->latest('viewed_at')->first()->viewed_at->diffForHumans() }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" style="text-align: center; padding: 20px; color: #6c757d;">No views recorded yet</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Most Viewed Pages -->
<div class="card" style="margin-top: 30px;">
    <h3>Most Viewed Pages</h3>
    <div class="table" style="margin-top: 20px; overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Page URL</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Views</th>
                </tr>
            </thead>
            <tbody>
                @forelse($viewsByPage as $page)
                    <tr style="border-bottom: 1px solid #e9ecef;">
                        <td style="padding: 12px;">
                            <a href="{{ $page->url }}" target="_blank" style="color: #007bff; text-decoration: none;">
                                {{ Str::limit($page->url, 80) }}
                            </a>
                        </td>
                        <td style="padding: 12px;"><strong>{{ $page->view_count }}</strong></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" style="text-align: center; padding: 20px; color: #6c757d;">No pages viewed yet</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Recent Page Views -->
<div class="card" style="margin-top: 30px;">
    <h3>Recent Page Views (Last 50)</h3>
    <div class="table" style="margin-top: 20px; overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Time</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">IP Address</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Page</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">User Agent</th>
                </tr>
            </thead>
            <tbody>
                @forelse($recentViews as $view)
                    <tr style="border-bottom: 1px solid #e9ecef;">
                        <td style="padding: 12px;">{{ $view->viewed_at->format('M d, H:i') }}</td>
                        <td style="padding: 12px;">{{ $view->ip_address }}</td>
                        <td style="padding: 12px;">
                            <a href="{{ $view->url }}" target="_blank" style="color: #007bff; text-decoration: none;">
                                {{ Str::limit($view->url, 50) }}
                            </a>
                        </td>
                        <td style="padding: 12px; font-size: 12px; color: #666;">{{ Str::limit($view->user_agent, 40) }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" style="text-align: center; padding: 20px; color: #6c757d;">No recent views</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Daily Views -->
<div class="card" style="margin-top: 30px; margin-bottom: 30px;">
    <h3>Daily Views (Last 30 Days)</h3>
    <div class="table" style="margin-top: 20px; overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse;">
            <thead>
                <tr style="background: #f8f9fa; text-align: left;">
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Date</th>
                    <th style="padding: 12px; border-bottom: 2px solid #dee2e6;">Views</th>
                </tr>
            </thead>
            <tbody>
                @forelse($dailyViews as $daily)
                    <tr style="border-bottom: 1px solid #e9ecef;">
                        <td style="padding: 12px;">{{ \Carbon\Carbon::parse($daily->date)->format('M d, Y') }}</td>
                        <td style="padding: 12px;"><strong>{{ $daily->count }}</strong></td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="2" style="text-align: center; padding: 20px; color: #6c757d;">No data available</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection