@extends('admin.layouts.app')

@section('page-title', $page_title)

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.questions.index') }}">Questions</a></li>
    <li class="breadcrumb-item active">Sort</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="card-title mb-0">Sort Questions</h5>
        <p class="text-muted mb-0">Drag and drop to reorder questions</p>
    </div>
    <div class="card-body">
        <div class="sortable-list" id="sortable-questions">
            @foreach($questions as $question)
            <div class="sortable-item" data-id="{{ $question->id }}">
                <div class="d-flex align-items-center p-3 border rounded mb-2 bg-light">
                    <div class="drag-handle me-3">
                        <i class="fas fa-grip-vertical text-muted"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-1">{{ Str::limit($question->question_text, 100) }}</h6>
                                <small class="text-muted">
                                    <span class="badge bg-primary me-2">{{ $question->bank->title ?? 'No Bank' }}</span>
                                    <span class="badge bg-info me-2">{{ $question->question_type_label }}</span>
                                    <span class="badge bg-{{ $question->difficulty === 'easy' ? 'success' : ($question->difficulty === 'medium' ? 'warning' : 'danger') }}">
                                        {{ $question->difficulty_label }}
                                    </span>
                                </small>
                            </div>
                            <div class="text-end">
                                <small class="text-muted">Order: {{ $question->sort_order }}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        @if($questions->count() === 0)
        <div class="text-center py-4">
            <div class="text-muted">
                <i class="fas fa-question-circle fa-3x mb-3"></i>
                <h5>No questions found</h5>
                <p>Create some questions first to sort them.</p>
                <a href="{{ route('admin.questions.create') }}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Add Question
                </a>
            </div>
        </div>
        @endif
    </div>
    
    @if($questions->count() > 0)
    <div class="card-footer">
        <div class="d-flex justify-content-between">
            <a href="{{ route('admin.questions.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Questions
            </a>
            <button type="button" class="btn btn-primary" id="save-sort-order">
                <i class="fas fa-save"></i> Save Sort Order
            </button>
        </div>
    </div>
    @endif
</div>
@endsection

@push('styles')
<style>
.sortable-list {
    min-height: 100px;
}

.sortable-item {
    cursor: move;
    transition: all 0.3s ease;
}

.sortable-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.sortable-item.ui-sortable-helper {
    transform: rotate(5deg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize sortable
    $("#sortable-questions").sortable({
        handle: '.drag-handle',
        placeholder: 'sortable-placeholder',
        update: function(event, ui) {
            // Update order numbers visually
            updateOrderNumbers();
        }
    });

    // Update order numbers
    function updateOrderNumbers() {
        $('#sortable-questions .sortable-item').each(function(index) {
            $(this).find('.text-muted small:last').text(`Order: ${index + 1}`);
        });
    }

    // Save sort order
    $('#save-sort-order').click(function() {
        const order = [];
        $('#sortable-questions .sortable-item').each(function() {
            order.push($(this).data('id'));
        });

        $.ajax({
            url: '{{ route("admin.questions.sort.update") }}',
            method: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                order: order
            },
            beforeSend: function() {
                $('#save-sort-order').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Saving...');
            },
            success: function(response) {
                if (response.success) {
                    alert('Sort order updated successfully!');
                    location.reload();
                } else {
                    alert(response.message || 'Failed to update sort order');
                }
            },
            error: function() {
                alert('Failed to update sort order');
            },
            complete: function() {
                $('#save-sort-order').prop('disabled', false).html('<i class="fas fa-save"></i> Save Sort Order');
            }
        });
    });
});
</script>
@endpush