@extends('layouts.app')
@section('title','Reports')@section('page-title','Reports')
@section('content')
<div class="page-header"><h1>Reports &amp; Analytics</h1><p>Branch-aware reports with cross-location visibility for admins</p></div>
<div class="row g-4">
    @foreach([['reports.sales','bi-graph-up-arrow','#FF6B35','Sales Report','Revenue, transactions, payment methods, top products, daily trends.'],['reports.inventory','bi-clipboard-data','#2EC4B6','Inventory Report','Stock levels, valuation by branch and category, low-stock alerts.'],['reports.profit','bi-currency-dollar','#4361EE','Profit & Margin Report','Gross profit per product, COGS analysis, margin percentages by branch.']] as [$route,$icon,$color,$title,$desc])
    <div class="col-12 col-md-4">
        <a href="{{ route($route) }}" class="text-decoration-none">
            <div class="card h-100" style="transition:all .2s;cursor:pointer;border:2px solid transparent;" onmouseover="this.style.borderColor='{{ $color }}'" onmouseout="this.style.borderColor='transparent'">
                <div class="card-body p-5 text-center">
                    <div style="width:72px;height:72px;background:{{ $color }}22;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 25px {{ $color }}33;">
                        <i class="bi {{ $icon }}" style="font-size:32px;color:{{ $color }};"></i>
                    </div>
                    <h5 class="fw-700 mb-2" style="font-family:'Space Grotesk',sans-serif;">{{ $title }}</h5>
                    <p class="text-muted mb-4" style="font-size:14px;">{{ $desc }}</p>
                    <span class="btn btn-sm" style="background:{{ $color }};color:#fff;border-radius:10px;padding:6px 20px;">Generate →</span>
                </div>
            </div>
        </a>
    </div>
    @endforeach
</div>
@endsection