@extends('admin.layouts.app')
@section('title', 'Reports')
@section('breadcrumb')
    <li class="breadcrumb-item active">Reports</li>
@endsection
@section('content')
<div class="page-header">
    <h1 class="page-title">Reports</h1>
</div>

<div class="row g-3">
    @foreach([
        ['Attendance Report', 'clipboard-data-fill', 'Subject-wise, student-wise attendance with below-75% highlights', route('admin.reports.attendance'), '#dbeafe', '#2563eb'],
        ['Fee Collection Report', 'cash-stack', 'Payment history, pending fees, collection summary', route('admin.reports.fees'), '#dcfce7', '#16a34a'],
        ['Student Report', 'people-fill', 'Student database, community-wise breakdown, class distribution', route('admin.reports.students'), '#ede9fe', '#7c3aed'],
        ['Application Report', 'file-earmark-person-fill', 'Application status, admission funnel', route('admin.reports.applications'), '#fef3c7', '#d97706'],
    ] as [$title, $icon, $desc, $url, $bg, $color])
    <div class="col-md-6">
        <a href="{{ $url }}" class="card text-decoration-none" style="transition:box-shadow 0.2s">
            <div class="card-body d-flex align-items-center gap-4 py-4">
                <div style="width:60px;height:60px;background:{{ $bg }};border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:{{ $color }};flex-shrink:0">
                    <i class="bi bi-{{ $icon }}"></i>
                </div>
                <div>
                    <div style="font-size:1.05rem;font-weight:600;color:#1e293b">{{ $title }}</div>
                    <div style="font-size:0.83rem;color:#64748b;margin-top:3px">{{ $desc }}</div>
                </div>
                <i class="bi bi-arrow-right-circle ms-auto" style="font-size:1.3rem;color:#cbd5e1"></i>
            </div>
        </a>
    </div>
    @endforeach
</div>
@endsection