@extends('layouts.admin')
@section('content')
    <style>
        /* .analytics-card .card {
                        border-radius: 12px;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
                        transition: transform 0.2s, box-shadow 0.2s;
                    }

                    .analytics-card .card:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
                    } */

        .analytics-card .text-color-primary {
            color: #DE3996 !important;
        }

        .analytics-card .btn-group .btn {
            border: 1px solid #DE3996 !important;
            color: #DE3996 !important;
            /* background: #DE3996 !important; */
        }

        .analytics-card .btn-group .btn.active {
            background-color: #DE3996 !important;
            color: #fff !important;
            border-color: #DE3996 !important;
        }

        /* .analytics-card .btn-group .btn {
                        border-radius: 20px;
                        padding: 5px 15px;
                        font-size: 0.875rem;
                        border: 1px solid #DE3996 !important;
                        color: #DE3996 !important;
                        background: transparent !important;
                        transition: all 0.3s ease;
                    }

                    .analytics-card .btn-group .btn.active {
                        background-color: #DE3996 !important;
                        color: #fff !important;
                        border-color: #DE3996 !important;
                    }

                    .analytics-card .btn-group .btn:hover:not(.active) {
                        background-color: rgba(222, 57, 150, 0.1) !important;
                    } */

        /* .analytics-card .stat-card {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                    } */

        .analytics-card .chart-container {
            height: 320px;
            position: relative;
        }

        .analytics-card .countries-chart-container {
            /* height: 300px; */
            position: relative;
        }

        .analytics-card .table th,
        .analytics-card .table td {
            padding: 0.5rem 0.75rem;
            vertical-align: middle;
        }

        .analytics-card .card-header {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            font-weight: 600;
        }

        @media (max-width: 768px) {
            .analytics-card .btn-group {
                flex-wrap: wrap;
                gap: 8px;
            }

            .analytics-card .btn-group .btn {
                flex: 1;
                text-align: center;
            }

            .analytics-card .countries-chart-container {
                height: 250px;
            }
        }
    </style>

    <div class="container-xxl flex-grow-1 container-p-y analytics-card">
        <h1 class="mb-4">Analytics</h1>

        <div class="row mt-3 d-flex justify-content-center g-4">
            <!-- Main Chart (col-8) -->
            <div class="col-12 col-lg-8">
                <div class="card shadow-sm h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Visitors Overview</h5>
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-outline-primary active" data-period="daily">Daily</button>
                            <button class="btn btn-sm btn-outline-primary" data-period="weekly">Weekly</button>
                            <button class="btn btn-sm btn-outline-primary" data-period="monthly">Monthly</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="analyticsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-lg-4 col-12">
                <div class="card shadow-sm border-0 rounded-4 h-100">
                    <div class="d-flex flex-column gap-2 h-100">
                        <div class="stat-card ps-5 pt-5 d-flex align-items-center gap-3">
                            <span class="fs-3 text-color-primary">
                                <i class="fa fa-users"></i>
                            </span>
                            <div>
                                <h4 class="fw-bold text-color-primary mb-1">{{ number_format($totalVisitors) }}</h4>
                                <p class="text-muted small mb-0">Total Visitors</p>
                            </div>
                        </div>
                        <hr class="m-0">
                        <div class="stat-card p-5 d-flex align-items-center gap-3">
                            <span class="fs-3 text-color-primary">
                                <i class="fa fa-user-plus"></i>
                            </span>
                            <div>
                                <h4 class="fw-bold text-color-primary mb-1">{{ number_format($newUsers) }}</h4>
                                <p class="text-muted small mb-0">New Visitors</p>
                            </div>
                        </div>
                        <hr class="m-0">
                        <div class="stat-card ps-5 pt-3 d-flex align-items-center gap-3">
                            <span class="fs-3 text-color-primary">
                                <i class="fa fa-user-check"></i>
                            </span>
                            <div>
                                <h4 class="fw-bold text-color-primary mb-1">{{ number_format($totalVisitors) }}</h4>
                                <p class="text-muted small mb-0">Active Visitors</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Top Countries</h5>
                        <div class="btn-group" role="group">
                            <button class="btn btn-sm btn-outline-primary active" data-period="week">This Week</button>
                            <button class="btn btn-sm btn-outline-primary" data-period="month">This Month</button>
                            <button class="btn btn-sm btn-outline-primary" data-period="year">This Year</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row g-4">
                            <!-- Chart Section -->
                            <div class="col-12">
                                <div class="countries-chart-container">
                                    <canvas id="countriesChart"></canvas>
                                </div>
                            </div>

                            <!-- Table Section -->
                            <div class="col-12">
                                <div class="table-responsive">
                                    <table class="table table-sm table-hover align-middle mb-0">
                                        <thead>
                                            <tr>
                                                <th>Country</th>
                                                <th class="text-end">Users</th>
                                            </tr>
                                        </thead>
                                        <tbody id="countriesTableBody">
                                            <!-- Filled by JS -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
