<?php
/*
// 初始化一个 cURL 对象
$curl = curl_init();

// 设置你需要抓取的URL
curl_setopt($curl, CURLOPT_URL, 'https://www.thhs.ntpc.edu.tw');

// 设置header
curl_setopt($curl, CURLOPT_HEADER, 1);

// 设置cURL 参数，要求结果保存到字符串中还是输出到屏幕上。
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

// 运行cURL，请求网页
$data = curl_exec($curl);

// 关闭URL请求
curl_close($curl);

// 显示获得的数据
var_dump($data);
*/
?>
<?php
//phpinfo();
include_once("wp-config.php");
get_header();
//2022年累積學員總數
//送訓企業數
//累積開設班級數
//橫跨產業
//臉書累積會員書


$dashboard_acc = array();
###trainees_count###
$dashboard_acc['trainees_count'] = 9000;

###corporate_training_count###
$dashboard_acc['corporate_training_count'] =1900;

###number_of_classes_count###
$dashboard_acc['number_of_classes_count'] =72;

###industries_count###
$dashboard_acc['industries_count'] =72;

#####FB#####
//https://developers.facebook.com/docs/graph-api/reference/page/
//https://stackoverflow.com/questions/54877083/php-curl-to-verify-facebook-api-login-access-token-on-server
//https://developers.facebook.com/apps/

//short token have to get from fb web
$id = '338812755004066';//ID for fb_develop_app
$pw = '105e08f7c6677b2e09550f58ed05d1f6';

function getLongLivedToken($token){

    $id = '338812755004066';//應用程式的ID
    $pw = '105e08f7c6677b2e09550f58ed05d1f6';
    $url = 'https://graph.facebook.com/oauth/access_token?grant_type=fb_exchange_token&client_id='.$id.'&client_secret='.$pw.'&fb_exchange_token='.$token;
    echo $url;
    return json_decode(file_get_contents($url), true);

}

if(0){
    $result = getLongLivedToken('EAAE0Jf3oSqIBAPBR542H5XAU2b1b2EAS91bKHLgVC6JUmncZCZBRPDCdZCu5SQq5itLW8OFSB1AMZACsIDrHU6m183DF4B5YA6SKWJOiDRkx01GwOW9UU1RdpR9gZBvOszQtxUrO8mU3rzk6XlJIm2P7nJX5ZBJA1PuaBPiwjpPgZDZD');#用戶token
    $long_token = $result['access_token'];//toke for app
    print_r($result['access_token']);
}

if(0){//try to refresh token (no sure)
    //test use long token renew long token
    $result = getLongLivedToken($long_token);
    print_r($result);
}

/*
//use app token get personal info (include  fan page  token;)
$curl_facebook1 = curl_init(); // start curl
//$url = "https://graph.facebook.com/v13.0/5179043732156978/accounts?access_token=".$facebook_access_token;//EAAE0Jf3oSqIBAGZA5tnhcQ6d4xi8lQP6TDk9Cll217ZBeaTVOhmOM1r53hPxSTDRD4bWcUIlAS4MjETXAZCiEHD5FvjGT0nR8ijn26grMpmdsj0vzwELbz1OgJQwXXLMGDlYG9USfU1yG9RPsAR3rMTOqHlQXMq6kZBXAKhkxJrnRrGv5oeh";

$url = "https://graph.facebook.com/v13.0/5179043732156978?fields=accounts&access_token=".$long_token;//EAAE0Jf3oSqIBAGZA5tnhcQ6d4xi8lQP6TDk9Cll217ZBeaTVOhmOM1r53hPxSTDRD4bWcUIlAS4MjETXAZCiEHD5FvjGT0nR8ijn26grMpmdsj0vzwELbz1OgJQwXXLMGDlYG9USfU1yG9RPsAR3rMTOqHlQXMq6kZBXAKhkxJrnRrGv5oeh";
curl_setopt($curl_facebook1, CURLOPT_URL, $url); // set the url variable to curl
curl_setopt($curl_facebook1, CURLOPT_RETURNTRANSFER, true); // return output as string
$output = curl_exec($curl_facebook1); // execute curl call
curl_close($curl_facebook1); // close curl
$decode_output = json_decode($output, true); // decode the response (without true this will crash)
print_r($decode_output);

die("break");
*/

//get follow count
$curl_facebook1 = curl_init(); // start curl
$url = "https://graph.facebook.com/v13.0/326722567370291?fields=followers_count,is_webhooks_subscribed&access_token=EAAE0Jf3oSqIBAPBR542H5XAU2b1b2EAS91bKHLgVC6JUmncZCZBRPDCdZCu5SQq5itLW8OFSB1AMZACsIDrHU6m183DF4B5YA6SKWJOiDRkx01GwOW9UU1RdpR9gZBvOszQtxUrO8mU3rzk6XlJIm2P7nJX5ZBJA1PuaBPiwjpPgZDZD";

