@if(empty($students))
    <div class="text-center py-5 text-muted">
        <i class="fas fa-search fa-3x opacity-25 mb-3 d-block"></i>
        <h6 class="fw-bold">No Records Found</h6>
        <p class="small mb-0">No student records match the selected filter criteria.</p>
    </div>
@else
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 px-1">
        <div class="d-flex flex-wrap gap-2">
            <span class="badge bg-primary px-3 py-2 fs-13">
                <i class="fas fa-calendar-alt me-1"></i> {{ $dateLabel }}
            </span>
            <span class="badge bg-light text-dark border px-3 py-2 fs-13">
                Total Students: <strong>{{ count($students) }}</strong>
            </span>
            <span class="badge bg-light text-dark border px-3 py-2 fs-13">
                Max Possible Waqts: <strong>{{ $maxPossibleWaqt }}</strong> ({{ $totalDaysInPeriod }} Days)
            </span>
        </div>
        <div>
            <span class="text-muted small">
                <i class="fa fa-info-circle text-primary me-1"></i> Ranking Criteria: 1) Total Waqts, 2) 5-Waqt Complete Days
            </span>
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-bordered table-hover align-middle mb-0">
            <thead class="table-light text-center">
                <tr>
                    <th style="width: 80px;">Rank</th>
                    <th class="text-start" style="min-width: 200px;">Student</th>
                    <th>Class</th>
                    <th>Section</th>
                    <th style="width: 90px;">Roll</th>
                    <th style="min-width: 150px;">Total Waqt</th>
                    <th>5-Waqt Days</th>
                    <th>Recorded Days</th>
                    <th style="width: 100px;">Percentage</th>
                </tr>
            </thead>
            <tbody>
                @foreach($students as $st)
                    @php
                        $photo = $st['student_photo'];
                        $photoUrl = $photo 
                            ? (file_exists(public_path('storage/' . $photo)) ? asset('storage/' . $photo) : asset('storage/1.png'))
                            : asset('storage/1.png');
                    @endphp
                    <tr>
                        <td class="text-center">
                            @if($st['rank'] == 1)
                                <span class="badge bg-warning text-dark fs-13 px-2 py-1 shadow-sm" title="1st Place">
                                    🥇 1st
                                </span>
                            @elseif($st['rank'] == 2)
                                <span class="badge bg-secondary text-white fs-13 px-2 py-1 shadow-sm" title="2nd Place">
                                    🥈 2nd
                                </span>
                            @elseif($st['rank'] == 3)
                                <span class="badge bg-danger bg-opacity-75 text-white fs-13 px-2 py-1 shadow-sm" title="3rd Place">
                                    🥉 3rd
                                </span>
                            @else
                                <span class="badge bg-light text-dark border fs-13 px-2 py-1">
                                    #{{ $st['rank'] }}
                                </span>
                            @endif
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $photoUrl }}" alt="Photo" class="rounded-circle border" style="width: 40px; height: 40px; object-fit: cover; flex-shrink: 0;">
                                <div>
                                    <div class="fw-bold text-dark">{{ $st['student_name'] }}</div>
                                    <div class="small text-muted">ID: {{ $st['admission_roll'] ?? '-' }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="text-center fw-medium">{{ $st['class_name'] }}</td>
                        <td class="text-center">{{ $st['section_name'] }}</td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border px-2 py-1 fw-bold">
                                {{ $st['class_roll'] }}
                            </span>
                        </td>
                        <td class="text-center">
                            <div class="fw-bold text-success fs-15">{{ $st['total_waqts'] }} <span class="fs-12 text-muted fw-normal">/ {{ $st['max_possible_waqt'] }}</span></div>
                            <div class="progress mt-1" style="height: 6px;">
                                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $st['percentage'] }}%;"></div>
                            </div>
                        </td>
                        <td class="text-center">
                            @if($st['all_five_days_count'] > 0)
                                <span class="badge bg-success bg-opacity-10 text-success border border-success px-2 py-1 fw-bold">
                                    <i class="fa fa-star text-warning me-1"></i> {{ $st['all_five_days_count'] }} Days
                                </span>
                            @else
                                <span class="text-muted">0 Days</span>
                            @endif
                        </td>
                        <td class="text-center text-muted">
                            {{ $st['recorded_days'] }} / {{ $totalDaysInPeriod }} Days
                        </td>
                        <td class="text-center">
                            <span class="fw-bold {{ $st['percentage'] >= 80 ? 'text-success' : ($st['percentage'] >= 50 ? 'text-primary' : 'text-danger') }}">
                                {{ $st['percentage'] }}%
                            </span>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endif