<!-- Top Pages Card -->
<div class="col-12 mt-4">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Top Pages</h5>
            <div class="btn-group" role="group">
                <button class="btn btn-sm btn-outline-primary active" data-period="week">This Week</button>
                <button class="btn btn-sm btn-outline-primary" data-period="month">This Month</button>
                <button class="btn btn-sm btn-outline-primary" data-period="year">This Year</button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-4">
                <!-- Table Section -->
                <div class="col-12">
                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead>
                                <tr>
                                    <th>Page</th>
                                    <th class="text-end">Views</th>
                                </tr>
                            </thead>
                            <tbody id="pagesTableBody">
                                <!-- Filled by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // === Visitors Chart ===
            const analyticsCtx = document.getElementById('analyticsChart').getContext('2d');

            window.dailyData = @json($dailyData);
            window.weeklyData = @json($weeklyData);
            window.monthlyData = @json($monthlyData);

            let labels = window.dailyData.map(d => d.date);
            let data = window.dailyData.map(d => d.users);

            const analyticsChart = new Chart(analyticsCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Total Visitors',
                        data: data,
                        borderColor: '#DE3996',
                        backgroundColor: 'rgba(222, 57, 150, 0.2)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: '#DE3996',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointHoverRadius: 7,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                color: '#495057',
                                font: {
                                    size: 12,
                                    weight: '500'
                                }
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false,
                            callbacks: {
                                label: function(context) {
                                    return `Users: ${context.parsed.y.toLocaleString()}`;
                                }
                            },
                            backgroundColor: '#fff',
                            titleColor: '#495057',
                            bodyColor: '#495057',
                            borderColor: '#dee2e6',
                            borderWidth: 1,
                            cornerRadius: 8,
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0,0,0,0.05)'
                            },
                            ticks: {
                                color: '#6c757d',
                                font: {
                                    size: 11
                                },
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            },
                            border: {
                                dash: [5, 5]
                            }
                        },
                        x: {
                            grid: {
                                color: 'rgba(0,0,0,0.03)'
                            },
                            ticks: {
                                color: '#6c757d',
                                font: {
                                    size: 11
                                }
                            }
                        }
                    },
                    interaction: {
                        mode: 'nearest',
                        axis: 'x',
                        intersect: false
                    }
                }
            });

            // Visitors Chart Toggle
            document.querySelectorAll('[data-period]').forEach(btn => {
                btn.addEventListener('click', function() {
                    const period = this.getAttribute('data-period');
                    if (!period || !['daily', 'weekly', 'monthly'].includes(period)) return;

                    document.querySelectorAll('[data-period]').forEach(b => {
                        if (b.closest('.card') === this.closest('.card')) {
                            b.classList.remove('active');
                        }
                    });
                    this.classList.add('active');

                    let newData = [];
                    let newLabels = [];

                    switch (period) {
                        case 'daily':
                            newLabels = window.dailyData.map(d => d.date);
                            newData = window.dailyData.map(d => d.users);
                            break;
                        case 'weekly':
                            newLabels = window.weeklyData.map(d => d.date);
                            newData = window.weeklyData.map(d => d.users);
                            break;
                        case 'monthly':
                            newLabels = window.monthlyData.map(d => d.month);
                            newData = window.monthlyData.map(d => d.users);
                            break;
                    }

                    analyticsChart.data.labels = newLabels;
                    analyticsChart.data.datasets[0].data = newData;
                    analyticsChart.update();
                });
            });


            const countriesCtx = document.getElementById('countriesChart').getContext('2d');

            const dataByPeriod = {
                week: @json($topCountriesWeek),
                month: @json($topCountriesMonth),
                year: @json($topCountriesYear)
            };

            const countriesChart = new Chart(countriesCtx, {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Active Users',
                        data: [],
                        backgroundColor: '#DE3996',
                        borderColor: '#A92A75',
                        borderWidth: 1,
                        borderSkipped: false,
                        barThickness: 40,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return `Users: ${context.parsed.y.toLocaleString()}`;
                                }
                            },
                            backgroundColor: '#fff',
                            titleColor: '#495057',
                            bodyColor: '#495057',
                            borderColor: '#dee2e6',
                            borderWidth: 1,
                            cornerRadius: 8,
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(0,0,0,0.05)'
                            },
                            ticks: {
                                color: '#6c757d',
                                font: {
                                    size: 11
                                }
                            }
                        },
                        y: {
                            beginAtZero: true,
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#495057',
                                font: {
                                    size: 12,
                                    weight: '500'
                                },
                                callback: function(value) {
                                    return value.toLocaleString();
                                }
                            }
                        }
                    }
                }
            });

            function updateCountries(period) {
                const data = dataByPeriod[period] || [];

                countriesChart.data.labels = data.map(d => d.country);
                countriesChart.data.datasets[0].data = data.map(d => d.users);
                countriesChart.update();

                const tbody = document.getElementById('countriesTableBody');
                tbody.innerHTML = '';

                if (data.length === 0) {
                    tbody.innerHTML =
                        `<tr><td colspan="2" class="text-center text-muted py-3">No data available</td></tr>`;
                    return;
                }

                data.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td class="fw-medium">${item.country}</td>
                        <td class="text-end fw-medium">${item.users.toLocaleString()}</td>
                    `;
                    tbody.appendChild(tr);
                });
            }

            updateCountries('week');

            document.querySelectorAll('[data-period]').forEach(btn => {
                btn.addEventListener('click', function() {
                    const period = this.getAttribute('data-period');
                    if (!period || !['week', 'month', 'year'].includes(period)) return;

                    document.querySelectorAll('[data-period]').forEach(b => {
                        if (b.closest('.card') === this.closest('.card')) {
                            b.classList.remove('active');
                        }
                    });
                    this.classList.add('active');

                    updateCountries(period);
                });
            });
        });

    </script>

    <script>
    const topPagesData = {
        week: @json($topPagesWeek),
        month: @json($topPagesMonth),
        year: @json($topPagesYear)
    };
      document.addEventListener('DOMContentLoaded', function () {
    function renderPagesTable(period) {
        const data = topPagesData[period] || [];
        const tbody = document.getElementById('pagesTableBody');
        tbody.innerHTML = '';

        if (data.length === 0) {
            tbody.innerHTML = `<tr><td colspan="2" class="text-center text-muted">No data available</td></tr>`;
            return;
        }

        data.forEach(item => {
            const row = document.createElement('tr');
            // Optional: make page path clickable (relative link)
            const pageUrl = item.page.startsWith('/') ? item.page : '/' + item.page;
            row.innerHTML = `
                <td>
                    <a href="${pageUrl}" target="_blank" class="text-decoration-none">
                        ${item.page}
                    </a>
                </td>
                <td class="text-end">${Number(item.views).toLocaleString()}</td>
            `;
            tbody.appendChild(row);
        });
    }

    // Handle toggle buttons
    document.querySelectorAll('[data-period]').forEach(btn => {
        btn.addEventListener('click', function () {
            const period = this.getAttribute('data-period');

            // Update active state (only within this card's button group)
            const group = this.closest('.btn-group');
            group.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');

            // Update table
            renderPagesTable(period);
        });
    });

    // Initialize with "week"
    renderPagesTable('week');
});
</script>
@endsection