jQuery(document).ready(function ($) {
    $('.league-select2').each(function () {
        const $select = $(this);
        const $hidden = $select.closest('label').find('.league-value-hidden');

        // 1. Parse dữ liệu từ JS (mảng object)
        const leagues = (FOOTBALL_sclassID || []).map(item => ({
            id: item.sclassID.toString(),   // ID phải là chuỗi để Select2 hoạt động ổn định
            text: item.Name_VN || item.NameEN || 'Không rõ tên'
        }));

        // 2. Parse giá trị đã chọn từ hidden (nếu có)
        let selected = [];
        try {
            selected = JSON.parse($hidden.val()) || [];
        } catch (e) {
            selected = [];
        }

        // 3. Tạo sẵn các option tương ứng với giá trị đã chọn (nếu chưa có trong data)
        selected.forEach(val => {
            if (!$select.find('option[value="' + val + '"]').length) {
                const found = leagues.find(l => l.id === val);
                const label = found ? found.text : 'Giải #' + val;
                $select.append(new Option(label, val, true, true));
            }
        });

        // 4. Khởi tạo Select2 với tất cả dữ liệu
        $select.select2({
            data: leagues,
            placeholder: 'Chọn giải đấu',
            allowClear: true
        });

        // 5. Đặt giá trị ban đầu
        $select.val(selected).trigger('change');

        // 6. Đồng bộ với hidden input khi người dùng thay đổi
        $select.on('change', function () {
            const val = $(this).val() || [];
            $hidden.val(JSON.stringify(val)).trigger('change');
        });
    });
});
