@extends('siswa.layouts.app')

@section('title', 'Challenge')

@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; }

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.challenge-card {
    background: white;
    border-radius: 20px;
    border: 2px solid #e5e5e5;
    padding: 22px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.challenge-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.challenge-card.sudah { border-color: #a5e6ba; background: linear-gradient(135deg, #f0fdf4, #fff); }
.challenge-card.lewat { border-color: #fecaca; background: #fffafa; opacity: 0.85; }

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    margin-bottom: 12px;
}

.badge-aktif { background: #dcfce7; color: #16a34a; }
.badge-sudah { background: #e0f2fe; color: #0369a1; }
.badge-lewat { background: #fee2e2; color: #dc2626; }

.card-title { font-size: 16px; font-weight: 700; color: #1e293b; margin-bottom: 8px; line-height: 1.4; }
.card-desc  { font-size: 13px; color: #64748b; margin-bottom: 14px; line-height: 1.6; }

.card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}

.meta-item.exp { background: #fef9c3; color: #b45309; border-color: #fde68a; }

.btn-kerjakan {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.btn-kerjakan:hover { opacity: 0.9; color: white; }

.btn-lihat-hasil {
    display: block;
    text-align: center;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.btn-lihat-hasil:hover { background: #bae6fd; color: #0369a1; }

.btn-disabled {
    display: block;
    text-align: center;
    background: #f1f5f9;
    color: #94a3b8;
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: not-allowed;
}

.empty-state { text-align: center; padding: 60px 20px; color: #94a3b8; }
.alert-error { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; font-weight: 500; font-size: 14px; }

.challenge-card::before {
    content: '🏆';
    position: absolute;
    top: 16px; right: 16px;
    font-size: 28px;
    opacity: 0.12;
}
.challenge-card.sudah::before { content: '✅'; opacity: 0.2; }
.challenge-card.lewat::before { content: '⏰'; opacity: 0.15; }
</style>
@endpush

@section('content')

<h3 class="page-title">🏆 Challenge</h3>
<p class="page-subtitle">Kerjakan challenge untuk mendapatkan EXP dan naik peringkat di leaderboard!</p>

@if(session('error'))
    <div class="alert-error">❌ {{ session('error') }}</div>
@endif

@if($challenges->isEmpty())
    <div class="empty-state">
        <div style="font-size:56px;margin-bottom:16px">🎯</div>
        <p style="font-size:16px;font-weight:600;color:#475569">Belum ada challenge untuk kelasmu.</p>
        <p style="font-size:13px">Tunggu admin membuat challenge baru!</p>
    </div>
@else
    <div class="challenge-grid">
        @foreach($challenges as $ch)
        @php
            $isLewat  = \Carbon\Carbon::parse($ch->tenggat_waktu)->isPast();
            $isSudah  = in_array($ch->id_challenge, $sudahDikerjakan);
            $cardClass = $isSudah ? 'sudah' : ($isLewat ? 'lewat' : '');
        @endphp
        <div class="challenge-card {{ $cardClass }}">
            @if($isSudah)
                <span class="card-badge badge-sudah">✅ Sudah Dikerjakan</span>
            @elseif($isLewat)
                <span class="card-badge badge-lewat">⏰ Tenggat Lewat</span>
            @else
                <span class="card-badge badge-aktif">🔥 Aktif</span>
            @endif

            <div class="card-title">{{ $ch->judul_challenge }}</div>
            @if($ch->deskripsi)
                <div class="card-desc">{{ Str::limit($ch->deskripsi, 80) }}</div>
            @endif

            <div class="card-meta">
                <span class="meta-item">📝 {{ $ch->soal_count }} soal</span>
                <span class="meta-item exp">⭐ {{ $ch->exp }} EXP</span>
                <span class="meta-item">⏰ {{ \Carbon\Carbon::parse($ch->tenggat_waktu)->format('d M Y, H:i') }}</span>
            </div>

            @if($isSudah)
                <a href="{{ route('siswa.challenge.hasil', $ch->id_challenge) }}" class="btn-lihat-hasil">📊 Lihat Hasil</a>
            @elseif($isLewat)
                <span class="btn-disabled">Tenggat sudah lewat</span>
            @else
                <a href="{{ route('siswa.challenge.kerjakan', $ch->id_challenge) }}" class="btn-kerjakan">🚀 Kerjakan Sekarang</a>
            @endif
        </div>
        @endforeach
    </div>
@endif

@endsection