<div>
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h2 class="fw-bold mb-0">
                <i class="bi bi-hourglass-split text-primary me-2"></i>Outstanding DSARs
            </h2>
            <p class="text-muted mt-1 mb-0">All active DSARs awaiting response or action</p>
        </div>
        <div class="col-auto">
            <a href="{{ route('dsars.report') }}" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-bar-chart-line me-1"></i>DSAR Report
            </a>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="row g-2">
                <div class="col-md-5">
                    <input type="text" wire:model.live.debounce.300ms="search"
                           class="form-control form-control-sm"
                           placeholder="Search client or institution...">
                </div>
                <div class="col-md-3">
                    <select wire:model.live="statusFilter" class="form-select form-select-sm">
                        <option value="">All Statuses</option>
                        <option value="sent">Sent</option>
                        <option value="needs posting">Needs Posting</option>
                        <option value="approved">Approved</option>
                        <option value="failed">Failed</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <select wire:model.live="institutionFilter" class="form-select form-select-sm">
                        <option value="">All Institutions</option>
                        @foreach($institutions as $inst)
                            <option value="{{ $inst->id }}">{{ $inst->display_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    {{-- Table --}}
    <div class="card">
        <div class="card-body p-0">
            <table class="table table-hover table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th></th>
                        <th>Client</th>
                        <th>Institution</th>
                        <th>Status</th>
                        <th>Sent</th>
                        <th>Days Outstanding</th>
                        <th>Latest Response</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($dsars as $dsar)
                        <tr class="{{ $dsar->is_flagged ? 'table-danger' : '' }}">
                            <td class="text-center" style="width:32px;">
                                @if($dsar->is_flagged)
                                    <i class="bi bi-flag-fill text-danger" title="Flagged"></i>
                                @endif
                            </td>
                            <td>
                                {{ $dsar->claim?->client?->fullName ?? '—' }}
                            </td>
                            <td>{{ $dsar->institution?->display_name ?? '—' }}</td>
                            <td>
                                <span class="badge
                                    @if(in_array($dsar->status, ['sent'])) bg-success
                                    @elseif($dsar->status === 'approved') bg-primary
                                    @elseif($dsar->status === 'needs posting') bg-warning text-dark
                                    @elseif($dsar->status === 'failed') bg-danger
                                    @else bg-secondary
                                    @endif">
                                    {{ ucwords($dsar->status) }}
                                </span>
                            </td>
                            <td class="small text-muted">
                                {{ $dsar->created_at->format('d M Y') }}
                            </td>
                            <td>
                                @php $days = $dsar->created_at->diffInDays(now()); @endphp
                                <span class="{{ $days > 30 ? 'text-danger fw-semibold' : 'text-muted' }}">
                                    {{ $days }}d
                                    @if($days > 30)
                                        <i class="bi bi-exclamation-triangle-fill ms-1" title="Overdue"></i>
                                    @endif
                                </span>
                            </td>
                            <td>
                                @if($dsar->latestResponse)
                                    <span class="badge {{ $dsar->latestResponse->typeBadgeClass }}">
                                        {{ $dsar->latestResponse->typeLabel }}
                                    </span>
                                @else
                                    <span class="text-muted small">None</span>
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('dsars.view', $dsar) }}"
                                   class="btn btn-outline-secondary btn-sm py-0">
                                    View
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                No outstanding DSARs found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($dsars->hasPages())
            <div class="card-footer">
                {{ $dsars->links() }}
            </div>
        @endif
    </div>
</div>
