<div class="card shadow-sm mb-4">
    <div class="card-body">
        <h4 class="fw-bold mb-3 d-flex align-items-center justify-content-between">
            DSARs
            @can('dsars.create')
                <button class="btn btn-primary btn-sm" wire:click="showAddDsar">
                    <i class="mdi mdi-plus"></i>
                </button>
            @endcan
        </h4>
        

        @if($draftTranches->isNotEmpty())
            @foreach($draftTranches as $draftTranche)
                <div class="alert alert-warning d-flex align-items-center justify-content-between mb-3 py-2 px-3" role="alert">
                    <div>
                        <i class="mdi mdi-clock-outline me-1"></i>
                        <strong>Draft tranche in progress</strong>
                        &mdash; {{ $draftTranche->dsars->count() }} DSAR(s) awaiting review
                        <span class="text-muted small ms-2">started {{ $draftTranche->created_at->diffForHumans() }}</span>
                    </div>
                    <a wire:navigate href="{{ route('dsars.tranches.view', $draftTranche) }}"
                       class="btn btn-warning btn-sm">
                        <i class="mdi mdi-arrow-right me-1"></i>Continue
                    </a>
                </div>
            @endforeach
        @endif

        @if($totalCount > 0)
            @php
                $sentPct     = $totalCount > 0 ? round($sentCount / $totalCount * 100) : 0;
                $receivedPct = $totalCount > 0 ? round($receivedCount / $totalCount * 100) : 0;
            @endphp
            <div class="d-flex gap-3 mb-3">
                <span class="badge bg-primary-subtle text-primary fw-normal px-3 py-2">
                    <i class="mdi mdi-send me-1"></i>
                    {{ $sentCount }} / {{ $totalCount }} Sent ({{ $sentPct }}%)
                </span>
                <span class="badge bg-success-subtle text-success fw-normal px-3 py-2">
                    <i class="mdi mdi-inbox-arrow-down me-1"></i>
                    {{ $receivedCount }} / {{ $totalCount }} Received ({{ $receivedPct }}%)
                </span>
            </div>
        @endif

        @if($dsars->count())
            @php $needsPostingCount = $dsars->where('status', 'needs posting')->count(); @endphp

            @can('dsars.mark-posted')
                @if($needsPostingCount > 0)
                    <div class="d-flex align-items-center gap-2 mb-2 mt-3">
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                wire:click="selectAllPostable">
                            <i class="bi bi-check2-all me-1"></i>Select All Needs Posting ({{ $needsPostingCount }})
                        </button>
                        @if(count($postIds) > 0)
                            <button type="button" class="btn btn-warning btn-sm"
                                    wire:click="markAsPosted"
                                    wire:confirm="Mark {{ count($postIds) }} DSAR(s) as posted?">
                                <i class="bi bi-envelope-check me-1"></i>Mark as Posted ({{ count($postIds) }})
                            </button>
                            <button type="button" class="btn btn-link btn-sm text-muted p-0"
                                    wire:click="$set('postIds', [])">
                                Clear
                            </button>
                        @endif
                    </div>
                @endif
            @endcan

            <div class="table-responsive">
                <x-dsar.list :dsars="$dsars" :selectable="true" :deletable="true"/>
            </div>
        @else
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-note-outline" style="font-size: 48px;"></i>
                <p class="mt-3 fw-bold">No DSARs have been created.</p>
            </div>
        @endif
    </div>

    <div class="card-footer">
        {{ $dsars->links(data: ['pageName' => 'dsarsPage']) }}
    </div>

    @if($showAdd)
        <!-- Modal Overlay -->
        <div class="modal fade show modal-xl"  tabindex="-1" style="display: block; background: rgba(0,0,0,0.5);" role="dialog">
            <div class="modal-dialog modal-dialog-scrollable">
                <div class="modal-content shadow-lg">
                    <div class="modal-header text-white">
                        <h5 class="modal-title">Create DSARs</h5>
                        <button type="button" class="btn-close btn-close-white" wire:click="hideAddDsar" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Search Bar -->
                        <div class="input-group mb-3">
                            <span class="input-group-text"><i class="mdi mdi-magnify"></i></span>
                            <input type="text"
                                   class="form-control"
                                   placeholder="Search available institutions..."
                                   wire:model.live.debounce.300ms="search">
                        </div>

                        <div class="table-responsive" style="max-height: 400px;">
                            <table class="table table-sm table-hover align-middle">
                                <thead class="table-light sticky-top">
                                <tr>
                                    <th style="width: 40px;"></th>
                                    <th>Name</th>
                                    <th>Send By</th>
                                    <th>Institution</th>
                                    <th>DSAR Type</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if($globalInstitutions->isNotEmpty())
                                    <tr>
                                        <td colspan="5" class="px-2 py-1 bg-light">
                                            <span class="small fw-semibold text-muted text-uppercase" style="letter-spacing:.05em;">
                                                <i class="mdi mdi-earth text-info me-1"></i>Global Institutions
                                            </span>
                                        </td>
                                    </tr>
                                    @foreach($globalInstitutions as $item)
                                        <tr wire:key="global-{{ $item->id }}" class="table-info">
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="checkbox"
                                                           value="{{ $item->id }}"
                                                           wire:model.live="selectedIds"
                                                           {{ $item->send_type ?? 'disabled' }}
                                                           id="check-g-{{ $item->id }}">
                                                </div>
                                            </td>
                                            <td>
                                                <label class="form-check-label d-block cursor-pointer" for="check-g-{{ $item->id }}">
                                                    <i class="mdi mdi-earth text-info me-1" title="Global institution"></i>
                                                    {{ $item->display_name }}
                                                </label>
                                            </td>
                                            <td class="small text-muted">{{ $item->send_type ?? 'N/A' }}</td>
                                            <td class="small text-muted">{{ $item->type->display_name ?? 'N/A' }}</td>
                                            <td class="small text-muted">{{ $item->dsarType->display_name ?? 'N/A' }}</td>
                                        </tr>
                                    @endforeach
                                    <tr>
                                        <td colspan="5" class="px-2 py-1 bg-light border-top">
                                            <span class="small fw-semibold text-muted text-uppercase" style="letter-spacing:.05em;">
                                                Claim Institutions
                                            </span>
                                        </td>
                                    </tr>
                                @endif

                                @forelse($availableInstitutions as $item)
                                    <tr wire:key="avail-{{ $item->id }}">
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="checkbox"
                                                       value="{{ $item->id }}"
                                                       wire:model.live="selectedIds"
                                                       {{ $item->send_type ?? 'disabled' }}
                                                       id="check-{{ $item->id }}">
                                            </div>
                                        </td>
                                        <td>
                                            <label class="form-check-label d-block cursor-pointer" for="check-{{ $item->id }}">
                                                {{ $item->display_name }}
                                            </label>
                                        </td>
                                        <td class="small text-muted">{{ $item->send_type ?? 'N/A' }}</td>
                                        <td class="small text-muted">{{ $item->type->display_name ?? 'N/A' }}</td>
                                        <td class="small text-muted">{{ $item->dsarType->display_name ?? 'N/A' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4 text-muted">
                                            No matches found.
                                        </td>
                                    </tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3">
                            {{ $availableInstitutions->links(data: ['pageName' => 'availPage']) }}
                        </div>
                    </div>
                    
                    <x-wip-timer />

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" wire:click="hideAddDsar">Close</button>
                        <button type="button"
                                class="btn btn-success"
                                wire:click="createDsars"
                                @if(empty($selectedIds)) disabled @endif>
                            Create Selected ({{ count($selectedIds) }})
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Backdrop for better UX -->
        <div class="modal-backdrop fade show"></div>
    @endif
</div>