@extends('app')

@section('content')
<nav class="app-nav">
    <a class="brand" href="{{ route('home') }}">
        <i class="bi bi-trophy-fill"></i> منصة المسابقات
    </a>
    <div class="nav-actions">
        <span class="nav-user">{{ $user['name'] }}</span>
        <a href="{{ route('home') }}" class="btn-nav">
            <i class="bi bi-house-fill"></i> الرئيسية
        </a>
    </div>
</nav>

<section class="history-hero">
    <div class="history-hero-inner">
        <div class="hero-copy">
            <span class="hero-kicker">Contest Archive</span>
            <h1>أرشيف المسابقات المنتهية</h1>
            <p>كل مسابقة في بطاقة مستقلة. افتح البطاقة لتشاهد نتيجتك، عدد الإجابات الصحيحة والخاطئة، وتفاصيل كل سؤال.</p>
        </div>
        <div class="hero-pill">
            <i class="bi bi-archive-fill"></i>
            <span>{{ $contests->count() }} مسابقات</span>
        </div>
    </div>
</section>

<main class="history-wrap">
    @forelse($contests as $contest)
        <details class="contest-accordion" {{ $loop->first ? 'open' : '' }}>
            <div class="contest-header">
                <div class="contest-header-icon">{{ $contest['emoji'] }}</div>
                <div class="contest-header-copy">
                    <strong>{{ $contest['title'] }}</strong>
                    <span>{{ $contest['ended_at'] }}</span>
                </div>
            </div>

            <summary class="contest-summary">
                <div class="summary-main">
                    <div class="summary-copy">
                        <h2>{{ $contest['title'] }}</h2>
                        <div class="summary-meta">
                            <span><i class="bi bi-calendar-event"></i> {{ $contest['ended_at'] }}</span>
                            <span><i class="bi bi-question-circle"></i> {{ $contest['total_questions'] }} سؤال</span>
                            @if($contest['has_attempt'])
                                <span><i class="bi bi-check2-circle"></i> {{ $contest['correct_count'] }} صحيح</span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="summary-side">
                    @if($contest['has_attempt'])
                        <div class="score-orb">
                            <strong>{{ $contest['score_percent'] ?? 0 }}%</strong>
                            <span>{{ $contest['score'] }} / {{ $contest['total_score'] }}</span>
                        </div>
                    @else
                        <div class="missed-badge">لم تشارك</div>
                    @endif

                    <div class="expand-hint">
                        <span>عرض التفاصيل</span>
                        <i class="bi bi-chevron-down"></i>
                    </div>
                </div>
            </summary>

            <div class="contest-body">
                @if($contest['has_attempt'])
                    <div class="stats-strip">
                        <div class="stat-box green">
                            <span>الإجابات الصحيحة</span>
                            <strong>{{ $contest['correct_count'] }}</strong>
                        </div>
                        <div class="stat-box red">
                            <span>الإجابات الخاطئة</span>
                            <strong>{{ $contest['total_questions'] - $contest['correct_count'] }}</strong>
                        </div>
                        <div class="stat-box blue">
                            <span>النتيجة الكاملة</span>
                            <a href="{{ route('quiz.result', $contest['id']) }}">فتح صفحة النتيجة</a>
                        </div>
                    </div>

                    <div class="questions-stack">
                        @foreach($contest['questions'] as $index => $question)
                            <section class="question-panel {{ $question['is_correct'] ? 'correct' : 'wrong' }}">
                                <div class="question-panel-head">
                                    <div class="question-order">{{ $index + 1 }}</div>
                                    <div class="question-content">
                                        <h3>{{ $question['text'] }}</h3>
                                        <span class="answer-state {{ $question['is_correct'] ? 'state-correct' : 'state-wrong' }}">
                                            {{ $question['is_correct'] ? 'إجابة صحيحة' : 'إجابة خاطئة' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="question-data">
                                    <div class="data-chip">
                                        <span class="chip-label">إجابتك</span>
                                        <strong>{{ $question['selected_answer'] ?: 'لم يتم اختيار إجابة' }}</strong>
                                    </div>
                                    <div class="data-chip">
                                        <span class="chip-label">الإجابة الصحيحة</span>
                                        <strong>{{ $question['correct_answer'] ?: 'غير محددة' }}</strong>
                                    </div>
                                </div>
                            </section>
                        @endforeach
                    </div>
                @else
                    <div class="empty-attempt">
                        <i class="bi bi-info-circle"></i>
                        <p>هذه المسابقة انتهت، لكن لا يوجد لك مشاركة مسجلة فيها.</p>
                    </div>
                @endif
            </div>
        </details>
    @empty
        <div class="empty-history">
            <i class="bi bi-clock-history"></i>
            <h2>لا توجد مسابقات منتهية حالياً</h2>
            <p>عندما تنتهي المسابقات ستظهر هنا مع النتائج والإجابات.</p>
        </div>
    @endforelse
</main>

@if(method_exists($contests, 'links'))
    <div class="history-pagination">
        {{ $contests->links() }}
    </div>
@endif

<style scoped>
.app-nav {
    background: linear-gradient(135deg, var(--green-main), var(--green-dark));
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.brand, .btn-nav {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-user {
    color: #fff;
    font-weight: 700;
}
.btn-nav {
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 8px 14px;
}
.history-hero {
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.18), transparent 26%),
        linear-gradient(135deg, #0f3d1c, #1f6b33 58%, #69b86f);
    color: #fff;
    padding: 44px 20px 84px;
}
.history-hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
}
.hero-kicker {
    display: inline-block;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.24);
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .76rem;
    margin-bottom: 12px;
}
.history-hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 900;
    margin: 0 0 10px;
}
.history-hero p {
    max-width: 760px;
    margin: 0;
    opacity: .92;
}
.hero-pill {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 18px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.history-wrap {
    max-width: 1120px;
    margin: -40px auto 0;
    padding: 0 16px 48px;
    display: block;
}
.contest-accordion {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 46px rgba(16, 70, 32, 0.12);
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgba(46,125,50,0.08);
}
.contest-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #edf7ee, #e2f0e5);
    border-bottom: 1px solid #edf4ee;
}
.contest-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.contest-header-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.contest-header-copy strong {
    color: var(--green-dark);
    font-size: 1rem;
}
.contest-header-copy span {
    color: var(--text-mid);
    font-size: .85rem;
}
.contest-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
}
.contest-summary::-webkit-details-marker {
    display: none;
}
.summary-main {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.summary-copy h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--green-dark);
}
.summary-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    color: var(--text-mid);
    font-size: .92rem;
}
.summary-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.summary-side {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.score-orb {
    min-width: 128px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f1fbf2, #d9f0db);
    padding: 12px 16px;
    text-align: center;
}
.score-orb strong {
    display: block;
    color: var(--green-dark);
    font-size: 1.45rem;
    font-weight: 900;
}
.score-orb span {
    color: var(--text-mid);
    font-size: .88rem;
    font-weight: 700;
}
.missed-badge {
    background: #fff4e5;
    color: #d96b00;
    padding: 10px 14px;
    border-radius: 14px;
    font-weight: 800;
}
.expand-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-mid);
    font-weight: 700;
}
.contest-accordion[open] .expand-hint i {
    transform: rotate(180deg);
}
.expand-hint i {
    transition: transform .2s ease;
}
.contest-body {
    border-top: 1px solid #edf4ee;
    padding: 0 24px 24px;
}
.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0;
}
.stat-box {
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stat-box.green { background: #eef9ef; }
.stat-box.red { background: #fff0f1; }
.stat-box.blue { background: #edf5ff; }
.stat-box span {
    color: var(--text-mid);
    font-size: .9rem;
}
.stat-box strong,
.stat-box a {
    font-size: 1.05rem;
    font-weight: 800;
}
.stat-box a {
    color: var(--blue-dark);
    text-decoration: none;
}
.questions-stack {
    display: grid;
    gap: 14px;
}
.question-panel {
    border-radius: 20px;
    padding: 18px;
    border: 1px solid transparent;
}
.question-panel.correct {
    background: linear-gradient(180deg, #f6fcf6, #f1faf2);
    border-color: #b7deb8;
}
.question-panel.wrong {
    background: linear-gradient(180deg, #fff8f8, #fff3f3);
    border-color: #f1b8b8;
}
.question-panel-head {
    display: flex;
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}
.question-order {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--green-main);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex: 0 0 38px;
}
.question-content {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}
.question-content h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
}
.answer-state {
    white-space: nowrap;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: .82rem;
    font-weight: 800;
}
.state-correct {
    background: #ddf3df;
    color: #176f28;
}
.state-wrong {
    background: #ffe1e1;
    color: #b3261e;
}
.question-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.data-chip {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 14px;
}
.chip-label {
    display: block;
    color: var(--text-mid);
    font-size: .84rem;
    margin-bottom: 6px;
}
.empty-attempt,
.empty-history {
    background: #fff;
    border-radius: 20px;
    text-align: center;
    padding: 28px;
    color: var(--text-mid);
}
.empty-attempt {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.empty-history i {
    font-size: 2rem;
    color: var(--green-main);
}
.history-pagination {
    max-width: 1120px;
    margin: 0 auto 48px;
    padding: 0 16px;
}
@media (max-width: 900px) {
    .history-hero-inner,
    .contest-summary,
    .summary-side,
    .question-content {
        display: block;
    }
    .hero-pill,
    .summary-side,
    .expand-hint,
    .score-orb,
    .missed-badge {
        margin-top: 14px;
    }
}
@media (max-width: 768px) {
    .stats-strip,
    .question-data {
        grid-template-columns: 1fr;
    }
}
</style>
@endsection