@extends('siswa.layouts.app')

@section('title', 'Challenge')

@push('styles')
<style>
.page-title {
        font-size: 22px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
.page-title img { width: 32px; height: 32px; object-fit: contain; }
.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;
}

/* Hapus ::before emoji — diganti dengan badge gambar */
.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; }

/* Watermark pojok kanan atas via img absolut */
.card-watermark {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    object-fit: contain;
    opacity: 0.12;
    pointer-events: none;
}

.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;
}
.card-badge img { width: 13px; height: 13px; object-fit: contain; }

.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 img { width: 14px; height: 14px; object-fit: contain; }
.meta-item.exp { background: #fef9c3; color: #b45309; border-color: #fde68a; }

.btn-kerjakan {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    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 img { width: 16px; height: 16px; object-fit: contain; }
.btn-kerjakan:hover { opacity: 0.9; color: white; }

.btn-lihat-hasil {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 12px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.btn-lihat-hasil img { width: 16px; height: 16px; object-fit: contain; }
.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; }
.empty-state img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 16px; }

.alert-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 14px;
}
.alert-error img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
</style>
@endpush

@section('content')

<h3 class="page-title">
    <img src="{{ asset('images/icon/siswac/piala.png') }}" alt="Ikon piala">
    Challenge
</h3>
<p class="page-subtitle">Kerjakan challenge untuk mendapatkan EXP dan naik peringkat di leaderboard!</p>

@if(session('error'))
    <div class="alert-error">
        <img src="{{ asset('images/icon/siswac/x.png') }}" alt="Error">
        {{ session('error') }}
    </div>
@endif

@if($challenges->isEmpty())
    <div class="empty-state">
        <img src="{{ asset('images/icon/siswac/target.png') }}" alt="Belum ada challenge">
        <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' : '');

            // Watermark pojok kanan atas sesuai status
            if ($isSudah) {
                $watermarkSrc = asset('images/icon/siswac/v.png');
                $watermarkAlt = 'Sudah dikerjakan';
            } elseif ($isLewat) {
                $watermarkSrc = asset('images/icon/siswac/alarm.png');
                $watermarkAlt = 'Tenggat lewat';
            } else {
                $watermarkSrc = asset('images/icon/siswac/piala.png');
                $watermarkAlt = 'Challenge aktif';
            }
        @endphp
        <div class="challenge-card {{ $cardClass }}">

            {{-- Watermark pengganti ::before emoji --}}
            <img class="card-watermark" src="{{ $watermarkSrc }}" alt="{{ $watermarkAlt }}">

            @if($isSudah)
                <span class="card-badge badge-sudah">
                    <img src="{{ asset('images/icon/siswac/v.png') }}" alt="Centang"> Sudah Dikerjakan
                </span>
            @elseif($isLewat)
                <span class="card-badge badge-lewat">
                    <img src="{{ asset('images/icon/siswac/alarm.png') }}" alt="Alarm"> Tenggat Lewat
                </span>
            @else
                <span class="card-badge badge-aktif">
                    <img src="{{ asset('images/icon/siswac/api.png') }}" alt="Api 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">
                    <img src="{{ asset('images/icon/siswac/buku1.png') }}" alt="Jumlah soal">
                    {{ $ch->soal_count }} soal
                </span>
                <span class="meta-item exp">
                    <img src="{{ asset('images/icon/siswac/star.png') }}" alt="EXP">
                    {{ $ch->exp }} EXP
                </span>
                <span class="meta-item">
                    <img src="{{ asset('images/icon/siswac/alarm.png') }}" alt="Tenggat waktu">
                    {{ \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">
                    <img src="{{ asset('images/icon/siswac/lb.png') }}" alt="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">
                    <img src="{{ asset('images/icon/siswac/rocket.png') }}" alt="Kerjakan">
                    Kerjakan Sekarang
                </a>
            @endif

        </div>
        @endforeach
    </div>
@endif

@endsection