@extends('layouts-v2.app')

@section('title', 'Quản Lý Learning Object')

@section('content')
<div class="font-sans text-slate-800">
    <div class="flex items-center justify-between mb-6 flex-wrap gap-4">
        <div class="flex items-center gap-3">
            <div class="p-2.5 bg-blue-50 text-blue-600 rounded-xl shadow-sm border border-blue-100">
                <i data-lucide="folder" class="w-6 h-6"></i>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">
                Quản lý Learning Object
            </h1>
        </div>

        <div class="flex items-center gap-3 w-full md:w-auto relative">
            <div class="relative w-full md:w-80" id="search-container">
                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                    <i data-lucide="search" id="search-icon-default" class="w-4 h-4 text-gray-400 transition-colors"></i>
                    <i data-lucide="loader-2" id="search-icon-loading" class="w-4 h-4 text-blue-500 animate-spin hidden"></i>
                </div>
                
                <input type="text" id="search-input" autocomplete="off"
                    placeholder="Tìm tài liệu hoặc danh mục..."
                    class="block w-full p-2.5 pl-10 pr-10 text-sm text-gray-900 border border-gray-200 rounded-xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500 focus:bg-white transition-colors shadow-sm outline-none" />
                
                <button type="button" id="search-clear-btn" class="absolute inset-y-0 right-0 flex items-center pr-3 hidden text-gray-400 hover:text-red-500 transition-colors">
                    <i data-lucide="x" class="w-4 h-4"></i>
                </button>
            </div>

            <button class="flex shrink-0 items-center gap-2 bg-blue-600 hover:bg-blue-700 transition-colors px-4 py-2.5 rounded-xl font-medium text-white shadow-sm btn-add-folder">
                <i data-lucide="plus" class="w-5 h-5"></i>
                Thêm danh mục
            </button>

            <button id="btn-open-update-desc-modal" class="hidden group flex items-center gap-2 bg-gradient-to-br from-indigo-600 to-purple-600 text-white px-4 py-2.5 rounded-xl font-medium shadow-lg hover:shadow-xl hover:from-indigo-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200">
                <i data-lucide="file-edit" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                Cập Nhật Mô Tả Hàng Loạt
            </button>

            <button id="btn-open-update-completion-modal" class="group flex items-center gap-2 bg-gradient-to-br from-emerald-500 to-teal-600 text-white px-4 py-2.5 rounded-xl font-medium shadow-lg hover:shadow-xl hover:from-emerald-600 hover:to-teal-700 transform hover:-translate-y-0.5 transition-all duration-200">
                <i data-lucide="check-circle" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
                Cấu Hình Hoàn Thành
            </button>

            <div id="floating-sync-btn-container" class="fixed bottom-6 right-6 z-40 hidden transition-all flex flex-col items-end gap-3">
                <button type="button" id="btn-deselect-all" class="bg-white text-gray-600 hover:bg-gray-50 border border-gray-200 font-medium py-2 px-4 rounded-full shadow-md flex items-center gap-2 text-sm transition-all">
                    <i data-lucide="x" class="w-4 h-4"></i>
                    Bỏ chọn tất cả
                </button>
                <button type="button" id="btn-open-multi-sync" class="bg-purple-600 hover:bg-purple-700 text-white font-semibold py-3 px-6 rounded-full shadow-lg flex items-center gap-2">
                    <i data-lucide="zap" class="w-5 h-5"></i>
                    Đồng bộ (<span id="selected-folder-count">0</span>) thư mục
                </button>
            </div>

            <div id="search-results" class="absolute top-full mt-2 right-0 md:left-0 bg-white border border-gray-100 rounded-xl shadow-lg w-full hidden z-50 overflow-y-auto max-h-[400px] custom-scrollbar">
            </div>
        </div>
    </div>

    <!-- Panel -->
    <div class="flex h-fit border border-gray-200 shadow-xl rounded-xl overflow-hidden bg-white">

        <div id="mobile-overlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden transition-opacity opacity-0"></div>
        
        <!-- Panel trái: thư mục gốc -->
        <div id="panel-left" class="absolute md:static inset-y-0 left-0 z-40 w-64 bg-white border-r border-gray-200 p-4 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out">
            <h2 class="font-semibold text-xs uppercase tracking-wider mb-4 text-gray-500 px-2">Thư mục gốc</h2>
            <ul id="root-folders" class="space-y-1 max-h-[calc(100vh-120px)] overflow-y-auto">
                @foreach($root as $folder)
                <li class="root-item group flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer text-gray-700 font-medium transition-colors"
                    data-id="{{ $folder->id }}"
                    data-name="{{ $folder->name }}">
                    <i data-lucide="folder" class="w-5 h-5 text-gray-400 group-hover:text-blue-500 transition-colors"></i>
                    <span class="max-w-40 truncate">{{ $folder->name }}</span>
                </li>
                @endforeach
            </ul>
        </div>

        <!-- Panel phải -->
        <div class="flex-1 p-4 md:p-6 space-y-4 w-full overflow-hidden bg-gray-50/30">
            <div id="breadcrumb-bar" class="flex items-center justify-between bg-white px-4 py-3 border border-gray-200 rounded-xl shadow-sm gap-2 hidden">
                <div class="flex items-center gap-2 flex-1 min-w-0">
                    <button id="open-sidebar" class="md:hidden p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-900 rounded-lg transition shrink-0">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    </button>
                    
                    <div id="breadcrumb-path" class="flex items-center flex-1 min-w-0"></div>
                </div>

                <div id="breadcrumb-actions" class="flex items-center shrink-0"></div>
            </div>

            <div id="folder-content" class="flex flex-col w-full h-[calc(100vh-220px)] overflow-y-auto pr-2 custom-scrollbar">
                <!-- Content wrapper -->
                <div class="wrapper-content col-span-full flex flex-col w-full bg-white rounded-xl border border-gray-200 shadow-sm hidden"></div>
                <!-- Infinite scroll trigger -->
                <div id="lazy-load-trigger" class="py-6 flex flex-col items-center justify-center gap-2 w-full">
                    <div class="infinite-scroll-request hidden">
                        <i data-lucide="loader-2" class="w-6 h-6 text-blue-500 animate-spin"></i>
                    </div>
                    <div class="infinite-scroll-last hidden text-gray-400 text-sm font-medium">
                        Hết dữ liệu
                    </div>
                    <div class="infinite-scroll-error hidden text-red-400 text-sm">
                        Lỗi tải thêm dữ liệu
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    @include('folders.modal.add-folder')
    @include('folders.modal.update-folder')
    @include('folders.modal.add-lo')
    @include('folders.modal.update-lo')
    @include('folders.modal.preview-lo')
    @include('folders.modal.revert-lo')
    @include('folders.modal.full-sync-s3')
    @include('folders.modal.sync-folder-to-section')
    @include('folders.modal.multi-sync-folder-to-section')
    @include('folders.modal.update-des')
    @include('folders.modal.update-completion')

