@extends('layouts.app')

@section('title', 'Reports')
@section('heading', 'Reports')

@section('content')
@include('settings.partials.back-to-home')
    <x-card>
        <p class="mb-6 text-slate-600">Export and review HR data. Use the links below to open each report module.</p>
        <div class="mb-6">
            <a href="{{ route('reports.saved.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Saved reports &amp; schedules</a>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($reports as $report)
                <div class="flex flex-col rounded-xl border border-slate-200 p-5">
                    <span class="text-base font-semibold text-slate-900">{{ $report['title'] }}</span>
                    <span class="mt-1 flex-1 text-sm text-slate-500">{{ $report['description'] }}</span>
                    <div class="mt-4 flex flex-wrap gap-2">
                        @if($report['export_route'] && $report['export_route'] === $report['route'])
                            <a href="{{ route($report['export_route']) }}"
                               class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-white hover:opacity-90">
                                Download CSV
                            </a>
                        @else
                            <a href="{{ route($report['route'], $report['route_params'] ?? []) }}"
                               class="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                Open
                            </a>
                            @if(! empty($report['export_route']))
                                <a href="{{ route($report['export_route']) }}"
                                   class="rounded-lg bg-slate-800 px-3 py-1.5 text-sm font-medium text-white hover:bg-slate-700">
                                    Export CSV
                                </a>
                            @endif
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </x-card>
@endsection