@extends('layouts.admin')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Options for Question: {{ $question->text }}</h1>
        <div>
            <x-ui.button variant="navigation" href="{{ route('admin.questions.show', $question->id) }}" class="mr-2">
                Back to Question
            </x-ui.button>
            
            <x-ui.button variant="create" href="{{ route('admin.questions.options.create', $question->id) }}">
                Add Option
            </x-ui.button>
        </div>
    </div>
    
    <x-ui.layout.card>
        <div class="overflow-x-auto">
            <div class="min-w-full inline-block align-middle">
                <div class="responsive-table">
                    @if($options->count() > 0)
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Option Text</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Correct?</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                                @foreach($options as $option)
                                    <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                                        <td class="px-6 py-4 whitespace-normal text-sm text-gray-900 dark:text-gray-100" data-label="Option Text">{!! $option->text !!}</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100" data-label="Correct?">
                                            <button 
                                                onclick="toggleCorrectOption({{ $option->id }}, {{ $option->is_correct ? 'false' : 'true' }})"
                                                class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 {{ $option->is_correct ? 'bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-500 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700' : 'bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-500 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700' }}"
                                                id="option-{{ $option->id }}-toggle"
                                                title="Click to toggle correct/incorrect"
                                            >
                                                @if($option->is_correct)
                                                    ✓ Yes
                                                @else
                                                    ✗ No
                                                @endif
                                            </button>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium" data-label="Actions">
                                            <a href="{{ route('admin.options.edit', $option->id) }}" class="btn-edit btn-sm mr-2">Edit</a>
                                            <form action="{{ route('admin.options.destroy', $option->id) }}" method="POST" class="inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-delete btn-sm" onclick="return confirm('Are you sure you want to delete this option?')">Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <p class="text-gray-500 dark:text-gray-400 p-6">No options found for this question. Click "Add Option" to create one.</p>
                    @endif
                </div>
            </div>
        </div>
    </x-ui.layout.card>
</div>

<script>
function toggleCorrectOption(optionId, newValue) {
    const button = document.getElementById("option-" + optionId + "-toggle");
    const originalContent = button.innerHTML;
    
    // Show loading state
    button.disabled = true;
    button.innerHTML = "⟳ Updating...";
    
    fetch("/admin/options/" + optionId + "/toggle-correct", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector("meta[name=csrf-token]").getAttribute("content")
        },
        body: JSON.stringify({ is_correct: newValue })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update button appearance and functionality
            const isCorrect = data.is_correct;
            
            if (isCorrect) {
                button.className = "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-500 dark:bg-green-800 dark:text-green-100 dark:hover:bg-green-700";
                button.innerHTML = "✓ Yes";
            } else {
                button.className = "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-500 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700";
                button.innerHTML = "✗ No";
            }
            
            // Show success feedback
            showNotification("Option updated successfully!", "success");
        } else {
            throw new Error(data.message || "Failed to update option");
        }
    })
    .catch(error => {
        console.error("Error:", error);
        button.innerHTML = originalContent;
        showNotification("Failed to update option. Please try again.", "error");
    })
    .finally(() => {
        button.disabled = false;
    });
}

function showNotification(message, type) {
    // Create notification element
    const notification = document.createElement("div");
    notification.className = "fixed top-4 right-4 px-4 py-2 rounded-md text-white z-50 transition-opacity duration-300 " + (type === "success" ? "bg-green-500" : "bg-red-500");
    notification.textContent = message;
    
    document.body.appendChild(notification);
    
    // Remove after 3 seconds
    setTimeout(() => {
        notification.style.opacity = "0";
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}
</script>
@endsection