@extends('layouts.admin')

@section('title', $exam->title)
@section('page-title', trans('admin.Exam'))
@section('page-subtitle', $exam->title)

@section('content')

@php
    $canUpdateExam = auth('user')->user()->has_permission('update-exams');
@endphp

<section class="dpage active">
    <div class="card cd-hero">
        <div class="cd-hero-info" style="margin-left:0;">
            <div class="cd-hero-top">
                <span class="pill {{ $exam->status === 'live' ? 'pill-green' : 'pill-muted' }}" id="examStatusPill">{{ trans('admin.'.ucfirst($exam->status)) }}</span>
                <span class="eyebrow">{{ $exam->course->title ?? trans('admin.Course') }}</span>
            </div>
            <h2 id="examTitleHeading">{{ $exam->title }}</h2>
            <p class="cd-by">{{ trans('admin.Passing score') }}: {{ $exam->passing_score }}% &nbsp;·&nbsp; {{ trans('admin.Time limit (minutes)') }}: {{ $exam->time_limit }} &nbsp;·&nbsp; {{ $exam->questions_count }} {{ trans('admin.Questions') }}</p>
            <div class="cd-hero-actions">
                <a href="{{ route('dashboard.exams.index') }}" class="btn btn-ghost btn-sm">{{ trans('admin.Back to exams') }}</a>
                <button type="button" class="btn btn-soft btn-sm" onclick="openModal('examQuestionsModal')">{{ trans('admin.View questions') }}</button>
                @if($canUpdateExam)
                    <button type="button" class="btn btn-primary btn-sm" onclick="openExamEditModal()">{{ trans('admin.Edit exam') }}</button>
                @endif
            </div>
        </div>
    </div>

    <div class="stat-grid">
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--primary-soft);color:var(--primary-ink);">🧑‍🎓</div></div><div class="stat-val">{{ $exam->results_count }}</div><div class="stat-label">{{ trans('admin.Attempts') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--gold-soft);color:var(--gold-ink);">📊</div></div><div class="stat-val">{{ $exam->results_avg_score ? number_format($exam->results_avg_score, 0).'%' : '—' }}</div><div class="stat-label">{{ trans('admin.Average score') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--green-soft);color:var(--green);">✓</div></div><div class="stat-val">{{ $exam->passed_results_count }}</div><div class="stat-label">{{ trans('admin.Passed') }}</div></div>
        <div class="stat-card"><div class="stat-top"><div class="stat-ic" style="background:var(--red-soft);color:var(--coral);">✕</div></div><div class="stat-val">{{ $exam->failed_results_count }}</div><div class="stat-label">{{ trans('admin.Failed') }}</div></div>
    </div>

    <div class="card">
        <div class="card-head">
            <div><h3>{{ trans('admin.Results') }} — {{ $exam->title }}</h3><div class="sub">{{ $exam->results_count }} {{ trans('admin.students') }} · {{ trans('admin.avg score') }} {{ $exam->results_avg_score ? number_format($exam->results_avg_score, 0).'%' : '—' }}</div></div>
            <span class="pill {{ $exam->status === 'live' ? 'pill-green' : 'pill-muted' }}">{{ trans('admin.'.ucfirst($exam->status)) }}</span>
        </div>
        <div class="table-wrap">
            <table class="dtable">
                <thead>
                    <tr>
                        <th>{{ trans('admin.Student') }}</th>
                        <th>{{ trans('admin.Score') }}</th>
                        <th>{{ trans('admin.Time taken') }}</th>
                        <th>{{ trans('admin.Result') }}</th>
                        <th>{{ trans('admin.Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($results as $result)
                        <tr>
                            <td>
                                <div class="cell-person">
                                    <div class="cell-avatar"></div>
                                    <div><b>{{ $result->student->user->name ?? '—' }}</b></div>
                                </div>
                            </td>
                            <td>
                                <span class="bar-mini" style="margin-right:8px;"><i style="width:{{ $result->score }}%;background:{{ $result->score >= $exam->passing_score ? 'var(--green)' : 'var(--red)' }};"></i></span>{{ $result->score }}%
                            </td>
                            <td style="font-family:var(--font-mono);">{{ $result->time_taken_minutes ? $result->time_taken_minutes.'m' : '—' }}</td>
                            <td><span class="pill {{ $result->status === 'pass' ? 'pill-green' : 'pill-red' }}">{{ trans('admin.'.ucfirst($result->status)) }}</span></td>
                            <td>
                                <div class="row-actions">
                                    <a href="#" title="{{ trans('admin.View') }}" onclick="openExamResultDetails({{ $result->id }}); return false;">
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5"><p class="hint" style="padding:14px 0;">{{ trans('admin.No results yet') }}</p></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($results->hasPages())
        <div class="table-foot">
            {{ $results->onEachSide(1)->links('pagination::bootstrap-4') }}
        </div>
        @endif
    </div>
</section>

<!-- ============ MODAL: View questions ============ -->
<div class="modal-backdrop" id="examQuestionsModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3>{{ trans('admin.Questions') }} — {{ $exam->title }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('examQuestionsModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <div class="modal-body">
            @forelse($exam->questions as $i => $question)
                <div class="q-card" style="margin-bottom:14px;">
                    <div class="q-card-head">
                        <b>{{ trans('admin.Question') }} {{ $i + 1 }}</b>
                        <span class="pill pill-muted">{{ $question->type === 'true_false' ? trans('admin.True / False') : trans('admin.Multiple choice') }}</span>
                    </div>
                    <p style="margin-bottom:10px;">{{ $question->question }}</p>
                    @if($question->attachment)
                        <div class="opt-attach-preview">
                            <a href="{{ $question->attachment['url'] }}" target="_blank" rel="noopener">{{ $question->attachment['name'] }}</a>
                        </div>
                    @endif
                    @foreach($question->options as $option)
                        <div class="opt-row" style="align-items:center;gap:8px;">
                            <span style="width:18px;height:18px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;{{ $option->is_correct ? 'background:var(--green-soft);color:var(--green);' : 'background:var(--bg-alt);color:var(--text-faint);' }}">
                                @if($option->is_correct)
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:11px;height:11px;"><path d="M20 6L9 17l-5-5"/></svg>
                                @endif
                            </span>
                            <span style="{{ $option->is_correct ? 'font-weight:700;color:var(--green);' : '' }}">{{ $option->option_text }}</span>
                        </div>
                    @endforeach
                </div>
            @empty
                <p class="hint" style="padding:14px 0;">{{ trans('admin.No questions yet') }}</p>
            @endforelse
        </div>
        <div class="modal-foot">
            <button type="button" class="btn btn-ghost" onclick="closeModal('examQuestionsModal')">{{ trans('admin.Close') }}</button>
        </div>
    </div>
</div>

<!-- ============ MODAL: Result details (student answers) ============ -->
<div class="modal-backdrop" id="examResultDetailsModal">
    <div class="modal-box wide">
        <div class="modal-head">
            <h3 id="examResultDetailsTitle">{{ trans('admin.Result details') }}</h3>
            <button type="button" class="modal-close" onclick="closeModal('examResultDetailsModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
        </div>
        <div class="modal-body" id="examResultDetailsBody">
            <p class="hint" style="padding:14px 0;">{{ trans('admin.loading') }}</p>
        </div>
        <div class="modal-foot">
            <button type="button" class="btn btn-ghost" onclick="closeModal('examResultDetailsModal')">{{ trans('admin.Close') }}</button>
        </div>
    </div>
</div>

@if($canUpdateExam)
@include('Dashboard.exams._edit_modal')
@endif

@endsection

@section('script')
<script type="text/javascript">
    function openExamResultDetails(resultId){
        var $body = $('#examResultDetailsBody');
        $('#examResultDetailsTitle').text("{{ trans('admin.Result details') }}");
        $body.html('<p class="hint" style="padding:14px 0;">{{ trans('admin.loading') }}</p>');
        openModal('examResultDetailsModal');

        $.get("{{ url('dashboard/exams/'.$exam->id.'/results') }}/" + resultId, function(res){
            var html = '<div class="cd-by" style="margin-bottom:16px;">' +
                '<b>' + $('<div>').text(res.student).html() + '</b> · ' +
                res.score + '% · ' +
                '<span class="pill ' + (res.status === 'pass' ? 'pill-green' : 'pill-red') + '">' + (res.status === 'pass' ? "{{ trans('admin.Pass') }}" : "{{ trans('admin.Fail') }}") + '</span>' +
                (res.time_taken ? ' · ' + res.time_taken + 'm' : '') +
            '</div>';

            if (!res.has_answers) {
                html += '<p class="hint" style="padding:14px 0;">{{ trans('admin.No answer data recorded for this attempt') }}</p>';
            } else if (!res.questions.length) {
                html += '<p class="hint" style="padding:14px 0;">{{ trans('admin.No questions yet') }}</p>';
            } else {
                res.questions.forEach(function(q, i){
                    html += '<div class="q-card" style="margin-bottom:14px;">' +
                        '<div class="q-card-head">' +
                            '<b>{{ trans('admin.Question') }} ' + (i + 1) + '</b>' +
                            '<span class="pill ' + (q.correct ? 'pill-green' : 'pill-red') + '">' + (q.correct ? '✓' : (q.answered ? '✕' : "{{ trans('admin.Not answered') }}")) + '</span>' +
                        '</div>' +
                        '<p style="margin-bottom:10px;">' + $('<div>').text(q.question).html() + '</p>';

                    q.options.forEach(function(opt){
                        var isCorrect = opt.is_correct;
                        var isChosen = opt.is_chosen;
                        var color = isCorrect ? 'var(--green)' : (isChosen ? 'var(--coral)' : 'var(--text-faint)');
                        var bg = isCorrect ? 'var(--green-soft)' : (isChosen ? 'var(--red-soft)' : 'var(--bg-alt)');
                        var label = isCorrect ? "{{ trans('admin.Correct answer') }}" : (isChosen ? "{{ trans('admin.Your answer') }}" : '');

                        html += '<div class="opt-row" style="align-items:center;gap:8px;">' +
                            '<span style="width:18px;height:18px;flex-shrink:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:' + bg + ';color:' + color + ';">' +
                                (isCorrect ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:11px;height:11px;"><path d="M20 6L9 17l-5-5"/></svg>' : (isChosen ? '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" style="width:11px;height:11px;"><path d="M18 6L6 18M6 6l12 12"/></svg>' : '')) +
                            '</span>' +
                            '<span style="' + (isCorrect || isChosen ? 'font-weight:700;color:' + color + ';' : '') + '">' + $('<div>').text(opt.text).html() + '</span>' +
                            (label ? '<span class="hint" style="margin-left:auto;">' + label + '</span>' : '') +
                        '</div>';
                    });

                    html += '</div>';
                });
            }

            $body.html(html);
        }).fail(function(){
            $body.html('<p class="hint" style="padding:14px 0;">{{ trans('admin.faild') }}</p>');
        });
    }

    @if($canUpdateExam)
    @include('Dashboard.exams._edit_script')

    @if(request()->query('edit'))
        openExamEditModal();
    @endif
    @endif
</script>
@endsection