@extends('layouts.app')

@section('content')
<div class="container py-5">
    <!-- Header -->
    <div class="d-flex align-items-center mb-4">
        <h2 class="text-success fw-bold me-3 border-start border-4 ps-3 border-success">
            📄 Report Details
        </h2>
        <small class="text-muted">Center: {{ $report->user->center->name ?? 'Unknown' }}</small>
    </div>

    <!-- Report Card -->
    <div class="card shadow-sm border-success">
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-8">
                    <h4 class="fw-bold">{{ $report->title }}</h4>
                    <p class="text-muted mb-0">
                        <strong>Submitted by:</strong> {{ $report->user->name ?? 'Unknown' }} 
                        ({{ ucfirst($report->user->role ?? '-') }})
                    </p>
                    <p class="text-muted mb-0">
                        <strong>Type:</strong> {{ ucfirst($report->type ?? '-') }}
                    </p>
                </div>
                <div class="col-md-4 text-md-end mt-3 mt-md-0">
                    <p class="mb-1"><strong>Status:</strong></p>
                    <span class="badge 
                        @if($report->status=='Approved') bg-success
                        @elseif($report->status=='Pending') bg-warning text-dark
                        @elseif($report->status=='Rejected') bg-danger
                        @else bg-secondary
                        @endif py-2 px-3">
                        {{ $report->status }}
                    </span>
                    <p class="mt-2 mb-0"><strong>Date Submitted:</strong> {{ $report->created_at->format('d M, Y') }}</p>
                </div>
            </div>

            <hr>

            <!-- Description / Notes -->
            <div class="mb-3">
                <h5 class="fw-semibold text-primary">📝 Description / Notes</h5>
                <p class="text-dark">{{ $report->description ?? 'No additional notes.' }}</p>
            </div>

            <!-- Attachment -->
            @if($report->attachment)
            <div class="mb-3">
                <h5 class="fw-semibold text-primary">📎 Attachment</h5>
                <a href="{{ asset('storage/'.$report->attachment) }}" target="_blank" class="btn btn-primary">
                    Download File
                </a>
            </div>
            @endif

            <!-- Back Button -->
            <div class="mt-4">
                <a href="{{ route('coordinator.reports') }}" class="btn btn-success">
                    ← Back to Reports
                </a>
            </div>
        </div>
    </div>
</div>
@endsection