@extends('admin::layouts.master')
@section('title', 'Analytics Dashboard')
@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Analytics Dashboard</h1>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" onclick="refreshAnalytics()">
                <i class="fas fa-sync-alt"></i> Refresh
            </button>
            <button type="button" class="btn btn-success" onclick="exportAnalytics()">
                <i class="fas fa-download"></i> Export
            </button>
        </div>
    </div>

    <!-- Date Range Selector -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-3">
                            <label for="startDate">Start Date:</label>
                            <input type="date" id="startDate" class="form-control" value="{{ now()->subMonth()->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="endDate">End Date:</label>
                            <input type="date" id="endDate" class="form-control" value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="col-md-3">
                            <label for="analyticsType">Analytics Type:</label>
                            <select id="analyticsType" class="form-control">
                                <option value="overview">Overview</option>
                                <option value="sales">Sales</option>
                                <option value="users">Users</option>
                                <option value="products">Products</option>
                                <option value="content">Content</option>
                                <option value="marketing">Marketing</option>
                                <option value="performance">Performance</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>&nbsp;</label>
                            <button type="button" class="btn btn-info btn-block" onclick="updateDateRange()">
                                <i class="fas fa-filter"></i> Apply Filter
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Overview Cards with Loading Skeletons -->
    <div class="row" id="overviewCards">
        <!-- Revenue Card -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Revenue</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalRevenue">
                                <div class="skeleton-loading" style="height: 28px; width: 100px;"></div>
                            </div>
                            <div class="text-xs text-muted" id="revenueChange">
                                <div class="skeleton-loading" style="height: 12px; width: 120px;"></div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders Card -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Total Orders</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalOrders">
                                <div class="skeleton-loading" style="height: 28px; width: 80px;"></div>
                            </div>
                            <div class="text-xs text-muted" id="ordersChange">
                                <div class="skeleton-loading" style="height: 12px; width: 120px;"></div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Customers Card -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Customers</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalCustomers">
                                <div class="skeleton-loading" style="height: 28px; width: 80px;"></div>
                            </div>
                            <div class="text-xs text-muted" id="customersChange">
                                <div class="skeleton-loading" style="height: 12px; width: 120px;"></div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Products Card -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Total Products</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800" id="totalProducts">
                                <div class="skeleton-loading" style="height: 28px; width: 80px;"></div>
                            </div>
                            <div class="text-xs text-muted" id="productsChange">
                                <div class="skeleton-loading" style="height: 12px; width: 100px;"></div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-cubes fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row -->
    <div class="row">
        <!-- Revenue Chart -->
        <div class="col-xl-8 col-lg-7">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Revenue Overview</h6>
                    <div class="dropdown no-arrow">
                        <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown">
                            <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right shadow">
                            <a class="dropdown-item" href="#" onclick="exportChart('revenue')">Export Chart</a>
                            <a class="dropdown-item" href="#" onclick="printChart('revenue')">Print Chart</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-area" style="position: relative; height: 300px;">
                        <canvas id="revenueChart"></canvas>
                        <div class="chart-loading-overlay" id="revenueChartLoading" style="display: none;">
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Orders Chart -->
        <div class="col-xl-4 col-lg-5">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Orders by Status</h6>
                </div>
                <div class="card-body">
                    <div class="chart-pie pt-4 pb-2" style="position: relative; height: 250px;">
                        <canvas id="ordersPieChart"></canvas>
                        <div class="chart-loading-overlay" id="ordersPieChartLoading" style="display: none;">
                            <div class="spinner-border text-primary"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Analytics Tabs with Fixed Height Containers -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Detailed Analytics</h6>
                </div>
                <div class="card-body">
                    <ul class="nav nav-tabs" id="analyticsTabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="sales-tab" data-toggle="tab" href="#sales" role="tab">Sales</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="users-tab" data-toggle="tab" href="#users" role="tab">Users</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="products-tab" data-toggle="tab" href="#products" role="tab">Products</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="marketing-tab" data-toggle="tab" href="#marketing" role="tab">Marketing</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="performance-tab" data-toggle="tab" href="#performance" role="tab">Performance</a>
                        </li>
                    </ul>
                    <div class="tab-content mt-4" id="analyticsTabContent" style="min-height: 500px;">
                        <!-- Sales Tab -->
                        <div class="tab-pane fade show active" id="sales" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>Top Selling Products</h5>
                                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                        <table class="table table-sm" id="topProductsTable">
                                            <thead class="sticky-top bg-white">
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Sold</th>
                                                    <th>Revenue</th>
                                                </tr>
                                            </thead>
                                            <tbody id="topProductsTableBody">
                                                <tr>
                                                    <td colspan="3" class="text-center">
                                                        <div class="skeleton-loading" style="height: 40px;"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>Sales by Month</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="salesChart"></canvas>
                                        <div class="chart-loading-overlay" id="salesChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Users Tab -->
                        <div class="tab-pane fade" id="users" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>User Registrations</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="userRegistrationsChart"></canvas>
                                        <div class="chart-loading-overlay" id="userRegistrationsChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>User Segments</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="userSegmentsChart"></canvas>
                                        <div class="chart-loading-overlay" id="userSegmentsChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Products Tab -->
                        <div class="tab-pane fade" id="products" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>Product Performance</h5>
                                    <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                        <table class="table table-sm" id="productPerformanceTable">
                                            <thead class="sticky-top bg-white">
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Clicks</th>
                                                    <th>Impressions</th>
                                                    <th>CTR</th>
                                                </tr>
                                            </thead>
                                            <tbody id="productPerformanceTableBody">
                                                <tr>
                                                    <td colspan="4" class="text-center">
                                                        <div class="skeleton-loading" style="height: 40px;"></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>Inventory Status</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="inventoryChart"></canvas>
                                        <div class="chart-loading-overlay" id="inventoryChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Marketing Tab -->
                        <div class="tab-pane fade" id="marketing" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>Email Campaign Performance</h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="card bg-primary text-white">
                                                <div class="card-body text-center">
                                                    <h4 id="emailOpenRate">
                                                        <div class="skeleton-loading" style="height: 28px; width: 60px; margin: 0 auto;"></div>
                                                    </h4>
                                                    <p>Open Rate</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="card bg-success text-white">
                                                <div class="card-body text-center">
                                                    <h4 id="emailClickRate">
                                                        <div class="skeleton-loading" style="height: 28px; width: 60px; margin: 0 auto;"></div>
                                                    </h4>
                                                    <p>Click Rate</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>Newsletter Statistics</h5>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="card bg-info text-white">
                                                <div class="card-body text-center">
                                                    <h4 id="totalSubscribers">
                                                        <div class="skeleton-loading" style="height: 28px; width: 80px; margin: 0 auto;"></div>
                                                    </h4>
                                                    <p>Total Subscribers</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="card bg-warning text-white">
                                                <div class="card-body text-center">
                                                    <h4 id="newSubscribers">
                                                        <div class="skeleton-loading" style="height: 28px; width: 80px; margin: 0 auto;"></div>
                                                    </h4>
                                                    <p>New This Month</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Performance Tab -->
                        <div class="tab-pane fade" id="performance" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h5>Page Views</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="pageViewsChart"></canvas>
                                        <div class="chart-loading-overlay" id="pageViewsChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h5>Traffic Sources</h5>
                                    <div style="height: 350px; position: relative;">
                                        <canvas id="trafficSourcesChart"></canvas>
                                        <div class="chart-loading-overlay" id="trafficSourcesChartLoading" style="display: none;">
                                            <div class="spinner-border text-primary"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Real-time Updates -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Real-time Updates</h6>
                    <div class="float-right">
                        <span class="badge badge-success" id="connectionStatus">Connected</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 id="onlineUsers">
                                    <div class="skeleton-loading" style="height: 28px; width: 60px; margin: 0 auto;"></div>
                                </h4>
                                <p>Online Users</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 id="currentOrders">
                                    <div class="skeleton-loading" style="height: 28px; width: 60px; margin: 0 auto;"></div>
                                </h4>
                                <p>Current Orders</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 id="newUsersToday">
                                    <div class="skeleton-loading" style="height: 28px; width: 60px; margin: 0 auto;"></div>
                                </h4>
                                <p>New Users Today</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 id="systemStatus">
                                    <div class="skeleton-loading" style="height: 28px; width: 80px; margin: 0 auto;"></div>
                                </h4>
                                <p>System Status</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .chart-area, .chart-pie {
        position: relative;
    }
    
    .chart-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.35rem;
    }
    
    .card {
        transition: transform 0.2s;
    }
    
    .card:hover {
        transform: translateY(-2px);
    }
    
    .nav-tabs .nav-link.active {
        background-color: #4e73df;
        color: white;
        border-color: #4e73df;
    }
    
    .table-responsive {
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid #e3e6f0;
        border-radius: 0.35rem;
    }
    
    .table-responsive::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    .table-responsive::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }
    
    .table-responsive::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }
    
    .sticky-top {
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    .badge {
        font-size: 0.8em;
    }
    
    /* Skeleton Loading Animation */
    .skeleton-loading {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 4px;
    }
    
    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .tab-content {
            min-height: 600px;
        }
        
        .table-responsive {
            margin-bottom: 20px;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script>
    // Global variables
    let revenueChart, ordersPieChart, salesChart, userRegistrationsChart, userSegmentsChart;
    let inventoryChart, pageViewsChart, trafficSourcesChart;
    let realTimeInterval;
    let isLoading = false;

    // Initialize dashboard
    document.addEventListener('DOMContentLoaded', function() {
        initializeCharts();
        loadAnalytics();
        startRealTimeUpdates();
        
        // Add event listener for analytics type dropdown
        const analyticsTypeSelect = document.getElementById('analyticsType');
        if (analyticsTypeSelect) {
            analyticsTypeSelect.addEventListener('change', function() {
                updateDateRange();
            });
        }
    });

    // Show/hide loading states
    function setLoadingState(elementId, loading) {
        const element = document.getElementById(elementId);
        if (element) {
            if (loading) {
                element.style.display = 'flex';
            } else {
                element.style.display = 'none';
            }
        }
    }

    // Load analytics data
    async function loadAnalytics() {
        if (isLoading) return;
        isLoading = true;
        
        try {
            // Show loading skeletons for overview cards
            showOverviewSkeletons(true);
            
            const response = await fetch('/admin/analytics/dashboard', {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            const result = await response.json();
            
            if (result.success && result.data) {
                if (result.data.overview) {
                    updateOverviewCards(result.data.overview);
                }
                await updateCharts(result.data);
                updateTables(result.data);
            } else {
                console.warn('Analytics data not available:', result.message || 'No data');
                showNotification('Analytics data not available', 'warning');
                setDefaultValues();
            }
        } catch (error) {
            console.error('Error loading analytics:', error);
            showNotification('Error loading analytics data: ' + error.message, 'error');
            setDefaultValues();
        } finally {
            isLoading = false;
            showOverviewSkeletons(false);
        }
    }

    // Set default values when data is unavailable
    function setDefaultValues() {
        const elements = ['totalRevenue', 'totalOrders', 'totalCustomers', 'totalProducts'];
        elements.forEach(id => {
            const element = document.getElementById(id);
            if (element && element.textContent.includes('skeleton')) {
                element.textContent = '0';
            }
        });
        
        const changeElements = ['revenueChange', 'ordersChange', 'customersChange'];
        changeElements.forEach(id => {
            const element = document.getElementById(id);
            if (element) {
                element.textContent = 'No data available';
            }
        });
    }

    // Show/hide overview skeletons
    function showOverviewSkeletons(show) {
        const overviewIds = ['totalRevenue', 'totalOrders', 'totalCustomers', 'totalProducts', 
                             'revenueChange', 'ordersChange', 'customersChange'];
        
        if (show) {
            overviewIds.forEach(id => {
                const element = document.getElementById(id);
                if (element && !element.querySelector('.skeleton-loading')) {
                    element.innerHTML = '<div class="skeleton-loading" style="height: 28px; width: 100px;"></div>';
                }
            });
        }
    }

    // Update overview cards with calculated metrics
    function updateOverviewCards(overview) {
        if (!overview) return;
        
        // Calculate total revenue with discounts and taxes
        const totalRevenue = document.getElementById('totalRevenue');
        if (totalRevenue && overview.total_revenue) {
            const revenue = overview.total_revenue.current || 0;
            totalRevenue.textContent = '$' + formatNumber(revenue);
        }
        
        const totalOrders = document.getElementById('totalOrders');
        if (totalOrders && overview.total_orders) {
            totalOrders.textContent = formatNumber(overview.total_orders.current || 0);
        }
        
        const totalCustomers = document.getElementById('totalCustomers');
        if (totalCustomers && overview.total_customers) {
            totalCustomers.textContent = formatNumber(overview.total_customers.current || 0);
        }
        
        const totalProducts = document.getElementById('totalProducts');
        if (totalProducts && overview.total_products) {
            totalProducts.textContent = formatNumber(overview.total_products.current || 0);
        }
        
        // Update change indicators with proper calculations
        if (overview.total_revenue) {
            updateChangeIndicator('revenueChange', overview.total_revenue.this_month, overview.total_revenue.last_month, 'revenue');
        }
        if (overview.total_orders) {
            updateChangeIndicator('ordersChange', overview.total_orders.this_month, overview.total_orders.last_month, 'orders');
        }
        if (overview.total_customers) {
            updateChangeIndicator('customersChange', overview.total_customers.this_month, overview.total_customers.last_month, 'customers');
        }
    }

    // Update change indicators with proper percentage calculation
    function updateChangeIndicator(elementId, current, previous, type = '') {
        const element = document.getElementById(elementId);
        if (!element) return;
        
        if (!current && !previous) {
            element.innerHTML = '<span class="text-muted">No data available</span>';
            return;
        }
        
        const change = previous > 0 ? ((current - previous) / previous * 100) : (current > 0 ? 100 : 0);
        const sign = change >= 0 ? '+' : '';
        const color = change >= 0 ? 'text-success' : 'text-danger';
        const arrow = change >= 0 ? '↑' : '↓';
        
        element.innerHTML = `<span class="${color}">${arrow} ${sign}${change.toFixed(1)}% from last month</span>`;
    }

    // Initialize all charts
    function initializeCharts() {
        // Revenue Chart
        const revenueCtx = document.getElementById('revenueChart');
        if (revenueCtx) {
            revenueChart = new Chart(revenueCtx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Revenue',
                        data: [],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        tension: 0.1,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    return '$' + formatNumber(context.raw);
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                callback: function(value) {
                                    return '$' + formatNumber(value);
                                }
                            }
                        }
                    }
                }
            });
        }

        // Orders Pie Chart
        const ordersPieCtx = document.getElementById('ordersPieChart');
        if (ordersPieCtx) {
            ordersPieChart = new Chart(ordersPieCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: [],
                    datasets: [{
                        data: [],
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Initialize remaining charts
        initializeOtherCharts();
    }

    // Initialize other charts
    function initializeOtherCharts() {
        // Sales Chart
        const salesElement = document.getElementById('salesChart');
        if (salesElement) {
            salesChart = new Chart(salesElement.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Orders',
                        data: [],
                        backgroundColor: 'rgba(54, 162, 235, 0.5)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }

        // User Registrations Chart
        const userRegCtx = document.getElementById('userRegistrationsChart');
        if (userRegCtx) {
            userRegistrationsChart = new Chart(userRegCtx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'New Users',
                        data: [],
                        borderColor: 'rgb(255, 99, 132)',
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        tension: 0.1,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1
                            }
                        }
                    }
                }
            });
        }

        // User Segments Chart
        const userSegCtx = document.getElementById('userSegmentsChart');
        if (userSegCtx) {
            userSegmentsChart = new Chart(userSegCtx.getContext('2d'), {
                type: 'pie',
                data: {
                    labels: [],
                    datasets: [{
                        data: [],
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Inventory Chart
        const inventoryCtx = document.getElementById('inventoryChart');
        if (inventoryCtx) {
            inventoryChart = new Chart(inventoryCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['In Stock', 'Out of Stock', 'Low Stock'],
                    datasets: [{
                        data: [0, 0, 0],
                        backgroundColor: ['#28a745', '#dc3545', '#ffc107']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // Page Views Chart
        const pageViewsCtx = document.getElementById('pageViewsChart');
        if (pageViewsCtx) {
            pageViewsChart = new Chart(pageViewsCtx.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: [],
                    datasets: [{
                        label: 'Page Views',
                        data: [],
                        backgroundColor: 'rgba(153, 102, 255, 0.5)',
                        borderColor: 'rgba(153, 102, 255, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        // Traffic Sources Chart
        const trafficCtx = document.getElementById('trafficSourcesChart');
        if (trafficCtx) {
            trafficSourcesChart = new Chart(trafficCtx.getContext('2d'), {
                type: 'pie',
                data: {
                    labels: [],
                    datasets: [{
                        data: [],
                        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }
    }

    // Update charts with data
    async function updateCharts(data) {
        if (!data) return;
        
        // Show loading overlays
        const chartLoadings = ['revenueChartLoading', 'ordersPieChartLoading', 'salesChartLoading', 
                               'userRegistrationsChartLoading', 'userSegmentsChartLoading', 
                               'inventoryChartLoading', 'pageViewsChartLoading', 'trafficSourcesChartLoading'];
        chartLoadings.forEach(id => setLoadingState(id, true));
        
        try {
            // Update revenue chart
            if (data.sales && data.sales.revenue_by_month && revenueChart) {
                revenueChart.data.labels = data.sales.revenue_by_month.map(item => item.month);
                revenueChart.data.datasets[0].data = data.sales.revenue_by_month.map(item => item.revenue);
                revenueChart.update();
            }

            // Update orders pie chart
            if (data.sales && data.sales.sales_by_status && data.sales.sales_by_status.order_status && ordersPieChart) {
                const statuses = data.sales.sales_by_status.order_status;
                ordersPieChart.data.labels = Object.keys(statuses);
                ordersPieChart.data.datasets[0].data = Object.values(statuses);
                ordersPieChart.update();
            }

            // Update sales chart
            if (data.sales && data.sales.orders_by_month && data.sales.orders_by_month.length > 0 && salesChart) {
                salesChart.data.labels = data.sales.orders_by_month.map(item => item.month);
                salesChart.data.datasets[0].data = data.sales.orders_by_month.map(item => item.orders);
                salesChart.update();
            }

            // Update user registrations chart
            if (data.users && data.users.user_registrations && userRegistrationsChart) {
                const registrations = data.users.user_registrations;
                userRegistrationsChart.data.labels = Object.keys(registrations);
                userRegistrationsChart.data.datasets[0].data = Object.values(registrations);
                userRegistrationsChart.update();
            }

            // Update user segments chart
            if (data.users && data.users.user_segments && userSegmentsChart) {
                const segments = data.users.user_segments;
                userSegmentsChart.data.labels = Object.keys(segments);
                userSegmentsChart.data.datasets[0].data = Object.values(segments);
                userSegmentsChart.update();
            }

            // Update inventory chart
            if (data.products && data.products.inventory_status && inventoryChart) {
                const inventory = data.products.inventory_status;
                inventoryChart.data.datasets[0].data = [
                    inventory.in_stock || 0,
                    inventory.out_of_stock || 0,
                    inventory.low_stock || 0
                ];
                inventoryChart.update();
            }

            // Update page views chart
            if (data.performance && data.performance.page_views && pageViewsChart) {
                const pageViews = data.performance.page_views;
                pageViewsChart.data.labels = Object.keys(pageViews);
                pageViewsChart.data.datasets[0].data = Object.values(pageViews);
                pageViewsChart.update();
            }

            // Update traffic sources chart
            if (data.performance && data.performance.traffic_sources && trafficSourcesChart) {
                const traffic = data.performance.traffic_sources;
                trafficSourcesChart.data.labels = Object.keys(traffic);
                trafficSourcesChart.data.datasets[0].data = Object.values(traffic);
                trafficSourcesChart.update();
            }
        } catch (error) {
            console.error('Error updating charts:', error);
        } finally {
            // Hide loading overlays
            setTimeout(() => {
                chartLoadings.forEach(id => setLoadingState(id, false));
            }, 500);
        }
    }

    // Update tables with data
    function updateTables(data) {
        // Update top products table
        if (data.sales && data.sales.top_selling_products) {
            const tbody = document.getElementById('topProductsTableBody');
            if (tbody) {
                tbody.innerHTML = '';
                data.sales.top_selling_products.slice(0, 10).forEach(product => {
                    const row = tbody.insertRow();
                    row.insertCell(0).textContent = product.title || product.name || 'N/A';
                    row.insertCell(1).textContent = formatNumber(product.total_sold || 0);
                    row.insertCell(2).textContent = '$' + formatNumber(product.total_revenue || 0);
                });
                
                if (data.sales.top_selling_products.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">No sales data available</td></tr>';
                }
            }
        }

        // Update product performance table
        if (data.products && data.products.product_performance) {
            const tbody = document.getElementById('productPerformanceTableBody');
            if (tbody) {
                tbody.innerHTML = '';
                data.products.product_performance.slice(0, 10).forEach(product => {
                    const row = tbody.insertRow();
                    row.insertCell(0).textContent = product.title || product.name || 'N/A';
                    row.insertCell(1).textContent = formatNumber(product.clicks || 0);
                    row.insertCell(2).textContent = formatNumber(product.impressions || 0);
                    const ctr = product.ctr || (product.clicks && product.impressions ? (product.clicks / product.impressions * 100).toFixed(2) : 0);
                    row.insertCell(3).textContent = ctr + '%';
                });
                
                if (data.products.product_performance.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No performance data available</td></tr>';
                }
            }
        }

        // Update marketing metrics
        if (data.marketing) {
            const emailOpenRate = document.getElementById('emailOpenRate');
            const emailClickRate = document.getElementById('emailClickRate');
            const totalSubscribers = document.getElementById('totalSubscribers');
            const newSubscribers = document.getElementById('newSubscribers');
            
            if (emailOpenRate && data.marketing.email_campaigns) {
                emailOpenRate.textContent = (data.marketing.email_campaigns.open_rate || 0) + '%';
            }
            if (emailClickRate && data.marketing.email_campaigns) {
                emailClickRate.textContent = (data.marketing.email_campaigns.click_rate || 0) + '%';
            }
            if (totalSubscribers && data.marketing.newsletter_stats) {
                totalSubscribers.textContent = formatNumber(data.marketing.newsletter_stats.total_subscribers || 0);
            }
            if (newSubscribers && data.marketing.newsletter_stats) {
                newSubscribers.textContent = formatNumber(data.marketing.newsletter_stats.new_this_month || 0);
            }
        }
    }

    // Start real-time updates
    function startRealTimeUpdates() {
        if (realTimeInterval) clearInterval(realTimeInterval);
        
        realTimeInterval = setInterval(async () => {
            try {
                const response = await fetch('/admin/analytics/real-time', {
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                });
                const result = await response.json();
                
                if (result.success && result.data) {
                    const onlineUsers = document.getElementById('onlineUsers');
                    const currentOrders = document.getElementById('currentOrders');
                    const newUsersToday = document.getElementById('newUsersToday');
                    const systemStatus = document.getElementById('systemStatus');
                    const connectionStatus = document.getElementById('connectionStatus');
                    
                    if (onlineUsers) onlineUsers.textContent = formatNumber(result.data.online_users || 0);
                    if (currentOrders && result.data.current_orders) {
                        const pending = result.data.current_orders.pending || 0;
                        const processing = result.data.current_orders.processing || 0;
                        currentOrders.textContent = formatNumber(pending + processing);
                    }
                    if (newUsersToday && result.data.recent_activity) {
                        newUsersToday.textContent = formatNumber(result.data.recent_activity.new_users || 0);
                    }
                    if (systemStatus) {
                        const isHealthy = result.data.system_status && result.data.system_status.database;
                        systemStatus.textContent = isHealthy ? 'Healthy' : 'Unhealthy';
                        systemStatus.className = isHealthy ? 'text-success' : 'text-danger';
                    }
                    if (connectionStatus) {
                        connectionStatus.textContent = 'Connected';
                        connectionStatus.className = 'badge badge-success';
                    }
                }
            } catch (error) {
                console.error('Error updating real-time data:', error);
                const connectionStatus = document.getElementById('connectionStatus');
                if (connectionStatus) {
                    connectionStatus.textContent = 'Disconnected';
                    connectionStatus.className = 'badge badge-danger';
                }
            }
        }, 30000);
    }

    // Refresh analytics
    function refreshAnalytics() {
        loadAnalytics();
        showNotification('Refreshing analytics data...', 'info');
    }

    // Export analytics
    function exportAnalytics() {
        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');
        const type = document.getElementById('analyticsType');
        
        if (!startDate || !endDate || !type) {
            showNotification('Missing required fields', 'error');
            return;
        }
        
        const url = `/admin/analytics/export?type=${type.value}&format=xlsx&start_date=${startDate.value}&end_date=${endDate.value}`;
        window.open(url, '_blank');
        showNotification('Export started. Check your downloads folder.', 'success');
    }

    // Update date range
    async function updateDateRange() {
        const startDate = document.getElementById('startDate');
        const endDate = document.getElementById('endDate');
        const type = document.getElementById('analyticsType');
        
        if (!startDate || !endDate || !type) return;
        
        await loadDateRangeAnalytics(type.value, startDate.value, endDate.value);
    }

    // Load date range analytics
    async function loadDateRangeAnalytics(type, startDate, endDate) {
        try {
            showNotification('Loading analytics for selected date range...', 'info');
            
            const response = await fetch(`/admin/analytics/date-range?type=${type}&start_date=${startDate}&end_date=${endDate}`, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            });
            const result = await response.json();
            
            if (result.success && result.data) {
                const chartData = {};
                chartData[type] = result.data;
                await updateCharts(chartData);
                updateTables(chartData);
                showNotification('Analytics updated successfully!', 'success');
            } else {
                showNotification(result.message || 'Error loading analytics data', 'error');
            }
        } catch (error) {
            console.error('Error loading date range analytics:', error);
            showNotification('Error loading analytics data', 'error');
        }
    }

    // Export chart
    function exportChart(chartType) {
        showNotification('Chart export feature coming soon!', 'info');
    }

    // Print chart
    function printChart(chartType) {
        showNotification('Chart print feature coming soon!', 'info');
    }

    // Format number
    function formatNumber(num) {
        if (num === null || num === undefined) return '0';
        return new Intl.NumberFormat().format(num);
    }

    // Show notification
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        const alertType = type === 'error' ? 'danger' : (type === 'warning' ? 'warning' : (type === 'success' ? 'success' : 'info'));
        notification.className = `alert alert-${alertType} alert-dismissible fade show position-fixed`;
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            ${message}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }

    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        if (realTimeInterval) {
            clearInterval(realTimeInterval);
        }
    });
</script>
@endpush