{{-- resources/views/assessment/take.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ $assessment->category->name }}
            </h2>
            <div class="text-sm text-gray-600">
                Question {{ $questionPosition }} of {{ $totalQuestions }}
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">

            {{-- Progress Bar --}}
            <div class="mb-6">
                <div class="flex justify-between text-sm text-gray-600 mb-2">
                    <span>Progress: {{ $answeredCount }}/{{ $totalQuestions }} answered</span>
                    <span>{{ number_format($progressPercentage, 1) }}% complete</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-blue-600 h-2 rounded-full transition-all duration-300"
                         style="width: {{ $progressPercentage }}%"></div>
                </div>
            </div>

            {{-- Question Card --}}
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-8">

                    {{-- Question Header --}}
                    <div class="mb-6">
                        <div class="flex items-center justify-between mb-4">
                            <span class="inline-flex px-3 py-1 text-sm font-semibold rounded-full
                                @if($currentQuestion->difficulty_level == 'easy') bg-green-100 text-green-800
                                @elseif($currentQuestion->difficulty_level == 'medium') bg-yellow-100 text-yellow-800
                                @else bg-red-100 text-red-800 @endif">
                                {{ ucfirst($currentQuestion->difficulty_level) }}
                            </span>
                            <span class="text-sm text-gray-500">Weight: {{ $currentQuestion->weight }} points</span>
                        </div>

                        <h3 class="text-lg font-medium text-gray-900 leading-relaxed">
                            {{ $currentQuestion->question_text }}
                        </h3>
                    </div>

                    {{-- Answer Form --}}
                    <form id="answerForm" class="space-y-6">
                        @csrf
                        <input type="hidden" name="question_id" value="{{ $currentQuestion->id }}">
                        <input type="hidden" name="action" id="formAction" value="save">

                        @if($currentQuestion->question_type === 'multiple_choice')
                            <div class="space-y-3">
                                @foreach($currentQuestion->getFormattedOptions() as $value => $label)
                                    <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                        <input type="radio" name="answer" value="{{ $value }}"
                                               class="mr-3 text-blue-600 focus:ring-blue-500"
                                               {{ $previousAnswer && $previousAnswer->answer == $value ? 'checked' : '' }}>
                                        <span class="text-gray-900">{{ $label }}</span>
                                    </label>
                                @endforeach
                            </div>

                        @elseif($currentQuestion->question_type === 'scale')
                            <div class="space-y-4">
                                <div class="flex justify-between text-sm text-gray-600">
                                    <span>{{ $currentQuestion->options['min'] ?? 1 }}</span>
                                    <span>{{ $currentQuestion->options['max'] ?? 5 }}</span>
                                </div>
                                <div class="flex justify-between">
                                    @for($i = ($currentQuestion->options['min'] ?? 1); $i <= ($currentQuestion->options['max'] ?? 5); $i++)
                                        <label class="flex flex-col items-center cursor-pointer">
                                            <input type="radio" name="answer" value="{{ $i }}"
                                                   class="mb-2 text-blue-600 focus:ring-blue-500"
                                                   {{ $previousAnswer && $previousAnswer->answer == $i ? 'checked' : '' }}>
                                            <span class="text-sm text-gray-600">{{ $i }}</span>
                                            @if(isset($currentQuestion->options['labels'][$i]))
                                                <span class="text-xs text-gray-500 text-center mt-1">
                                                    {{ $currentQuestion->options['labels'][$i] }}
                                                </span>
                                            @endif
                                        </label>
                                    @endfor
                                </div>
                            </div>

                        @elseif($currentQuestion->question_type === 'boolean')
                            <div class="space-y-3">
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="answer" value="1"
                                           class="mr-3 text-blue-600 focus:ring-blue-500"
                                           {{ $previousAnswer && $previousAnswer->answer == '1' ? 'checked' : '' }}>
                                    <span class="text-gray-900">{{ $currentQuestion->options['true_label'] ?? 'Yes' }}</span>
                                </label>
                                <label class="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                                    <input type="radio" name="answer" value="0"
                                           class="mr-3 text-blue-600 focus:ring-blue-500"
                                           {{ $previousAnswer && $previousAnswer->answer == '0' ? 'checked' : '' }}>
                                    <span class="text-gray-900">{{ $currentQuestion->options['false_label'] ?? 'No' }}</span>
                                </label>
                            </div>

                        @elseif($currentQuestion->question_type === 'text')
                            <div>
                                <textarea name="answer" rows="4"
                                          class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                          placeholder="Enter your answer...">{{ $previousAnswer ? $previousAnswer->answer : '' }}</textarea>
                            </div>
                        @endif

                        {{-- Navigation Buttons --}}
                        <div class="flex justify-between pt-6 border-t border-gray-200">
                            <div>
                                @if($questionPosition > 1)
                                    <button type="button" onclick="submitAnswer('previous')"
                                            class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
                                        Previous
                                    </button>
                                @endif
                            </div>

                            <div class="space-x-3">
                                <button type="button" onclick="submitAnswer('save')"
                                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                                    Save Answer
                                </button>

                                @if($questionPosition < $totalQuestions)
                                    <button type="button" onclick="submitAnswer('next')"
                                            class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
                                        Next Question
                                    </button>
                                @else
                                    <button type="button" onclick="submitAnswer('finish')"
                                            class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
                                        Finish Assessment
                                    </button>
                                @endif
                            </div>
                        </div>
                    </form>

                    {{-- Question Explanation --}}
                    @if($currentQuestion->explanation)
                        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                            <h4 class="text-sm font-medium text-blue-800 mb-2">Additional Information:</h4>
                            <p class="text-sm text-blue-700">{{ $currentQuestion->explanation }}</p>
                        </div>
                    @endif
                </div>
            </div>

            {{-- Question Navigation --}}
            <div class="mt-6 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-4">
                    <h4 class="text-sm font-medium text-gray-900 mb-3">Question Navigation</h4>
                    <div class="grid grid-cols-10 gap-2">
                        @foreach($questions as $index => $question)
                            @php
                                $isAnswered = $assessment->getAnswerForQuestion($question) !== null;
                                $isCurrent = $question->id === $currentQuestion->id;
                            @endphp
                            <button onclick="goToQuestion({{ $question->id }})"
                                    class="w-8 h-8 text-xs font-medium rounded
                                           @if($isCurrent) bg-blue-600 text-white
                                           @elseif($isAnswered) bg-green-100 text-green-800
                                           @else bg-gray-100 text-gray-600 @endif
                                           hover:bg-opacity-80 transition-colors">
                                {{ $index + 1 }}
                            </button>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Loading Overlay --}}
    <div id="loadingOverlay" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 z-50 flex items-center justify-center">
        <div class="bg-white rounded-lg p-6 flex items-center space-x-3">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <span class="text-gray-900">Saving answer...</span>
        </div>
    </div>

    <script>
    let isSubmitting = false;

    function submitAnswer(action) {
        if (isSubmitting) return;

        const form = document.getElementById('answerForm');
        const formData = new FormData(form);
        const answer = getSelectedAnswer();

        if (!answer && action !== 'previous') {
            alert('Please select an answer before proceeding.');
            return;
        }

        isSubmitting = true;
        document.getElementById('loadingOverlay').classList.remove('hidden');

        formData.set('action', action);
        if (answer) formData.set('answer', answer);

        fetch('{{ route("assessment.submit_answer", $assessment) }}', {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                if (data.redirect_url) {
                    window.location.href = data.redirect_url;
                } else if (data.next_question_url) {
                    window.location.href = data.next_question_url;
                } else if (data.previous_question_url) {
                    window.location.href = data.previous_question_url;
                } else {
                    // Just saved, update progress
                    updateProgress(data.progress, data.answered_count, data.total_questions);
                }
            } else {
                alert(data.error || 'Failed to save answer');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Failed to save answer. Please try again.');
        })
        .finally(() => {
            isSubmitting = false;
            document.getElementById('loadingOverlay').classList.add('hidden');
        });
    }

    function getSelectedAnswer() {
        const answerInputs = document.querySelectorAll('input[name="answer"], textarea[name="answer"]');

        for (let input of answerInputs) {
            if (input.type === 'radio' && input.checked) {
                return input.value;
            } else if (input.type === 'textarea' && input.value.trim()) {
                return input.value.trim();
            }
        }

        return null;
    }

    function updateProgress(percentage, answered, total) {
        document.querySelector('.bg-blue-600.h-2').style.width = percentage + '%';
        document.querySelector('.text-sm.text-gray-600 span:first-child').textContent =
            `Progress: ${answered}/${total} answered`;
        document.querySelector('.text-sm.text-gray-600 span:last-child').textContent =
            `${percentage.toFixed(1)}% complete`;
    }

    function goToQuestion(questionId) {
        if (isSubmitting) return;

        const currentAnswer = getSelectedAnswer();
        if (currentAnswer) {
            submitAnswer('save');
            setTimeout(() => {
                window.location.href = `{{ route('assessment.question', [$assessment, '']) }}/${questionId}`;
            }, 500);
        } else {
            window.location.href = `{{ route('assessment.question', [$assessment, '']) }}/${questionId}`;
        }
    }

    // Auto-save functionality
    let autoSaveTimer;
    document.addEventListener('change', function(e) {
        if (e.target.name === 'answer') {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(() => {
                submitAnswer('save');
            }, 2000);
        }
    });

    // Prevent accidental page leave
    window.addEventListener('beforeunload', function(e) {
        if (!isSubmitting) {
            e.preventDefault();
            e.returnValue = '';
        }
    });
    </script>
</x-app-layout>