@push('title')
    Analytics Dashboard
@endpush
<x-app-layout>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <style>
        .stat-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .chart-container {
            height: 400px;
        }

        .gradient-text {
            background: linear-gradient(135deg, #007bff, #6610f2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .filter-btn:hover {
            transform: translateY(-2px);
        }
    </style>

    <div class="container-fluid py-4">
        <!-- Dashboard Header -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                            <h1 class="h3 fw-bold gradient-text mb-3 mb-md-0">
                                <i class="fas fa-chart-line"></i> Analytics Dashboard
                            </h1>
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-outline-primary filter-btn active"
                                    data-period="30">30 Days</button>
                                <button type="button" class="btn btn-outline-primary filter-btn" data-period="90">90
                                    Days</button>
                                <button type="button" class="btn btn-outline-primary filter-btn" data-period="365">1
                                    Year</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row g-4 mb-4">
            <div class="col-12 col-sm-6 col-lg-4 col-xl">
                <div class="card border-0 shadow-sm stat-card">
                    <div class="card-body text-center">
                        <div class="text-primary mb-3">
                            <i class="fas fa-shopping-cart fa-2x"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-1" id="total-orders">{{ number_format($totalOrders) }}</h3>
                        <p class="text-muted small text-uppercase ls-1 mb-0">Total Orders</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 col-xl">
                <div class="card border-0 shadow-sm stat-card ">
                    <div class="card-body text-center">
                        <div class="text-success mb-3">
                            <i class="fa-solid fa-money-bill fa-2x"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-1" id="total-revenue">
                            
                            {{ number_format($totalRevenue, 2) }}  {{ $config->currancy ?? "" }}
                            
                        </h3>
                        <p class="text-muted small text-uppercase ls-1 mb-0">Total Revenue</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 col-xl">
                <div class="card border-0 shadow-sm stat-card ">
                    <div class="card-body text-center">
                        <div class="text-info mb-3">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-1" id="total-customers">{{ number_format($totalCustomers) }}
                        </h3>
                        <p class="text-muted small text-uppercase ls-1 mb-0">Total Customers</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 col-xl">
                <div class="card border-0 shadow-sm stat-card ">
                    <div class="card-body text-center">
                        <div class="text-warning mb-3">
                            <i class="fas fa-box fa-2x"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-1" id="total-products">{{ number_format($totalProducts) }}</h3>
                        <p class="text-muted small text-uppercase ls-1 mb-0">Total Products</p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-6 col-lg-4 col-xl">
                <div class="card border-0 shadow-sm stat-card ">
                    <div class="card-body text-center">
                        <div class="text-danger mb-3">
                            <i class="fas fa-clock fa-2x"></i>
                        </div>
                        <h3 class="fw-bold text-dark mb-1" id="pending-orders">{{ number_format($pendingOrders) }}</h3>
                        <p class="text-muted small text-uppercase ls-1 mb-0">Pending Orders</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Charts -->
        <div class="row g-4 mb-4">
            <div class="col-12 col-lg-4">
                <div class="card border-0 shadow-sm ">
                    <div class="card-body">
                        <h5 class="card-title text-center fw-semibold mb-4">Monthly Revenue Trend</h5>
                        <div class="chart-container">
                            <canvas id="revenueChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card border-0 shadow-sm ">
                    <div class="card-body">
                        <h5 class="card-title text-center fw-semibold mb-4">Order Status Distribution</h5>
                        <div class="chart-container">
                            <canvas id="statusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
       
            <div class="col-12 col-lg-4">
                <div class="card border-0 shadow-sm ">
                    <div class="card-body">
                        <h5 class="card-title text-center fw-semibold mb-4">Top Selling Products</h5>
                        <div class="chart-container">
                            <canvas id="productsChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <div class="card border-0 shadow-sm ">
                    <div class="card-body">
                        <h5 class="card-title text-center fw-semibold mb-4">Category Revenue</h5>
                        <div class="chart-container">
                            <canvas id="categoryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        
            <div class="col-12 col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h5 class="card-title fw-semibold mb-4">Recent Orders</h5>
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-primary">
                                    <tr>
                                        <th scope="col">Order ID</th>
                                        <th scope="col">Customer</th>
                                        <th scope="col">Total</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Date</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($recentOrders as $order)
                                        <tr>
                                            <td><strong>#{{ $order->id }}</strong></td>
                                            <td>{{ $order->customerInfo->first_name ?? 'N/A' }}
                                                {{ $order->customerInfo->last_name ?? '' }}</td>
                                            <td><strong>${{ number_format($order->total_amount, 2) }}</strong></td>
                                            <td>
                                                @php
                                                    $statusClass = match ($order->order_status) {
                                                        'completed' => 'success',
                                                        'pending' => 'warning',
                                                        'cancelled' => 'danger',
                                                        default => 'secondary',
                                                    };
                                                @endphp
                                                <span class="badge bg-{{ $statusClass }} rounded-pill">
                                                    {{ ucfirst($order->order_status) }}
                                                </span>
                                            </td>
                                            <td>{{ $order->created_at->format('M d, Y') }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Data from Laravel backend
        const monthlyRevenueData = {
            labels: {!! json_encode($monthlyRevenue->pluck('month')) !!},
            datasets: [{
                label: 'Revenue',
                data: {!! json_encode($monthlyRevenue->pluck('revenue')) !!},
                borderColor: '#0d6efd',
                backgroundColor: 'rgba(13, 110, 253, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4
            }]
        };

        const orderStatusData = {
            labels: {!! json_encode($orderStatusData->pluck('status')) !!},
            datasets: [{
                data: {!! json_encode($orderStatusData->pluck('count')) !!},
                backgroundColor: [
                    '#198754',
                    '#fd7e14',
                    '#0d6efd',
                    '#dc3545'
                ],
                borderWidth: 0
            }]
        };

        const topProductsData = {
            labels: {!! json_encode($topProducts->pluck('name')) !!},
            datasets: [{
                label: 'Units Sold',
                data: {!! json_encode($topProducts->pluck('sold')) !!},
                backgroundColor: 'rgba(13, 110, 253, 0.8)',
                borderColor: '#0d6efd',
                borderWidth: 2
            }]
        };

        const categoryRevenueData = {
            labels: {!! json_encode($categoryRevenue->pluck('category')) !!},
            datasets: [{
                data: {!! json_encode($categoryRevenue->pluck('revenue')) !!},
                backgroundColor: [
                    '#0d6efd',
                    '#6610f2',
                    '#d63384',
                    '#dc3545',
                    '#fd7e14'
                ],
                borderWidth: 0
            }]
        };

        // Chart configurations
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: {
                        padding: 20,
                        usePointStyle: true
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.1)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        };

        // Initialize charts
        const revenueCtx = document.getElementById('revenueChart').getContext('2d');
        const revenueChart = new Chart(revenueCtx, {
            type: 'line',
            data: monthlyRevenueData,
            options: {
                ...chartOptions,
                plugins: {
                    ...chartOptions.plugins,
                    legend: {
                        display: false
                    }
                }
            }
        });

        const statusCtx = document.getElementById('statusChart').getContext('2d');
        const statusChart = new Chart(statusCtx, {
            type: 'doughnut',
            data: orderStatusData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true
                        }
                    }
                }
            }
        });

        const productsCtx = document.getElementById('productsChart').getContext('2d');
        const productsChart = new Chart(productsCtx, {
            type: 'bar',
            data: topProductsData,
            options: chartOptions
        });

        const categoryCtx = document.getElementById('categoryChart').getContext('2d');
        const categoryChart = new Chart(categoryCtx, {
            type: 'pie',
            data: categoryRevenueData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true
                        }
                    }
                }
            }
        });

        // Filter functionality
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
                this.classList.add('active');

                const period = this.dataset.period;
                updateDashboard(period);
            });
        });

        function updateDashboard(period) {
            // Show loading state
            document.querySelectorAll('.stat-card h3').forEach(el => {
                el.style.opacity = '0.5';
            });

            // Fetch updated data from Laravel backend
            fetch(`{{ route('dashboard.analytics') }}?period=${period}`, {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('total-orders').textContent = data.orders.toLocaleString();
                    document.getElementById('total-revenue').textContent = '$' + data.revenue.toLocaleString();
                    document.getElementById('total-customers').textContent = data.customers.toLocaleString();

                    // Restore opacity
                    document.querySelectorAll('.stat-card h3').forEach(el => {
                        el.style.opacity = '1';
                    });
                })
                .catch(error => {
                    console.error('Error fetching analytics data:', error);
                    // Restore opacity on error
                    document.querySelectorAll('.stat-card h3').forEach(el => {
                        el.style.opacity = '1';
                    });
                });
        }
    </script>
</x-app-layout>