<div class="page-title mb-4">
    <h5><i class="fas fa-chart-bar me-2 text-gold"></i>Reports</h5>
</div>

<div class="row g-4">
    <div class="col-12">
        <div class="glass-card p-0">
            <div class="card-header">
                <div class="card-header-left">
                    <i class="fas fa-th-list card-icon"></i>
                    <h6 class="card-title">All Reports</h6>
                </div>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/daily-sales') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(200,164,78,0.15);border-color:rgba(200,164,78,0.3);color:var(--gold-primary);">
                                    <i class="fas fa-dollar-sign"></i>
                                </div>
                                <h6 class="mb-1">Daily Sales</h6>
                                <small class="text-muted">View sales by day</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/monthly-sales') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(13,202,240,0.15);border-color:rgba(13,202,240,0.3);color:#0dcaf0;">
                                    <i class="fas fa-calendar-alt"></i>
                                </div>
                                <h6 class="mb-1">Monthly Sales</h6>
                                <small class="text-muted">Monthly sales breakdown</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/yearly-sales') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(25,135,84,0.15);border-color:rgba(25,135,84,0.3);color:#198754;">
                                    <i class="fas fa-chart-line"></i>
                                </div>
                                <h6 class="mb-1">Yearly Sales</h6>
                                <small class="text-muted">Annual sales summary</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/profit-loss') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(220,53,69,0.15);border-color:rgba(220,53,69,0.3);color:#dc3545;">
                                    <i class="fas fa-balance-scale"></i>
                                </div>
                                <h6 class="mb-1">Profit & Loss</h6>
                                <small class="text-muted">P&L statement</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/inventory') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(255,193,7,0.15);border-color:rgba(255,193,7,0.3);color:#ffc107;">
                                    <i class="fas fa-boxes"></i>
                                </div>
                                <h6 class="mb-1">Inventory</h6>
                                <small class="text-muted">Current stock levels</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/employees') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(111,66,193,0.15);border-color:rgba(111,66,193,0.3);color:#6f42c1;">
                                    <i class="fas fa-user-tie"></i>
                                </div>
                                <h6 class="mb-1">Employees</h6>
                                <small class="text-muted">Employee performance</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/customers') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(32,201,151,0.15);border-color:rgba(32,201,151,0.3);color:#20c997;">
                                    <i class="fas fa-users"></i>
                                </div>
                                <h6 class="mb-1">Customers</h6>
                                <small class="text-muted">Customer analytics</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/appointments') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(13,110,253,0.15);border-color:rgba(13,110,253,0.3);color:#0d6efd;">
                                    <i class="fas fa-calendar-check"></i>
                                </div>
                                <h6 class="mb-1">Appointments</h6>
                                <small class="text-muted">Appointment analysis</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/cash-flow') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(40,167,69,0.15);border-color:rgba(40,167,69,0.3);color:#28a745;">
                                    <i class="fas fa-money-bill-wave"></i>
                                </div>
                                <h6 class="mb-1">Cash Flow</h6>
                                <small class="text-muted">Cash movement tracking</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/expenses') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(220,53,69,0.15);border-color:rgba(220,53,69,0.3);color:#dc3545;">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                </div>
                                <h6 class="mb-1">Expenses</h6>
                                <small class="text-muted">Expense by category</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/purchases') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(255,152,0,0.15);border-color:rgba(255,152,0,0.3);color:#ff9800;">
                                    <i class="fas fa-truck"></i>
                                </div>
                                <h6 class="mb-1">Purchases</h6>
                                <small class="text-muted">Purchase orders</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/stock-movement') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(102,16,242,0.15);border-color:rgba(102,16,242,0.3);color:#6610f2;">
                                    <i class="fas fa-exchange-alt"></i>
                                </div>
                                <h6 class="mb-1">Stock Movement</h6>
                                <small class="text-muted">Inventory transactions</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/top-services') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(200,164,78,0.15);border-color:rgba(200,164,78,0.3);color:var(--gold-primary);">
                                    <i class="fas fa-cut"></i>
                                </div>
                                <h6 class="mb-1">Top Services</h6>
                                <small class="text-muted">Revenue by service</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/top-employees') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(111,66,193,0.15);border-color:rgba(111,66,193,0.3);color:#6f42c1;">
                                    <i class="fas fa-star"></i>
                                </div>
                                <h6 class="mb-1">Top Employees</h6>
                                <small class="text-muted">Best performers</small>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <a href="<?= url('reports/top-customers') ?>" class="text-decoration-none">
                            <div class="glass-card p-3 text-center hover-lift">
                                <div class="stats-icon mx-auto mb-2" style="width:48px;height:48px;background:rgba(32,201,151,0.15);border-color:rgba(32,201,151,0.3);color:#20c997;">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <h6 class="mb-1">Top Customers</h6>
                                <small class="text-muted">Highest spenders</small>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
