@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <x-chm.layout.page title="M&E reports" subtitle="Progress tracking & implementation reports" icon="bx bx-bar-chart-alt-2">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('planning.dashboard')">Planning</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">M&E reports</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('create', App\Models\MeReport::class)
                <x-chm.button variant="primary" icon="bx bx-plus" :href="route('planning.me-reports.create')">New report</x-chm.button>
            @endcan
        </x-slot:actions>

        <x-chm.card>
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead><tr><th>Activity</th><th>Requisition</th><th>Status</th><th>Completion</th><th>Submitted</th><th></th></tr></thead>
                    <tbody>
                        @forelse($reports as $report)
                            <tr>
                                <td>{{ $report->activity->title ?? '—' }}</td>
                                <td>{{ $report->requisition->reference ?? '—' }}</td>
                                <td><span class="badge bg-light text-dark border">{{ $report->status->label() }}</span></td>
                                <td>{{ $report->completion_percentage ?? 0 }}%</td>
                                <td>{{ $report->submitted_at?->format('d M Y') ?? '—' }}</td>
                                <td class="text-end"><a href="{{ route('planning.me-reports.show', $report) }}" class="btn btn-sm btn-outline-primary">View</a></td>
                            </tr>
                        @empty
                            <tr><td colspan="6"><x-chm.empty-state message="No M&E reports yet." /></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="mt-3">{{ $reports->links() }}</div>
        </x-chm.card>
    </x-chm.layout.page>
</div>

@endsection