@extends('layouts.app')

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

@section('head')
    <!-- Select2 -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></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="container py-5">

    <!-- Tiêu đề -->
    <h1 class="text-center mb-4 fw-bold text-primary">🗂️ Quản Lý Learning Object</h1>
    <!-- Các nút thao tác -->
    <div class="d-flex justify-content-center mb-5" style="gap: 10px;">
        <button class="btn btn-action" style="background-color: #00ce34ff;" id="btnAddLearningObject">
            <i class="bi bi-plus-circle me-2"></i> 💡 Thêm Learning Object
        </button>
    </div>

    <!-- Bảng hiển thị -->
    <div class="mt-10 w-75 mx-auto">
        <!-- Pagination Top -->
        <div class="d-flex justify-content-between align-items-center mb-3 small text-muted">
            <span>
                Hiển thị {{ $learning_objects->firstItem() ?? 0 }} - {{ $learning_objects->lastItem() ?? 0 }} 
                trong tổng số {{ $learning_objects->total() }} bản ghi ({{ $learning_objects->perPage() }} bản ghi/trang)
            </span>
            <div>{{ $learning_objects->links() }}</div>
        </div>

        <!-- Bảng dữ liệu -->
        <div class="bg-white overflow-hidden">
            <table class="text-left table">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-6 py-3 text-gray-600 font-semibold">#</th>
                        <th class="px-6 py-3 text-gray-600 font-semibold">Tiêu đề</th>
                        <th class="px-6 py-3 text-gray-600 font-semibold">Mô tả</th>
                        <th class="px-6 py-3 text-gray-600 font-semibold">Ngày tạo</th>
                        <th class="px-6 py-3 text-gray-600 font-semibold text-right">Hành động</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Dữ liệu ví dụ -->
                    @foreach($learning_objects as $learning_object)
                        <tr class="border-t hover:bg-gray-50">
                            <td class="px-6 py-3">{{ $learning_object->id }}</td>
                            <td class="px-6 py-3">{{ $learning_object->title }}</td>
                            <td class="px-6 py-3">{{ $learning_object->description }}</td>
                            <td class="px-6 py-3">{{ Carbon\Carbon::parse($learning_object->created_at)->addHours(7)->format('H:i d/m/Y') }}</td>
                            <td class="px-6 py-3 text-right">
                                <button class="btn btn-action btn-view-learning-object" data-id="{{ $learning_object->id }}" style="background-color: #008dceff;">
                                    <i class="bi bi-plus-circle me-2"></i> 👁️
                                </button>
                                <button class="btn btn-action btn-update-learning-object" data-id="{{ $learning_object->id }}" style="background-color: #00ce00ff;">
                                    <i class="bi bi-plus-circle me-2"></i> 🖋️
                                </button>
                                <button class="btn btn-action btn-revert-learning-object" data-id="{{ $learning_object->id }}" style="background-color: #cecb00ff;">
                                    <i class="bi bi-plus-circle me-2"></i> ↺
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Pagination Bottom -->
        <div class="d-flex justify-content-between align-items-center mt-3 small text-muted">
            <span>
                Hiển thị {{ $learning_objects->firstItem() ?? 0 }} - {{ $learning_objects->lastItem() ?? 0 }} 
                trong tổng số {{ $learning_objects->total() }} bản ghi ({{ $learning_objects->perPage() }} bản ghi/trang)
            </span>
            <div>{{ $learning_objects->links() }}</div>
        </div>
    </div>

    <!-- Modal: Chi tiết Learning Object -->
    <div class="modal fade" id="viewLearningObjectModal" tabindex="-1" aria-labelledby="viewLearningObjectLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-info text-white rounded-top-4">
                    <h5 class="modal-title fw-semibold" id="viewLearningObjectLabel">👁️ Chi tiết Learning Object</h5>
                </div>

                <div class="modal-body">
                    <!-- Phần thông tin Learning Object -->
                    <h6 class="fw-bold text-info mb-3">Learning Object</h6>
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Tiêu đề:</label>
                            <p id="view_lo_title" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Mô tả:</label>
                            <p id="view_lo_description" class="form-control bg-light" style="min-height: 70px;"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">ID phiên bản mới nhất:</label>
                            <p id="view_latest_version_id" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Phiên bản:</label>
                            <p id="view_version_number" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Status:</label>
                            <p id="view_status" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Published at:</label>
                            <p id="view_published_at" class="form-control bg-light"></p>
                        </div>
                    </div>

                    <hr>

                    <!-- Phần file -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-6 bg-white rounded">
                            <label class="form-label fw-semibold">File:</label>
                            <a id="view_file" style="overflow-wrap: break-word;" target="_blank"></a>
                        </div>
                    </div>

                    <hr>

                    <!-- Phần thông tin LOM Metadata -->
                    <h6 class="fw-bold text-info mb-3">LOM Metadata</h6>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Tiêu đề:</label>
                            <p id="view_lom_title" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Mô tả:</label>
                            <p id="view_lom_description" class="form-control bg-light" style="min-height: 70px;"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Ngôn ngữ:</label>
                            <p id="view_language" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-8">
                            <label class="form-label fw-semibold">Từ khóa:</label>
                            <p id="view_keywords" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Cấp độ học tập:</label>
                            <p id="view_educational_level" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Loại học liệu:</label>
                            <p id="view_learning_type" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Kiểu tương tác:</label>
                            <p id="view_interactivity_type" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Độ khó:</label>
                            <p id="view_difficulty" class="form-control bg-light"></p>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Ngữ cảnh:</label>
                            <p id="view_context" class="form-control bg-light"></p>
                        </div>
                    </div>

                    <!-- Phần chọn folder -->
                    <div class="mt-3">
                        <label class="form-label fw-semibold">Thư mục lưu trữ:</label>
                        <div id="view_folders" style="display: flex; gap: 5px">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: Thêm Learning Object -->
    <div class="modal fade" id="addLearningObjectModal" tabindex="-1" aria-labelledby="addLearningObjectLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white rounded-top-4">
                    <h5 class="modal-title fw-semibold" id="addLearningObjectLabel">📂 Thêm Learning Object</h5>
                </div>

                <form id="addLearningObjectForm">
                    @csrf
                    <div class="modal-body">
                        <!-- Phần Learning Object -->
                        <h6 class="fw-bold text-primary mb-3">Learning Object</h6>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Tiêu đề <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" placeholder="Nhập tiêu đề..." required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mô tả</label>
                                <textarea name="description" class="form-control" rows="2" placeholder="Nhập mô tả..."></textarea>
                            </div>
                        </div>

                        <hr>

                        <div class="row g-3 d-flex align-items-center">
                            <label for="file-upload" 
                                style="cursor:pointer; background-color: #0094ceff; padding: 10px; margin-left: 15px; color: white; border-radius: 5px;">
                                Chọn file
                            </label>
                            <input type="file" name="file" id="file-upload" class="hidden">

                            <!-- Vùng hiển thị thông tin file -->
                            <span id="file-upload-name" style="margin-left: 15px; font-style: italic;"></span>
                        </div>

                        <hr>

                        <!-- Phần LOM Metadata -->
                        <h6 class="fw-bold text-primary mb-3">LOM Metadata</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Tiêu đề</label>
                                <input type="text" name="lom_title" class="form-control" placeholder="Nhập tiêu đề LOM...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mô tả</label>
                                <textarea name="lom_description" class="form-control" rows="2" placeholder="Mô tả chi tiết..."></textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Ngôn ngữ</label>
                                <input type="text" name="language" maxlength="10" class="form-control" placeholder="VD: vi, en">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">Từ khóa</label>
                                <input type="text" name="keywords" class="form-control" placeholder="VD: toán học, vật lý...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Cấp độ học tập</label>
                                <input type="text" name="educational_level" class="form-control" placeholder="VD: Đại học, THPT...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Loại học liệu</label>
                                <input type="text" name="learning_type" class="form-control" placeholder="VD: Video, Bài giảng...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Kiểu tương tác</label>
                                <input type="text" name="interactivity_type" class="form-control" placeholder="VD: Passive, Active...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Độ khó</label>
                                <input type="text" name="difficulty" class="form-control" placeholder="VD: Dễ, Trung bình, Khó...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Ngữ cảnh</label>
                                <input type="text" name="context" class="form-control" placeholder="VD: Lớp học, Trực tuyến...">
                            </div>
                        </div>

                        <hr>

                        <!-- Phần chọn folder -->
                        <div class="mt-3">
                            <label class="form-label fw-semibold">Chọn thư mục lưu trữ</label>
                            <select name="folder_id[]" id="addLearningObjectFolderSelect" class="form-select" multiple>
                            </select>
                            <small class="text-muted">Bạn có thể gõ để tìm thư mục và chọn nhiều mục.</small>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy</button>
                        <button type="submit" class="btn btn-primary" id="btn-add-learning-object">💾</button>
                    </div>
                </form>
                
            </div>
        </div>
    </div>

    <!-- Modal: Cập nhật Learning Object -->
    <div class="modal fade" id="updateLearningObjectModal" tabindex="-1" aria-labelledby="updateLearningObjectLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-primary text-white rounded-top-4">
                    <h5 class="modal-title fw-semibold" id="addLearningObjectLabel">📝 Cập nhật Learning Object</h5>
                </div>

                <form id="updateLearningObjectForm">
                    @csrf
                    <div class="modal-body">
                        <!-- Phần Learning Object -->
                        <h6 class="fw-bold text-primary mb-3">Learning Object</h6>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Tiêu đề <span class="text-danger">*</span></label>
                                <input id="update_lo_title" type="text" name="title" class="form-control" placeholder="Nhập tiêu đề..." required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mô tả</label>
                                <textarea id="update_lo_description" name="description" class="form-control" rows="2" placeholder="Nhập mô tả..."></textarea>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">ID phiên bản mới nhất:</label>
                                <p id="latest_version_id" class="form-control bg-light"></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Phiên bản:</label>
                                <p id="version_number" class="form-control bg-light"></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Status:</label>
                                <br>
                                <select id="update_status" name="status" class="form-select" style="width: 100%;">
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Published at:</label>
                                <p id="published_at" class="form-control bg-light"></p>
                            </div>
                        </div>

                        <hr>
                        
                        <!-- Phần file -->
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="file-update" 
                                style="cursor:pointer; background-color: #0094ceff; padding: 10px; color: white; border-radius: 5px;">
                                    Chọn file
                                </label>
                                <input type="file" name="file" id="file-update" class="hidden">

                                <!-- Vùng hiển thị thông tin file -->
                                <p id="file-update-name" class="bg-white rounded font-style: italic" style="overflow-wrap: break-word;"></p>
                            </div>
                        </div>

                        <hr>

                        <!-- Phần LOM Metadata -->
                        <h6 class="fw-bold text-primary mb-3">LOM Metadata</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Tiêu đề</label>
                                <input id="update_lom_title" type="text" name="lom_title" class="form-control" placeholder="Nhập tiêu đề LOM...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Mô tả</label>
                                <textarea id="update_lom_description" name="lom_description" class="form-control" rows="2" placeholder="Mô tả chi tiết..."></textarea>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Ngôn ngữ</label>
                                <input id="update_language" type="text" name="language" maxlength="10" class="form-control" placeholder="VD: vi, en">
                            </div>
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">Từ khóa</label>
                                <input id="update_keywords" type="text" name="keywords" class="form-control" placeholder="VD: toán học, vật lý...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Cấp độ học tập</label>
                                <input id="update_educational_level" type="text" name="educational_level" class="form-control" placeholder="VD: Đại học, THPT...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Loại học liệu</label>
                                <input id="update_learning_type" type="text" name="learning_type" class="form-control" placeholder="VD: Video, Bài giảng...">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">Kiểu tương tác</label>
                                <input id="update_interactivity_type" type="text" name="interactivity_type" class="form-control" placeholder="VD: Passive, Active...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Độ khó</label>
                                <input id="update_difficulty" type="text" name="difficulty" class="form-control" placeholder="VD: Dễ, Trung bình, Khó...">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Ngữ cảnh</label>
                                <input id="update_context" type="text" name="context" class="form-control" placeholder="VD: Lớp học, Trực tuyến...">
                            </div>
                        </div>

                        <hr>

                        <!-- Phần chọn folder -->
                        <div class="mt-3">
                            <label class="form-label fw-semibold">Thư mục lưu trữ 
                            </label>
                            <div class="text-muted" style="font-size: 12px;">Bạn có thể gõ để tìm thư mục và chọn nhiều mục.</div>
                            
                            <select name="folder_id[]" id="updateLearningObjectFolderSelect" class="form-select" multiple>
                            </select>
                        </div>

                        <small class="text-muted">Danh sách thư mục:</small>
                        <div id="folders" style="display: flex; gap: 5px">
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Hủy</button>
                        <button type="submit" class="btn btn-primary" id="btn-update-learning-object">💾</button>
                    </div>
                </form>
                
            </div>
        </div>
    </div>

    <!-- Modal: Revert Version Learning Object -->
    <div class="modal fade" id="revertLearningObjectModal" tabindex="-1" aria-labelledby="revertLearningObjectModal" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg rounded-4">
                <div class="modal-header bg-warning text-dark rounded-top-4">
                    <h5 class="modal-title fw-semibold" id="revertVersionLabel">↺ Revert Verion Learning Object</h5>
                </div>

                <div class="p-3">
                    <span>URL : <span id="server_url" class="text-blue-500"></span></span>
                    <!-- Nút copy -->
                    <button id="copyServerUrlBtn" class="btn btn-sm btn-outline-primary">📋</button>
                </div>

                <div class="modal-body">
                    <p class="text-muted mb-3">
                    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="table-responsive">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr class="text-center">
                                    <th>#</th>
                                    <th>Phiên bản</th>
                                    <th>Ghi chú thay đổi</th>
                                    <th>Trạng thái</th>
                                    <th>Người tạo</th>
                                    <th>Ngày tạo</th>
                                    <th>Ngày phát hành</th>
                                    <th>Hành động</th>
                                </tr>
                            </thead>
                            <tbody id="revertVersionTableBody">
                                @csrf
                            </tbody>
                        </table>
                    </div>

                    <div id="pagination-version-links"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Đóng</button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    body {
        background-color: #f8f9fa;
    }

    h1 {
        font-size: 2rem;
        letter-spacing: 0.5px;
    }

    .btn-action {
        padding: 10px 15px;
        font-weight: 500;
        border-radius: 10px;
        transition: all 0.25s ease-in-out;
    }

    .btn-action:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .card {
        border-radius: 15px;
    }

    .table {
        border: 1px solid gray;
        table-layout: fixed;
        width: 100%;
    }

    .table thead th{
        border: 1px solid gray;
    }

    .table td {
        border: 1px solid gray;
    }

    .table th {
        font-weight: 600;
    }

    /* CSS cho modal Thêm Learning Object */
    .modal-body {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
    }
    .modal-content {
        border-radius: 15px;
    }
    .modal-header {
        border-bottom: none;
    }
    .modal-footer {
        border-top: none;
    }

    /* ==== SELECT2 – Style đẹp – Bo tròn – Màu xanh hiện đại ==== */

    /* Khung input */
    .select2-container--default .select2-selection--multiple,
    .select2-container--default .select2-selection--single {
        border: 1px solid #ced4da !important;
        border-radius: 10px !important;
        padding: 6px 10px;
        min-height: 45px;
        display: flex;
        align-items: center;
    }

    /* Khi focus */
    .select2-container--default.select2-container--focus .select2-selection--multiple,
    .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.2);
    }

    /* Placeholder */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #6c757d;
        font-style: italic;
    }

    /* Text trong select */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #212529;
        font-size: 15px;
        line-height: 34px !important;
        padding-left: 4px;
    }

    /* Mũi tên */
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 100%;
        right: 10px;
    }

    /* Tag chọn */
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #0d6efd !important;
        color: white !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 5px 17px !important;
        font-size: 14px;
        margin-top: 5px;
    }

    /* Nút x xoá tag */
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        color: rgb(255, 255, 255) !important;
        margin-right: 6px !important;
        border: none !important;
        top: -7px !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
        background-color: transparent !important;
    }

    /* Popup dropdown */
    .select2-dropdown {
        border-radius: 10px !important;
        border: 1px solid #ced4da;
    }

    /* Item trong dropdown */
    .select2-results__option {
        padding: 10px 12px;
        font-size: 15px;
    }

    /* Hover */
    .select2-results__option--highlighted {
        background-color: #0d6efd !important;
        color: white !important;
    }

    /* Selected item */
    .select2-results__option[aria-selected=true] {
        background-color: #e7f1ff !important;
        color: #0d6efd !important;
    }

