@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">Manage Questions</h1>
        <div>
            <x-ui.buttons.secondary href="{{ route('admin.assessments.show', $assessment) }}" class="mr-2">
                <span class="mr-1">←</span> Back to Assessment Details
            </x-ui.buttons.secondary>
            
            <x-ui.buttons.primary id="createQuestionBtn">
                Create New Question
            </x-ui.buttons.primary>
        </div>
    </div>
    
    <x-ui.layout.card>
        <div class="overflow-x-auto">
            <div class="min-w-full inline-block align-middle">
                <x-ui.data.table :headers="['Order', 'Question Text', 'Type', '']">
                    <tbody id="sortable-questions">
                        @foreach ($questions as $question)
                            <tr data-id="{{ $question->id }}">
                                <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400 cursor-move sort-handle">{{ $question->order }}</td>
                                <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-gray-100">{{ $question->text }}</td>
                                <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ $question->type }}</td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <a href="{{ url('admin/questions/' . $question->id . '/options') }}" class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 mr-3">Manage Options</a>
                                    <a href="{{ route('admin.questions.edit', $question) }}" class="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 mr-3">Edit</a>
                                    <form action="{{ route('admin.questions.destroy', $question) }}" method="POST" class="inline-block" onsubmit="return confirm('Are you sure you want to delete this question and all its options?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </x-ui.data.table>
                
                <div class="mt-4">
                    <x-ui.data.pagination :paginator="$questions" />
                </div>
            </div>
        </div>
    </x-ui.layout.card>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const sortable = new Sortable(document.getElementById('sortable-questions'), {
            handle: '.sort-handle',
            animation: 150,
            onEnd: function(evt) {
                const items = Array.from(evt.to.children).map((el, index) => {
                    return {
                        id: el.dataset.id,
                        order: index + 1
                    };
                });
                
                // Send the new order to the server
                fetch('{{ route("admin.questions.reorder") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ order: items })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Update the displayed order numbers
                        items.forEach((item, index) => {
                            const row = document.querySelector(`tr[data-id="${item.id}"]`);
                            if (row) {
                                row.querySelector('.sort-handle').textContent = index + 1;
                            }
                        });
                    }
                })
                .catch(error => console.error('Error:', error));
            }
        });

        // Create Question Button
        document.getElementById('createQuestionBtn').addEventListener('click', function() {
            window.location.href = '{{ route("admin.assessments.questions.create", $assessment) }}';
        });
    });
</script>
@endsection