<div>
    <x-title>Review DSARs for Approval</x-title>

    <div class="accordion" id="dsarAccordion">
        @foreach($tranche->dsars as $dsar)
            <livewire:dsar.tranche.item :dsar="$dsar" :key="'dsar-'.$dsar->id" />
        @endforeach
    </div>

    <div class="fixed-bottom bg-white border-top shadow-lg p-3">
        <div class="container">
            <div class="d-flex justify-content-between align-items-center">

                <div class="d-flex align-items-center">
                    <div class="me-4">
                        <span class="text-muted small d-block text-uppercase fw-bold">Tranche Status</span>
                        <span class="badge bg-primary text-wrap">{{ ucfirst($tranche->status) }}</span>
                    </div>
                    <div>
                        <span class="text-muted small d-block text-uppercase fw-bold">Approval Progress</span>
                        <h5 class="mb-0">
                            <span class="text-success">{{ $tranche->dsars()->where('status', 'approved')->count() }}</span>
                            <span class="text-secondary">/ {{ $tranche->dsars->count() }} Approved</span>
                        </h5>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <a href="{{ route('clients.show', $tranche->claim->client) }}" class="btn btn-link text-decoration-none text-muted">
                        Save & Exit
                    </a>

                    <button
                            wire:click="sendBatch"
                            class="btn btn-primary btn-lg px-5 shadow-sm"
                            @if($tranche->dsars()->where('status', 'approved')->count() === 0) disabled @endif
                    >
                        <i class="bi bi-send me-2"></i> Send Approved Batch
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>
