<?php
$assets_root_tab1 = plugin_dir_url(__FILE__);

$locale = get_locale();        // Ví dụ 'en_US'
$lang_code = substr($locale, 0, 2);  // Lấy 2 ký tự đầu tiên: 'en';

if (!in_array($lang_code, ['en', 'th', 'id'])) {
    $lang_code = 'vn';
}


?>

<div id="sport-plugin-tab7"
     class="sport-plugin-tab-panel <?php echo isset($_GET['tab']) && $_GET['tab'] === 'sport-plugin-tab7' ? 'active' : ''; ?>">
    <div>


         <div style="margin: 10px 0;">Gọi hàm để lọc giải đấu theo quốc gia: <span>window.handleFilterLeaguesByCountry(<strong>${ID của quốc gia}</strong>)</span></div>
        <input type="text" id="searchInput2" placeholder="<?php _e('Tìm kiếm theo tên quốc gia...', 'sport'); ?>"
               style="margin-bottom: 10px; padding: 6px; width: 100%; max-width: 300px;">
        <table id="teamsTable2" class="wp-list-table widefat striped">
            <thead>
            <tr>
                <th>ID</th>
                <th><?php _e('Tên quốc gia', 'sport'); ?></th>
                <th>ID</th>
                <th><?php _e('Tên quốc gia', 'sport'); ?></th>
                <th>ID</th>
                <th><?php _e('Tên quốc gia', 'sport'); ?></th>
                <th>ID</th>
                <th><?php _e('Tên quốc gia', 'sport'); ?></th>
            </tr>
            </thead>
            <tbody>
            <!-- Data will be inserted here -->
            </tbody>
        </table>
    </div>
