@extends('guru.layouts.app')

@section('title', 'Leaderboard')

@push('styles')
<style>
.page-title    { font-size: 28px; font-weight: 800; margin-top: -20px; margin-bottom: 6px; }
.page-subtitle { font-size: 14px; color: #64748b; margin-bottom: 24px; }

.filter-card {
    background: white;
    border-radius: 16px;
    border: 2px solid #e5e5e5;
    padding: 18px 22px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}

.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 12px; font-weight: 600; color: #64748b; }
.filter-group select {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 7px 12px;
    font-size: 13px;
    font-family: 'Poppins', sans-serif;
    color: #1e293b;
    background: white;
    cursor: pointer;
}

.btn-filter {
    background: #2b8ef3;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.podium-wrap { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 28px; }
.podium-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.podium-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; color: white; position: relative;
}

.podium-crown { position: absolute; top: -16px; font-size: 18px; }

.rank-1 .podium-avatar { background: linear-gradient(135deg,#f59e0b,#d97706); width:68px; height:68px; font-size:26px; }
.rank-2 .podium-avatar { background: linear-gradient(135deg,#94a3b8,#64748b); }
.rank-3 .podium-avatar { background: linear-gradient(135deg,#f97316,#ea580c); }

.podium-name { font-size: 13px; font-weight: 700; color: #1e293b; text-align: center; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-exp  { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 4px; }

.podium-bar { border-radius: 12px 12px 0 0; width: 80px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: white; }
.rank-1 .podium-bar { height: 80px; background: linear-gradient(135deg,#f59e0b,#d97706); }
.rank-2 .podium-bar { height: 60px; background: linear-gradient(135deg,#94a3b8,#64748b); }
.rank-3 .podium-bar { height: 44px; background: linear-gradient(135deg,#f97316,#ea580c); }

.custom-card  { background: white; border-radius: 20px; border: 2px solid #e5e5e5; padding: 22px; }
.section-title { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }

.lb-row { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 12px; margin-bottom: 6px; transition: background 0.15s; }
.lb-row:hover { background: #f8fafc; }

.lb-rank {
    width: 32px; height: 32px; border-radius: 50%;
    background: #e2e8f0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #64748b; flex-shrink: 0;
}

.lb-rank.gold   { background: #fef3c7; color: #d97706; }
.lb-rank.silver { background: #f1f5f9; color: #64748b; }
.lb-rank.bronze { background: #ffedd5; color: #ea580c; }

.lb-nama { flex: 1; font-size: 14px; font-weight: 600; color: #1e293b; }
.lb-nisn { font-size: 12px; color: #94a3b8; }
.lb-exp  { font-size: 14px; font-weight: 700; color: #2b8ef3; display: flex; align-items: center; gap: 4px; }

.semester-badge { display: inline-block; background: #e0f2fe; color: #0369a1; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 99px; margin-bottom: 20px; }
.empty-state    { text-align: center; padding: 40px 20px; color: #94a3b8; }

.no-kelas-box {
    background: #fff7ed;
    border: 2px solid #fed7aa;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: #c2410c;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.podium-avatar-inner {
    width: 100%; height: 100%;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.podium-avatar-inner img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
}
.lb-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; border: 2px solid #e2e8f0;
}
.lb-avatar-placeholder {
    width: 36px; height: 36px; border-radius: 50%;
    background: #e6f0ff; display: flex; align-items: center;
    justify-content: center; font-size: 14px; font-weight: 700;
    color: #2b8ef3; flex-shrink: 0;
}
</style>
@endpush

@section('content')

<h3 class="page-title">LEADERBOARD</h3>
<p class="page-subtitle">Peringkat siswa di kelas yang Anda ajar.</p>

@if($kelasList->isEmpty())
    <div class="no-kelas-box">
        <img src="{{ asset('images/icon/gurud/alert.png') }}" class="icon-inline" alt="Peringatan">
        Anda belum mengajar kelas manapun. Hubungi admin untuk mengatur jadwal mengajar.
    </div>
@else

{{-- Filter --}}
<form method="GET" action="{{ route('guru.leaderboard.index') }}">
<div class="filter-card">
    <div class="filter-group">
        <label>Kelas</label>
        <select name="id_kelas">
            @foreach($kelasList as $kelas)
            <option value="{{ $kelas->id_kelas }}" {{ $idKelas == $kelas->id_kelas ? 'selected' : '' }}>
                {{ $kelas->nama_kelas }}
            </option>
            @endforeach
        </select>
    </div>

    <div class="filter-group">
        <label>Semester</label>
        <select name="semester">
            <option value="1" {{ $semester == '1' ? 'selected' : '' }}>Semester 1</option>
            <option value="2" {{ $semester == '2' ? 'selected' : '' }}>Semester 2</option>
        </select>
    </div>

    <div class="filter-group">
        <label>Tahun Ajaran</label>
        <select name="tahun_ajaran">
            @foreach($tahunList as $thn)
            <option value="{{ $thn }}" {{ $tahunAjaran == $thn ? 'selected' : '' }}>{{ $thn }}</option>
            @endforeach
        </select>
    </div>

    <button type="submit" class="btn-filter">Tampilkan</button>
</div>
</form>

@php $namaKelas = $kelasList->firstWhere('id_kelas', $idKelas)?->nama_kelas ?? '-'; @endphp
<span class="semester-badge">{{ $namaKelas }} · Semester {{ $semester }} · {{ $tahunAjaran }}</span>

@if($leaderboard->isEmpty())
    <div class="empty-state">
        <div style="margin-bottom:12px">
            <img src="{{ asset('images/icon/gurud/lb.png') }}" class="icon-lg" alt="Leaderboard kosong">
        </div>
        <p style="font-size:15px;font-weight:600;color:#475569">Belum ada data leaderboard.</p>
        <p style="font-size:13px">Belum ada siswa yang menyelesaikan challenge pada periode ini.</p>
    </div>
@else

    {{-- Podium --}}
    @php
        $first  = $leaderboard->firstWhere('ranking', 1);
        $second = $leaderboard->firstWhere('ranking', 2);
        $third  = $leaderboard->firstWhere('ranking', 3);
    @endphp

    @php
    function fotoSiswa($item) {
        if (!empty($item['foto_profil'])) {
            $fileName = basename($item['foto_profil']);
            return '/E31230356/storage/app/public/foto_profil/siswa/' . $fileName;
        }
        return null;
    }
    @endphp

    @if($first)
    <div class="podium-wrap">
        @if($second)
        <div class="podium-item rank-2">
            <div class="podium-avatar">
            <div class="podium-avatar-inner">
                @php $fotoUrl = fotoSiswa($second); @endphp
                @if($fotoUrl)
                    <img src="{{ $fotoUrl }}" alt="Foto {{ $second['nama'] }}">
                @else
                    {{ strtoupper(substr($second['nama'],0,1)) }}
                @endif
            </div>
        </div>
            <div class="podium-name">{{ $second['nama'] }}</div>
            <div class="podium-exp">
                <img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-inline" alt="EXP">
                {{ number_format($second['exp']) }}
            </div>
            <div class="podium-bar">2</div>
        </div>
        @endif

        <div class="podium-item rank-1">
            <div class="podium-avatar">
                <span class="podium-crown">
                    <img src="{{ asset('images/icon/gurud/crown.png') }}" style="width:22px;height:22px" alt="Mahkota juara 1">
                </span>
                <div class="podium-avatar-inner">
                    @php $fotoUrl = fotoSiswa($first); @endphp
                    @if($fotoUrl)
                        <img src="{{ $fotoUrl }}" alt="Foto {{ $first['nama'] }}">
                    @else
                        {{ strtoupper(substr($first['nama'],0,1)) }}
                    @endif
                </div>
            </div>
            <div class="podium-name">{{ $first['nama'] }}</div>
            <div class="podium-exp">
                <img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-inline" alt="EXP">
                {{ number_format($first['exp']) }}
            </div>
            <div class="podium-bar">1</div>
        </div>

        @if($third)
        <div class="podium-item rank-3">
            <div class="podium-avatar">
                <div class="podium-avatar-inner">
                    @php $fotoUrl = fotoSiswa($third); @endphp
                    @if($fotoUrl)
                        <img src="{{ $fotoUrl }}" alt="Foto {{ $third['nama'] }}">
                    @else
                        {{ strtoupper(substr($third['nama'],0,1)) }}
                    @endif
                </div>
            </div>
            <div class="podium-name">{{ $third['nama'] }}</div>
            <div class="podium-exp">
                <img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-inline" alt="EXP">
                {{ number_format($third['exp']) }}
            </div>
            <div class="podium-bar">3</div>
        </div>
        @endif
    </div>
    @endif

    {{-- Tabel --}}
    <div class="custom-card">
        <p class="section-title">
            <img src="{{ asset('images/icon/gurud/buku1.png') }}" class="icon-inline" alt="Daftar peringkat">
            Semua Peringkat ({{ $leaderboard->count() }} siswa)
        </p>

        @foreach($leaderboard as $item)
        @php $rankClass = match($item['ranking']) { 1=>'gold', 2=>'silver', 3=>'bronze', default=>'' }; @endphp
        <div class="lb-row">
            <div class="lb-rank {{ $rankClass }}">

                @if($item['ranking']===1)
                    <img src="{{ asset('images/icon/gurud/1.png') }}" style="width:20px;height:20px" alt="Peringkat 1">
                @elseif($item['ranking']===2)
                    <img src="{{ asset('images/icon/gurud/2.png') }}" style="width:20px;height:20px" alt="Peringkat 2">
                @elseif($item['ranking']===3)
                    <img src="{{ asset('images/icon/gurud/3.png') }}" style="width:20px;height:20px" alt="Peringkat 3">
                @else
                    {{ $item['ranking'] }}
                @endif
            </div>
                            @php $fotoUrl = fotoSiswa($item); @endphp
                @if($fotoUrl)
                    <img src="{{ $fotoUrl }}" class="lb-avatar" alt="Foto {{ $item['nama'] }}">
                @else
                    <div class="lb-avatar-placeholder">{{ strtoupper(substr($item['nama'],0,1)) }}</div>
                @endif
                
            <div style="flex:1">
                <div class="lb-nama">{{ $item['nama'] }}</div>
                <div class="lb-nisn">{{ $item['nisn'] }}</div>
            </div>
            <div class="lb-exp">
                <img src="{{ asset('images/icon/gurud/star.png') }}" class="icon-inline" alt="EXP">
                {{ number_format($item['exp']) }}
            </div>
        </div>
        @endforeach
    </div>

@endif
@endif

@endsection