@extends('layouts.app')
@section('title', $exam->title)
@section('content')
<style>
body { background: #0f0f23 !important; }
body.dark-mode { background: #0a0a1a !important; }
.cbt-navbar { display: none; }
.page-header, .alert { display: none; }
#app { padding: 0 !important; }
.container-fluid > .row > .col-md-12 { padding: 0 !important; }
.exam-header {
    background: linear-gradient(135deg, #0056D2, #0040a0);
    color: #fff;
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
}
.exam-header .exam-title { font-size: 1.1rem; font-weight: 600; }
.exam-header .exam-info { display: flex; gap: 2rem; align-items: center; }
.exam-timer { font-size: 1.8rem; font-weight: 700; background: rgba(255,255,255,0.15); padding: 0.3rem 1rem; border-radius: 10px; font-variant-numeric: tabular-nums; }
.cbt-question-card { background: #1a1a2e; border: 1px solid #2a2a4a; color: #e0e0e0; }
.cbt-question-card .option-item { border-color: #2a2a4a; color: #e0e0e0; }
.cbt-question-card .option-item:hover { border-color: #4DA6FF; background: rgba(0,86,210,0.15); }
.cbt-question-card .option-item.selected { border-color: #0056D2; background: rgba(0,86,210,0.25); }
.cbt-question-nav { background: #1a1a2e; border: 1px solid #2a2a4a; }

.exam-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1a1a2e;
    border-top: 1px solid #2a2a4a;
    padding: 1rem 1.5rem;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>

<div class="exam-header">
    <div>
        <div class="exam-title"><i class="bi bi-pencil-square me-2"></i>{{ $exam->title }}</div>
        <small>{{ $exam->subject->name }} - {{ $exam->class->name }}</small>
    </div>
    <div class="exam-info">
        <span><i class="bi bi-question-circle me-1"></i><span id="currentQuestionNum">1</span>/{{ $questions->count() }}</span>
        <div class="exam-timer" id="timer">{{ sprintf('%02d:%02d:%02d', $exam->duration_minutes/60, $exam->duration_minutes%60, 0) }}</div>
    </div>
</div>

<div class="cbt-exam-container" style="padding-top:70px; padding-bottom:80px;">
    <form id="examForm" method="POST">
        @csrf
        <input type="hidden" name="time_spent" id="timeSpent" value="0">
        <input type="hidden" name="flagged_questions" id="flaggedQuestions" value="[]">

        @foreach($questions as $index => $question)
        <div class="cbt-question-card {{ $index === 0 ? 'active' : '' }}" data-question="{{ $index }}" id="question-{{ $question->id }}">
            <div class="d-flex justify-content-between align-items-start mb-3">
                <div>
                    <span class="question-number">{{ $index + 1 }}</span>
                    <span class="badge bg-{{ $question->difficulty === 'easy' ? 'success' : ($question->difficulty === 'medium' ? 'warning' : 'danger') }} ms-2">{{ $question->difficulty }}</span>
                    <span class="badge bg-info ms-1">{{ str_replace('_', ' ', $question->type) }}</span>
                    <span class="badge bg-secondary ms-1">{{ $question->pivot->marks }} mark{{ $question->pivot->marks > 1 ? 's' : '' }}</span>
                </div>
                <button type="button" class="btn btn-sm btn-outline-warning flag-btn" data-question-id="{{ $question->id }}" onclick="toggleFlag(this)">
                    <i class="bi bi-flag"></i>
                </button>
            </div>
            <div class="question-text mb-3">{!! nl2br(e($question->question_text)) !!}</div>

            @if($question->image_url)
            <div class="mb-3 text-center">
                <img src="{{ $question->image_url }}" class="img-fluid rounded" style="max-height:300px;" alt="">
            </div>
            @endif

            @if(in_array($question->type, ['multiple_choice', 'true_false']))
                @php $options = $question->options ?? []; if($exam->shuffle_options) shuffle($options); @endphp
                @foreach($options as $optIndex => $option)
                <div class="option-item" onclick="selectOption(this, '{{ $question->id }}', '{{ $option }}')">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="answers[{{ $question->id }}]" value="{{ $option }}" id="q{{ $question->id }}_o{{ $optIndex }}" data-question="{{ $question->id }}">
                        <label class="form-check-label w-100" for="q{{ $question->id }}_o{{ $optIndex }}">
                            {{ chr(65 + $optIndex) }}. {{ $option }}
                        </label>
                    </div>
                </div>
                @endforeach
            @elseif($question->type === 'multiple_response')
                @php $options = $question->options ?? []; if($exam->shuffle_options) shuffle($options); @endphp
                @foreach($options as $optIndex => $option)
                <div class="option-item" onclick="selectCheckbox(this)">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="answers[{{ $question->id }}][]" value="{{ $option }}" id="q{{ $question->id }}_o{{ $optIndex }}">
                        <label class="form-check-label w-100" for="q{{ $question->id }}_o{{ $optIndex }}">
                            {{ chr(65 + $optIndex) }}. {{ $option }}
                        </label>
                    </div>
                </div>
                @endforeach
            @elseif($question->type === 'fill_blank')
                <div class="mb-3">
                    <input type="text" name="answers[{{ $question->id }}]" class="form-control form-control-lg" placeholder="Type your answer..." data-question="{{ $question->id }}" onchange="markAnswered(this)">
                </div>
            @elseif(in_array($question->type, ['essay', 'theory']))
                <div class="mb-3">
                    <textarea name="answers[{{ $question->id }}]" class="form-control" rows="6" placeholder="Type your answer here..." data-question="{{ $question->id }}" onchange="markAnswered(this)"></textarea>
                </div>
            @endif
        </div>
        @endforeach
    </form>

    <div class="cbt-question-nav">
        @foreach($questions as $index => $question)
        <button type="button" class="q-btn {{ $index === 0 ? 'active' : '' }}" data-question="{{ $index }}" onclick="goToQuestion({{ $index }})">{{ $index + 1 }}</button>
        @endforeach
    </div>
</div>

<div class="exam-controls">
    <div>
        <button type="button" class="btn btn-outline-light me-2" onclick="previousQuestion()"><i class="bi bi-chevron-left me-1"></i>Previous</button>
        <button type="button" class="btn btn-light" onclick="nextQuestion()">Next <i class="bi bi-chevron-right ms-1"></i></button>
    </div>
    <div>
        <button type="button" class="btn btn-warning me-2" onclick="CBT.confirmAction('Submit your exam? You cannot change answers after submission.', submitExam)">
            <i class="bi bi-send me-1"></i>Submit Exam
        </button>
    </div>
</div>
@endsection

@push('scripts')
<script>
var totalQuestions = {{ $questions->count() }};
var currentQuestion = 0;
var duration = {{ $exam->duration_minutes * 60 }};
var startTime = {{ time() }};
var examId = {{ $exam->id }};
var attemptId = {{ $attempt->id }};
var apiToken = '';
var flagged = {};

// Fullscreen enforcement
document.addEventListener('fullscreenchange', function() {
    if (!document.fullscreenElement) {
        fetch('/api/exam/' + examId + '/cheat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content')},
            body: JSON.stringify({type: 'fullscreen_exit', attempt_id: attemptId})
        });
    }
});

// Tab switch detection
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        fetch('/api/exam/' + examId + '/cheat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'X-CSRF-TOKEN': $('meta[name=csrf-token]').attr('content')},
            body: JSON.stringify({type: 'tab_switch', attempt_id: attemptId})
        });
    }
});

// Disable right-click
document.addEventListener('contextmenu', function(e) { e.preventDefault(); });

// Disable copy
document.addEventListener('copy', function(e) { e.preventDefault(); });
document.addEventListener('cut', function(e) { e.preventDefault(); });
document.addEventListener('paste', function(e) { e.preventDefault(); });

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    if (e.ctrlKey || e.metaKey) { e.preventDefault(); }
    if (e.key === 'F12') { e.preventDefault(); }
    if (e.key === 'ArrowRight') { nextQuestion(); }
    if (e.key === 'ArrowLeft') { previousQuestion(); }
    if (e.key === 'Enter' && e.ctrlKey) { submitExam(); }
});

