@extends('layouts.admin')

@section('title', 'Skor Kuis & Papan Peringkat Siswa')

@section('content')
<div class="card border-0 shadow-sm rounded-4 p-4 card-accent-purple">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h5 class="fw-bold mb-1 text-dark"><i class="fa-solid fa-trophy text-warning me-2"></i> Skor Kuis & Papan Peringkat Siswa</h5>
            <small class="text-muted">Pantau hasil skor kuis kognitif pengelolaan sampah siswa di sini</small>
        </div>
        
        <!-- SEARCH FORM -->
        <form action="{{ route('admin.student-scores.index') }}" method="GET" class="d-flex gap-2 col-md-5 col-lg-4 p-0">
            <div class="input-group shadow-sm rounded-pill overflow-hidden border">
                <span class="input-group-text bg-white border-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                <input type="text" name="search" class="form-control border-0" placeholder="Cari nama atau kelas..." value="{{ $search }}" style="outline: none; box-shadow: none;">
                <button type="submit" class="btn btn-success px-4" style="background: linear-gradient(90deg, #10b981 0%, #059669 100%); border: none;">
                    Cari
                </button>
            </div>
            @if($search)
            <a href="{{ route('admin.student-scores.index') }}" class="btn btn-outline-secondary rounded-pill d-flex align-items-center px-3">Reset</a>
            @endif
        </form>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle text-center mb-0">
            <thead class="table-light">
                <tr>
                    <th style="width: 120px;">Peringkat</th>
                    <th class="text-start">Nama Siswa</th>
                    <th>Kelas</th>
                    <th>Skor Tertinggi</th>
                    <th>Waktu Bermain</th>
                    <th class="text-end" style="width: 150px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($scores as $index => $score)
                @php
                    $rank = ($scores->currentPage() - 1) * $scores->perPage() + $index + 1;
                @endphp
                <tr>
                    <td>
                        @if($rank === 1)
                            <span class="badge font-heading px-3 py-2" style="background-color: rgba(245, 158, 11, 0.15) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.3) !important;">🥇 Juara 1</span>
                        @elseif($rank === 2)
                            <span class="badge font-heading px-3 py-2" style="background-color: rgba(148, 163, 184, 0.15) !important; color: #475569 !important; border: 1px solid rgba(148, 163, 184, 0.3) !important;">🥈 Juara 2</span>
                        @elseif($rank === 3)
                            <span class="badge font-heading px-3 py-2" style="background-color: rgba(194, 65, 12, 0.15) !important; color: #c2410c !important; border: 1px solid rgba(194, 65, 12, 0.3) !important;">🥉 Juara 3</span>
                        @else
                            <span class="badge bg-light text-muted border font-heading px-3 py-2">{{ $rank }}</span>
                        @endif
                    </td>
                    <td class="text-start"><strong class="text-dark" style="font-size: 0.95rem;">{{ $score->name }}</strong></td>
                    <td><span class="badge bg-success">{{ $score->class }}</span></td>
                    <td><strong class="text-success fs-5">{{ $score->score }}</strong> <small class="text-muted">/ 500</small></td>
                    <td><small class="text-muted"><i class="fa-regular fa-clock me-1"></i>{{ $score->updated_at->diffForHumans() }}</small></td>
                    <td class="text-end">
                        <form action="{{ route('admin.student-scores.destroy', $score->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus skor siswa ini dari papan peringkat?')">
                            @csrf @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger rounded-pill px-3"><i class="fa-solid fa-trash me-1"></i> Hapus</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center text-muted py-5">
                        <i class="fa-solid fa-user-xmark fs-2 mb-2 text-muted"></i>
                        <p class="mb-0">Belum ada data skor siswa yang terdaftar atau kecocokan pencarian.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $scores->links() }}
    </div>
</div>
@endsection