<?php
require_once('config.php');  # My Secret $FLAG

if (isset($_GET['src'])) {
    highlight_file(__FILE__);
    exit();
}

$ip_addr = $_SERVER['REMOTE_ADDR'];
?>

<!DOCTYPE html>
<html data-scale="large" data-background="secondary">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/4.0.2/tocas.min.css" />
        <title>動態定價 - Tocas UI</title>
    </head>
    <body>
        <div class="ts-content is-fitted">
            <div class="ts-container is-narrow">
                <div class="ts-tab">
                    <div class="item">貓咪罐頭</div>
                    <div class="item is-active">定價</div>
                    <div class="item">安全防護</div>
                    <div class="item">下載</div>
                </div>
            </div>
        </div>
        <div class="ts-divider"></div>
        <div class="ts-content is-vertically-very-padded">
            <div class="ts-container is-narrow">
                <div class="ts-header is-huge is-center-aligned is-heavy">選擇最適合您的定價方案</div>
                <div class="ts-space"></div>
                <div class="ts-text is-center-aligned">
                    在這裡擺放一些能夠吸引客戶選擇高價方案的話術，就像是如果選擇進階方案的話我們就送你一隻貓咪之類的事情。<br>
                    如果這還不夠，就告訴他們在 24 小時之內做出選擇就再額外送他一隻好棒棒鯊魚布偶。（<a href="?src=1" target="_blank">Source Code</a>、<a href="/slash-api/nginx.conf" target="_blank">NginX Config</a>）
                </div>
                <div class="ts-space is-large"></div>
<?php if (in_array($ip_addr, LOCAL_IP)) {  # Access From Local IP Addresses ?>
                <p>Hi <?= $ip_addr ?>, your flag is: <?= $FLAG ?></p>
<?php } else { ?>
                <p>Hello <?= $ip_addr ?>, there is no flag for you.</p>
<?php } ?>
                <div class="ts-space is-large"></div>
                <div class="ts-grid is-3-columns">
                    <div class="column">
                        <div class="ts-box">
                            <div class="ts-content is-dense is-tertiary">
                                <div class="ts-header is-center-aligned is-heavy">免費版</div>
                            </div>
                            <div class="ts-divider"></div>
                            <div class="ts-content is-center-aligned">
                                <div class="ts-wrap is-center-aligned is-middle-aligned is-compact">
                                    <div class="ts-header is-huge is-heavy">$<span id="free-price">...</span></div>
                                    <div class="ts-text is-big is-secondary">/ 月</div>
                                </div>
                                <div class="ts-space"></div>
                                <span id="free-license">...</span> 次可用授權<br />
                                <span id="free-storage">...</span> GB 雲端儲存空間<br />
                                Email 客服中心優先支援<br />
                                教學影片免費觀賞
                                <div class="ts-space is-large"></div>
                                <button class="ts-button is-fluid is-outlined">免費申請</button>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ts-box">
                            <div class="ts-content is-dense is-tertiary">
                                <div class="ts-header is-center-aligned is-heavy">基本版</div>
                            </div>
                            <div class="ts-divider"></div>
                            <div class="ts-content is-center-aligned">
                                <div class="ts-wrap is-center-aligned is-middle-aligned is-compact">
                                    <div class="ts-header is-huge is-heavy">$<span id="basic-price">...</span></div>
                                    <div class="ts-text is-big is-secondary">/ 月</div>
                                </div>
                                <div class="ts-space"></div>
                                <span id="basic-license">...</span> 次可用授權<br />
                                <span id="basic-storage">...</span> GB 雲端儲存空間<br />
                                24 小時客服支援<br />
                                教學影片免費觀賞
                                <div class="ts-space is-large"></div>
                                <button class="ts-button is-fluid">開始使用</button>
                            </div>
                        </div>
                    </div>
                    <div class="column">
                        <div class="ts-box">
                            <div class="ts-content is-dense is-tertiary">
                                <div class="ts-header is-center-aligned is-heavy">專業版</div>
                            </div>
                            <div class="ts-divider"></div>
                            <div class="ts-content is-center-aligned">
                                <div class="ts-wrap is-center-aligned is-middle-aligned is-compact">
                                    <div class="ts-header is-huge is-heavy">$<span id="pro-price">...</span></div>
                                    <div class="ts-text is-big is-secondary">/ 月</div>
                                </div>
                                <div class="ts-space"></div>
                                <span id="pro-license">...</span> 次可用授權<br />
                                <span id="pro-storage">...</span> GB 雲端儲存空間<br />
                                即時性電話與郵件支援<br />
                                教學影片免費觀賞
                                <div class="ts-space is-large"></div>
                                <button class="ts-button is-fluid">升級方案</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            fetch('/slash-api/pricing.php')
            .then(resp => resp.json())
            .then(resp => {
                for (plan in resp) {
                    for (attr in resp[plan]) {
                        let elem = document.getElementById(`${plan}-${attr}`);
                        elem.innerText = resp[plan][attr];
                    }
                }
            });
        </script>
    </body>
</html>