@extends('layouts.admin')

@section('title', 'Analytics')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">Analytics</h1>
    <p class="text-gray-600">Track your website performance</p>
</div>

<div x-data="analyticsData()" x-init="loadData()">
    <!-- Date Range Selector -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <div class="flex items-center gap-4">
            <span class="text-sm text-gray-600">Time Range:</span>
            <select x-model="range" @change="loadData()" class="px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                <option value="7">Last 7 Days</option>
                <option value="14">Last 14 Days</option>
                <option value="30">Last 30 Days</option>
                <option value="90">Last 90 Days</option>
            </select>
        </div>
    </div>
    
    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Total Views</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="summary.totalViews?.toLocaleString() || '0'"></p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-eye text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">Unique Visitors</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="summary.uniqueVisitors?.toLocaleString() || '0'"></p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-users text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500">New Subscribers</p>
                    <p class="text-3xl font-bold text-gray-900" x-text="summary.newSubscribers?.toLocaleString() || '0'"></p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-user-plus text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Page Views</h3>
            <canvas id="viewsChart" height="250"></canvas>
        </div>
        
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-gray-900 mb-4">Subscriber Growth</h3>
            <canvas id="subscribersChart" height="250"></canvas>
        </div>
    </div>
    
    <!-- Top Pages -->
    <div class="bg-white rounded-xl shadow-sm p-6">
        <h3 class="font-semibold text-gray-900 mb-4">Top Pages</h3>
        <table class="w-full">
            <thead>
                <tr class="text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                    <th class="pb-3">Page</th>
                    <th class="pb-3 text-right">Views</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <template x-for="page in topPages" :key="page.url">
                    <tr>
                        <td class="py-3">
                            <p class="text-gray-700" x-text="page.page_title || page.url"></p>
                            <p class="text-sm text-gray-400" x-text="'/' + page.url"></p>
                        </td>
                        <td class="py-3 text-right text-gray-600" x-text="page.views.toLocaleString()"></td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
</div>

@push('scripts')
<script>
let viewsChart, subscribersChart;

function analyticsData() {
    return {
        range: '7',
        summary: {},
        viewsByDay: [],
        subscriberGrowth: [],
        topPages: [],
        
        async loadData() {
            const response = await fetch(`{{ route('admin.analytics.data') }}?range=${this.range}`);
            const data = await response.json();
            
            this.summary = data.summary;
            this.viewsByDay = data.viewsByDay;
            this.subscriberGrowth = data.subscriberGrowth;
            this.topPages = data.topPages;
            
            this.updateCharts();
        },
        
        updateCharts() {
            // Views Chart
            if (viewsChart) viewsChart.destroy();
            const viewsCtx = document.getElementById('viewsChart').getContext('2d');
            viewsChart = new Chart(viewsCtx, {
                type: 'line',
                data: {
                    labels: this.viewsByDay.map(d => d.date),
                    datasets: [{
                        label: 'Views',
                        data: this.viewsByDay.map(d => d.views),
                        borderColor: 'rgb(59, 130, 246)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        fill: true,
                        tension: 0.4,
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true } }
                }
            });
            
            // Subscribers Chart
            if (subscribersChart) subscribersChart.destroy();
            const subsCtx = document.getElementById('subscribersChart').getContext('2d');
            subscribersChart = new Chart(subsCtx, {
                type: 'bar',
                data: {
                    labels: this.subscriberGrowth.map(d => d.date),
                    datasets: [{
                        label: 'New Subscribers',
                        data: this.subscriberGrowth.map(d => d.subscribers),
                        backgroundColor: 'rgb(147, 51, 234)',
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true } }
                }
            });
        }
    }
}
</script>
@endpush
@endsection