// Timer
var timerInterval = setInterval(function() {
    var elapsed = Math.floor(Date.now() / 1000) - startTime;
    var remaining = duration - elapsed;
    if (remaining <= 0) {
        clearInterval(timerInterval);
        autoSubmit();
    }
    var hours = Math.floor(remaining / 3600);
    var minutes = Math.floor((remaining % 3600) / 60);
    var seconds = remaining % 60;
    document.getElementById('timer').textContent =
        String(hours).padStart(2, '0') + ':' +
        String(minutes).padStart(2, '0') + ':' +
        String(seconds).padStart(2, '0');
    document.getElementById('timeSpent').value = elapsed;
}, 1000);

// Auto-save every 30 seconds
setInterval(function() {
    var answers = {};
    $('[name^="answers["]').each(function() {
        var name = $(this).attr('name');
        var match = name.match(/answers\[(\d+)\]/);
        if (match) {
            var qId = match[1];
            if ($(this).is(':checkbox')) {
                if (!answers[qId]) answers[qId] = [];
                if ($(this).is(':checked')) answers[qId].push($(this).val());
            } else if ($(this).is(':radio')) {
                if ($(this).is(':checked')) answers[qId] = $(this).val();
            } else {
                answers[qId] = $(this).val();
            }
        }
    });
    $.post('/student/exams/' + examId + '/attempt/' + attemptId + '/save', {
        _token: $('meta[name=csrf-token]').attr('content'),
        answers: answers,
        flagged_questions: Object.keys(flagged),
        time_spent: document.getElementById('timeSpent').value
    });
}, 30000);

