@php use Carbon\Carbon; @endphp
<div>
    {{-- Header --}}
    <div class="row mb-4 align-items-center">
        <div class="col">
            <h2 class="fw-bold mb-0">
                <i class="bi bi-building text-primary me-2"></i>{{ $institution->display_name }}
            </h2>
            <p class="text-muted mt-1 mb-0">Outstanding DSARs drill-down</p>
        </div>
        <div class="col-auto d-flex gap-2">
            <button wire:click="export" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-download me-1"></i>Export CSV
            </button>
            <a href="{{ route('dsars.report') }}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Back to DSAR Report
            </a>
        </div>
    </div>

    {{-- Summary stat chips --}}
    <div class="row g-3 mb-4">
        <div class="col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <p class="label-upper mb-1">Outstanding</p>
                    <h3 class="fw-bold mb-0 {{ $totalOutstanding > 0 ? 'text-warning' : 'text-muted' }}">
                        {{ $totalOutstanding }}
                    </h3>
                    <small class="text-muted">Sent but not yet completed</small>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="card h-100">
                <div class="card-body">
                    <p class="label-upper mb-1">Oldest Outstanding</p>
                    <h3 class="fw-bold mb-0 {{ $oldestDays !== null && $oldestDays > 30 ? 'text-danger' : ($oldestDays !== null ? 'text-body' : 'text-muted') }}">
                        {{ $oldestDays !== null ? (int) $oldestDays . ' days' : '—' }}
                    </h3>
                    <small class="text-muted">Age of oldest open DSAR</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <div class="card mb-3">
        <div class="card-body py-2">
            <div class="row g-2 align-items-center">
                <div class="col-md-3">
                    <input type="text" wire:model.live.debounce.300ms="search"
                           class="form-control form-control-sm"
                           placeholder="Search client or claim…">
                </div>
                <div class="col-md-2">
                    <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-2">
                    <input type="date" wire:model.live="dateFrom"
                           class="form-control form-control-sm"
                           placeholder="From">
                </div>
                <div class="col-md-2">
                    <input type="date" wire:model.live="dateTo"
                           class="form-control form-control-sm"
                           placeholder="To">
                </div>
                <div class="col-auto">
                    <div class="form-check form-check-inline mb-0">
                        <input class="form-check-input" type="checkbox" id="overdueOnly"
                               wire:model.live="overdueOnly">
                        <label class="form-check-label small" for="overdueOnly">
                            <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i>Overdue (30d+) only
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Results --}}
    @if($grouped->isEmpty())
        <div class="card">
            <div class="card-body text-center text-muted py-5">
                No outstanding DSARs match the current filters.
            </div>
        </div>
    @else
        @foreach($grouped as $claimId => $dsars)
            @php $claim = $dsars->first()->claim; @endphp
            <div class="card mb-3">
                <div class="card-header fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-person-circle text-primary"></i>
                    <span>{{ $claim?->client?->fullName ?? '—' }}</span>
                    @if($claim?->slug)
                        <span class="badge bg-secondary fw-normal ms-1">{{ $claim->slug }}</span>
                    @endif
                    <span class="ms-auto badge bg-secondary fw-normal">{{ $dsars->count() }} DSAR{{ $dsars->count() !== 1 ? 's' : '' }}</span>
                </div>
                <div class="card-body p-0">
                    <table class="table table-hover table-sm mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Status</th>
                                <th>Sent</th>
                                <th>Days Outstanding</th>
                                <th>Latest Response</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($dsars as $dsar)
                                @php $days = $dsar->created_at->diffInDays(); @endphp
                                <tr>
                                    <td>
                                        <span class="badge
                                            @if($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>
                                        <span class="{{ $days > 30 ? 'text-danger fw-semibold' : 'text-muted' }}">
                                            {{ round($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>
                                        @can('dsars.view')
                                            <a href="{{ route('dsars.view', $dsar) }}"
                                               class="btn btn-outline-secondary btn-sm py-0">View</a>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        @endforeach
    @endif
</div>