@extends('admin.layouts.app')

@section('content')
{!! show_window_title('Sort Course Tutors') !!}

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Sort Course Tutors</h4>
                <p class="text-muted mb-0">Drag and drop to reorder course tutors</p>
            </div>
            <div class="card-body">
                <form id="sort-form" action="{{ route('admin.course-tutors.sort.update') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-12">
                            <div id="sortable-list" class="list-group">
                                @foreach($list_items as $item)
                                    <div class="list-group-item d-flex align-items-center justify-content-between sortable-item" 
                                         data-id="{{ $item->id }}" style="cursor: move; border: 1px solid #e9ecef; margin-bottom: 5px; border-radius: 8px;">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="drag-handle" style="cursor: grab;">
                                                <i class="mdi mdi-drag-vertical text-muted" style="font-size: 18px;"></i>
                                            </div>
                                            <div class="flex-shrink-0" style="width: 50px; height: 50px;">
                                                @if($item->course && $item->course->thumbnail_url)
                                                    <img src="{{ $item->course->thumbnail_url['thumb'] }}" class="img-thumbnail rounded"
                                                            style="width:50px;height:50px; object-fit: cover;" onerror="this.style.display='none';">
                                                @else
                                                    <div class="d-flex align-items-center justify-content-center bg-light border rounded" 
                                                         style="width:50px;height:50px;">
                                                        <i class="mdi mdi-book text-muted" style="font-size: 16px;"></i>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-1" style="font-size: 14px;">
                                                    {{ $item->course ? $item->course->title : 'Unknown Course' }}
                                                </h6>
                                                <small class="text-muted">
                                                    {{ $item->user ? $item->user->name : 'Unknown Tutor' }} 
                                                    - {{ $item->role_label }}
                                                </small>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge bg-primary" style="font-size: 10px;">
                                                Order: {{ $item->sort_order }}
                                            </span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between">
                                <a href="{{ route('admin.course-tutors.index') }}" class="btn btn-secondary">
                                    <i class="mdi mdi-arrow-left"></i> Back to List
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="mdi mdi-content-save"></i> Update Sort Order
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize sortable
    const sortableList = document.getElementById('sortable-list');
    
    if (sortableList) {
        // Simple drag and drop implementation
        let draggedElement = null;
        
        const items = sortableList.querySelectorAll('.sortable-item');
        
        items.forEach(item => {
            item.draggable = true;
            
            item.addEventListener('dragstart', function(e) {
                draggedElement = this;
                this.style.opacity = '0.5';
            });
            
            item.addEventListener('dragend', function(e) {
                this.style.opacity = '1';
                draggedElement = null;
            });
            
            item.addEventListener('dragover', function(e) {
                e.preventDefault();
            });
            
            item.addEventListener('drop', function(e) {
                e.preventDefault();
                if (draggedElement && draggedElement !== this) {
                    const parent = this.parentNode;
                    const nextSibling = this.nextSibling;
                    parent.insertBefore(draggedElement, nextSibling);
                }
            });
        });
        
        // Form submission
        document.getElementById('sort-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const order = [];
            const items = sortableList.querySelectorAll('.sortable-item');
            items.forEach((item, index) => {
                order.push({
                    id: item.dataset.id,
                    position: index + 1
                });
            });
            
            // Send AJAX request
            fetch(this.action, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ order: order.map(item => item.id) })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    showNotification('Sort order updated successfully', 'success');
                } else {
                    showNotification(data.message || 'Error updating sort order', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showNotification('Error updating sort order', 'error');
            });
        });
    }
});
</script>
@endsection