@extends('layouts.app')

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

@section('head')
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- SweetAlert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
@endsection

@section('content')
<div class="mx-auto my-10 px-5">
    <h1 class="text-center font-semibold text-4xl text-blue-700 drop-shadow italic">🗃️ Quản lý Learning Object</h1>

    <div class="flex justify-center my-6">
        <button class="shadow-lg border border-gray-50 hover:bg-blue-100 transition transform hover:scale-105 px-4 py-3 rounded-xl font-semibold text-gray-700 bg-white btn-add-folder">
        📁 Thêm danh mục
        </button>
    </div>

    <!-- Search -->
    <div class="flex justify-end my-6 relative">

        <!-- Input -->
        <input type="search" id="search-input"
            placeholder="Tìm folder hoặc Learning Object..."
            class="border border-gray-50 p-3 w-96 focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-md placeholder-gray-400 text-sm rounded-xl" />

        <!-- Dropdown search results -->
        <div id="search-results"
            class="absolute bg-white border border-gray-200 rounded-xl shadow-2xl mt-16 w-96 hidden z-50 overflow-y-auto max-h-64">
        </div>

    </div>

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

        <!-- Panel trái: thư mục gốc -->
        <div id="panel-left" class="w-64 border-r border-gray-200 p-4 bg-gray-50">
            <h2 class="font-bold text-xl mb-4 text-gray-700">Thư mục gốc</h2>
            <ul id="root-folders" class="space-y-2">
                @foreach($root as $folder)
                <li class="root-item cursor-pointer px-3 py-2 rounded-lg hover:bg-blue-100 text-blue-600 font-medium transition"
                    data-id="{{ $folder->id }}"
                    data-name="{{ $folder->name }}">
                    📁 {{ $folder->name }}
                </li>
                @endforeach
            </ul>
        </div>

        <!-- Panel phải -->
        <div class="flex-1 p-6 space-y-6">

            <!-- Breadcrumb -->
            <div id="breadcrumb-bar"
                class="flex items-start justify-between bg-gray-100 p-4 rounded-lg shadow-inner gap-2">

                <!-- Breadcrumb trái -->
                <div id="breadcrumb-path"
                    class="flex flex-wrap items-center text-lg font-semibold text-gray-700 gap-1 flex-1 min-w-0">
                </div>

                <!-- Action phải -->
                <div id="breadcrumb-actions"
                    class="flex items-center gap-2 shrink-0">
                </div>

            </div>

            <!-- Danh sách thư mục con -->
            <div id="folder-content" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-2"></div>

        </div>
    </div>

    <!-- Modal : Thêm danh mục -->
    <div id="add-folder-modal" 
        class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50">

        <!-- Modal Content -->
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-7 relative 
                    animate-[fadeIn_.25s_ease-out]">

            <h2 class="text-2xl font-bold mb-6 text-gray-700 flex items-center gap-2">
                📁 Thêm danh mục
            </h2>

            <form id="add-folder-form">
                @csrf

                <div class="mb-5">
                    <input type="text" id="folder-name" name="name"
                        class="w-full border border-gray-300 rounded-xl px-4 py-3
                                focus:outline-none focus:ring-2 focus:ring-blue-500
                                shadow-sm"
                        placeholder="Nhập tên danh mục..."
                        required>
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-add-folder"
                            class="px-4 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 
                                transition font-semibold">
                        Hủy
                    </button>

                    <button 
                            class="px-4 py-2 rounded-xl bg-green-500 text-white 
                                hover:bg-green-600 shadow-md transition font-semibold" id="btn-submit-add-folder">
                        💾 Lưu
                    </button>
                </div>
            </form>

            <!-- Close button -->
            <button id="close-modal"
                    class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 
                        text-2xl leading-none">
                &times;
            </button>
        </div>
    </div>

    <!-- Modal : Cập nhật danh mục -->
    <div id="update-folder-modal" 
        class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50">

        <!-- Modal Content -->
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-7 relative 
                    animate-[fadeIn_.25s_ease-out]">

            <h2 class="text-2xl font-bold mb-6 text-gray-700 flex items-center gap-2">
                📁 Chỉnh sửa danh mục
            </h2>

            <form id="update-folder-form">
                @csrf

                <div class="mb-5">
                    <input type="text" id="update-folder-name" name="name"
                        class="w-full border border-gray-300 rounded-xl px-4 py-3
                                focus:outline-none focus:ring-2 focus:ring-blue-500
                                shadow-sm"
                        placeholder="Nhập tên danh mục..."
                        required>
                </div>

                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancel-update-folder"
                            class="px-4 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 
                                transition font-semibold">
                        Hủy
                    </button>

                    <button
                            class="px-4 py-2 rounded-xl !bg-green-500 !text-white 
                                hover:!bg-green-600 shadow-md transition font-semibold" id="btn-submit-update-folder">
                        💾 Lưu
                    </button>
                </div>
            </form>

            <!-- Close button -->
            <button id="close-modal"
                    class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 
                        text-2xl leading-none">
                &times;
            </button>
        </div>
    </div>

    <!-- Modal: Thêm Learning Object -->
    <div id="add-learning-object-modal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50 p-4">

        <!-- Modal content -->
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col animate-[fadeIn_.25s_ease-out]">

            <!-- Header -->
            <div class="flex justify-between items-center p-6 border-b border-gray-200">
                <h2 class="text-2xl font-bold text-blue-600 flex items-center gap-2">
                    📝 Thêm Learning Object
                </h2>
                <button class="text-gray-400 hover:text-gray-600 text-2xl leading-none cancel-add-lo">&times;</button>
            </div>

            <!-- Body (scrollable) -->
            <div class="flex-1 overflow-y-auto p-6 space-y-6">
                <form id="addLearningObjectForm" class="space-y-6">
                    @csrf

                    <!-- Learning Object -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-4">Learning Object</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Tiêu đề <span class="text-red-500">*</span></label>
                                <input type="text" name="title" required
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="Nhập tiêu đề...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Mô tả</label>
                                <textarea name="description" rows="1"
                                        class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                        placeholder="Nhập mô tả..."></textarea>
                            </div>
                        </div>
                    </div>

                    <hr class="border-gray-200">

                    <!-- File Upload -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-2">File Upload</h3>
                        <div class="flex items-center gap-4 flex-wrap">
                            <label for="file-upload" class="cursor-pointer px-4 py-2 bg-blue-500 text-white rounded-xl hover:scale-105 transition-all duration-200 shadow-md">
                                Chọn file
                            </label>
                            <input type="file" name="file" id="file-upload" class="hidden">
                            <span id="file-upload-name" class="italic text-gray-500 break-words"></span>
                        </div>
                    </div>

                    <hr class="border-gray-200">

                    <!-- LOM Metadata -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-4">LOM Metadata</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Tiêu đề</label>
                                <input type="text" name="lom_title"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="Nhập tiêu đề LOM...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Mô tả</label>
                                <textarea name="lom_description" rows="1"
                                        class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                        placeholder="Mô tả chi tiết..."></textarea>
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Ngôn ngữ</label>
                                <input type="text" name="language" maxlength="10"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: vi, en">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Từ khóa</label>
                                <input type="text" name="keywords"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: toán học, vật lý...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Cấp độ học tập</label>
                                <input type="text" name="educational_level"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Đại học, THPT...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Loại học liệu</label>
                                <input type="text" name="learning_type"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Video, Bài giảng...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Kiểu tương tác</label>
                                <input type="text" name="interactivity_type"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Passive, Active...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Độ khó</label>
                                <input type="text" name="difficulty"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Dễ, Trung bình, Khó...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Ngữ cảnh</label>
                                <input type="text" name="context"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Lớp học, Trực tuyến...">
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Footer (sticky) -->
            <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-white sticky bottom-0 rounded-b">
                <button type="button"
                        class="px-5 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 transition font-semibold cancel-add-lo">
                    Hủy
                </button>
                <button id="btn-add-learning-object"
                        class="px-5 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 shadow-md transition font-semibold">
                    💾 Lưu
                </button>
            </div>
        </div>
    </div>

    <!-- Modal : Cập nhật Learning Object -->
    <div id="update-learning-object-modal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50 p-4">

        <!-- Modal content -->
        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col animate-[fadeIn_.25s_ease-out]">

            <!-- Header -->
            <div class="flex justify-between items-center p-6 border-b border-gray-200">
                <h2 class="text-2xl font-bold text-blue-600 flex items-center gap-2">
                    📝 Cập nhật Learning Object
                </h2>
                <button class="text-gray-400 hover:text-gray-600 text-2xl leading-none cancel-update-lo">&times;</button>
            </div>

            <!-- Body (scrollable) -->
            <div class="flex-1 overflow-y-auto p-6 space-y-6">
                <form id="updateLearningObjectForm" class="space-y-6">
                    @csrf
                    <!-- Learning Object -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-4">Learning Object</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Tiêu đề <span class="text-red-500">*</span></label>
                                <input id="update_lo_title" type="text" name="title" required
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="Nhập tiêu đề...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Mô tả</label>
                                <textarea id="update_lo_description" name="description" rows="2"
                                        class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                        placeholder="Nhập mô tả..."></textarea>
                            </div>

                            <div>
                                <label class="block font-medium mb-1 text-gray-700">File</label>
                                <div id="file_name" class="w-full bg-gray-100 px-4 py-2 rounded-xl text-gray-700">Không có file</div>
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Phiên bản</label>
                                <div id="version_number" class="w-full bg-gray-100 px-4 py-2 rounded-xl text-gray-700">1.0</div>
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Status</label>
                                <select id="update_status" name="status"
                                        class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm">
                                </select>
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Published at</label>
                                <div id="published_at" class="w-full bg-gray-100 px-4 py-2 rounded-xl text-gray-700">-</div>
                            </div>
                        </div>
                    </div>

                    <hr class="border-gray-200">

                    <!-- File Upload -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-2">Cập nhật File</h3>
                        <div class="flex items-center gap-4 flex-wrap">
                            <label for="file-update" class="cursor-pointer px-4 py-2 bg-blue-500 text-white rounded-xl hover:scale-105 transition-all duration-200 shadow-md">
                                Chọn file
                            </label>
                            <input type="file" name="file" id="file-update" class="hidden">
                            <p id="file-update-name" class="italic text-gray-500 break-words w-full md:w-auto"></p>
                        </div>
                    </div>

                    <hr class="border-gray-200">

                    <!-- LOM Metadata -->
                    <div>
                        <h3 class="text-lg font-semibold text-blue-600 mb-4">LOM Metadata</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Tiêu đề</label>
                                <input id="update_lom_title" type="text" name="lom_title"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="Nhập tiêu đề LOM...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Mô tả</label>
                                <textarea id="update_lom_description" name="lom_description" rows="2"
                                        class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                        placeholder="Mô tả chi tiết..."></textarea>
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Ngôn ngữ</label>
                                <input id="update_language" type="text" name="language" maxlength="10"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: vi, en">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Từ khóa</label>
                                <input id="update_keywords" type="text" name="keywords"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: toán học, vật lý...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Cấp độ học tập</label>
                                <input id="update_educational_level" type="text" name="educational_level"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Đại học, THPT...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Loại học liệu</label>
                                <input id="update_learning_type" type="text" name="learning_type"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Video, Bài giảng...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Kiểu tương tác</label>
                                <input id="update_interactivity_type" type="text" name="interactivity_type"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Passive, Active...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Độ khó</label>
                                <input id="update_difficulty" type="text" name="difficulty"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Dễ, Trung bình, Khó...">
                            </div>
                            <div>
                                <label class="block font-medium mb-1 text-gray-700">Ngữ cảnh</label>
                                <input id="update_context" type="text" name="context"
                                    class="w-full border border-gray-300 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
                                    placeholder="VD: Lớp học, Trực tuyến...">
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Footer (sticky bottom) -->
            <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-white sticky bottom-0 rounded-b">
                <button type="button"
                        class="px-5 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 transition font-semibold cancel-update-lo">
                    Hủy
                </button>
                <button id="btn-update-learning-object"
                        class="px-5 py-2 rounded-xl bg-blue-600 text-white hover:bg-blue-700 shadow-md transition font-semibold">
                    💾 Lưu
                </button>
            </div>
        </div>
    </div>

    <!-- Modal: Preview File -->
    <div id="preview-modal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50 p-4">

        <div class="bg-white rounded-2xl shadow-2xl max-w-4xl w-full max-h-[90vh] flex flex-col animate-[fadeIn_.25s_ease-out]">

            <!-- Header -->
            <div class="flex flex-col gap-2 p-6 border-b border-gray-200 sticky top-0 bg-white z-10 rounded-t-2xl">
                <div class="flex justify-between items-center">
                    <h2 class="text-2xl font-bold text-blue-600 flex items-center gap-2">
                        👁️‍🗨️ Xem trước file
                    </h2>
                    <button id="close-preview-modal" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
                </div>

                <div class="flex items-center gap-3 flex-wrap">
                    <span class="text-blue-500 server_url break-words"></span>
                    <button class="px-3 py-1 rounded-lg border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-200 copyServerUrlBtn">
                        📋 Copy
                    </button>
                </div>
            </div>

            <!-- Body -->
            <div id="previewContent" class="flex-1 overflow-auto p-6 flex items-center justify-center bg-gray-50 rounded-b-2xl">
                <!-- Nội dung preview sẽ render ở đây -->
                <!-- Image / Video / Audio / PDF / Download link -->
            </div>
        </div>
    </div>

    <!-- Modal: Revert Version Learning Object -->
    <div id="revert-learning-object-modal" class="fixed inset-0 bg-black/40 backdrop-blur-sm hidden items-center justify-center z-50 p-4">

        <div class="bg-white rounded-2xl shadow-2xl max-w-6xl w-full max-h-[90vh] flex flex-col animate-[fadeIn_.25s_ease-out]">

            <!-- Header -->
            <div class="flex flex-col gap-2 p-6 border-b border-gray-200 sticky top-0 bg-white z-10 rounded-t">
                <div class="flex justify-between items-center">
                    <h2 class="text-2xl font-bold text-pink-300 flex items-center gap-2">
                        ↺ Revert Version Learning Object
                    </h2>
                    <button class="text-gray-400 hover:text-gray-600 text-2xl leading-none btn-close-revert-lo-modal">&times;</button>
                </div>

                <p class="text-gray-600">Chọn một phiên bản trong danh sách bên dưới để hoàn nguyên. Hệ thống sẽ thay thế nội dung hiện tại bằng phiên bản được chọn.</p>

                <div class="flex items-center gap-3 flex-wrap">
                    <span class="text-blue-500 server_url break-words"></span>
                    <button class="px-3 py-1 rounded-lg border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white transition-all duration-200 copyServerUrlBtn">
                        📋 Copy
                    </button>
                </div>
            </div>

            <!-- Body -->
            <div class="flex-1 overflow-auto p-6">
                <div class="overflow-x-auto">
                    <table class="min-w-full border-collapse rounded-lg shadow-md overflow-hidden">
                        <thead class="bg-blue-50 sticky top-0">
                            <tr class="text-gray-700 text-center">
                                <th class="px-4 py-2 border-b text-sm">#</th>
                                <th class="px-4 py-2 border-b text-sm">Phiên bản</th>
                                <th class="px-4 py-2 border-b text-sm">Tên file</th>
                                <th class="px-4 py-2 border-b text-sm">Ghi chú thay đổi</th>
                                <th class="px-4 py-2 border-b text-sm">Trạng thái</th>
                                <th class="px-4 py-2 border-b text-sm">Người tạo</th>
                                <th class="px-4 py-2 border-b text-sm">Ngày tạo</th>
                                <th class="px-4 py-2 border-b text-sm">Ngày phát hành</th>
                                <th class="px-4 py-2 border-b text-sm">Hành động</th>
                            </tr>
                        </thead>
                        <tbody id="revertVersionTableBody" class="text-gray-700 text-center">
                            <!-- Rows render từ JS -->
                            @csrf
                        </tbody>
                    </table>
                </div>


                <!-- Pagination -->
                <div id="pagination-version-links" class="flex flex-wrap gap-2 justify-center mt-4"></div>
            </div>

            <!-- Footer -->
            <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-white sticky bottom-0 z-10 rounded-b">
                <button type="button" class="px-5 py-2 rounded-xl bg-gray-200 hover:bg-gray-300 transition font-semibold btn-close-revert-lo-modal">
                    Đóng
                </button>
            </div>

        </div>
    </div>

