@extends('layouts.app')

@section('title', 'Analytics - ' . $salesPage->name)

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold">{{ $salesPage->name }}</h1>
            <p class="text-sm text-gray-600">Analytics Dashboard</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ route('settings.sales-pages.index') }}"
               class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                ← Back to List
            </a>
            <a href="{{ route('settings.sales-pages.edit', $salesPage) }}"
               class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                Edit Page
            </a>
        </div>
    </div>

    <!-- Date Range Filter -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
        <form method="GET" id="dateRangeForm" class="flex flex-wrap gap-3 items-end">
            <!-- Quick Select Buttons -->
            <button type="button" onclick="setDateRange('today')" class="px-4 py-2 text-sm bg-gray-200 dark:bg-gray-700 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600">
                Today
            </button>
            <button type="button" onclick="setDateRange('thisMonth')" class="px-4 py-2 text-sm bg-blue-200 dark:bg-blue-900 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-800">
                This Month
            </button>
            <button type="button" onclick="setDateRange('lastMonth')" class="px-4 py-2 text-sm bg-blue-200 dark:bg-blue-900 rounded-lg hover:bg-blue-300 dark:hover:bg-blue-800">
                Last Month
            </button>

            <!-- Divider -->
            <div class="border-l border-gray-300 dark:border-gray-600 h-10"></div>

            <!-- Custom Date Inputs -->
            <div>
                <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">Start Date</label>
                <input type="date" name="start_date" id="start_date" value="{{ $startDate }}"
                       class="px-3 py-2 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700">
            </div>
            <div>
                <label class="block text-xs text-gray-600 dark:text-gray-400 mb-1">End Date</label>
                <input type="date" name="end_date" id="end_date" value="{{ $endDate }}"
                       class="px-3 py-2 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700">
            </div>
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                Apply
            </button>
        </form>
    </div>

    <script>
    function setDateRange(range) {
        const today = new Date();
        let startDate, endDate;

        switch(range) {
            case 'today':
                startDate = endDate = today;
                break;
            case 'thisMonth':
                startDate = new Date(today.getFullYear(), today.getMonth(), 1);
                endDate = new Date();
                break;
            case 'lastMonth':
                startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
                endDate = new Date(today.getFullYear(), today.getMonth(), 0);
                break;
        }

        // Format dates as YYYY-MM-DD
        document.getElementById('start_date').value = formatDate(startDate);
        document.getElementById('end_date').value = formatDate(endDate);

        // Auto submit form
        document.getElementById('dateRangeForm').submit();
    }

    function formatDate(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    }
    </script>

    <!-- Overview Stats -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Total Views</div>
            <div class="text-3xl font-bold mt-2">{{ number_format($totalViews) }}</div>
            <div class="text-xs text-gray-500 mt-1">All time</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Total Orders</div>
            <div class="text-3xl font-bold mt-2">{{ number_format($totalOrders) }}</div>
            <div class="text-xs text-gray-500 mt-1">All time</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Conversion Rate</div>
            <div class="text-3xl font-bold mt-2">{{ $conversionRate }}%</div>
            <div class="text-xs text-gray-500 mt-1">Orders / Views</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Total Revenue</div>
            <div class="text-3xl font-bold mt-2 text-green-600">RM {{ number_format($totalRevenue, 2) }}</div>
            <div class="text-xs text-gray-500 mt-1">All time (paid orders)</div>
        </div>
    </div>

    <!-- Revenue Stats in Range -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Views (Range)</div>
            <div class="text-3xl font-bold mt-2">{{ number_format($viewsInRange) }}</div>
            <div class="text-xs text-gray-500 mt-1">In selected period</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Orders (Range)</div>
            <div class="text-3xl font-bold mt-2">{{ number_format($totalOrdersInRange) }}</div>
            <div class="text-xs text-gray-500 mt-1">Online paid + COD (paid & pending)</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">Revenue (Range)</div>
            <div class="text-3xl font-bold mt-2 text-green-600">RM {{ number_format($revenueInRange, 2) }}</div>
            <div class="text-xs text-gray-500 mt-1">Includes COD (paid & pending)</div>
        </div>

        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <div class="text-sm text-gray-600 dark:text-gray-400">AOV (Range)</div>
            <div class="text-3xl font-bold mt-2 text-blue-600">RM {{ number_format($averageOrderValueInRange, 2) }}</div>
            <div class="text-xs text-gray-500 mt-1">Per order (incl. COD)</div>
        </div>
    </div>

    <!-- Payment Status Breakdown -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Revenue by Payment Status <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="border border-green-200 dark:border-green-800 rounded-lg p-4 bg-green-50 dark:bg-green-900/20">
                <div class="text-sm text-green-700 dark:text-green-400 font-medium">Paid Orders</div>
                <div class="text-2xl font-bold text-green-600 dark:text-green-500 mt-2">RM {{ number_format($paidRevenueInRange, 2) }}</div>
                <div class="text-xs text-green-600 dark:text-green-400 mt-1">{{ number_format($paidOrdersCountInRange) }} orders</div>
            </div>

            <div class="border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 bg-yellow-50 dark:bg-yellow-900/20">
                <div class="text-sm text-yellow-700 dark:text-yellow-400 font-medium">Pending Payment</div>
                <div class="text-2xl font-bold text-yellow-600 dark:text-yellow-500 mt-2">RM {{ number_format($pendingRevenueInRange, 2) }}</div>
                <div class="text-xs text-yellow-600 dark:text-yellow-400 mt-1">{{ number_format($pendingOrdersCountInRange) }} orders</div>
            </div>

            <div class="border border-red-200 dark:border-red-800 rounded-lg p-4 bg-red-50 dark:bg-red-900/20">
                <div class="text-sm text-red-700 dark:text-red-400 font-medium">Failed/Expired</div>
                <div class="text-2xl font-bold text-red-600 dark:text-red-500 mt-2">{{ number_format($failedOrdersCountInRange) }}</div>
                <div class="text-xs text-red-600 dark:text-red-400 mt-1">orders</div>
            </div>
        </div>
    </div>

    <!-- Payment Method Breakdown -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Revenue by Payment Method <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="border border-purple-200 dark:border-purple-800 rounded-lg p-4 bg-purple-50 dark:bg-purple-900/20">
                <div class="text-sm text-purple-700 dark:text-purple-400 font-medium">Cash on Delivery (COD)</div>
                <div class="text-2xl font-bold text-purple-600 dark:text-purple-500 mt-2">RM {{ number_format($codRevenueInRange, 2) }}</div>
                <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">{{ number_format($codOrdersCountInRange) }} total orders</div>
                <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">
                    <span class="text-green-600 dark:text-green-400">✓ Paid: {{ $codPaidCountInRange }} (RM {{ number_format($codPaidRevenueInRange, 2) }})</span>
                </div>
                <div class="text-xs text-purple-600 dark:text-purple-400">
                    <span class="text-orange-600 dark:text-orange-400">⏳ Pending: {{ $codPendingCountInRange }} (RM {{ number_format($codPendingRevenueInRange, 2) }})</span>
                </div>
                <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">COD Fees: RM {{ number_format($codFeesInRange, 2) }}</div>
            </div>

            <div class="border border-blue-200 dark:border-blue-800 rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20">
                <div class="text-sm text-blue-700 dark:text-blue-400 font-medium">Online Payment</div>
                <div class="text-2xl font-bold text-blue-600 dark:text-blue-500 mt-2">RM {{ number_format($onlineRevenueInRange, 2) }}</div>
                <div class="text-xs text-blue-600 dark:text-blue-400 mt-1">{{ number_format($onlineOrdersCountInRange) }} orders (paid)</div>
                <div class="text-xs text-blue-500 dark:text-blue-400 mt-2">FPX, DuitNow, etc.</div>
            </div>
        </div>
    </div>

    <!-- Order Bump Revenue -->
    @if($salesPage->order_bump_enabled && $orderBumpRevenueInRange > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Order Bump Performance <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 bg-indigo-50 dark:bg-indigo-900/20">
                <div class="text-sm text-indigo-700 dark:text-indigo-400 font-medium">Order Bump Revenue</div>
                <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-500 mt-2">RM {{ number_format($orderBumpRevenueInRange, 2) }}</div>
                <div class="text-xs text-indigo-600 dark:text-indigo-400 mt-1">{{ $orderBumpProductName }}</div>
            </div>

            <div class="border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 bg-indigo-50 dark:bg-indigo-900/20">
                <div class="text-sm text-indigo-700 dark:text-indigo-400 font-medium">Times Added</div>
                <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-500 mt-2">{{ number_format($orderBumpCountInRange) }}</div>
                <div class="text-xs text-indigo-600 dark:text-indigo-400 mt-1">Total order bump additions</div>
            </div>

            <div class="border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 bg-indigo-50 dark:bg-indigo-900/20">
                <div class="text-sm text-indigo-700 dark:text-indigo-400 font-medium">Acceptance Rate</div>
                <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-500 mt-2">
                    @if($paidOrdersCountInRange > 0)
                        {{ round(($orderBumpCountInRange / $paidOrdersCountInRange) * 100, 1) }}%
                    @else
                        0%
                    @endif
                </div>
                <div class="text-xs text-indigo-600 dark:text-indigo-400 mt-1">Of paid orders in range</div>
            </div>
        </div>
    </div>
    @endif

    <!-- Top Selling Products -->
    @if($topProducts->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Top Selling Products <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Quantity Sold</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Revenue</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Times Ordered</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Avg Price</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($topProducts as $product)
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium">{{ $product['name'] }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($product['total_quantity']) }}</td>
                        <td class="px-6 py-4 text-sm font-semibold text-green-600">RM {{ number_format($product['total_revenue'], 2) }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($product['order_count']) }}</td>
                        <td class="px-6 py-4 text-sm">RM {{ number_format($product['total_revenue'] / $product['total_quantity'], 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Traffic Sources with Conversion & Revenue -->
    @if($trafficSources->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Traffic Sources Performance <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Source</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Views</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Orders</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Conv Rate</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Revenue</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">RPV</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($trafficSources as $source)
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium">{{ $source->source }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($source->views) }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($source->orders) }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-2 py-1 text-xs rounded-full {{ $source->conversion_rate >= 3 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ $source->conversion_rate }}%
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm font-semibold text-green-600">RM {{ number_format($source->revenue, 2) }}</td>
                        <td class="px-6 py-4 text-sm text-blue-600">RM {{ number_format($source->rpv, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Device Performance -->
    @if($deviceBreakdown->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Device Performance <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Device</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Views</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Orders</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Conv Rate</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Revenue</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">RPV</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($deviceBreakdown as $device)
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium capitalize">{{ $device->device }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($device->views) }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($device->orders) }}</td>
                        <td class="px-6 py-4 text-sm">
                            <span class="px-2 py-1 text-xs rounded-full {{ $device->conversion_rate >= 3 ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                                {{ $device->conversion_rate }}%
                            </span>
                        </td>
                        <td class="px-6 py-4 text-sm font-semibold text-green-600">RM {{ number_format($device->revenue, 2) }}</td>
                        <td class="px-6 py-4 text-sm text-blue-600">RM {{ number_format($device->rpv, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Customer Insights Overview -->
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Customer Insights <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="border border-indigo-200 dark:border-indigo-800 rounded-lg p-4 bg-indigo-50 dark:bg-indigo-900/20">
                <div class="text-sm text-indigo-700 dark:text-indigo-400 font-medium">Unique Customers</div>
                <div class="text-2xl font-bold text-indigo-600 dark:text-indigo-500 mt-2">{{ number_format($uniqueCustomers) }}</div>
                <div class="text-xs text-indigo-600 dark:text-indigo-400 mt-1">Total unique buyers</div>
            </div>

            <div class="border border-purple-200 dark:border-purple-800 rounded-lg p-4 bg-purple-50 dark:bg-purple-900/20">
                <div class="text-sm text-purple-700 dark:text-purple-400 font-medium">Repeat Purchase Rate</div>
                <div class="text-2xl font-bold text-purple-600 dark:text-purple-500 mt-2">{{ $repeatPurchaseRate }}%</div>
                <div class="text-xs text-purple-600 dark:text-purple-400 mt-1">{{ number_format($repeatCustomers) }} of {{ number_format($totalCustomersInRange) }} bought again</div>
            </div>

            <div class="border border-green-200 dark:border-green-800 rounded-lg p-4 bg-green-50 dark:bg-green-900/20">
                <div class="text-sm text-green-700 dark:text-green-400 font-medium">New Customers</div>
                <div class="text-2xl font-bold text-green-600 dark:text-green-500 mt-2">{{ number_format($newCustomers) }}</div>
                <div class="text-xs text-green-600 dark:text-green-400 mt-1">RM {{ number_format($newCustomerRevenue, 2) }} revenue</div>
            </div>

            <div class="border border-blue-200 dark:border-blue-800 rounded-lg p-4 bg-blue-50 dark:bg-blue-900/20">
                <div class="text-sm text-blue-700 dark:text-blue-400 font-medium">Returning Customers</div>
                <div class="text-2xl font-bold text-blue-600 dark:text-blue-500 mt-2">{{ number_format($returningCustomers) }}</div>
                <div class="text-xs text-blue-600 dark:text-blue-400 mt-1">RM {{ number_format($returningCustomerRevenue, 2) }} revenue</div>
            </div>
        </div>
    </div>

    <!-- Top Customers -->
    @if($topCustomers->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Top Customers <span class="text-sm font-normal text-gray-500">(highest spending in selected range)</span></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Customer</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Phone</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Orders</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Total Spent</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($topCustomers as $customer)
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium">{{ $customer->customer_name }}</td>
                        <td class="px-6 py-4 text-sm">{{ $customer->customer_email ?: 'N/A' }}</td>
                        <td class="px-6 py-4 text-sm">{{ $customer->customer_phone }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($customer->order_count) }}</td>
                        <td class="px-6 py-4 text-sm font-semibold text-green-600">RM {{ number_format($customer->total_spent, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

    <!-- Geographic Distribution -->
    @if($geoByState->count() > 0)
    <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
        <h2 class="text-lg font-semibold mb-4">Top States by Revenue <span class="text-sm font-normal text-gray-500">(in selected date range)</span></h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                <thead>
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">State</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Orders</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Unique Customers</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Revenue</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Avg per Customer</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                    @foreach($geoByState as $state)
                    <tr>
                        <td class="px-6 py-4 text-sm font-medium">{{ $state->customer_state }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($state->order_count) }}</td>
                        <td class="px-6 py-4 text-sm">{{ number_format($state->unique_customers) }}</td>
                        <td class="px-6 py-4 text-sm font-semibold text-green-600">RM {{ number_format($state->revenue, 2) }}</td>
                        <td class="px-6 py-4 text-sm text-blue-600">RM {{ $state->unique_customers > 0 ? number_format($state->revenue / $state->unique_customers, 2) : '0.00' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    @endif

</div>
@endsection