</div>
<script defer>
    document.addEventListener('DOMContentLoaded', function () {

        //if (typeof FOOTBALL_COUNTRY === 'undefined') return;

        const tableBody = document.querySelector('#teamsTable2 tbody');
        const searchInput = document.getElementById('searchInput2');
        const itemsPerPage = 200;
        let currentPage = 1;

        var allData = [];

        // Fetch dữ liệu từ file JSON (cùng thư mục với tệp PHP)
        const jsonUrl = '<?php echo BONGDAKO_PLUGIN_DIR_URL . "/assets/json/leagues.json"; ?>';

        // Fetch dữ liệu từ file JSON (sử dụng đường dẫn đúng trong WordPress)
        fetch(jsonUrl)
            .then(response => response.json())  // Chuyển đổi JSON thành đối tượng JavaScript
            .then(data => {
                allData = Object.values(data.country);
                filteredData = [...allData];  // Copy dữ liệu để xử lý
                console.log(331, allData);
                
                // Tiến hành sắp xếp dữ liệu
                allData.sort((a, b) => {
                     const nameA = a.InfoID;
                    const nameB = b.InfoID;
                    if (nameA < nameB) return -1;
                    if (nameA > nameB) return 1;
                    return 0;
                });

                // Render dữ liệu khi JSON được tải xong
                updateView();
            })
            .catch(error => {
                console.error('Lỗi khi lấy tệp JSON:', error);
            });
        // // const allData = FOOTBALL_sclassID.slice(); // copy mảng để không làm thay đổi gốc

        // const jsonArray = Object.values(FOOTBALL_COUNTRY);
        // const allData = jsonArray.slice().map(item => {
        //     return {
        //         ...item
        //     };
        // });
     
        // allData.sort((a, b) => {
        //     const nameA = a.InfoID;
        //     const nameB = b.InfoID;
        //     if (nameA < nameB) return -1;
        //     if (nameA > nameB) return 1;
        //     return 0;
        // });

        // // console.log(allData)
        // let filteredData = [...allData];

        // Dùng div đã có hoặc tạo mới
        let paginationContainer = document.getElementById('pagination');
        if (!paginationContainer) {
            paginationContainer = document.createElement('div');
            paginationContainer.id = 'pagination';
            paginationContainer.style.marginTop = '15px';
            document.querySelector('#sport-plugin-tab7').appendChild(paginationContainer);
        }

        function renderTable(data) {
            tableBody.innerHTML = '';

            const itemsPerRow = 4;  // 2 item mỗi dòng
            const start = (currentPage - 1) * itemsPerPage;
            const pageData = data.slice(start, start + itemsPerPage);

            if (pageData.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="8">No matching teams found.</td></tr>';
                return;
            }

            for (let i = 0; i < pageData.length; i += itemsPerRow) {
                const row = document.createElement('tr');

                for (let j = 0; j < itemsPerRow; j++) {
                    const item = pageData[i + j];
                    if (item) {
                        // const [id, name] = item;
                        const idCell = document.createElement('td');
                        idCell.textContent = item.InfoID;
                        row.appendChild(idCell);

                        const nameCell = document.createElement('td');
                        nameCell.textContent = item.NameEN;
                        row.appendChild(nameCell);
                    } else {
                        // Nếu không đủ item để điền, thêm ô trống cho cột ID và Name
                        const emptyCell1 = document.createElement('td');
                        emptyCell1.textContent = '';
                        row.appendChild(emptyCell1);

                        const emptyCell2 = document.createElement('td');
                        emptyCell2.textContent = '';
                        row.appendChild(emptyCell2);
                    }
                }

                tableBody.appendChild(row);
            }
        }

        function renderPagination(data) {
            paginationContainer.innerHTML = '';
            const totalPages = Math.ceil(data.length / itemsPerPage);

            // Previous button
            const prevBtn = document.createElement('button');
            prevBtn.textContent = 'Previous';
            prevBtn.className = 'button';
            prevBtn.disabled = currentPage === 1;
            prevBtn.style.marginRight = '10px';
            prevBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    updateView();
                }
            });
            paginationContainer.appendChild(prevBtn);

            // Next button
            const nextBtn = document.createElement('button');
            nextBtn.textContent = 'Next';
            nextBtn.className = 'button';
            nextBtn.disabled = currentPage === totalPages || totalPages === 0;
            nextBtn.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    updateView();
                }
            });
            paginationContainer.appendChild(nextBtn);
        }

        function updateView() {
            renderTable(filteredData);
            renderPagination(filteredData);
        }

         function removeVietnameseTones(str) {
            const accents = "áàảãạăắằẳẵặâấầẩẫậđéèẻẽẹêếềểễệíìỉĩịóòỏõọôốồổỗộơớờởỡợúùủũụưứừửữựýỳỷỹỵ";
            const withoutAccents = "aaaaaaaaaaaaaaaaadeeeeeeeeeiiioooooooooooooooooouuuuuuuuuuuyyyyy";
            
            return str.split('').map(char => {
                const index = accents.indexOf(char);
                return index !== -1 ? withoutAccents[index] : char;
            }).join('');
        }

        function applySearch() {
            const searchTerm = searchInput.value.trim().toLowerCase(); // Lấy từ tìm kiếm, chuyển về chữ thường
            const normalizedSearchTerm = removeVietnameseTones(searchTerm); // Loại bỏ dấu tiếng Việt

            filteredData = allData.filter(item => {
                const nameEn = removeVietnameseTones(item.NameEN?.toLowerCase() || ''); // Loại bỏ dấu tiếng Việt trong tên khác
                const nameTH = removeVietnameseTones(item.Name_TH?.toLowerCase() || ''); // Loại bỏ dấu tiếng Việt trong tên Thái
                const nameVN = removeVietnameseTones(item.Name_VN?.toLowerCase() || ''); // Loại bỏ dấu tiếng Việt trong tên Việt Nam

                return nameEn.includes(normalizedSearchTerm) ||
                    nameTH.includes(normalizedSearchTerm) ||
                    nameVN.includes(normalizedSearchTerm);
            });
            currentPage = 1;
            updateView();
        }

        searchInput.addEventListener('input', applySearch);

        // Initial render
        applySearch();
    });
</script>


