@extends('admin.layouts.app')

@section('content')
<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">{{ $page_title }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('admin/dashboard') }}" class="trogon-link">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ url('admin/question-banks') }}" class="trogon-link">Question Banks</a>
                    </li>
                    <li class="breadcrumb-item active">Sort</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Sort Card -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Drag and Drop to Sort Question Banks</h4>
            </div>
            <div class="card-body">
                <div class="sortable-list" id="sortable-question-banks">
                    @foreach($question_banks as $bank)
                    <div class="sortable-item" data-id="{{ $bank->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 class="flex-grow-1">
                                    <h6 class="mb-1">{{ $bank->title }}</h6>
                                    @if($bank->course)
                                        <small class="text-muted">{{ $bank->course->title }}</small>
                                    @endif
                                    @if($bank->unit)
                                        <small class="text-info"> - {{ $bank->unit->title }}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="text-muted">
                                <small>Order: {{ $bank->sort_order }}</small>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                @if($question_banks->count() == 0)
                <div class="text-center py-4">
                    <i class="mdi mdi-help-circle-outline text-muted" style="font-size: 48px;"></i>
                    <h5 class="text-muted mt-2">No Question Banks Found</h5>
                    <p class="text-muted">Create some question banks first to sort them.</p>
                    <a href="{{ url('admin/question-banks/create') }}" class="btn btn-primary">
                        <i class="mdi mdi-plus"></i> Create Question Bank
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
@if($question_banks->count() > 0)
<div class="row">
    <div class="col-12">
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-primary" id="save-sort-order">
                <i class="mdi mdi-content-save"></i> Save Sort Order
            </button>
            <a href="{{ url('admin/question-banks') }}" class="btn btn-secondary">
                <i class="mdi mdi-arrow-left"></i> Back to List
            </a>
        </div>
    </div>
</div>
@endif

<script>
document.addEventListener('DOMContentLoaded', function() {
    const sortableList = document.getElementById('sortable-question-banks');
    const saveButton = document.getElementById('save-sort-order');
    
    if (sortableList && saveButton) {
        // Initialize sortable
        new Sortable(sortableList, {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            dragClass: 'sortable-drag'
        });

        // Save sort order
        saveButton.addEventListener('click', function() {
            const order = Array.from(sortableList.children).map((item, index) => ({
                id: item.dataset.id,
                sort_order: index + 1
            }));

            fetch('{{ url("admin/question-banks/sort") }}', {
                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') {
                    // Show success message
                    const alert = document.createElement('div');
                    alert.className = 'alert alert-success alert-dismissible fade show';
                    alert.innerHTML = `
                        <i class="mdi mdi-check-circle"></i> ${data.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    `;
                    document.querySelector('.card-body').insertBefore(alert, sortableList);
                    
                    // Auto-hide after 3 seconds
                    setTimeout(() => {
                        alert.remove();
                    }, 3000);
                } else {
                    throw new Error(data.message || 'Failed to save sort order');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                const alert = document.createElement('div');
                alert.className = 'alert alert-danger alert-dismissible fade show';
                alert.innerHTML = `
                    <i class="mdi mdi-alert-circle"></i> ${error.message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                `;
                document.querySelector('.card-body').insertBefore(alert, sortableList);
            });
        });
    }
});
</script>

<style>
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: #f8f9fa;
}

.sortable-drag {
    transform: rotate(5deg);
}

.drag-handle {
    cursor: grab;
}

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