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

<div class="page-content">
    <x-chm.layout.page title="M&E report" :subtitle="$report->activity->title ?? 'Implementation report'" icon="bx bx-bar-chart">
        <x-slot:breadcrumb>
            <x-chm.breadcrumb-item :href="route('planning.me-reports.index')">M&E reports</x-chm.breadcrumb-item>
            <x-chm.breadcrumb-item :active="true">Report #{{ $report->id }}</x-chm.breadcrumb-item>
        </x-slot:breadcrumb>

        <x-slot:actions>
            @can('approve', $report)
                <form method="post" action="{{ route('planning.me-reports.approve', $report) }}" class="d-inline">
                    @csrf
                    <button type="submit" class="btn btn-success">
                        <i class="bx bx-check"></i> Approve accountability
                    </button>
                </form>
            @endcan
            @can('update', $report)
                <x-chm.button variant="outline-primary" icon="bx bx-edit" :href="route('planning.me-reports.edit', $report)">Edit</x-chm.button>
            @endcan
        </x-slot:actions>

        <div class="row row-cols-2 row-cols-md-3 g-3 mb-4">
            <x-chm.stat-card label="Status" :value="$report->status->label()" icon="bx bx-info-circle" color="primary" />
            <x-chm.stat-card label="Completion" :value="($report->completion_percentage ?? 0).'%'" icon="bx bx-tachometer" color="success" />
            <x-chm.stat-card label="Submitted" :value="$report->submitted_at?->format('d M Y') ?? 'Draft'" icon="bx bx-calendar" color="info" />
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                @foreach([
                    'Implementation narrative' => $report->implementation_narrative,
                    'Expected outputs' => $report->expected_outputs,
                    'Actual outputs' => $report->actual_outputs,
                    'Expected outcomes' => $report->expected_outcomes,
                    'Actual outcomes' => $report->actual_outcomes,
                    'Beneficiaries' => $report->beneficiaries,
                    'Performance indicators' => $report->performance_indicators,
                    'Challenges' => $report->challenges,
                    'Lessons learned' => $report->lessons_learned,
                    'Recommendations' => $report->recommendations,
                ] as $label => $value)
                    @if($value)
                        <x-chm.card :title="$label" class="mb-3">
                            <p class="mb-0">{!! nl2br(e($value)) !!}</p>
                        </x-chm.card>
                    @endif
                @endforeach
            </div>
            <div class="col-lg-4">
                <x-chm.card title="Links">
                    <p class="small mb-1"><strong>Activity:</strong> {{ $report->activity->title ?? '—' }}</p>
                    <p class="small mb-0"><strong>Requisition:</strong> {{ $report->requisition->reference ?? '—' }}</p>
                    <p class="small mb-0"><strong>By:</strong> {{ $report->submitter->name ?? '—' }}</p>
                    @if($report->approver)
                        <p class="small mb-0 mt-2"><strong>Approved by:</strong> {{ $report->approver->name }} · {{ $report->approved_at?->format('d M Y H:i') }}</p>
                    @endif
                    @if($report->review_comments)
                        <p class="small mb-0 mt-2"><strong>Review:</strong> {{ $report->review_comments }}</p>
                    @endif
                </x-chm.card>

                @if($report->attachments->isNotEmpty())
                    <x-chm.card title="Attachments" class="mt-3">
                        <ul class="list-unstyled mb-0">
                            @foreach($report->attachments as $file)
                                <li class="mb-1">
                                    <a href="{{ Storage::disk('public')->url($file->file_path) }}" target="_blank">{{ $file->original_name ?? basename($file->file_path) }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </x-chm.card>
                @endif
            </div>
        </div>
    </x-chm.layout.page>
</div>

@endsection