@extends('admin.layout')

@section('page-title', 'Dashboard')

@section('content')
<div class="grid grid-cols-12 gap-4 md:gap-6" id="dashboard-content">
    <!-- Metric Group -->
    <div class="col-span-12">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-4">
            <!-- Metric Item - Customers -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-800">
                    <svg class="fill-gray-800 dark:fill-white/90" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.80443 5.60156C7.59109 5.60156 6.60749 6.58517 6.60749 7.79851C6.60749 9.01185 7.59109 9.99545 8.80443 9.99545C10.0178 9.99545 11.0014 9.01185 11.0014 7.79851C11.0014 6.58517 10.0178 5.60156 8.80443 5.60156ZM5.10749 7.79851C5.10749 5.75674 6.76267 4.10156 8.80443 4.10156C10.8462 4.10156 12.5014 5.75674 12.5014 7.79851C12.5014 9.84027 10.8462 11.4955 8.80443 11.4955C6.76267 11.4955 5.10749 9.84027 5.10749 7.79851ZM4.86252 15.3208C4.08769 16.0881 3.70377 17.0608 3.51705 17.8611C3.48384 18.0034 3.5211 18.1175 3.60712 18.2112C3.70161 18.3141 3.86659 18.3987 4.07591 18.3987H13.4249C13.6343 18.3987 13.7992 18.3141 13.8937 18.2112C13.9797 18.1175 14.017 18.0034 13.9838 17.8611C13.7971 17.0608 13.4132 16.0881 12.6383 15.3208C11.8821 14.572 10.6899 13.955 8.75042 13.955C6.81096 13.955 5.61877 14.572 4.86252 15.3208ZM3.8071 14.2549C4.87163 13.2009 6.45602 12.455 8.75042 12.455C11.0448 12.455 12.6292 13.2009 13.6937 14.2549C14.7397 15.2906 15.2207 16.5607 15.4446 17.5202C15.7658 18.8971 14.6071 19.8987 13.4249 19.8987H4.07591C2.89369 19.8987 1.73504 18.8971 2.05628 17.5202C2.28015 16.5607 2.76117 15.2906 3.8071 14.2549ZM15.3042 11.4955C14.4702 11.4955 13.7006 11.2193 13.0821 10.7533C13.3742 10.3314 13.6054 9.86419 13.7632 9.36432C14.1597 9.75463 14.7039 9.99545 15.3042 9.99545C16.5176 9.99545 17.5012 9.01185 17.5012 7.79851C17.5012 6.58517 16.5176 5.60156 15.3042 5.60156C14.7039 5.60156 14.1597 5.84239 13.7632 6.23271C13.6054 5.73284 13.3741 5.26561 13.082 4.84371C13.7006 4.37777 14.4702 4.10156 15.3042 4.10156C17.346 4.10156 19.0012 5.75674 19.0012 7.79851C19.0012 9.84027 17.346 11.4955 15.3042 11.4955ZM19.9248 19.8987H16.3901C16.7014 19.4736 16.9159 18.969 16.9827 18.3987H19.9248C20.1341 18.3987 20.2991 18.3141 20.3936 18.2112C20.4796 18.1175 20.5169 18.0034 20.4837 17.861C20.2969 17.0607 19.913 16.088 19.1382 15.3208C18.4047 14.5945 17.261 13.9921 15.4231 13.9566C15.2232 13.6945 14.9995 13.437 14.7491 13.1891C14.5144 12.9566 14.262 12.7384 13.9916 12.5362C14.3853 12.4831 14.8044 12.4549 15.2503 12.4549C17.5447 12.4549 19.1291 13.2008 20.1936 14.2549C21.2395 15.2906 21.7206 16.5607 21.9444 17.5202C22.2657 18.8971 21.107 19.8987 19.9248 19.8987Z" fill=""/>
                    </svg>
                </div>

                <div class="mt-5 flex items-end justify-between">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Customers</span>
                        <h4 class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90" data-stat="total_customers">{{ number_format($stats['total_customers']) }}</h4>
                    </div>
                </div>
            </div>

            <!-- Metric Item - Orders -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gray-100 dark:bg-gray-800">
                    <svg class="fill-gray-800 dark:fill-white/90" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.665 3.75621C11.8762 3.65064 12.1247 3.65064 12.3358 3.75621L18.7807 6.97856L12.3358 10.2009C12.1247 10.3065 11.8762 10.3065 11.665 10.2009L5.22014 6.97856L11.665 3.75621ZM4.29297 8.19203V16.0946C4.29297 16.3787 4.45347 16.6384 4.70757 16.7654L11.25 20.0366V11.6513C11.1631 11.6205 11.0777 11.5843 10.9942 11.5426L4.29297 8.19203ZM12.75 20.037L19.2933 16.7654C19.5474 16.6384 19.7079 16.3787 19.7079 16.0946V8.19202L13.0066 11.5426C12.9229 11.5844 12.8372 11.6208 12.75 11.6516V20.037ZM13.0066 2.41456C12.3732 2.09786 11.6277 2.09786 10.9942 2.41456L4.03676 5.89319C3.27449 6.27432 2.79297 7.05342 2.79297 7.90566V16.0946C2.79297 16.9469 3.27448 17.726 4.03676 18.1071L10.9942 21.5857L11.3296 20.9149L10.9942 21.5857C11.6277 21.9024 12.3732 21.9024 13.0066 21.5857L19.9641 18.1071C20.7264 17.726 21.2079 16.9469 21.2079 16.0946V7.90566C21.2079 7.05342 20.7264 6.27432 19.9641 5.89319L13.0066 2.41456Z" fill=""/>
                    </svg>
                </div>

                <div class="mt-5 flex items-end justify-between">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Orders</span>
                        <h4 class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90" data-stat="total_orders">{{ number_format($stats['total_orders']) }}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            <span data-stat="pending_orders">{{ number_format($stats['pending_orders']) }}</span> pending
                        </p>
                    </div>
                </div>
            </div>

            <!-- Metric Item - Today's Revenue -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-100 dark:bg-green-900/20">
                    <svg class="fill-green-600 dark:fill-green-400" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.3284 11.1716 11 12 11C12.8284 11 13.5 10.3284 13.5 9.5C13.5 8.67157 12.8284 8 12 8ZM10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12ZM12 15C11.1716 15 10.5 15.6716 10.5 16.5C10.5 17.3284 11.1716 18 12 18C12.8284 18 13.5 17.3284 13.5 16.5C13.5 15.6716 12.8284 15 12 15Z" fill=""/>
                    </svg>
                </div>

                <div class="mt-5 flex items-end justify-between">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Today's Revenue</span>
                        <h4 class="mt-2 text-title-sm font-bold text-gray-800 dark:text-white/90" data-stat="today_revenue">${{ number_format($stats['today_revenue'], 2) }}</h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Effective (after discounts)</p>
                    </div>
                </div>
            </div>

            <!-- Metric Item - Net Profit -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-purple-100 dark:bg-purple-900/20">
                    <svg class="fill-purple-600 dark:fill-purple-400" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 8C11.1716 8 10.5 8.67157 10.5 9.5C10.5 10.3284 11.1716 11 12 11C12.8284 11 13.5 10.3284 13.5 9.5C13.5 8.67157 12.8284 8 12 8ZM10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12ZM12 15C11.1716 15 10.5 15.6716 10.5 16.5C10.5 17.3284 11.1716 18 12 18C12.8284 18 13.5 17.3284 13.5 16.5C13.5 15.6716 12.8284 15 12 15Z" fill=""/>
                    </svg>
                </div>

                <div class="mt-5 flex items-end justify-between">
                    <div>
                        <span class="text-sm text-gray-500 dark:text-gray-400">Net Profit (Month)</span>
                        <h4 class="mt-2 text-title-sm font-bold {{ $stats['net_profit'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}" data-stat="net_profit">
                            ${{ number_format($stats['net_profit'], 2) }}
                        </h4>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            Revenue: $<span data-stat="month_revenue">{{ number_format($stats['month_revenue'], 2) }}</span> | 
                            Expenses: $<span data-stat="month_expenses">{{ number_format($stats['month_expenses'], 2) }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Stats Row -->
    <div class="col-span-12">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-6 lg:grid-cols-4">
            <!-- Hold Account Balance -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Hold Account Balance</span>
                    <a href="{{ route('admin.hold-accounts.index') }}" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400">View</a>
                </div>
                <h4 class="text-2xl font-bold {{ $stats['total_hold_account_balance'] >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}" data-stat="total_hold_account_balance">
                    ${{ number_format($stats['total_hold_account_balance'], 2) }}
                </h4>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    <span data-stat="today_transactions">{{ number_format($stats['today_transactions']) }}</span> transactions today
                </p>
            </div>

            <!-- Payment Status Summary -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Payment Status</span>
                    <a href="{{ route('admin.orders.index') }}" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400">View</a>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Paid:</span>
                        <span class="text-sm font-semibold text-green-600 dark:text-green-400" data-stat="paid_orders">{{ number_format($stats['paid_orders']) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Partial:</span>
                        <span class="text-sm font-semibold text-orange-600 dark:text-orange-400" data-stat="partial_orders">{{ number_format($stats['partial_orders']) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Unpaid:</span>
                        <span class="text-sm font-semibold text-red-600 dark:text-red-400" data-stat="unpaid_orders">{{ number_format($stats['unpaid_orders']) }}</span>
                    </div>
                </div>
            </div>

            <!-- Payment Issues -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Payment Issues</span>
                    <a href="{{ route('admin.reports.orders', ['payment_type' => 'overpaid']) }}" class="text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400">View</a>
                </div>
                <h4 class="text-2xl font-bold text-orange-600 dark:text-orange-400" data-stat="payment_issues">
                    {{ $stats['overpaid_orders'] + $stats['underpaid_orders'] }}
                </h4>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    <span data-stat="overpaid_orders">{{ number_format($stats['overpaid_orders']) }}</span> overpaid, 
                    <span data-stat="underpaid_orders">{{ number_format($stats['underpaid_orders']) }}</span> underpaid
                </p>
            </div>

            <!-- Today's Activity -->
            <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
                <div class="flex items-center justify-between mb-4">
                    <span class="text-sm text-gray-500 dark:text-gray-400">Today's Activity</span>
                </div>
                <div class="space-y-2">
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Orders:</span>
                        <span class="text-sm font-semibold text-gray-800 dark:text-white" data-stat="today_orders">{{ number_format($stats['today_orders']) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Revenue:</span>
                        <span class="text-sm font-semibold text-green-600 dark:text-green-400" data-stat="today_revenue_display">${{ number_format($stats['today_revenue'], 2) }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-xs text-gray-600 dark:text-gray-400">Expenses:</span>
                        <span class="text-sm font-semibold text-red-600 dark:text-red-400" data-stat="today_expenses">${{ number_format($stats['today_expenses'], 2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Orders Table -->
    <div class="col-span-12 xl:col-span-8">
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
            <div class="flex items-start justify-between mb-6">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Recent Orders</h3>
                    <p class="text-theme-sm text-gray-500 dark:text-gray-400 mt-1">Latest customer orders</p>
                </div>
                <a href="{{ route('admin.orders.index') }}" class="text-theme-sm font-medium text-brand-500 hover:text-brand-600">See all</a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="border-b border-gray-200 dark:border-gray-800">
                            <th class="px-4 py-3 text-left text-theme-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Order #</th>
                            <th class="px-4 py-3 text-left text-theme-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Customer</th>
                            <th class="px-4 py-3 text-left text-theme-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Status</th>
                            <th class="px-4 py-3 text-left text-theme-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Amount</th>
                            <th class="px-4 py-3 text-left text-theme-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-800" id="recent-orders-body">
                        @forelse($recent_orders as $order)
                        <tr class="hover:bg-gray-50 dark:hover:bg-white/5 transition-colors">
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="text-theme-sm font-semibold text-gray-800 dark:text-white/90">{{ $order->order_number }}</div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="text-theme-sm font-medium text-gray-800 dark:text-white/90">{{ $order->customer->name }}</div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-theme-xs font-medium
                                    {{ $order->status === 'completed' ? 'bg-success-100 text-success-800 dark:bg-success-500/15 dark:text-success-500' : 
                                       ($order->status === 'pending' ? 'bg-orange-100 text-orange-800 dark:bg-orange-500/15 dark:text-orange-500' : 
                                       ($order->status === 'cancelled' ? 'bg-error-100 text-error-800 dark:bg-error-500/15 dark:text-error-500' : 
                                       'bg-brand-100 text-brand-800 dark:bg-brand-500/15 dark:text-brand-500')) }}">
                                    {{ ucfirst($order->status) }}
                                </span>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="text-theme-sm font-semibold text-gray-800 dark:text-white/90">${{ number_format($order->total_amount, 2) }}</div>
                            </td>
                            <td class="px-4 py-4 whitespace-nowrap">
                                <div class="text-theme-sm text-gray-500 dark:text-gray-400">{{ $order->created_at->format('M d, Y') }}</div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="px-4 py-12 text-center">
                                <div class="flex flex-col items-center">
                                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                    <p class="mt-2 text-theme-sm text-gray-500 dark:text-gray-400">No orders yet</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="col-span-12 xl:col-span-4 space-y-6">
        <!-- Payment Status -->
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
            <div class="flex items-start justify-between mb-5">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Payment Status</h3>
                <a href="{{ route('admin.orders.index', ['payment_status' => 'paid']) }}" class="text-theme-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">View More</a>
            </div>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-success-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Paid</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="paid_orders">{{ $stats['paid_orders'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-orange-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Partial</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="partial_orders">{{ $stats['partial_orders'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-error-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Unpaid</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="unpaid_orders">{{ $stats['unpaid_orders'] }}</span>
                </div>
            </div>
        </div>

        <!-- Order Status -->
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
            <div class="flex items-start justify-between mb-5">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Order Status</h3>
                <a href="{{ route('admin.orders.index') }}" class="text-theme-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">View More</a>
            </div>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-brand-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Processing</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="processing_orders">{{ $stats['processing_orders'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-blue-light-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Ready</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="ready_orders">{{ $stats['ready_orders'] }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2.5 w-2.5 rounded-full bg-success-500 mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">Completed</span>
                    </div>
                    <span class="text-theme-sm font-semibold text-gray-800 dark:text-white/90" data-stat="completed_orders">{{ $stats['completed_orders'] }}</span>
                </div>
            </div>
        </div>

        <!-- Top Hold Accounts -->
        @if(isset($hold_accounts) && $hold_accounts->count() > 0)
        <div class="rounded-2xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/[0.03] md:p-6">
            <div class="flex items-start justify-between mb-5">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Top Hold Accounts</h3>
                <a href="{{ route('admin.hold-accounts.index') }}" class="text-theme-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">View All</a>
            </div>
            <div class="space-y-3">
                @foreach($hold_accounts as $account)
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="h-2 w-2 rounded-full {{ $account->balance >= 0 ? 'bg-green-500' : 'bg-red-500' }} mr-2"></div>
                        <span class="text-theme-sm font-medium text-gray-700 dark:text-gray-300">{{ $account->paymentMethod->name ?? 'N/A' }}</span>
                    </div>
                    <span class="text-theme-sm font-semibold {{ $account->balance >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                        ${{ number_format($account->balance, 2) }}
                    </span>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>

<!-- Auto-update indicator -->
<div class="fixed bottom-4 right-4 bg-white dark:bg-gray-800 shadow-lg rounded-lg px-4 py-2 border border-gray-200 dark:border-gray-700" id="update-indicator" style="display: none;">
    <div class="flex items-center gap-2">
        <div class="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
        <span class="text-xs text-gray-600 dark:text-gray-400">Updating...</span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let updateInterval;
    let isUpdating = false;

    function formatCurrency(value) {
        return '$' + parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    }

    function formatNumber(value) {
        return parseFloat(value).toLocaleString('en-US');
    }

    function updateStats(data) {
        if (isUpdating) return;
        isUpdating = true;
        
        // Update all elements with data-stat attribute
        document.querySelectorAll('[data-stat]').forEach(function(element) {
            const statName = element.getAttribute('data-stat');
            if (data[statName] !== undefined) {
                const value = data[statName];
                
                // Check if it's a currency value
                if (statName.includes('revenue') || statName.includes('expenses') || statName.includes('balance') || statName.includes('profit')) {
                    element.textContent = formatCurrency(value);
                } else if (statName === 'net_profit') {
                    element.textContent = formatCurrency(value);
                    // Update color based on value
                    if (value >= 0) {
                        element.classList.remove('text-red-600', 'dark:text-red-400');
                        element.classList.add('text-green-600', 'dark:text-green-400');
                    } else {
                        element.classList.remove('text-green-600', 'dark:text-green-400');
                        element.classList.add('text-red-600', 'dark:text-red-400');
                    }
                } else if (statName === 'total_hold_account_balance') {
                    element.textContent = formatCurrency(value);
                    // Update color based on value
                    if (value >= 0) {
                        element.classList.remove('text-red-600', 'dark:text-red-400');
                        element.classList.add('text-green-600', 'dark:text-green-400');
                    } else {
                        element.classList.remove('text-green-600', 'dark:text-green-400');
                        element.classList.add('text-red-600', 'dark:text-red-400');
                    }
                } else {
                    element.textContent = formatNumber(value);
                }
            }
        });

        // Special handling for today_revenue_display
        if (data.today_revenue !== undefined) {
            const displayElement = document.querySelector('[data-stat="today_revenue_display"]');
            if (displayElement) {
                displayElement.textContent = formatCurrency(data.today_revenue);
            }
        }

        // Special handling for payment_issues
        if (data.overpaid_orders !== undefined && data.underpaid_orders !== undefined) {
            const issuesElement = document.querySelector('[data-stat="payment_issues"]');
            if (issuesElement) {
                issuesElement.textContent = formatNumber(data.overpaid_orders + data.underpaid_orders);
            }
        }

        isUpdating = false;
    }

    function fetchStats() {
        const indicator = document.getElementById('update-indicator');
        if (indicator) indicator.style.display = 'block';

        fetch('{{ route("admin.dashboard.stats") }}', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            updateStats(data);
            if (indicator) indicator.style.display = 'none';
        })
        .catch(error => {
            console.error('Error fetching stats:', error);
            if (indicator) indicator.style.display = 'none';
        });
    }

    // Auto-update every 30 seconds
    updateInterval = setInterval(fetchStats, 30000);

    // Also update when page becomes visible
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden) {
            fetchStats();
        }
    });

    // Initial update after 5 seconds (to allow page to fully load)
    setTimeout(fetchStats, 5000);
});
</script>
@endsection