{{-- Progress Status Card --}}
<div class="card shadow-sm">
    <div class="card-header">
        <h6 class="mb-0">
            <i class="bi bi-graph-up"></i> Status Surat
        </h6>
    </div>
    <div class="card-body">
        {{-- Progress Percentage --}}
        <div class="mb-3">
            <div class="d-flex justify-content-between mb-2">
                <span class="text-muted small">Progress:</span>
                <span class="badge bg-{{ $suratMasuk->status }}">
                    @if($suratMasuk->status === 'selesai')
                        100%
                    @elseif($suratMasuk->status === 'diproses')
                        50%
                    @else
                        0%
                    @endif
                </span>
            </div>
            <div class="progress" style="height: 8px;">
                <div class="progress-bar bg-{{ $suratMasuk->status }}" 
                     style="width: {{ $suratMasuk->status === 'selesai' ? '100' : ($suratMasuk->status === 'diproses' ? '50' : '0') }}%">
                </div>
            </div>
        </div>
        
        {{-- Status Details --}}
        <div class="row g-3">
            <div class="col-6">
                <div class="text-center p-3 bg-light rounded">
                    <i class="bi bi-hourglass-split text-warning" style="font-size: 2rem;"></i>
                    <p class="small text-muted mb-1 mt-2">Status</p>
                    <h6 class="mb-0">{{ ucfirst($suratMasuk->status) }}</h6>
                </div>
            </div>
            <div class="col-6">
                <div class="text-center p-3 bg-light rounded">
                    <i class="bi bi-arrow-right-circle text-primary" style="font-size: 2rem;"></i>
                    <p class="small text-muted mb-1 mt-2">Disposisi</p>
                    <h6 class="mb-0">{{ $suratMasuk->disposisi->count() }}</h6>
                </div>
            </div>
        </div>
        
        {{-- Disposisi Status Breakdown --}}
        @if($suratMasuk->disposisi->count() > 0)
            <hr>
            <div class="small">
                <p class="text-muted mb-2">Rincian Disposisi:</p>
                <div class="d-flex justify-content-between mb-1">
                    <span><i class="bi bi-clock-history text-warning"></i> Pending:</span>
                    <strong>{{ $suratMasuk->disposisi->where('status', 'pending')->count() }}</strong>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span><i class="bi bi-eye text-info"></i> Dibaca:</span>
                    <strong>{{ $suratMasuk->disposisi->where('status', 'dibaca')->count() }}</strong>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span><i class="bi bi-arrow-repeat text-primary"></i> Diproses:</span>
                    <strong>{{ $suratMasuk->disposisi->where('status', 'diproses')->count() }}</strong>
                </div>
                <div class="d-flex justify-content-between">
                    <span><i class="bi bi-check-circle text-success"></i> Selesai:</span>
                    <strong>{{ $suratMasuk->disposisi->where('status', 'selesai')->count() }}</strong>
                </div>
            </div>
        @endif
    </div>
</div>