@extends('layouts.app')
@section('title', 'Reports')
@section('page_title', 'Reports')
@section('content')
<div class="page-heading"><h2>Reports Overview</h2></div>
<div class="grid report-summary-grid">
    <x-stat-card label="Today Sales" :value="'TZS '.tzs_amount($todaySales)" tone="blue" icon="sales" class="stat-card" />
    <x-stat-card label="Today Expenses" :value="'TZS '.tzs_amount($todayExpenses)" tone="red" icon="expense" class="stat-card" />
    <x-stat-card label="Low Stock Items" :value="number_format($lowStockCount)" tone="orange" icon="warning" class="stat-card" />
    <x-stat-card label="Pending Payments" :value="number_format($pendingPaymentCount)" tone="orange" icon="sales" class="stat-card" />
</div>
<section class="report-section"><div class="section-heading"><div><span>Daily Operations</span><h3>What needs attention today</h3></div></div><div class="grid report-menu-grid report-menu-primary">
    <a class="card report-card report-card-v13" href="{{ route('reports.daily-summary') }}"><div class="report-icon blue"><x-icon name="daily" /></div><h3>Daily Summary</h3><p>One-day sales, profit and expense summary.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.sales') }}"><div class="report-icon blue"><x-icon name="sales" /></div><h3>Sales Report</h3><p>Detailed sales by date and payment method.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.low-stock') }}"><div class="report-icon red"><x-icon name="warning" /></div><h3>Low Stock</h3><p>Products requiring stock attention.</p><span class="report-card-arrow">View report →</span></a>
</div></section>

<section class="report-section"><div class="section-heading"><div><span>Business Performance</span><h3>Understand growth and profitability</h3></div></div><div class="grid report-menu-grid">
    <a class="card report-card report-card-v13" href="{{ route('reports.profit-loss') }}"><div class="report-icon green"><x-icon name="profit" /></div><h3>Profit & Loss</h3><p>Sales, costs, expenses and net profit.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.monthly-summary') }}"><div class="report-icon green"><x-icon name="monthly" /></div><h3>Monthly Summary</h3><p>Daily performance across one month.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.top-products') }}"><div class="report-icon purple"><x-icon name="top" /></div><h3>Top Products</h3><p>Best products by sales, quantity and profit.</p><span class="report-card-arrow">View report →</span></a>
</div></section>

<section class="report-section"><div class="section-heading"><div><span>Business Records</span><h3>Review stock and operating expenses</h3></div></div><div class="grid report-menu-grid report-menu-secondary">
    <a class="card report-card report-card-v13" href="{{ route('reports.stock') }}"><div class="report-icon blue"><x-icon name="stock" /></div><h3>Stock Report</h3><p>Availability, value and product status.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.expenses') }}"><div class="report-icon red"><x-icon name="expense" /></div><h3>Expense Report</h3><p>Expense totals and detailed records.</p><span class="report-card-arrow">View report →</span></a>
    <a class="card report-card report-card-v13" href="{{ route('reports.pending-payments') }}"><div class="report-icon orange"><x-icon name="sales" /></div><h3>Pending Payments</h3><p>Outstanding balances and customer follow-up.</p><span class="report-card-arrow">View report →</span></a>
</div></section>
@endsection