{{--
    The Reports landing page: five categories, each with a short description
    and a grid of report cards — not a long flat list of links. Every card's
    description is the one thing that has to earn its place here, since it is
    the only clue a first-time visitor gets about what a report actually
    shows before opening it.
--}}
@extends('layouts.app')

@section('title', 'Reports')

@section('content')
    <x-page-header title="Reports" subtitle="Twenty-two reports across inventory, people, custody, warranty and compliance — every one filterable, sortable and exportable." />

    @foreach ($categories as $categoryReports)
        @php
            $category = $categoryReports->first()->category;
        @endphp

        <section class="ams-report-category">
            <div class="ams-report-category__head">
                <span class="ams-tile ams-tile--lg ams-tile--primary" aria-hidden="true">
                    <i class="bi bi-{{ $category->icon() }}"></i>
                </span>
                <div>
                    <h2 class="ams-report-category__title">{{ $category->label() }}</h2>
                    <p class="ams-report-category__description">{{ $category->description() }}</p>
                </div>
            </div>

            <div class="row g-3">
                @foreach ($categoryReports as $report)
                    <div class="col-md-6 col-xl-3">
                        <a href="{{ route('reports.show', $report->key) }}" class="ams-report-card">
                            <p class="ams-report-card__title">
                                <i class="bi bi-{{ $report->icon }}" aria-hidden="true"></i>
                                {{ $report->title }}
                            </p>
                            <p class="ams-report-card__description">{{ $report->description }}</p>
                        </a>
                    </div>
                @endforeach
            </div>
        </section>
    @endforeach
@endsection
