<?php
function bongdako_shortcode_compare()
{
    $assets = plugin_dir_url(__FILE__) . '/';
    ob_start();
    add_action('wp_footer', function () {
        bongdako_assets_js();
    });
    ?>
    <link href="<?= $assets ?>style.css?v=<?= ASSETS_VERSION ?>" rel="stylesheet">
    <div class="game-compare">
        <!-- <div class="title-tm"><?php echo __('NHẬN ĐỊNH KÈO', 'sport') ?></div> -->
        <div class="list-game"></div>
    </div>
    <script>
        function fetchPrediction() {
            var dbUrl2 = "<?= DB_DOMAIN ?>";
            var dbIMGS32 = "<?= IMGS3 ?>";
            fetch(`${dbUrl2}/ajax/match/prediction`)
                .then(response => response.json())
                .then(data => {

                    const matchData = data;

                    matchData.slice(0, 2).forEach(match => {
                        const game = document.createElement("div");
                        game.className = "game-cmpr";
                        game.onclick = () => {
                            let slugDt = `${toThaiSlug(match.HomeName)}-${toThaiSlug(match.GuestName)}-${match.ScheduleID}`;
                            const url = window.match_analysis_url ? window.match_analysis_url + "/" + slugDt : "#";
                            window.location.href = url;
                        };

                        game.innerHTML = `
            <div class="game-des">${match.SclassName}</div>
            <div class="logos">
                <div><img src="${dbIMGS32 + match.UrlHomeLogo}" alt="${match.HomeName}" onerror="this.src='<?= IMGS3_PLUGINS ?>/assets/images/home_1.svg';"></div>
                <span>-</span>
                <div><img src="${dbIMGS32 + match.UrlGuestLogo}" alt="${match.GuestName}" onerror="this.src='<?= IMGS3_PLUGINS ?>/assets/images/away_1.svg';"></div>
            </div>
            <div class="infos">
                <div class="d-flex t-r comment-team-home">
                    <div class="team-name">${match.HomeName}</div>
                    <div class="team-rate">${match.HomeWinPercent}%</div>
                </div>
                <div class="d-flex t-r comment-team-away">
                    <div class="team-name">${match.GuestName}</div>
                    <div class="team-rate">${match.GuestWinPercent}%</div>
                </div>
                <div class="d-flex t-r">
                    <div class="draw-name">Hoà</div>
                    <div class="team-rate">${match.DrawPercent}%</div>
                </div>
            </div>
        `;

                        document.querySelector(".game-compare .list-game").appendChild(game);
                    });


                })
                .catch(error => console.error("Failed to fetch league rank data:", error))
                .finally(() => {

                });
        }

        fetchPrediction();
    </script>
    <?php
    $content = ob_get_contents();
    ob_end_clean();
    return $content;
}

add_shortcode('bongdako_compare', 'bongdako_shortcode_compare');