function goToQuestion(index) {
    $('.cbt-question-card.active').removeClass('active');
    $('.cbt-question-nav .q-btn.active').removeClass('active');
    $('#question-' + $('.cbt-question-card').eq(index).data('question')).addClass('active');
    $('.cbt-question-nav .q-btn').eq(index).addClass('active');
    currentQuestion = index;
    document.getElementById('currentQuestionNum').textContent = index + 1;
}

function nextQuestion() {
    if (currentQuestion < totalQuestions - 1) goToQuestion(currentQuestion + 1);
}

function previousQuestion() {
    if (currentQuestion > 0) goToQuestion(currentQuestion - 1);
}

function selectOption(el, questionId, value) {
    $(el).closest('.cbt-question-card').find('.option-item').removeClass('selected');
    $(el).addClass('selected');
    $(el).find('input[type="radio"]').prop('checked', true);
    markAnswered(el);
    updateNavStatus(questionId);
}

function selectCheckbox(el) {
    $(el).toggleClass('selected');
    var cb = $(el).find('input[type="checkbox"]');
    cb.prop('checked', !cb.prop('checked'));
    var questionId = cb.attr('name').match(/\[(\d+)\]/)[1];
    updateNavStatus(questionId);
}

function markAnswered(el) {
    var card = $(el).closest('.cbt-question-card');
    var qId = card.data('question');
    var btn = $('.cbt-question-nav .q-btn').eq(qId);
    if (!btn.hasClass('flagged')) btn.addClass('answered');
}

function updateNavStatus(questionId) {
    $('.cbt-question-nav .q-btn').each(function(i) {
        if ($(this).data('question') === questionId) {
            // Already handled by markAnswered
        }
    });
}

function toggleFlag(btn) {
    var qId = $(btn).data('question-id');
    var qIndex = $('#question-' + qId).data('question');
    var navBtn = $('.cbt-question-nav .q-btn').eq(qIndex);
    if (flagged[qId]) {
        delete flagged[qId];
        $(btn).removeClass('btn-warning').addClass('btn-outline-warning');
        navBtn.removeClass('flagged');
        if (navBtn.find('input[type!="checkbox"], input[type="radio"]').length) {
            // check if answered
        }
    } else {
        flagged[qId] = true;
        $(btn).removeClass('btn-outline-warning').addClass('btn-warning');
        navBtn.addClass('flagged');
    }
    document.getElementById('flaggedQuestions').value = JSON.stringify(Object.keys(flagged));
}

function submitExam() {
    $('#examForm').attr('action', '/student/exams/' + examId + '/submit').submit();
}

function autoSubmit() {
    $('#examForm').attr('action', '/student/exams/' + examId + '/auto-submit').submit();
}

$(document).ready(function() {
    // Request fullscreen
    if ({{ $exam->fullscreen_mode ? 'true' : 'false' }}) {
        setTimeout(function() {
            document.documentElement.requestFullscreen().catch(function() {});
        }, 1000);
    }
});
</script>
@endpush