@extends('layouts.teacher')

@section('title', $report->reference().' · Safeguarding · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="My Reports"
            :title="$report->reference()"
            meta="This is the report you submitted. Safeguarding officers handle the case. You cannot edit it."
        >
            <x-slot:actions>
                <a href="{{ route('teacher.safeguarding.reports') }}" class="btn mec-btn-secondary btn-md">Back to my reports</a>
            </x-slot:actions>
        </x-admin.page-header>

        @include('teacher.safeguarding.nav', ['section' => $section])

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif

        <div class="card mec-panel mb-3">
            <div class="card-body">
                <p class="mb-2"><strong>Status:</strong> {{ $report->status?->label() }}</p>
                <p class="mb-2"><strong>Urgency:</strong> {{ $report->urgency?->label() }}</p>
                <p class="mb-2"><strong>Type:</strong> {{ $report->concern_type?->label() }}</p>
                <p class="mb-2"><strong>Student:</strong> {{ $report->student?->full_name ?: 'Not named' }}@if ($report->student) · {{ $report->student->classLabel() }}@endif</p>
                <p class="mb-2"><strong>When it happened:</strong> {{ $report->occurred_on?->format('j M Y') ?: 'Not given' }}</p>
                <p class="mb-0"><strong>Submitted:</strong> {{ $report->submitted_at?->timezone('Africa/Accra')->format('j M Y, g:i A') }}</p>
            </div>
        </div>

        <div class="card mec-panel">
            <div class="card-header"><h6 class="mb-0">{{ $report->title }}</h6></div>
            <div class="card-body">
                <p class="mb-0" style="white-space: pre-wrap;">{{ $report->details }}</p>
            </div>
        </div>
    </div>
@endsection