@extends('layouts-v2.app')

@section('title', 'Phân quyền Course cho Tenant')

@section('content')
<div class="bg-gray-50 text-gray-800 font-sans antialiased ">

    <div>
        <div class="mb-8 shadow-sm p-5 border border-gray-100 rounded-lg bg-white flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h1 class="text-2xl font-bold text-indigo-700">Phân quyền Course</h1>
                <p class="mt-1 text-sm text-gray-500">Quản lý quyền truy cập khóa học cho từng Tenant.</p>
            </div>
        </div>

        <div class="mb-6 bg-white p-5 rounded-lg shadow-sm border border-gray-100">
            <label for="tenant-select" class="block text-sm font-semibold text-gray-700 mb-2">
                Chọn Tenant:
            </label>
            <div class="relative max-w-xl">
                <select id="tenant-select" 
                    class="peer appearance-none block w-full rounded-md border-0 py-2.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6 shadow-sm cursor-pointer bg-white transition-shadow outline-none">
                    <option value="" disabled selected>-- Vui lòng chọn Tenant --</option>
                </select>

                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 transition-transform duration-300 ease-in-out peer-focus:rotate-180 peer-focus:text-indigo-600">
                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>

        <div id="course-wrapper" class="opacity-50 pointer-events-none transition-all duration-300 ease-in-out">
            
            <div class="bg-white p-5 rounded-lg shadow-sm border border-gray-100">
                <div class="flex flex-col sm:flex-row justify-between items-end sm:items-center mb-6 gap-4 border-b border-gray-100 pb-4">
                    
                    <div class="w-full sm:w-1/2 relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                            <svg class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                            </svg>
                        </div>
                        <input type="text" id="search-input" 
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
                            placeholder="Tìm kiếm theo tên hoặc mã khóa học...">
                    </div>

                    <div class="flex items-center gap-4">
                        <span class="text-xs font-medium bg-indigo-50 text-indigo-700 px-3 py-1.5 rounded-full border border-indigo-100" id="course-count-badge">Loading...</span>
                        
                        <div class="flex items-center bg-gray-50 px-3 py-2 rounded-md border border-gray-200">
                            <input id="select-all" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded cursor-pointer">
                            <label for="select-all" class="ml-2 block text-sm font-medium text-gray-700 cursor-pointer select-none">
                                Chọn tất cả
                            </label>
                        </div>
                    </div>
                </div>

                <div id="course-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 max-h-[600px] overflow-y-auto custom-scrollbar p-3">
                    <div class="col-span-full flex items-center justify-center py-10">
                        <div class="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin"></div>
                    </div>    
                </div>

                <div id="empty-search-state" class="hidden text-center py-8">
                    <svg class="mx-auto h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <p class="mt-2 text-sm text-gray-500">Không tìm thấy khóa học phù hợp.</p>
                </div>

                <div class="mt-6 flex justify-end pt-4 border-t border-gray-100">
                    <button type="button" id="btn-save" 
                        class="inline-flex justify-center rounded-md bg-indigo-600 px-6 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 transition-colors">
                        <svg class="w-5 h-5 mr-2 -ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        Lưu cấu hình
                    </button>
                </div>
            </div>
        </div>

    </div>

    <style>
        .custom-scrollbar::-webkit-scrollbar { width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    </style>

    <script>
        $(document).ready(function() {
            // ==========================================
            // CONFIGURATION & CONSTANTS
            // ==========================================
            const API = {
                TENANTS: "{{ route('hocmai-tenants.getHocmaiTenants') }}?only_icc_omo=true",
                COURSES: "{{ route('api-moodle.getApiMoodleWithTypeCourse') }}",
                RELATIONS: "{{ route('hocmai-tenant-course.getTenantCourseRelations') }}",
                STORE: "{{ route('hocmai-tenant-course.store') }}"
            };

            const CSRF_TOKEN = '{{ csrf_token() }}';

            // ==========================================
            // APP CONTROLLER
            // ==========================================
            const App = {
                // Data Store
                data: {
                    tenants: [],
                    courses: [],
                    relations: {}, // { tenant_id: [course_id, ...] }
                },
                
                // Cached DOM Elements
                el: {
                    selectTenant: $('#tenant-select'),
                    grid: $('#course-grid'),
                    searchInput: $('#search-input'),
                    countBadge: $('#course-count-badge'),
                    selectAll: $('#select-all'),
                    emptyState: $('#empty-search-state'),
                    btnSave: $('#btn-save'),
                    courseWrapper: $('#course-wrapper')
                },

                // Timers
                searchTimer: null,

                // --- 1. INITIALIZATION ---
                init: function() {
                    this.loadData();
                    this.bindEvents();
                },

                // --- 2. DATA FETCHING (PARALLEL) ---
                loadData: function() {
                    const self = this;
                    
                    // Hiển thị trạng thái loading ở dropdown
                    self.el.selectTenant.prop('disabled', true);

                    $.when(
                        $.ajax({ url: API.TENANTS, type: 'GET' }),
                        $.ajax({ url: API.COURSES, type: 'GET' }),
                        $.ajax({ url: API.RELATIONS, type: 'GET' })
                    ).done(function(tenantsRes, coursesRes, relationsRes) {
                        // Xử lý dữ liệu trả về (jQuery trả về mảng [data, status, xhr])
                        if (!tenantsRes[0].success || !coursesRes[0].success) {
                            return Swal.fire("Lỗi", "Không thể tải dữ liệu.", "error");
                        }

                        self.data.tenants = tenantsRes[0].data;
                        self.data.courses = coursesRes[0].data;
                        self.data.relations = relationsRes[0].data || {};

                        self.renderTenants();
                        self.renderCourses();
                        
                        // Mở khóa UI
                        self.el.selectTenant.prop('disabled', false);
                        

                    }).fail(function() {
                        Swal.fire("Lỗi", "Lỗi kết nối đến máy chủ.", "error");
                    });
                },

                // --- 3. RENDERING ---
                renderTenants: function() {
                    const options = this.data.tenants.map(t => `<option value="${t.id}">${t.name}</option>`);
                    // Giữ lại option đầu tiên (placeholder) và append options mới
                    this.el.selectTenant.find('option:not(:first)').remove();
                    this.el.selectTenant.append(options.join(''));
                },

                renderCourses: function() {
                    if (!this.data.courses.length) {
                        this.el.grid.html('<p class="col-span-full text-center text-gray-500">Không có dữ liệu.</p>');
                        return;
                    }

                    // Xây dựng chuỗi HTML lớn (nhanh hơn append từng dòng)
                    const html = this.data.courses.map(course => {
                        const searchIndex = (course.moodle_name + ' ' + course.code).toLowerCase();
                        return `
                            <div class="course-card group relative flex flex-col bg-white border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md hover:border-indigo-300 transition-all cursor-pointer" 
                                data-id="${course.id}"
                                data-search="${searchIndex}">
                                
                                <div class="flex items-start justify-between mb-3">
                                    <div class="flex-1 pr-2">
                                        <h3 class="text-base font-bold text-gray-900 leading-tight group-hover:text-indigo-600 transition-colors">
                                            ${course.moodle_name}
                                        </h3>
                                        <span class="inline-block mt-1 px-2 py-0.5 rounded text-xs font-mono bg-gray-100 text-gray-600 border border-gray-200">
                                            ${course.code}
                                        </span>
                                    </div>
                                    <div class="flex h-6 items-center z-10">
                                        <input id="course-${course.id}" name="course_ids[]" value="${course.id}" type="checkbox" 
                                            class="course-checkbox h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 cursor-pointer">
                                    </div>
                                </div>
                                
                                <div class="border-t border-gray-100 my-2"></div>

                                <div class="mt-auto space-y-1.5 text-xs text-gray-500">
                                    <div class="flex justify-between items-center">
                                        <span class="font-medium text-gray-400">Người tạo:</span>
                                        <span class="truncate max-w-[150px]" title="${course.creator}">${course.creator}</span>
                                    </div>
                                </div>
                                
                                <label for="course-${course.id}" class="absolute inset-0 cursor-pointer"></label>
                            </div>
                        `;
                    }).join('');

                    this.el.grid.html(html);
                    this.updateCount(this.data.courses.length);
                },

                // --- 4. LOGIC HANDLERS ---
                loadTenantPermissions: function(tenantId) {
                    // Reset form
                    this.el.searchInput.val('');
                    this.el.selectAll.prop('checked', false);
                    this.el.grid.find('.hidden').removeClass('hidden'); // Show all
                    
                    // Lấy danh sách ID course của tenant
                    const ownedIds = this.data.relations[tenantId] || [];
                    const ownedSet = new Set(ownedIds); // Dùng Set để tra cứu O(1)

                    const $checkboxes = this.el.grid.find('.course-checkbox');
                    
                    // Cập nhật DOM
                    $checkboxes.each(function() {
                        const isChecked = ownedSet.has(parseInt(this.value));
                        this.checked = isChecked;
                        // Gọi hàm style trực tiếp, không loop lại
                        App.styleCard(this, isChecked); 
                    });

                    this.updateCount(this.data.courses.length);
                    this.checkSelectAllStatus();
                },

                // Chỉ style 1 card cụ thể (Tối ưu performance)
                styleCard: function(checkboxEl, isChecked) {
                    const $card = $(checkboxEl).closest('.course-card');
                    if (isChecked) {
                        $card.addClass('ring-2 ring-indigo-500 border-transparent bg-indigo-50/50');
                    } else {
                        $card.removeClass('ring-2 ring-indigo-500 border-transparent bg-indigo-50/50');
                    }
                },

                performSearch: function(keyword) {
                    const term = keyword.toLowerCase().trim();
                    let visibleCount = 0;
                    
                    // Cache selector cards để loop
                    const $cards = this.el.grid.children('.course-card');

                    if (!term) {
                        $cards.removeClass('hidden');
                        visibleCount = $cards.length;
                    } else {
                        $cards.each(function() {
                            const $this = $(this);
                            // Lấy data-search trực tiếp
                            if ($this.data('search').indexOf(term) > -1) {
                                $this.removeClass('hidden');
                                visibleCount++;
                            } else {
                                $this.addClass('hidden');
                            }
                        });
                    }

                    this.updateCount(visibleCount);
                    this.el.emptyState.toggleClass('hidden', visibleCount > 0);
                    this.checkSelectAllStatus();
                },

                // --- 5. EVENTS ---
                bindEvents: function() {
                    const self = this;

                    // Tenant Change
                    this.el.selectTenant.on('change', function() {
                        self.el.courseWrapper.hasClass('opacity-50 pointer-events-none') && self.el.courseWrapper.removeClass('opacity-50 pointer-events-none');
                        self.loadTenantPermissions($(this).val());
                    });

                    // Checkbox Change (Delegation)
                    this.el.grid.on('change', '.course-checkbox', function() {
                        self.styleCard(this, this.checked);
                        self.checkSelectAllStatus();
                    });

                    // Select All
                    this.el.selectAll.on('change', function() {
                        const isChecked = this.checked;
                        // Chỉ chọn các card đang hiển thị (support search filter)
                        const $visibleCheckboxes = self.el.grid.find('.course-card:not(.hidden) .course-checkbox');
                        
                        $visibleCheckboxes.prop('checked', isChecked).each(function() {
                            self.styleCard(this, isChecked);
                        });
                    });

                    // Search (Debounce 300ms)
                    this.el.searchInput.on('keyup', function() {
                        clearTimeout(self.searchTimer);
                        const val = $(this).val();
                        self.searchTimer = setTimeout(() => self.performSearch(val), 300);
                    });

                    // Save
                    this.el.btnSave.on('click', function() {
                        self.saveData();
                    });
                },

                // --- 6. UTILS & SAVE ---
                checkSelectAllStatus: function() {
                    const $visible = this.el.grid.find('.course-card:not(.hidden)');
                    if ($visible.length === 0) {
                        this.el.selectAll.prop('checked', false);
                        return;
                    }
                    const checkedCount = $visible.find('.course-checkbox:checked').length;
                    this.el.selectAll.prop('checked', checkedCount === $visible.length);
                },

                updateCount: function(count) {
                    this.el.countBadge.text(`Tổng: ${count}`);
                },

                saveData: function() {
                    const tenantId = this.el.selectTenant.val();
                    if (!tenantId) return Swal.fire("Lỗi", "Vui lòng chọn Tenant", "warning");

                    // Lấy values
                    const courseIds = [];
                    // Sử dụng selector :checked của native JS/jQuery nhanh hơn loop
                    $('input[name="course_ids[]"]:checked').each(function() {
                        courseIds.push(parseInt(this.value));
                    });

                    const $btn = this.el.btnSave;
                    const originalText = $btn.html();

                    // UI Loading
                    $btn.prop('disabled', true).html('<svg class="animate-spin -ml-1 mr-2 h-5 w-5 text-white inline" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Đang lưu...');

                    $.ajax({
                        url: API.STORE,
                        method: 'POST',
                        data: {
                            tenant_id: tenantId,
                            courses: courseIds,
                            _token: CSRF_TOKEN
                        },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire("Thành công", res.message, "success");
                                // Update lại local data để đồng bộ
                                App.data.relations[tenantId] = courseIds;
                            } else {
                                Swal.fire("Thất bại", res.message, "error");
                            }
                        },
                        error: function(err) {
                            Swal.fire("Lỗi", err.responseJSON?.message || "Lỗi hệ thống", "error");
                        },
                        complete: function() {
                            $btn.prop('disabled', false).html(originalText);
                        }
                    });
                }
            };

            // RUN APP
            App.init();
        });
    </script>
</div>
@endsection