</style>

<script>
    $(document).ready(function() {
        
        // 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}`;
            }
        }

        // Mở modal thêm
        $('#btnAddLearningObject').click(function() {
            $('#addLearningObjectModal').modal('show');
        });

        // Mở modal chi tiết
        $('.btn-view-learning-object').on('click', function () {
            const id = $(this).data('id');

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

                    // Đổ dữ liệu vào modal
                    $('#view_lo_title').text(data.title || '');
                    $('#view_lo_description').text(data.description || '');
                    $('#view_latest_version_id').text(data.latest_version_id || '');
                    

                    if(data.latest_version) {
                        $('#view_version_number').text(`v${data.latest_version.version_number}` || '');
                        $('#view_status').text(data.latest_version.status == 0 ? 'Bản thảo' : data.latest_version.status == 1 ? 'Phát hành' : 'Lưu trữ');
                        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';
                        $('#view_published_at').text(publishedAt);
                        $('#view_file').text(data.latest_version.permanent_file_url.server_url || '');
                        $('#view_file').attr('href', data.latest_version.permanent_file_url.server_url);
                    }
                    
                    if (data.lom_metadata) {
                        $('#view_lom_title').text(data.lom_metadata.title || '');
                        $('#view_lom_description').text(data.lom_metadata.description || '');
                        $('#view_language').text(data.lom_metadata.language || '');
                        $('#view_keywords').text(data.lom_metadata.keywords || '');
                        $('#view_educational_level').text(data.lom_metadata.educational_level || '');
                        $('#view_learning_type').text(data.lom_metadata.learning_type || '');
                        $('#view_interactivity_type').text(data.lom_metadata.interactivity_type || '');
                        $('#view_difficulty').text(data.lom_metadata.difficulty || '');
                        $('#view_context').text(data.lom_metadata.context || '');
                    }

                    if(data.folders){
                        $('#view_folders').text(data.folders.map(folder => folder.name).join(', ') || '').addClass('font-weight-bold');
                    }

                    // Hiển thị modal
                    $('#viewLearningObjectModal').modal('show');
                },
                error: function (err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        });

        // Mở modal cập nhật
        $('.btn-update-learning-object').click(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 || '');
                    $('#latest_version_id').text(data.latest_version_id || '');

                    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-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 || '');
                    }

                    if(data.folders){
                        $('#folders').html(
                            data.folders.map(folder =>
                                `<label>
                                    <input class="checkbox-folder" type="checkbox"
                                            value="${folder.id}" data-name="${folder.name}" checked>
                                    ${folder.name}
                                </label>`
                            ).join('')
                        );

                        // Lấy ra danh sách folder id mà l_o này nằm trong
                        existingFolders = data.folders.map(folder => (
                            {
                                id: folder.id,
                                name: folder.name
                            }
                        ));
                    }

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

        // Mở modal revert version
        $('.btn-revert-learning-object').click(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) {

                    console.log(res.data[0].server_url);
                    

                    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>
                                <td>${version.id}</td>
                                <td>v${version.version_number}</td>
                                <td>${version.change_log ? version.change_log : '-'}</td>
                                <td class="text-white">${version.status == 0 ? '<span class="badge bg-secondary">Draft</span>' : version.status == 1 ?
                                '<span class="badge bg-success">Published</span>' : '<span class="badge" style="background-color: #00a2ffff;">Archived</span>'}</td>
                                <td>${version.created_by}</td>
                                <td>${fomatTime(version.created_at)}</td>
                                <td>${version.published_at ? dayjs(version.published_at).add(7,'hour').format('HH:mm DD/MM/YYYY') : '-'}</td>
                                <td class="text-center">
                                    ${version.latest_version_id !== version.id ? `<button class="btn btn-sm btn-outline-primary btn-revert" style="background-color: #00c7ceff;" 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="btn btn-sm btn-outline-secondary 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="btn btn-sm ${p === res.current_page ? 'btn-primary' : 'page-btn btn-outline-secondary'}"
                                                data-page="${p}" data-loid="${learning_object_id}">
                                            ${p}
                                        </button>
                                    `;
                                }
                            }

                            // Next button
                            if (res.current_page < res.last_page) {
                                pagination += `
                                    <button class="btn btn-sm btn-outline-secondary 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
                    $('#revertLearningObjectModal').modal('show');
                },
                error: function (err) {
                    Swal.fire({
                        icon: "error",
                        title: "Thất bại",
                        text: `${err.responseJSON.message}`,
                        showConfirmButton: false,
                    })
                }
            });
        }

        // Copy link server_url
        $('#copyServerUrlBtn').click(function() {
            const text = $('#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,
                })
            })
        })

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

        // Lấy danh sách thư mục cho modal thêm
        $('#addLearningObjectFolderSelect').select2({
            placeholder: "-- Chọn thư mục --",
            width: '100%',
            allowClear: true,
            ajax: {
                url: "{{ route('folders.search') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term // từ khóa người dùng nhập
                    };
                },
                processResults: function (data) {
                    return {
                        results: data.map(function (item) {
                            return {
                                id: item.id,
                                text: item.name
                            };
                        })
                    };
                },
                cache: true
            },
            language: {
                inputTooShort: function() {
                    return "Nhập ít nhất 1 ký tự để tìm...";
                },
                searching: function() {
                    return "Đang tìm...";
                },
                noResults: function() {
                    return "Không tìm thấy thư mục phù hợp";
                }
            }
        });

        // Lấy danh sách thư mục cho modal cập nhật
        $('#updateLearningObjectFolderSelect').select2({
            placeholder: "-- Chọn thư mục --",
            width: '100%',
            allowClear: true,
            ajax: {
                url: "{{ route('folders.search') }}",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        q: params.term // từ khóa người dùng nhập
                    };
                },
                processResults: function (data) {
                    // Lọc ra các folder mà l_o chưa nằm trong
                    let filtered = data.filter(item => !existingFolders.map(folder => folder.id).includes(item.id));
                    return {
                        results: filtered.map(item => ({
                            id: item.id,
                            text: item.name
                        }))
                    }
                },
                cache: true
            },
            language: {
                inputTooShort: function() {
                    return "Nhập ít nhất 1 ký tự để tìm...";
                },
                searching: function() {
                    return "Đang tìm...";
                },
                noResults: function() {
                    return "Không tìm thấy thư mục phù hợp";
                }
            }
        });

        // Lấy ra danh sách các checkbox sau khi người dùng thay đổi
        $(document).on('change','.checkbox-folder', function(e) {
            const id = parseInt($(this).val());
            const name = $(this).data('name');

            if(!existingFolders.map(folder => folder.id).includes(id)) {
                existingFolders.push({id, name});
            }else{
                existingFolders = existingFolders.filter(folder => folder.id !== id);
            }
        })

        // Thêm các thư mục mới , khi người dùng chọn thêm -> Dành cho update
        $('#updateLearningObjectFolderSelect').on('select2:select', function(e) {
            const added = e.params.data;
            const newFolder = { id: parseInt(added.id), name: added.text };

            if(!existingFolders.some(item => item.id === newFolder.id)) {
                existingFolders.push(newFolder);
            }
        })

        // Xóa các thư mục, khi người dùng chọn xóa -> Dành cho update
        $('#updateLearningObjectFolderSelect').on('select2:unselect', function(e) {
            const removed = e.params.data;
            const removedId = parseInt(removed.id);

            existingFolders = existingFolders.filter(item => item.id !== removedId);
        })

        // Thêm Learning Object
        $('#addLearningObjectForm').on('submit', function(e) {
            e.preventDefault();

            // Lấy dữ liệu Select2 (dạng {id, text})
            let folders = $('#addLearningObjectFolderSelect').select2('data');

            // Chuyển thành object {id, name}
            let folderObjects = folders.map(f => ({
                id: f.id,
                name: f.text
            }));

            // 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(this);

                    // 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,
                            }).then(() => {
                                location.reload();
                            });
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });

            
        });

        // Cập nhật Learning Object
        $('#updateLearningObjectForm').on('submit', function(e) {
            e.preventDefault();

            const id = $(this).data('id');

            
            // Nếu chưa chọn folders
            // if(existingFolders.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(this);

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

                    // 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,
                            }).then(() => {
                                location.reload();
                            });
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            });

            
        });

        // 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(() => {
                                location.reload();
                            });
                        },
                        error: function(err) {
                            Swal.fire({
                                icon: "error",
                                title: "Thất bại",
                                text: `${err.responseJSON.message}`,
                                showConfirmButton: false,
                            })
                        }
                    });
                }
            })
        })

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

    });
</script>

@endsection