</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);
        }
    }
</style>


<script>
    $(document).ready(function() {
        let breadcrumb = [];  // lưu stack breadcrumb

        // Valid files
        const validFileTypes = ['application/pdf','application/msword','image/jpeg','image/png'];
        // File Upload
        const fileUpload = document.getElementById('file-upload');
        const fileUploadName = document.getElementById('file-upload-name');
        // File Update
        const fileUpdate = document.getElementById('file-update');
        const fileUpdateName = document.getElementById('file-update-name');

        // Mảng chưa các folders đã tồn tại , dành cho update
        let existingFolders = [];

        // Kiểm tra file cho upload
        fileUpload.addEventListener('change', function() {
            checkValidFile(fileUpload,fileUploadName);
        });

        // Kiểm tra file cho update
        fileUpdate.addEventListener('change', function() {
            checkValidFile(fileUpdate,fileUpdateName);
        });

        // Kiểm tra file hợp lệ
        function checkValidFile(file,fileName){

            if(file.files.length > 0) {
                const currentFile = file.files[0];

                // if(!validFileTypes.includes(currentFile.type)){
                //     Swal.fire({
                //         icon: "warning",
                //         title: "Thất bại",
                //         text: `File không hợp lệ , vui lòng chọn file khác`,
                //         showConfirmButton: false,
                //     })
                //     file.value = '';
                //     fileName.textContent = '';
                //     return;
                // }

                fileName.textContent = `Đã chọn: ${currentFile.name}`;
            }
        }

        // Render breadcrumb ra giao diện
        function renderBreadcrumb() {
            let html = "";

            if(!breadcrumb.length){
                $("#breadcrumb-path").html(html);
                $("#breadcrumb-actions").html(html);
                return;
            }

            breadcrumb.forEach((item, index) => {
                html += `
                    <span class="bcrumb-item cursor-pointer text-blue-600 font-medium hover:text-blue-800 hover:underline transition font-serif bg-white px-3 py-1 rounded-lg shadow-sm border border-gray-50"
                        data-index="${index}" data-id="${item.id}">
                        ${item.name}
                    </span>
                    ${index < breadcrumb.length - 1 ? '<span class="text-gray-500 mx-1">›</span>' : ''}
                `;
            });

            const lastF = breadcrumb[breadcrumb.length - 1];

            // Render breadcrumb path
            $("#breadcrumb-path").html(html);

            // Render buttons separately
            const actionsHtml = `
                <div class="relative">
                    <button id="btn-add-dropdown" class="flex items-center gap-1 px-3 py-2 shadow-md bg-blue-50 border border-gray-200 hover:bg-blue-100 hover:scale-105 transition-all rounded-xl">
                        十
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>

                    <div id="dropdown-menu"
                        class="absolute right-0 mt-2 bg-white border border-gray-200 rounded-lg shadow-lg hidden flex flex-col z-50">
                        <button class="px-4 py-2 text-gray-700 hover:bg-blue-50 hover:text-blue-700 transition btn-add-lo" 
                            data-folder-id="${lastF.id}" data-folder-name="${lastF.name}">
                            📄
                        </button>
                        <hr>
                        <button class="px-4 py-2 text-gray-700 hover:bg-green-50 hover:text-green-700 transition btn-add-folder" 
                            data-id="${lastF.id}">
                            📁
                        </button>
                    </div>
                </div>

                <button class="px-3 py-2 shadow-md bg-yellow-50 border border-gray-200 hover:bg-yellow-100 hover:scale-105 transition-all rounded-xl btn-update-folder"
                    data-id="${lastF.id}" data-name="${lastF.name}">
                    ✏️
                </button>

                <button class="px-3 py-2 shadow-md bg-red-50 border border-gray-200 hover:bg-red-100 hover:scale-105 transition-all rounded-xl btn-delete-folder"
                    data-id="${lastF.id}">
                    🗑️
                </button>
            `;

            $("#breadcrumb-actions").html(actionsHtml);

            // Dropdown
            $("#btn-add-dropdown").click(function (e) {
                e.stopPropagation();
                $("#dropdown-menu").toggleClass("hidden");
            });

            $(document).click(() => $("#dropdown-menu").addClass("hidden"));
        }

        // Load children vào panel phải
        function loadChildren(id) {

            $("#folder-content").html("Đang tải...");

            $.get(`/folders/${id}/children`, function (data) {
                const folders = data.folders || [];
                const learningObjects = data.learning_objects || [];

                if (folders.length === 0 && learningObjects.length === 0) {
                    $("#folder-content").html('<p class="text-gray-400 italic p-2 empty-message">📭 Thư mục trống</p>');
                    return;
                }

                let html = "";

                // Folders
                folders.forEach(f => {
                    html += `
                        <div class="p-5 border border-gray-200 rounded-xl shadow-md cursor-pointer folder-item
                                    hover:bg-blue-50 hover:shadow-lg hover:scale-[1.02] transition-all duration-200
                                    text-blue-600 font-medium flex items-center justify-center"
                            title="Danh mục ${f.name}"
                            data-id="${f.id}"
                            data-name="${f.name}">
                            📁 ${f.name}
                        </div>
                    `;
                });

                // Learning Objects (with hover-reveal buttons)
                learningObjects.forEach(lo => {
                    html += `
                        <div class="p-4 border border-gray-200 rounded-xl shadow-md lo-item bg-white group
                                    hover:bg-gray-50 hover:shadow-lg hover:scale-[1.02]
                                    transition-all duration-200"
                            title="Learning object ${lo.title}"
                            data-id="${lo.id}">
                            
                            <div class="font-semibold text-green-700 mb-3 cursor-pointer lo-title flex justify-center gap-2 font-mono">
                                📄 ${lo.title}
                            </div>

                            <!-- Buttons hidden until hover -->
                            <div class="flex flex-wrap justify-center gap-3 mt-3 opacity-0 translate-y-2 
                                        group-hover:opacity-100 group-hover:translate-y-0 
                                        transition-all duration-300 ease-out
                                        pointer-events-none group-hover:pointer-events-auto">

                                <button
                                    class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                    hover:scale-110 hover:shadow-md transition-all bg-blue-50 btn-preview-lo"
                                    data-id="${lo.id}" title="Preview">👁️‍🗨️</button>

                                <button
                                    class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                    hover:scale-110 hover:shadow-md transition-all bg-yellow-50 btn-edit-lo"
                                    data-id="${lo.id}" title="Edit">✎</button>

                                <button
                                    class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                    hover:scale-110 hover:shadow-md transition-all bg-purple-50 btn-revert-lo"
                                    data-id="${lo.id}" title="Revert">↺</button>

                                <button
                                    class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                    hover:scale-110 hover:shadow-md transition-all bg-green-50 btn-download-lo"
                                    data-id="${lo.id}" title="Download">📥</button>

                            </div>
                        </div>
                    `;
                });

                $("#folder-content").html(html);
            });
        }

        // Load Learning Object vào panel phải
        function loadLearningObject(id) {
            $("#folder-content").html("Đang tải...");

            $.get(`/learning-object/${id}`, function (data) {
                const learningObject = data || null;


                if (!learningObject) {
                    return $("#folder-content").html('<p class="text-gray-400 italic p-2 empty-message">📭 Không tìm thấy tài liệu</p>');
                }
                

                let html = "";


                // Learning Object
                html += `
                    <div class="p-4 border border-gray-200 rounded-xl shadow-md lo-item bg-white group
                                hover:bg-gray-50 hover:shadow-lg hover:scale-[1.02]
                                transition-all duration-200"
                        title="Learning object ${learningObject.title}"
                        data-id="${learningObject.id}">
                        
                        <div class="font-semibold text-green-700 mb-3 cursor-pointer lo-title flex justify-center gap-2 font-mono">
                            📄 ${learningObject.title}
                        </div>

                        <!-- Buttons hidden until hover -->
                        <div class="flex flex-wrap justify-center gap-3 mt-3 opacity-0 translate-y-2 
                                    group-hover:opacity-100 group-hover:translate-y-0 
                                    transition-all duration-300 ease-out
                                    pointer-events-none group-hover:pointer-events-auto">

                            <button
                                class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                hover:scale-110 hover:shadow-md transition-all bg-blue-50 btn-preview-lo"
                                data-id="${learningObject.id}" title="Preview">👁️‍🗨️</button>

                            <button
                                class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                hover:scale-110 hover:shadow-md transition-all bg-yellow-50 btn-edit-lo"
                                data-id="${learningObject.id}" title="Edit">✎</button>

                            <button
                                class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                hover:scale-110 hover:shadow-md transition-all bg-purple-50 btn-revert-lo"
                                data-id="${learningObject.id}" title="Revert">↺</button>

                            <button
                                class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                hover:scale-110 hover:shadow-md transition-all bg-green-50 btn-download-lo"
                                data-id="${learningObject.id}" title="Download">📥</button>

                        </div>
                    </div>
                `;

                $("#folder-content").html(html);
            });
        }

        // Highlight active root
        function highlightActiveRoot() {
            // Xóa highlight cũ
            $(".root-item").removeClass('bg-blue-100');

            // Lấy folder root hiện tại từ breadcrumb
            if(breadcrumb.length > 0){
                const rootId = breadcrumb[0].id;
                $(`.root-item[data-id='${rootId}']`).addClass('bg-blue-100');
            }
        }

        // Khi nhấn folder gốc
        $(document).on('click', '.root-item', function() {
            const id   = $(this).data("id");
            const name = $(this).data("name");

            breadcrumb = [{ id, name }]; // reset breadcrumb
            renderBreadcrumb();
            loadChildren(id);

            highlightActiveRoot(); // thêm dòng này để highlight đúng root
        });

        // Khi nhấn folder con trong panel phải
        $(document).on('click', '.folder-item', function() {
            const id   = $(this).data("id");
            const name = $(this).data("name");

            breadcrumb.push({ id, name });
            renderBreadcrumb();
            loadChildren(id);
        });

        // Khi nhấn vào breadcrumb để quay lại
        $(document).on('click', '.bcrumb-item', function() {
            const index = $(this).data("index");
            const id    = $(this).data("id");

            // Người dùng click lại folder hiện tại thì ko cần render
            const lastF = breadcrumb[breadcrumb.length - 1];
            if(lastF.id === id) return;

            breadcrumb = breadcrumb.slice(0, index + 1);  // cắt phần sau
            renderBreadcrumb();
            loadChildren(id);
        });

        // Mở modal thêm folder
        $(document).on('click', '.btn-add-folder', function() {
            const id = $(this).data('id');
            $('#add-folder-form').data('id', id ? id : null);
            $('#add-folder-modal').removeClass('hidden').addClass('flex');
        });

        // Đóng modal thêm folder
        $('#cancel-add-folder, #close-modal').click(function() {
            $('#add-folder-modal').addClass('hidden').removeClass('flex');
            $('#add-folder-form')[0].reset();
        });

        // Đóng modal thêm folder
        $("#add-folder-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // Thêm folder
        $('#btn-submit-add-folder').click(function(e) {
            e.preventDefault();
            const id = $("#add-folder-form").data('id');

            Swal.fire({
                icon: "question",
                title: "Thêm folder",
                text: 'Bạn có chắc chắn muốn thêm folder?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    let formData = new FormData($('#add-folder-form')[0]);

                    if(id) formData.append('parent_id', id);

                    $.ajax({
                        url: "{{ route('folders.store') }}",
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            $('#add-folder-form')[0].reset();  // reset tất cả input
                            $('#add-folder-modal').addClass('hidden').removeClass('flex');
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Thêm danh mục thành công!",
                                showConfirmButton: false,
                            });

                            const folder = response.data;

                            if(!folder.parent_id) {
                                // Nếu chưa chọn folder nào, append vào root-folders
                                $("#root-folders").append(`
                                    <li class="root-item cursor-pointer px-3 py-2 rounded-lg hover:bg-blue-100 text-blue-600 font-medium transition"
                                        data-id="${folder.id}" data-name="${folder.name}">
                                        📁 ${folder.name}
                                    </li>`
                                );
                            }
                            else if (breadcrumb.length > 0) {
                                // Nếu đang mở folder con, append vào folder-content

                                // Xoá "Thư mục trống" nếu có
                                $("#folder-content .empty-message").remove();

                                $("#folder-content").prepend(`
                                    <div class="p-5 border border-gray-200 rounded-xl shadow-md cursor-pointer folder-item
                                                hover:bg-blue-50 hover:shadow-lg hover:scale-[1.02] transition-all duration-200
                                                text-blue-600 font-medium flex items-center justify-center"
                                        title="Danh mục ${folder.name}"
                                        data-id="${folder.id}"
                                        data-name="${folder.name}">
                                        📁 ${folder.name}
                                    </div>`
                                );
                            }
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });
        });

        // Mở modal cập nhật folder
        $(document).on('click','.btn-update-folder',function() {
            const id = $(this).data('id');
            const name = $(this).data('name');
            $('#update-folder-name').val(name);
            $('#update-folder-form').data('id', id);
            $('#update-folder-modal').removeClass('hidden').addClass('flex');
        });

        // Đóng modal cập nhật folder
        $('#cancel-update-folder, #close-modal').click(function() {
            $('#update-folder-modal').addClass('hidden').removeClass('flex');
            $('#update-folder-form')[0].reset();
        });

        // Đóng modal update folder
        $("#update-folder-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // Cập nhật folder
        $('#btn-submit-update-folder').click(function(e) {
            e.preventDefault();

            const id = $('#update-folder-form').data('id');

            Swal.fire({
                icon: "question",
                title: "Cập nhật danh mục",
                text: 'Bạn có chắc chắn muốn cập nhật danh mục?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    let formData = new FormData($('#update-folder-form')[0]);

                    // Tạo url update
                    let updateUrl = "{{ route('folders.update', ['id' => ':id']) }}";
                    updateUrl = updateUrl.replace(':id', id);

                    $.ajax({
                        url: updateUrl,
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            $('#update-folder-modal').addClass('hidden').removeClass('flex');
                            // Reset form
                            $('#update-folder-form')[0].reset();

                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Cập nhật danh mục thành công!",
                                showConfirmButton: false,
                                timer: 1500
                            });

                            const folder = response.data;
                            // Cập nhật DOM
                            // Root folder
                            const rootEl = $(`#root-folders .root-item[data-id='${folder.id}']`);
                            if (rootEl.length) {
                                rootEl.data('name', folder.name);
                                rootEl.text(`📁 ${folder.name}`);
                            }

                            // Folder con trong folder-content
                            const contentEl = $(`#folder-content .folder-item[data-id='${folder.id}']`);
                            if (contentEl.length) {
                                contentEl.data('name', folder.name);
                                contentEl.html(`📁 ${folder.name}`);
                            }

                            // Cập nhật breadcrumb array nếu folder đang trong breadcrumb
                            breadcrumb = breadcrumb.map(item => {
                                if (item.id === folder.id) item.name = folder.name;
                                return item;
                            });

                            // Render lại breadcrumb
                            renderBreadcrumb();
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });
        });

        // Xóa folder
        $(document).on('click','.btn-delete-folder',function() {
            const id = $(this).data('id');

            Swal.fire({
                icon: "warning",
                title: "Xóa danh mục",
                text: 'Bạn có chắc chắn muốn xóa danh mục?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    let deleteUrl = "{{ route('folders.destroy', ['id' => ':id']) }}";
                    deleteUrl = deleteUrl.replace(':id', id);
                    $.ajax({
                        url: deleteUrl,
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: function(response) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Xóa danh mục thành công!",
                                showConfirmButton: false,
                                timer: 1500
                            });

                            // 1️⃣ Quay về folder cha
                            if (breadcrumb.length > 1) {
                                // Loại folder hiện tại
                                breadcrumb.pop();
                                const parentFolder = breadcrumb[breadcrumb.length - 1];
                                renderBreadcrumb();
                                loadChildren(parentFolder.id);
                            } else {
                                // Nếu đang ở root folder (không có folder cha), reload
                                location.reload();
                            }
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });
        });

        // -- Thêm Learning Object --

        // Mở modal thêm Learning Object
        $(document).on('click','.btn-add-lo',function() {
            $('#add-learning-object-modal').removeClass('hidden').addClass('flex');
        });

        // Đóng modal thêm Learning Object
        $(document).on('click','.cancel-add-lo',function() {
            $('#add-learning-object-modal').addClass('hidden').removeClass('flex');
        });

        // Đóng modal thêm Learning Object
        $("#add-learning-object-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // Thêm Learning Object
        $('#btn-add-learning-object').on('click', function(e) {
            e.preventDefault();

            const folderId = $('.btn-add-lo').data('folder-id');
            const folderName = $('.btn-add-lo').data('folder-name');

            // Chuyển thành mảng
            let folderObjects = [
                { id: folderId, name: folderName }
            ];

            // Nếu chưa chọn file
            if(fileUpload.files.length == 0) {
                return Swal.fire({
                    icon: "warning",
                    title: "Cảnh báo",
                    text: "Vui lòng chọn File cho Learning Object",
                    showConfirmButton: false,
                });
            }

            // Nếu chưa chọn folders
            if(folderObjects.length == 0) {
                return Swal.fire({
                    icon: "warning",
                    title: "Cảnh báo",
                    text: "Vui lý chọn thư mục cho Learning Object",
                    showConfirmButton: false,
                });
            }

            Swal.fire({
                icon: "question",
                title: "Thêm Learning Object",
                text: 'Bạn có chắc chắn muốn thêm learning object?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tạo FormData từ form (tự động lấy toàn bộ input, textarea, file,...)
                    let formData = new FormData($('#addLearningObjectForm')[0]);

                    // Thêm JSON folder vào FormData
                    formData.append('folders', JSON.stringify(folderObjects));

                    // Gửi lên server
                    $.ajax({
                        url: "{{ route('learning-object.store') }}",
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(res) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Thêm Learning Object thành công!",
                                showConfirmButton: false,
                                timer: 1500
                            });

                            const lo = res.data;

                            // Xoá dòng "Thư mục trống" nếu có
                            $("#folder-content .empty-message").remove();

                            // Append LO mới vào folder-content
                            $("#folder-content").append(`
                                <div class="p-4 border border-gray-200 rounded-xl shadow-md lo-item bg-white group
                                        hover:bg-gray-50 hover:shadow-lg hover:scale-[1.02]
                                        transition-all duration-200"
                                title="Learning object ${lo.title}"
                                data-id="${lo.id}">
                                
                                <div class="font-semibold text-green-700 mb-3 cursor-pointer lo-title flex justify-center gap-2">
                                    📄 ${lo.title}
                                </div>

                                <!-- Buttons hidden until hover -->
                                <div class="flex flex-wrap justify-center gap-3 mt-3 opacity-0 translate-y-2 
                                            group-hover:opacity-100 group-hover:translate-y-0 
                                            transition-all duration-300 ease-out
                                            pointer-events-none group-hover:pointer-events-auto">

                                    <button
                                        class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                        hover:scale-110 hover:shadow-md transition-all bg-blue-50 btn-preview-lo"
                                        data-id="${lo.id}" title="Preview">👁️‍🗨️</button>

                                    <button
                                        class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                        hover:scale-110 hover:shadow-md transition-all bg-yellow-50 btn-edit-lo"
                                        data-id="${lo.id}" title="Edit">✎</button>

                                    <button
                                        class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                        hover:scale-110 hover:shadow-md transition-all bg-purple-50 btn-revert-lo"
                                        data-id="${lo.id}" title="Revert">↺</button>

                                    <button
                                        class="p-1 h-10 w-10 shadow-sm border border-gray-200 rounded-xl 
                                        hover:scale-110 hover:shadow-md transition-all bg-green-50 btn-download-lo"
                                        data-id="${lo.id}" title="Download">📥</button>

                                </div>
                            </div>
                            `);

                            // Reset form
                            $('#add-learning-object-modal').addClass('hidden').removeClass('flex');
                            $('#addLearningObjectForm')[0].reset();
                            $('#file-upload-name').text('');
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });
        });

        // End --- Thêm Learning Object ---

        // --- Cập nhật Learning Object ---

        // Mở modal Cập nhật Learning Object
        $(document).on('click','.btn-edit-lo',function() {
            const id = $(this).data('id');

            // Reset file
            fileUpdate.value = '';
            fileUpdateName.textContent = '';

            $.ajax({
                url: `{{ route('learning-object.show','') }}/${id}`,
                method: 'GET',
                dataType: 'json',
                success: function (data) {

                    // Đổ dữ liệu vào modal
                    $('#update_lo_title').val(data.title || '');
                    $('#update_lo_description').text(data.description || '');

                    // console.log(data.latest_version);
                    

                    if(data.latest_version) {
                        $('#version_number').text(`v${data.latest_version.version_number}` || '');
                        $('#update_status').html(
                            `<option value="0" ${data.latest_version.status == 0 ? 'selected' : ''}>Bản thảo</option>
                            <option value="1" ${data.latest_version.status == 1 ? 'selected' : ''}>Phát hành</option>
                            <option value="2" ${data.latest_version.status == 2 ? 'selected' : ''}>Lưu trữ</option>`
                        );
                        const publishedAt = data.latest_version.published_at ? dayjs(data.latest_version.published_at).add(7,'hour').format('HH:mm DD/MM/YYYY') : 'Chưa phát hành';
                        $('#published_at').text(publishedAt);
                        $('#file_name').text(data.latest_version?.permanent_file_url?.file_name || '');
                        // $('#file-update-name').text(`File: ${data.latest_version.permanent_file_url.server_url}` || '');
                    }
                    
                    if (data.lom_metadata) {
                        $('#update_lom_title').val(data.lom_metadata.title || '');
                        $('#update_lom_description').text(data.lom_metadata.description || '');
                        $('#update_language').val(data.lom_metadata.language || '');
                        $('#update_keywords').val(data.lom_metadata.keywords || '');
                        $('#update_educational_level').val(data.lom_metadata.educational_level || '');
                        $('#update_learning_type').val(data.lom_metadata.learning_type || '');
                        $('#update_interactivity_type').val(data.lom_metadata.interactivity_type || '');
                        $('#update_difficulty').val(data.lom_metadata.difficulty || '');
                        $('#update_context').val(data.lom_metadata.context || '');
                    }

                    // Lưu id của l_o cần cập nhật vô form
                    $('#updateLearningObjectForm').data('id', id);
                    // Hiển thị modal
                    $('#update-learning-object-modal').removeClass('hidden').addClass('flex');
                },
                error: function (err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        });

        // Đóng modal Cập nhật Learning Object
        $(document).on('click','.cancel-update-lo',function() {
            $('#update-learning-object-modal').addClass('hidden').removeClass('flex');
            $('#updateLearningObjectForm')[0].reset();
        });

        // Đóng modal thêm Learning Object
        $("#update-learning-object-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // Cập nhật Learning Object
        $('#btn-update-learning-object').on('click', function(e) {
            e.preventDefault();

            const form = $('#updateLearningObjectForm');

            const id = form.data('id');

            const folderId = $('.btn-add-lo').data('folder-id');
            const folderName = $('.btn-add-lo').data('folder-name');

            // Chuyển thành mảng
            let folderObjects = [
                { id: folderId, name: folderName }
            ];

            // Nếu chưa chọn folders
            if(folderObjects.length == 0) {
                return Swal.fire({
                    icon: "warning",
                    title: "Cảnh báo",
                    text: "Vui lý chọn thư mục cho Learning Object",
                    showConfirmButton: false,
                });
            }

            Swal.fire({
                icon: "question",
                title: "Cập nhật Learning Object",
                text: 'Bạn có chắc chắn muốn cập nhật learning object này?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    // Tạo FormData từ form (tự động lý toàn bộ input, textarea, file,...)
                    let formData = new FormData(form[0]);

                    // Thêm JSON folders vào FormData
                    formData.append('folders', JSON.stringify(folderObjects));

                    // Tạo url update
                    let updateUrl = "{{ route('learning-object.update', ['id' => ':id']) }}";
                    updateUrl = updateUrl.replace(':id', id);

                    // Gửi lên server
                    $.ajax({
                        url: updateUrl,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(res) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Cập nhật Learning Object thành công!",
                                showConfirmButton: false,
                                timer: 1500
                            });

                            const lo = res.data;

                            // 1️⃣ Cập nhật LO trên folder-content
                            const loEl = $(`#folder-content .lo-item[data-id='${lo.id}']`);
                            
                            if(loEl.length) {
                                loEl.attr('title', `Learning object ${lo.title}`);
                                loEl.find('.lo-title').text(`📄 ${lo.title}`);
                                loEl.data('id', lo.id);
                            }

                            // 2️⃣ Reset form
                            $('#update-learning-object-modal').addClass('hidden').removeClass('flex');
                            form[0].reset();
                            $('#file-update-name').text('');
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });

            
        });

        // End --- Cập nhật Learning Object ---

        // --- Rever version ---

        // Mở modal xem danh sách phiên bản Learning Object
        $(document).on('click','.btn-revert-lo',function() {
            const id = $(this).data('id');
            loadVersions(id);
        });

        // Lấy danh sách versions
        function loadVersions(learning_object_id,page = 1){
            let url = "{{ route('learning-object.getLearningObjectVersions', ['id' => ':id']) }}"
            .replace(':id', learning_object_id);

            $.ajax({
                url: url + '?page=' + page,
                method: 'GET',
                dataType: 'json',
                success: function (res) {

                    if(res.data.length > 0){

                        // Đường link server_url duy nhất
                        $('.server_url').text(res.data[0].server_url);

                        // Bảng dữ liệu
                        $('#revertVersionTableBody').html(
                            res.data.map((version) => `
                                <tr class="hover:bg-blue-50 transition-colors">
                                    <td class="px-3 py-2 border-b">${version.id}</td>
                                    <td class="px-3 py-2 border-b">v${version.version_number}</td>
                                    <td class="px-3 py-2 border-b">${version.file_name}</td>
                                    <td class="px-3 py-2 border-b">${version.change_log ? version.change_log : '-'}</td>
                                    <td class="px-3 py-2 border-b">
                                        ${version.status == 0 ? '<span class="px-2 py-1 rounded-full bg-gray-300 text-gray-800 text-xs">Draft</span>' :
                                        version.status == 1 ? '<span class="px-2 py-1 rounded-full bg-green-500 text-white text-xs">Published</span>' :
                                        '<span class="px-2 py-1 rounded-full bg-blue-400 text-white text-xs">Archived</span>'}
                                    </td>
                                    <td class="px-3 py-2 border-b">${version.created_by}</td>
                                    <td class="px-3 py-2 border-b">${fomatTime(version.created_at)}</td>
                                    <td class="px-3 py-2 border-b">${version.published_at ? dayjs(version.published_at).add(7,'hour').format('HH:mm DD/MM/YYYY') : '-'}</td>
                                    <td class="px-3 py-2 border-b">
                                        ${version.latest_version_id !== version.id ? `<button class="px-3 py-1 rounded-lg bg-teal-500 hover:bg-teal-600 text-white text-sm transition btn-revert" data-learning-object-id="${version.learning_object_id}" data-version-id="${version.id}">↺</button>` : ''}
                                    </td>
                                </tr>
                            `).join('')
                        );

                        // Nếu có nhiều hơn 1 trang Pagination
                        if(res.total > 1){

                            let pagination = "";

                            // Prev button
                            if (res.current_page > 1) {
                                pagination += `
                                    <button class="px-3 py-1 rounded-lg border transition font-medium bg-blue-600 text-white border-blue-600 hover:bg-blue-700 page-btn"
                                            data-page="${res.current_page - 1}" data-loid="${learning_object_id}">
                                        <
                                    </button>
                                `;
                            }

                            // Number pages
                            for (let p = 1; p <= res.last_page; p++) {
                                if(p > res.current_page - 3 && p < res.current_page + 3){
                                    pagination += `<button class="px-3 py-1 rounded-lg border transition font-medium 
                                        ${p === res.current_page ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-blue-50'} 
                                        page-btn"
                                        data-page="${p}" data-loid="${learning_object_id}">
                                        ${p}
                                    </button>`;
                                }
                            }

                            // Next button
                            if (res.current_page < res.last_page) {
                                pagination += `
                                    <button class="px-3 py-1 rounded-lg border transition font-medium bg-blue-600 text-white border-blue-600 hover:bg-blue-700 page-btn"
                                            data-page="${res.current_page + 1}" data-loid="${learning_object_id}">
                                        >
                                    </button>
                                `;
                            }

                            $("#pagination-version-links").html(pagination);
                        }else{
                            $("#pagination-version-links").html('');
                        }

                    }else{
                        $('#revertVersionTableBody').html('<tr><td colspan="10" class="text-center">Không có dữ liệu</td></tr>');
                    }

                    // Hiển thị modal
                    $('#revert-learning-object-modal').removeClass('hidden').addClass('flex');
                },
                error: function (err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        }

        // Click với phân trang
        $(document).on('click', '#pagination-version-links .page-btn', function() {
            const page = $(this).data('page');
            const loId = $(this).data('loid');
            loadVersions(loId, page);
        });

        // Đóng modal revert version
        $('.btn-close-revert-lo-modal').click(function(){
            $('#revert-learning-object-modal').addClass('hidden').removeClass('flex');
        });

        // Đóng modal thêm Learning Object
        $("#revert-learning-object-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // Hàm format thời gian
        function fomatTime(datetime) {
            let date = new Date(datetime);

            let formatted = date.toLocaleString('vi-VN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
            });

            return formatted;
        }

        // Revert Learning Object
        $(document).on('click','.btn-revert',function() {
            const learningObjectId = $(this).data('learning-object-id');
            const versionId = $(this).data('version-id');

            // Tạo url revert
            let revertVersionUrl = "{{ route('learning-object.revertVersion', ['id' => ':id']) }}";
            revertVersionUrl = revertVersionUrl.replace(':id', learningObjectId);

            Swal.fire({
                icon: "question",
                title: "Revert version",
                text: 'Bạn có chắc chắn muốn revert phiên bản này?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    // Gửi lên server
                    $.ajax({
                        url: revertVersionUrl,
                        type: "POST",
                        data: {
                            version_id : versionId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(res) {
                            Swal.fire({
                                icon: "success",
                                title: "Thành công",
                                text: "Revert version Learning Object thành công!",
                                showConfirmButton: false,
                            }).then(() => {
                                $('#revert-learning-object-modal').removeClass('flex').addClass('hidden');
                            });
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            })
        })

        // End --- Rever version ---

        // --- Download Learning Object ---

        // Tải xuống Learning Object
        $(document).on('click','.btn-download-lo',function() {
            const id = $(this).data('id');

            Swal.fire({
                icon: "question",
                title: "Tải xuống",
                text: 'Bạn có chắc chắn không?',
                showCancelButton: true,
                confirmButtonText: "Xác nhận",
                confirmButtonColor: "#3085d6",
                cancelButtonText: "Hủy",
            }).then((result) => {
                if (result.isConfirmed) {
                    let checkUrl = "{{ route('learning-object.downloadFile', ['id' => ':id']) }}"
                    .replace(':id', id) + "?check=1";
                    
                    $.ajax({
                        url: checkUrl,
                        method: "GET",
                        success: function(res) {
                            if (res.ok) {
                                // OK → tải file thực sự
                                let downloadUrl = checkUrl.replace("?check=1", "");
                                window.location.href = downloadUrl;
                            }
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: err.responseJSON?.message ?? "Lỗi không xác định",
                                showConfirmButton: false,
                            });
                        }
                    });
                }
            })
        });

        // End --- Download Learning Object ---

        // --- Preview Learning Object ---

        // Mở modal preview Learning Object
        $(document).on('click','.btn-preview-lo',function() {
            const id = $(this).data('id');
            let previewUrl = "{{ route('learning-object.previewFile', ['id' => ':id']) }}";
            previewUrl = previewUrl.replace(':id', id);
            $.ajax({
                url: previewUrl,
                method: 'GET',
                success: function(response) {
                    if(response.status && response.data){
                        // Đường link server_url duy nhất
                        $('.server_url').text(response.data.server_url);
                        
                        // Render ra modal
                        renderPreview(response.data);
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Thất bại",
                            text: "Không lấy được file preview",
                            showConfirmButton: false,
                        });
                    }
                },
                error: function(err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        });

        // Lấy ra kiểu dữ liệu của file
        function getPreviewType(fileName, mimeType) {
            const ext = fileName.split('.').pop().toLowerCase();

            const imageExts = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp'];
            const videoExts = ['mp4', 'webm', 'ogg'];
            const audioExts = ['mp3', 'wav', 'ogg'];
            const pdfExts   = ['pdf'];

            if (imageExts.includes(ext) || mimeType.startsWith('image/')) return 'image';
            if (videoExts.includes(ext) || mimeType.startsWith('video/')) return 'video';
            if (audioExts.includes(ext) || mimeType.startsWith('audio/')) return 'audio';
            if (pdfExts.includes(ext) || mimeType === 'application/pdf') return 'pdf';

            return 'unknown';
        }

        // Hiển thị preview
        function renderPreview(file) {
            const type = getPreviewType(file.file_name, file.mime_type);
            const url = file.server_url;
            let html = '';

            switch(type) {
                case 'image':
                    html = `<img src="${url}" alt="${file.file_name}" class="max-w-full max-h-[70vh] rounded-lg shadow-md"/>`;
                    break;
                case 'video':
                    html = `<video src="${url}" controls class="max-w-full max-h-[70vh] rounded-lg shadow-md"></video>`;
                    break;
                case 'audio':
                    html = `<audio src="${url}" controls class="w-full rounded-lg"></audio>`;
                    break;
                case 'pdf':
                    html = `<iframe src="${url}" class="w-full h-[60vh] md:h-[70vh] rounded-lg shadow-md"></iframe>`;
                    break;
                default:
                    html = `<a href="${url}" download class="text-blue-600 hover:underline">Download ${file.file_name}</a>`;
            }

            $('#previewContent').html(html);
            // Show Tailwind modal
            $('#preview-modal').removeClass('hidden').addClass('flex');
        }

        // Close modal
        $('#close-preview-modal').click(function() {
            $('#preview-modal').addClass('hidden').removeClass('flex');
        });

        // Đóng modal thêm Learning Object
        $("#preview-modal").on("click", function(e) {
            if (e.target === this) {
                $(this).addClass("hidden").removeClass("flex");
            }
        });

        // End --- Preview Learning Object ---

        // Copy link server_url
        $('.copyServerUrlBtn').click(function() {

            const text = $(this).closest('div').find('.server_url').text().trim();

            if(!text){
                return Swal.fire({
                    icon: "error",
                    title: "Thất bại",
                    text: "Không có dữ liệu",
                    showConfirmButton: false,
                });
            }

            navigator.clipboard.writeText(text).then(() => {
                Swal.fire({
                    icon: "success",
                    title: "Thành công",
                    text: "Copy link server_url thành công",
                    position: 'top-end',
                    toast: true,
                    showConfirmButton: false,
                })
            })
        })

        let searchTimeout = null;

        // Tìm kiếm folder và lo , hiện dropdown menu
        $('#search-input').on('input', function() {
            const keyword = $(this).val().trim();

            clearTimeout(searchTimeout);

            if(keyword.length === 0) {
                $('#search-results').hide();
                return;
            }

            // Debounce 300ms
            searchTimeout = setTimeout(() => {
                $.get('/api/folders/search', { q: keyword }, function(response) {
                    const results = response.data;

                    if(results.length === 0){
                        $('#search-results').html('<p class="p-2 text-gray-500">Không tìm thấy</p>').show();
                        return;
                    }

                    let html = '';
                    results.forEach(r => {
                        if(r.type === 'folder'){
                            html += `<div class="p-2 cursor-pointer hover:bg-blue-100 search-item" 
                                data-type="${r.type}" data-path='${JSON.stringify(r.path)}' data-id="${r.id}">
                                📁 ${r.name}
                            </div>`;
                        } else {
                            html += `<div class="p-2 cursor-pointer hover:bg-yellow-100 search-item" 
                                data-type="${r.type}" data-path='${r.path ? JSON.stringify(r.path) : ''}' data-id="${r.id}" data-lo-title="${r.title}">
                                📄 ${r.title}
                            </div>`;
                        }
                    });

                    $('#search-results').html(html).show();
                });
            }, 300);
        });

        // Click chọn folder hoac lo
        $(document).on('click', '.search-item', function() {
            const type = $(this).data('type');
            const path = $(this).data('path'); // array breadcrumb
            const id = $(this).data('id');
            const loTitle = $(this).data('lo-title');

            // RESET NẾU L_O KO NẰM TRONG FOLDER NÀO
            breadcrumb = path ? path : [];
            renderBreadcrumb();

            // Highlight active root
            highlightActiveRoot();

            // Load folder-content của folder cuối cùng trong path
            const lastFolderId = path ? path[path.length - 1]?.id : null;
            
            lastFolderId ? loadChildren(lastFolderId) : loadLearningObject(id);

            $('#search-results').hide();
            $('#search-input').val('');

            if(type === 'lo'){
                // Highlight LO sau khi loadChildren xong
                setTimeout(() => {
                    const loEl = $(`#folder-content .lo-item[data-id='${id}']`);
                    if(loEl.length){
                        loEl.addClass('ring-2 ring-blue-300 animate-pulse');
                        setTimeout(() => loEl.removeClass('ring-2 ring-blue-300 animate-pulse'), 1000);
                        // Scroll tới
                        $('html, body').animate({scrollTop: loEl.offset().top - 100}, 300);
                    }
                }, 500); // delay loadChildren xong
            }
        });

    });
</script>

@endsection