</div>

<style>
    /* Shadow đẹp hơn */
    #search-input {
        transition: all 0.25s ease;
    }

    #search-input:focus {
        box-shadow: 0 4px 18px rgba(0, 132, 255, 0.25);
        border-color: #3b82f6;
        transform: translateY(-1px);
    }

    /* Search results panel */
    #search-results {
        animation: fadeSlide 0.18s ease-out;
        border-radius: 0.75rem;
    }

    /* Hover từng item trong dropdown */
    #search-results .search-item {
        transition: all 0.15s ease;
        padding: 0.6rem 0.75rem;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
    }

    #search-results .search-item:hover {
        background: #f0f7ff;
        padding-left: 1rem;
    }

    /* Last item không có border */
    #search-results .search-item:last-child {
        border-bottom: none;
    }

    /* Animation đẹp */
    @keyframes fadeSlide {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Custom Scrollbar cho folder-content */
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #e2e8f0;
        border-radius: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #cbd5e1;
    }
</style>

<script>
    window.routes = {
        createFolder: "{{ route('folders.store') }}",
        updateFolder: "{{ route('folders.update',['id' => 'ID']) }}",
        deleteFolder: "{{ route('folders.destroy',['id' => 'ID']) }}",
        searchFolder: "{{ route('folders.search') }}",
        createLo: "{{ route('learning-object.store') }}",
        showLo: "{{ route('learning-object.show',['id' => 'ID']) }}",
        updateLo: "{{ route('learning-object.update',['id' => 'ID']) }}",
        getLearningObjectVersions: "{{ route('learning-object.getLearningObjectVersions',['id' => 'ID']) }}",
        revertVersion: "{{ route('learning-object.revertVersion',['id' => 'ID']) }}",
        downloadFile: "{{ route('learning-object.downloadFile',['id' => 'ID']) }}",
        previewFile: "{{ route('learning-object.previewFile',['id' => 'ID']) }}",
        getChildrenFolder: "{{ route('folders.children',['id' => 'ID']) }}",
        createSectionsFromS3: "{{ route('learning-object.autoCreateSectionsFromS3') }}",
        generateSyncMappings: "{{ route('learning-object.generateSyncMappings') }}",
        bulkSyncFoldersToSections: "{{ route('learning-object.bulkSyncFoldersToSections') }}",
        syncFolderToNewSectionBulk: "{{ route('learning-object.syncFolderToNewSectionBulk') }}", // Map trực tiếp
        getChildFoldersForBulkSync: "{{ route('learning-object.getChildFoldersForBulkSync') }}",
        processBulkChildFolders: "{{ route('learning-object.processBulkChildFolders') }}", // Map theo con nằm bên trong
        syncToExistingSectionsBulk: "{{ route('learning-object.syncToExistingSectionsBulk') }}"
    }
</script>


<script src="{{ asset('js/learning-object/learning-object.js') }}"></script>

@endsection