{{-- ══ TAB CARD (MC + Essay) ══ --}}
@if($mcTotal > 0 || $essayTotal > 0)
<div class="card border-0 shadow-sm">

    {{-- Tab header --}}
    <div class="card-header bg-white pb-0 border-bottom">
        <ul class="nav nav-tabs" id="resultTabs">
            @if($mcTotal > 0)
            <li class="nav-item">
                <a class="nav-link active text-sm font-weight-bold" data-bs-toggle="tab" href="#pane-mc">
                    <i class="fas fa-list-ul me-1"></i>Pilihan Ganda
                    <span class="badge badge-sm ms-1 {{ $mcAccuracy >= 70 ? 'bg-success' : 'bg-danger' }}">
                        {{ $mcCorrect }}/{{ $mcTotal }}
                    </span>
                </a>
            </li>
            @endif
            @if($essayTotal > 0)
            <li class="nav-item">
                <a class="nav-link {{ $mcTotal == 0 ? 'active' : '' }} text-sm font-weight-bold"
                   data-bs-toggle="tab" href="#pane-essay">
                    <i class="fas fa-pen-alt me-1"></i>Essay / Uraian
                    <span class="badge badge-sm ms-1 {{ $essayReviewed == $essayTotal ? 'bg-success' : 'bg-warning' }}">
                        {{ $essayReviewed }}/{{ $essayTotal }}
                    </span>
                </a>
            </li>
            @endif
        </ul>
    </div>

    <div class="card-body p-0">
        <div class="tab-content">

            {{-- ────── TAB MC ────── --}}
            @if($mcTotal > 0)
            <div class="tab-pane fade show active" id="pane-mc" role="tabpanel">

                {{-- Summary row --}}
                <div class="row g-0 border-bottom">
                    <div class="col-md-4 p-4 border-end">
                        <div class="d-flex align-items-center gap-3">
                            <i class="fas fa-check-circle text-success" style="font-size:2rem;flex-shrink:0;"></i>
                            <div>
                                <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-0">Correct</p>
                                <h5 class="mb-0 font-weight-bolder text-success">
                                    {{ $mcCorrect }}
                                    <span class="text-secondary text-sm fw-normal">/ {{ $mcTotal }}</span>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 p-4 border-end">
                        <div class="d-flex align-items-center gap-3">
                            <i class="fas fa-times-circle text-danger" style="font-size:2rem;flex-shrink:0;"></i>
                            <div>
                                <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-0">Incorrect</p>
                                <h5 class="mb-0 font-weight-bolder text-danger">
                                    {{ $mcTotal - $mcCorrect }}
                                    <span class="text-secondary text-sm fw-normal">/ {{ $mcTotal }}</span>
                                </h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 p-4">
                        <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-2">Akurasi</p>
                        <div class="d-flex align-items-center gap-2 mb-1">
                            <div class="progress flex-grow-1" style="height:6px;">
                                <div class="progress-bar {{ $mcAccuracy >= 70 ? 'bg-gradient-success' : 'bg-gradient-danger' }}"
                                    style="width:{{ $mcAccuracy }}%"></div>
                            </div>
                            <span class="text-sm font-weight-bolder {{ $mcAccuracy >= 70 ? 'text-success' : 'text-danger' }}">
                                {{ $mcAccuracy }}%
                            </span>
                        </div>
                        <p class="text-xxs text-secondary mb-0">Bobot earned: <strong>{{ $mcEarned }}</strong> / {{ $mcPts }}</p>
                    </div>
                </div>

                {{-- Question list --}}
                @foreach($mc_answers as $i => $mc)
                <div class="d-flex align-items-start gap-3 px-4 py-3
                    {{ $i > 0 ? 'border-top' : '' }}
                    {{ !is_null($mc->selected_option) && !$mc->is_correct ? 'bg-light' : '' }}">
                    <div class="rn-num mt-1">{{ $i + 1 }}</div>
                    <div class="flex-grow-1" style="min-width:0;">
                        <p class="text-sm text-dark font-weight-bold mb-1">{{ $mc->question_text }}</p>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <span class="text-xxs text-secondary">Dijawab:</span>
                            @if($mc->selected_option)
                                <span class="badge badge-sm rounded-pill px-2
                                    {{ $mc->is_correct ? 'rn-badge-ok' : 'rn-badge-fail' }}">
                                    {{ $mc->selected_option }}
                                </span>
                            @else
                                <span class="badge badge-sm rounded-pill px-2 rn-badge-warn">Tidak dijawab</span>
                            @endif
                        </div>
                    </div>
                    <div class="text-center flex-shrink-0" style="width:56px;">
                        @if($mc->selected_option && $mc->is_correct)
                            <span class="badge badge-sm rn-badge-ok rounded-pill">Correct</span>
                            <span class="text-xxs font-weight-bold text-success d-block mt-1">+{{ $mc->point_weight }}</span>
                        @elseif($mc->selected_option)
                            <span class="badge badge-sm rn-badge-fail rounded-pill">Incorrect</span>
                            <span class="text-xxs text-secondary d-block mt-1">0/{{ $mc->point_weight }}</span>
                        @else
                            <span class="badge badge-sm rn-badge-warn rounded-pill">Kosong</span>
                            <span class="text-xxs text-secondary d-block mt-1">0/{{ $mc->point_weight }}</span>
                        @endif
                    </div>
                </div>
                @endforeach
            </div>
            @endif

            {{-- ────── TAB ESSAY ────── --}}
            @if($essayTotal > 0)
            <div class="tab-pane fade {{ $mcTotal == 0 ? 'show active' : '' }}" id="pane-essay" role="tabpanel">
                <div class="p-4">
                    @foreach($essay_answers as $i => $ea)
                    @php
                        $eScore = (float)($ea->score ?? 0);
                        $eHex   = $eScore >= 75 ? '#2dce89' : ($eScore >= 50 ? '#fb6340' : '#adb5bd');
                    @endphp
                    <div class="card border-0 shadow-sm mb-3"
                        style="border-left: 3px solid {{ $ea->is_reviewed ? '#2dce89' : '#fb6340' }} !important;">
                        {{-- Header --}}
                        <div class="card-header bg-white d-flex align-items-center justify-content-between py-2 px-3 border-bottom">
                            <div class="d-flex align-items-center gap-2">
                                <span class="rn-num">{{ $i + 1 }}</span>
                                <span class="text-xxs font-weight-bold text-secondary">Bobot: {{ $ea->point_weight }}</span>
                            </div>
                            @if($ea->is_reviewed)
                                <span class="badge badge-sm rounded-pill rn-badge-ok px-2">
                                    <i class="fas fa-check-circle me-1"></i>Sudah Di Koreksi
                                </span>
                            @else
                                <span class="badge badge-sm rounded-pill rn-badge-warn px-2">
                                    <i class="fas fa-hourglass-half me-1"></i>Menunggu Koreksi
                                </span>
                            @endif
                        </div>
                        <div class="card-body p-3">
                            {{-- Question block --}}
                            <div class="p-3 mb-3 border-radius-lg"
                                style="background:#f0f2ff;border-left:3px solid #5e72e4;">
                                <p class="text-xxs font-weight-bolder text-uppercase mb-1" style="color:#5e72e4;">Pertanyaan</p>
                                <p class="text-sm text-dark font-weight-bold mb-0">{{ $ea->question_text }}</p>
                            </div>
                            <div class="row g-3">
                                {{-- Answer --}}
                                <div class="{{ $ea->is_reviewed ? 'col-md-7' : 'col-12' }}">
                                    <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-1">Jawaban Anda</p>
                                    <div class="p-3 border-radius-lg"
                                        style="background:#f8f9fa;border:1px solid #e9ecef;min-height:90px;">
                                        <p class="text-sm text-dark mb-0"
                                            style="white-space:pre-line;line-height:1.8;">
                                            {{ $ea->essay_answer ?: '(tidak ada jawaban)' }}
                                        </p>
                                    </div>
                                    @if(empty($ea->essay_answer))
                                        <div class="mt-2">
                                            <span class="badge badge-sm rounded-pill rn-badge-warn">Tidak dijawab</span>
                                        </div>
                                    @endif
                                </div>
                                {{-- Score & feedback --}}
                                @if($ea->is_reviewed)
                                <div class="col-md-5">
                                    <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-1">Hasil koreksi</p>
                                    <div class="p-3 border-radius-lg border">
                                        <div class="d-flex align-items-center gap-3 mb-3">
                                            <div class="text-center" style="flex-shrink:0;width:56px;">
                                                <span style="color:{{ $eHex }};font-size:2rem;font-weight:800;line-height:1;display:block;">{{ $ea->score ?? '–' }}</span>
                                                <span style="font-size:.65rem;color:#8392ab;">/100</span>
                                            </div>
                                            <div>
                                                <p class="text-xxs font-weight-bolder text-uppercase text-secondary mb-0">Skor Essay</p>
                                                <p class="text-xxs text-secondary mb-0">Skala 0–100</p>
                                                @if($ea->reviewed_by)
                                                <p class="text-xxs text-secondary mb-0 mt-1">
                                                    Oleh <strong>{{ $ea->reviewed_by }}</strong>
                                                    @if($ea->reviewed_at)
                                                    · {{ \Carbon\Carbon::parse($ea->reviewed_at)->format('d/m/Y') }}
                                                    @endif
                                                </p>
                                                @endif
                                            </div>
                                        </div>
                                        @if($ea->answer_feedback)
                                        <div class="p-2 border-radius-lg"
                                            style="background:#f0fbff;border-left:3px solid #11cdef;">
                                            <p class="text-xxs font-weight-bolder text-uppercase mb-1"
                                                style="color:#11cdef;">
                                                <i class="fas fa-comment-dots me-1"></i>Catatan Instruktur
                                            </p>
                                            <p class="text-xs text-dark mb-0"
                                                style="white-space:pre-line;line-height:1.7;">{{ $ea->answer_feedback }}</p>
                                        </div>
                                        @else
                                        <p class="text-xs text-secondary fst-italic mb-0">
                                            <i class="fas fa-minus-circle me-1"></i>Tidak ada catatan tambahan.
                                        </p>
                                        @endif
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

        </div>{{-- tab-content --}}
    </div>{{-- card-body --}}
</div>{{-- card --}}
@endif