@extends('layouts.app')
@section('title', 'SOPs')
@section('content')
<h4 class="mb-3">📘 Standard Operating Procedures</h4>

@forelse ($sops as $categoryName => $group)
<h6 class="text-muted mt-3">{{ $categoryName ?? 'Uncategorized' }}</h6>
@foreach ($group as $sop)
@php $isRead = $sop->reads->contains('user_id', auth()->id()); @endphp
<div class="card p-3 mb-2">
    <div class="d-flex justify-content-between align-items-start">
        <h6 class="mb-1">{{ $sop->title }}</h6>
        @if ($sop->requires_acknowledgment)
            @if ($isRead)
            <span class="badge bg-success">Acknowledged</span>
            @else
            <span class="badge bg-warning text-dark">Needs acknowledgment</span>
            @endif
        @endif
    </div>
    <div class="small" style="white-space: pre-wrap;">{{ $sop->content }}</div>
    @if ($sop->requires_acknowledgment && !$isRead)
    <form method="POST" action="{{ route('sops.acknowledge', $sop) }}" class="mt-2">
        @csrf
        <button class="btn btn-sm btn-dark">I've Read This</button>
    </form>
    @endif
</div>
@endforeach
@empty
<p class="text-muted">No SOPs published yet.</p>
@endforelse
@endsection