@extends('admin.layouts.app')

@section('content')
{!! show_window_title($page_title) !!}

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Sort Course Features</h4>
                <p class="text-muted mb-0">Drag and drop to reorder course features. Lower numbers appear first.</p>
            </div>
            <div class="card-body">
                <div class="sortable-list" id="sortable-course-features">
                    @foreach($courseFeatures as $feature)
                    <div class="sortable-item" data-id="{{ $feature->id }}">
                        <div class="d-flex align-items-center justify-content-between p-3 border rounded mb-2 bg-light">
                            <div class="d-flex align-items-center">
                                <div class="drag-handle me-3">
                                    <i class="mdi mdi-drag-vertical text-muted"></i>
                                </div>
                                <div>
                                    <h6 class="mb-1">{{ $feature->title }}</h6>
                                    <small class="text-muted">{{ $feature->course->title }}</small>
                                </div>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-primary">Order: {{ $feature->sort_order }}</span>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                <div class="mt-4">
                    <button type="button" class="btn btn-primary" id="save-sort-order">
                        <i class="mdi mdi-content-save"></i> Save Sort Order
                    </button>
                    <a href="{{ route('admin.course-features.index') }}" class="btn btn-secondary">
                        <i class="mdi mdi-arrow-left"></i> Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize sortable
    const sortableList = document.getElementById('sortable-course-features');
    
    if (sortableList) {
        // Simple drag and drop implementation
        let draggedElement = null;
        
        sortableList.addEventListener('dragstart', function(e) {
            draggedElement = e.target.closest('.sortable-item');
            e.target.style.opacity = '0.5';
        });
        
        sortableList.addEventListener('dragend', function(e) {
            e.target.style.opacity = '';
            draggedElement = null;
        });
        
        sortableList.addEventListener('dragover', function(e) {
            e.preventDefault();
            const afterElement = getDragAfterElement(sortableList, e.clientY);
            if (afterElement == null) {
                sortableList.appendChild(draggedElement);
            } else {
                sortableList.insertBefore(draggedElement, afterElement);
            }
        });
        
        // Save sort order
        document.getElementById('save-sort-order').addEventListener('click', function() {
            const items = Array.from(sortableList.children);
            const order = items.map((item, index) => ({
                id: item.dataset.id,
                position: index + 1
            }));
            
            fetch('{{ route("admin.course-features.sort.update") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ order: order })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showAlert('success', data.message);
                } else {
                    showAlert('error', data.message);
                }
            })
            .catch(error => {
                showAlert('error', 'An error occurred while saving sort order');
            });
        });
    }
    
    function getDragAfterElement(container, y) {
        const draggableElements = [...container.querySelectorAll('.sortable-item:not(.dragging)')];
        
        return draggableElements.reduce((closest, child) => {
            const box = child.getBoundingClientRect();
            const offset = y - box.top - box.height / 2;
            
            if (offset < 0 && offset > closest.offset) {
                return { offset: offset, element: child };
            } else {
                return closest;
            }
        }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
});
</script>
@endsection