<div class="bg-card flex min-w-0 flex-auto flex-col dark:bg-transparent sm:absolute sm:inset-0 sm:overflow-hidden">
<div class="flex min-w-0 flex-auto flex-col h-full">
    <div class="flex-auto p-6 sm:p-10 overflow-auto">
        <!-- Error Message -->
        <div *ngIf="errorMessage" class="bg-red-50 border-l-4 border-red-500 text-red-700 px-4 py-3 rounded mb-6">
            <div class="flex items-center justify-between">
                <span>{{ errorMessage }}</span>
                <button (click)="retryFetch()" class="text-red-700 underline hover:text-red-900">Retry</button>
            </div>
        </div>

        <!-- Top Metrics Row -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <!-- Machines Card with Menu -->
            <div class="bg-blue-600 text-white rounded-lg p-5 shadow relative">
                <div class="flex items-start justify-between mb-3">
                    <div class="text-sm font-medium">{{ machineTitle }}</div>
                    <button mat-icon-button [matMenuTriggerFor]="machineMenu" class="text-white -mt-2 -mr-2">
                        <mat-icon class="text-white text-xl">more_vert</mat-icon>
                    </button>
                    <mat-menu #machineMenu="matMenu">
                        <button mat-menu-item (click)="updateMachine('all')">
                            <mat-icon>list</mat-icon>
                            <span>All Machines</span>
                        </button>
                        <button mat-menu-item (click)="updateMachine('active')">
                            <mat-icon>check_circle</mat-icon>
                            <span>Active Machines</span>
                        </button>
                        <button mat-menu-item (click)="updateMachine('inactive')">
                            <mat-icon>cancel</mat-icon>
                            <span>Inactive Machines</span>
                        </button>
                    </mat-menu>
                </div>
                <div class="text-5xl font-bold">{{ machineCount }}</div>
            </div>

            <!-- Clients -->
            <div class="bg-indigo-600 text-white rounded-lg p-5 shadow">
                <div class="text-sm font-medium mb-3">Clients</div>
                <div class="text-5xl font-bold">{{ clients }}</div>
            </div>

            <!-- Active Machines -->
            <div class="bg-cyan-500 text-white rounded-lg p-5 shadow">
                <div class="text-sm font-medium mb-3">Active Machines</div>
                <div class="text-5xl font-bold">{{ activeMachines }}</div>
            </div>

            <!-- Inactive Machines -->
            <div class="bg-purple-600 text-white rounded-lg p-5 shadow">
                <div class="text-sm font-medium mb-3">Inactive Machines</div>
                <div class="text-5xl font-bold">{{ inactiveMachines }}</div>
            </div>
        </div>

        <!-- Payment and Bottom Metrics Row -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
            <!-- Payment Overview - Takes 1 column -->
            <div class="bg-orange-500 text-white rounded-lg p-5 shadow">
                <div class="text-sm font-semibold mb-4 uppercase tracking-wide">Payment Overview</div>
                <div class="space-y-2 mb-4">
                    <div class="flex justify-between items-center text-sm">
                        <span>Cash</span>
                        <span class="font-semibold">₹{{ paymentCash | number:'1.0-0' }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span>Cashless</span>
                        <span class="font-semibold">₹{{ paymentCashless | number:'1.0-0' }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-xs">UPI/Card (PhonePe)</span>
                        <span class="font-semibold">₹{{ paymentUPIWalletCard | number:'1.0-0' }}</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-xs">UPI/Wallet (Paytm)</span>
                        <span class="font-semibold">₹{{ paymentUPIWalletPaytm | number:'1.0-0' }}</span>
                    </div>
                </div>
                <div class="border-t border-white/30 pt-3 space-y-1">
                    <div class="flex justify-between text-xs">
                        <span>Refund</span>
                        <span>₹{{ refund | number:'1.2-2' }}</span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span>Refund Processed</span>
                        <span>₹{{ refundProcessed | number:'1.2-2' }}</span>
                    </div>
                    <div class="flex justify-between text-base font-bold pt-2 border-t border-white/30">
                        <span>Total</span>
                        <span>₹{{ paymentTotal | number:'1.0-0' }}</span>
                    </div>
                </div>
            </div>

            <!-- Other Metrics - Takes 2 columns -->
            <div class="lg:col-span-2 grid grid-cols-2 sm:grid-cols-4 gap-4">
                <!-- Company Users -->
                <div class="bg-teal-600 text-white rounded-lg p-5 shadow">
                    <div class="text-sm font-medium mb-3">Company Users</div>
                    <div class="text-5xl font-bold">{{ companyUsers }}</div>
                </div>

                <!-- Client Users -->
                <div class="bg-slate-600 text-white rounded-lg p-5 shadow">
                    <div class="text-sm font-medium mb-3">Client Users</div>
                    <div class="text-5xl font-bold">{{ clientUsers }}</div>
                </div>

                <!-- Transactions -->
                <div class="bg-green-700 text-white rounded-lg p-5 shadow">
                    <div class="text-sm font-medium mb-3">Transactions</div>
                    <div class="text-5xl font-bold">{{ transactions | number }}</div>
                </div>

                <!-- Sales -->
                <div class="bg-green-600 text-white rounded-lg p-5 shadow">
                    <div class="text-sm font-medium mb-3">Total Sales</div>
                    <div class="text-4xl font-bold">{{ sales }}</div>
                </div>
            </div>
        </div>

        <!-- Machine Status Panels -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
            <!-- Machine Operation Status -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Machine Operation Status</h3>
                    <mat-icon class="text-blue-600 cursor-pointer">filter_list</mat-icon>
                </div>
                <div class="grid grid-cols-2 gap-x-6 gap-y-3">
                    <div *ngFor="let key of getOperationStatusKeys()" class="flex justify-between items-center">
                        <span class="text-sm text-gray-700">{{ key }}</span>
                        <span class="text-lg font-semibold text-gray-900">{{ machineOperationStatus[key] }}</span>
                    </div>
                </div>
            </div>

            <!-- Machine Stock Status -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Machine Stock Status</h3>
                    <mat-icon class="text-blue-600 cursor-pointer">filter_list</mat-icon>
                </div>
                <div class="grid grid-cols-5 gap-2">
                    <div *ngFor="let key of getStockStatusKeys()" 
                         class="text-center p-3 rounded-lg"
                         [ngClass]="{
                            'bg-green-100 text-green-800': key === '75 - 100%',
                            'bg-yellow-100 text-yellow-800': key === '50 - 75%',
                            'bg-orange-100 text-orange-800': key === '25 - 50%',
                            'bg-red-100 text-red-800': key === '0 - 25%',
                            'bg-pink-100 text-pink-800': key === 'N/A'
                         }">
                        <div class="text-[10px] font-medium mb-1">{{ key }}</div>
                        <div class="text-2xl font-bold">{{ machineStockStatus[key] }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
            <!-- Product Sales Chart -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Product Sales</h3>
                    <button mat-stroked-button [matMenuTriggerFor]="productSalesMenu" class="text-sm border border-blue-300 text-blue-700 rounded-lg px-4 py-2 hover:bg-blue-50 flex items-center gap-2">
                        <mat-icon class="text-lg">schedule</mat-icon>
                        <span class="capitalize font-medium">{{ productSalesTimeRange }}</span>
                        <mat-icon class="text-lg">expand_more</mat-icon>
                    </button>
                    <mat-menu #productSalesMenu="matMenu">
                        <button mat-menu-item (click)="updateProductSalesTimeRange('day')">
                            <mat-icon>today</mat-icon>
                            <span>Daily</span>
                        </button>
                        <button mat-menu-item (click)="updateProductSalesTimeRange('week')">
                            <mat-icon>date_range</mat-icon>
                            <span>Weekly</span>
                        </button>
                        <button mat-menu-item (click)="updateProductSalesTimeRange('month')">
                            <mat-icon>calendar_month</mat-icon>
                            <span>Monthly</span>
                        </button>
                        <button mat-menu-item (click)="updateProductSalesTimeRange('year')">
                            <mat-icon>calendar_today</mat-icon>
                            <span>Yearly</span>
                        </button>
                    </mat-menu>
                </div>
                <apx-chart
                    [series]="productSalesChartOptions.series"
                    [chart]="productSalesChartOptions.chart"
                    [xaxis]="productSalesChartOptions.xaxis"
                    [yaxis]="productSalesChartOptions.yaxis"
                    [colors]="productSalesChartOptions.colors"
                    [plotOptions]="productSalesChartOptions.plotOptions"
                    [dataLabels]="productSalesChartOptions.dataLabels"
                    [fill]="productSalesChartOptions.fill"
                    [legend]="productSalesChartOptions.legend"
                    [grid]="productSalesChartOptions.grid"
                ></apx-chart>
            </div>

            <!-- Top Selling Products -->
            <div class="bg-white rounded-lg shadow p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-base font-semibold text-gray-900">Top Selling Products</h3>
                    <button mat-stroked-button [matMenuTriggerFor]="topProductsMenu" class="text-sm border border-purple-300 text-purple-700 rounded-lg px-4 py-2 hover:bg-purple-50 flex items-center gap-2">
                        <mat-icon class="text-lg">schedule</mat-icon>
                        <span class="capitalize font-medium">{{ topProductsTimeRange }}</span>
                        <mat-icon class="text-lg">expand_more</mat-icon>
                    </button>
                    <mat-menu #topProductsMenu="matMenu">
                        <button mat-menu-item (click)="updateTopProductsTimeRange('day')">
                            <mat-icon>today</mat-icon>
                            <span>Daily</span>
                        </button>
                        <button mat-menu-item (click)="updateTopProductsTimeRange('week')">
                            <mat-icon>date_range</mat-icon>
                            <span>Weekly</span>
                        </button>
                        <button mat-menu-item (click)="updateTopProductsTimeRange('month')">
                            <mat-icon>calendar_month</mat-icon>
                            <span>Monthly</span>
                        </button>
                        <button mat-menu-item (click)="updateTopProductsTimeRange('year')">
                            <mat-icon>calendar_today</mat-icon>
                            <span>Yearly</span>
                        </button>
                    </mat-menu>
                </div>
                <div class="overflow-auto max-h-[320px]">
                    <table class="w-full">
                        <thead class="bg-teal-600 text-white sticky top-0">
                            <tr>
                                <th class="text-left p-3 text-xs font-semibold">Product</th>
                                <th class="text-right p-3 text-xs font-semibold">Quantity</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let product of topSellingProducts; let i = index" 
                                class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
                                [ngClass]="{'bg-gray-50': i % 2 === 0}">
                                <td class="p-3 text-sm text-gray-700">{{ product.product_name }}</td>
                                <td class="p-3 text-sm text-right font-semibold text-gray-900">{{ product.quantity | number }}</td>
                            </tr>
                            <tr *ngIf="topSellingProducts.length === 0">
                                <td colspan="2" class="p-6 text-center text-gray-500">
                                    <mat-icon class="text-4xl text-gray-300 mb-2">inbox</mat-icon>
                                    <div class="text-sm">No data available</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Sales Area Chart -->
        <div class="bg-white rounded-lg shadow p-6 mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-base font-semibold text-gray-900">Sales Trend</h3>
                <button mat-stroked-button [matMenuTriggerFor]="salesMenu" class="text-sm border border-green-300 text-green-700 rounded-lg px-4 py-2 hover:bg-green-50 flex items-center gap-2">
                    <mat-icon class="text-lg">schedule</mat-icon>
                    <span class="capitalize font-medium">{{ salesTimeRange }}</span>
                    <mat-icon class="text-lg">expand_more</mat-icon>
                </button>
                <mat-menu #salesMenu="matMenu">
                    <button mat-menu-item (click)="updateSalesTimeRange('day')">
                        <mat-icon>today</mat-icon>
                        <span>Daily</span>
                    </button>
                    <button mat-menu-item (click)="updateSalesTimeRange('week')">
                        <mat-icon>date_range</mat-icon>
                        <span>Weekly</span>
                    </button>
                    <button mat-menu-item (click)="updateSalesTimeRange('month')">
                        <mat-icon>calendar_month</mat-icon>
                        <span>Monthly</span>
                    </button>
                    <button mat-menu-item (click)="updateSalesTimeRange('year')">
                        <mat-icon>calendar_today</mat-icon>
                        <span>Yearly</span>
                    </button>
                </mat-menu>
            </div>
            <apx-chart
                [series]="salesChartOptions.series"
                [chart]="salesChartOptions.chart"
                [xaxis]="salesChartOptions.xaxis"
                [yaxis]="salesChartOptions.yaxis"
                [colors]="salesChartOptions.colors"
                [stroke]="salesChartOptions.stroke"
                [dataLabels]="salesChartOptions.dataLabels"
                [fill]="salesChartOptions.fill"
                [grid]="salesChartOptions.grid"
            ></apx-chart>
        </div>
    </div>
</div>
</div>