curl_setopt($curl_facebook1, CURLOPT_URL, $url); // set the url variable to curl
curl_setopt($curl_facebook1, CURLOPT_RETURNTRANSFER, true); // return output as string
$output = curl_exec($curl_facebook1); // execute curl call


$info = curl_getinfo($ch);
print_r($info['request_header']);

if(curl_errno($output))
    echo 'Curl error: '.curl_error($output);

curl_close($curl_facebook1); // close curl
$decode_output = json_decode($output, true); // decode the response (without true this will crash)

//echo "<br>".$decode_output;
//print_r($decode_output);
//print_r($decode_output['is_webhooks_subscribed']);
//echo "<br>";
//print_r($decode_output['followers_count']);

$dashboard_acc['is_webhooks_subscribed'] = $decode_output['is_webhooks_subscribed'];
$dashboard_acc['followers_count'] = $decode_output['followers_count'];

###competition_cases_count
$dashboard_acc['competition_cases_count'] = 100;//AI產業化創新競賽案例數

###project_count
$dashboard_acc['project_count'] = 130;//技術實作發表專題案例數


//front start...
/*
foreach($dashboard_acc as $key => $value){
    echo $key. "=>". $value ."<br>";
} 
*/

?>
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="0">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<div class="text-center my-4 py-4">
    <!--<img src="/img/logo.svg" style="width:3em">-->
    <h1 class="title">AIA dashboard</h1>
    <div class="">AIA 儀表板    </div>
</div>

<div class ="dashboard_layout safari_only">

    <div class = "box rectangle_box box1" style = "background-color:rgb(28 0 165);">
        <p class="box_number text-center trainees_count"></p>

        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">2022年累積學員總數</p>
        </div>

    </div>

    <div class = "box square_box box2" style= "background-color:rgb(234 1 140);">
        <p class="box_number text-center corporate_training_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">送訓企業數</p>
        </div>
    </div>

    <div class = "box square_box box3" style= "background-color:rgb(253 139 1);">
        <p class="box_number text-center number_of_classes_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">累積開設班級數</p>
        </div>
    </div>

    <div class = "box square_box box4" style= "background-color:rgb(3 158 72);">
        <p class="box_number text-center industries_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">橫跨產業</p>
        </div>
    </div>

    <div class = "box square_box box5" style= "background-color:rgb(252 240 4);text-shadow: #888 0.1em 0.1em 0.2em ;">
        <p class="box_number text-center followers_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">臉書累積會員書</p>
        </div>
    </div>

    <div class = "box square_box box6" style= "background-color:rgb(85 147 192);">
        <p class="box_number text-center competition_cases_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center">AI產業化創新競賽案例數</p>
        </div>
    </div>

    <div class = "box square_box box7" style= "background-color:rgb(119 48 120);">
        <p class="box_number text-center project_count"></p>
        <div class= "box_indicator_outer">
            <p class="box_indicator text-center ">技術實作發表專題案例數</p>
        </div>
    </div>
</div>

<div>

</div>


<style>
.text-center{
    text-align:center;
}

.dashboard_layout{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    width:40vw;
    min-height:200px;
    margin:5vw 10%;
    overflow:hidden;
    padding:2vw;
}

.title{
    margin-top:5vw;
}

div.box{
    display:flex;
    flex-wrap:wrap;
    align-content:center;
    align-items: center;
    justify-content: center;
    background-color:blue;
    color:white;
    height:17.5vw;
}

.square_box{
    margin-top:1vw;
    width:17.5vw;
}

.rectangle_box{
    width:40vw;
}

p.box_number{
    font-size:60px;
    width:100%;
    margin:0px!important;
}

.box_indicator_outer{
    position: absolute;
    height: 20vw;
    display: flex;
    width: 40vw;
    align-items: flex-end;
    justify-content: space-around;
    padding-bottom: 50px;
}

p.box_indicator{
    font-size:20px;
    margin:0px!important;
}


<?php
$i = 0;
foreach($dashboard_acc as $key => $value){
    $str_i = "".$i;
    echo <<<EOF
    @property --num$str_i{
        syntax: "<integer>";
        initial-value: $value;
        inherits: false;
      }
      
      .$key {
        transition: --num$str_i;
        counter-set: num var(--num$str_i);
        font: 800 40px system-ui;
        animation: count$str_i 1s;
      }
      
      @keyframes count$str_i{
        from{
          --num$str_i:0;
        }
        to{
          --num$str_i:$value;
        }
      }
      
      .$key::after {
        content: counter(num);
      }
    EOF;
    // 结束需要独立一行且前后不能空格
    $i +=  1;
}
?>

/*try setting only safari*/
/* Safari 10.1+ (alternate method) */

@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    <?php
    $i = 0;
    foreach($dashboard_acc as $key => $value){
        $str_i = "".$i;
        echo <<<EOF
        .$key::after {
            content: "$value";
        }
        EOF;
        // 结束需要独立一行且前后不能空格
        $i +=  1;
    }
    ?>
}}
</style>