@extends('layouts.app')

@section('title', 'Reports')
@section('nav_reports', 'bg-teal-50 text-teal-700 font-semibold')
@section('page_title', 'Reports')
@section('page_subtitle', 'Choose a report to view')

@section('content')

@if(empty($groups))
<div class="bg-white border-[0.5px] border-gray-200 rounded-xl px-5 py-16 text-center">
    <p class="text-gray-300 text-sm">You don't have access to any reports.</p>
</div>
@else
<div class="space-y-8 max-w-5xl">
    @foreach($groups as $groupName => $items)
    <section>
        <p class="text-gray-400 text-xs font-semibold uppercase tracking-wider mb-3">{{ $groupName }}</p>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            @foreach($items as $r)
            <a href="{{ route($r['route']) }}"
               class="group bg-white border-[0.5px] border-gray-200 rounded-xl p-5 hover:border-teal-300 hover:shadow-sm transition-all flex items-start gap-3.5">
                <div class="w-9 h-9 rounded-lg bg-teal-50 text-teal-600 flex items-center justify-center flex-shrink-0 group-hover:bg-teal-100 transition-colors">
                    <svg class="w-4.5 h-4.5" style="width:18px;height:18px" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="{{ $r['icon'] }}"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <p class="font-semibold text-gray-800 text-sm group-hover:text-teal-700 transition-colors">{{ $r['title'] }}</p>
                    <p class="text-gray-400 text-xs mt-1 leading-relaxed">{{ $r['desc'] }}</p>
                </div>
            </a>
            @endforeach
        </div>
    </section>
    @endforeach
</div>
@endif

@endsection